Since XML is primarily used to store and transfer data, it makes for a nice flexible way to store data that Flash applications can use. Since it’s external to your SWF file, it can be easily updated. So whether your Flash application pulls in data for a News Reader or a Slide Show or Music Juke Box, any change will be dynamic and ready to go.

These examples use ActionScript 3.0, which allows for easier manipulation of XML data compared to previous versions of AS. I broke up the three examples into three parts so you can see the evolution of each example and can follow it better with a gradual change in the AS code (saved as Flash CS3).

News Reader

In this Flash example (like the other two as well), I show you how to pull information into Flash and parse the information needed into an text field, dynamically loop through the XML file, and add HTML and CSS styling to the text field.

Here is the finished version and the source files (.zip).

Slide Show

There are so many Flash slide shows on the web and most use an XML file to store the image properties (url, title, description, etc) of each. This way updating is separate from the re-publishing the FLA and anyone can do it.

This application not only uses the XMLList object, but the UILoader component and the Timer class (rotate image every 3 seconds).

note: You could create a custom loader for the loading of the images by either using the Progress Bar component or creating your own.

In AS 3.0, a simple pre-loader would look something like this:

loaderInfo.addEventListener(ProgressEvent.PROGRESS, onProgress);
loaderInfo.addEventListener(Event.COMPLETE, onComplete);
 
function onProgress(e:ProgressEvent):void
{
     var loaded:Number = e.target.bytesLoaded;
     var total:Number = e.target.bytesTotal;
     var pct:Number = loaded/total;
     loader_mc.scaleX = pct;
     loaded_txt.text = "Loading... "; 
     loaded_txt += (Math.round(pct * 100)) + "%";
}
 
function onComplete(e:Event):void
{
    // show something
}

Here is the finished version and the source files (.zip).

Music Juke Box

Finally another use of XML would be to create a song Juke Box to play different MP3 files. This project uses previous techniques of the first two projects plus the Sound and SoundChannel class.

This project focuses a little more on programming since how to load and parse and XML file have been already covered in the first two projects so it’s a nice finishing project on how to create a simple Flash application.

Here is the finished version and the source files (.zip).

note: If you want a more robust example of a Music Juke Box (pause, volume slider, etc), then take a look at this example and source code (.zip) created by Craig Campbell.

Interface
The user interface has been overhauled to match all of the adobe creative suite tools. It may take some users a little while to get used to it, but it seems to be for the better.

Tweening Engine
The timeline’s tweening engine now supports object-based animation with motion tweening. What this means is that you do not have to create a new keyframe, modify your symbol then create the motion tween (“Create Classic Tween”).

All you have to do now is create your symbol and then add a motion tween to that object. The containing layer becomes a “tween layer” which has a unique layer icon and ending keyframe (diamond). The motion tween includes a motion guide giving you full control of the animation itself (even with the free transform tool).

Motion Editor
The Motion Editor gives you a graph of all the properties of your object (symbol). This allows for a great overview of your animation properties (rotation, easing, etc) and allows for fine-tune control. A neat feature is the added options of Easing for each of the animation properties.

Motion Preset
You can save any of your animations as a “Motion Preset” and can use many of the predefined Default Preset animations on any object (can be used like a library of animations).

3D Support
3D support is now available and allows animators to create cool 3D effects with two new tools in the toolbox: 3D Rotation Tool and 3D Translation Tool. The 3D Translation Tool allows moving an object (symbol) in the x, y and z axis.

Bones – kinematics
The new “Bones” feature is a new tool in the toolbox (Bone) that allows you to create animated objects that behave like a skeleton. So you can have many symbols that together follow the same “bone structure”. A neat use for this would also be applying a bone structure to a solid shape which would give it a cool shape tween effect. This would be almost impossible to do in previous versions of Flash.

Adobe Media Encoder
Adobe changed the name of the Flash Video Encoder to Adobe media Encoder because it is capable of encoding a lot of different types of files. You can still import video files like you normally did in Flash (Import -> Import Video) and go through that wizard to convert it to FLV/F4V formats.

The encoder gives you options for the type of codec, bitrate, frame rate, batch encoding, etc. Check oout this video to learn more.

