Adobe released a powerful new text engine in Flash Player 10 called Text Layout Framework (TLF). At the time, there was no tooling support in Flash Professional to take advantage of it. In Flash CS5, however, there’s full support for easily doing things such as linked containers, multicolumn text, exotic ligatures, and enhanced support for languages such as Arabic and Japanese. Let’s take a tour of some of these new features.

1 SETTING UP FLASH CS5
If you’d like to use the same text that we’re using in this tutorial, you can download the exercise files from www.layersmagazine.com. Open Flash CS5 and when the Welcome Screen appears, click ActionScript 3 in the Create New section. The TLF is written entirely in ActionScript 3, so if you haven’t already transitioned to the new version of the language, here’s yet another reason to do so. Go under File>Save and save this new document to your desktop as “TLF.fla.”

2 TLF TEXT VS. CLASSIC TEXT
Double-click the name of the first layer in the Timeline and rename it to “Text.” Select the Text tool (T) and drag out a new text field that fills the top half of the Stage. At the top of the Properties panel you’ll notice a pull-down menu that by default is set to TLF Text. If you don’t want to use the new text engine you can change this to Classic Text, which is the name for the old text engine. There’s some additional file size and overhead with using TLF, so if you need simple text, it’s better to stick to classic text.

3 CHARACTER OPTIONS
Open the sampleText.txt file that you downloaded, and copy (Command-C [PC: Ctrl-C]) the English language text. Back in Flash, paste (Command-V [PC: Ctrl-V]) the text into the TLF text field. Select the text (Command-A [PC: Ctrl-A]), and in the Character section of the Properties panel, change the font Family to Adobe Caslon Pro and change the Size to 20 pt. Choose Readability in the Anti-alias pull-down menu. If your text field will be dynamic or editable, you’ll need to embed the font by clicking on the Embed button. This workflow hasn’t changed from previous versions of Flash, although there’s a new global Font Embedding dialog (Text>Font Embedding) to make font management much easier.

4 LINKED CONTAINERS
Linked containers allow you to link two or more individual text containers together so that text will flow through them. You should see a small red icon on the bottom-right of the text field on the Stage. Click on it and your cursor will change to one loaded with text. Now drag out a new text field somewhere on the Stage and you’ll notice a connecting line between them and also that the overflow text from the first text field flows into the second. Although the containers are linked, you can still style, position, and manipulate each text field individually.

5 LIGATURE SUPPORT
Delete the second text field you created in the last step and replace the text in the first one with the word “cost.” Increase the font size to 210 pt. Ligatures are special characters that replace certain combinations of letters in a font. Typographers take extra time to design beautiful-looking connections between characters and most people never even know they’re there. In the Advanced Character section of the Properties panel, change the value in the Ligatures menu from Common to Exotic. As you can see, this particular ligature is quite fancy, and using them can add a touch of class to your text.

6 MULTICOLUMN LAYOUTS
When dealing with large amounts of text, it’s often more readable to break the text into multiple columns similar to what you see in newspapers. Delete the text field on the Stage and create a new one that fills the Stage and change the font Size to 18 pt. Paste in the block of text from the text file. Go to the Container and Flow section of the Properties panel and set the Columns to 2. You should now see the text divided into two columns. You can also adjust the gap between the columns by adjusting the column gutters property to the right.

7 FUN WITH DIGITS
There are also some subtle options to choose from when it comes to displaying numbers. Fill the text field on the Stage with numbers, change the number of Columns back to 1, and increase the Size to 80 pt. Go to the Advanced Character section of the Properties panel and you’ll see two options for tweaking the way numbers appear in your text field. Change the Digit Case property to Old Style. This displays digits in a more old-fashioned style as designed by the typographer. Changing the Digit Width property to Proportional groups, the digits are grouped closer together based on the character’s proportional size.

8 VERTICAL TEXT ORIENTATION
Another simple thing that designers often want to do is to create text that’s laid out vertically. This wasn’t possible with the classic text field. Create a new TLF text field on the Stage, change the font Size to 22 pt, and type in a word. Now in the top of the Properties panel, change the orientation of the text to Vertical using the menu highlighted in the screen shot. Obviously, you still need to rotate the characters to make things look right. Change the Rotation to 270º in the Character section of the Properties panel. You now have vertical text.

9 JAPANESE TEXT
Properly displaying languages like Japanese in previous versions of Flash was next to impossible. Create a new TLF text field that fills the Stage. Change the font to Adobe ?? Std, which comes with Flash CS5. Open the sampleText.txt file and copy-and-paste the Japanese text into the text field and set the orientation to Vertical. When you test it, you’ll notice that text also selects vertically like it should. To see additional options for Asian languages, choose Show Asian Options in the flyout menu at the top of the Properties panel.

10 ARABIC TEXT
Another difficult language to display in Flash is Arabic, and other right-to-left languages. With the TLF, this has also been made simple. Create a new TLF text field that fills the Stage, set the orientation to Horizontal, change the Rotation back to 0º, and change the font to Adobe Arabic. Open the sampleText.txt file and copy-and-paste the Arabic text into the text field. Select Show Right-to-Left Options from the flyout menu at the top of the Properties panel. Now in the Paragraph section, you can change the Direction property to Right to Left.

11 HIGHLIGHTING TEXT
Another frequent request that Adobe received from designers was that they wanted the ability to highlight certain pieces of text with a different background color, similar to the way you can do it in programs such as Microsoft Word. Create a new TLF text field and enter in some text. Now use the Text tool to select one of the words you typed. In the Properties panel, under the Character section, you can change the Highlight color to anything you like. You can also change the selection color as well, but that requires writing some ActionScript code.

12 TLF WITH ACTIONSCRIPT
There are times that you’ll need the ability to change TLF properties dynamically at runtime using ActionScript. Create a new TLF text field on the Stage and paste in some text. Give the text field an Instance Name of “tf” at the top of the Properties panel. Select the first frame of the Text layer and open the Actions panel (Window>Actions). As an example, you can change the number of columns in the text field simply by setting the columnCount property as shown in the screen shot (test the movie to see the results). Most of the other properties can be set just as easily.

Integration with Adobe InDesign

For those of you who use Adobe InDesign, you may have noticed the similarities between the TLF and the text capabilities found in InDesign. This is no coincidence, as the InDesign team is the one who developed this amazing new text engine for Flash. There’s such fine-tune control available over text, that most Flash designers won’t ever want or need to use them all. But for designers who are trying to create beautiful reading experiences for new-generation devices like tablets, they’ll be able to faithfully translate the printed page into Flash.

InDesign CS5 also has the ability to export text layouts directly to Flash FLA files using the TLF. This means that designers can do their entire layouts for Flash directly in InDesign where they may be more comfortable. They can then export to an FLA file and pass it to the Flash developer. InDesign CS5 also has some new animation capabilities that allow designers to create basic interactive projects without even needing to open Flash. As publishers move to get their printed publications onto digital devices, InDesign combined with Flash, will be a vital workflow to make that happen.

1 OPEN THE STARTER FILE
Download the exercise file for this tutorial and unzip it onto your desktop or other location of your choosing. Inside of the ZIP file you’ll find a file named “FullBrowserFlash.fla.” Open this file in Flash CS4. This movie is set to publish to Flash Player 10 and uses ActionScript 3. It’s important to keep this last setting, as the code I’m about to show you will only work when targeting ActionScript 3. In the Library panel (Window>Library) you’ll see a couple of imported BMP files. These will be used to create a tiling background for the site.

2 CREATE SOME LAYERS
One of the images in the Library panel, named “placeholder,” will be used only during authoring so we can preview how things will look against the background. In the Timeline, double-click the first layer’s name and rename it “back,” then Right-click on it and choose Guide. (Note: A guide layer is only visible while authoring and doesn’t get exported with the movie.) Click the New Layer icon at the bottom of the Timeline panel and rename the layer “elements.” Create another layer and rename it “actions.” Click in the lock column for this layer; we’ll use it to hold our ActionScript.

