Moving Car Exercise for Swish Max2

 

 

 

View the Movie

 

We will create a Swish Max2 movie of a moving car based upon a FLASH 8 tutorial.

Go to this link to view the movie:

http://baycongroup.com/flash/01_flash_5_tutorial.htm .

Return to this lesson once you have viewed the movie. The steps below are outlined for using Swish Max2 to create the movie.

 

 

 

Getting Started

 

Open Swish Max2. You will be presented with the screen shown here.

 

Select “Create New Movie > New Movie” to begin. You will be presented with the screen shown here.

The Timeline appears in the upper portion of the screen. You use the Timeline to lay out the sequence of your movie.

The Stage displays in the center of the screen. You create your movie on the Stage.

Movie Properties

You start creating your movie by setting the Frame Rate, Dimensions, Background Color, and Ruler Units.

Frame Rate

The speed of the movie

Dimension

The size of the Stage

Background Color

The color of the Stage

Ruler Units

The unit of measure the ruler displays

You set these properties in the Movie Properties dialog box.

1.  To set the properties for the movie you are going to create: Choose Modify > Movie Properties from the menu. The Document Properties dialog box opens.

 

  1. Type 400 px in the Width field.
  2. Type 400 px in the Height field.
  3. Click the Background color box and choose white as the background color.
  4. Type 12 in the Frame Rate field.
  5. Click OK.

 

 

 

 

 

 

 

Drawing the Start Button

Turn on the Grid. Choose View > Show Grid.

 

The Ellipse Tool

In the exercise that follows, you will use the ellipse tool to draw an ellipse. You will then turn the ellipse into a symbol. Symbols are reusable graphics you store in the Library. Later in the tutorial you will turn the ellipse into the button movie viewers press to start the movie.

To draw the ellipse:

  1. Choose the Ellipse tool.

 

  1. The Properties Box with two color boxes opens to the right. If it is not open, choose Window > Properties. Here you can select the Stroke and Fill colors. The Stroke color outlines your drawing. The Fill color fills the center of your drawing. You also select your line style and set the thickness of the Stroke line here. The Fill has several options as well. Use their respective drop-down arrows to see the choices.
  2. Click the Stroke Color box and then click the color black to choose black as your stroke color. Choose the Line style with a thickness of 3.
  3. Click the Fill Color box and then click the color navy to choose navy as your fill color. Choose the Solid style.

  1. Click on the Stage and drag diagonally to draw the ellipse.

 

 

Creating a Symbol and Saving to the Library

You are now ready to turn the graphic (the ellipse) you created into a symbol and store the graphic in the Library. Items stored in the Library can be used later.

  1. Choose the Selection tool.

  1. Click and drag to create a rectangle around the ellipse to select it.
  2. Choose Modify > Convert > Convert to Button from the menu.

 

 

  1. The Properties dialog box opens.
  2. Type Start Button in the Name field.
  3. Choose Modify > Library > Add to Library from the menu. The Library panel opens. You should see Start Button in the Library window.

  1. The Add to Library dialog box opens. Name this Start Button. Choose the option to ‘Add a copy to the Library’.

  1. Click OK.
  2. Press the Delete key to delete the ellipse from the Stage. Don’t worry. You have a copy of the Start Button in the Library.
  3. Choose Insert > Library Symbol. You should see the Button saved in the Library. Click Cancel. We don’t need the button yet.

   

 

 

 

Saving in Swish Max2 and exporting as .swf file

Swish Max2 files have an extension of .swi (pronounced "SW-eye"). This is the file you work in. We need to turn this .swi file into a FLASH file by exporting it as a .swf file to be seen on the web.

  1. Choose File > Save As… and save the file as “Car Movie”.
  2. The ‘Export to SWF on Save’ dialog box appears. Select all three options.
  3. Click OK.

  1. A second Export to SWF file dialog appears with the movie name “Car Movie”.
  2. Click OK.

  1. Accept the default values for the Export Settings dialog box that appears. Make sure you are saving to your disk.
  2. Click OK.

 

 

