ActionScript 3.

0, Flash CS6 and Mobile Apps

May 25, 2012William B. SandersLeave a commentGo to comments

Cave drawing from Chauvet-Pont-d'Arc Games, Art and Flash In looking for some game images for this post, I came across one of the cave drawings from ChauvetPont-dArc, 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 mobileprimarily 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:

Figure 1: Desktop animaiton

Figure 2: Timeline and keyframes All of the tweens have been removed from the Timeline because tweens have not worked well with mobile (up to now, at least). The bison is made up of several moving parts that are positioned following Muybridges images. With only three frames between keyframes and ticking by at 24fps, it is about a third rougher than Muybridge who used roughly 12fps. (He just had the animals run by triggering a series of 12 cameras; so depending on how fast/slow the object was moving, the fps varies.) A remarkable feature of Muybridges work is that it was done before Edisons movie camera, and the images now removed by two centuries, still stand as one of the primary resources for animators in studying human and animal locomotion. The University of California, Riverside

collection simply took Muybridges photos and placed them into animated GIFs. You can do the same thing using keyframes in Flash. Worlds 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 dont have CS6 yet.)

Once you have your animation set up (use the download), you follow three steps to get youripa file for putting into your mobile device. Youll have to set up the accompanying files required by Apple (use Xcode) or check out the developers 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. Its a lot like CS5.5 with a few differences:

Fgiure 3: General menu in AIR for iOS settings 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 thats 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 didnt 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:

Figure 4: Deployment window

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 resized 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:

Figure 5: Added icons Finally, click on the Languages tab to include the languages that may be relevant to your app. Ive been trying to think in terms of icons that transcend languages, and then I can check off all of them.

Once youre all set, just click the Publish button and wait for it to generate youripa 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:

Figure 6: Completed Flash App and App Launch button So there you have it, a Flash animation (such as it is) app on a mobile deviceactually 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. Wheres 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, Id like to use Flash Builder 4.6, and Id like to begin looking at AIR 3.3 (download) and Flash Player 11.3 (download)while youre 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. Im 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 theyre 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, Id 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 weve 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 dont need a lot of help with the nitty gritty of setting up their work environment, and through examples with Flash Pro and Flash Builder, theres no doubt theyll miss out on anything since most of what this blog does is with ActionScript 3.0.