IT.BFITZ.ME

Flash Workshop at Nebraska ESU 16

Here’s the “handout” and required files for the flash workshop!

Downloads

First, here are the files that will be used later in the day

flash_may5.zip

Welcome

Macromedia (soon to be Adobe) Flash is one of the most exciting technologies on the web. Not only is it exciting for visitors to sites in that it can deliver very engaging experiences, but the possibilities with it make it exciting for developers as well. Today’s workshop will explore what flash is, walk you through the process of creating a simple flash file, and finally show you resources where you can see and learn more.

What is Flash? What does it mean to you?

Flash began its life as an pen-drawing tool called SmartSketch from a company called FutureWave. When the operating system that SmartSketch was created for never shipped, it was changed into a new product called FutureSplash animator. It was shipped in 1996 and was designed with the Internet in mind. The idea was to create graphics and animation that were small enough to be embedded in web pages. FutureSplash’s big break came when both Disney and MSN were looking for ways to liven up their web sites and used FutureSplash to do it. Macromedia saw an opportunity and purchased the software, renaming it Flash. Flash is now at version 7 with a version 8 release (codename “maelstrom”) soon.

Flash today represents many things to many people, but most of it’s uses can be placed into one of three categories: animations, video and RIAs (“rich internet applications“)

Animation Examples

Video Examples

Rich Internet Application Examples

Scope of this workshop

This workshop will focus on introducing participants to the tools and basic workings of Flash. This will be done primarily through the creation of simple and complex animations with a small taste of Flash’s scripting language, actionscript, to control those animations.

File Types

When working with flash you will work primarily with two different files.

Your projects will be stored in .fla files. These flash project files contain everything necessary to allow you to return to your work at a later time and continue working on your project. These files are also required if at a later date you wish to return to a project and make edits to it.

Your exported files will be .swf files (pronounced “swiff”). These are compiled application files that can be uploaded to the internet for viewing by web site visitors. SWF files can not be edited. Instead, it is necessary to return to the originating FLA file to make changes and re-export a SWF file for replacement on the web.

Bitmap vs Vector

Flash’s goal is to create animations that can be stored in small files to be easily transferred over the web. In order to accomplish this, Flash uses vector images.

Vector images are images that are described rather than drawn. It would be similar to one person telling another to draw a straight line that was 6 inches long. With that short set of instructions, the person receiving the instructions would be perfectly able to draw that line. Multiple people receiving the same instruction would draw the same line. This is in contrast to “bitmap” images where the image is actually drawn out for the user as though the instruction giver were saying, “put your pencil right here. Now start moving it in this direction. keep going… keep going… keep going…. stop. Now lift up your pencil”.

Bitmap images are necessary sometimes because they can be much more life-like or detailed. Photographs are bitmap images. They are not always good for the web however, because they take a lot of instructions to transmit. They become especially troublesome when you start considering animation.

Vector images, on the other hand, work very well for animations because with a relatively short list of instructions the file tells the computer how to draw the animation itself and let’s it do the work. This is much more efficient and transmits over the internet much faster.

The Environment

Enough information already! Let’s start playing.

When you launch Flash, you will be presented with a number of panels. If you are already a Dreamweaver and/or Fireworks user, the interface will be very familiar. The basic elements are:

Toolbar

This is where your tools are. 🙂 Really, We’ve had toolbars since Superpaint, so I’m going to leave it at that.

Timeline

This is where you will decide how long elements will exist and where they will be on the stage throughout time.

Stage

This is where you will place your elements. The stage will change as you move through your timeline.

Properties

This is a contextual panel that allows you to modify the currently selected element.

Other Panels

There are many other panels that can reside on your screen. These usually go down the right side of your screen and can contain sections such as your libraries and color swatches.

Lines and Shapes

This section will focus on the following tools and skills. We will work through the tools in a playful way, just to see what all of the tools do and how they behave.

  • Pencil and Brush
  • Editing Lines
  • Freeform Pen tool
  • Shapes
  • Modifying shapes
  • Lasso
  • Color mixer
  • Grouping

Some points to remember

Drawn shapes are made of distinct elements: the lines that make up the shape and the fill of the shape. A single click on any one of these elements will select only that element. This is one of Flash’s most noticeable differences when compared to other drawing programs. It is necessary to double click on the shape to select all elements of the shape.

Drawing one shape on top of another will cause the overlapped area of the bottom shape to disappear. This behavior is similar to that exhibited by bitmap-editing programs.

Animation Basics

The Timeline