Project Panel
The new Project Panel (acquired from gskinner.com) allows developers to easily create new .fla and .as (class) files. Class files can now have fully customizable starter code created for them as well.

Anytime an event happens, an object of the Event class is created. When the mouse button is clicked, a MouseEvent object (a subclass of the Event class) is created. When a key on the keyboard is pressed, a KeyboardEvent object (another subclass of the Event class) is created. It may seem a little strange that an object represents an event, but remember Flash objects can be very abstract.

With all these events happening, you need a way to detect and respond to them. You detect an event by creating an event listener (or event handler).

An event listener is a simply a function that tells Flash what to do when a specific kind of event happens. Creating an event listener is a two-part operation: first you create a function, and second, you tell Flash where to put the listener.

For example, if you want to listen for a mouse click, you create a function with a parameter strictly typed to the MouseEvent object like so:

function reportClick (myevent:MoseEvent):void {
     // do something in response
}

The word myevent is the parameter name that you make up that refers to the event. Next, you decide where you want to listen for the mouse click. If you want to listen for a mouse click on top of a particular button, then you add an event listener to that object:

myButton_btn.addEventListener(MouseEvent.CLICK, reportClick);

The addEventListener() method takes two parameters. The first is the specific kind of event that you want to detect. All the event objects have properties (like MouseClick.CLICK), which give more specificity to the event. The second parameter is the name of your function.

The actual object that receives the event can be referenced in the function by using the property target. In the example, the expression myevent.target references myButton_btn.

When you no longer need to listen for an event, you can delete the listener with the method removeEventListener(). The method takes two parameters, which are identical to the ones in the addEventListener() method.

Event Flow – Under the Hood

Event handling is a little more involved that what was just described above.

When an event occurs an Eventobject is created, the Event object systematically moves through other objects on the Flash Stage in a process known as the event flow. There are three parts to the event flow: a capture phase, a target phase, and a bubbling phase. Imagine that a mouse click happens on a button that is inside a movie clip on the Stage.

The MouseEvent object is created and is dispatched from the Stage and flows down to the movie clip and to the button inside the movie clip. That downward flow through those objects is the capture phase. The target phase involves the time the MouseEvent object is at the target (the button). Then it proceeds to bubble, or flow up the hierarchy, to the main Stage.

This round-trip flow is important because it lets you put a listener at any point along its path and still detect the event. In other words, the listener doesn’t have to be tied to the object where the event occurs.

However, many events don’t proceed through all three phases of the event flow. Some events, such as the Event.ENTER_FRAME object, are dispatched directly to the Stage and don’t participate in a capture or bubbling phase.

This online article by Trevor McCauley on AS 3.0 event handling should give you a lot more information.

Video References (.zip)

Events Overview
Listeners
Handlers

Conceptually, it’s much like the folder structure on your computer desktop, and can be represented as a tree structure. The top-level element is the Stage. Each time you play a Flash movie in a Web browser, the Flash Player opens your SWF and places it on the Stage. So the Stage is the container that holds your main SWF.

Inside your main SWF you can place other elements, such as buttons, text, video, bitmaps and other objects — all of which are part of a big class known as DisplayObject.

You can also have elements on your main SWF that contain DisplayObject objects. These are known as DisplayObjectContainer objects, and include objects like a Sprite object, a Loader object, a MovieClip object, and the Stage itself. So you can think of the main SWF on the Stage as your desktop, the DisplayObjects as individual files, and the DisplayObjectContainers as folders that can contain additional folders or files.

One of the most important methods of the DisplayObjectContainer class is called addChild() This method adds an element (either another DisplayObjectContainer or DisplayObject) to the display list and makes it visible. As you add more DisplayObjects and DisplayObjectContainers to your display list, you need to keep track of how they overlap. Flash keeps track of each object with a number, known as an index, that begins at 0 and increases in whole numbers.

The Adobe online article on Display list programming should give you lots of more information to help you understand this new ActionScript 3.0 architecture.

View this video (.zip) for an overview of how the Display List object works.

Watch these videos (zip) for more details and examples:

Using the addChild method
Using the removeChild method
Referencing a Display Object by index number
Referencing a Display Object by name
Controlling Display Objects in different timelines
Controlling Display Objects in different movies
Using addChild to change parents

Key differences from ActionScript 2.0 include:

1. New ways of handling data that result in a much faster playback performance in Flash Player 9.

2. A new model for detecting and responding to events (like a mouse click or a keyboard input).

3. A display list, which manages the dynamic display of all kinds of graphics on the Stage.

4. Low-level object control, so ActionScript can now control virtually every kind of Flash element.

5. Less dependence on the movie clip symbol as the main actor in advanced Flash projects.

6. ActionScript 3.0 now provides different different objects that are more specific to that task rather than rely on the movie clip for a wide variety of purposes.

7. Changes in the actual language, so users familiar with the previous versions of ActionScript will have to relearn commands (like getURL is now navigateToURL, properties like _x changed to simply x).

Though dramatic, the changes in ActonScript 3.0 provide a clear advantage in performance and overall sophistication that advanced object-oriented programmers and developers of rich Internet applications will appreciate. But newcomers to ActionScript should begin study with the basic building blocks – objects and classes.

This may be more of a challenge to designers who have no programming background at all since it requires a little more thinking on how to do even the simplest of tasks such as applying actions to buttons or movie clips with the new event model.

Documentation and References

Adobe has an excellent online document comparing the differences between ActionScript 2.0 and 3.0 as well as an AS 3.0 manual (.pdf) covering most of AS 3.0 for Flex or Flash. that will be of help. There is also a nice ActionScript 3.0 Migration CheatSheet (.pdf) that you can use, created by Sean Moore that should come in handy too.

For a quick overview of AS 3.0, checkout this video (.zip).

ActionScript 3.0 Language Basics

Custom Classes

Display List

Working with Text

Programmatic Animation


Examples

As an adjunct faculty for a local community college, I ocassionally teach weekend classes on Flash. One of the classes I teach is on the basics of ActionScript.

ActionScript is based on ECMAScript (which JavaScript is based on) and entered the scene in Flash version 5 and now has developed into a fully fledged programming language with true OOP support.

The topics covered in this class are an overview of the core language, using it within button and movieclip symbols, importing external text files, basic animation techniqes, creating preloaders and an introduction to components.

Here is an updated syllabus (.pdf) for the class to give more detail on the topics covered as well as the example files (.zip).

LearnFlash.com is one of them and they offer one of the largest selections of Flash video tutorials.

What they also have is a monthly video podcast which highlights some tips and tricks from their vast library of Flash videos. Here are some of the videos (.zip) that I have collected that would be of use to the beginner Flash user.

These videos can be used with any version of Flash, but are presented in either Flash MX2004 or Flash 8.

Text Animations using Motion Tweens
Movie Clip vs. Graphic Symbol
Use a Movie Clip as a Button
Applying ActionScript to a Button
JavaScript Popup Windows
Creating a Simple Photo Slideshow
Animated Rotation with Tweens and ActionScript
Using the Tween Class to Create Animations
Looping MovieClip via ActionScript
Scroll Text using Components
Image Mask PreLoader

Workarounds are available from both Microsoft and Adobe which use JavaScript to dynamically write these tags to embed the control. These work to a certain degree, but the most complete solution by far is a JavaScript library created by Geoff Stearns called SWFObject which detects and embeds Flash content on a web page.

Done separately, you would detect for the version of Flash player using Adobe’s Flash Player Detection Kit and then use the embedding workaround provided by either company.

Also, you can checkout an alternative JavaScript library by Bobby van der Sluis called UFO. He also wrote on A List Apart a very detailed article on the issues of flash embedding. Great stuff.

The Import Video Wizard steps through the process of selecting your video file, specifying the compression, and choosing which playback control to use. It takes only minutes with no ActionScript code to write.

To publish your flash video, you include your video file (.flv), movie file (.swf) and the FLVPlayback component file (.swf) as well. Almost any web hosting plan will play these flash video files, so there is no extra cost (unlike streaming video). Adobe has a great article on Flash video, as well as this article (.pdf) written by Sas Jacobs explains the whole process step-by-step. For a little more technical explanation try this article too by Tom Green on Digital Web Magazine.