3 SET UP THE BACKGROUND
With the first keyframe of the back layer selected, drag out a copy of the placeholder image from the Library panel to the Stage and position it at x:0, y:0 in the Property inspector (Window>Properties). We’ll use this just so we can see how our page elements look on the background as we design them. Now, Right-click on the tile image in the Library panel and choose Properties. If you don’t see the Linkage section at the bottom of the Bitmap Properties dialog, click on the Advanced button. Click the Export for ActionScript checkbox and give it a Class name of “Tile.” Click OK.

4 CREATE THE BLACK BAR
Both the header and the footer will contain a black bar to serve as their backgrounds. Select the first frame of the elements layer, get the Rectangle tool (R), and drag out a rectangle. Choose the Selection tool (V), click on the rectangle, and use the following settings in the Property inspector: x:0, y:0, W:825, H:93, Stroke Color: none, and Fill Color: black. Right-click on the rectangle and choose Convert to Symbol. Choose Movie Clip from the Type menu and give it a Name of “blackBar.” Click OK. Now give it an Instance Name of “headerBar” in the Property inspector.

5 CREATE THE TITLE TEXT
Fittingly, we’ll name this example site “Full Browser Flash.” Get the Text tool (T) and click somewhere on top of the header bar that you created in the last step. Enter the text “FULLBROWSERFLASH” in all caps with no spaces in it. With the text selected, give it the following in the Property inspector: select Static Text from the menu at the top; Family: Futura; Style: Condensed Extra Bold; and Size: 42 pt. Now select each word in the title using the Text tool and give them increasingly darker shades of gray. We chose #CCCCCC, #999999, #666666. Now position the text at x:27, y:18.

6 CREATE THE INFO BUTTON
Next you’ll create a simple info button that will always be positioned at the right side of the header bar. Click somewhere off the Stage to deselect the text. Get the Text tool again and change the font Family to Webdings. Create a text field that simply contains the letter “i”—you should see the info icon. Switch to the Selection tool then Right-click on this text and choose Convert to Symbol. Enter “infoButton” in the Name field, choose Button from the Type menu to create a button symbol, click OK, and then give it an Instance Name of “infoButton” in the Property inspector. Now position it at x:733, y:23.

7 CREATE THE HEADER MOVIE CLIP
You now have the individual components of the header. All that’s left to do is to wrap them all inside of a single movie clip. With the Selection tool and Shift-click the header bar, the title text, and the info button to select them all. Then, Right-click on them and choose Convert to Symbol. Choose Movie Clip from the Type menu, give it a name of “header,” and click OK. Give this new clip an Instance Name of “header” in the Property inspector. Later, in the ActionScript code, we’ll dynamically resize and position the elements in this clip whenever we detect that the browser has been resized.

8 CREATE THE FOOTER MOVIE CLIP
We’ll create a very simple footer for this example just so you can learn how to position things vertically when the browser resizes. Drag out a copy of the blackBar movie clip from the Library panel onto the Stage (on the elements layer), and give it an Instance Name of “footerBar” in the Property inspector. Position it at x:0 and give it a Height of 50 pixels. Don’t worry about setting the y position, as we’ll do that with code. Now Right-click on the clip and choose Convert to Symbol. Choose Movie Clip, give it a name of “footer,” and click OK. Give it an Instance Name of “footer” in the Property inspector.

9 START WRITING SOME ACTIONSCRIPT
Select the first frame of the actions layer and open the Actions panel (Window>Actions). Enter the code from the image above into the Actions panel. Line 1 simply creates an event listener that will call a function named stageResize, which we’ll create in a moment, whenever a user resizes their browser window. Lines 3–6 create the skeleton for this event handler function. It’s in this function that we’ll dynamically resize and reposition elements when the browser is resized. Line 8 simply calls this function once to position things correctly when the movie first loads.

10 FIND THE NEW WIDTH AND HEIGHT
The first thing we need to do in the stageResize function is to find out the new height and width of the Stage. We’ll use these values to appropriately resize and position our elements. Lines 5 and 6 create two int variables into which we put the current values of stage.stageWidth and stage.stageHeight. Putting these values into the int data type will automatically round the numbers off, as we don’t want to position things on a subpixel level. Doing things in this fashion will also slightly help the performance of the application. Enter the code you see in the image above into the Actions panel.

11 DRAW THE TILING BACKGROUND
Now it’s time to draw the background for our website. Enter the code shown in the image above into the Actions panel. Anytime we want to dynamically draw in Flash we use the graphics property of the movie clip we want to draw into. Line 8 sets up our fill using the beginBitmapFill method. To it we pass in a new copy of the tile image that we have in the library. On line 9 we draw a rectangle starting at position x:0, y:0 that’s the width and height of the Stage. On line 10 we simply end the fill to finish the drawing.

12 RESIZE THE BLACK BARS
Now that the background has been drawn, it’s time to resize the black bars in the header and footer to the correct size. Enter the code shown in the image above into the Actions panel. On line 12 we set the width of the headerBar, which is inside of the header movie clip, to the width of the Stage that we calculated in Step 10. Line 13 simply does the same thing for the footerBar movie clip as well. An alternative approach for this is to simply create the bars with a very wide width so they never need to be resized.

13 POSITION THE ELEMENTS
The last step is to position the various elements to their correct locations based on the new Stage size. Enter the code shown in the image above into the Actions panel. Line 15 repositions the info button so that it’s always 70 pixels away from the right side of the browser window. It never needs to be repositioned on the y-axis. Line 16 repositions the location of the footer movie clip so that it’s always at the bottom of the browser window. We simply set it to the height of the browser window minus the height of the footer clip.

14 SETTING UP THE HTML
Before you can accurately test your movie you need to set some properties in the Publish Settings window. Choose File>Publish Settings, then click on the HTML tab. Choose Percent from the Dimensions pull-down menu. Now choose No Scale from the Scale menu, Left and Top from the Flash Alignment menus, and click OK. Choose File>Publish Preview>HTML to test your movie in the browser. Resize the browser to see the dynamic adjustments. You can edit the HTML file to get rid of the white borders by setting a CSS style of body {margin:0;}.

At some point, nearly every Flash application needs to access some form of external data, which is usually in the form of an XML file. Learning how to load and process an XML file is a vital skill to have in your Flash arsenal. In this tutorial, we’ll load in data from an XML file and display it inside of the built-in DataGrid component in Flash.

1 VIEW THE STARTER FILES
Download the exercise file for this tutorial at www.layersmagazine.com and unzip it onto your desktop or other location of your choosing. Open Flash CS4 and then open the items.xml file by choosing File>Open and then navigating to it in the Open dialog. Flash actually has a minimalistic XML editor built in that shows you the XML data nicely formatted with color-coding. Now create a new ActionScript 3.0 document by choosing File>New and choosing Flash File (ActionScript 3.0) in the New Document dialog. Choose File>Save As and save this file into the same directory as the XML file that you have open.

2 INSPECT THE XML FILE
If you’re already familiar with XML, then feel free to skip ahead to Step 3. For the rest of you, let’s take a look at the structure of the items.xml file. The first line is called the XML declaration and it simply declares that this is an XML document. Every XML needs to have a root tag that contains all the other tags. In this case, it’s the tag found on line 2. Inside of that you’ll see a series of tags. These contain the actual data that we’ll display inside of Flash.

3 SET UP THE FLASH DOCUMENT
Go back to the new Flash document you created in Step 1. Double-click the first layer’s name and rename it “grid,” as it will contain the DataGrid component. Click the New Layer icon at the bottom of the Timeline panel and name the new layer “actions.” This layer will hold all of our ActionScript code. Lock this layer so that you can’t accidentally add any visual assets to it. The act of keeping all of your code on a single layer is considered the best practice and will keep your Flash projects more organized and clean. Consider making a template with this layer structure.

