step 1 - create a new flash cs3 document · web viewthanks to for the tutorial content. ***** ict...

Adobe Flash CS3ICT 2

Creating Animations and Movie Files

Created March 2009, Revised January 2010Thanks to www.vineyardesigns.com for the tutorial content.

http://www.vineyardesigns.com/

Step 1 - Create a New Flash CS3 DocumentLet's start by creating a new Flash CS3 Document. To do this:

Open Flash CS3 Professional. Start > All Programs > Adobe Master Collection CS3 folder > Adobe Flash CS3 Professional. (Remember, you can right-click and “Pin to Start menu” to find it easier next time!)

Click on Flash File (ActionScript 3.0) under the title "Create New"A new flash document is created.

Save the Flash FileFile > Save As. (Save often!)Give it a name like train_animation_xx.fla (note that flash source files have .fla file extension) and save it in the Flash folder in your directory. (Create one if necessary)

Set up the Document PropertiesModify > Document Give the title, description and dimensions (500x300 pixels) as shown in the illustration to the right. Choose a blue color for the background (for the sky). Click OK.You will notice that the stage dimensions and background color have changed to match your specifications.

Take a moment to familiarize yourself

with the Flash CS3 workspace as shown in the picture. You will find various tools on the left, the timeline on the top, the stage in the middle, the properties window at the bottom and some other windows/ palettes on the right.

*************************************************************************************************ICT 2 Adobe Flash CS3 Tutorial

5/14/2023

http://www.vineyardesigns.com/tutorials/flash/Flash%20CS3%20Worspace%20-%20timeline,%20tools,%20stage,%20properties,%20palettes

Step 2 - Adding Text in Flash CS3Let's start by placing text into the Flash CS3 document.

The text tool is one of the tools provided in Flash CS3. To add text:

Click the text tool.Click on the stage in the top left corner area where you want to insert the text and type “MyName’s Train” (replace MyName with your first name.)

You will notice that once the text tool is selected, the text properties are shown in the “Properties” window at the bottom of the stage. Select the text you just typed. In the Properties window, change the font to Verdana size 30, and change the font color to black.

Save your changes.

Step 3 - Graphic Symbols in Flash CS3Symbols in Flash CS3 are an important concept to understand. A symbol is a graphic, a button, or a movie clip that you use in your document. The purpose of creating a symbol is that it reduces the file size of your final project. Once you create a file called a symbol, you can reuse it elsewhere in the project instead of creating another file. It is best to create symbols for everything that you put on the stage so that it is easy to manage and manipulate. All symbols will appear in the Library, making them easy to find to reuse.

Graphic symbols are used to create static objects (objects that do not move). They are the smallest file size of all the symbols because they have no animation.

Button symbols are used to create interactive buttons that respond to mouse clicks, rollovers, or other actions.

Movie clip symbols are used to create reusable pieces of animation.

Now let’s make the text we typed into a symbol. To do this:

In the Layers Palette (Panel) click on “Layer 1” to select it.Modify > Convert to Symbol Give it a name – e.g "train title" and select the option “Graphic” then OK.

Step 4 - Layers in Flash CS3Layers in Flash CS3 is another important concept to understand. Using seperate layers for seperate symbols placed on the stage will allow you to manipulate each one differently.

You can also decide which ones come in front visually by placing them on a higher layer. You can lock layers and hide layers by clicking on the little dots below the eye and lock icons

next to the concerned layer.

So, let’s give the layer that the text is sitting in a name. To do this:


5/14/2023

Double-click on the words “Layer 1” and edit it to “Train Title”, <Enter> and Save.

Step 5 - Draw Shapes (Rectangle) in Flash CS3 You can draw shapes in Flash CS3 by using the various drawing tools provided.

Shape Tools

Now we will use the shape tools to draw the grass and tree.

The Grass

Make a new layer for the grass. To do this:

Click the “Insert layer” icon at the bottom of the timeline. A new layer “Layer 2” will appear. Rename it “Grass”.

Rectangle Shape Tool

Now let’s use the rectangle tool to make the green grass area. The fill color will be green and we do not want an outline for this rectangle. The stroke color indicates the outline color. Since we don’t want a stroke, this should be “none”. Look at the image on the title page to see where the grass should be placed.

Set the Stroke Color to none in the tools palette (accessed by clicking the tiny triangle under the pencil) in the stroke color icon. Change the Fill Color (the bucket) to a light green.

Choose the rectangle tool.

