Flash

What is Flash?

Macromedia Flash 5 /
  • Flash 5 is the latest version of Macromedia’s graphics and animation package. It is one of the best content-creation technologies on the web. Files created with Flash are called movies, animations or presentations.

Content /
  • With Flash you can create any kind of web site from a home page to a corporate site. You can use Flash to make games, cartoons, advertisements and navigation interfaces. Flash can be used to make interactive presentations of any type.

Delivery /
  • Flash movies can be delivered on the web, by email, or through other media such as CD-ROM.

Macromedia website

/
  • If you don’t already have Flash, you can download Flash from Macromedia website at and use it for 30 days before having to purchase it. This is a great opportunity to learn the program and see if you like it, before investing in it.

Flash File Types

FLA files

/
  • Flash is the authoring program and as such it uses a specific file format to store all information about the animation that you are creating. This file format uses the extension .fla. This is a “source” file that you can open and edit using Flash.

SWF files

/
  • Once you create your movie in Flash, you can export it for the Web. Export will generate the .swf file format. This is a “Flash Player” file that you can view (but not edit) using any Internet browser with Flash Player Plug-In installed. When you have installed Flash on your machine, another component of Flash called Flash Player was installed as well. If you want to view the movie outside of the Internet browser, you can simply double-click on swf file, and the file will be played in the Flash Player.

HTML files

/
  • If you want to publish your Flash movie over the Internet, you will need to create an HTML file that will host your exported SWF file. This file format uses the extension .htm or .html. This type of file can be created using any text processor, or one of many Internet authoring programs. You can also use the Flash feature called Publish (we will cover this later in this manual). This feature will generate both .swf and .html files.

Projector files

/
  • If you want to send your Flash movie to someone who doesn’t have Flash or Flash Player installed on their machines, or if you don’t want to publish your movie over the Internet, you can still distribute the movie using the Projector file format. Projector will generate a standalone executable file format with the extension .exe.

Movie Properties

Using the Movie Properties window

/
  • From the main menu, choose ModifyMovie
    OR press the Ctrl + M key combinations
    OR double-click the bottom of the Timeline where you see “12.0 fps”
    OR right-click either on the Stage or the Work Area and select
    Movie Properties from the context menu.
  • Following any of the above methods you will be presented with the Movie Properties window where you can change the following: Frame Rate, Dimensions, Background Color and Ruler Units .

To change Frame Rate

/
  • Enter the new value in the Frame Rate box.
  • By default, Frame Rate is set to 12.0 fps (Frames Per Second).
  • Frame Rate specifies the playback speed and smoothness of your movie.
    Note: If the user who is viewing your movie doesn’t have fast computer or Internet connection, Flash may not display as many frames in a second.

To change Dimensions

/
  • Enter the new values in the Width and/or Height box.
  • By default, Dimensions are set to Width = 550 px and Height = 400 px (pixels).
  • Dimensions specify how big your movie stage will be, and how much room it will take in the user’s browser.
    Note: When you change the stage dimensions, Flash will always measure them from the top left-hand corner.

To change Match

/
  • Click on either Printer or Contents button.
  • Match Printer will set the stage size to reflect the default paper size for your default printer.
  • Match Contents will set the stage size to contain all of the content elements that you have created on the stage and/or work area.

To change Background Color

/
  • Select new color by clicking on the Background Color box. This will open a color swatch window, where you can select your new Background Color.
  • By default, the Background Color is set to white.
  • Background Color specifies the overall background color your movie has when it’s rendered in the user’s browser.
    Note: You can override this setting when you publish your movie.

To change Ruler Units

/
  • Select new unit from the Ruler Units drop-down box.
  • By default, the Ruler Units are set to Pixels.
  • Ruler Units specify the units of measurement that Flash uses throughout the entire movie.
    Note: Pixels are standard units of measurement in multimedia and Web pages.

Flash Interface

Screens

/
  • The slide above shows the Flash 5 workspace. This is known as the Authoring Environment and consists of various windows.

The Stage

/
  • The white rectangle in the center of Flash’s workspace is the Stage. This is the workspace for composing the individual frames in the movie. You can draw directly on the Stage or arrange imported artwork. Any content placed on this area will be visible in your movie.

The Work Area

/
  • The area that surrounds the stage is the Work Area. You can use Work Area to arrange content that is not currently used in the individual frames of the movie. Any content placed on this area will not be visible in your movie.

The Timeline

