Creative HTML5 visual effects

August 24th, 2010

HTML5 Starfield

I’ve left it rather late but of course I need to play the game! And it’s the last week for voting so if you’d like to see my session at SXSW please vote for me! I’ve never made it to SXSW before so it’d be great to have the chance to attend.

I think that the open web community has a lot to learn from the creative programming techniques we’ve all been working with in Flash for years, and it’s amazing how easy it is to transfer your knowledge.

So help me to show them how to Flash the open web, and who knows, I may just see you in Texas. :-)

Bookmark and Share

Kittens. On a conveyorbelt. On an iPhone.

August 15th, 2010

Kitten Conveyorbelt

As part of my ongoing research into many different technologies, I’ve finished my very first iPhone app, written in Objective C, The Kitten Conveyorbelt!

Kitten Conveyorbelt

As with any personal project I tried to keep the scope down to something that was actually possible to complete within the time I had available. So, I came up with the idea of Kittens. On a conveyorbelt. Passing along in front of your eyes, to help cheer you up. I even wrote a cheesy elevator music song and recorded it with my wife Jenny.

Oh, and they meow when you stroke them. Now I kinda think it’s so ridiculous it’s funny. And I really hope you get the joke too.

Kitten Conveyorbelt

Learning curve

Despite an excellent head start from Aral’s excellent training course, there was still quite a learning curve. It’s probably one of the harder technologies to master. The lower level and incredibly ugly Objective C syntax, manual memory management, and just getting used to how all the various elements work together.

Graphical programming

The other thing I noticed after having worked in various multi-media authoring systems (Flash, Director etc) for so long is how tricky it is to implement simple animated effects. Something that is a simple matter of basic timeline animation in Flash becomes a fairly lengthy process of exporting bitmaps and animating them in code. This is an area I’m very interested in exploring further in the future. (The conveyor belt graphics and weird cat heart thing were designed by my talented nephew, Jonathan).

But I have to say I enjoyed the development process. It’s kinda nice to get a bit lower level for once. And I really like iOS devices. We can learn an awful lot from the tactile and intuitive user interface.

Personal projects

It took me longer than I expected to make this simple app, probably about a month, on and off. Another reason why it’s essential to keep your personal projects limited in scope. But I have to admit a certain confidence crisis half way through this project, where I couldn’t believe how much time I was spending on something that was so clearly an insane idea!

App Store submission

The worst part of this whole process was the App Store submission, which was just hugely convoluted and obfuscated, which is really surprising considering how user friendly Apple products are. And I suddenly got extremely panicked after my friend Paul Neave had his app denied for “limited functionality”.

How much more limited can you get in functionality than kittens on a conveyorbelt? Thankfully though, Apple put it through late last night. Yay!

Kitten Conveyorbelt

The future of Kitten Conveyorbelt

I have big plans for this app. More functionality, more customisation, “screen saver” mode, iPad version, ability to put your own photos on a conveyorbelt, choose various versions of the kitten song or even your own music library… but this all depends how well this one does.

My next experiments with the iPhone will be more graphical tests. I’m currently looking at Cocos2D, Unity3D, and also just testing out how performance CoreGraphics is.

And as you can probably see from my blog lately, I’m also looking at AIR for Android. So don’t worry. There’ll be Kittens on Android soon :)

But check out Kitten Conveyorbelt on the App Store – I’d love to know what you think!

I’ll be talking more about this and my other explorations into different technology at my upcoming Flash on the Beach session, What the Flux!?.

And I know some of you don’t like Apple. And some of you don’t like Flash. But please try to be normal in the comments, OK? Thanks!

Bookmark and Share

San Francisco here I come

August 14th, 2010

IMG_5605

After a short stint back in my home town of Brighton, the seb_ly world tour continues! I’ll be in San Francisco for FITC and I’m really gonna have a hectic time! Here’s what I’ll be up to :

Monday :
10am Flash Games Programming workshop
Back with my full day of Flash games training – what’s not to like?
6pm San Flashcisco Meetup
At the Adobe offices, I’m really pleased I could squeeze in a presentation with my friends Donna and Patience who do a great job running the SF user group.

Tuesday
4pm Interview with Stacey Mulcahey (bitchwhocodes) at the Influxis Voodoo lounge.
Influxis are running they’re own unconference alongside FITC where they’ll have low key sessions from most of the speakers. And there’s free beer! Stacey asked if she could interview me for her session? Hell yeah! She’s such a cool person I love shooting the breeze with her. And I’m sure you’ll get some candid opinions from both of us…

Wednesday
11.15 Main session at FITC – Space Invading
This is my main presentation of the conference. Expect motion detection, previews of new projects and of course a few surprises. :-)