Click on the stage where the top left corner of the rectangle (for grass) should begin and drag (without releasing the mouse) to the bottom right corner of the stage. Fill about the bottom 1/3 of the stage with the grass rectangle.

Once the rectangle is drawn you can change the fill color, if necessary, in the properties window. Be sure the Grass layer (in the Layers palette), and the grass rectangle, are selected. (Double-click in the center of the rectangle to select both the Stroke and the Fill.)

Finally convert the grass to a graphic symbol named “grass”. We chose the graphic symbol because we will not be animating it.

If you look at the “library” palette now you will notice that there are two symbols – ‘grass’ and ‘train title’.

Save your changes.

NOTE: If you cannot see your library palette, go to Window > Library and you will be able to see it. As you create new symbols you will be able to access them from the Library too.


5/14/2023


5/14/2023

Step 6 - Draw Shapes (Oval) in Flash CS3Draw oval shapes and circles with the oval shape tool. Now let’s make a simple tree.

The Tree

Make a new layer called “Tree”. (Refer back to the previous page if needed.)

Oval Shape Tool

The Tree Top

Making sure that the "Tree" layer is selected, choose the oval drawing tool. o To select the oval drawing tool you will need to click the tiny arrow at the

bottom of the rectangle tool. Different shape options will open up. o Select the “oval tool” option. Let’s choose a light green fill color and dark green stroke color. On the stage, draw an oval shape for the top part of the tree. Click on the Selection tool in the toolbox (arrow). Double-click on the oval you just drew to select both the stroke and the fill. In the Properties palette, increase the stroke height to 3. (You may have to type in the “3”). Notice that the outline is thicker now.You can manipulate the properties of the stroke or the fill individually by select only the stroke or only the fill.Select the oval (double-click so both the stroke and the fill areas are selected) and convert to a graphic symbol named “oval”. You can also get the “convert to symbol” option when you right click after selecting the shape.

The Tree Trunk

Now in the same “Tree” layer, let’s make the tree trunk.

Using the rectangle tool draw the tree trunk with a dark brown stroke color and a lighter brown fill color. Using the Selection tool, double-click to select both the stroke (outline) and the fill color. Convert it to a graphic symbol named “rectangle”. You will notice that the tree truck is showing where it overlaps with the tree top. To send it behind the tree top: with the tree trunk selected, use the “send to back” option: Modify > Arrange >Send to Back.Select the tree top and the tree trunk (select tree top first, press Shift key, select tree trunk) and convert to a graphic symbol named “tree”. Save.

Your library should now contain the objects: Train Title, grass, oval, rectangle, and tree.Your stage should now look like this:Save your changes.


5/14/2023

Step 7 - Draw Lines in Flash CS3 Draw lines in Flash CS3 using the Line Tool. Continuing with the tutorial let's begin to draw the railway track using the line tool.

Railway Tracks

Create a new layer named “Railway Tracks”. Check to be sure that it is the top most layer. If not, drag it to the top.Select the line tool.In the Properties palette, choose the color black, enter the line height “2” and select the option “Solid”.In the grass area, beginning at the left of the stage, draw a straight horizontal line all the way across the stage to begin the railway track.Use the Selection tool to select it and convert it to a graphic symbol named “line”.

Step 8 - Reuse Symbols in Flash CS3 Reusing symbols reduces the file size of the animation and makes it faster to load. We can make copies of symbols which are called instances of the symbol. Each instance can also be given a different name in the Properties window. Continuing with the tutorial, let's reuse the "line" symbol to create the 2nd line of the railway track.

Select the line symbol (on the stage) Copy it (Edit > Copy) Paste it (Edit > Paste in Place). This places the copy EXACTLY on top of the original, so you must move the copy to a new location before you can see it.Position this copy a bit lower than the first. (Can use the keyboard arrow keys to nudge)

Step 9 - Resize and Rotate Objects in Flash CS3 You can resize and rotate objects in Flash CS3 using the Free Transform tool. Continuing with the tutorial let's make the bars (crossties) between the railway tracks now. We will reuse the line symbol again for this.

Make another copy of the symbol “line”, then choose Edit > Paste in Center (so you can see the difference between that and Paste in Place). We will resize it and rotate it to use it as bars between the railway lines. To do this we will use the “Free Transform” tool. Select the copy of the “line” symbol on the stage.Select the “Free Transform” Tool. You will see 2 “nodes” on each end of the line symbol.Roll the mouse near either one of the nodes.The cursor will change to either a horizontal line with arrow on both ends, an anti – clockwise, incomplete circle with an arrow at one end, or a slanting double sided arrow.


5/14/2023