/
  • The Timeline contains the sequence of images that make an animation. The Timeline can also include many layers of animation.

Frames

/
  • The timeline is divided up into numbered segments. Each of these segments represents a Frame. An animation consists of many Frames that are being played in the timeline.

Layers

/
  • The timeline also contains many Layers. Layers are used to separate content and action in the movie.

Scenes

/
  • The movie can have one of many Scenes. Scenes are used to organize the movie into sections. Scenes can be viewed as independent pieces of the whole movie.

Panels

/
  • The Panels are windows that float above the whole workspace. They can be organized anyway you want. Each Panel gives several authoring tools and options that will be covered in this module.

Toolbars

To show or hide any toolbar, choose Window > Tools from the main menu.

Using the Toolbox (Tools)

/
  • The Toolbox contains all the drawing, painting and editing tools in Flash. The Tools bar is dockable.

Using the Main (Standard)

/ The Main toolbar includes buttons for common functions found under the File and Edit menus: New, Open, Save, Print, Print Preview, Cut, Copy, Paste, Undo, Redo, Snap to Objects, Smooth, Straighten, Rotate, Scale and Align. The Main bar is dockable.

Using the Status Bar

/
  • The Status Bar displays the current status of your keyboard: Caps Lock and Num Lock.
  • The Status bar is locked to its location at the bottom of the screen.

Using the Controller

/
  • The Controller bar displays the movie functions that resemble the controls on a VCR: Stop, Rewind, Step Back, Play, Step Forward and Go to End. The Controller bar is dockable.

Using the Launcher Bar

/
  • The Launcher Bar gives you a quick access to the following panels: Info, Mixer, Character, Instance, Movie Explorer, Actions and Library.
  • With Launcher Bar you can quickly show or hide the above panels.
  • The Launcher Bar is located at the bottom of the Flash interface and cannot be moved around or hidden.

The Timeline

Using the Timeline

/
  • When your movie is playing, Flash actually reads the information on the Timeline from the first to the last frame. This information is encoded in the SWF file.
To view the Timeline:
  • From the main menu, choose ViewTimeline
    ORpress the Ctrl + Alt + T key combination.

Movie Timing

/
  • Some movies can be static and present only an image. Some movies are dynamic and present a full animation that has a start and an end. Some movies have complex interaction with the user and can have both static and dynamic actions and content.

Movie Content

/
  • Timeline is used to store and organize all the content of your movie, which can be anything from drawing, text, imported images, sounds, buttons, movies, etc. Movie content is what the user sees or hears when viewing the Flash movie.

Movie Frames

/
  • Timeline is divided into frames. The number of frames on the timeline determines the length of the movie.

Movie Layers

/
  • Timeline can have one or more layers.
  • The number of layers on the timeline determines the depth of the movie.

Panels

Using Panels

/ Panels enable you to view and change properties of objects. First to select an object – then use the appropriate Panel to view and/or change the properties of the selected object. All Panels can be shown or hidden. (From the main menu, choose WindowPanels).

Info Panel

/
  • The Info Panel enables you to view and change visual properties of objects: width, height, horizontal and vertical position.
/

Fill Panel

/
  • The Fill Panel enables you to view and change the fill color of painted objects.
/

Stroke Panel

/
  • The Stroke Panel enables you to view and change the line attributes.
/

Transform Panel

/
  • The Transform Panel enables you to view and change the object properties: constrain, rotation and skew.
/

Align Panel

/
  • The Align Panel enables you to change position, distribution, size and spacing of the objects in relation to each other and the Stage.
/

Mixer Panel

/
  • The Mixer Panel enables you to view, edit and create colors and color properties.
/

Swatches Panel

/
  • The Swatches Panel enables you to select a color from the existing range of colors and gradients.
/

Character Panel

/
  • The Character Panel enables you to view and change various text attributes: font name, font size, font style (bold and italic), font color, tracking and baseline shift.
/

Paragraph Panel

/
  • The Paragraph Panel enables you to view and change various paragraph attributes: alignment, left and right margins, indent and line spacing.
/

Text Options Panel

/
  • The Text Options Panel enables you to view and change advanced options in text boxes: static text, dynamic text, input text, select to use Device Fonts, and make text selectable.
/

Instance Panel

/
  • The Instance Panel enables you to view and change the behavior of any instance or instances.
/

Effect Panel

/
  • The Effect Panel enables you to view and change various instance’s effects: brightness, tint, alpha and advanced.
/

Clip Parameters Panel

