In looking for some game images for this post, I came across one of the cave drawings from Chauvet-Pont-d’Arc, France created about 17,300 years ago. All told, about 2,000 images decorate the cave walls in Lascaux. Some years ago, I copied one of the cave drawings and made a Flash animated bison based on the works of Eadweard Muybridge. (See the running bison here.)
I decided to kick things off with Flash CS6 and Flash Builder 4.6 with a simple animation to find out where things break with Flash and mobile—primarily iOS. This is not to criticize either Adobe or Apple. Things have changed, and I want to see what in Flash and ActionScript 3.0 we can take with us and what will have to be changed further. In this next series of posts, I want to create a simple animation. After all, animation was the original sine qua non of Flash. Once a mobile animation is established, move on to using ActionScript 3.0 in a mobile environment with the new versions of Flash.
Starting from Scratch: Animation Without Tweens
The first thing I want to do is to create a simple mobile app; so I took my animated buffalo (bison) and placed him on the desktop using an AIR for iOS template. Figures 1 and 2 show the basics of the app:
World’s Easiest Mobile App: 1, 2, 3
While this example shows how to set up a mobile app for an iOS device, Android is just as simple. Just use the AIR for Android template instead of the iOS one. All this does is to show an animated bison on the screen. You can download the files in Flash CS5 format here (just in case you don’t have CS6 yet.)
Once you have your animation set up (use the download), you follow three steps to get your ipa file for putting into your mobile device. You’ll have to set up the accompanying files required by Apple (use Xcode) or check out the developer’s guide for Android. In either case you can easily create an app using nothing more than the simple animation discussed (the download). Before going on, save the FLA files as ‘MobileBison.fla.’
First, select the Properties panel and open it, as shown in Figure 1. Now, click on the little wrench icon highlighted in Figure 1. Figure 3 shows what comes up. It’s a lot like CS5.5 with a few differences:
I left it as the default. The Aspect ratio is Portrait by default, and you might want to change it to Landscape or Auto. However, because the Render mod and orientation are both ‘Auto’ when you tilt your device, it will automatically change orientation.
Second, at the top of the AIR for iOS Settings window click the Deployment option. Figure 4 shows an example of what you will see with your Certificate and Provisioning profile set. My only advice on this is to work patiently with your Xcode developer (for iOS) to get your certificates and provisioning profiles squared away. Once that’s done, you can use the same ones for about a year (for development purposes). When I added my new iPad, it worked but only for my iPhone. All I had to do was to update my Xcode app to the latest version, and my new iPad was recognized. I didn’t even have to change my certificate or provisioning profile (or it was done automatically for me.) I leave mine on Quick publishing for device testing just to move the project along. Figure 4 shows the Deployment window after being filled out:
Third, and this step is optional, add your icons. I just took my logo and using Fireworks made sizes to match most of the sizes they had for iPhone and iPad. The same graphic was employed and re-sized in Fireworks. When I added two more for my iPad, a little jiggling around was required, but that proved to be just a matter of using the same folder as used for my certificate. Figure 5 illustrates what my icon page looks like:
Finally, click on the Languages tab to include the languages that may be relevant to your app. I’ve been trying to think in terms of icons that transcend languages, and then I can check off all of them. Once you’re all set, just click the Publish button and wait for it to generate your ipa file. On your computer, open iTunes, select “Apps” and drag and drop your ipa file into the iPhoe, iPod touch, and iPad Apps folder. Connect your iPad and/or iPhone, select iPad or iPhone in iTunes and select Apps. Click the Sync button, and your new app will be installed. Figure 6 shows the app and app button created with the single operation:
So there you have it, a Flash animation (such as it is) app on a mobile device—actually 2— an iPhone and iPad. It was easy, Flash CS6 made it so, and other than lacking a tween, we ought to be all set. In some respects, only.
Where’s The ActionScript 3.0 and Design Patterns?
The next step is to do something with the movie clip using ActionScript 3.0 and a design pattern. Further, I’d like to use Flash Builder 4.6, and I’d like to begin looking at AIR 3.3 (download) and Flash Player 11.3 (download)—while you’re downloading Flash Player, be sure to get the Flash Player 11.3 Beta Global SWC at the same URL. We can really extend Flash and Flash Builder with these Adobe Labs player and AIR updates. I’m expecting some very exciting things coming out of the labs and I think we would be well-advised to begin using them. The emphasis will remain on design patterns, but some new tools can be used even if they’re “Lab” tools that will make our creations run faster in a mobile environment. The operational speed will not be in the design patterns but in the new statements that we can use in classes that will be participants in a pattern. (DPs are for development and maintenance speed!)
Finally, I’d like to begin working with a little more sophisticated examples for the class content. Chandima and I have tons of easy design pattern examples so that we could focus on the structure. However, now I think we’ve reached a point where we can start working with SDKs in both Flash Pro and Flash Builder. I have no idea where Flex is going, but most Flex developers don’t need a lot of help with the nitty gritty of setting up their work environment, and through examples with Flash Pro and Flash Builder, there’s no doubt they’ll miss out on anything since most of what this blog does is with ActionScript 3.0.