4 ADD THE DATAGRID COMPONENT
Although not used very often, Flash comes with a wide assortment of prebuilt UI components for you to use. Open the Components panel by choosing Window>Components. Inside of the User Interface folder you’ll see the DataGrid component. With the grid layer selected, click-and-drag the DataGrid component onto the Stage. In the Property Inspector, give it an Instance Name of “grid.” Position it at the top left of the stage. Now, get the Free Transform tool (Q) and Option-drag (PC: Alt-drag) the bottom-right corner to resize the grid and make it fill the Stage.

5 SET DATAGRID OPTIONS
All of the components that come with Flash have various options that you can set in the Component Inspector panel. With the DataGrid selected on the Stage, choose Window>Component Inspector. As you can see, there are many options available for adjustment, such as the height of the header and rows, as well as how you want the scrollbars to behave. Change the sortableColumns property from true to false as we won’t be using that feature in this example. You can now close the Components and Component Inspector panels.

6 ADD SOME COLUMNS
Click the first keyframe in the actions layer to select it and open the Actions panel (Window>Actions). The first piece of ActionScript that we’ll write adds columns to the DataGrid component on the Stage. Type the code you see in the image above into the Actions panel. This adds three columns into the DataGrid, which matches the data we have contained in the XML file. You can name these columns whatever you like. For this example, I’ve kept things simple. Test the movie by pressing Command-Return (PC: Ctrl-Enter) and you should see the columns in the DataGrid.

7 FETCH THE XML FILE
To get the XML data into the DataGrid, the first thing you’ll need to do is create a new instance of the URLLoader class. This is the class that will go out and retrieve the external XML file for you. When you create this object, you need to pass in the URL to the XML file inside of an URLRequest object. In this example, the XML file is in the same folder, so it’s simply “items.xml.” Type the highlighted code from the image above into the Actions panel.

8 SET UP THE COMPLETE LISTENER
In the last step, we sent the URLLoader out to fetch our XML file. Now we need to let it know how to reach us when it finishes its work. We do this by registering for the complete event and have it call a function named onComplete. Type the highlighted code you see in the image above into the Actions panel. On line 6 we register for the event and then on line 8 we create the onComplete function that will be called when the data is returned.

9 PASS DATA INTO XML OBJECT
When the URLLoader comes back with the data and notifies us by calling the onComplete function, we can then begin working with it. The first thing we need to do is take the raw data that was returned and put it inside of an XML object. Type the highlighted code into the Actions panel. On line 10 we take the data from the URLLoader object and pass it into a new XML object. From this point forward, Flash sees this data as XML rather than simple text.

10 GETTING TO THE ITEMS
Now that we have our data as XML, we need to get to the information contained inside of the series of item tags. To do this we need a little bit of E4X, which is a new way of dealing with XML data that was introduced in ActionScript 3.0. If you do a lot of XML work, definitely get a good reference on E4X, as it’s very powerful. Type the highlighted code above into the Actions panel. On line 11 we create a new instance of the XMLList class and assign to it all of the item elements from the XML.

e]

11 LOOP THROUGH THE ITEMS
Now that we have all of the items stored in the XMLList object, we can loop through them and add them to the DataGrid. Before we do that we need to store the number of items in a variable so we don’t have to continually calculate that number as we go through the loop. This isn’t required but it’s a highly recommended best practice. Type the highlighted code above into the Actions panel. Line 12 stores the number of items in a variable called len and line 13 creates a simple for loop structure.

12 ADD ITEMS INTO THE DATAGRID
The last thing we need to do is add the item data into the DataGrid so that users can see it. We do this by calling on the DataGrid.addItem method and passing in the data for that row. We pass in the data as an object where we tell it which piece of data goes into each column. We retrieve the actual data by accessing the current row number that is held in the i variable. For instance, to get the name of the product in the first row we could use itemList[0].name. Enter the highlighted code you see above.

13 VIEW THE FINISHED GRID
Test the movie and you should see the XML data displayed nicely in the DataGrid. There are many advanced options available like having the ability to sort columns, as well as completely restyling the data to make it look however you want. Look in the Flash help files to see the full capabilities of this and other components. As a side note, if you plan on using a lot of components in your application, you may want to look into using the Flex framework, which has a much richer set of components.

14 THE BENEFITS OF XML
At this point some of you may be wondering why any of this was necessary. I mean, we could’ve just put in the item data directly into the DataGrid inside of our ActionScript code. While that is true, the real power of XML is that you can change the data in your application at any time simply by modifying the XML file. Imagine if you had to open Flash and modify ActionScript code every time your data changed. This is what makes XML such a powerful tool in your Flash toolkit.

Create an old-school MP3 player out of thin air

Ever since the release of Adobe AIR, Flash designers and developers have been able to use their existing skills to create full-featured desktop applications. They can continue to design and develop in Flash CS4 using the same techniques used for building Web-based Flash content and they can simply choose to deploy it as an AIR application. In this tutorial you’ll learn how to create and publish a simple, old-school MP3 player using Flash CS4 and ActionScript 3.0.

1 DOWNLOAD AND OPEN FLA FILE
To get started, download the tutorial files from www.layersmagazine.com. Open the file named OldSchool.fla in Flash CS4. This file is a regular Flash file that’s set up to publish for Flash Player 10. It’s often better to start your AIR project in this way, as it’s slightly faster to compile and test your movie. Only when you’re ready to start testing AIR-specific features do you need to change the publish settings. Another important point is that you must use ActionScript 3.0 when developing applications with Adobe AIR.

2 EXPLORE THE FLA FILE
Let’s take a minute to look at the work I’ve done to set up the movie for you. On the Timeline you’ll see four layers. The back layer contains the cassette tape image, which is actually a movie clip with an instance name of back. The buttons layer contains the Open Track and Close buttons. They have instance names of openButton and closeButton. The text layer contains a dynamic text field with an instance name of trackName that will show the track name. Finally, there’s a locked layer named “actions” that will hold all of the code for the project.

3 CONVERT TO AN AIR APPLICATION
As mentioned above, this file is set to publish to Flash Player 10, so you’ll need to change it so that it publishes to an AIR application. Click off the Stage to reveal the Publish settings section of the Property inspector (Window>Properties). Click the Edit button in the Profile section to open the Publish Settings dialog. Under Player, change the selection to Adobe AIR, and click OK. Note: You may have a different version of AIR displayed based on updates you may or not have installed, but for this example, it’s not important which version of AIR you’re targeting.

4 GET RID OF THE SYSTEM CHROME
If you test your application now by choosing Control>Test Movie, you’ll see your running application. One of the things you’ll notice is that there’s the familiar operating system window chrome around the cassette tape, which we’ll need to remove to achieve the effect we’re looking for. Click Edit in the AIR Settings of the Property inspector, change the Window Style to Custom Chrome (Transparent), and then click the OK button. Test your movie again to see the chromeless application. For now, you’ll have to close it via the Dock or Taskbar.

5 SET UP THE CLOSE BUTTON
Select the first keyframe in the actions layer and open the Actions panel (Window>Actions). The first event you’ll listen for is when the user clicks on the close button; this way, you won’t have to close it from the Dock or Taskbar. Enter the code shown above into the Actions panel. Line 1 registers the event listener to call a function called onClose when it’s clicked on. Lines 3–6 create the onClose function. On line 5, you call the stage.nativeWindow.close() method to close the application. Test the application and click on the Close button to close it.

6 MAKE IT DRAGGABLE
Right now you can’t move the application around, which obviously isn’t very good usability. To fix this, we need to listen for the mouse down event on the cassette tape movie clip. Copy the code shown here into the Actions panel. Line 8 registers the event listener to call a function named onDown. Lines 10–13 create the onDown function. Line 12 calls the stage.nativeWindow.startMove() method to begin dragging the application with your mouse. Test the application and drag it around your Desktop.

