Download a free trial of Adobe’s Edge software from AdobeLabs.com

Download the images to follow along with these tutorials by clicking here

Part 4

Part 5

1 OPEN THE START FILE
Download the exercise file for this tutorial by clicking here. Unzip it onto your desktop or another location of your choosing. Inside of the ZIP file you’ll find a file named Game.fla as well as a final folder that contains the completed files for reference. Open Game.fla in Flash CS5. Notice that on the Stage there’s a background, a title button, and a ball. In the Timeline panel, select frame 1 of the Actions layer and open the Actions panel (Window>Actions). Notice that the ball’s visible property is set to false by default. It will be used later.

2 SCREEN SIZES AND ORIENTATION
With nothing selected, notice that in the Properties panel (Window>Properties) the Stage size is set to 640 pixels wide by 960 pixels high, which is appropriate for an iPhone 4, but what about other iOS devices and Android devices? What about screen orientation? The image here shows different screen sizes to consider targeting. Sounds daunting but this doesn’t mean that different Flash files need to be made for each screen size. The graphics just need to dynamically change based on the screen size.

3 DEVICE CENTRAL
When creating projects for mobile, they’ll need to be tested on various devices, which is where Device Central comes in. With the Game.fla open, go to Control>Test Movie>In Device Central. This will launch Device Central and display the SWF on a device. Click Browse in the upper-right corner to test the SWF on another device. Click on the Flash tab to sort the devices to see all the devices that have the Flash Player. Search for Motorola Droid X. If it isn’t listed, refresh the device list by choosing Devices>Refresh Online Library. Double-click the Droid X to view its capabilities.

4 CREATE A LIST OF DEVICES TO TEST
Click-and-drag the Droid X image into the Test Devices panel. Click the Back icon (left-facing arrow) at the top of the Device Library panel to get back to the list of devices, and drag the Droid 2 and the iPhone profiles into the Test Devices panel, as well. Select Emulate Flash in the upper-right corner, and double-click on the Motorola Droid X in the Test Devices panel. Notice the Droid appears, with a gray bar at the top, which is where a browser bar would go. Since this is an app, click on the Display panel and enable the Set to Fullscreen checkbox. Then, in the menu bar, choose Test>Go to Beginning.

5 iOS DEVICES IN DEVICE CENTRAL
Double-click the iPhone profile in the Test Devices panel. Note the message “This file type of Game.swf is not supported on this device!” in the Info panel. This means Flash isn’t supported in the browser on iOS devices, but you can still create and publish iOS apps with Flash. For purposes of this tutorial, we’ll test on the Droid 2 and the Droid X.

6 CHANGE STAGE BEHAVIOR
Double-click the Droid 2 and then the Droid X. Notice how the graphics scale differently on each device, revealing the white background. To more precisely control these graphics, the Stage needs to be locked down first. In the Timeline panel back in Flash, select frame 1 of the Actions layer to activate it. In the Actions panel, set the Stage’s scale mode to “NO_SCALE” and the alignment to “TOP_LEFT.” To do this, enter the new ActionScript shown here. Test the movie (Control>Test>In Device Central) and notice how nothing scales when you view it in each device.

7 FIT OBJECTS TO STAGE
Now that the Stage and all graphics don’t automatically scale, we can manually control these elements. Back in Flash, click on the Stage to select the background. In the Properties panel, notice the movie clip instance name is bkgd_mc and that its X and Y position is based on the upper left-hand corner (0,0). In the Timeline panel, select frame 1 in the Actions layer to make it active. In the Actions panel, make the width and height of the bkgd_mc the same as the width and height of the Stage. To do this, enter the ActionScript circled here.

8 CENTER BUTTON
Now we want to center the Happie Fun Ball button on the Stage. Click it to select it, and notice that its instance name is intro_btn and that its center point is in the center of the button. To center the button on the Stage, make its X position equal to the Stage width divided by two. Make its Y position equal to the height of the Stage divided by two and that will center the image vertically. Enter the ActionScript circled here and test the movie. The button should now appear in the exact center.

9 USE CODE SNIPPETS
To get the game working quickly, code snippets can be used. Select the intro_btn, open the Code Snippets panel (Window>Code Snippets), and open the Actions folder. Double-click on Click to Hide an Object to insert this function into the Actions panel. Review the ActionScript and the comments in gray text. In the fl_ClickToHide_1 function, change the ball_mc’s visible property to true. Insert the line of ActionScript shown here. Test the movie and click on the button to see a red ball appear and the intro_btn disappear.