Resizing

To reduce the size:

Wait until you get the cursor with the horizontal double sided arrow. Hold the shift key and slide the cursor towards the middle of the line. The line will become smaller.

Rotating

To rotate the line:

Wait until you get the cursor with the anti-clockwise arrow. Press the

shift key and move the cursor upwards. This is what you will have now.

Position it between the railway lines. To do this, you will need to revert to

the normal selection tool first. Drag the line and resize it as needed to fit across the 2 railway tracks like a crosstie appears in a real railroad.You can also resize the symbol by selecting it and manipulating the values of the “width” and “height” in Properties palette.

Step 10 - Paste in Place in Flash CS3 Use "Paste in Place" to make a copy exactly one over the other in Flash CS3. By default, Flash pastes in the center of the stage. There are 3 paste options under the Edit menu:

Paste in Center Paste in Place Paste Special

Paste in Place

Continuing with the tutorial let us make multiple copies of the smaller slanting line right across the railway tracks. The easiest way to do this is to:

Select the instance of the smaller slanting line on the stage. Copy (Edit > Copy). Paste in Place (Edit > Paste in Place). Then, use the right arrow key to move it a little away. Repeat the process. Once you have pasted 4 new crossties, select all 5 (select multiple objects by pressing the shift key while selecting), then copy, paste in place, and move. (Be sure the railway layer is still selected!)

Step 11 - Align Objects in Flash CS3 *************************************************************************************************

ICT 2 Adobe Flash CS3 Tutorial 5/14/2023

There are various tools to help you align objects in Flash CS3. These can be accessed from the Modify menu > Align option.


5/14/2023

The "Distribute Widths" Alignment Option

Continuing with the tutorial let us make sure that there is equal spacing between the crossties. We will do this by using the “Distribute Widths” option.To do this:

Select the right-most crosstie and move it to the far right of the Stage. Also move the left-most crosstie to the left of the Stage if necessary.Select all the smaller slanting lines (by pressing the Shift key) including the left- and right-most crossties.Modify > Align > Distribute WidthsYou will notice that the lines are all neatly aligned equi-distant from one another.

Railway Track Symbol

Now our railway track is almost ready.

Select all the horizontal and slanting lines that form the railway track. (HINT: You can simply click on the layer name to select all parts of the railway track or select each individual line using the <Shift> key.)

Convert it to a graphic symbol named “railway track”. This is what we have now:

Step 12 - Change Colors of Symbols in Flash CS3We can change the color of a symbol by using the "Advanced" Color option in the Properties window. In this manner, we will change the color of the “instance” of the symbol, not every occurrence of the symbol (including the tree trunk!)

Building The Train

Make a new layer. Name it “Train.” This should be the top-most layer so that it appears right in front of the other items on the Stage.

We will reuse the rectangle symbol to create the train by resizing it and changing the color.

Click on the rectangle symbol in the Library an drag it onto the stage. (Make sure the “train” layer is active!) This will create a new “instance” of the rectangle symbol.

We will resize this rectangle and rotate it to create the box car of the train using the “Free Transform” tool. Refer to the train image on the title page for size and placement.

Change the Color of the Reused SymbolTo change the color of this instance of the "rectangle" symbol:


5/14/2023

Select the resized and rotated rectangle using the selection tool. (Click once on the rectangle to select it – DO NOT double click on it, causes a different action!)

In the Properties palette, select “Advanced” from the “Color” options drop down. Click the “Settings” button next to it.

Play around with RGB values till you are happy with the color. (The yellow is Red 255, Green 255, Blue 0, and Alpha 100 in the right-hand column, not the left-hand!)

** Now copy and reuse the new “rectangle” instance and transform and rotate them to make the parts of the engine and connect the engine to the box car using a much smaller rectangle as well.

Step 13 - Transform Options in Flash CS3 There are various transform options provided in Flash CS3. These include resizing, distorting, skewing, rotating and flipping an object. You can also rotate 90 degrees clockwise or counter clockwise.

Continuing with the tutorial let’s make the wheels of the train now.

The Wheels

Still working in the Train layer, drag an instance of the “oval” to the Stage to make a wheel. Let’s just put it into the blue sky to make it easier to see – we can move it later.Resize it to circle by specifying the same width and height in the Properties window. (30 x 30)Change the color (200, 200, 200, 100 for gray).Use the “line” symbol to make the spokes of the wheel. Drag an instance of the line onto the sky over the wheel.With the line still selected, use the Properties window to resize it to 30 pixels (remember our wheel size?). Use the advanced option to change the color to black, if necessary. Use the zoom tool to zoom in and see small objects better. Place the line (spoke) in the center of the wheel.Make a copy of the spoke, Paste in Place and rotate it by using the Rotate 90 Degrees ClockWise option. (Modify > Transform > Rotate 90 degrees CW)Select the wheel and spokes and convert it to a graphic symbol named “wheel”.


