Macromedia Flash MX
Macromedia Flash MX is a tool for creating media for the web called Flash Movies. Flash MX allows you generate graphics for your site which can be either static or animated and incorporate standard bitmap images, movie clips and sound.
The main advantage of Flash MX is that it generates compact vector graphics which once created can be resized to suit most situations.
Launching Flash MX
To launch the Flash programme, click on
Start - Programs - Macromedia - Macromedia Flash MX
The programme opens on a blank page called Untitled-1.
The layout of the programme is similar to that of Dreamweaver MX. There is
a blank page, the white stage where your animations appear, the very important
Timeline and a number of toolbars and floating palettes.
Palettes and Toolbars
The Timeline
| The Paint and Drawing Toolbar
|
Floating Palettes/Toolboxes
|
The Properties Palette
All the important work is done on the timeline and the stage.
Drawing and Painting
The drawing and painting tools are the familiar ones from many art packages.
For example if you select the Pencil Tool and then the Properties palette
changes to display the different options for the Pencil Tool. Changes can
then be made to each element using the modifiers.
The Line Style can be modified using the Drop Down menu.
The Line Width/Strength can be increased/decreased using the slider control or by entering a specific number in the line width display box.
Line Colour can be modified using the Colour Palette.
All changes are displayed in the Preview box at the bottom of the palette
window.
The menus shown appear when you click on the Stroke modifier or the Line
Style modifier. You can, of course, use the colour menu to choose a full
range of colours by selecting the colour wheel button on the colour palette.
The line and rectangle tools are similar but their modifiers are slightly different.
With the rectangle tool you have the option fill colour and of curving the corners:
To draw a rectangle select the Rectangle Tool on the Tool Palette.
To
change the colour of the rectangle click on the Arrow Tool.
Double click on the rectangle and the shape should become shaded with white or black dots. (depending on the brightness of the original colour of the shape)
To alter the colour of the fill only single click with the Arrow Tool somewhere inside the shape. Only the fill section should be selected. If the whole shape is selected click outside the shape and try again.
To change the border colour double click on one section of the border. All edged should then become shaded. A single click selects only the edge selected, not all edges.
Once a section is selected in this fashion, click on the Colour Select Tool on the Tools Palette or the Properties Palette and select the colour you require.
The Round
Rectangle Radius Tool on the Rectangle Options Palette allows us create
losenge shapes which are commonly used when creating buttons.
To
create a losenge shape, select the Rectangle Tool and then click on
the Round Rectangle Radius Tool on the Options Palette.
Change the corner radius to whatever value you require. Here is an example with a corner radius of 30 points.
The Pencil Tool has modifiers that allow you to straighten, smooth or leave a curve exactly as you draw it. The modifiers are:
The Straighten, Smooth and Ink effects alter the look of your drawn shape in the following ways.
|
|
|
|
The
Ink effect leaves the shape relatively unaltered. This final shape
will be almost exactly as the mouse drew it 
The
Smooth effect irons out the major wrinkles and leaves a smoother softer
shape. This too is very hand when trying to draw smooth curves freehand.
The
Straighten effect connects specific points and creates a shape of all
straight lines giving it a sharp jagged effect.The Paint Brush Tool has modifiers that allow you to select a brush size and type and also paint in different ways:
|
|
|
|
| Original Drawing |
Paint Normal |
Paint
Fills |
|
|
|
|
| Paint
Behind |
Paint
Selection |
Paint
Inside |
The Bucket Tool works similarly. It has a very useful feature which is the gap size modifier:
This allows control over the size of the gap that the bucket will ignore.
The Eraser Tool has the same type of modifiers as the paint bucket.
To erase all the elements on the stage, double click the Eraser Tool button.
The Options for the Eraser Tool are Eraser Mode, Faucet, and Eraser Shape
The Eraser Shape determines the size of the eraser stroke and whether it is round or square shaped.
The Faucet is a quick delete setting. To quickly erase a border or fill, click on the Eraser Tool Button then the Faucet button on the Options section and the click the section to be deleted.
The Eraser Mode is similar to the Paint Fill options. It allows for greater control of the drawing when removing unwanted sections.
Moving Drawings on the Stage
Drawings can be repositioned on the stage using the Arrow Tool. Care must be taken when using the Arrow Tool as the function of this tool varies on how the mouse button is used.
Moving whole drawings
To reposition a whole drawing, double click on the drawing ensuring the
drawing is completely shaded with the small dots.
Click and drag the drawing to a new position.
Moving a fill section/border section
To reposition a section of a drawing such as the fill or border, single click on the section to be moved. Only the section to be moved should be shaded, then click and drag the shaded section to a new position.
Make sure you completely clear the remaining section of the drawing before releasing the mouse button. If you “drop” the section to be moved so that it overlaps the remaining section and remove the shading, you cannot reselect the section to move it further as re selection the section will also select the drawing beneath it and you will end up effectively erasing section of the original drawing.
|
|
|
| Original Image |
Selected fill section and moved it to the right. |
|
|
|
| Dropped the fill section on the border and clicked away from the image to remove shading. |
Selected fill section and moved it but the section of the border directly under the fill section has been moved as well. |
You will notice that the borders of the drawing must be double clicked to select the full edge. A single click on the border selects the section of the border directly under the pointer. This can be moved independently of the rest of the border.
The Arrow Tool also allows you reshape your drawing. Dragging on a line without selecting it (holding the mouse button down) will reshape it:
Move the cursor over the edge of the drawing you wish to reshape. The arrow cursor will change to one of the following:
or 
|
|
|
When
the pointer with the angle appears dragging the edge will produce a
sharp angle.
Dragging
a side when the cursor has the curve shape produces a curve on the
edge being dragged.
Symbols and Instances
Central to the idea of Flash is the concept of a symbol.
A symbol is an image, an animation or a button that can be used over and
over again. The individual occurrence of a symbol is called an instance.
You can create a simple symbol by drawing a simple shape:
Double click the symbol to ensuring both the fill and edges are selected.
|
|
|
|
We will now convert the drawing to Symbol.
Click on Insert on the menu bar and select Convert to Symbol from the drop down menu. (The shortcut key is F8)
A menu appears listing the three different symbol types. We are making a simple graphic symbol so select the Graphic option. Give your symbol a short descriptive name.
The symbol myshape can now be found in the Library, and can be used repeatedly in your Flash Movie.
Each copy of the symbol used is called an Instance of the symbol and any changes to the symbol will be reflected in each Instance.
To open the Library click on Window on the menu bar and select Library from the drop down menu. (Shortcut key is F11)
|
|
This is the Library containing the symbol myshape. To edit the symbol, double click either the preview image of the symbol or the small icon by the symbol name. The stage should then display the symbol completely shaded. You can now alter the colour and shape of the symbol. Remember that any changes to the symbol will automatically change each instance of the symbol on the stage. To return to the stage click on scene1 on the navigation bar at the top of the stage.
|
To copy an Instance of the symbol to the stage, simply drag the symbol from the Library and drop it onto the stage.
The instance currently selected has a blue outline and a cross hair symbol at the centre.
While editing a symbol changes all Instances of the symbol on the stage, it is possible to alter individual instances on the stage leaving others unaffected by the changes.
Select an Instance on the stage. The properties for the Instance should now appear at the bottom of the screen.
If you cannot see the Properties for the Instance the Properties Palette must be expanded.
Click on the word Properties and the palette should expand and the triangle becomes inverted.
On the Properties Palette select Tint from the Color drop down menu.
Select the colour palette and pick a colour.
This will shade the Instance that particular colour. The strength of the shading will be determined by the percentage shading you select using the slider bar to the right of the colour picker.
The options for altering Instances are less flexible than working on the original symbol.
The Tint for instance applies to the whole Instance and you cannot select particular sections of the Instance and apply the effect to that particular area.
Other options are Brightness, Alpha and Advanced.
Alpha refers to the transparency of the Instance and we will be looking at that option a little later on.
You should now save your file as we will be using this as the basis for the rest of this tutorial.
Saving a Flash file is similar to saving a file in any Windows application.
Click on File>Save
Give your file a name keeping the one word – lowercase convention
in mind.
Animation
Flash MX allows the creation of high quality animations due to the use of vector graphics.
We will create some very simple animations using Flash MX.
Double click the Eraser Tool to delete all images on the stage.
Drag an instance of the myshape onto the
empty stage and resize it to make it a neat size.
To resize the shape, select the Instance and click on the Free Transform Tool and then the Scale Tool on the toolbar.
The Free Transform Tool allows your resize the image without maintaining the original proportions; the Scale Tool constrains the resize so that the image retains the original proportions.
We must now focus on the Timeline. You will notice that a black dot has appeared in the first section of the Timeline.
Each section of the Timeline is called a Frame. The animation will consist of a series of Frames which Flash MX will play in sequence. The separate elements of an animation are defined using specal Frames called Keyframes.
Essentially a Keyframe denote the end of one particular section of an animation and the beginning of a new action.
By default the first frame of any animation is called a Keyframe.
We are going to add another Keyfame so as to limit the length of our animation.
Click on Frame 40 of the Timeline.
Click on Insert on the menu bar and select Keyframe from the drop down menu.
The new Keyframe duplicates the stage, so it looks exactly the same as the previous Keframe, but we can now move the objects on the stage in one Keyframe but the object will remain in position in all other Keyframes.
Making sure that Frame 40 is still selected on the Timeline move the image myshape a new position on the stage.
Now click on Control on the menu bar and select Play.
The slider will now travel across the Timeline and stop at Frame 40.
You will notice that the image remains static until Frame 40 then jumps to a new position.
This form of animation is not very satisfactory so we will now enhance the movement of the image.
Flash MX can automatically generate the images needed to create an animation where the image moves smoothly from one position to another. It will add the images needed between the two points. Flash MX calls this tweening.
Click anywhere on the Timeline between 1 and 39.
Right click on the Timeline and select Create Motion Tween from the pop up menu.
Alternatively click on Insert on the menu bar and select Create Motion Tween from the drop down menu.
An arrow should now stretch the length of the Timeline from Frame 1 to Frame 39.
Click on Control >> Play to see the animation. (Shortcut key is Enter)
Flash MX has generated the image files needed between the first and last Keyframes to have a smooth movement from left to right on the stage.
It is possible to have multiple Instances on the stage all moving independently of each other.
This is accomplished using Layers.
Save your file.
Layers
Layers allow us have many different elements in a single movie file all behave independently of each other. We are going to make two images move in different directions on the stage.
We must first create a new Layer to hold the second image.
Click on the Insert Layer button on the bottom left of the Timeline Palette.
A second Layer appears above the original Layer. The order of the Layers is important as it determines the position of the Layer on the stage. The topmost Layer listed on the Timline will be the top Layer on the stage and may obscure layers below it.
You will also notice that the new Layer is the same length as the original Layer.
If you increase the number of Frames in one Layer leaving the other Layer untouched all the elements of the shorter Layer will disappear during playback as only one Layer will exist towards the end of the movie. To ensure the elements on all Layers are visible during full playback of a movie, make sure your Layers are all the same length.
Making sure you have clicked on the first Frame of the new Layer drag another Instance of the Symbol myshape onto the stage.
Place it on the top right of the stage. You may need to reposition the original image to the top left of the stage.
Click on Frame 40 of Layer 2 and insert a Keyframe. (Shortcut key F6)
Drag the new image to the bottom left of the stage and reposition the original image to the bottom right.
Click on a frame between 1 and 39 of Layer 2 and create a motion tween. (Right click and select Create Motion Tween from the pop up menu.)
Both Layers should now have a long arrow the length of the first Keyframe.
You will notice that I have renamed the Layers.
As the numbers of Layers increase it is easier to manage your movie if you know which action takes place on which Layer.
I named these Layers “Left to Right” and “Right to Left”.
To rename a Layer select it on the Timeline and click Modify on the Menu Bar. Clcik on Layer on the drop down menu and rename the Layer in the Layers Properties window.
Alternatively double click on the Layer name on the Timeline then enter a new name.
Press Enter to preview the animation on the stage.
We can add some extra movement to the animation using the Properties Palette.
Flash MX has a built in Rotate option on the Properties Palette.
By selecting the animation you wish to rotate on the Timeline the Rotate option appears on the Properties Palette.
There are four options on the Rotate drop down menu.
-
None is self explanatory.
-
Auto will cause the software to turn the shape once in the direction that requires the least rotation.
-
CW is clockwise and CCW is counter clockwise. When either of these options is selected you can also select the number of times you want the shape to rotate.
As mentioned earlier you will notice that the image on the new Layer obscures the original image as they cross paths.
While there is no way of manipulating the priority of a Layer in an active Flash Movie, we can manipulate the path the shapes follow so that they avoid this overlap. To do this we will use a Guide Layer. This is a helper Layer which is only visible while the Flash Movie is being created but does not appear on the published Flash Movie file.
The name of the Motion Guide Layer will appear with the word Guide in front of the name of the Layer to be manipulated.
Save your file.
Adding a Motion Guide
Select the Layer on the timeline to which the Motion Guide will apply.
Click on the Add Motion Guide button on the bottom left of the Timeline window.
A new Layer appears just above the Layer selected. This is our Motion Guide Layer.
We will now add a path which the object on the selected Layer will follow.
Click on Frame 1 of the Motion Guide Layer.
Using the Pencil Tool (smooth option selected) draw a line from approximately the centre of the shape on the from approximately the centre of the shape where the animation begins which loops to the top of the stage then back down to the opposite corner where the animation ends.
We will now fine tune the starting position of the animation.
Click on the shape at the top of the path.
Manoeuvre the shape so that the circle with the cross hair at the centre sits on the end of the line you have just drawn.
Click on Frame 40 of the same Layer and again manoeuvre the shape in the same way.
To force the object to follow this path we select Orient to path option on the Properties Palette.
Press Enter to view your animation.
To preview the Movie as it will appear on a web page select Test Movie from the Control menu.
Using the same method, add a Motion Guide Layer to the second Layer.
Easing In and Out
We can also alter the acceleration or deceleration of an animation using the Ease Option.
Select a tween (long arrow) on the Timeline.
The Ease slider on the Properties Palette ranges from +100 to -100.
Move the slider to the +100 option and press Enter.
This causes the animation to decelerate as it progresses.
Moving the slider to -100 will cause the animation to accelerate as it progresses.
The use of Keyframes, a Motion Guide Layer and the Ease Option is perfect for creating an effective bouncing ball animation.
Fading In and Out
As well as controlling the speed of acceleration and deceleration, we can also control the transparency of an object during an animation forcing it to appear or disappear as the movie plays.
To control the visibility of an object we must select the object at the beginning of a tween.
Select on one of the objects on the stage ensuring you have clicked Frame 1 on the Timeline. Select the Color Option on the Properties Palette and select Alpha from the drop down menu.
Once selected another option appears which allows us control the percentage opacity of the object, from 0% (transparent) to 100% (opaque)
Move the slider to 0%.
The object is now invisible but the blue rectangle indicating the object has been selected should still be visible.
Remembering that each Keyframe restricts any actions to that Keyframe, the shape at the end of the animation which resides in the next Keyframe is unaffected by these changes and is still visible, Click on Frame 40 to double check.
Press Enter to view the animation.
|
|
The Ease option is still active on this animation. To view the fade effect on its own set the Ease value to 0. To reverse the fade effect, set the Alpha value in Frame 1 to 100% and the Alpha value of the object in Frame 40 to 0%. Press Enter to view the animation. Remember that if you add a new Keyframe all objects inherit the values set in the previous Keyframe. So if the Alpha value is set 0% in the old Keyframe it will also be 0% in the new Keyframe. Save your file. |
Buttons
Flash buttons are very popular as you can add custom animations to buttons in Flash thus creating your own button style.
Flash MX also has a bank of pre-made buttons in the Common Library. You will find the Common Library on the Window menu.
We will create simple buttons to control our animation.
Click on the top Layer in the Timeline and create a new Layer.
Rename this new Layer Button.
If the Layer is not the topmost Layer simply drag the Layer name to the top of the list.
Click on Frame 1 of the Button Layer.
Using the Oval Tool draw a circle on the stage.
We will now convert this image to a Symbol but we will select the Button option this time.
Double click the image making sure the whole image is shaded. Click on Insert on menu bar and select Convert to Symbol (F8) from the drop down menu.
Select the Button Option from the Convert to Symbol window.
Give the Symbol a name.
Open the Library and drag a second Instance of the button onto the stage.
We will now assign an action to each button. One will stop the animation the other will restart it when stopped.
Before we assign the actions we will designate which button will complete which action by recolouring the buttons using the Tint Option.
Click on the first button and select Tint from the Color Option on the Properties Palette.
Select red form the colour palette. This will be the Stop Button. Do the same for the second button but select a green from the colour palette. This will be the Play Button.
To assign an action to the buttons we must expand the Actions – Frame Palette.
This can be found at the bottom of the screen below the Properties Palette. Click on the name of the palette to expand it.
You will see a list of actions in the left panel.
Making sure you have the red button selected, double click the stop action.
The instruction
on (release) {
stop( );
}
should appear in the panel on the right. This indicates that the stop action has been applied to the red button. The on release instruction tells the animation to stop when the mouse button is released.
Now select the green button and in the same way, double the play action.
Again the instruction
on (release) {
play( );
}
should appear in the left panel.
If you accidentally click on the wrong action, simply highlight the new instruction in the left panel and the click the - button just above the instruction. This removes the instruction.
We must now test our Movie using the preview mode as the buttons will not work if we simple press Enter.
Click Control > Test Movie.
More Advanced Buttons
To add mouse over effects to your button we need to delve a little deeper in the button structure.
We need to assign different values to each of the button states. The default state when the button is in the Up position, a behaviour for when the mouse moves Over the button, a behaviour for when the button is clicked or in the Down state and finally to define which part of the button is clickable, or what the Hit area of the button is.
We have to define four different button states:
Up
Over
Down
Hit
When an object is converted to a Button Symbol these four states are generated automatically and can be adjusted to suit your needs.
As we will be editing a Symbol and not just an Instance of the Symbol the existing buttons will both reflect any changes we make.
We will now remove the existing buttons and create new more complex buttons.
We can duplicate Symbols in the Library.
Right click on the Button symbol and rename it to Button1. We will be creating a new button and we cannot have two Symbols with the same name.
Once the Symbol has been renamed, right click on the Symbol again and select Duplicate.
Rename the Duplicate Symbol Button2.
Select the Button Layer on the Timeline and drag Button1 onto the stage and then double click the button.
The Timeline should now display the different stages of the button.
We can edit each stage.
As each stage will have a different action, each must have a Keyframe.
To quickly add a Keyframe to each Frame, click inside the Frame and press F6.
Then click on each Keyframe to edit the button properties for that action.
Select the Up Frame on the Timeline. Next click the button on the stage.
The Properties Palette should display the Line and Fill Colour Options.
Change the fill colour.
Select different fill colours for the Over and Down states in the same way.
The last state, the Hit state does not appear as part of the button but defines the area of the button which can be “clicked”.
In this case we do not need to add anything as the image will act as the Hit state. The colour of the Hit state is irrelevant as it doesn’t appear on the finished button.
An example of where a Hit state would be added is when we use text as a button.
We will look at that briefly a little later.
To return to the main stage click on the Scene 1 link at the top of the stage window.
To add the button action of stopping the Movie we follow the same procedure as with the simple button as outlined earlier.
Test your button by previewing your Movie. Control > Test Movie
Text as a Button
To add a button action to a text, we follow the same steps as with using a solid drawing.
Select the Text Tool and click on the stage.
Type the word Button.
You will notice that the Properties Palette now display all the text properties.
Click on Insert > Convert to Symbol and select the Button Option to convert the text to a button.
Name the symbol Textbutton
Double on the text button to open the four different stages on the Timeline.
Insert a Keyframe for each stage and edit the colours as with the solid shape outlined earlier.
For the final Hit stage it is not sufficient to leave the text as the area to be clicked on the button. If someone clicked in the centre of the o in the word button, nothing would happen as the Hit area is the text only. To avoid this we will add a solid rectangle to ensure the button is activated even if some clicks inside a letter or between words.
Make sure the Hit stage is selected on the Timeline.
Using the Rectangle Tool, draw a rectangle over the text making sure it fits the text snugly.
Don’t worry about the colour as the Hit stage is not visible in the finished button.
You can add an action to this button in exactly the same manner as outlined earlier for solid buttons.
Return to Scene1 and select the text on the stage.
To use the button to link to a web site open the Action Frame palette and double click on the getURL action.
Enter a full web address in the URL section.
Test your button by previewing the movie. Control > test Movie
Publishing your Movie
Once the movie is ready for the web you must publish it. A saved Flash file (*.fla) cannot be imported to a web page. It must be published in a *.swf file format.
Click on File > Export Movie.
Give your file a name, lowercase, one word.
We will call our file tutorial
Click Save.
Leave the export setting at default and click OK
Your file is now ready for use on a web page.
You can check the file by double clicking it in the folder where it was saved.
You cannot edit a *.swf file once published and publishing a Flash File does not automatically save changes you might have made *.fla file. To save the file so you can edit it later click File > Save.