Chapter 6: Working with Objects

Overview

Throughout Part II, you explored the painting, drawing, and object manipulation tools available to you in Flash MX 2004 and Flash MX Professional 2004. In this tutorial, you'll put all your hard-earned knowledge to work by creating an illustrated ocean scene. As we have yet to cover how to animate objects Flash, the ocean scene itself will be static.

 On the CD      The tutorial's files are on this book's companion CD. Look for ocean_scene.fla in the Hands On 2 folder. In this file, you'll find a copy of the finished ocean scene. You'll also find an additional file, titled undersea_creatures.fla , which you'll need to complete the tutorial.

 

Creating the Water

Before you start adding the undersea elements to your ocean scene, you'll need to add

the backdrop ”the water.

1.     If you haven't already, create a new document by choosing File New (or by using the shortcut Cmd/Ctrl+ N ).

2.     When the New Document dialog box opens, under the General tab, in the Type list box, select the Flash Document option.

3.     Choose Modify Document (or use the shortcut Cmd/Ctrl+ J ) to open the Document Properties dialog box.

4.     Click the Background color swatch and choose a light blue color from the Color Picker. This will act as the color of the sky, which will be visible above the rolling waves of the ocean.

5.     When you are finished setting the color of the sky, click OK.

6.     Because this scene will have a number of different elements (each occupying a different layer), you need to name the layer whose color you just changed. To do this, double-click the layer's name. When it becomes editable, enter Sky .

7.     Now, you need to create the water. To start, create a new layer by clicking the New Layer button in the bottom-left corner of the Timeline or by choosing Insert Timeline Layer.

8.     When the new layer is displayed (above the sky layer), double-click the layer name and, once it becomes editable, enter Water .

9.     To create the water, choose Insert New Symbol (or use the shortcut Cmd/Ctrl+F8).

10.     When the New Symbol dialog box opens, make sure the Graphic radio button is selected and enter Water in the Name field.

11.     When you enter Symbol Editing mode, select the Rectangle Tool from the Toolbox.

12.     Before you draw anything, open the Property Inspector (which you access by choosing Window Properties) and change both the Stroke color and the Fill color to a darker blue than that of the Sky layer.

 

Note  

By default, any rectangle you draw will have a stroke. This is why you are making the stroke color and the fill color the same ”so that it doesn't look as if our Water symbol has a different-colored border around it. Alternatively, you could simply select and delete the shape's stroke after you've drawn it.

13.     Now, draw a rectangle that is roughly the width and height of the Stage. Don't worry too much that the dimensions are not completely accurate; you'll fine-tune it shortly.

 

Note  

At this point, you can also select and delete the rectangle's stroke if you want.

14.     Select the rectangle using the Arrow tool .

15.     In the Property Inspector (Window Properties), enter 550 in the Width (W) field and 370 in the Height (H) field.

16.     Now select the Free Transform tool from the Toolbox and click the selected rectangle.

17.     When the transform handles appear around the rectangle, click the Envelope button (which is located in the Options section of the Toolbox when the Free Transform tool is selected).

18.     From here, manipulate any of the handles along the top of the rectangle to create the appearance of rolling waves. When you are finished, depending on the changes you made, your rectangle should look something like this:

19.     Now you need to insert the water into your main scene. Click the Scene link in the Edit toolbar to return to the main Timeline.

20.     Select the first blank keyframe in the water layer.

21.     Open the Library by choosing Window Library (or by using the shortcut Cmd/Ctrl+ L ).

22.     Drag the Water symbol from the Library onto the Stage. Make sure the bottom of the symbol lines up with the bottom of the Stage. Also, make sure the left and right edges of the symbol line up with the Stage.

 

Adding Some Bubbles

Now that we've created the oceanic backdrop, we can start adding some elements. We'll start off by adding some floating bubbles.

1.     You'll begin by creating a single Bubble symbol that that you'll use in multiple places throughout the scene. To do this, choose Insert New Symbol.

2.     When the New Symbol dialog box opens, make sure the Graphic radio button is selected, enter Bubble into the Name field, and click OK.

3.     When you enter Symbol Editing mode, select the Oval tool from the Toolbox.