The big questions are “what?” and “how long?”. “What” is answered on the stage. “How long?” is answered in the timeline. Your stage has a timeline and, as you will see later, individual elements can have their own timelines. Timelines dictate how things will change over time. The timeline is broken up horizontally into “frames” and vertically into “layers”.

Frame Rate / Properties

Your frame rate dictates how fast your animation will play. The default is 12. The faster you make your movie play, the smoother it will be but it will also require more processing on the client computer. A slower animation will be more compatible with older machines but not be as smooth. The movie properties window also allows you to set the size and change the color of the canvas.

Frame types

There are four basic types of frames in Flash

  • Key frames
  • Blank key frames
  • Frames
  • Unpopulated frames

Key frames are those frames in which something new happens. It may be where an animation starts, stops or changes direction.

Blank key frames are key frames that hold no content. When you start a new flash project your first layer has a single blank key frame. As soon as you place something on your stage, the blank key frame changes to a key frame.

Frames that have content but are not key frames are just called frames. If you have a animation starting on frame 1 and ending on frame 20, all of the frames after frame 1 would be considered frames.

Unpopulated frames are those frames in your project which have not been used yet. If you have an animation that lasts 10 frames, all of the frames after frame 10 are considered unpopulated.

Frame-by-Frame Animation

  • Create a frame-by-frame animation
  • Onion Skinning
  • Testing Movies

It’s finally time to start animating! The most basic way to animate is by doing traditional frame-by-frame animation. Think flip-book and you’ve got it. In order to do a frame-by-frame animation you simply need to start on a frame and start drawing a sequence of images. Each frame, while doing frame-by-frame animation, is a key frame. This is because on each frame, you are telling Flash to do something different on the stage.

Drawing a frame-by-frame animation can be difficult if you can not view what you have already drawn. Flipping back and forth between frames is not a good way to produce a smooth animation. With onion-skinning, you can choose to see as many frames at a time as you would like. Once you are able to see your frames, you can easily tell where the next step in your animation should take you.

Once you have an animation ready to go, you should definately save your project. Remember, that your project will be saved as an FLA file. With your file saved, you should take a look at what you have created. To view your movie select “test movie” under the control menu OR simply hit command-return (control-return on windows).

Shape Tweening

  • What is tweening?
  • Hinting
  • Tweening text
  • Edit multiple frames

Shape tweening allows you to start with a shape on one frame and have it morph into another shape. You can take almost anything and do this morphing, but the simpler the shape, the easier it will be.

In order to turn a circle into a square, create a circle on frame one. Next, on frame 12 (assuming 12 frames per second) create a blank keyframe. Place a square on this frame that is in rougly the same position as the circle. If you scrub your timeline, you will notice that the circle sits there for 11 frames, then dramatically changes to a square. To get the shape tweening to happen, you need to click on frame one in your timeline, then select “shape tween” in the properties palette. Now scrubbing will show you that the morph is in place.

There will be times, often, when the shape tween doesn’t do exactly what you would like it to do. To correct any odd behavior or to inflict odd behavior in your tween, you can use shape hinting. Shape hints are markers that you can distribute around any shape that is being shape tweened to tell Flash what points should morph into what. Try placing a shape hint on your circle in frame one, then go to frame 12 and move the corresponding hint. Notice that now, as you scrub, things may happen differently than they did before. Place one hint at a time on your first frame, each time moving the corresponding hint on the last frame to the correct spot.

Let’s move the animation to another part of the stage. Go to frame one and drag the shape somewhere. If you scrub, you’ll notice that only the shape on that frame moved (effecting the rest of the animation). Hit undo until all is back to normal. In order to move the entire animation, you must move all of the frames at once. You can use multiple frame editing to do this. Once turned on, you can select the frames you want, then move the elements of those frames wherever you like.

Symbols and Instances

  • Creating symbols
  • Editing symbols
  • Instances
  • The library

As you place more and more objects on your stage and throughout your timeline, you are adding to the size of your project. Remember, the purpose of Flash is to create small files that can easily be sent over the internet. One way that Flash creates small files is by reusing objects. When you create an object that can be reused, that is called a symbol. Symbols are stored in your project library and instances of those symbols can then be placed throughout your movie. While you may have 10 instances of a particular symbol in your movie, you only get charged for the single symbol in your filesize. Very cool!

To create a symbol, draw an object on your stage. Select the shape and select modify > convert to symbol. A dialog window pops up asking you to name the symbol and declare what kind of symbol it is. Give it a name and select graphic for your symbol type. Once you close the dialog, you will see that your shape has turned to a symbol instance. You can tell by the blue rectangle that is around it (you can no longer select the fill / lines of the shape).