5/14/2023

Now use the Selection tool to move the wheel to one of the train cars.

From the Library, drag copies of the wheel to the train, using the example for placement.

This is what your stage will look like now:

Step 14 - Lock Layers in Flash CS3

Locking layers in Flash CS3 is useful when we want to manipulate some elements on the stage without disturbing any of the others. Another option that is helpful is the hide layer option. This will hide the layer so that we can work more easily as the number of elements on the stage increase, but will still appear in the final output.

Continuing with the tutorial, let us use the Lock Layer option to easily select the various parts of the train.

Train Animation

Now that we have all the parts of the train ready, we are ready to animate it.

Select all the parts of the train (including wheels).

The easiest way to do this is to lock all the other layers first so that the elements in those layers don't get selected.

To lock a layer, click on the dot below the lock symbol next to the layer name in the timeline. So, lock all of the layers besides the train, as shown. (Again, do not lock the train layer.)With the Train layer selected, (and all parts of the train selected) Modify > Convert to Symbol and convert the train to a movie clip symbol named “train animation”.Now, using the selection tool, double-click any part of the train to get into Edit mode for the symbol “train animation”. Everything will be “grayed out” except the train, and the title bar above the Stage now lists “Scene 1” and “Train Animation”


5/14/2023

This allows us to animate the train without affecting the rest of the objects on the Stage.Animating the Movie Clip

A movie clip symbol in Flash CS3 is like a mini- movie. The advantage is that it will play according to it's own timeline and does not depend on the main scene's timeline. It is great for repetitive animations that form a part of the entire flash movie. As we continue in the tutorial, we will animate the train as it has a repetitive movement, moving across the Stage.

Step 15 - Keyframes in Flash CS3

Keyframe Playhead Blank Keyframe Frame View Keyframes define the moment in the timeline where actions or animations occur.

The playhead shows the current frame that you are viewing in the timeline.

A blank keyframe is an empty location on the timeline that is ready to have content placed.

The Frame View allows you to change how the timeline is displayed.

Layers Current Frame Frame Rate Elapsed timeLayers organize your work from back to front on the stage so that one object can move in front of another one.

This displays the current position of the playhead

This shows the number of frames per second (fps) your animation will play in the browser

Shows the time elapsed from Frame 1 to your current position at the selected fps

Keyframes in Flash CS3 is an important concept to understand. Like films, Flash documents divide lengths of time into frames. In the Timeline, you work with these frames to organize and control your document’s content. You place frames in the Timeline in the order you want the objects in the frames to appear in your finished content.


5/14/2023

Changes in the animation are defined in a keyframe. When you create frame-by-frame animation, every frame is a keyframe. In tweened animation (short for in-between), you define keyframes at the start and end of the animation and Flash creates the contents of frames between. The included frames of a tweened animation appear as light blue or light green with an arrow drawn between keyframes.

Keyframes are indicated in the Timeline: a solid circle represents a keyframe with content on it, and an empty circle before the frame represents an empty keyframe.

The frame rate, the speed the animation is played at, is measured in number of frames per second (fps).

A frame rate that’s too slow makes the animation appear to stop and start. A frame rate that’s too fast blurs the details of the animation. A frame rate of 12 fps usually gives the best results on the web. QuickTime and AVI movies generally have a frame rate of 12 fps, while the standard

motion-picture rate is 24 fps.

The Timeline, Frames and Keyframes

In Scene 1 (the main Stage), the timeline consists of many layers and has many frames within each layer.

In the picture of the timeline shown here, the 10th “frame” of the "Train" layer is selected.

The first frames of all the layers are keyframes and are indicated by a gray background and black dot. The remaining frames are all blank.

Continuing with the tutorial, let us begin to animate the train in the "train animation" movie clip by creating new keyframes within the movie clip's timeline.

Notice since we have “double-clicked” on the train animation symbol to enter the Edit mode for it, the timeline has only one “layer.”

Click on Frame 1 (the one with the black dot) to begin our animation of the train.Now click on Layer 1 in the Timeline to be sure all parts of the train are selected. Click anywhere on the train and move the train to the far right of the stage (outside the stage area). Be sure the train is on a horizontal level that makes it appear to “ride” on the train track! This is where your train will appear at the beginning of your Flash movie.