4.     Before you draw anything, open the Property Inspector (if it isn't already open), make the Fill either a very light gray or white, make the Stroke color a darker gray, and change the Stroke Height to 2.

5.     Now, in the middle of the Symbol Editor (directly over the registration point crosshairs), draw a perfect circle (by holding down the Shift key) about 1 centimeter (or half an inch) in diameter.

6.     At this point, your bubble should look something like this. ( top right )

7.     Now you'll add a little more detail to the bubble by adding a cartoon-like feature that will make it look rounded instead of flat. Zoom in on the bubble until it takes up the majority of the workspace. With any of the drawing tools (pencil, pen, paintbrush, and so on), draw a small, skewed rectangle in the top-left quarter of the bubble. This gives the illusion that light is reflecting off the rounded surface of the bubble and should look something like this. ( bottom right )

 

Note  

You can also fill the little "reflection" you drew with a lighter color than the fill of the bubble itself; this goes a little further toward giving the impression of light bouncing off the surface.

8.     Now that you've created the bubble, you can add it to the scene. Click the Scene link in the Edit bar to return to the main Timeline.

9.     You'll start off by adding some random bubbles that will add ambiance to the scene. Create a new layer by clicking the New Layer button in the bottom-left corner of the Timeline or by choosing Insert Timeline Layer.

10.     Double-click the layer's name, and when it becomes editable, enter bubbles .

11.     From here, select the first keyframe in the new bubbles layer and drag the Bubble symbol from the Library (Window Library) to the Stage.

12.     With the Bubble symbol still selected, enter 95 in the X field and 336 in the Y field.

13.     Drag a second instance of the Bubble symbol onto the Stage and position it slightly above and to the right of the first Bubble symbol.

14.     With the second Bubble symbol still selected and the Property Inspector open, enter 25 in the Width (W) field and 25 in the Height (H) field.

15.     Now, with the Property Inspector still open and the second Bubble symbol still selected, select Alpha from the Property Inspector's Color drop-down menu.

16.     When the Alpha Amount field is displayed to the right of the Color field, enter 80 .

17.     Drag a third instance of the Bubble symbol from the Library onto the Stage and position it above and slightly to the left of the second Bubble symbol.

18.     With the third bubble still selected, enter 20 in the Property Inspector's Width (W) field and 20 in the Height (H) field.

19.     With the third Bubble symbol still selected, choose Alpha from the Property Inspector's Color drop-down menu and enter 75 in the Alpha Amount field.

20.     Drag a fourth instance of the Bubble symbol from the Library onto the Stage, and position it slightly to the top and to the right of the previous bubble.

21.     With the fourth bubble still selected, enter 15 in the Property Inspector's Width (W) field and 15 in the Height (H) field.

22.     With the fourth Bubble symbol still selected, choose Alpha from the Property Inspector's Color drop-down menu.

23.     Enter 65 in the Alpha Amount field.

24.     Drag a fifth, and final, instance of the Bubble symbol from the Library onto the Stage, and position it slightly above and to the right of previous (fourth) bubble.

25.     With the final bubble still selected and the Property Inspector open, enter 10 in the Width (W) field and 10 in the Height (H) field.

26.     With the final bubble still selected, choose Alpha from the Color drop-down menu and enter 50 into the Alpha Mount field.

By this point, you've created a nice little bubble trail that looks something like this:

You can certainly add more bubbles to make a longer trail or even create a second trail elsewhere in the scene; it's completely up to you.

 

Adding Some Sea Life

Now that you've created the backdrop for the scene, it's time to start adding some sea life. However, instead of drawing each undersea creature, you'll take advantage of Flash's ability to use artwork created elsewhere, importing what you need to keep working on the scene. In addition, instead of importing each new element (which will be in SWF format) individually, you'll open an external Library that has all the elements you'll use.

1.     Start by choosing File Import Open External Library.

2.      On the CD      When the Open As Library dialog box opens, navigate to the Hands On 2 folder in this book's accompanying CD, select the undersea_creatures.fla file, and click Open. You'll notice that an additional Library will open with four files ( fish1.swf , fish2.swf , jellyfish.swf , and seahorse.swf ).

3.     Select the Bubbles layer and create a new layer by clicking the New Layer button in the bottom-left corner of the Timeline or by choosing Insert Timeline Layer.

4.     Double-click the new layer's name, and when it becomes editable, enter Big Fish .

5.     Select the first keyframe in the Big Fish layer, and drag the fish1 symbol from the newly opened external Library onto the bottom-right section of the Stage.

6.     Because the fish1 symbol is fairly big, we need to reduce its size slightly so that it fits in better with the overall scene. To do this, select the fish 1 symbol, open the Property Inspector (Window Properties), and enter 200 in the Width (W) field and 200 in the Height (H) field.

7.     When the symbol resizes, you'll notice that it moves slightly. Use the Arrow tool to reposition it in the bottom-right corner of the scene. At this point, your scene should look something like this:

8.     Now you'll add a school of fish to the scene. To start, select the water layer and add a new layer by clicking the Insert Layer button in the bottom-left corner of the Timeline or by choosing Insert Timeline Layer.

 

Note  

Why would you want to create a new layer above the water layer, but below the bubbles layer? Well, by doing this, any objects that you add to the new layer will appear to be behind the floating bubbles you created earlier, giving the illusion of depth to your scene.

9.     Double-click the new layer's name, and when it becomes editable, enter Fish School .

10.     Now select the first keyframe in the fish school layer and drag the fish2 symbol from the external Library you opened earlier onto the Stage. Don't worry too much where you put it because you'll move it into position shortly.

11.     As with the first Fish symbol, this new fish is far too big for the scene. Select it, and in the Property Inspector (Window Properties), click the small padlock icon to the left of the Width (W) and Height (H) fields. By doing this, you guarantee that any change you make to either of the dimension properties will change the other accordingly so that the symbol's aspect ratio is maintained .

12.     Enter 50 in the Property Inspector's Width (W) field.

13.     Type 196 in the X field and 316 in the Y field.

14.     Now drag a second instance of the fish2 symbol from the external Library onto the Stage. Using the Property Inspector, change the second Fish symbol's Width (W) to 30 ”remember to click the padlock icon to ensure that the symbol's aspect ratio remains the same.

15.     Use the Arrow tool to move the second small fish so that it is slightly above and to the left of the first fish2 symbol.

16.     Repeat steps 14 and 15 to add more fish to the school. With each successive fish, vary its position and size slightly (using the Property Inspector) to add more detail to the scene.

17.     At this point, your scene should look something like the image to the right.

 

Finishing the Scene

Now you can complete the scene by adding a few more sea creatures .

1.     Select the big fish layer and create a new layer by clicking the New Layer button , located in the bottom-left corner of the Timeline, or by choosing Insert Timeline Layer.

2.     Double-click the new layer's name. When it becomes editable, enter jellyfish in the field.

3.     Make sure the first keyframe of the jellyfish layer is selected and drag the Jellyfish symbol from the external Library onto the Stage. As with many of the previous symbols, it doesn't really matter where you stick the jellyfish as you'll fine tune its position in a bit.

4.     With the Jellyfish symbol still selected, and the Property Inspector open, enter 75 in the Width (W) field ”remember to select the padlock icon to ensure that the symbol's aspect ratio remains the same.

5.     From here, enter 100 in the Property Inspector's X field and 88 in its Y field.

6.     Now drag a second instance of the Jellyfish symbol onto the Stage.

7.     Using the Property Inspector, change the new Jellyfish symbol's Width (W) to 50 , its X value to 170 , and its Y value to 113 .

8.     Now drag a third instance of the Jellyfish symbol from the external Library onto the Stage. Make its Width (W) 25 , its X value 185 , and its Y value 80 .

9.     At this point, your scene should look something like this:

10.     Now for one last element ”a lone seahorse. Select the jellyfish layer, and create a new layer by clicking the New Layer button in the bottom-left corner of the Timeline, or by choosing Insert Timeline Layer.

11.     Double-click the layer's name. When it becomes editable, enter seahorse in the field.

12.     Select the first keyframe in the seahorse layer and drag an instance of the Seahorse symbol from the external Library onto the Stage.

13.     Using the Property Inspector, change the Width (W) of the seahorse to 30 , its X value to 295 , and its Y value to 130 .

Congratulations, your glorious ocean scene is now finished! Unless you have added your own details or elements, the finished product should look something like this: