TCED610-01

As requested, here is a link to a fairly detailed set of Flash tutorials that I wrote a while back  Enjoy!

http://tutorials.craigkapp.com/?page_id=106

Today we took a brief tour into the world of Second Life, including a short demonstration of how TCNJ uses its small virtual “island” to connect students and teachers in the virtual world. If you’d like to try Second Life yourself you can begin by getting an account at http://secondlife.com – once you’re all set up with a new avatar name you can use the following guide to get started.

Moving around Second Life

• You can make your avatar walk by using the arrow keys. Up will move your forward. Left will turn you left, Right will turn you right and back will make you walk backwards.
• Hitting the “Page Up” key one time will cause your character to jump.
• Holding down the “Page Up” key will cause your character to fly!
• When you are in the air you can use the Up, Down, Left and Right keys to move around
• Holding down the “Page Down” key will cause your character to land on the ground.

Changing the appearance of your avatar

• Right-click on your body and select “Appearance”
• Use the different buttons (Shape, Skin, Hair, Eyes) to change the look of your avatar

Putting on new clothes

• Click on the Inventory button at the bottom left side of the screen
• Open up the “Library” menu
• Open up the “Clothing” menu
• Open up a folder (i.e. “Boy Next Door”) – find a piece of clothing or body part that you wish to wear
• Right click on the item and select “Wear”
• You can take the item off by right-clicking on the item and selecting “Take Off”

Chatting with your friends

• Hit the Enter key to enter “Chat Mode”
• Type in your message at the bottom of the screen. Click Enter when finished.
• Everyone around you will see your message!
• Hit the Escape key to get out of “Chat Mode”

Places to visit in Second Life

Timeline Actions

Action Script code can be attached to almost anything inside Flash, including individual keyframes. You can tell if a specific frame has an action associated with it by looking at the timeline – just look for a keyframe with a lowercase ‘a’ in it. Adding an action to a keyframe is as easy as clicking on a keyframe and opening up the Actions panel at the bottom of the screen. If you’ve accidentally closed your actions panel you can always get it back by pulling up the Window menu and selecting Actions.

We’re going to use timeline actions in this exercise to “stop” the action of a movie clip. The final project will look similar to the following – use the button at the bottom right hand side of the screen to control the action:

Source FLA

There are a number of things going on in this movie, including:

1. A stationary Sun graphic
2. An orbiting Earth graphic
3. A button that starts the orbiting sequence
4. Text labels for the four seasons

Here’s how you can construct something like this movie given these four elements:

1. Create a new movie clip called Sun. Draw a big round yellow ball in this movie clip. Go back to Scene 1 and drag a copy onto the stage in the center of the screen.
2. Create a new movie clip called Earth. Draw a smaller ball and add some land using the paintbrush tool. Go back to Scene 1 and add a new layer into your movie and then drag the ball onto this layer.
3. We want the Earth to orbit the sun in an elliptical path. To do this we can create a motion guide like we did back in the first set of exercises. Insert a keyframe on frame 60 on your Earth layer and then click on INSERT -> TIMELINE -> MOTION GUIDE. This will create a new guide layer above the Earth layer. To create an elliptical path I used the Oval tool – just make sure that the “fill” color of your oval is empty (the tiny white box with the slash through it at the top right side of the color selection pallet). Once you have your oval you should create a tiny cutout at the top – this can be accomplished by clicking on the Selection Tool (black arrow) and drawing a small rectangle at the top of your oval. Then hit the delete button on your keyboard to remove the tiny slice. This creates a one-way path that we can use to “snap” the Earth movie clip onto. Click on frame 1 of the Earth layer and snap the Earth graphic to one side of the guide. Then do the same thing on keyframe 60. Click on CONTROL -> PLAY to test your movie.
4. Now we need to stop the animation at four key times (Winter, Spring, Summer and Fall). Insert a new layer and name it “Actions” for easy references. On this layer you should go ahead and insert keyframes at the points where you would like to freeze the animation. Click on each of these keyframes and open up the ‘Actions’ panel and type in this command:stop();This will cause the movie to stop and wait when it reaches this frame. Resuming the animation is the job of the ‘Next Season’ button.
5. Create a new button symbol called “nextseasonbutton”. Design a basic button with ‘Up’, ‘Over’ and ‘Down’ states. Return to Scene 1 and drag a copy of this button onto a new layer. Name this button “seasonbutton” in the “Instance name” field on the properties panel.
6. Now we need to give this button some instructions that tell the movie to move past any “stop();” actions that it encounters. Click on the newly created button layer and open up the ‘Actions’ panel – type in the following code:
   

   seasonbutton.addEventListener(MouseEvent.CLICK, playnextframe);

   function playnextframe(event:MouseEvent) {

   play();

   }

   This tells the button to listen for a mouse click. When it does, it will run the “playnextframe” function, which simply tells the movie to start playing. The “play();” command tells the movie to skip over a “stop()” action that is currently acting on the movie.

Dragging and Dropping

Dragging and dropping movie clips with the mouse is a great way to easily add interactivity to a Flash movie. Here’s an example that illustrates the concept with a jigsaw puzzle game of my dog Patrick in his Halloween costume:

Source FLA

Here’s how to build this example:

