WDIM 121

Congratulations on complete your first Flash class! Final grades have been submitted and are updated on this blog. Have a great break, see you next term!

Dowload the above example here.

Using the Timeline isn’t the only way to animate an Object in Flash. There are several ActionScript Tweening Libraries that you can import and use. Attached is an example of using Tweener to tween the x and y properties of a ball. Notice that the caurina folder is in the same directory and the tweener.fla file. This is so the tweener.fla file can find the Tweener ActionScript files using the caurina.transitions.* package definition.

Here’s how you import tweener:

import caurina.transitions.*;

And to tween parameters of an Object:

Tweener.addTween(ball, {x:0, y:0, transition:"easeOutQuad", time:1, delay:.4});

The first parameter you pass to the addTween method is the instance name of the MovieClip (or DisplayObject) that you want to tween. The second parameter that you pass, is a generic Object that describes what to tween, how long to take for the tween (in seconds), and what type of easing equation to use. The transition property defines the type of easing equations to use, Tweener easing equations can be seen here. There are several optional parameters that you can use to do things like delay a Tween, or call a function before, or after a tween is completed. You can see a full list of Tweener Parameters here.
See the Tweener documentation on Google Code for more on what you can do with Tweener.

Flash CS 4 completely changed the way timeline animation is done. This video is from Adobe TV, and a great example how how to do things the “new” way.

See this video full size here.

gotoandlearn.com is a great place for Flash tutorials. Check out this video titled “This video shows some of the best places to go for Flash inspiration.” and get inspired.

Using Custom Classes is an introduction to Object-Oriented Programming, which is beyond the horizon of this class.

If its something you’re interested in, here’s something to get you started. The most important thing to take away from this is that we are going to write the functionality for what we want, say a ball, to do, and no matter how many balls we create, they will all inherit from a single source of logic, a Ball Class.

When we say Class, we me an external ActionScript file that follows the rules needed to make it a class. Any text file saved with a .as extension can be used as an ActionScript file.

We’re going to create a library item with 4 frame labels. We’ll also create a Custom Class that each instance of the Ball MovieClip will inherit from. This custom class will add listeners for MouseEvents, so that all of our ball instances do the same thing, and run off of the same code.

Download Example

Follow this example

Step 1 - Create the Library Item

Open a new .fla, make sure you have ActionScript 3 selected, and create a ball MovieClip. Inside the ball MovieClip, create a labels layer and an actions layer. Place a stop() Action on frame 1 of the Ball MovieClip. In the labels layer, make frames 1 - 4 blank keyframes. Label one frame “default”, one frame “over”, one frame “out”, and one frame “down”. Change something visually on each frame so you can tell if the MouseEvents are working. Save the .fla as “ExportForActionScript.fla

Step 2 - Relate the Library Item to the External class

Choose File > New > ActionScript File. Save the ActionScript file in the same directory as the ExportForActionScript.fla. Paste this code in the ActionScript file and save it.

If all goes well you won’t get any errors and you should notice that they MouseEvents are working. If not, compare the working example you can download here with what you have.

Check out this Flash site, its a great use of the Timeline, Flash drawing tools, masking, all put to music.

So in class Week 6 we went over how to make a remote controlled robot! Here is the example .fla that I made in class.

Using The Adobe Creative Suite CS 3 or newer, you can import media into Flash directly from a Photoshop or Illustrator file. This is a fantastic features, with a few limitations. Layers are maintained, so if you or whoever designed project kept a clean Photoshop file with named layers and logical organization, that will carry right over into the Flash file. You can choose to create a MovieClip for a Photoshop Layer or Group right in the Photoshop Import Window. To get to the Photoshop Import Window from Flash CS 3, go File > Import to Library > choose .psd file. You can also choose what layers to import, and unique compression options for each. So all in all, its great. One drawback I’ve noticed is it doesn’t handle transparency very well in certain situations.

If you have a graphic on a layer that has transparency, especially if it moving, you may see white ugly crusty edges around your graphic. This is because when importing from Photoshop Flash isn’t using as good of transparency as a .png (Portable Network File) does. So if that happens to you, simply make the layer in Flash that the crustiness is on a guide so it won’t show up in the final swf, and use it as reference to place a png image. You’ll need to go back to Photoshop, show only the layer you want to save, crop it, and choose File > Save For Web > PNG 24 Transparency to create a .png image from Photoshop.

Get an example psd file here.

• Create a new .fla file
• choose File > Import to Library (or Import to Stage if you want it to be automatically placed on the stage)
• Select the .psd file
• Notice the options in the Import Window
• Try making all the head layers their own MovieClip and give them instance names
• Notice that layers from the .psd file were maintained

There are a number of MouseEvents that a MovieClip can listen to. You can see them all at the ActionScript 3.0 Flash Player 9 Language Reference here. The most common is listening to when something is clicked.

To listen for when a MovieClip is clicked, we need to add a listener to the MovieClip, and a assign a function to be called when the event happens. This is where giving your MovieClip an instance name comes into play. You use the instance name that you gave the MovieClip in the Properties Panel to target that MovieClip with ActionScript. In this example, we are targeting the sun_mc MovieClip;

// this gives the movieclip a pointer cursor
sun_mc.buttonMode = sun_mc.useHandCursor = sun_mc.mouseEnabled =  true;
// this adds a listener to the sun, whenever its clicked, the handleMouseUp function is called
sun_mc.addEventListener(MouseEvent.MOUSE_UP, handleMouseUp);

// this is the handleMouseUp function
function handleMouseUp(e:MouseEvent) : void {
	// Because its an event handler you can grab a reference to whatever was clicked through the MouseEvent parameter, in this case clicked will always be sun_mc
	var clicked:MovieClip = e.currentTarget as MovieClip;
	// clicked is the same thing as sun_mc, we tell it to go to and play the clicked frame on its timeline
	clicked.gotoAndPlay("clicked");
}

Get the source example files here.

If you have questions feel free to post comments to this blog post or post to the forum.

Get the handout for the Banner Ad assignment here. Remember to post to the forum and/or email me if you have any questions.