Symbols are stored in the Library. If you open your library, you will see the symbol that you just created. Drag one or two more instances of your symbol on to your stage. Where before, this would have doubled or tripled your filesize, doing it this way has kept your filesize the same.

If you double click on a instance or on a symbol in the library, you will be taken into the symbol editor. Any changes here will effect all instances of that symbol. You can however make small changes to instances without modifying the symbol or the other instances. If you select an instance, you will see a drop-down menu in your properties window that will allow you to change such things as tint, brightness and the instance’s alpha settings.

Motion Tweening

  • Motion tweening
  • Tweening effects
  • Motion Guides

The names of the tweening types describes their purposes well. While the shape tweening we looked at previously is for changing one shape into another, motion tweening is to move shapes around on the stage.

Create a new project. Place a shape on the stage and convert it to a graphic symbol. Since we will be working with a single shape, motion tweens are almost always applied to symbols rather than shapes. Place a keyframe at frame 24 (assuming 12 frames/second). Note that in this example, we are using a keyframe instead of a blank keyframe. In the shape tweening excercise we wanted a brand new shape to morph to, so there was no reason to create a keyframe just to immediately delete the contents of it. Since, in this example, we want to work with the same instance, creating a keyframe will give us a frame with that object already on it.

Move your instance on frame 24 to another location on the stage. Select frame one of your layer in the timeline and choose “motion tween” in the properties palette. Your timeline will turn blue with an arrow in it. Scrubbing the timeline will reveal that your object is now moving across the timeline.

Motion tweening also gives you the freedom to use what are called “tweening effects”. These effects allow you to do a little more than just move the object around. Go to the first frame of your animation, if you are not there already, and click on your shape. In the properties palette you will see a color pull-down menu similar to what we saw earlier. Using this, we can modify the instance that is sitting in this key frame to get unique tweening effects. Select brightness from that pulldown and give it a high value. Scrub. Your animation will go from high brightness to the normal brightness of the shape in your last key frame. Try the different effects. You can also transform the shape on the first frame by stretching and resizing it and this also will become part of your tween.

Another great feature that you can incorporate into your motion tweens is the idea of a motion guide. So far, in our animation, our object has moved in a straight line across the stage. With a motion guide, you can have your tween follow any path you choose. Select your current layer by single clicking on it’s name. Now add a motion guide by clicking on the motion guide button at the bottom of the layers list. A motion guide layer will be added and your current layer will be indented underneath it. While on frame one of your new motion guide layer, grab your pencil tool and draw a path for your tween to follow. Once you have drawn your path, return to frame one of your tween layer. You need to move your shape until it is somewhere on the path where you want the animation to start. Do the same with the last frame of your tween, moving the shape to the point on the path where you want your animation to end. If all is good, you should now be able to scrub and see your shape moving along that line. Don’t worry about the path itself. It will not show up in your final video. Try it out! (command-enter)

Type

  • Types of text
  • Text options
  • Device fonts?

When you select the text tool within Flash, you will see in the properties palette three different types of text from which you can choose: static text, dynamic text and input text.

Static text is what we will be using exclusively. It is your normal sort of text that will not be changing throughout a flash movie. Dynamic text is text that flash will be generating. This text often comes from an external xml file or web service. A good example of this would be weather information from a weather service on the internet. Finally, there is input text. This is used when you are creating the flash equivelent of a flash form that a user will complete.

There are many options available for your text. To take a look at them, grab your text tool and place short line of text on your stage. Hit your escape key to get out of text editing mode and you will see the options available in your properties palette. Most of these will be familiar to you from other word processing programs. You can change the color of your text, the alignment, add bolding and italics, change the kearning and even make your text sub or super scripted. One feature that is here that is not often found is the ability to turn anti-aliasing on and off. Anti-aliasing is great for on-screen text because it gives it the illusion of smoothness and makes it easier to look at and read. While anti-aliasing can clarify large text, it muddies small text making it more difficult to read. Depending on the font, anti-aliasing can start hurting your readability at sizes smaller than 12. If you have small text that is hard to read, consider turning off anti-aliasing.

When you are creating text for your movie/animation, you have the ability to tell the flash player to use fonts on the client computer instead of downloading the font information. This is similar to what HTML pages do. This won’t save you a great deal of room, but it can save you some (especially if you are using a complex font). Remember however, that like HTML, using device fonts can give you unexpected results. Even the same font, arial for example, can look different on different computers. If in doubt, export a movie each way and compare the file size difference to help determine whether it is worth doing.

Bitmaps

  • Importing bitmaps
  • Tracing a bitmap