1. The first thing I did in creating this puzzle was to find an image that I wanted to “puzzleize”. You can import images directly into Flash by clicking on FILE -> IMPORT -> IMPORT TO LIBRARY. After a second or two you should see the filename of the file you selected in the LIbrary panel. Drag a copy of this file out onto the stage.
2. If you took the image at a very high resolution you may notice that it more than fills the stage. Go ahead and scale down the image to a more manageable size so that it fits on the stage.
3. Next I needed to find a way to create the puzzle pieces out of my image. To do this I clicked on the image and then selected MODIFY -> BREAK APART. This lets you access the image as though it was one big shape.
4. I used the line tool to draw a grid on top of the image. Once the grid was in place I used the selector tool (black arrow) to “curve” the lines of to form each puzzle piece. You can curve a line by placing the selector tool next to a line segment – you should notice that the tool changes to an arrow with a small curved line next to it. When in this mode you can click your mouse and deform a line segment. Go ahead and curve each of your line segments so that they make each puzzle piece a slightly different size.
5. Now you need to turn each of the shapes you created in step 4 into a movie clip. You can do this by clicking on a puzzle piece and selecting MODIFY -> CONVERT TO SYMBOL. I named my puzzle pieces “p01″ through “p12″ – make sure that you select “movie clip” as the type of symbol when you create each piece. Also make sure to type the name of the symbol into the “Instance Name” field on the Properties panel. This will allow us to refer to a particular puzzle piece in our ActionScript code.
6. Move all the puzzle pieces off of the wavy grid that you created and delete the grid. You can do this by double clicking on the grid and hitting the DELETE key on your keyboard.
7. Finally we need to add some ActionScript to tell the puzzle pieces that they are “draggable”. To do this we need a few things, including:
   • Each puzzle piece must “listen” to see if it has been clicked and that the mouse is being held down
   • The puzzle piece must follow the mouse if it is told that it is being clicked on and dragged
   • The pieces must listed to see if the mouse has been released. If so they should stop following the mouse.

   Here’s the code to handle the “listening” for mouse clicks:

   p01.addEventListener(MouseEvent.MOUSE_DOWN, startdraggingme);

   p01.addEventListener(MouseEvent.MOUSE_UP, stopdraggingme);

   This tells puzzle piece “p01″ to listen to see if the mouse is down – if so it will run the set of instructions named “startdraggingme”. It also tells “p01″ to listen to see if the mouse is up – if so it runs the “stopdraggingme” set of instructions. The “startdraggingme” function looks like the following:

   function startdraggingme(event:MouseEvent) {

   event.target.startDrag();

   }

   This instruction set says “whatever puzzle piece was just clicked should behave as though it is being dragged around the screen by the mouse”. The “event.target” fragment is Flash’s way of saying “whichever puzzle piece was just clicked on” – this is a very useful technique as it allows us to “reuse” the “startdraggingme” function for each of our puzzle pieces – we won’t have to copy and paste 12 copies of this function for each of our pieces! The “stopdraggingme” function looks almost identical, but with a slight variation:

   function stopdraggingme(event:MouseEvent) {

   event.target.stopDrag();

   }

   You’ll notice that we use “stopDrag” instead of “startDrag” in this function to tell the piece that it should stop following the mouse.

8. Go ahead and test your movie to make sure piece “p01″ works. If it does, you can duplicate the event listener code for each of the other pieces. Or you can just copy and paste the following listing if you’re feeling lazy
   

   p02.addEventListener(MouseEvent.MOUSE_DOWN, startdraggingme);

   p02.addEventListener(MouseEvent.MOUSE_UP, stopdraggingme);

   p03.addEventListener(MouseEvent.MOUSE_DOWN, startdraggingme);

   p03.addEventListener(MouseEvent.MOUSE_UP, stopdraggingme);

   p04.addEventListener(MouseEvent.MOUSE_DOWN, startdraggingme);

   p04.addEventListener(MouseEvent.MOUSE_UP, stopdraggingme);

   p05.addEventListener(MouseEvent.MOUSE_DOWN, startdraggingme);

   p05.addEventListener(MouseEvent.MOUSE_UP, stopdraggingme);

   p06.addEventListener(MouseEvent.MOUSE_DOWN, startdraggingme);

   p06.addEventListener(MouseEvent.MOUSE_UP, stopdraggingme);

   p07.addEventListener(MouseEvent.MOUSE_DOWN, startdraggingme);

   p07.addEventListener(MouseEvent.MOUSE_UP, stopdraggingme);

   p08.addEventListener(MouseEvent.MOUSE_DOWN, startdraggingme);

   p08.addEventListener(MouseEvent.MOUSE_UP, stopdraggingme);

   p09.addEventListener(MouseEvent.MOUSE_DOWN, startdraggingme);

   p09.addEventListener(MouseEvent.MOUSE_UP, stopdraggingme);

   p10.addEventListener(MouseEvent.MOUSE_DOWN, startdraggingme);

   p10.addEventListener(MouseEvent.MOUSE_UP, stopdraggingme);

   p11.addEventListener(MouseEvent.MOUSE_DOWN, startdraggingme);

   p11.addEventListener(MouseEvent.MOUSE_UP, stopdraggingme);

   p12.addEventListener(MouseEvent.MOUSE_DOWN, startdraggingme);

   p12.addEventListener(MouseEvent.MOUSE_UP, stopdraggingme);

Symbols & Instances

Remember when we created ’symbols’ last week for the music video project? We mainly did this because Flash allows us to “motion tween” these objects and move them smoothly across the stage without them breaking apart of morphing into something else. We’re going to discuss the concept of symbols in greater detail in this section and demonstrate what else they can do for us.

