Learning to Use Macromedia Flash

20 March 2006

Macromedia Flash is a medium used principally to place streaming video and sound into a webpage. If you just want to put music on a webpage then there are free simple applications which do this for you such as MP3SoundStream which provides easy access to the Flash features without you having to get your hands dirty..

The Flash plugin has achieved saturation of 95% of browsers and possibly 98% of audience. It has done this by being proprietary bundled software with Internet Explorer. This resulted in Macromedia being taken into the Adobe net as the key architecture for multi-media content.

A lot of work has gone into replicating basic HTML functionality with regard to FORMs. But Flash omits basic features such as tabbing across input fields, which must be done by hand. The main use of Flash is for movie content on a webpage.

Because Flash uses file streaming, animation in Flash can be better than using gifs if the job is anything more than basic. Creative use of animation can make webpage design better by saving space. Multiple images can be displayed in the one space.

A button can be placed on a Flash animation to make an href link. Parameters can be passed into a Flash animation by using <param name='FlashVars' value='field=value' /> to pass field values into the Flash action script.

Flash action script is close to Javascript and can be viewed as a flavour of Javascript with Flash extension.

The Flash authoring environment is a object framework painter. The key object is the Movie clip. There is also a Button object and a Graphic object. There is also a timeline with Layers and Effects, Transforms and Transistions.

SWiSHmax is another product which does the same thing for less money.

Flash is not an easy application to pick up and use. So here is a list of tutorial pages that might help:

http://www.kirupa.com/developer/flash8/simple_animation.htm

2 The Document

Begin each flash document by creating a new Flash document (start with a clean slate). The Flash window typically has 6 main sections though there are others which are often used as well. The 6 mian ones are:

The menu bar at the top. This behaves like most menu bars.
- File has file/save, save as, import, export and publish functions. Flash does not import .swf files as well as Swishmax.
- Edit is used for the usual undo, redo, cut copy and paste. It is important to use undo if you make any change which is not essential, otherwise slight complications can build up into complex problems through the course of creating a Movie. Use undo until you get back to a solid point and then redo by hand with as few adjustments as possible. This keeos the flash file as clean and simple as possible, which is important because they get complex real fast. There are several varieties of paste. There is also find/replace for renaming variables in action scripts. Edit also has system preferences.
- View adjusts the view but this is more easily managed from the right end of the edit bar at the top of the timeline. View is also used to display/hide rulers and guides for snapping to.
- Insert is used to insert objects (symbol, graphic or button) layers, frames and keyframes in the timeline or timeline effects. A graphic is a primitive object which has been drawn. It is often converted into a symbol (F8). A symbol is a container for any movie element from a single frame to a frame sequence to a bundle of layers. It is a way of compartmentalising behaviour and relationships. A button is a shape which has actions associated with it.
- Modify allows you to modify any of these objects - symbol graphic button layer frame keyframe etc. Modify is not used much because you tend to use the pointer tool to allow modication.
- Text has text properties. these are not used much because you tend to adjust text properties in the properties window.
- Commands allows you to import and run Flash Javascript (.fjs) script fragments.
- Control provides actions for controlling the play of the movie during creation and testing. Hot keys are more generally used.
- Window gives access to other window dialogue frames within Flash. Many of these are used regularly such as Color, Align, Actions etc.
- Help provides a monkey see/monkey do tutorial which covers several aspects. There is also a formal reference section. But there is no general description of the application structure which is why I am writing this.
On the right is the toolbar which contains many familiar tools. Notice that only the rectangle has a flyout (Polystar). The tools have additional contextual options at the bottom of the toolbar and also the properties windows changes to reflect contextual parameters.
The timeline typically occupies the top of the central pane. The tab gives the filename of the flash document. Beneath this is the edit line which identifies which element is being edited and at the right end are viewing controls. Beneath this is the Stack of Layers (starting with Layer1) and the Timeline. This is relative to the object in the edit bar. A Scene will have its own Layer and timeline, but symbols within the scene can also have their own Layers and timeline. You need to be careful when accessing this window that you access what you intend to change and not some other element of the scene.
Beneath the timeline window is the stage. This is the area where the movie is worked/constructed. But it is also used to edit symbols. Symbols are components of the scene which are themselves movies, i.e. they can take on any movie property or behaviour. Symbols are objects and when a Symbol is placed in a scene it is placed as an instance and given a unique name so that it can be referenced in action script.
Below the stage is the properties window. This is a contextual window with object paramters depending on what kind of object is being used or pointed to.
To the right is the Library which gives access to symbols and graphics and buttons. Other windows can usefully be placed just above it.

When you start a new movie you start with the new document. The properties window has width and height. Clickling this button gives access to the document properties which can be adjusted. Size, background colour and Frames/per/sec and the main things to adjust here.

3 The Graphic Symbol

The basic primitive object is the graphic symbol. This is typically created in one of two ways:

Insert/New Symbol/Graphic and give it a name. The stage then becomes a graphic edit window distinct from the Scene stage. You can then draw and edit your graphic symbol. The graphic symbol can consist of many graphic elements and transformations etc. Once the Graphic symbol is completed only instances of it are placed on the stage and usually given an instance name. This is so that you can go back and re-edit the symbol and have those changes updated throughout the movie wherever an instance of that symbol has been used.
In the second method you draw the graphic element on the stage and then use the selection tool to select it and F8 to convert it to an object. This is making the instance first and then turning it into an object. This second method is favoured because you create the graphic relative to the stage and other objects on the stage rather than in the blank space of the Symbol edit window.

4 The Selection Tool

This does not work like an object selector as in CorelDraw but selects according to a piecemeal arrangement. Try out a few things. Draw a straight horizontal line (Shift), a circle and a rectangle, a pencil line and a brush line and a few letters of text. Flash appears to distinguish three different types of object. Text, line sgments and fill areas. A circle and square create both line and fill objects. Lines are sel3cted a segment at a time. Text is selected per entry. Fill is selected by fragment if it is pointed at, but by renclosing rectangle if you select by rectangle. Play around with the selection tool moving things and selecting different groupings of objects to see what happens. Notice that clicking in a circle selects the circle fill but not its border. Putting a rectanglearound the circle selects both fill and border. Notice that a cursor hint gives some indication of what you are about to select. <Shift> and select allows you to add to the selection. The pencil tool draws a line, but the brush tool draws a fill area. Also notice that text floats on top of lines and fills. Also notice that you can pull lines around to create smooth filled shapes. Start with an ellipse and pull its border around a bit. Draw a lstraight line across the ellipse and notice that at the junctions the select tool selects the junction with a rightangle hint instead of the curve hint.

It is important to understand this behaviour because later you will be selecting objects which are invisible like button hit areas, and you need to know how to accurately select the right thing and not select some other thing by mistake.

5 Reverse Programming

Everything you do in Flash is mirrored by script which includes vector graphics commands as well as other types of commands. Flash is very much like writing interactive scripts on the Tk canvas. You can understand that when you write your Tcl program the various statements have to be done in a set order. For instance you cant initialise a variable after you have used it. And you want to set up all the attributes of a canvas object before you create it. Flash is very much like this. To acheive any functionality you need to create the script in the right order for it to execute properly. But in this case you perform actions which write the script. This is kind of reverse programming. The required script must be created by you performing a correct sequence of actions. Going back and changing something later is like putting your initialisation at the end of the program. This means that if you are trying to do something and it is not quite working you need to go back to the last point at which you have got things perfectly right and then reenact the sequence to create the next effect.

6 Creating a link button

Creating a link button over the whole of your flash animation is an example of this reverse programming. You need to follow the next steps to the letter without a glitch to get it right.

Be in Scene 1.
Create a new top layer, name it 'button'.
Select rectangle tool - set border to no colour - draw rectangle roughly over stage area.
Select selection tool - select the button - adjust the w h x y. PressF8 to convert to symbol, name it 'inv btn' and select button and OK.
Double click the button on the stage to enter symbol editing mode. Or right click/Edit 'inv btn' in Symbol list.
Move highlight focus from Up to Hit by dragging.
Click scene 1 to return to main timeline. There is now a teal rectanlge over the stage area.
Select the button on the stage, set the instance name to 'inv_btn'.
Create a new top layer - call it 'actions'

Select frame 1 of actions layer. Insert following code in action dialogue.

/* set a default url */
var myTxt:String = 'page?page=logo'

if (_level0.myURL != undefined) {
    myTxt = _level0.myURL;
}

inv_btn.onRelease = function(){
    getURL(myTxt, '_self');
};

7 allowScriptAccess

The allowScriptAccess parameter in the HTML can have the values :

never - prevent all scripting operations. This means your clever Flash probably wont work.
samedomain - Allow scripting from the same domain. This is OK if the .swf file is a sibling of the html page.
always - this is the most useful. Remotely stored .swf files work.

8 Passing parameters into Flash

Parameters can be passed into Flash in the <object> and the <embed> statements. There are two ways to do this.

The simplest way is to add the parameters onto the end of the .swf file invocation just like an html GET href. For example:

<param name='movie' value='specials1url.swf?myURL=http://video.co.nz/page?page=dvdclassics' />
. . .
<embed src='specials1url.swf?myURL=http://video.co.nz/page?page=dvdclassics' . . .

The second is to provide a parameter. For the IE object declaration it is in the form
```
    <object . . .>
    . . . 
    <param name='myURL' value='http://video.co.nz/page?page=dvdclassics' />
    . . .
    <embed . . . myURL='http://video.co.nz/page?page=dvdclassics' . . .
```
©2000 - 2006 WEBSCOOL This page last updated 30 May 2006. All rights reserved - including copying or distribution of any portion of this document in any form or on any medium without authorisation. For more regarding the copyright.