7 CREATE SOME OBJECTS
There are three objects that you’ll need to create so the application works properly. The first is an instance of the File class that will allow the user to select a file from his hard drive. The second is an instance of the Sound class that will handle the playback of the local MP3 file. Lastly, you’ll need an instance of the SoundChannel class that works together with the Sound class to control the audio. Copy the code shown in this image into the Actions panel.

8 SET UP THE OPEN BUTTON
When the user clicks on the Open Track button, you’ll be using some AIR-specific code to choose and load in a local file. The first step is to set up the click event for this button. Copy the code above into the Actions panel. Lines 19–25 create the event listener and the onOpen function. Line 23 listens for the select event on the File class and it will fire when the user selects a file using a native OS file chooser. Line 24 opens the file chooser for the user to allow him to choose a file.

9 PLAY THE MUSIC
In the last step we told Flash to call a function called onChoose when the user chooses a file from their computer. Copy the code shown above into the Actions panel to set up that function. Line 29 creates the new Sound object and passes in the URL property of the File class that contains the full path to the selected file. Line 30 starts playing the MP3 file and also assigns it to the SoundChannel object so that you can control it. Test the application and load in a music file.

10 FINISH IT UP
As you probably noticed, there are a couple of issues with the player. First, if you’re playing a song and then load another, they play on top of one another. Secondly, you still need to set the track name of the song. Copy this code into the Actions panel. Line 29 checks to see if the SoundChannel class is currently playing a song and if so, stops it. Line 30 sets the trackName text field to the filename of the MP3 that was just selected. Test the application to see the finished result.

11 PREPARE TO PUBLISH
Click the Edit button in the AIR Settings section of the Property inspector. You can give your application a description and a copyright message, although neither is required. In the download tutorial files, there’s a PNG named icon.png that you can use as the icon for your application. Click the Select Icon Images button and set the 128×128 size to the icon image. As the other sizes will automatically be created for you, delete them by clicking on the Trash icon, and then click OK.

12 CREATE A DIGITAL SIGNATURE
To publish an AIR application, you need to create a digital signature file. In the AIR settings dialog, click the Set (or Change) button in the Digital Signature section. In the Digital Signature dialog, click the Create button to open up the signature creation dialog. All of the fields are required here but can contain anything you want. Don’t be overly concerned with the contents unless you’re planning to release your application to the public. Click Browse to select a location to save the signature file and then click OK. You’ll need to enter a password in the Digital Signature dialog and click OK, as well.

13 PUBLISH THE APPLICATION
Now you’re ready to publish your application to an AIR file that can be installed on Mac, Windows, and Linux. Open the AIR settings window again, if it’s not already open. Click Publish AIR File to create the AIR installer file—this may take a little while depending on a host of factors. You should see a confirmation that it was successfully created. If not, double-check the previous steps to make sure you didn’t miss anything. You should now have an AIR installer in the same directory as the FLA file.

14 INSTALL THE APPLICATION
You’re now ready to install the old-school music player on your system. Double-click on the AIR file to begin the installation process. You can just leave everything at its default value unless you want to store the application in a different place. You can now run the application and load a nice, old-school song to get the full effect. What’s impressive about this example is that it only took 33 lines of ActionScript code. Not bad at all!

ALL IMAGES BY LEE BRIMELOW UNLESS OTHERWISE NOTED

How much is too much?
One thing that’s hard for beginning Web designers to learn is moderation. Once people learn how to create some cool animation or interactive technique, it’s only natural that they want to show the world their new skill, regardless of whether or not it’s appropriate for the content they’re creating—we’ve probably all visited sites that have made gratuitous use of interactive technology. In fact, Flash has received a bad rap because of this type of over-interactivity. In this article, we’ll discuss the various types of interactivity available to you when using the Creative Suite to design for the Web and, most importantly, what types of content are appropriate for each technique.

As you venture away from traditional Web interactivity and introduce more cutting-edge content into your site, there are some important trade-offs that you need to be aware of. Let’s start with arguably the most important: search engine optimization (SEO). Nothing can beat static HTML content when it comes to finding your way to the top of search-engine rankings. Rich Internet Application (RIA) technologies, such as Ajax, Flash, and Flex, will enhance the interactivity of your site but will also make it harder for search engines to index your content. Adobe is working with both Google and Yahoo!, however, to make Flash SEO much better, but it will likely never be on a par with regular old HTML.

Another thing that you should keep in mind is that the vast majority of Internet users are used to the traditional Web model of interaction. If you introduce new interaction types, you can run the risk of either confusing or irritating your users. The choice of how far to take interactivity most often comes down to the type of content you’re creating. A website for an upcoming horror movie or Flash games can really push the envelope and can employ the latest and greatest forms of interactivity. A corporate or ecommerce website is typically a place where you’d want to be a little more conservative with the type of interactivity you choose.

With these trade-offs in mind, let’s take a look at the many options you have available for adding interactivity to your projects.

JavaScript and Ajax
JavaScript together with Ajax (asynchronous JavaScript and XML) enables you to add a wide variety of interactivity to your content, ranging from simple animation to dynamic content updates to a whole slew of user interface (UI) components. Dreamweaver CS4 contains extensive support for these technologies and also includes Adobe’s own JavaScript library named Spry, which contains accordion panels, tooltips, and menus in addition to a set of form-validation controls. All of these can be dragged directly into your HTML content from the Spry section of the Insert panel in Dreamweaver CS4.

