Objectives for this workshop:

• Understand the interface (Timeline, layers)
• Create Images in Flash (bitmaps versus symbols)
• Import files (acceptable formats)
• Animation Basics, Understand Keyframes
• Explore Tweening Animation
• Apply Effects

This workshop introduces the basic features of Flash, the professional standard for producing high-impact, low band-width websites. Web designers use Flash to create attractive, resizable, and extremely compact navigation interfaces, technical illustrations, and animations. Go to http://www.arhu.umd.edu/technology/workshops/mmpublishing/examples.html and see the Animation section at the bottom of the page. Click for examples of Flash websites (See the animation section at the bottom of the page)

The Flash Metaphor:

• Making a movie - http://en.wikipedia.org/wiki/Animation

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 Unites - The unit of measure of the ruler displays

You set these properties in the Movie Properties dialog box. To set the properties for the movie you are going to create:

1. Choose Modify > Document from the menu. The Movie Properties dialog box will open.
   
   
   
2. Enter 800 X 500 for Dimensions
3. Select #000000 (Black) for Background color
4. Enter 10 fps for Frame Rate
5. Select Pixels for Ruler Units
6. Click the OK button

Getting Acquainted with the Interface:

• Toolbox
• Stage
• Property Inspector
• The Timeline

The Timeline controls three primary elements:

• The length of your movie
• The length of time your graphic appears on screen
• The stacking order of graphics

When you open a new file in Macromedia Flash, the first thing you see is the shortest possible movie - only 1 frame.

You also see one layer.

The red rectangle in the timeline is the playhead. The playhead determines what is seen at a given time.

To make illustrating tasks easier, turn on the Grid.

1. Choose View > Grid > Edit Grid from the menu. The Grid dialog box will display.

2. Click on the Color box and select white to have the gridlines display in white.
3. Select Show Grid to cause the grid to display.
4. Select Snap to Grid to cause the edges of your graphic to align with the grid lines.
5. Set the Horizontal field to 50 px to separate horizontal lines by 10 pixels.
6. Set the Vertical field to 50 px to separate vertical lines by 10 pixels.
7. Set the Snap Accuracy to Normal.
8. Click OK

Illustrating in Flash

GClef Select the Pencil Tool Set the stroke to Gold - #FFFF66 Set the Mode to Smooth In a continuous stroke, draw the G Clef (treble) symbol Select Edit Menu > Select All Select Insert > Convert to Symbol Name the symbol "gclef" Set the behavior to Graphic Click OK Select Window Menu > Library (Notice that the gclef symbol is part of your library)
The Cross Select the pencil tool Set the stroke to Light Grey While holding down the shift key, draw straight lines to create a cross Select the paint bucket tool Set the fill to Dark Grey Click inside the cross to fill it with color Select Edit Menu > Select All Select Insert Menu > Convert to Symbol Name the symbol "cross" Set the behavior to Graphic
Background Square Make sure the layer is empty Select the Rectangle Tool Set the Stroke to Yellow - #E2B24C Set the Fill to Burgandy - #990000 Drag and draw a square that is 11 blocks wide and 9 blocks high on the grid

Keyframes

• Notice that in frame 1, we now have a solid dot in frame 1 of layer 1 in the timeline - a keyframe in frame 1, Background Square Layer. It means that a change has taken place and we are displaying something unique on screen at this time.
  
  1. Select frame 50 by clicking in the frame 50. Select > Insert frames from the menu. Notice that there is a white square in frame 50. This indicates that there is a duration of time in which the element appears on screen.
  2. To easily control playback, open the controller window by selecting Window > Controller from the menu.
  3. Click rewind and play.
• The play back head moves from frame 1 to frame 50. Nothing on screen changes but we can see our playback head moving through each frame of our movie.
• We can change the duration of our movie by clicking on and then dragging the white square to the left or right.
• If we wanted to display something different in frame 50, we would click cell 50 and press F6 to insert a keyframe.

Layers

Often you want more control over the length of individual objects. This is where layers become handy.

1. Rename the current layer - Background Square.
2. Insert a new layer. Name it Background Image.
3. Select File Menu > Import
4. Import the chartres.jpg and kazan_m.jpg files
5. Select Window Menu > Library
6. Add the two images to the Background Image layer
7. Add a Background Folder and drag the two background layers inside

Now you can change the duration of the images without affecting the duration of the square, giving you more control.

Layers also control the stacking order of your movie. Which means, when your movie downloads on the web it dowloads one layer at a time

You can click a layer to drag it and move it before or after another layer. For example, if I move the Background Image Layer underneath the Background Square Layer, the image itself appears underneath the square.

Timeline elements we have covered:

The Timeline controls three primary elements:
1. The length of your movie
2. The length of time your graphic appears on screen
3. The stacking order of graphics

Animation Basics

Animation can be constructed in Flash in three primary ways:

• Frame based animation
• Tween based animation
• Tweening effects

Frame Based animation

Circle demonstration of manual keyframing

Frame by frame animation is created by a series of frames that you manually change.

When considering frame by frame animation it is often better to start with completed graphic and then work backwards.

1. Create a new folder and name it Sacred Text.
2. Insert six layers in the Sacred Text folder.
3. Name each layer a letter of the word Sacred, i.e, the first layer in the Sacred Text folder should be named, "S", the second, "A," the third "C", etc.
4. Select Frame 33 of the "S" layer in the Sacred Text Folder
5. Insert a Keyframe by pressing F6 on the keyboard
6. Use the text tool by clicking on the "A" in the ToolBox to type "S"
7. Select Garamond for the type face and 20 for the size
8. Select frame 36 of the "A" layer in the Sacred Text folder
9. Insert a keyframe
10. Use the text tool by clicking on the "A" in the ToolBox to type "A"
11. Select frame 39 of the "C" layer in the Sacred Text folder
12. Insert a keyframe
13. Use the text tool by clicking on the "A" in the ToolBox to type "C"
14. Select frame 42 of the "R" layer in the Sacred Text folder
15. Insert a keyframe
16. Use the text tool by clicking on the "A" in the ToolBox to type "R"
17. Repeat steps until the word SACRED is completed..

This is called frame based animation, it's very manual but sometimes necessary. Now we'll automate this process and let the computer do the work using tweening.

Motion Tweening Animation

1. Add a layer and name it Title Text- anything you want to tween should be in it's own layer
2. Use the Text Tool to type the title "Byzantine Music". Select the Font and size you like and position it at the top left of your stage..
3. Convert the text object to a symbol by selecting Insert Menu > Convert to Symbol.
4. Set the behavior to graphic
5. Click OK
6. Insert a keyframe at frame 50
7. Scale your text so that it changes size and position it at the right side of your stage.
8. Right click on frame 1 and select Creation Motion Tween.

Motion Tweening: Blue background with arrow

Shape Tweening

1. Add a layer and name it Shape Tween- anything you want to tween should be in it's own layer
2. Drag the cross symbol to the stage
3. Select Modify Menu > Break Apart
4. Insert a keyframe in frame 50 of the Shape Tween layer.
5. Select the scale tool, Distort option to distort the cross in frame 50.
6. Click on frame one and select Shape tweening from the properties inspector.

Shape Tweening: Green background with arrow

Clef Sign

1. Add a layer - Name it clef
2. Insert a key frame at frame 45
3. Drag the Clef symbol to the stage
4. Insert a keyframe at frame 50

Scrollable Text - Flash Components

1. Select the Text Tool from the ToolBox
2. Select Dynamic Text as type of text
3. Select Multi-line
4. Select Burgandy as the text color
5. Name the instance "narrative"
6. Click and type "This site is about the history of Byzantine Music."
7. Select Window Menu > Components
8. Drag the Scroll Bar Component to the stage
9. Enter "narrative" as the target field

Button

1. Select Insert Menu > New Symbol
2. Name it Links
3. Set the Behavior to Button
4. Draw a square with a dark fill underneath
5. Insert the text Links in the middle of the square in a light font
6. Insert a keyframe and change the font color
7. Close the symbol
8. Add a new layer called Button
9. Drag the button from the library to the stage
10. Right click on the Links button and select Actions
11. Paste the following:

on(press){
getURL(www.google.com);
}

Publishing your file

1. Select File Menu > Publish Settings

Contact Information:

Contact us with questions, comments and feedback: acs-worskhosp@umail.umd.edu
Search the Arts and Humanities web site