Note: Remember to save often while working.

 

 

 

 

 

Drawing the Shape for the Sky

 

The Rectangle Tool

You use the Rectangle Tool to draw rectangles and squares. In this exercise you will create a rectangle and fill it with the gradient to create a graphic. You will then turn the resulting graphic into a symbol and use it later to create the sky.

  1. Choose the Rectangle tool.

  1. Move to the Property box.
  2. Select ‘None’ for the line style in the Stroke color box. Select Gradient for the Fill. Gradients show gradations of color.

 

  1. Select a blue color for the left gradient color and white for the right gradient color.

       

  1. Click the Stage and drag diagonally to create a rectangle.

   

Later you will use the graphic you just created. For now, turn it into a symbol.

  1. Choose the Selection tool.
  2. Click the graphic.
  3. Choose Modify > Grouping > Group as Shape from the menu. The Convert to Symbol dialog box opens.

  1. You should see the following dialog box. Click Yes.

  1. Type Sky in the name field for the property box.

  1. Choose Modify > Library > Add to Library from the menu. The Library panel opens. You should see Sky in the Library window.

    

  1. Click OK to store the graphic in the Library.
  2. Press the Delete key to remove the graphic from the Stage.
  3. Make sure you have a button and a shape in your Library. Choose Insert > Library Symbol…Click Cancel.

 

 

 

Drawing a Tree

 

The Pencil Tool

You use the Pencil tool to draw freehand shapes. You need to draw a tree trunk and a treetop to create a tree.

Create the Tree Trunk

  1. Choose the Pencil tool.

  1. Choose brown as the Stroke color and the first line option.
  2. Choose brown as the fill color. Choose the Solid fill type.
  3. Draw the tree trunk. Make sure the starting point and the ending point connect. When drawing the trunk, the cursor will be a pencil with a small ‘x’. To close your shape, make sure the points connect and that the cursor turns into a pencil with a small ‘o’.

 

Create the Tree Top

  1. Deselect the tree trunk. Choose the Pencil tool.
  2. Choose green as the stroke color.
  3. Choose green as the fill color.
  4. Draw a treetop like the one shown here.

 

Create the Tree

  1. Choose the Selection tool.
  2. Click the treetop to choose the treetop.
  3. Drag the treetop over the tree trunk.

Grouping

Swish Max2 views the tree as two objects, the treetop and the tree trunk. In the next exercise you will group the treetop and the tree trunk to cause Swish Max2 to view the tree as a single object. Then you will turn the tree into a symbol.

  1. Choose the Selection tool.
  2. Use the Selection tool to create a rectangle around the tree. This selects the tree.
  3. Choose Modify > Grouping > Group as Shape from the menu to make the treetop and the tree trunk a single object.

  1. Click ‘No’ for this dialog box.

  1. Type Tree in the name field for the property box.
  2. Choose Modify > Library > Add to Library from the menu. The Symbol Properties box will open.
  3. Type Tree in the Name field.
  4. Choose to add a copy to the library.
  5. Click OK. The tree now appears in the Library.
  6. Press the Delete key to remove the tree from the Stage.

 

 

Drawing a Car

In this exercise you will create a car. You will use the car later.

Draw a Hubcap

Start your car by drawing a hubcap.

  1. Choose the Ellipse tool.
  2. Choose gray as the stroke color.
  3. Choose gray as the fill color.
  4. Click in the upper corner of a square of the grid and drag diagonally to draw a circle.

Convert the Hubcap to a Symbol