To begin, let’s talk about the three types of symbols that Flash supports. You’ll notice that when you click on the INSERT-> NEW SYMBOL command you’re given the option to create three types of symbols – Movie Clips, Buttons and Graphics.

Graphics are the most simple of the symbol types support by Flash. These are basic objects that allow you to store static (non-moving) images.

Think of Movie Clips as miniature Flash movies. Movie Clips have their own internal timeline, allowing you to create sub-movies or animated characters within your main movie. They also have the ability to work with Flash’s internal language, Action Script. We will be using Movie Clips most of the time when working within Flash.

Buttons are special symbols that allow you to do a number of things. From a visual standpoint, buttons allow you to define how they look based on where the mouse is on the screen. For example, buttons allow you to define the look of a button based upon whether the mouse is over the button, off of the button or whether the left mouse button is depressed while the mouse cursor is hovering over the button. Buttons also allow you to tell Flash (via Action Script) to do something when the button has been clicked. We’ll discuss buttons more in the next section of this lesson.

As you already know, we call something that appears in your Library a “symbol.” Flash makes a “copy” of your symbol when you drag a copy of a symbol from your Library onto the stage. We call this “copy” an “instance.” Instances are like clones. They are identical to the main symbol that is still in the Library. Unlike clones, if you make a change to the main symbol in your library all of the instances will update themselves. For example, using a stick figure symbol from your library you can create a small army on the stage. If you modify the symbol in your library to say, wear a hat, your entire army of stick figures will all instantly begin wearing hats.

Individual instances are not completely dominated by their parents in the Library though. Instances can have their own identities, and can be controlled independently. When you click on an instance on the stage you have the ability to change its specific properties as defined by the properties panel. For example, one of your stick figures can be scaled larger than another – this property is unique to that particular instance of the movie clip.

Buttons

Let’s create a button inside Flash that responds to the mouse. To start, click INSERT->NEW SYMBOL – call your symbol ‘Button’ and make sure that the button type is checked off. Then click OK.

You’ll notice that time timeline is a little different for button symbols (see below) – instead of having an unlimited set of frames to work with you’re only presented with four choices (Up, Over, Down, Hit)

We’re going to create a button that “glows” when the mouse is over it and “presses down” when the mouse is depressed over it. First, draw a rectangle in frame 1 (the “Up” frame)

Next, insert a keyframe in frame 2 (the “Over” frame) – this is what we want the button to look like when the mouse is over it. Change the color of the button using the paint bucket tool.

Next, insert a keyframe in frame 3 (the “Down” frame) – this is what we want the button to look like when the mouse is over the button and the left mouse button is pressed down. Make the button a little smaller using the Free Transform tool (the third tool down in the drawing toolbar).

Don’t worry about the “Hit” state at this point – this is used for “invisible” buttons or for buttons that should have a larger than normal “activation” area – we will discuss this more in later lectures.

Click back to the main timeline and drag an instance of the button onto the stage. Then test your movie. You should see something like this:

Making Something Happen

We probably want it to do something other than look cool. To making anything happen that is beyond what can be accomplished using basic timeline effects we need to use Action Script. Action Script is Flash’s internal programming language. So let’s begin!

So, we’ve got ourselves a button on the stage. Now we need something else on the stage that the button will control for us. Go ahead and insert a new symbol called “Rectangle” – make sure it is a movie clip. Just draw a basic rectangle in this movie clip and go back to Scene 1.

Drag an instance of Rectangle onto the stage. We need to uniquely name this rectangle – click on it and give it the name “rectangle1″in the “Instance name” field in the properties panel. Click on your button and give it the name “button1″ in its instance name field.

Here’s the important part. Flash is VERY picky when it comes to where Action Script code is placed. For the purposes of this lecture (and almost all other lectures with a few exceptions) you will always be placing the Action Script code on frame 1 of your timeline. In fact, I usually create a brand new layer named “actions” to hold all of my ActionScript code. So, before you do anything else create a new layer called “Actions” and click on Frame 1 in your timeline.

Okay, once Frame 1 is selected open up your Actions panel and type in the following code:

button1.addEventListener(MouseEvent.MOUSE_UP, rotaterectangle);

function rotaterectangle(event:MouseEvent)

{

rectangle1.rotation = 45;

}

What does this mean? I’ll break it down for you, line by line:

button1.addEventListener(MouseEvent.MOUSE_UP, rotaterectangle);

This line says that the button1 instance should “listen” to whether the mouse button has been pressed and “released” while over it. If this did indeed happen, it should look for a set of instructions by the name of “rotaterectangle” and execute them.

function rotaterectangle(event:MouseEvent)

{

This line defines an instruction set, or a “function”, by the name of “rotaterectangle”. This function is “invoked” by an event that was caused by the mous (a mouse click and release over our button in this case). The little curly brace at the end of the line says that we are beginning to define a set of instructions. Flash will know that we are done writing instructions when it finds a corresponding curly brace going in the opposite direction.

rectangle1.rotation = 45;

}

This line begins to define the instructions set forth in the “rotaterectangle” function. It says we are going to reset a property of rectangle 1. The property we are resetting is the “rotation” property. The rotation property describes the current “spin” of the instance in question. In this case we are telling Flash to reset the property to the value “45″ which means “45 degrees.” The semicolon is computer language speak for the end of a statement. You can read it just like a period at the end of a sentence. The closing squiggly brace means that we’re done issuing commands (it “closes out” the squiggly brace on the line before.) We call this pairing of open braces / closed braces as a “block of execution.”

Test your movie – you should get something like this:

The only problem with the above movie is that the rectangle only rotates one time. If you want to have it continue to rotate every time you click on the button you can modify your code to read like the following. Make sure you’re clicking in Frame 1 before you type this in!

function rotaterectangle(event:MouseEvent)

{

rectangle1.rotation = rectangle1.rotation + 45;

}

This basically says “set the rotation of rectangle1 to equal its current rotation PLUS 45 degrees.” If you did it right it should look like this:

Commenting

The Action Script we’ve been working with so far has been relatively simple, but it will get more complicated as the weeks go on. Programmers use a technique called “commenting” to leave themselves little notes within their programs – these notes are usually used to describe what the programmer was trying to do within the code at hand. You should try and get into the habit of commenting your code for later use – you can do this by using double slashes (”//”) – this tells flash to ignore the line of code. You can type whatever you want at that point. For example, some useful commenting for our little program above might look like this:

// tell button1 to listen for the mouse to be clicked and then released – when this is detected, run the “rotaterectangle” function

button1.addEventListener(MouseEvent.MOUSE_UP, rotaterectangle);

// the “rotaterectangle” function causes “rectangle1″ to rotate itself 45 degrees

function rotaterectangle(event:MouseEvent)

{

rectangle1.rotation = rectangle1.rotation + 45;

}

Exercise

This exercise is completely voluntary, but it will help you to explore the concepts of mouse events and movie clip properties in Flash.  In this exercise you will be creating a program that will allow the user to control a movie clip using a series of buttons. Here’s an outline of what you should do:

1. Create a “character” movie clip. This can be anything, though certain objects won’t work well for this assignment. Try to stick to a simple shape with corners such as a rectangle or triangle. Drag an instance of this onto the stage and name it “character”
2. Create a “button” symbol. Make it small as you will be using it a number of times in this project and you’ll need to fit about 12 of them on the screen.
3. Use this button to control the following properties of “character”
   1. Rotation (property name = “rotation”, i.e. “character.rotation”) – one button to rotate the character 15 degrees to the right, one button to rotate the character 15 degrees to the left (hint: +15 moves to the right, -15 moves to the left)
   2. X Position (property name = “x”, i.e. “character.x”) – one button to move the character 10 pixels to the right, one button to move the character 10 pixels to the left
   3. Y Position (property name = “y”, i.e. “character.y”) – one button to move the character 10 pixels up, one button to move the character 10 pixels down
   4. X Scale (property name = “scaleX”, i.e. “character.scaleX”) – one button to enlarge the character horizontally, one button to shrink the character horizontally. Use increments of 0.1.
   5. Y Scale (property name = “scaleY”, i.e. “character.scaleY”) – one button to enlarge the character vertically, one button to shrink the character vertically. Use increments of 0.1.
   6. Alpha (property name = “alpha”, i.e. “character.alpha”) – one button to make the character more opaque, one button to make the character more transparent. Use increments of 0.1.

Your final project should look something like this:

This tutorial will teach you how to great a keyboard-controlled character like the following:

Source FLA

Here’s how you can build this yourself:

1. Create a character movie clip. Add this to your library and make sure to name the instance “character”
2. Create two “hit regions”. In my example I added them to my library and named them “blue” and “red”.
3. Add a text box to the stage. Name the text box “statustext” – make sure it is set to “dynamic text” in the Properties panel.
4. Add the following code to the stage:

// listen for keyboard input

stage.addEventListener(KeyboardEvent.KEY_DOWN, custom_keydown);

function custom_keydown(e:KeyboardEvent)

{

// up key was pressed

if (e.keyCode == 38)

{

character.y = character.y – 5;

}

// left key was pressed

if (e.keyCode == 37)

{

character.x = character.x – 5;

}

// right key was pressed

if (e.keyCode == 39)

{

character.x = character.x + 5;

}

// down key was pressed

if (e.keyCode == 40)

{

character.y = character.y + 5;

}

// see if the character is hitting something

if (character.hitTestObject(blue))

{

statustext.text = “I’m touching the blue box.”;

}

else if (character.hitTestObject(red))

{

statustext.text = “I’m touching the red box.”;

}

// otherwise the character isn’t hitting anything – erase the status text box

else

{

statustext.text = “”;

}

trace (e.keyCode);

}

This tutorial will teach you how to build a draggable hot-spot game like the following:

Source FLA

Here’s how you can build this yourself:

1. Construct two large “hot spot” regions. In my example I called them “verbregion” and “nounregion”. Add them to your library and name each instance on the stage appropriately (i.e. “nounregion”, “verbregion”)
2. Construct any number of smaller “draggable” regions. These smaller movie clips should be classified based on the hot spots (i.e. in my example all of my draggable regions are considered either nouns or verbs) – name each of these instances accordingly
3. I placed my hotspot region on a layer behind the draggable region layer. This let me drag my symbols on top of the hotspot region without them becoming obscured by the region itself.
4. Create a new layer called actions and type in the following code:

// two “container” variables that will keep track of where we are dragging our movie clips from

var startx:Number;

var starty:Number;

// tell each draggable movie clip to listen for the mouse to be down on top of them

// if it is, they should run the “startdragging” function

// if using text in your movieclip you need to add ‘myMovieClip_mc.mouseChildren = false;’

car.mouseChildren = false;

car.addEventListener(MouseEvent.MOUSE_DOWN, startdragging);

drive.mouseChildren = false;

drive.addEventListener(MouseEvent.MOUSE_DOWN, startdragging);

engine.mouseChildren = false;

engine.addEventListener(MouseEvent.MOUSE_DOWN, startdragging);

// run by all of our draggable movie clips

// this function lets each clip be dragged around the screen

// it also stores the location that they are being dragged FROM

// this is useful since we may want to send them back there if the drag

// is unsuccessful and lands in the wronge spot

function startdragging(event:MouseEvent):void

{

// note: event.target refers to the movie clip that is being dragged

// we don’t need to know its name at all!

// store the current x & y position of the movie clip that is being dragged

startx = event.target.x;

starty = event.target.y;

// drag the clip

event.target.startDrag();

}

// each movie clip should listen for the mouse to be released

// if so, run the appropriate stop dragging function based on its part of speech

car.addEventListener(MouseEvent.MOUSE_UP, nounstopdragging);

drive.addEventListener(MouseEvent.MOUSE_UP, verbstopdragging);

engine.addEventListener(MouseEvent.MOUSE_UP, nounstopdragging);

// stop dragging instructions for nouns

function nounstopdragging(event:MouseEvent):void

{

event.target.stopDrag();

// if we haven’t hit the noun region, go back to where you started!

if (! event.target.hitTestObject(nounregion))

{

event.target.x = startx;

event.target.y = starty;

}

}

// stop dragging instructions for the verbs

function verbstopdragging(event:MouseEvent):void

{

event.target.stopDrag();

// if we haven’t hit the verb region, go back to where you started!

if (! event.target.hitTestObject(verbregion))

{

event.target.x = startx;

event.target.y = starty;

}

}

Here’s how you can put your own Flash movies (SWF) files onto your WordPress blog:

1. In Flash, click on File -> Publish.  This causes Flash to “compile” your movie into a SWF file, which is a web-deliverable version of your project.
2. In WordPress, open up your blog’s dashboard and create a new post.
3. Click on the “star” button in the “add media” panel
4. Upload your SWF file
5. Highlight the URL of the SWF that you just uploaded and copy it using Edit -> Copy
6. Exit out of the file upload menu
7. Open up the “kitchen sink” button on your toolbar (last button on the right side of the first row of tools – make sure that you are in Visual mode in order to see the toolbar)
8. A second row of tools will appear.  Click on the icon that looks like a filmstrip.  This will create a “wrapper” for your Flash movie.
9. Paste in the URL of your Flash movie and type in the width and height of your movie (the same width and height you set when you originally built your animation in flash)
10. Save your post – you should now see your animation in-line with your blog posting.

Basic 2D digital animation can be likened to the flip-books of yesteryear. In order to simulate the illusion of motion it is necessary to draw an individual “frame” of animation that depicts each discrete state of the movement you are attempting to convey. After this has been accomplished, the images are assembled together into a self-contained package that can easily be inserted into a web page.

The most common type of basic animation is the animated GIF file. Some examples can be seen below:

Animated Guest Book Graphic (~18K)

Animated Pumpkin Graphic (~8K)

The advantage to using animated graphics like the ones above is easily seen – they are mildly engaging and easily inserted into existing web sites in the form of an image file. The disadvantages are many, though. Animated graphics by nature are much larger than their “static” cousins. This occurs because you are effectively adding an additional graphic (or frame) for each bit of motion you wish to simulate. Animated graphics do not allow for any interactivity as well. But they definitely have their niche, and will continue to be used for quite some time.

What is Flash?

The current state of the web imposes a stringent set of limitations on potential applications, none the least of which is bandwidth. It takes time to transmit information across the Internet, so the larger the amount of information, the longer it will take to transmit.

Flash came into being to attempt to fill the long vacant niche of web based animation. Traditional computer generated animation came along with the price tag of huge file sizes, mainly due to the fact that they stored graphical information as a series of bitmaps. For every individual pixel, one or more bits had to be allocated to store a color value. Flash stores information as a set of vectors, or mathematical equations. This allows a significant reduction in the amount of space needed to store a graphical object. Consider the following example:

The graphic above is a bitmapped circle. The computer must store a set color values for each discrete point on, around, and inside the circle. When the circle expands in size, so do the points, and thus quality is lost.

The computer must allocate a 15×15 grid of pixels to store the circle. That’s 225 individual pixels. If we were using 8 bit color (256 colors), we need exactly 1,800 bytes to store the image above.

A vector based rendition of this circle would contain the following:

4 = x2 + y2 , 0000FF

All we need to do is to store the mathematical equation for a circle and the color value of the object. This equates to a significant reduction in the amount of space needed to store the circle. And, as an added bonus, vector based images are fully scalable. As you increase their size, their edges do not get “pixilated” due to the enlarging on individual pixels. The mathematical equation simply gets recalculated using higher values to generate the same smooth curve.

The other feature that makes Flash so suitable for web delivery is that it also has a built in ability to create “streaming” animations. A Flash movie will begin playing before the entire file has downloaded. The remaining portion of the movie will download in the background automatically, thus freeing the end user from a lengthy download.

Anatomy of Flash

Go ahead and open up Flash. The Flash application interface is similar to that of Photo Shop. Along the left side of the screen you’ll see a series of drawing tools, and to the right you will see an a white box which is called the ’stage.’ At the bottom of the screen you will see the ‘Properties’ panel for editing specific aspects of a selected object and at the right you will see a space for docking specialized editing panels. So far, so good. The main difference between the Flash interface and that of a 2D image editing program is the ‘Timeline’ that runs along the top of the screen. The timeline allows you to define changes in your images over time and thus gives you the ability to create scenes that animate..

Flash CS3 Interface

The Timeline

The timeline is arguably one of the most important areas of the Flash interface. All visible graphics, animations, sound and video objects must appear on the timeline in order for the end user to see and / or interact with them (with the exception of graphics generated via ActionScript, but we’ll get to that in a bit!) The small rectangular boxes that extend out from the left side of the interface are called “frame” markers. Frame markers are numbered along the top of the screen for reference purposes – you will be referring to them quite often when designing animation sequences. These numbers represent time – the larger the number, the farther away the frame marker is from the beginning of the movie.

In general Flash movies run at 12 frames per second (FPS.) You can change this value by clicking on the stage and setting a new number in the ‘Frame rate’ box in the Properties panel. Under this system you can divide the total number of frames you are using by 12 to determine how long in seconds your animation will last. For example, a 36 frame animation will last 3 seconds.

We need to create some content on the timeline before we can start animating in Flash. Content can be drawn from within Flash or can be brought in from another source, such as an image, video or sound file. Content must be put into a “keyframe” on the timeline. Keyframes denote that something “new” is happening on the timeline. For example, If you wanted a ball to appear in your animation at frame 5 you could place a keyframe on frame 5 and draw a ball. If you wanted to have the ball exist for 5 frames and then disappear you would create a blank keyframe on frame 10. That way Flash would know that there was a “change” on frame 10 and that the ball was no longer to be displayed. Keyframes become very important in animation as they allow you define the “start” and “end” point of an animation sequence. Keyframes appear as little circles within a frame. If the circle is white it means that the keyframe is blank. If it is shaded it means that there is something in that frame.

You will need to create multiple layers on the timeline if you’d like to have more than one thing happen at the same time. Flash can only support one animation per layer. You can add new layers by using the ‘Insert layer’ icon in the timeline panel. Layers can be renamed and can be organized into folders for easier access.

Animation Techniques

There are two basic animation techniques in Flash – Shape Tweening and Motion Tweening. The easier of the two – Shape Tweening – should be used in the following circumstances:

1. To move simple shapes across the screen

2. To “morph” simple shapes into other simple shapes

Keep in mind that all animation in Flash requires that the animation take place on its own Layer, which is similar to a PhotoShop layer. If you have Flash open you should already have a layer to work with in the Timeline area named ‘Layer 1′. If you need to make more you can always click on INSERT->TIMELINE->LAYER.

Click on the small white box on layer 1 that has a small circle in it. This is Flash’s symbol for a keyframe and it tells Flash that something new exists in this frame of animation. After you’ve clicked here go ahead and use the drawing tools to draw a blue ball on the stage. You can do this by looking for the Rectangle Tool (the 8th icon down in the drawing toolbar), positioning your mouse over tool and holding down the left mouse button. After a second or two a sub-menu will appear – select the oval tool and draw a ball similar to the one below. Selecting a color using the swatches at the bottom of the drawing toolbar will cause the ball to be drawn with the fill color of your choice.

Now we want to move the ball across the stage. To do that we need to first tell Flash how long this animation should take. We measure how long animations last in Flash in terms of how many frames they take to execute. As stated above, the default speed of a Flash movie is 12 frames per second, so let’s have this ball take 2 seconds to move across the stage. Click your mouse inside Frame 24 on Layer 1 and choose INSERT->TIMELINE->KEYFRAME. Your screen will look as follows:

Now we’ve told Flash that there’s something going on in Frame 1 (a ball at the top of the screen) – we’ve also told it that nothing is happening from frame 1 to Frame 24 (as can be seen by the standard gray frames that exist on the timeline). Frame 24 has a keyframe in it, which means that something can change in the animation here. Let’s move the ball now. Make sure that you’ve got Frame 24 selected and move your ball to the bottom right of the screen. Try playing your movie now and see how it works (CONTROL->PLAY MOVIE)

See how choppy this is? In order to make it smoother we have to tell Flash to animation the frames in between the two keyframes. To do that click anywhere in-between those frames on the timeline and choose SHAPE from the TWEEN menu at the bottom of the screen. Playing your movie now will result in the following:

Note that you can change any aspect of the animation by modifying what’s going on in the keyframes. If you wanted to move the ball to the top right instead of the bottom right just move the ball in Frame 24. Playing your movie again will show the change in your animation. If you’d like the animation to take longer you can click and then click-drag the keyframe in frame 24 to a higher frame, thus adding more time in between the two keyfames. Likewise if you’d like to make it shorter you can drag the keyframes closer together.

Shape tweens also allow you to take advantage of Flash’s ability to work with vector based objects and perform what is called a ’shape morphing’ – to see this in action let’s modify your movie a bit. Click into your first frame and select your ball using the black arrow tool. Then delete the ball and replace it with a red square. Running your animation again will result in the following:

Symbols & Motion Tweening

Flash also allows you to move more complex objects across the stage, though if you were to try and move a complex object (one with many shapes, colors, etc) using the Shape Tweening technique you would be presented with a weird image morph effect going on all the time. To allow objects to ’stick together’ we have to group them in some way.

To start, open up a new Flash movie. Then click on INSERT->NEW SYMBOL. We’re going to create a ‘Movie Clip’ symbol of a Snowman, so type ‘Snowman’ into the Name blank. Then click the OK button. You’ll notice that your screen changes slightly to indicate that you are editing a symbol (see below):

The “breadcrumbs” above the timeline indicate that you are currently inside Scene 1 of your movie, editing the ‘Snowman’ symbol. You can get back to Scene 1 by clicking on its name (it acts similarly to a hyperlink.) You can also use the ‘Library’ on the right side of the screen to edit symbols – just double click on symbol to go into “editing” mode.

Okay, so we’re in editing mode for our little Snowman. Go ahead and draw a snowman similar to the one below on the stage:

Click on the ‘Scene 1′ hyperlink to get back to scene 1 of your movie. Click on the keyframe on layer 1 and drag a copy of your Snowman out of the library and onto the stage. Go to frame 24 and create a keyframe there. Move the Snowman across the screen in this keyframe. Then click somewhere between the two keyframes and choose ‘Motion’ from the ‘Tween’ drop down on the properties panel. Your movie should look something like this:

You have some additional options at your disposal for motion tweens that can be defined using the properties panel. For example, if you want the snowman to rotate while moving you can use the ‘Rotate’ drop down to define which direction and number of rotations to apply to the tween. You can also modify the symbol at either keyframe to change how the animation takes place – for example, a popular effect is to “scale” the snowman down to a smaller (or larger) size to simulate the object getting bigger (or smaller) over time. You can also click on the symbol and use the ‘Color’ dropdown to change color aspects – the most popular effect here is to change the Alpha (opacity) of the image to simulate it fading in or out as can be seen below:

Motion Guides

You can tell Flash to move a symbol along a specific path by using a Motion Guide. To create a motion guide in your current snowman movie you can do the following:

1. Click on Layer 1
2. Click on INSERT -> TIMELINE -> MOTION GUIDE
3. A new layer will appear. Click on this layer and use the pencil tool to draw a guide in any color. The guide will not be visible when the movie is “published” (we’ll talk about publishing in the last section of the tutorial)
4. Click on Keyframe 1 on Layer 1. Click on the black arrow (selection tool)
5. “Snap” your snowman’s center point (a little white circle) to one end of your motion guide
6. Click on Keyframe 24 on Layer 1
7. “Snap” your snowman’s center point (a little white circle) to the other end of your motion guide
8. Play your movie using CONTROL -> PLAY
9. To see the movie without the motion guide you can use CONTROL -> TEST MOVIE to see the final version

Using Sound and Music

Flash makes it easy to include sound and music in your projects. The first step to using audio is to obtain a music file. Flash works best with MP3 files, but you can use other files in a pinch. Keep in mind that adding lots of music to your movies will cause the final file size to increase dramatically. A good place to find audio files is at the Flash Kit Loops Library. This library of audio files are designed to be “looped” over and over to provide a seamless background track for your movie.

Once you have a file downloaded to your machine you can bring it into Flash by clicking on FILE -> IMPORT -> IMPORT TO LIBRARY. The audio file will appear in your library listing and you can use the ‘Play’ button over in the library interface to preview the sound.

Sounds need to go onto the timeline just like everything else in Flash. I like to create an entirely separate layer for sounds. Once you have a layer you can drag the file out onto the stage – it won’t show up as a visual object there, but you’ll know you did it right if the timeline indicates that there is a “waveform” present on the layer. Click on this waveform and look at the properties panel. The ‘Sync’ property allows you to define how the sound will play within your movie. Setting this to ‘Event’ will play the sound as a high quality sound but will not guarantee that the sound will always synchronize with the animation that is happening on other layers. Changing this to ‘Stream’ will force the sound to synchronize with the timeline, though the quality may be slightly less than if you set it to ‘Event.’ For purposes of the Music Video assignment you should use the ‘Stream’ property.

Testing Your Movie

The best way to test your movie is through the CONTROL -> TEST MOVIE command. This command lets you see how your movie will appear once it is “published” (see below). It also removes “housekeeping” items, such as motion guides, and crops the edge of your movie so that you only see objects that are actively on the stage. From this point forward when we will be using this technique in lieu of the CONTROL -> PLAY command.

Publishing Your Movie

When you’re all done you’ll probably want to do something with your movie other than watch it within Flash. Thankfully Flash exports itself into a number of very compatible formats. To export your movie you should first save it and then click on FILE -> PUBLISH SETTINGS. HTML and SWF should be checked – these are the default web compatible formats. You can also export Flash as a Quicktime movie if you’d like to import it into a more comprehensive video editing package, or use the Windows or Mac projector file to create a self executable file that can be played without any special software (SWF files need the free Flash plug in in order to play).

Once you’ve published your file you can link it to your web site fairly easily depending on your preferred web publishing package. Popular web-based content management systems (such as WordPress) contain a ‘Insert Embedded Media’ button in their authoring interface. If you selected HTML in the Publish Settings menu you will also be given a “wrapper” document that contains all the HTML code necessary to to put your Flash creation on a website. You can copy and paste this code onto your own site (don’t forget to upload the SWF file as well!) – you could also just upload the HTML file and SWF files to your site and create a link to the HTML file.

Assignment: Flash Music Video

In this assignment you will be drawing on the basic Flash animation skills covered in class in order to create an animated “Music Video.” The video must be at least 30 seconds long – that’s 900 frames at 30fps. Going longer than this is definitely encouraged.

Here are the ground rules:

1. Your animations should reasonably synch up with the music being played.
2. You can select any music file you want, just keep it non offensive.
3. Likewise, keep your animation clean.

Scratch is a great tool to develop small, interactive multimedia projects that can easily be embedded into your blog or website. To get started using Scratch, visit the Scratch website at http://scratch.mit.edu . Once there go ahead and download a copy of the software – Scratch is available for both Macs and PCs. You should also sign up for a free Scratch account – this will let you easily publish your creations to the online Scratch repository. Scratch lets you “embed” your games (just like Youtube and the other Web 2.0 tools we covered) so you can easily incorporate your project into your blog when you’re done.

Scratch Basics

When you first start up Scratch you’ll be presented with the following window. I’ve labeled each part of the window – I’ll be referring to these names throughout the tutorial.

In the stage you should see a small orange cat. His name is Scratch, and this is his world. Unfortunately he doesn’t do anything yet. We’re going to start off by giving Scratch some actions, also known as a “script.”

You should notice that the left side of the screen is filled with colored puzzle pieces. These are actions -we can snap together multiple actions in order to write a “script” that Scratch will follow. Let’s write a script to tell Scratch to move to the right when we hit the right arrow key.

1. Click on the Control button in the Action Library. A new set of puzzle pieces will appear
2. Drag the second puzzle piece (”When space key is pressed”) and drag it into the Scripts panel

   

   figure 1

3. Use the dropdown in this puzzle piece and change it’s value to “right arrow”
4. Next we need to tell Scratch what to do when the right arrow is pressed. Click on the Motion button in the Action Library and find “change x by 10″. Snap this puzzle piece onto the bottom of the “when right arrow key pressed”

   

   figure 2

5. Hit the right arrow key on your keyboard. Scratch should move to the right!
6. Repeat this process for the left arrow key. You can drag more puzzle pieces into the window – pieces don’t necessarily need to be connected to one another. Make sure that Scratch moves by -10 instead of +10 when going left! Here’s what the screen should look like.

   

   figure 3

7. If you want Scratch to be able to move up and down you can repeat the process with one important difference – you need to change Scratch’s Y position instead of his X position when moving up and down.

   

   figure 4

8. You might notice that Scratch doesn’t face in the right direction when moving around the screen. We can fix this by creating different “costumes” for Scratch. Click on the Costume tab – you should see a panel like this:

   

   figure 5

9. Let’s create a costume for each of Scratch’s directions. We already have one in which he is facing to the right so we need 3 more. Click Copy 3 times next to costume1. Rename each costume so that it reflects the direction we will be working with.

   

   figure 6

10. Click Edit next to the “Left” Costume. Click the “Flip Horizontal” button to flip Scratch around.

    

    figure 7

11. Click OK to go back to the costume view. Now Click the Script tab to go back to our script view. We need to tell Scratch to change his costume when he moves in a particular direction. Click on the Looks button in the Action Library and drag out the “switch to costume” puzzle piece onto the script that makes Scratch move to the right. Set the puzzle piece so that it changes to the “Right” costume.

    

    figure 8

12. Congratulations! Scratch should now change direction!

Next we’re going to give Scratch a friend to play with. Every character that exists in your game is considered a Sprite – you can add new sprites by clicking the tools beneath the stage. Let’s go ahead and create our second sprite.

1. Click on the “choose a new sprite from file” button.

   

   figure 9

2. Go into the “Things” folder and select the Banana sprite. You should now see your second sprite on the stage.

   

   figure 10

3. Click on the banana and use the “Sprite Name” text box to rename the sprite – call it ‘Banana’

   

   figure 11

4. Now we’re going to tell Scratch to do something when he comes in contact with the Banana sprite. We’re going to need to write a new script for Scratch that does the following:
   • Continually check to see if Scratch is hitting the banana
   • If so, have Scratch say “Yum!”
   • If not, have Scratch say nothing
5. Click back onto Scratch so that his movement scripts are showing. Click on the Control button and drag out the “When Flag is Pressed” puzzle piece. Also drag out the “forever” and “if / else” puzzle pieces and arrange them like so:

   

   figure 12

6. This script says “When the Flag button (AKA the game’s ‘Start Button’) is pressed I should continually (forever) ask myself a question. If the answer to that question is true, I should do something. If it isn’t true, I should do something else.” Let’s fill in the pieces. Click on the “Sensing” and drag the “touching” puzzle piece out – snap it into the diamond shaped block next to the word “if” and change the drop down so that it says “Banana”

   

   figure 13

7. So now we have our question – “If I’m touching the banana sprite” – next we have to tell Scratch to do something if that is a true statement. Click on the “Looks” menu and drag out the “Say” puzzle piece. Drag it under the word “if” and snap it in place. Change the text to something more appropriate (”Yum!”)

   

   figure 14

8. If Scratch isn’t touching the banana we want him to say nothing. Drag another copy of the “say” puzzle piece out and snap it into the “else” position. Erase the message so that Scratch says nothing when he’s not touching the banana.

   

   figure 15

9. Click on the flag button and try out your game. Scratch should say “Yum!” when he’s touching the banana and nothing when he’s not.