1.10 Zero to Awesome in 30 minutes – Voodoo Lounge session
My plan is to just write some cool code from scratch in 30 minutes. Wanna come tell me what to program? :-)

I’m leaving early on Thursday so I’m going to miss the second half of the day, which is a huge shame. But with so much squeezed in (not to mention the parties) it’s going to be a whistle-stop tour! Come say hi :)

Bookmark and Share

How to debug AIR for Android

August 9th, 2010

The requester of doom

At first, it seemed like no matter what I did I’d just get the Enter IP Address or Hostname requester in my AIR app. So, to get rid of this dreaded requester once and for all follow my handy debugging AIR Android checklist!

If you’re new to Air for Android I’d recommend checking Lee Brimelow’s getting started tutorials here and here, and a couple of extra tips here on my AIR Android getting started report.

It is currently a little fiddly to get debugging, but as Air for Android is still in beta, this will hopefully become more seamless in future. But in the current build, here’s a list of things to check:

  1. Check that your phone has debugging enabled in Settings-> Application Settings -> Development -> USB Debugging
  2. Make sure that USB storage on the phone is turned on. (These two settings are required to publish your apps onto the phone)
  3. Make sure both your computer and your device are connected to the same wi-fi network. Sounds obvious I know but sometimes my phone disconnects from the wi-fi.
  4. Within the Flash CS5 AIR Android Settings in the Deployment tab check the Device Debugging radio button.
  5. In the same settings, check Install Application on the connected Android device and uncheck Launch Application on the connected Android device.

    AIR Android debug settings

  6. Enable INTERNET_PERMISSIONS in your app by adding the following to your app’s xml config file. This should be in the same folder and have the same name as your fla file, but with the suffix -app.xml. Open it in your text editor of choice and add the following XML :
        <android>
            <manifestAdditions>
                <manifest>
                    <data><![CDATA[ <uses-permission android:name="android.permission.INTERNET" /> ]]></data>
                </manifest>
            </manifestAdditions>
        </android>

    Make sure you add this to the top of the XML, not the bottom! I put it between the <copyright> and the <initialWindow> definitions:

    ...
        <copyright></copyright>
        <android>
            <manifestAdditions>
                <manifest>
                    <data><![CDATA[ <uses-permission android:name="android.permission.INTERNET" /> ]]></data>
                </manifest>
            </manifestAdditions>
        </android>
        <initialWindow>
            <content>MyApp.swf</content>
    ...

    If you put it under the <initialWindow> definitions, the AIR Android extension seems to wipe it! It took me a while to work this one out, I expect they’ll fix it in the final build. I’ve also suggested that they set this permission by default if you’re publishing a debug build, it’d kinda make sense to me. :)

  7. Now you’re ready to publish the file, so hit Publish in the AIR Android Settings window. Your app will compile and get copied over to your device. But it won’t automatically run.
  8. Start remote debugging in Flash CS5: select the Debug -> Begin remote debug session -> Actionscript 3.0 menu item.

    Set up a remote debugging session

  9. And now run your app. With any luck, you should see the name of your swf in the debug output window.

    Yayz! We have AIR Android debugging!

    You may still get the Enter IP Address or Hostname dialogue box but I must admit I only ever saw this if I didn’t set up the other options correctly. But if you do see it try typing the local IP address of your computer first, then the global one.

  10. So! There you have it. Let me know how you get along and if there’s anything I missed.

    Bookmark and Share

iPhone AppStore submission gotchas

August 2nd, 2010

I’ve just had a couple of issues submitting my new iPhone app to the AppStore. I have to say, it’s quite a convoluted process. In xCode’s organiser window you have a couple of very handy big buttons to validate and submit the app, which sounds perfect!

Except that these buttons do absolutely nothing, and give you no feedback to tell you that they’ve done nothing unless you’ve already set up the app in iTunesConnect. I’ve also heard that Validate Application also does nothing if your app is in fact valid. Is that true? No confirmation message? I found more information here on the .net Developers’ Journal.

So I set up the app on iTunes connect but I got the app ID wrong (ly.seb.myappname rather than ly.seb.MyAppName – capitals count apparently!). So I thought it’d be easier to delete the app from iTunes connect and start over than it would be to rename the app ID in xCode.

Big mistake.

Although I’ve deleted the app it won’t let me re-submit as it says there’s already an app with the same name. The one that I’ve deleted. So it’s not really deleted, it’s kinda there in the ether somewhere.

Which means that I can re-upload my app unless I change the name. Which I don’t really want to do!

Needless to say I’ve emailed support to let them know and hopefully they’ll help me fix it. But I thought I’d post this up so you can avoid this in future.

Bookmark and Share

Top Cat music game on FlashPlayer on Nexus1

July 30th, 2010