Converting the hubcap to a symbol places the hubcap in the Library. Later you will take two copies of the hubcap out of the Library and place one copy on each tire.

  1. Choose the Selection tool.
  2. Select the circle.
  3. Choose Modify > Grouping > Group as Shape from the menu. The Symbol Properties dialog box opens.
  4. Click ‘Yes’ for this dialog box.

  1. Type Cap in the name field for the property box.
  2. Choose Modify > Library > Add to Library from the menu. The Symbol Properties box will open.
  3. Type Cap in the Name field.
  4. Choose to add a copy to the library.
  5. Click OK. The tree now appears in the Library.
  6. Press the Delete key to remove the tree from the Stage.

Draw the Tires

Draw a tire. Look at the graphic below and draw the tire on the grid exactly as shown.

  1. Choose the Ellipse tool.
  2. Choose black as the stroke color.
  3. Choose black as the fill color.
  4. Click and drag to draw the tire as show in the graphic.
  5. Choose Modify > Grouping > Group as Shape from the menu. The Symbol Properties dialog box opens.
  6. Click ‘Yes’ for this dialog box.
  7. Type Tire in the name field for the property box.
  8. Choose Modify > Library > Add to Library from the menu. The Symbol Properties box will open.
  9. Type Tire in the Name field.
  10. Choose to add a copy to the library.
  11. Click OK. The tire now appears in the Library.
  12. Press the Delete key to remove the tree from the Stage.

 

Draw the Chassis

Use the rectangle tool and the line tool to draw the red car chassis as below.

 

Add the Tires

  1. Choose the Selection tool.
  2. Choose Insert > Library Symbol.

  1. Choose the Tire shape.
  2. Click OK.
  3. Repeat this step to add a second tire.
  4. Drag the two tires to position them on the chassis.

Add the Hubcaps

  1. Choose the Selection tool.
  2. Choose Insert > Library Symbol.
  3. Choose the Cap shape.
  4. Click OK.
  5. Repeat this step to add a second hubcap.
  6. Drag the two hubcaps to position them on the tires.
  7. Your car should look like the one shown here.

 

Group the Car

You want Swish Max2 to view the car as a single object. You need to group the car.

  1. Choose the Selection tool.
  2. Create a rectangle around the car to select the car.
  3. Choose Modify > Grouping > Group as Group from the menu.
  4. Name this Car in the property box.

Convert the Car to a Symbol

  1. Choose Modify > Library > Add to Library from the menu.
  2. Type Car in the Name field.
  3. Swish Max2 stores the group in the Library.
  4. Press Delete to remove the car from the Stage.

Note: Your Library should have these items.

 

 

 

Drawing the Buildings

Draw the Buildings

Use the rectangle tool and the line tool to draw the buildings as below. Color your buildings.

Group the Buildings

You want Swish Max2 to view the car as a single object. You need to group the car.

  1. Choose the Selection tool.
  2. Create a rectangle around the Buildings to select them.
  3. Choose Modify > Grouping > Group as Group from the menu.
  4. Type Buildings in the property box.

Convert the Buildings to a Symbol

  1. Choose Modify > Library > Add to Library from the menu.
  2. Type Buildings in the Name field.
  3. Swish Max2 stores the group in the Library.
  4. Press Delete to remove the buildings from the Stage.

 

 

 

Creating Your Movie

You have created all your graphics and have stored them as symbols. You are now ready to create your movie.

Add the Sky

1.      Choose Insert > Library Symbol.

2.      Select Sky.

3.      Click OK.

4.      The graphic appears on the stage.

5.      With the sky selected, choose Modify > Transform > Rotate 90.

6.      Stretch the sky graphic to cover more of the stage.

                        

 

Add the Buildings

7.      Choose Insert > Library Symbol.

8.      Select the Buildings.

9.      Click OK.

10.  Position the Buildings in front of the Sky.

11.  If needed, resize the stage and the Sky so that the Buildings cover the Sky.

 

Add Grass

  1. Click anywhere outside the Stage to deselect the buildings.
  2. Choose the Rectangle tool.
  3. Choose no color as the stroke color.
  4. Choose bright green as the fill color.
  5. Draw a rectangle below the buildings for the grass.

 

