SorBose Flash Tutorial

Mark A. Jones

Informations

• Publié par: Ucte
• Nombre de lectures: 96
• Langue: English

Extrait

SorBose Flash Tutorial   This Flash Owl Clock Tutorial will take approximately 4 hours to complete. It is recommended that you print this tutorial before beginning.   Start a new movie in Flash. In the Property inspector, set the movie dimensions as follows: width=160 and height=250. Set the movie speed to 12 fps. Set the background color to color #FFCC33. Name the first layer head_01. Click inside frame 1 of the head_01 layer. Click on the Oval Tool. Set the stroke to none and the fill to color #CC6633. Click and drag on the stage to create an oval of any size. Click on the Arrow Tool and then click on the oval you just drew to select it. Use the Property inspector to set the dimensions of the oval as follows: width=71 and height=59.   With the oval still selected, use the Property inspector to set the x and y coordinates for the oval as follows: x= 45.3 and y=59.5. With the oval still selected, go to Edit: Copy.   Add a new layer and name it head 02. Click inside frame 1 of the head_02 layer. Go to Edit: _ Paste in Place. With the duplicated oval still selected, use the Property inspector to set the x and y coordinates as follows: x=115.5 and y=59.5.   Once the duplicated oval has been positioned, make sure it is still selected and go to Edit: Copy. Turn off visibility for the head_02 layer. Click inside frame 1 of the head_01 layer. Go to Edit: Paste in Place. Right-click on the head_02 layer and choose: Delete.  

  Select the now merged shape and then use the Align Panel to center the shape horizontally on the stage. (The Align Panel has three rows of buttons. The align horizontal button is the second button from the left in the first row of buttons. To align a graphic horizontally on the stage, select the graphic, click the "to stage" button in the Align Panel, and then click on the align horizontal button.) Add a new layer and name it head_02. Click on the Rectangle Tool. Set the stroke to none and the fill to color #CC6633. Click inside frame 1 of the head_02 layer. Click and drag on the stage to create a rectangle of any size. Use the Property inspector to set the dimensions of the rectangle as follows: width=137.5 and height=33.5.  

With the rectangle still selected, use the Align panel to center the rectangle horizontally on the stage. Use the up arrow key on your keyboard to move the rectangle up so that it is just above (but not touching) the double-ovals you created in the previous step.  

  With the rectangle still selected, click on the Free Transform Tool and choose the Distort Modifier. After clicking on the Distort Modifier, a bounding box will appear around the rectangle. On your keyboard, press shift and control at the same time and drag the lower left filled square inward to taper the rectangle. As you drag the left square inward, the right square will adjust proportionately.   

Click away from the tapered rectangle to de-select.  

 

   Click on the Arrow Tool and then click on the trapezoid to select it. Use the Align Panel to make sure the trapezoid is centered horizontally on the stage. Use the down arrow key on your keyboard to move the trapezoid down until it just covers the space between the two ovals.  

 

 

