How to make Flash apps for the iPad (For Designers:)
by Matt Wasser 26/7/11
Want to make apps for the iPhone and iPad, but clueless about where to start? Until Autumn 2010, developing for Apple's wondertoys has been a closed shop. The standard programming language used for creating apps for Apple's iOS is Objective C, so if you come for a design background, that's highly off-putting. But a new dawn for Flash is here at last. It feels like the early days of the web.
When I tell people I'm making iPad apps in Flash, they all say the same thing: 'but I thought Flash doesn't work on the iPad?' Well, websites made in Flash are still not supported on the iPad, which is a shame, but there is now a new direction for Flash from the appearance of Adobe Air, which allows you to make apps for the iPad, and iPhone. This is great news for Flash animators like me, who know a bit of code, but will never be full-on developers. I can now see myself becoming a hybrid of the two.
This ray of sunshine comes in the form of Adobe Flash CS5.5 combined with the Air packager. After a 2-3 week wait for my iPad 2 in London, and then another wait to get my Apple Provisioning license setup, I could at last test out some animation on my iPad. I started with the Air 2.6 installed, and the results were quite slow, but I was still excited. My vector graphics looked stunning on the iPad's screen. And then came the Air 2.7 SDK. The change in speed in CPU mode was instant and incredible. It apparently speeds up your app 4 times faster.
The following is my early findings so far. I can't say I've tried everything, and each day comes a new wall to climb and sometimes a eureka moment. I'm having to learn Actionscript 3 at the same time as testing on brand new device. Everyone on Adobe's Mobile Forum is a pioneer. The map for interactive touch screen development is still being written..
If any of this info is incorrect or needs updating, please email me. Expect this blog to constantly change with new findings, more tutorials, and downloadable FLA files in the coming weeks.
I have started a new blog on my character brand site Frosby.net. Check it out for articles on designing for the kids market.
My second app is live! (Apple)
by Matt Wasser 11/4/12
My second finished app 'Frosby Learning Games' has just hit the appstore. Just days later I was thrilled to find Apple featured it in the iTunes 'New and Noteworthy' iPad Education category in the USA, UK and China!
This one is even more experimental than the first, and I've used many more AS3 tricks that I've picked up along the way. This early learning app features fun counting games, the ability to 'rub out' images on the screen using a masking code and 2 drag and drop games starring a cute scarecrow and a scene in which you have to roll snowballs to build and dress a snowman. Considering I didn't know how to code a button in AS3 a year ago, I'm pretty chuffed I pulled it off!
My first app is live! (Apple + Android)
by Matt Wasser 16/10/11
I am now busier than I've ever been. Back in September '11, with several apps in progress, I decided to concentrate on a children's Vampire story I'd written on holiday, with a Halloween deadline to motivate me. I worked extremely hard for a month, relying on all the code and AS3 template I'd built up over the past few months. The result is 'Vlad's Vampire Bats.' Best results on the iPad 2.
If anyone has learnt anything from my articles, please show your support and buy an app - if only to see how it runs on your device! Thanks :)
Vlad's Bats is now available on the Amazon Kindle Fire. USA store only :
My tutorial will give you the basics to get you started, but if you want to go further:
For a really detailed book about everything you need to know about Flash to iOS development, make sure you get this. It's written by Flash developer Christopher Caleb, who has written it clearly enough even for designers like me who are learning to code. The book and eBook combo comes with the downloadable Flash files with the code covered in each chapter!
Getting your Apple license and setting up in Flash
I was expecting the process to be much more complicated. It's actually not too bad if you're a flash user. You have to take some admin steps to get your provisioning codes, but after that, it's all done through iTunes. Here are the steps. Useful links are below.
- You'll first need to buy an Apple Developer licence first, which costs $100 a year. You cannot even test your app on a device until you have this.
- You need to have an Apple mac running Snow Leopard to be able to make apps in Flash. You can also use Lion, but it is too new to say if this is a good move!
- You don't need to download Apple's Xcode software. The last step is done through itunes. In the Air to iOS box > delployment tab > click the 'More Info' button for help.
Setting up your iPad project in Flash
Open Flash CS5 or 5.5. File > New > Select Air for iOS. Now we'll set it to the iPad's resolution. Click Modify > Document > set the size to 1024 width by 768 height. Next we'll set up our export settings. Click File > Air for iOS. Here is what the dialogue box looks like:
The screenshot above shows the settings I'm currently using.
- Output file: When you've setup your Deployment settings in the following tab, you can click publish to export your self-contained .ipa file, which you can drag into your iTunes app folder.
- Aspect Ratio: I fix mine in Landscape
- I choose Full screen, which does not show the Wi-Fi and time at the top of the iPad screen.
- I leave 'Auto orientation' off, otherwise I'll need to do some coding to get the screen to flip.
- Device: I set this for both, but the ratios are slightly different. I still need to test my apps on the iphone. I'll update this when I do!
- I set Resolution on high, but there is no noticable difference on my iPad screen.
- Include files. When you publish your Flash file for the first time, an XML file is created. You don't need to edit this, but if you open it up, it's a good way of testing if your Air 2.7 SDK is installed correctly. Check the second line of code in theXML file:
- The SWF file gives you a good idea of how your app looks and you can check if some of the interactivity is working. However, if you use GESTURE and TOUCH events, this code will only work on your iPad device. The true speed of your app can also only be previewed on the device.
- If you click the + symbol, you can add your file named 'Default.png' (it's case sensitive). This is the static image that appears as your app is loading. If you're in Landscape mode, your png should be a 1024x768 image rotated counted clockwise (says Adobe). Although mine appears upside down. Maybe this is because I'm in testing mode.
Deployment Settings
- This is where it gets a bit tricky, but once you've got your codes from Apple, you'll be fine. More about this when I get time.
Icons
- In the third tab, you can add your icons. In your Flash folder, keep a folder named icons. Inside, save your icons like this: icon72.png. Then import them by clicking the folder symbol.
My Flash to iPad iOS tips
- Bitmaps move faster than vector graphics, however, I like to use vectors so that I can scale my images.
- Complex static vector backgrounds could be converted to PNG, which will speed up any animated MovieClips on top.
- Try to avoid masks, Effects made in Flash, images with Alpha, and overlapping graphics. - Use CPU mode for projects with mostly vector graphics, and GPU mode for projects with bitmaps and a lot of movement.
- Previewing your app on-screen appears much faster than on the device, so testing your app regularly on an Apple device is essential.
- The Air to iOS software defaults to 'LOW' quality, so if you're using Vector images, they will appear slightly pixellated. to correct this, add this line of AS3 code to your first frame:
- Experiment with frame rate to see what effect you get. (24-60fps)
- Large animated objects will play faster than small ones, so I assume that the same animated content created for the iPad will run faster on the latest iphone. But do test on every device if you can.
- Clustering your movie with too many animations will cause slowdown. Try to keep it simple in the beginning. The devices and the Air SDK are bound to get speedier as time goes on.
CPU Vs. GPU mode
In the Air for iOS settings panel > Rendering tab, you have a choice between CPU and GPU. In CPU mode, the device renders all the content in each frame at a time. CPU is best for projects with vector graphics. GPU mode will be better for complex projects using a lot of movement, such as games. In GPU mode, you will need to optimise your images, using the 'cache as bitmap' or 'Export as bitmap', which can be found in the Properties panel > Display > Render tab, after you have clicked on a Movie Clip. The device's GPU will store bitmaps in memory, so that they do not have to be redrawn again and again.
Currently there is a bug in Air 2.7, which means fullscreen mode is not supported and Flash filters do not work. Because I have a wood texture overlay on top of my vector artwork underneath, I have to use CPU mode. It's fine for what I'm doing.
Troubleshooting
- On a couple of occasions, I've found that Flash sometimes thinks a MovieClip is a button, and this will block any interactivity on buttons placed underneath it. For example, I have a large MovieClip with the instance name 'woodtexture' over the top of my content. Here is a line of code which I had to use to disable it. Basically, I'm telling it: damn you - you're not a button!
This code is also useful if you want to turn off buttons on some frames, and then reactivate them later, by removing the code, or setting it to 'true.'
- Sound: When I started my first Air for iOS project, I imported a lot of animated MovieClips into the new file. These MovieClips had sound files on the timeline, and although I set them all to 'stream' I got bugs when I published my app. I can't say whether this was an error I made in AS3, or if it's an Air bug. In any case, to avoid this I now load sounds from the library in code instead.
If you've learnt anything from my articles, please show your support and buy & review my app - if only to see how it runs on your device! Thanks :)
Vlad's Bats is now available on the Amazon Kindle Fire. USA store only :
My tutorial will give you the basics to get you started, but if you want to go further:
For a really detailed book about everything you need to know about Flash to iOS development, make sure you get this. It's written by Flash developer Christopher Caleb, who has written it clearly enough even for designers like me who are learning to code. The book and eBook combo comes with the downloadable Flash files with the code covered in each chapter!
For Flash animation, app creation, or feedback, please contact: apps@frosby.net
Essential links
What's new in Flash CS5.5 (Video Overview)
Adobe's getting started with Air pages
Join the Apple Developer Program
Adobe's mobile developer Forum
An overview for Multitouch and Gesture code in Flash
Adobe's Multitouch Gesture Reference guide
Republic of Code's excellent Flash tutorials