Add a Road

  1. Choose bright gray as the fill color.
  2. Draw a second rectangle below the green rectangle. The second rectangle is a road.

Add a Title Area

  1. Choose purple as the fill color.
  2. Draw the last rectangle, as shown.

 

Add Trees

1.      Choose Insert > Library Symbol.

2.      Select Tree.

3.      Click OK.

4.      Resize and position the tree in front of the buildings.

5.      Add a second tree.

       

 

 

Keyframes

Each layer of a Swish Max2 movie is divided into frames. Frame numbers appear along the top of the Timeline. At the current time, each layer in your movie is only one frame long. You want your movie to last 60 frames. Inserting a keyframe at Frame 60 will cause each layer to remain on the screen until Frame 60. You use keyframes to specify changes in the animation.

 

Extend the KeyFrames

1.      Click into frame 60 of your first layer.

2.      Right Click and choose Insert Keyframe.

3.      Repeat for each layer to extend the layers to 60 frames.

Add the car to the stage

  1. Click the first frame of Scene_1.

2.      Choose Insert > Library Symbol.

3.      Select Car.

4.      Click OK.

5.      Resize the car until it is the appropriate size.

6.      Click and drag to position the car to the right of the stage as shown.

 

Make the car move

1.      Click in the first frame one of the new layer containing the car.

2.      Add an Effect. Right click into frame one, choose Slide > In from the Right.

3.      Right click into frame 60 and choose Insert Keyframe to extend to 60 frames.

4.      Move the car to the left side of the Stage as shown here.

5.      Play your movie. Your car moves across the stage.

Add sound

To have a horn honk as the car rolls through town, you need to add sound.

Import the Sound

Note: The downloaded horn sound can be downloaded from : http://baycongroup.com/flash/09_flash_site.htm .

1.      Download the horn sound. Open the zip file and save the shorthorn.wav file in your folder.

  1. Choose File > Import to Stage > Sound from the menu. Find and select shorthrn.wav and click Open. The file shorthrm.wav now appears in the Library.

3.      Play the movie.

 

Stop the action

If you published your movie now, the car would start moving as soon as the viewer entered the screen. You want the viewer to click on a button to make the car move. In this exercise you will add a behavior to stop any action before the viewer clicks a button. Later, you will add a button for the viewer to click to start the action. You will use behaviors to control the action.

  1. Choose the Selection tool
  2. Click the first frame of Scene_1.
  3. Right Click into frame 1. Choose Movie Control > Stop ().
  4. Play the movie. The car should not move.

 

Add a button

Buttons have four states: up, over, down, and hit.

The Four Button States

Up

The appearance of the button when the pointer is not over it

Over

The appearance of the button when you place the pointer over it

Down

The appearance of the button when you click it

Hit

The appearance of the button when you click it

You want to create a button that is navy in the up state, green in the over state, and brown in the down state.

  1. Choose the Selection tool
  2. Click the first frame of Scene_1.
  3. Choose Insert > Library Symbol.
  4. Select Start_Button.
  5. Click OK.
  6. Move the button to the title area.
  7. Right click the button and choose Open in Symbol Editor.

     

 

Edit the Symbol

  1. In the Properties box, select the three options below for separate states of the button.

 

The Over State

  1. Choose the Selection tool.
  2. Use the Outline to the right. Select the Shape for the Over State.
  3. Select green to change the fill color to green.

    

 

The Down State

  1. Select the Shape for the Down State.
  2. Select brown to change the fill color to brown.

           

 

 

Add Title and Button Text

You need to put a label on the Start Button and add a title to the movie. You will use the Text tool for this. Add Title text of “My First Movie”. Add button text of “Start Movie”

Text

 

 

CHALLENGE:

Your challenge is to complete the movie by getting the Start Movie Button to make the car move.