One of the most impressive and popular JavaScript frameworks is the YUI library from Yahoo!. (The entire library of components and features can be downloaded from http://developer.yahoo.com/yui.) With YUI, you can add enhanced interactivity in the form of color pickers, sliders, and carousels, just to name a few. You’ve probably already interacted with many of the various YUI components, as they power much of the interactivity on Yahoo!’s homepage and mail sites. For a great introductory tutorial on how to use the YUI library in Dreamweaver CS4, go to the Adobe Developer Connection website at www.adobe.com/devnet/dreamweaver/articles/using_yui_widgets.html.

Contextual tooltips are a great example of the kind of interactivity that Ajax can add to your Web content. One of the best examples of this can be found on the Netflix website (www.netflix.com). When you hover over a movie on the site, you’ll see a large tooltip appear that contains such information as the movie’s description and ratings. Doing this type of dynamic data retrieval means that they don’t have to embed all of that information into the page when you first load it.

The next version of the HTML language, HTML 5, allows for a lot more interactivity and performs many Flash-like features; for instance, you can play video directly using HTML rather than using a plug-in like QuickTime or Flash. The animation capabilities of HTML 5 are also very impressive, although they don’t come close to matching the potential of Flash. Note: HTML 5 is currently only supported in certain browsers, such as Opera and Safari.

One of the major drawbacks of using JavaScript and HTML for your interactivity is that you’re relying on the various browser manufacturers to implement the technologies in the same way. Those of you who are experienced in Web development know that this is rarely the case. Using a browser plug-in, such as Flash, ensures that your content will run the same way on all platforms and browsers.

Forms of Flash interactivity
When most people talk about new and innovative forms of interactivity, Flash is usually involved in some form. The Flash community is legendary for coming up with trendsetting design concepts, and with the ever-increasing power of the Flash Player, it’s exciting to wake up every day to see how people are pushing the interactive envelope.

Since Flash essentially allows you to throw out the rulebook and do whatever you want, it’s important to know where to get ideas and inspiration. Luckily, there’s only one site you need to visit to see the latest and greatest innovations coming out of the Flash world: The Favorite Website Awards site (www.thefwa.com). Usually referred to as simply the FWA, it contains a listing of the coolest interactivity found on the Web. Every day a new site is added and there are also awards for the site of the month and site of the year.

The range of interactive options available when using Flash are mind-boggling and you’re truly only limited by your imagination. Now, let’s take a look at how you can use Flash to “blow the hair off” your users.

Navigation
Building creative and unique methods of navigating a site’s content is one of the areas where we’ve seen some of the most innovative uses of Flash. One site that completely blew my mind a few years back was for creative advertising agency Leo Burnett (www.leoburnett.ca). The site features a click-and-zoom interface that you navigate using a black pencil. Every section you click on zooms the whole interface in to focus on it. It has an amazing smooth and organic feel to it.

It’s also very common now to see 3D interfaces showing up in Flash sites, thanks to open-source community projects like Papervision3D. As with everything else in Flash, moderation is always the key. In my opinion, the site that uses the perfect amount of 3D is the portfolio website for Whitevoid (www.whitevoid.com/portfolio.html), which is an interactive agency based out of Germany. Its navigation is one in which sections and content are stacked in 3D space. Clicking on a section of the site causes everything to slide away from the camera along the Z-axis. The interaction is so enjoyable to use that you may find yourself repeatedly clicking through their site just for the sake of it.

Interactive video
Without question, the majority of Internet users have viewed Flash video at some point in their travels. Sites like YouTube serve millions of videos every day and have made video an integral part of the Web experience. With the continued spread of high-speed broadband networks, users will be able to consume greater amounts of video and other forms of rich content.

The possibility of using video in Flash goes far beyond the traditional video player with which most people are familiar. Many sites are using video as the primary way of delivering their site’s content. One great example of this is the Philips Bodygroom site (www.shaveeverywhere.com). Seamless, high-quality video clips deliver all of the information about the body razor, and it contains very little text. The video is also interactive, as you can click on the various parts of the model’s body to receive more information about shaving that particular region. Here, video is used not just as an accompaniment to the main content on the site; the video is the main content on the site.

Another interesting use of Flash video was Burger King’s Subservient Chicken micro-site (www.subservientchicken.com). The concept of this site was very simple: You type a command into the text box and the chicken obeys. For instance, you could type “sit down” or “fly” and the chicken would obey you. Nothing is quite as viral as making new and interesting use of video content.

Augmented reality
By far the hottest new form of interactivity on the Web is known as “augmented reality” (AR). This technology allows the user to hold up a certain pattern (known as a marker) in front of their webcam. The software will then detect the marker and display some kind of content that moves wherever the marker moves. There have been many interesting and creative uses of this technology in the Flash world. One of the first sites I saw that made use of augmented reality was the GE Ecomagination site (http://ge.ecomagination.com/smartgrid). The site first prompts you to download and print a PDF file that contains the marker pattern. You’re then taken to a Flash application that displays the video stream coming from your webcam. Then, all you need do is hold the marker up to the webcam. What you’ll see is a 3D scene that was created in Papervision3D. As you move the marker around, the 3D will follow your movements. Want to see the model up close? Simply move the marker closer to the webcam. [For more on AR, see “How’d They Do That?” Layers magazine, Sept/Oct 2009, p. 30.—Ed.]

This technology has already seen some really cool uses. MINI released a print ad that contained a marker pattern. When users visited their site, they could view and manipulate a 3D version of their cars. Topps released a set of baseball cards that, when held up to a webcam, would allow people to see an interactive 3D model of the player. This is just the beginning of taking interactivity outside the bounds of our computer displays and into the real world. If you’d like more information about how to create augmented-reality applications, visit www.gotoandlearn.com/play?id=105 where you can view a video tutorial that I created on the subject.

Go play
As you can see, there are many types of enhanced interactivity that you can add to your Web content, ranging from subtle Ajax enhancements all the way up to game-changing technologies like augmented reality. Whatever you decide to use, just make sure that it’s appropriate for the content—making people hold something up to their webcam to read your company’s latest sales figures probably won’t garner you a raise anytime soon!

A common task for Flash developers is to create countdown timers that let users know how long it is until a certain conference or event takes place. You can get very creative with the style of your timers but the ActionScript needed to build them doesn’t change much. In this tutorial, you’ll take some Photoshop artwork and build a simple countdown timer in Flash.

Click here to read the rest of the tutorial

A common task for Flash developers is to create countdown timers that let users know how long it is until a certain conference or event takes place. You can get very creative with the style of your timers but the ActionScript needed to build them doesn’t change much. In this tutorial, you’ll take some Photoshop artwork and build a simple countdown timer in Flash.

1 OPEN THE PHOTOSHOP FILE
Download the files for this tutorial from www.layersmagazine.com. The ZIP file contains a PSD file named “countdown.psd.” Open this file in Photoshop. This is the artwork that you’ll use as the basis of your countdown timer. The top layer (called chrome) makes up the main visuals for the timer. The bottom layer (called backdrop) contains the background for the numbers that you’ll create in Flash. You’ll import this PSD file directly into Flash.

2 CREATE THE FLASH DOCUMENT
Launch Flash and create a new ActionScript 3.0 document. This tutorial doesn’t use any of the new features found in Flash CS4, so it will work with earlier versions of Flash as well. Since this movie will simply count down every second, we can lower the frame rate quite a bit to lessen the system resources used by the movie. In the Property inspector, change the FPS value to 2. Save this FLA somewhere on your hard drive as countdown.fla.

3 IMPORT THE PSD FILE
Now you’ll import the PSD file into your Flash movie. Select Import to Stage from the File>Import menu. Navigate to the countdown.psd file and click the Import button. This opens the Photoshop Import dialog. Uncheck the Background layer, as you won’t need that in the Flash movie. Shift-click the two remaining layers and change the JPEG compression to 90 by clicking on the Custom radio button. Now click the Set Stage Size to Same Size as Photoshop Canvas checkbox to make Flash crop the movie to the same size as the PSD. Click OK to import the file.

4 ADD SOME LAYERS
After importing the PSD file, you should see the same layer structure in the Timeline panel as you saw in the Layers panel in Photoshop. Rename Layer 1 by double-clicking on it and entering “actions,” then lock it so no visuals can be placed on it. You’ll write all of your ActionScript code on this layer. Now click the New Layer icon, rename it “numbers,” then drag it between the backdrop and the chrome layers. This layer will contain the dynamic text fields for the days, hours, minutes, and seconds that constitute the core of the countdown timer.

5 CREATE A TEXT FIELD
Select the first frame on the numbers layer in the Timeline and get the Text tool (T). Click on the Stage to create a new text field and enter three digits just so you can preview what it will look like. Switch to the Selection tool and click on the text field to select it. In the Property inspector, select Dynamic Text from the Text Type drop-down menu, give it an instance name of “daytxt,” change the font Family to Myriad Pro, Style to Bold Condensed, Size to 20, and make the Color white. Also make the text Format Align Center in the Paragraph section. Position the text field in the Day field on the Stage.

6 EMBED THE FONT
One thing that beginning Flash developers often forget to do is embed the fonts for dynamic text fields. You can’t rely on end users having Myriad Pro on their system so embedding the font assures that everyone will see the same thing. Select the text field and then click on the Character Embedding button in the Property inspector. When embedding fonts you only want to include the characters you’ll need to help keep the file size down, so select Numerals from the list and click OK.

7 CREATE THE REMAINING TEXT FIELDS
Repeat Step 5 and Step 6 for the remaining three text fields. Give the hours text field an instance name of “hrtxt,” the minutes text field an instance name of “mintxt,” and the seconds text field an instance name of “sectxt.” Position all of the text fields in the appropriate places. Tip: The easiest way to insure that all the text fields have the same properties is to simply copy the first one you created, paste it to create duplicates, then change the instance name of each duplicate in the Property inspector. Now it’s on to the code!

8 START THE ACTIONSCRIPT CODE
Select the first frame of the actions layer and open up the Actions panel by pressing Option-F9 (PC: Alt-F9). The first thing you’ll do is create a new Date object that holds the date that you’re counting down to. To the Date object you pass in the year, month, day, and time. One important thing to remember is that Flash starts counting months with 0, so December will actually be passed in as 11, not 12. Add the code shown in the image above into the Actions panel. Here we’re only passing in the hour but you can also input the minutes and seconds.

9 ADD THE ENTERFRAME LOOP
Obviously, you’ll need to constantly update the text fields on the Stage and using an enterframe loop is one way to do that. Essentially, you define a function that gets called every time a new frame is reached. For this example that will happen two times a second since the frame rate (FPS) is set to 2. You could use a Timer object to do this as well. Enter the code shown in the image above into the Actions panel. This creates an enterframe event that calls a function called loop.

10 GET THE CURRENT DATE
The first thing you’ll do in the loop function is find out the current date and time so you can calculate how long it is until your event, and to do this you simply create a new Date object and pass in no parameters. Next, use the getTime method to subtract the current time from the time of the event to get the total time remaining. This value will be the total number of milliseconds until the event and is stored in ms variable.

11 CALCULATE THE VALUES
Now you have the total number of milliseconds until your event but obviously you need to break that into days, hours, minutes, and seconds. Enter the code from the image above into the Actions panel. To get the number of seconds we simply divide the number of milliseconds by 1000. For minutes you divide the number of seconds by 60. (Noticing a predictable pattern here?) We wrap each of these operations in the Math.floor function so that it rounds the numbers down to make them nice and clean.

12 CORRECT THE VALUES
In the previous step you calculated various values needed to display the countdown. But there’s a problem. You can’t display the total number of seconds because it would be a huge number. You need to normalize these values; the way to accomplish this is to use a modulus (%) operator. Input the code shown in the image above. Let’s use seconds for example. In the code shown in the image, we’re taking the seconds and modding them by 60. This will divide the number by 60 and return the remainder—this is the number we want displayed.

13 SET THE TEXT FIELDS
Now that you’ve calculated the values, you can format them to be displayed in the text fields. Enter the code shown in the image above into the Actions panel. For the hours, minutes, and seconds you want to add a leading zero if the number is below 10 to make it look nicer. In this code, you’re testing the values and adding the zero if necessary before outputting the value. We use the toString method on our numbers so that they’re converted to strings before trying to put them into the text field.

14 THE FINISHED TIMER
Now press Command-Return (PC: Ctrl-Enter) to test your movie and see the finished countdown timer. There are many ways in which you can customize it. You could, for instance, also display the milliseconds. For that, increase the frame rate of your movie to make it look right. You can also pass in the target date via Flashvars to make a timer that could be reused for multiple events. Countdown timers are a simple way to help promote your event and, as this tutorial has shown, they’re relatively easy to create in Flash.

ALL IMAGES BY LEE BRIMELOW UNLESS OTHERWISE NOTED

Learning the Accordion

One of the most useful user interface constructs is the accordion panel. It allows you to stack various sections of your site and then expand and contract the sections when they’re clicked on. In this tutorial, we’ll create a basic animating accordion panel that can be used as the basis for a full Flash website.

1 [EXAMINE THE FILES]
Open the accordion folder (from the download files available at www.layersmagazine.com) and you should see two FLA files: The accordion.fla file is what you’ll need to open to start the tutorial, and the accordion_final.fla file is a finished version of the tutorial that you can use as a reference. There’s also another folder named gs, which contains an ActionScript animation library called TweenLite that we’ll use to do our animation.

2 [OPEN THE FLA]
Open the accordion.fla file in Flash CS4 (this tutorial will also work with Flash CS3 if you haven’t yet upgraded). On the Timeline, you’ll see two layers: The actions layer will hold all of our ActionScript 3.0 code for this project and the panels layer will contain all of the various sections for our site. The movie is 690 pixels wide and 355 pixels high with a frame rate of 30, and it’s set to publish for Flash Player 9, as we won’t be using any of the new Flash Player 10 features.

3 [DRAW A PANEL]
Select the first frame of the panels layer and select the Rectangle tool (R). In the Property inspector, remove the Stroke color (if there is one) and set the Fill color to #0066CC (blue). Drag out a rectangle on the Stage at any size, then in the Property inspector set the following: W(idth) 600; H(eight) 355; X 0; Y 0. (Note: Make sure the chain icon is “broken” next to Width and Height.) Control-click (PC: Right-click) on the rectangle and choose Convert to Symbol. In the dialog that appears, name it “panel1,” make sure that Movie Clip is the Type, and click OK.

4 [ADD A TEXT FIELD]
In the Property inspector, give the new movie clip an Instance name of “panel1.” Double-click on it with the Selection tool (V) to enter edit mode. Select the Text tool (T), set the Character Family to Myriad Pro (or another font—make sure it’s a clean, legible font, as it will be rotated 90°), enter Size (as desired), and Color (we chose white). Click on the Stage and enter the text, “Panel 1.” Switch to the Selection tool, open the Transform panel (Window>Transform), and set Rotate to 90°. Return to the Property inspector and set the type’s X property to 0 and Y to 9. Click on Scene 1 to return to the main Timeline.

5 [DUPLICATE THE PANEL]
Now we’ll duplicate the movie clip panel for each section of the site. In the Library panel, Control-click (PC: Right-click) on the panel1 movie clip and choose Duplicate. You’ll be prompted to give the new clip a name, so let’s call it “panel2.” Now drag an Instance of the panel2 movie clip onto the Stage, and in the Property inspector, position it at X 30 and Y 0. Give the clip an Instance name of “panel2.” (Obviously, if you were building a real site you could name the various clips based on what they contained.)

6 [MODIFY THE DUPLICATE PANEL]
Double-click on the panel2 movie clip to enter edit mode so you can customize this panel. With the Text tool, change the text to “Panel 2.” Then, select the rectangle and choose another color in the Property inspector. Go back out the main Timeline. Now follow the same steps to create two more panels. Offset the X property on each panel by 30 pixels—that means the third panel will have an X of 60 and the fourth will be X 90. Be sure to give each panel an Instance name, following the same convention as above.

7 [IMPORT TWEENLITE]
Select the first frame in the actions layer and open the Actions panel (Window>Actions). Enter the code shown here into the panel. These two lines of code import the TweenLite animation library so that we can use it. TweenLite is an ActionScript 3.0 library that makes animating with code extremely simple. All that’s required is a single line of code to create some really complex animations. There are other engines such as Tweener and gTween that would also work well for this tutorial. (Note: Make sure the gs folder is in the same folder as your FLA file.)

8 [SET LEFT AND RIGHT POSITIONS]
Add the code highlighted here into the Actions panel. In these four lines of code, we’re attaching some information to each of the panels that will help us when we need to animate them. The first property, lx, is the leftmost X position of the panel. The rx property is the X position for the panel when it’s on the right side of the movie. Notice how all of these values are offset by 30 pixels from one another. The ind property simply holds the index number of the panel.

9 [ADD CLICK EVENTS]
Now we need to set up the click events for each of the panels so that they can react when one of them is clicked. Add these next highlighted lines of code to the Actions panel. The first four lines sets up the click events for each panel. All of them will call a function named onClick that’s located at the bottom of the code block. When a panel is clicked, it will animate all of the panels to the correct position allowing the user to view the full contents of that panel.

10 [WHO WAS CLICKED?]
Since all of the panels will call the same function when they’re clicked on, we need to determine which one was clicked so we can animate the panels appropriately. We can easily get a reference to that clip by using the target property of the event object that gets sent to the function. Add this highlighted code into the Actions panel at the specified location to create a variable named “clicked,” which references the clip that was clicked on.

11 [LOOP THROUGH THE PANELS]
Now that we know which clip has been clicked on, we need to loop through all of the panels and animate them to the correct position. In ActionScript 3.0, the most common way to do this is by using a “for” loop. A counter variable is incremented each time the loop is run until it no longer satisfies the condition. Enter the highlighted code into the Actions panel at the specified location. Inside the loop we create a new variable named “mc” that references the panel clip based on the value of the loop counter i.

12 [ANIMATE THE PANELS]
Enter this highlighted code into the Actions panel at the location specified. First, we check whether the index of the current clip is less than or equal to the index of the clip that was clicked on. If it is, we need to animate it to the left. If not, it needs to be animated to the right. For each case, we’re using the TweenLite.to function to do the animation. The animation length is set to 0.5 seconds and we’re using an exponential ease-out effect. Both of these settings can be customized to change the feel of the animation (see Step 14).

13 [ADD CONTENT TO THE PANELS]
Test the movie by choosing Test Movie from the Control menu. Click on the various panels to see the nice animation effect. Now that the code is complete, you can start customizing the panels so that they contain actual content. Double-click on one of the panels to enter edit mode. Now you can start adding text, images, video, or anything else that you want on that particular panel. Check out the accordion_final.fla file to see an example of a finished panel.

14 [CUSTOMIZE TWEENLITE]
As mentioned in Step 12, you can change some of the values in the TweenLite function call to customize the animation effect. Try changing Expo.easeOut to Bounce.easeOut. This makes the panels bounce into place. Another interesting choice would be Elastic.easeOut, which gives it a springy, elastic effect. You can also adjust the length of the animation to achieve different results. To see the full list of customization options, check out the documentation for TweenLite at http://blog.greensock.com/tweenliteas3.

One of the most important skills for Flash developers to learn is how to utilize the vast collections of Web APIs that are available for services such as Flickr, Twitter, Facebook, and mapping using either Google or Yahoo. In this tutorial you’ll learn how to integrate Google Maps into your Flash application using just a few lines of code. The Google API is incredibly easy to use and it’s extremely powerful.

1 [DOWNLOAD THE GOOGLE MAPS API]
The first step in adding Google Maps to your Flash application is to first download the necessary files. Go to http://code.google.com/apis/maps/documentation/flash in your browser. This site is where you can find all of the information on using Google Maps inside of Flash, so be sure to bookmark it. Find the section on the right called “How do I start?” and download the Software Development Kit (SDK) using the link posted in the second item on the list. Unzip the downloaded file to your desktop.

2 [INSTALLING THE API]
In the sdk/lib folder of the SDK you’ll find a file named “map_1_9.swc.” Copy (Command-C [PC: Ctrl-C) this file to the clipboard. If you’re on a Mac navigate to [user folder]/Library/Application Support/Adobe/Flash CS4/language/Configuration/Components (create a new folder named “Components” if you don’t already have one). If you’re on a PC navigate to [user folder]\Local Settings\Application Data\Adobe\Flash CS4\language\Configuration\Components (create a new folder named “Components” if you don’t already have one). Create a new folder named “Google” and paste (Command-V [PC: Ctrl-V) the SWC file into this new directory. If you had Flash open you’ll need to restart it before trying to work with the API.

3 [OPEN THE FLA FILE]
Download the tutorial files for this article at www.layersmagazine.com. Open the map.fla file in Flash CS4. In the Library there’s a movie clip of the Adobe logo that you’ll be placing on the map at the Adobe offices in San Francisco. There’s a single layer in the Timeline named “actions.” The actions layer is where you’ll be placing all the ActionScript code for this project. This project will be built entirely using ActionScript and you won’t be adding anything to the Stage.

4 [ADD THE GOOGLE MAPS COMPONENT]
Before you can start using Google Maps you first need to add the component to your application. Open the Components panel by selecting it from the Window menu. You should see the Google folder that you created earlier. Twirl down the folder and you should see the GoogleMapsLibrary component. Drag the component into the Library to add it to your project. You’ll now be able to access all of the Google Maps APIs.

5 [CREATE A BASIC MAP]
Select the first keyframe of the actions layer and open the Actions panel (Window>Actions). Enter in the code shown in the image above. The first three lines import the Google Maps libraries. Line 5 creates a new instance of the Map class, which is the main object that creates the map. Line 6 is where you’ll need to add your API key, which we’ll get to in the next step. Line 7 sets the size of the map to the same size as the Flash stage. Finally, line 8 adds the map to display list so we can see it.

6 [GET AN API KEY]
One of the things that you have to do when using Google Maps is to get an API key. Even though it works without one, you need to get one to prevent breaking the license agreement. Go back to the API website and click on the link in the first item in the list. Agree to the terms and then enter in the website that you’ll be using the map on. If you don’t know, just enter http://localhost. Click the Generate API Key button and then copy the resulting key to the clipboard (it will ask you to sign into your Google Account if you’re not already signed in). Now replace MY_API_KEY in the code with your key.

7 [TESTING THE MAP]
Go ahead and test your application (Control>Test Movie) to make sure that you’re seeing the basic map. You should see a zoomed out map of the world but without any of the controls, such as a zoom slider or map type selector, that you’re used to seeing on Internet maps. These will be added in the next step. You must wait until the map ready event fires before adding any controls to the map. Enter in the highlighted code shown above into the Actions panel. The onMapReady function is where you’ll begin manipulating the map.

8 [ADD SOME CONTROLS]
Now you’re ready to begin adding some controls to the map so users can manipulate it. Add the highlighted code into the Actions panel as shown above. The first line of code adds a new ZoomControl to the map. This adds a slider that the user can use to zoom in and out on the map. The second line adds a MapTypeControl that allows users to select between the different map types available such as satellite or hybrid. Press Command-Return (PC: Ctrl-Enter) to test the movie and try out the map controls.

9 [CENTER THE MAP]
At this point the map is centered on the world map and is zoomed all the way out. Now you’ll reposition the map so that it’s centered at the Adobe offices in San Francisco. Enter in the above highlighted code into the Actions panel. To the setCenter method we send in three items: the latitude and longitude of the Adobe office, the desired zoom level, and the type of map. The user can, of course, change these things, but this is how we want the map to show at the start. Test your application to see the new center.

10 [HOW TO FIND LATITUDE AND LONGITUDE]
You may be wondering how I found the coordinates for the Adobe office. There are numerous ways to get this information. The easiest is to first search for an address on the Google Maps site (http://maps.google.com). Once the map is centered on the address, simply type javascript:void(prompt(”,gApplication.getMap().getCenter())); in your browser’s address bar and hit Return (PC: Enter). You’ll see a pop-up with the coordinates that you can paste into Flash. The Google Maps API has the ability to do this directly from Flash, but that’s out of the scope of this tutorial.

11 [ADD A MARKER]
Enter the above highlighted code into the Actions panel. The first line creates a new Marker object at the Adobe offices. There are many different options available for how the marker will look and behave. For now we’ll just keep everything at their default values. The second line of code adds the new marker to the map. Test the application to see the default marker. Now wherever you move the map, the marker will always be visible at the Adobe office. In the next step we’ll customize this marker with the Adobe logo.

12 [CUSTOMIZE THE MARKER]
In the Library panel you’ll see a movie clip named “marker.” Double-click on it to enter edit mode. You’ll see an image of the Adobe logo surrounded by a custom marker graphic. It’s important that the point of the marker is on the crosshairs of the registration point. This movie clip has been set up with a class name of “marker” so we can attach it at runtime. Click on Scene 1 at the top left of the Stage to exit edit mode. Add the highlighted code to the Marker object to tell it to use the custom marker (note the changes made at the end of line 16). Test your application.

13 [OTHER MARKER OPTIONS]
In the last step you customized the look of the marker but there’s much more that you can do. Since the marker is just a regular movie clip, it can contain animation, video, or any other type of interactive content that’s supported in Flash. Markers are not the only types of overlays either. You can draw lines and shapes and add them to the map to create rich, interactive mapping applications.

14 [WHERE TO GO FROM HERE]
In this tutorial you’ve created a very simple mapping application in Flash but have only scratched the surface of what’s possible with the Google API. There’s a full geocoding API that allows you to get latitude and longitude coordinates for points on the map or from addresses. You can also get directions between two points or addresses on the map. You can find the full API reference by clicking on the link in item 4 on the API website that you downloaded the SDK from.

ALL IMAGES BY LEE BRIMELOW UNLESS OTHERWISE NOTED

If you’d like to download the file used in this tutorial to practice these techniques, visit www.layersmagazine.com and navigate to the Magazine section. All files are for personal use only.

1 [OPEN THE FLA]
Download the tutorial file from www.layersmagazine.com and open 3D.fla in Flash CS4. The new 3D features are only accessible in Flash CS4 and will also only run in Flash Player 10. The Timeline contains a single layer named “back,” which contains the artwork for the sky in our scene. In the Library (Window>Library), you’ll see three movie clips that contain the artwork that we’ll use to build a typical neighborhood scene. Each of these clips will be set in 3D space to achieve the parallax effect.

2 [ADD THE HOUSES]
To achieve the parallax effect we’ll need to place each layer of the scene at a different Z position based on how far away they are from the camera. Click on the New Layer icon at the bottom-left of the Timeline. Double-click the name of the new layer and rename it “scene.” Now drag out a copy of the houses movie clip from the Library panel and place it so that the bottom-left corner of the clip is positioned at the bottom-left corner of the Stage. This row of houses will be the object that’s furthest away from the camera.

3 [POSITION THE HOUSES]
Now we’ll position the houses in 3D space. Select the clip on the Stage and twirl down the 3D Position and View section of the Property inspector. Change the Z property to 500. This pushes the clip away from the camera and as a result, makes it smaller. Now we need to scale the clip so that it’s approximately the same size as it was originally. With the clip selected, go to the Transform panel (Window>Transform) and scale the Width and Height of the clip to 160%. Now drag the clip back down to the bottom-left corner of the Stage.

4 [ADD AND POSITION THE GRASS]
Now we’ll follow the same steps to add some grass to the scene. Drag out a copy of the grass movie clip to the Stage. This grass will be across the street from the houses and thus, will be closer to the camera. Set the Z position of the grass to 200. This positions it away from the camera but not quite as far away as the houses. Scale the clip to 120% the same way you did for the houses and position it so that it’s at the bottom-left of the Stage.

5 [ADD AND POSITION THE TREE]
The last step in constructing our 3D scene is to add a tree that’s even closer to the camera than the grass. Drag out a copy of the tree movie clip to the Stage. For this clip we actually set the Z position to a negative value so that it’s very close to the camera. Select the clip on the Stage and then set its Z property to –200. Position it so that it’s somewhere offstage to the right. When we animate the scene we’ll reveal the tree.

6 [ADD SOME DEPTH OF FIELD]
Flash CS4 doesn’t have any actual camera controls like depth of field but we can fake it by adding some blur. Select the tree movie clip and then twirl down the Filters section of the Property inspector. Click on the Add Filter icon in the bottom-left of the panel and choose Blur. You should automatically see the resulting blur effect on the tree. Change the Quality of the filter to High. Adding the blur to the tree gives the illusion that the camera is focused on the houses.

7 [CREATE THE CONTAINER MOVIE CLIP]
Now that you’ve positioned the three movie clips, you’ll need to put them all inside a single container movie clip. Press Command-A (PC: Ctrl-A) to select the three movie clips and then choose Convert to Symbol from the Modify menu. Choose Movie Clip from the Type drop-down menu, give it a name of “scene,” and click OK. Now get the Selection tool (V) and move the container movie clip around the Stage. Cool, huh? You can now see the parallax effect live on the Stage. The tree is moving faster than the grass, which is moving faster than the houses.

8 [AN IMPORTANT BUG]
There’s a known bug that exists in Flash CS4 that you need to be aware of when you’re using 3D. If you have a movie clip that contains 3D elements, you won’t be able to go into Edit in Place mode anymore. Double-click on the scene movie clip to see what I mean. You’ll now be in Edit mode where all of the 3D elements are nowhere near the way you positioned them. For this reason, you need to make sure that you wait until you’re done positioning your elements before wrapping them in the container clip.

9 [SEE THE STACKING ORDER]
A great way to visualize the 3D stacking order of elements is by rotating your scene using the 3D Rotation tool. Hit the W key to select the tool and then rotate your scene around any of the axes to see the stacking order. One of the things that the new 3D support doesn’t do is Z-sorting. As you rotate the scene around, you may notice that the tree is always in front of the other objects even when it shouldn’t be. Just be aware of this limitation as you construct your 3D scenes.

10 [ANIMATE IN 3D]
Creating 3D animation is accomplished using the exact same methods that you use for 2D animation. Select the scene movie clip, Control-click (PC: Right-click) on it, and select Create Motion Tween. This enables the movie clip for animation and places a second’s worth of frames on the Timeline. To make the clouds background appear throughout the animation, Control-click (PC: Right-click) on frame 30 of the back layer and select Insert Frame. With the playhead at frame 30, move the scene clip to the left a little ways to create a new keyframe. Test the movie (Command-Return [PC: Ctrl- Enter]) to see the animation effect.

11 [ADD INTERACTIVITY]
The 3D effect can just as easily be controlled at runtime using ActionScript. Undo the actions you did in Step 10, then create a new layer and name it “actions.” Select the clip and give it an Instance name of “scene” in the Property inspector. Select the first keyframe in the actions layer and open the Actions panel (Window>Actions). Type in the ActionScript 3 code shown above. This creates an enter frame event where the scene clip is continuously repositioned on the X-axis based on the position of the mouse. Test the movie and move your mouse around to see the effect.

12 [ADD CONSTRAINTS]
You’ll notice that when you test your movie that there’s nothing stopping the scene clip from moving completely out of the frame. Type in the highlighted ActionScript code above into the Actions panel. This code tests for the boundaries of the scene clip and only moves it if it’s inside the bounds. Test the movie now and you shouldn’t be able to go beyond the bounds of the scene. What you now have can serve as the start of a game, as many games use this parallax technique.

More on Flash 3D

While Flash Player 10 includes the first native 3D features for Flash, the Flash community has been working on their own ActionScript-based 3D engines for a while now. Papervision3D (http://blog.papervision3d.org) is by far the most popular open-source library for Flash 3D development, and its features go far beyond the new native 3D support. With Papervision3D you can import 3D models, apply materials and shaders, and also use a variety of 3D primitive objects such as spheres and cubes. Away3D (www.away3d.com) is another popular 3D engine with a similar set of features.

It’s important to note that the new native 3D support was not created to compete with these amazing open-source libraries and, in fact, Adobe is adding special features to the Flash Player specifically to help them run faster. Flash Player 10 includes many low-level features, such as the ability to draw triangle meshes and the new Pixel Bender shader language—both are extremely useful for 3D engines. Away3D has already released a new Flash Player 10 version that takes advantage of these new features, and Papervision3D is currently in development on their next release, as well.

So this brings up the obvious question of when should you use which 3D technology. The new native 3D support in Flash Player 10 and Flash CS4 is primarily for simple 3D effects such as transitions. This allows designers to create 3D animation on the Timeline without having to do any ActionScript. Open-source libraries such as Papervision3D require a fairly high-level knowledge of ActionScript 3 and, thus, makes it inaccessible to most Flash designers. It’s also important to remember the limitations of the native 3D as discussed in Step 9 of this tutorial.

If you’re looking to build fully immersive 3D experiences like the Absolut micro-site www.absolut.com/iaaw built using Papervision3D, then you’ll have to buckle down and get good at ActionScript, as sites like this require an intense amount of coding. This site makes use of many advanced 3D features that are only available in Papervision3D and would be next to impossible to build using the native 3D features in Flash CS4 and Flash Player 10.