When you are satisfied with the positioning of the trapezoid, and while it is still selected, go to Edit: Copy. Turn visibility off for the head_02 layer. Click inside frame 1 of the head_01 layer and go to Edit: Paste in Place. Click away from the modified shape to de-select. Right-click on the head_02 layer and choose delete.  

 

  Next, we will create a gradient fill for the owl. Click on the Paint Bucket Tool and then click on the fill color tab. Choose the black and white radial gradient that comes shipped with Flash. In the Color Mixer panel, click on the far left color pointer (the little white paint bottle icon). Click on the color box. A color palette will pop up. In the data box next to the color tab at the top of the palette, type color #CC9933.   Click on the color pointer located on the right side of the gradient (the little black paint bottle icon). Click on the color box again. Change this color pointer to color #993300 .   The gradient is finished! Now we will save it so that we can use it to fill any shapes we like. To save the gradient, click on the Options Menu of the Color Mixel panel (in the top right corner) and choose "Add Swatch". The gradient now appears in the color swatches panel.  

  Click inside frame 1 to select the owl head shape. Click on the Paint Bucket Tool and then choose the brown and tan gradient we created in the last step. The owl head becomes filled with the new gradient. With the owl head shape still selected, click on the Ink Bottle Tool. Set the stroke to black. Click on any outside edge of the owl head shape. The shape is now outlined in black.   Click away from the owl head shape to deselect. Click inside frame 1 of the head_01 layer to select all of its contents. Go to Insert: Convert to Symbol. Name the new symbol "owl_head" and assign it a graphic behavior. Click OK.   Use the Align Panel to center the owl_head graphic horizontally on the stage. (The Align Panel has three rows of buttons. The align horizontal button is the second button from the left in the first

row of buttons. To align a graphic horizontally on the stage, select the graphic, click the "to stage" button in the Align Panel, and then click on the align horizontal button.)   With the owl head still selected, use the up arrow key on your keyboard to move the graphic up so that it is very near, but not touching, the top part of the stage.  

  In the Library, create a new folder and name it "graphics". As you create graphic symbols throughout the remainder of this tutorial, drag the graphic symbols into the graphics folder.   Add a new layer and name it "body". Click inside frame 1 of the body layer. Click on the Oval Tool. Set the stroke to black and the fill to the brown and tan gradient that we created in Step 5. Click and drag on the stage to create an oval of any size. With the oval still selected, use the Property inspector to set the dimensions of the oval as follows: width=145 and height=170.   With the oval still selected, go to Insert: Convert to Symbol. Name the new symbol "body" and assign it a graphic behavior. Click OK.   g el to ce _ d graphic horizontally on the stage.   Use the Ali n Pan nter the owl hea Use the up and down arrow keys on your keyboard to position the body graphic so that it is centered beneath the head graphic. When you are satisfied with the positioning of the body graphic, click on the head layer and drag the layer down beneath the head_01 layer.  

  Add a new layer and name it "base". Click inside frame 1 of the base layer to select it. Click on the Rectangle Tool. Set the stroke to black and the fill to the brown and tan radial gradient. Click and drag on the stage to create a rectangle of any size. With the rectangle still selected, use the Property inspector to set the dimensions of the rectangle as follows: width=145 and height=44. Note: Before you use the Property inspector to set the dimensions of the rectangle, be sure that the entire rectangle is selected, including its outline.   Again, make sure the entire base graphic is selected (including its outline) and use the Align Panel to center the graphic horizontally on the stage. With the base still selected, use the up and down arrow keys on your keyboard to position the base so that it is near, but not touching, the bottom edge of the stage.  

  Use the Zoom Control box to adjust the magnification of the stage to 300%. With the rectangle selected, click on the Free Transform Tool and then choose the Distort Modifier. On your keyboard, press shift and control at the same time and then taper the rectangle by dragging the top left filled square inward. As you drag the top left square inward, the right corner will move inward a proportionate amount. Drag inward until the top left square is just inside the border of the body, as shown in the following illustration.  

  With the base still selected, click on the Free Transform tool again and choose the Envelope Modifier. A bounding box will appear around the trapezoid. On the left side of the bounding box, you will notice a square, two circles, a square, two circles and another square. Click and drag on the second filled circle up and to the right.  

    Do not deselect. On the right side of the bounding box, click and drag the second filled circle up and to the left, the same distance that you moved the first filled circle. When you are finished, the left and right sides of the base graphic should look symmetrical. It may take some trial-and-error until you get it just right. If aren't satisfied with the results the first time, just click control z until you are back at the original trapezoid shape and keep trying until you are satisfied with the results. Click away from the base graphic to deselect. Click inside frame 1 of the base layer to select the graphic once again. Go to Insert: Convert to Symbol. Name the new symbol "base" and assign it a graphic behavior. Click OK.  

  With the base graphic still selected, use the Align Panel to center the graphic horizontally on the stage. Click and hold on the base layer to drag it down to the bottom of the layer stack.   Add a new layer to the top of the layer stack and name it l.eye.outline (left eye outline). Click on the Oval Tool. Set the stroke to black and the fill to white. Click and drag on the stage to create an oval of any size. Click on the Arrow tool and select the oval (taking care to select the oval's outline as well as the inside of the oval), and then use the Property inspector to set the dimensions of the oval as follows: width=28 and height=40. With the oval still selected, go to Insert: Convert to Symbol. Name the new symbol eye.outline and assign it a graphic behavior. Click OK.   Use the Arrow Tool and/or the arrow keys on your keyboard to position the eye in the center of the left oval, as shown in the illustration below.  

  With the oval still selected, go to Edit: Copy. Add a new layer to the top of the layer stack and name it r.eye.outline (right eye outline). Click inside frame 1 of the r.eye.outline layer and go to Edit: Paste in Place. Use the right arrow key on your keyboard to move the duplicated instance of the eye graphic to the right to position it in the center of the right oval.  

  Add a new layer to the top of the layer stack and name it left_eye. Click on the Oval Tool. Set the stroke to none and the fill to black. Click and drag on the stage to create an oval of any size. Use the Arrow Tool to select the black oval you just created, and then use the Property inspector to set the dimensions of the oval as follows: width=18 and height=30.   With the oval still selected, go to Insert: Convert to Symbol. Name the new symbol eye and assign it a graphic behavior. Click OK.   Use the Arrow Tool and/or the keys on your keyboard to position the eye so that it is centered horizontally inside the eye outline but so that it just overlaps the right inside edge of the eye border, so that the owl looks as if he is looking to the right.   With the eye graphic still selected, go to Edit: Copy.  

Add a new layer to the top of the layer stack and name it right_eye. Click inside frame 1 of the right_eye layer. Go to Edit: Paste in Place. Use the right arrow key on your keyboard to move the eye to the right so that once again, the eye is centered horizontally inside the eye outline but so that it just overlaps the right inside edge of the eye border, so that the owl looks as if he is looking to the right.  

  Add a new layer and name it "beak". Click inside frame 1 of the beak layer. Click on the Rectangle Tool. Set the stroke to none and the fill to color #FF9900. Click and drag on the stage to create a rectangle of any size. Use the Property inspector to set the dimensions of the rectangle as follows: width=80 and height 40.   = Click on the Free Transform Tool and then choose the Distort Modifier. On your keyboard, press control and shift at the same time and drag the lower left filled rectangle inward until you reach the middle filled square on the bottom of the rectangle. Doing this will create a triangle which will form the shape for the beak.  

  Click away from the triangle to de-select. Click on the Arrow Tool and then click on the triangle once again to select it. Click on the Ink Bottle Tool. Set the stroke to black. Click on any edge of the triangle. The triangle now has a black border around it.  

  Click away from the triangle to de-select. Click inside frame 1 of the beak layer to select the entire shape, including the outline. Go to Insert: Convert to Symbol. Name the new symbol "beak" and assign it a graphic behavior. Click OK. Drag the beak layer down in the layer stack beneath the head_01 layer. Use the Arrow Tool and/or the arrow keys on your keyboard to center the beak beneath the owl's eyes.  

  Next, we will create a gradient to use for the clock face. Click on the Paint Bucket Tool and then click on the fill color tab. Choose the black and white radial gradient that comes shipped with Flash. In the Color Mixer panel, click on the color pointer located on the right side of the gradient (the little black paint bottle icon). Click on the color box again. Change this color pointer to color #FFCC99.  

Save the gradient so that we can use it to fill the clock face. To save the gradient, click on the Options Menu of the Color Mixel panel (in the top right corner) and choose "Add Swatch". The gradient now appears in the color swatches panel.  

  Add a new layer to the top of the layer _ stack and name it clock face. Click on the Oval Tool. Set the stroke to black and the fill to the tan and white gradient we created in the last step. Click and drag on the stage to create an oval of any size. Click on the Arrow Tool and then double-click on the oval we just created to select it. (Be sure to select the oval's fill and the oval's outline). Use the Property inspector to set the dimensions of the oval as follows: width=102 and height=102.   With the oval still sel d, g vert to Symbol. Name the new sym _ ecte o to Insert: Con bol "clock face" and assign it a graphic behavior. Click OK.   Use the Arrow Tool and/or the arrow keys on your keyboard to position the clock face so that it is centered beneath the beak on the owl's body, as shown in the illustration below.  

  Next, we will create a movie-clip that will cause the owl's eyes to move back and forth. Click inside frame 1 of the r.eye layer. Press Control on your keyboard and click inside frame 1 of the l.eye layer and then inside frame 1 of r.eye.outline layer and the l.eye.outline layer and until all four frames in all four layers have been selected.   Go to Edit: Copy Frames.   Go to Insert: New Symbol. Name the new symbol eyes_clip and assign it a movie-clip behavior.   In symbol-editing mode, click inside the first frame of the first layer and go to Edit: Paste Frames.   Click inside frame 12 of the r.eye layer. Go to Insert: Keyframe. Click inside frame 12 of the l.eye layer. Go to Insert: Keyframe.   Click inside frame 12 of the r.eye.outline layer and press F5. Click inside frame 12 of the l.eye.outline layer and press F5.   Lock the r.eye.outline layer and the l.eye.outline layer.   Click inside frame 6 of the l.eye layer and go to Insert: Keyframe. Use the left arrow key on your keyboard to move the eye to the left side of the eye.   Click inside frame 6 of the r.eye layer and go to Insert: Keyframe. Use the left arrow key on your keyboard to move the eye to the left side of the eye.  

  Click inside frame 1 of the r.eye layer and go to Insert: Create Motion Tween. Click inside frame 1 of the l.eye layer and go to Insert: Create Motion Tween. Click inside frame 6 of the r.eye layer

and go to Insert: Create Motion Tween. Click inside frame 6 of the l.eye layer and go to Insert: Create Motion Tween.   Now if you move the playhead back and forth between layers 1 and 12, you will see the eyes mo e back and fort   v h. Click on Scene 1 or press Control: E to return to the Main Timeline.   On the Main Timeline, right-click on the r.eye layer and choose: Delete. Also delete the l.eye, the r.eye.outline and the l.eye.outline layers. Add a new layer to the layer stack and name it eyes_clip. From the Library, drag out an instance of the eye_clip and position it in the eye area of the owl head graphic.   Go to Control: Test Movie. You will see the eyes move back and forth, simulating the ticking of a clock.  

  In the Library, create a new folder and name it "clips". As you create movie clips throughout this tutorial, drag the clips into the clips folder.   Next, we will create a movie clip that will represent the actual clock. Go to Insert: New Symbol. Name the new symbol "clock" and assign it a movie-clip behavior. In symbol editing mode, name the first layer clock_face. From the Library, drag out an instance of the clock_face graphic. Use the Align Panel to center the clock_face graphic vertically and horizontally on the stage.   Add a new layer and name it "12 o'clock". Click inside frame 1 of the 12 o'clock layer. Click on the Text Tool. In the Property inspector, set the font to Verdana, size 16, black. Click on the stage and then type 12. Click away from the text box to accept the text and to deselect.   Click on the Arrow Tool and click once on the text to select it. Use the Align Panel to center the text vertically and horizontally on the stage. Use the up arrow key on your keyboard to move the text straight up so that the top of the text is near, but not touching, the border of the clock face.   Add a new layer and name it "6 o'clock". Click inside frame 1 of the 6 o'clock layer. Follow the same procedure given above to type the number 6, but move this number down to the six o'clock position on the clock.   Follow these same instructions to add the numbers 3 and 9, placing each new number new layers name 3 o'clock and 9 o'clock.