5/14/2023

Now we will tell Flash where the train will be at the end of the Flash movie. Click on the 60th frame in the timeline. (Be sure your are in the frame itself, not on the playhead at the top that looks like a ruler!) Right-click, choose Insert Keyframe.

(WARNING! Do not choose Insert Frame or Insert Blank Keyframe – not the same thing!)

We chose the 60th frame because of the animation frame rate. Since the frame rate is 12 frames/ sec, we want the train animation to take 5 seconds, so 12 times 5 = 60.

Drag the train to the far left (outside the stage area). Again, be sure your horizontal alignment is level with the train track so the train appears to be moving along the track.

Let’s play the movie now to see what we have.

Control > Play (Or, you can simply press the <Enter> key to play.) to watch the train “jump” from the right side of the stage to the left side of the stage.

Now we will allow Flash to create the smooth movement from frame 1 to frame 60 so the animation is complete and realistic. ***Remember, a Tween is an in-between movement between two keyframes.

To create the motion tween between the two frames:

Click on any frame between keyframes 1 and 60. So we all work together, let’s click on frame 30. It really does not matter which frame we choose, just do not select 1 or 60.Right-click and choose the option: Create Motion Tween

A black arrow should appear between frames 1 and 60 to indicate the motion tween has been created for each frame.

What does that mean? The computer has generated the correct location for the train at each frame to allow it to move from frame 1 to frame 60 in 5 seconds.

To see the results, let’s click on some of the frames and watch the train move across the screen.Click on frame 5, and see the train begin to “show” on the right of the screen.Now click on frames 10, 15, 20, etc to watch the train move across the track.

Now test the movie [Control > Test Movie] to see the smooth animation. Success! You will notice that the train enters from the right, travels across the stage, and exits from the left. And then the animation loops again and again.

Click on Scene 1 to return to the main Stage area. LOCK the TRAIN LAYER! so we do not disturb it. Save your changes.

Step 16 – Animating the Train Title*************************************************************************************************

ICT 2 Adobe Flash CS3 Tutorial 5/14/2023

Now we will animate the Train Title.

Unlock that layer so we can make adjustments to it. Select the layer name to select the text on that layer. We first created this symbol as a “Graphic” so we now have to Modify it to an animation.With the text selected (don’t double-click on it – you will enter the Edit layer! Not what you want at this point) Modify > Convert to Symbol > Movie Clip Change its name to “train title animation”.Now double-click on the text to move into Edit mode. We will animate it similar to what we did with the train.In frame 1, we want to leave the train title where it is at the top left of the stage. In frame 60, create a keyframe and move the title to the top right of the stage, about the same level as in frame 1.Now create a motion tween in any frame between 1 and 60, but skip 30 for now. We are going to add some more animation at that frame. You can click on the various frames and watch the title move straight across the stage.Let’s get a little crazy and change the title up a little bit in the center. Create a keyframe in frame 30. Drag the title down underneath the railway tracks, approximately in the center of the stage.Let’s make some changes to the title. We can make it twist around and reverse the text. Modify > Transform > Flip horizontal.<Enter> to watch the action.Now choose Control > Test Movie to see the entire scene in action.

What happens? Our text disappears behind the grass and the train! We need to return to the Scene 1 main stage area to fix that.

Remember our earlier talk about layers and their orders? We created the title layer first, so it appears behind everything else.

All we need to do is drag the title layer to the top in the timeline so it appears on top of the other layers on the Stage.Success! When you Test Movie again, the title stays on top of the train and the grass, and appears as it should.

Step 17 - Publish the Flash CS3 File You will need to publish your Flash file in order to put it on a website. The source file (that you are working on) is an .fla file, but the file that needs to go on your website should be a .swf file.

Also you will need to ensure that you have an HTML page with the code to display the .swf file in order for browsers like Internet Explorer and Firefox to be able to display the Flash file.

Continuing with the tutorial, now that your animation is ready you can publish it and upload it to your website.


5/14/2023

SAVE!File > Publish

You will get an html file and the .swf file in the same folder where you .fla file is. The .swf file is your output file which you can upload to your website along with the html file

that calls it. We will add this file to your Web site when we work in Dreamweaver.

That’s it! Congratulations! Ask for instructions from your teacher about how to submit this file. Then go on to work through the other assigned projects in Flash.


5/14/2023

step 1 - create a new flash cs3 document · web viewthanks to for the tutorial content. ***** ict...

Documents