Escolar Documentos
Profissional Documentos
Cultura Documentos
To create a new Flash movie, select File > New. The New Document dialog box will display. Select "Flash File (ActionScript 3.0)" and click OK. Flash is now ready for you to create your new document. Your display should be similar to the one below. (Click the image below to see a larger version).
Take a minute to familiarize yourself with it. The "Untitled-1*" in the Title Bar is the name of the file at this point. (Don't worry if your file has a different number after "Untitled-" than 1.) Notice that there are a number of panels and menus. You will work with some of them in this tutorial. View the lower center area of the Flash window and note the "Timeline". This is used to configure animations frame by frame as well as configuring layers and adding animation effects. The white rectange is called the Stage. This is a very important area. The Stage is your Flash animation. The dimensions of the Stage are the dimensions of your Flash animation.
Configure the Dimensions text boxes as shown above. Notice that the Background color is set to white but could be changed in this dialog box. Set the Frame rate to 12. Click OK. The Flash window should display as shown below (click on the image to view a larger screenshot). You may need to use the scroll bars around the Stage area to display your banner rectangle.
As you can see, there are many features on the Timeline. A few of the most commonly used features are discussed below. The left side of the Timeline (see Layer 1) is where you place your layers. Typically each layer holds one object in a Flash movie. You will be creating several layers to create the animated banner. It is good practice to assign each layer a meaningful name. The "eye" icon can be used to make layers visible or invisble while you are working. Sometimes this is helpful as you are working on animations. The "lock" icon is used to temporarily freeze or lock layers you do not wish to accidentally change while you are working.
The area at the left side of the Timeline shows the frames in the animation. This area is used to configure keyframes which indicate where the animation changes. The Timeline can also be used to automatically create tweens (more on this later). The transparent red rectangle indicates the frame that is currently displayed on the Stage. The New Layer icon in the lower left corner is used to add a new layer to the Timeline.
Type "Background" and press enter to rename the layer. Next, add a new layer by clicking the Add New Layer icon in the lower left corner of the Timeline. A new layer called "Layer 2" will appear above the Background layer. Name this layer "Shape". Your Timeline should be similar to the display at the right.
In a similar manner, add a new layer above the Shape layer and name it "Text". Your Timeline should be similar to the display at the right. The order of the layers is important. The layers will display in bottom-up order. So objects on the Shape layer will appear over objects on the Background layer. Objects on the Text layer will appear over objects on both the Shape and Background layers Save your file.
Click on the color chooser below the bucket icon. Select #99CCFF (the fifth color swatch in the bottom row in the color chooser dialog box).
Next, click on the Rectangle Tool (shown in the figure at the right) to draw a rectangle on the Stage. Your cursor will change to "+". Start at the upper left corner and drag a rectangle across the stage. Don't worry if it is not perfect, you can use the Properties panel to exactly set the dimensions.
Click on the Selection Tool and dougle-click on the rectangle you just created. The double-click will select both the fill and outline of the shape.
Your Stage and Properties panel should look similar to the one below. If your Properties panel does not automatically display, select Window > Properties > Properties.
If your "W", "H", "X", and "Y" values are different, type the following values in the corresponding text boxes: W: 468.0 H: 60.0 X: 0.0 Y: 0.0
This configures the rectangle to be placed at the topmost (Y value) and leftmost (Y value) place on the Stage. It also configures the rectangle to be 468 pixels wide (W value) and 60 pixels high (H value). Next, you will add a keyframe on the Background Layer in the Timeline Frame area. If necessary, scroll the Timeline Frame area to the right so the frame labeled 50 is in view. Click in Frame 50 on the Background Layer and press the F6 key (or Fn +F6 keys if you are using a Mac). This places a keyframe in Frame 50. A keyframe tells Flash that a change occurs in this frame.
Your Timeline should be similar to the one shown above. If you accidentally click on a different layer or frame remember you can back out your changes using CTRL + Z (Command + Z if you are using a Mac) or Edit > Undo. With this frame still selected, you will change the color of your rectangle. Using the Selection Tool, double-click on the rectangle. Next. use the Color Chooser to choose the color #00CCCC for both the pencil (stroke) and bucket (fill) colors. The rectangle on the Stage should be a shade of turquoise as shown below.
The Timeline will now show an arrow between Frame 1 and Frame 50. Your Timeline should look like the figure below. If you see a dotted line instead, undo your work or reload the saved version of banner.fla to try again.
Flash has created a .swf of your file. If you look closely, the background color of the animation will change from light blue to turquoise. Not much is happening yet, but you have two other layers of animation to configure! Save your file.
The Shape layer contains an oval shape that changes size and color. Use the Tools panel to choose the color for the pencil (stroke) and bucket (fill) of the oval shape you wil create. Click on the color chooser next to each and select #003366. Next, select the Oval Tool by clicking on the tiny downward arrow on the Rectangle Tool and selecting Oval Tool from the menu (shown in the figure at the right). Use the Oval Tool to draw an oval shape on the Stage. Your cursor will change to "+". Start at the upper left corner and drag a small oval on the left side of the stage. Don't worry if it is not perfect, you can use the Properties panel to exactly set the dimensions. Your Stage and Properties panel should look similar to the one below. If your Properties panel does not automatically display, select Window > Properties.
Your Stage and Properties panel should look similar to the one below. If your Properties panel does not automatically display, select Window > Properties.
If your "W", "H", "X", and "Y" values are different, type the following values in the corresponding text boxes: W: 15.0 H: 10.0 X: 28.0 Y: 25.0
This configures the oval to be placed 25 pixels from the top (Y value) and 28 pixels from the left (Y value) place on the Stage. It also configures the oval to be 15 pixels wide (W value) and 10 pixels high (H value). Next, you will add a keyframe on the Shape Layer in the Timeline Frame area. If necessary, scroll the Timeline Frame area to the right so the frame labelled 25 is in view. Click in Frame 25 on the Shape Layer and press the F6 key. This places a keyframe in Frame 25. A keyframe tells Flash that a change occurs in this frame.
Your Timeline should be similar to the one shown above. If you accidentally click on a different layer or frame --remember you can back out your changes using CTRL+Z, Command + (if using a Mac), or Edit > Undo. With this frame still selected, you will change the color and shape of the Oval. You will use the Selection Tool in the Tools panel (see figure below)
Click on the Selection Tool. Click on the oval to display the Properties panel. Change the height to 100.0. the width to 200.0 and the Y value to -10.0. Change both the stroke and fill color to #006666. rectangle. Click on the Stage to view the effect of the new values. The Properties and Stage panels are shown below.
The Background Layer has 50 frames and the Shape Layer has 25 frames. Srcoll the Frames Timeline so that Frame 50 is visible. Click in Frame 50 of the Shape Layer and press the F5 key to add frames to the timeline. See the figure below.
Add Animation to the Shape Layer Next, you will use Flash to automatically change the color and shape of the oval in the Shape layer using a Shape Tween. Click on a Frame between Frame 1 and Frame 25 in the Shape layer. The Properties panel will display a Tween select menu. Select Shape as shown in the figure below.
The Timeline will now show an arrow between Frame 1 and Frame 25. Your Timeline should look like the figure below. If you see a dotted line instead, undo your work or reload the saved version of banner.fla to try again.
Notice that the top and bottom of the oval do not appear in the Flash .swf movie that is because these portions of the oval are beyond the Stage. This is a common technique. Save your file.
The Text layer contains the name of the company "Acme Web Design" and move in from the right. Select the Text Tool from the Tools panel as shown above. Your cursor will change to a cross-hairs icon. Use the Properties panel to configure the font, size, and color of your text. In the example, the font is set to Trebuchet MS. Use this font face or another font of your choice. The font size is set to 50pt. The font style is bold. The color is set to #FFFFFF. With the Text Tool selected, type "Acme Web Design". Your Stage and Properties panel should look similar to the one below. If your Properties panel does not automatically display, select Window > Properties.
Click on the image to view a larger screen shot. It's OK if your height, width, X and Y values may be slightly different. Next you will configure the "X"" value to place the text mostly off-stage to the right. Change the X value to 450.0. Your
Stage should be similar to the figure below. Notice that the text begins near the right edge of the Stage.
Next, you will add a keyframe on the Text Layer in the Timeline Frame area. If necessary, scroll the Timeline Frame area to the right so the frame labeled 40 is in view. Click in Frame 40 on the Text Layer and press the F6 key. This places a keyframe in Frame 40. A keyframe tells Flash that a change occurs in this frame.
Your Timeline should be similar to the one shown above. If you accidentally click on a different layer or frame --remember you can back out your changes using Edit > Undo. With this frame still selected, you will move the location of the text. Either drag the text object over to the left with your mouse, or use the Select Tool to click on the text object and modify the Properties panel change the X value to 17. Your Stage should be similar to the figure below.
The Timeline will now show an arrow between Frame 1 and Frame 40. Your Timeline should look like the figure below. If you see a dotted line instead, undo your work or reload the saved version of banner.fla to try again. View the Timeline and examine the background color of the frames. The Shape Tweens are indicated by a green background color and the Classic Tween is indicated by a blue background color.
Notice that now the text moves in from right to left. However, notice that it repeats endlessly. If that's OK with you, continue right now with page 7, otherwise, let's configure the Flash banner to stop after it plays once.
Type the following ActionScript to stop the animation: stop(); Close the dialog box. You'll see a tiny a in Frame 50. Test your animation again and this time notice that it will only play once which is much less distracting for your web page visitors.
The next step is to publish the movie (create a .swf) and test the movie in a web page. Save your file. Continue to publish and test your animated banner.
On the Flash tab leave all settings at the default values except for the following: 1. Check Protect from import. 2. Check Omit trace actions.
On the HTML tag, verify that Loop is unchecked we only want the animation to play once. Checking Loop will cause the animation to repeat over and over. Click Publish. Click OK. Flash has published your animation as a Flash Movie called banner.swf, has created a web page file named banner.html that displays banner.swf, and created a JavaScript file AC_RunActiveContent.js that is invoked by banner.html that prevents issues with Internet Explorer.
View the source code of the web page to see the HTML code automatically generated by Adobe Flash to display the Flash movie. You can copy and paste this code in your own web pages as needed. Or, you can use the code below which will pass W3C XHTML validation: <object type="application/x-shockwave-flash" data="banner.swf" width="468" height="60" title="Acme Web Design"> <param name="movie" value="flashbutton.swf" /> <param name="quality" value="high" /> <param name="loop" value="false" /> <h1>Acme Web Design</h1> </object>