/
  • The Clip Parameters Panel enables you to view and change the Smart Clip instances unique clip parameters. This is the advanced level that will not be covered in this course.
/

Frame Panel

/
  • The Frame Panel enables you to view and change the frame attributes: label and tweening.
/

Sound Panel

/
  • The Sound Panel enables you to view and change sound attributes: sound name, effects, sync and loops.
/

Scene Panel

/
  • The Scene Panel enables you to view and change scene attributes: add, delete, duplicate, rename and change the order of scenes.
/

Frames

Using Frames

/
  • We have seen earlier that the Timeline is divided into frames. The top part of the image below shows numbers from 1 to 30 (and beyond). The bottom part of the image shows little rectangles. Each number is a frame number reference and each rectangle represents one frame.

  • On the Timeline you can insert, select, delete and move frames or Keyframes.
  • On the Timeline you can also copy and paste frames and Keyframes.

Current Frame

/
  • Using Flash Player, the movie plays one frame at a time.
  • Using Flash, you can edit only one frame at a time.
  • The frame that is currently played in the movie, or edited in the Flash is called Current Frame.
  • The Current Frame is indicated by a red rectangle on the top of the Timeline, this marker is called the Playhead.

The Playhead

/
  • ThePlayhead is the red current-frame marker and it indicates where you currently are in the movie.
  • You can click on the Playhead and drag it back and forth along the timeline and the stage will change to show the contents in the selected frame.

To insert a Frame

/
  • First select the frame rectangle on the Timeline where you want to insert a frame
From the main menu, choose Insert > FrameOR press the F5 key

To delete a Frame

/
  • First select the frame, keyframe or sequence of frames on the Timeline that you want to delete
From the main menu, choose Insert > Remove FramesORShift + F5

Keyframes

/
  • Keyframes are frames where something significant changes on screen in your movie. Keyframes are markers in time, indicating start and end points for different pieces of action.
  • A Keyframe is indicated on the Timeline with the solid line around its rectangle (like frame 5 on the image bellow).

  • A Keyframe that contains some objects is indicated on the Timeline with the solid line around its rectangle with the dot in it (like frame 10 on the image bellow).

To insert a Keyframe

/
  • To insert a Keyframe on the Timeline:
  • First select the frame rectangle on the Timeline where you want to place a keyframe
  • From the main menu, choose Insert > Keyframe
    OR press the F6 key
    OR right-click the selected frame for the context menu, select Insert Keyframe
  • To insert a Blank Keyframe on the Timeline:
  • First select the frame rectangle on the Timeline where you want to place a blank keyframe
From the main menu, choose Insert > Blank Keyframe
OR press the F7 key
OR right-click the selected frame for the context menu, select Insert Blank Keyframe

To clear a Keyframe

/
  • First select the keyframe or sequence of keyframes on the Timeline that you want to clear
From the main menu, choose Insert > Clear Keyframe
OR press the Shift + F6 key
OR right-click the selected frame(s) for the context menu, select Clear Keyframe

Frame Rate

/
  • We have already mentioned the Frame Rate, now we will see how this can affect the length of the movie.
  • The default Frame Rate is 12 fps (Frames Per Second). This means that for every 12 frames the movie takes up on the timeline, there will be one second of movie playback.
  • If you increase the Frame Rate and make no changes on the number of frames on the timeline, your movie will play faster and vice versa.

Layers

Using Layers

/
  • In Flash, Layers are shown to the left of the Timeline. Each new Flash movie comes with a single layer by default, named “Layer 1” .
  • The Timeline can have one or more Layers.
  • Layers represent the depth of the movie.
  • Layers allow us to separate out pieces of content and action.

Active Layer

/
  • You can access and edit only one layer at a time, that layer is called Active Layer.
  • Anything you draw or import is added to the current layer.
  • Active Layer is highlighted (in black) with the pencil icon next to its name.
  • The pencil icon shows that you are currently editing this layer (Layer 2 is active layer on the image bellow).

  • You can change the active layer by clicking another layer.

To insert a Layer

/
  • From the main menu, choose Insert > Layer
    OR right-click on the layer for the context menu, select Insert Layer
    ORclick on the Insert Layer button
  • The new layer will be inserted above the selected layer.
  • The content on the above layers will cover the content on the bottom layers.

To delete a Layer

/
  • Right-click on the layer for the context menu, select Delete Layer
    ORclick on the Delete Layer button
  • The deleted layer and all it’s content will disappear from the movie.

To move a Layer