10 DEVICE-SPECIFIC CAPABILITIES
Flash can also tap into specific device capabilities unique to mobile such as accessing the camera, microphone, GPS, multitouch, and accelerometer. The accelerometer measures the movement of the device. In this case, the ball needs to move in the direction the device is tilted. The first step in doing this is to import the accelerometer class. On line 1 before all other code, enter the Accelerometer class: “import flash.sensors.Accelerometer;” and on line 2 enter the AccelerometerEvent class: “import flash.events.AccelerometerEvent;” as shown here.

11 ACCESS THE ACCELEROMETER
To use the accelerometer, an instance of the accelerometer needs to be created once the intro_btn is clicked. Do this by starting with the keyword “var” and defining the instance name (accel), and then using the new keyword to create the instance. Once it’s created, add an event listener that will call a function called “update” anytime there’s an update to the accelerometer. In other words, anytime the device is tilted. Scroll down to the bottom of the Actions panel and enter the ActionScript circled here.

12 MOVE GRAPHICS WITH ACCELEROMETER
Test the project in Device Central. (Note: Make sure to click on the button.) Select the Accelerometer tab. Click to tilt the 3D device and notice nothing changes except the X and Y coordinates (which only change between –1g and 1g). These are the accelerometer’s propertyX and propertyY. To move the ball’s position we need to add these properties to the X and Y position of the ball. We also need to multiply the number by about 50 so it moves farther each update. Back in Flash, add the ActionScript circled in the image here.

13 PUBLISH AN APP FOR iOS DEVICES
To publish an app for iOS devices you’ll first need the Flash Professional CS5 update for iOS, which can be downloaded at www.adobe.com/support/flash/downloads.html. After you’ve downloaded and installed the update, open the Game.fla file and go to the publish settings (File>Publish Settings). Click on the Flash tab, select iPhone OS from the Player drop-down menu, and click on the Settings button. From here you can define the general settings for the app as shown in the image here.

14 DEPLOYMENT
Click on the Deployment tab. Here we’ll need an iPhone Digital Signature and a Provisioning Profile. The process for obtaining these can be complex and requires a membership to the iOS Developer Program (with a $99 fee). The Apple website has tutorials on how to obtain these at http://developer.apple.com. Insert these two items and click on the Icons tab to define icons. Click Publish to make an IPA file. Open iTunes and drag the file to the Apps section. Using the Ad-Hoc distribution certificate, sync your iPod, iPad, or iPhone to see the app on your device. Use your app store profile to submit.

1 OPEN STARTER FILES
Download the exercise file for this tutorial here and unzip it onto your desktop or another location of your choosing. Inside of the ZIP file you’ll find files named “video.fla” and “intro.mov,” as well as a “final” folder that contains the completed files for reference. Open video.fla in Flash CS5. Notice that in the Library panel (Window>Library) there are already graphics created that will be used in this tutorial.

2 CONVERT VIDEO FOR USE IN FLASH
The most common video file format used in Flash is the FLV format. To convert a video file to FLV, launch Adobe Media Encoder CS5 (found in the Applications folder on a Mac, the Program Files folder on a PC). Click the Add button on the right, locate the Intro.mov file that you downloaded, and then select Open. Select FLV | F4V from the Format column, then select FLV – Match Source Attributes (High Quality) from the Preset column.

3 CUSTOMIZE FLV EXPORT SETTINGS
To customize the export settings for a video, click FLV – Match Source Attributes (High Quality), which you just selected in the Preset column. Notice how you can trim the video, resize it, and even adjust the bitrate settings for both audio and video. In this case, you need to ensure that the alpha channel from the original video gets encoded into the exported video. Under the Video tab on the right, select Encode Alpha Channel, then select OK. Lastly, in the Output File column, save the file as “intro.flv” in the same location as the original intro.mov (set by default), and then click Start Queue.

4 IMPORT VIDEO INTO FLASH
Now it’s time to import the intro.flv into the video.fla. Choose File>Import>Import Video. When you’re asked where the video file is, select On Your Computer, click Browse, locate the intro.flv, and click Open. Select Load External Video with Playback Component; keeping the video external will keep the SWF that loads it small in file size. Click Continue and you’ll then be able to select a custom skin for the video. Choose the second skin, MinimaFlatCustomColorAll.swf, and then click the Color swatch to open the Color Picker and select a red to tint the skin. Click Continue.

