Macromedia Flash Basics
From Wikibooks, the open-content textbooks collection
Contents |
[edit] What is Flash?
Flash is a multimedia plug-in and standalone application for playing Flash movies. A flash movie is authored in Macromedia Flash. This article will only go in detail on the use of the latest application Flash MX 2004 though most concepts can be easily transferred to previous versions.
[edit] SWF and FLA
Swf and Fla file extensions are the main files that you will deal with when working with Flash. An fla is essentially the "source code" for the flash movie, it contains all the data and graphics that is put into it by the Flash authoring environment. Anybody with the free version of the flash player can view a swf, but you need a copy of Flash development environment to view a fla. An swf is the compiled version of a fla and is the publishable result of your work.
[edit] Flash Workspace
The Flash MX 2004 workspace is divided into 3 main areas:
- Stage - Contains every element that you want viewable in the movie.
- Panels - Are the tools used to alter the elements on the stage.
- Timeline - The timeline adds another dimension to the stage allowing you to animate and interact with objects over time (frames).
[edit] Panels
[edit] Tools
The Tools menu is probably the most used panel in Flash. In it are the tools needed to manipulate items on the stage. It can also be used to do actions on the timeline.
Here are the main tools and their uses;
- Selection Tool (v) - Selecting whole objects and moving them.
- Subselection Tool - Selecting partial objects.
- Line Tool - Drawing straight lines.
- Lasso Tool - Selecting irregular shaped pieces of an object
- Pen Tool - Drawing non-straight and curved lines.
- Text Tool (t) - Inputting a textbox onto the stage.
- Oval Tool - Drawing oval and circle shapes. (Drag + Holding Shift = Circles)
- Shape Tool - By default draws rectangles. (Drag + Holding Shift = Squares)
- Pencil Tool - Free drawing thin lines.
- Brush Tool- Free drawing brush shapes.
- Free Transform - Scale, rotate, and skew an object.
- Fill Transform - Distort the gradient fill of an object.
- Stroke Tool - Change the color and size of a stroke.
- Fill Tool - Change the color of a fill.
- Eyedropper - Sample a color from the stage.
- Eraser - Use a brush to erase parts of an object.
- Hand Tool - Move the stage around if it is not all visible.
- Zoom - Zoom in or out.
[edit] Properties Panel
The properties panel is used to modify the characteristics of pre-existing objects on stage.
[edit] Other Panels
Components, Inspector, ...
[edit] Stage
The stage is the area that is visible when the swf is compiled. The default size is 550x400. You can change this size by using the properties panel.
Coordinates on the stage are measured from (0,0) in the upper left corner. The horizontal line represents the X-axis and the vertical line represents the Y-Axis. X and Y values that appear on the stage are always positive.
You can also place objects in the area around the Stage. If an Object is offstage it will be invisible in the final compiled swf file. However the offstage area can be very useful.
One common thing that people like to put in their Flash movies is having an item fly across the screen. This can be done by starting with an Object off stage on one side, and creating a Motion Tween so that it ends up offstage on the opposite side.
[edit] Timeline
The timeline is one of the most important toolbars in Flash. On a timeline you have frames and keyframes. A frame is simply an intermediary between keyframes, there is no change in the amount of objects on the stage during a normal frame. Keyframes are major changes in the state of the stage. You use them to add a new object or end/begin an animation.
Keyframes are marked by small squares with a black dot in them. Blank keyframes are marked by a square with an empty dot. You can insert a frame with F5, a blank keyframe with F7, and a non-blank keyframe with F6. (You can also insert frames and keyframes from the contextual menu, which can be accessed by right-clicking on the timeline.)
All commands to insert and delete keyframes are available by right clicking (Mac: Control Click) on any frame of the timeline.
On a timeline there are layers. A layer can contain only 1 animation at a time, so therefore to animate multiple objects you need to use multiple layers to do multiple animations. Any layer above another layer will have the layers contents stacked above the lower layer.
[edit] Motion Tweens
Motion Tweening is an easy method of animating an Object on the Stage, using the Timeline. Motion Tweening can only be performed on a Graphic, a Button or a Movie Clip.
For example, place an Object on the stage. This, by default, will create a Keyframe in frame 1 of the Timelime. Right click on the Keyframe in the Timeline and select Copy KeyFrame from the menu. Now right click on a frame further along the timeline and select Paste Frames. You will see your Object appear in the same position on the Stage, and the frames bewteen your two keyframes will have turned grey.
Making sure that your second Keyframe is selected (a red line should be over it in the Timeline - if not just click on it with the left hand mouse button), move your object to somewhere else on the Stage by clicking and dragging it.
You can now create your Motion Tween. Right click the Timeline anywhere between your two Keyframes and select Create Motion Tween. The frames will turn purple and a thin back arrow will point from the first Keyframe to the second.
You can test your animation by pressing CTRL + Enter. You should see your object move smoothly from its first position to its final position.
Note that attempting to tween more than one object on the same layer doesn't often work very well. If you need to do this, it's probably best to put the objects on separate layers.
[edit] Symbols
A symbol is a reusable image, animation, graphic, movie clip, sound file, font or button that resides in the library. A bitmap (any imported graphic file) is not as controllable as a symbol. For example the alpha/opacity of a bitmap cannot be keyframed for dissolves but a symbol can be. A graphic can be placed in a symbol by entering symbol edit mode and importing the symbol into the symbol stage. Enter symbol edit mode by clicking the + button in the library. Moving an element to the library converts it to a symbol. If a symbol is dragged into the Library and it has the same name as an existing symbol, the new symbol replaces the old. A Resolve Library Item Conflict requestor appears. Select Replace. Library folders can help avoid same file name problems. If a symbol is dragged out of the library an instance of it (a copy) is created. Changing an instance of a symbol on the stage does not change the master copy. The master symbol can be changed through symbol Edit mode (double click the symbol in the library.) Native symbols are created in Flash, imported symbols are created in other programs. To create a new symbol: Insert > New Symbol brings up a requestor that wants to know the type of symbol being created (movie clip, button or graphic) and a name for it. It then takes you to symbol edit mode where you create and edit the symbol. A symbol has its own Timeline and layers, independent of the scene Timeline that it is in. A symbol can be composed of many layers and manipulated as a single object. To convert a graphic to a symbol select it and Insert > Convert To Symbol. A Symbol can also be created by dragging an object from the stage to the library. The object on the stage that was dragged into the library will be converted to a symbol and a symbol icon will appear in the library. A Convert to Symbol dialog box appears with several behavior buttons that determine how the symbol will be used. These behaviors are:
Graphic – Used for static images and animations that are tied to the main Timeline. Graphic symbols are created with Flash draw tools. Their icons look like a hazardous waste symbol.
Button – Responds to mouse clicks and other events. Graphics are defined for various button states. Actions are assigned to the button instance. A button symbol icon is a finger on a button.
Movie Clip – Reusable animations. They have their own Timelines that run independently of the main Timeline. They are like mini-movies that run inside the main movie. They can contain interactive controls and can be controlled by ActionScript.
The instance’s type can be changed at any time through the Property Inspector.
Symbols can be edited in context (with other elements on the stage, called Edit In Place) or they can be edited in a separate window. If a master symbol is changed then every existing instance of that symbol will display the changes: Edit > Symbol or double click on the symbol in the library or use the + icon in the library.
A symbol can be copied in the library panel by selecting it and Modify > Duplicate Symbol. This is a good way to make new symbols using existing symbols as templates. Frames from one symbol can be copied into another symbol: Select the frames to be copied on the main Timeline and Edit > Copy Frames. Then create a new symbol. Select frame one of the new symbol and Edit > Paste Frames.
Each object has a registration point used to place the element on the stage. This info is listed in the Info Panel: Window > Panels > Info. An Align Panel is available for aligning elements relative to each other: Window > Panel > Align. A Registration tool is used to place the registration point on the object.
Effects can be applied to a selected symbol with Window > Panels > Effects. Effects include color/transparency, animation and sound effects. Single instances or multiple instances of a symbol can be edited. Edit > Edit Symbols.
The link between an instance and a symbol can be broken which turns the instance into a collection of pieces parts. Select the instance. Modify > Break Apart.
Instances can be linked to different symbols in order to retain their properties. A rat symbol for instance could be changed to a cat symbol and its color and movements would be preserved. To assign a different symbol to an instance select the instance on the stage and click the Swap button in the Property Inspector. Select a new symbol from the Swap Symbol dialog box. The Swap Symbol dialog box also has a Duplicate button that creates a copy of the selected symbol.
[edit] Movie Clips
Open a new file press shortcut key(Ctrl+N) To create a movie clip go Insert Panel and click New Symbol(Ctrl+F8)give a name after go to into symbol create an animation
Alpha controls the clip's opacity. Double-click the clip on the stage or in the library to edit it.
[edit] Buttons
Buttons are clickable, or move-overable symbols. When you create a button, you may notice that the timeline is different than that of other symbols. The first frame is what the viewer sees when the mouse is not touching the box at all. The second fram is what is seen when the mouse is over the symbol, but not clicking. The third frame is what is seen as the button is being clicked on (not released). The fourth frame is the "hot spot". This is where the user's mouse has to be for the button to work. If none is set, then it is set as the first frame by default.
[edit] Graphics
[edit] Shape Tweens
Shape tweens are an easy way of changing shape of an object on the stage.
First, place an object such as a circle or square on the stage. The first frame should turn gray to show that there is an object on the stage. Then, right-click a frame later in the timline and select 'insert keyframe', or just hit F6. The frames between the first frame and the keyframe should turn gray.
Click on the second keyframe to select it, and use the selection tool (the black arrow), or the free transform tool (the white box with a black border and small black squares on the side) to change the shape of your object on the stage.
To create the shape tween, select a frame between the two keyframes. In the properties panel, there is a drop-down menu next to the word 'tween'. Select 'shape' from the drop-down menu, and the frames between the two keyframes turn solid green with a long, solid line ending in an arrow.
To preview your animation, press Ctrl+Enter, or hit F12 for a more accurate HTML preview of what your animation will look like.
Note that you cannot tween an object unless it is a vector. To turn a non-vector object into a vector, use the Modify > Break Apart command.
You can use "hints" to control your tween. To add a hint, go to Modify > Shape > Add Shape Hint.
[edit] Centering
To center your objects, select them and use the commands Modify > Align > Vertical Center and Modify > Align > Horizontal Center.
[edit] Actionscript
ActionScript is an ECMAScript-based programming language used for scripting Macromedia Flash movies and applications. Since both ActionScript and JavaScript are based on the same ECMAScript syntax, fluency in one theoretically translates easily to the other. However, while JavaScript's DOM is browser window-, document- and form-centric, the ActionScript DOM is movie-centric, which may include animations, audio, text and event handling.
Each action must be in a keyframe.
It's a good design strategy to keep all your actions on a separate layer.
To make a button that, when clicked, loads a URI use
on( release )
{
getURL( "URI", "window", "method" )
}
where "window" refers to a window type (e.g. "_blank" for a new window).
One commonly used ActionScript function is gotoAndPlay. It takes the form gotoAndPlay( frame ). When run, it will move the player to that frame and resume play. For example, gotoAndPlay( 5 ) will move to frame 5 and resume playing, and gotoAndPlay( "menu" ) will go to the frame named "menu" and resume playing.
A similar function is gotoAndStop( frame ), which goes to the frame referenced but does not resume playing.
[edit] Exporting
You can export either a movie or a graphic.
[edit] Exporting Movie
To export a movie go to File>Export Movie or press Ctrl+alt+shift+S. Then a dialogue box appears select the location where you want to export, then select the file type or formate which you can select from 16 types.
- .swf (Flash movie)
- .swt (Flash generator template)
- .spl (future splash player)
- .avi (Windows video format)
- .mov (QuickTime movie)
- .gif (animated pic)
- .wav (Windows Audio format)
- .emf (EMF images in sequence)
- .wmf (WMF images in sequence)
- .eps (EPS images in sequence)
- .ai (Adobe Illustrator sequence)
- .dxf (Autocad sequence)
- .bmp (bitmap sequence)
- .jpg (JPEG sequence)
- .gif (GIF sequence)
- .png (PNG sequence)
[edit] Using External Files
You can use the ActionScript function loadVariables to load data from an external file into your SWF. For instance, you could create a Flash website with most or all of the content as external files. You could keep all of the text for the site in a .txt file, which you could easily edit with any word processor to update your site.
Make a new layer and name it "Actions." In the first keyframe, add the ActionScript loadVariablesNum( "news.txt", 0 );
This loads the file "news.txt" into the root timeline (at level 0). Inside the text file, you could have
&date=March 5, 2007
&headline=Research In Motion chairman resigns position
&story=Research In Motion Ltd. (RIM) co-chief executive and chairman, Jim Balsillie, has resigned voluntarily as chairman after an internal review revealed irregularities with how the company accounted for stock options.
Make a new Text field, either by clicking on the icon in the toolbox, or pressing T, and then clicking and dragging on the stage. Change the field from "Static Text" to "Dynamic Text" in the Properties panel. In the Var field in the Properties panel, type in the name of the variable you want the field to use (date, headline, or story).
Because the text is dynamic, and associated with a variable, it can be changed simply by changing the text in the TXT file. This is easier and simpler than having to open up Flash every time you want to update the text.
[edit] External SWFs
Splitting your Flash project up into more than one SWF is a good way to organize it. To load an external SWF "navigation.swf" into level 1, use this ActionScript:
loadMovieNum( "navigation.swf", 1 );
Each external SWF must be loaded into a level, 1 or higher. The root SWF is always at level 0.
[edit] Shortcuts
- V - Selection Tool
- A - Subselection Tool
- Q - Free Transform Tool
- F - Gradient Transform Tool
- N - Line Tool
- L - Lasso Tool
- P - Pen Tool
- T - Text Tool
- O - Oval Tool
- R - Rectangle Tool
- Y - Pencil Tool
- B - Brush Tool
- S - Ink Bottle Tool
- K - Bucket Tool
- I - Eye Dropper Tool
- E - Eraser Tool
- H - Hand Tool
- M,Z - Zoom Tool
- F5 - Insert new Frame
- F6 - Insert new KeyFrame
- F8 - Convert to Symbol
[edit] External Links
- Flashkit - Tons of tutorials, flash files, and more.