I hate to say it but not many Plug-in Media projects are optimised for low end machines. We usually squeeze every bit of performance out of Flash to fill every part of the screen with crazy 3D, pixels and video!

But! We found one that works really well! And it works well for two reasons :

  1. It doesn’t stretch the processor (unlike our Papervision3D projects like Big and Small and Zingzillas)
  2. All of its interactions are via the mouse (unlike our games that are usually controlled with the cursor keys).

I reckon we could probably even squeeze a bit more speed out of it with judicious use of cacheAsBitmap, but as it is, entirely made with vectors, it runs pretty well!

Play Top Cat Alley Band for yourself.

The Plug-in team members on this project : Creative direction by Dom Minns, programming by Paul Hayes and Nicola Birtwistle, art by Richard Butler, music by Dom and his friends, produced by Ben Simpson.

Bookmark and Share

AIR for Android first steps

July 27th, 2010

My first AIR on Android app

Having finished my first iPhone app in Objective C I thought it was probably time to have a go at setting up my Nexus1 with AIR for Android. Yes. I’m a digital slut. And no. I’m not gonna pick a side. Deal with it. :-)

But anyway, I digress! I found Lee’s very cool intro to Android videos which have been a big help. But I did get a warning from Stephan Jones on Twitter who tells me that there is a virus on the site, so possibly make sure you’re running virus software first! UPDATE : Lee and Serge both assure me there’s nothing wrong with their sites so I can only assume Stephan’s virus checker was being a little overzealous!

A few things caught me out, if you navigate to the tools folder in terminal you can’t just type adb devices as the permissions on the files didn’t seem to be set right. the easy workaround is to type ./adb devices or else change the permissions with chmod if you like that sort of thing.

But the biggest thing was that it just wasn’t recognising my phone. I’m not sure if Lee mentioned it or not (maybe I wasn’t paying attention) but you need to turn on USB debugging on the phone itself. Go to Settings->Applications->Development->USB debugging. That’ll do it!

Also the link for AIR for Android wasn’t on the front page of Adobe Labs and it was surprisingly difficult to find it. But it’s here : http://labs.adobe.com/technologies/air2/android/

And finally I couldn’t actually get my app to deploy from Flash CS5 – the reason? I hadn’t turned USB Storage on – doh!

And it’s working! Lunar Lander on Android, anyone? ;-)

Bookmark and Share

3D globe in JavaScript with three.js

July 19th, 2010

3D globe in Javascript using three.js

In my last post I mentioned that it should be possible to make a 3D globe in JavaScript using three.js. I was even considering putting it together myself but I didn’t need to because the awesome Mr Doob stepped in to prove it!

Sadly I’m only seeing 1 frame per second right now in both Chrome and Safari – I’m not sure why? I’ll reboot in a moment and try again. But I’d be interested to know how it’s performing for you – apparently the Doobster is getting 28FPS (albeit on Linux/Ubuntu). Let me know.

Check out Mr Doob’s example here.

Bookmark and Share

Apple buys 3D Flash app

July 17th, 2010

Screen shot 2010-07-16 at 19.31.05

I just found this article about Apple acquiring 3D mapping company Poly9, whose site has been taken down since the acquisition.

As far as I can tell, the French-Candian Poly9 is most well known for their in-browser 3D globe, that on the surface looks like a JavaScript library but is actually Flash (albeit with HTML overlays). The right-click menu has been sneakily hi-jacked so it’s quite well disguised, although I’d recognise those scroll bars anywhere! (and of course check the generated source to see the Flash object embed tag).

I’d be very interested to see what Apple are hoping to do with this technology, I’m guessing they’ll be de-Flashifying it pretty soon, certainly a simple 3D globe like this should be possible in HTML5 Canvas with something like Mr Doob’s three.js.

I’m wondering if Poly9 own any other technology or patents that could be useful to them..?

[UPDATE see Mr Doob's JavaScript globe here.]

Bookmark and Share

Papervision3D training on Lynda.com

July 12th, 2010

Papervision3D Essential Training at Lynda.com

Remember when I disappeared mysteriously to LA for a week in February? I can now reveal that I was in Ventura, CA recording a 4 hour long tutorial series for Lynda.com that has just gone live!

It was such a great experience, the team at Lynda are so professional and they have many recording booths with the best gear. I think there were 6 courses being recorded while I was there so it’s quite a production! And they have teams of editors cutting out all the gaps, and fixing my mistakes (thanks guys :) )

So come learn about importing 3D models, particles, interactivity, ViewportLayers, and much, much more. I’d love to hear your feedback and find out how you get along so let me know!

Papervision3D Essential Training on Lynda.com

Bookmark and Share

Bad Behavior has blocked 793 access attempts in the last 7 days.