5 FINISH IMPORTING VIDEO
The final import screen notes that a Flash Video component will be created on the Stage while an SWF file for the skin will be placed in the same location as the FLA file once you publish the SWF. If you’re going to upload this project to a Web server, than both the intro.flv and the skin SWF need to be uploaded once the project is published. Click Finish and the video with the selected skin will appear on the Stage. Test the movie (Control>Test Movie>Test) to watch the video. Close the playback window after watching the video.

6 EDIT VIDEO PARAMETERS
All of the video controls for the imported video are active on the Stage. Click the play button (or press the Spacebar) to play the video. With the video selected, open the Properties panel (Window>Properties) and notice how you can modify various video parameters. Confirm that autoPlay is selected, and note that both skinBackgroundAlpha and Volume are set to 1, which is 100% in Flash. Change the volume to 0.5 so it will be set to 50%.

7 ADD SPECIFIC VIDEO CONTROLS
In the Properties panel, click the pencil icon next to the name of the Skin to modify it. Select None for the skin and click OK. In the Timeline panel (Window>Timeline) select the video controls layer. Open the Components panel (Window>Components) and expand the Video folder. Click-and-drag the PlayPauseButton and the VolumeBar to the lower-left corner of the Stage.

8 CUSTOMIZE VIDEO CONTROLS
Double-click the Play/Pause button on the Stage to enter its symbol. Double-click it again to enter the PlayButton symbol. Notice how a Normal, Over, Down, and Disabled Play button appear. Each one of these buttons can be customized to your liking. Change the green outline to red in the Over and Down buttons. (To change the color, double-click a button twice, click the green outline to select it, and then change the Fill color to red.) Click on Scene 1 at the top-left to go back to the Stage.

9 ADD A CUE POINT
In order to sync up graphics with video, you’ll need to add cue points in the video. With the video selected, go to the Properties panel and near the bottom you’ll find the Cue Points section. Using the Add ActionScript Cue Point icon (+, plus sign) you’re able to add cue points to the video at certain times. Play the video, and when the presenter says “John,” add a cue point. Notice that “Cue Point 1” was added at about one second. Click on the name of the cue point and rename it “john.” Notice you can also edit the cue point time if needed.

10 ADD MULTIPLE CUE POINTS
Next, play the video and when the presenter says “agencies” (about nine seconds in) add another cue point. Rename “Cue Point 2” to “agencies.” Around 15 seconds in, when the presenter says “nonprofit,” add another cue point. Rename this one as “nonprofit.” Your cue points should look like the image above.

11 ADD A CUE POINT EVENT
Now you need to have Flash “listen” for these cue points that were added. But first you need to give the video an instance name. Select the video and at the top of the Properties panel, name the video “intro.” Now, open the Code Snippets panel (Window>Code Snippets) and expand the Audio and Video folder. With the video still selected, double-click on the On Cue Point Event. This will add the ActionScript shown above which will basically show the names of the cue points in the Output panel. Test the video to see it in action.

12 ADD GRAPHICS
Next, you need to add the graphics that will be displayed based on the three cue points. Open the Library panel and notice the john, agencies, and nonprofit movie clips. Select the john layer in the Timeline and then click-and-drag the john movie clip to the Stage. Use the Properties panel to set both the x and y position to 0. Next, drag the agencies and nonprofit movie clips to their appropriate layers and make sure their x and y position are set to 0. Test the movie and note that all the movie clips have animation and play at the same time.

13 SET UP GRAPHICS
Since you don’t want all the movie clips to appear at the beginning of the movie, you need to set their visibility to false using ActionScript. In order to control the movie clips with ActionScript, they first need instance names. Select the john movie clip and in the Properties panel give it an instance name of “john.” Give the agencies movie clip an instance name of “agencies” and the nonprofit movie clip an instance name of “nonprofit.” Select the first frame of the Actions layer and open the Actions panel (Window>Actions). Using those instance names, set the visibility of each movie clip to false as shown above.

14 DISPLAY GRAPHICS BASED ON CUE POINTS
Now you can modify the cue point event listener. Change the trace statement to a conditional statement that will listen for a cue point. If a cue point is “heard,” the appropriate movie clip will become visible and the animation will play. Type in the ActionScript shown above and test your movie.

ALL IMAGES BY PAUL TRANI UNLESS OTHERWISE NOTED