So far, everything we have done has been with vectors. Vectors are great, because of their ability to get squashed into small file sizes, but there are times when you need something a little more real looking. Bitmap images/photographs can be imported into flash to work with just like anything else.

As mentioned, bitmap images can inflate your file size in a hurry, but what if you don’t have to have to have something that looks so nice. Flash, like the old Adobe product “Streamline” can trace bitmap images — effectively converting them into vector images. To do this, go ahead and place any bitmap image right on your stage. Click on it to select it and choose Modify > Bitmap > Trace bitmap. A dialog box will appear to allow you to modify the settings. Select a lower threshold for more detail, or increase it for a more ‘posterized’ look. Play around. You can always hit ‘undo’ and try the whole thing again.

Movie Clips

  • What are movie clips?

If we’ve been in the foothills up until now, this is where we start getting out the climbing gear. A person could have a whole lot of fun with Flash only knowing what we have covered so far, but to reallly go far with it and build great projects there are a few more things that an author must know. The first of these things is the idea of Movie Clips.

Flash animations are built in a object-oriented manner. We have seen how to build frame-by-frame animation, but who wants to draw the hundreds or thousands of frames necessary to complete a project? We’ve looked at frames, but how much “animating” can you do by morphing shapes or moving shapes around? No, the real power of Flash starts becoming apparent when you learn to take these skills and create smaller animations that become a part of the larger animation. That is what movie clips are. Animations that reside inside of the larger animation. Movie clips can contain shapes, instances and even other movie clips. They even have their own timelines!

To create a movie clip symbol, create a shape and convert it to a symbol. when you are presented with the symbol dialog, select “movie symbol” and give it a name. If this is going to be an animation (which movie clips usually are) then saying so with a suffix like “_anim” can be very helpful later.

With the movie symbol created, double click on the symbol to edit it. You can now create an animation on the timeline that will be a part of this movie. Once done, you can exit back to the stage and run the movie and your movie clip will run over and over and over.

Buttons

  • Button Types
  • Basic Button
  • Rollover Button
  • Invisible Button

As you start placing more and more things in your movie, you may wish fo users to be able to control things a little bit. Perhaps they would like for things to stop. 🙂

Actionscripting 101

  • The actions panel
  • Time-based actions vs User-based actions
  • Starting and Stopping animations

Action scripts can be placed on objects or in the timeline and are entered in the Actions panel. Actionscripts that are entered into the timeline must be placed in key frames.

Considering that all of our animations so far have not had any way to stop, a very helpful thing to know would be how to stop an animation from looping. This is easy to do with actionscripting. With a simple animation open, create a new layer at the top of your layers called “a”. This will be where your actionscripts go. Create a keyframe in this layer that matches the last frame of your animation and create a key frame. Remember, actionscripts can only go on key frames. With this frame selected on your “a” layer, open your actions panel and select global functions > timeline control > stop. This will enter the following code into your project:

stop();

Way to go. You’ve actionscripted!

What you just created is considered a time-based action. This means that the action is going to happen at a certain point in time. You can also create user-based actions (actions that the user initiates). Use your undo command to undo the action that you just did. When you just have your animation, you can continue…

Lock your animation layer and create a new layer called “buttons”. This is where, as they name gives away, we are going to put some buttons that the user can use to control the animation. Once you have that layer, with frame one selected, we are going to place our buttons. Flash comes with quite a few buttons and sounds built in. To access them, go to Window > Other Panels > Common Libraries > Buttons. Inside this library, in the “playback” folder, you will find buttons that will be useful. Grab a play (or “right”) and stop button and place them on your stage.

Let’s start with the stop button. With it selected on your stage, return to your actions panel. This time we are going to select (under the plus sign) global functions > movie clip control > on. Once you select this, you will have several on options to select from. We want this to happen when the user clicks. A click is broken into press and release. Traditionally, a person’s click action is considered a release, so select release from the popup that appeared. Now, between the brackets, we need to say what should happen. Select the same stop command that you did earlier from global functions > timeline control. You can make the play button work by doing the exact same thing, but selecting play instead of stop. You will end up with two actions that look like the following.

on (release) {

stop();

}

on (release) {

play();

}

While this works to stop and start the timeline on which the actions reside, they will not stop and start any movie clips that are also on the timeline. Movie clips have their own timelines and must be stopped separately. Assuming a movie clip called “movie”, this can be done with the following easy bits of script

on (release) {

movie.stop();

}

on (release) {

movie.play();

}

Sounds

  • Importing and using sound

Publishing

  • Exporting movies

Flash Resources

This entry was published on May 4, 2005 at 12:45 pm and is filed under Uncategorized. Bookmark the permalink. Follow any comments here with the RSS feed for this post.