Starting Off

 
       
 

When you start Flash MX, it will probably look a bit like this.

 
     
  the default view  
     
 

The first job is to tidy up the screen a bit by getting rid of some of the panels.

 
     
  how to close a panel

Each panel has a menu icon on the right hand side at the top.

To close a panel, click on its menu icon and select (left-click) Close Panel.

Do this for all the panels on the right hand side until the view looks more like the image below.

Although you will need to get at some of these panels later, you also need to have a clear view of the two most important components of the design environment - the timeline and the stage.

 
       
  a wide view of the stage  
     
 

The Timeline

 
     
 

Have a look at the timeline at the top of the Flash screen. It shows a series of frames that make up the movie.

Each object in the movie is normally placed on its own layer e.g. Layer 1. This organises the objects and allows you to do different things with each object.

At the moment our movie is only 1 frame. You should be able to see a single rectangle with a circle in it.

frame 1
 
     
 

To set the length of our movie and to show you how to alter the timeline, right-click on frame 80 in Layer 1.

Select Insert Frame from the menu that appears by left-clicking on it.

The frames between 1 and 80 will then be bordered with a rectangle.

Each frame lasts 1/12th of a second (although you can change this) so you now have a movie that will last around 7 seconds.

However, if you look at the stage, there is nothing in the movie yet. Your next task is to add some content.

adding some frames
 
 

Adding content to a layer

 
     
 

First to organise things a bit.

Double-click on the label for the layer called Layer 1. You can then edit it and change it to something more meaningful such as title.

change label
 

Now select the text tool by clicking on its icon in the toolbar.

choose text tool
 

Use the Properties pane at the bottom of the screen to set the fill colour to red and the text size to 40.

text properties
   

Now click once onto the stage and a text box will appear. The circle in the top corner indicates that it will automatically expand as you enter text.

   

Now type into the box to add text to the stage in the layer you have called title.

Don't worry if the text starts to fall off the stage, any object that you place on the stage can be moved around to any position you like.

   

Click on the arrow tool in the toolbar and the text object will be surrounded by a blue box. You can then drag it to wherever you want it.

Put it somewhere near the bottom of the stage.

   

The next page takes you through animating the text so that it changes size and moves up to the top of the stage.

 
     
 

Animating the text

 
     
 

We will start by creating two special frames to act as markers for the text animation.

These special frames are called Keyframes.

Right-click on frame 40 in the title later and select Insert Keyframe from the menu that appears.

insert keyframe
 

You will see a distinctive frame with a central circle appear (just like frame 1 which is automatically a Keyframe).

When you create a Keyframe in a movie, any objects that were visible on the stage in a previous Keyframe (frame 1 in this case) are copied to the new Keyframe.

The idea of a Keyframe is to create a point where something new happens or where something stops happening.

Create a Keyframe at the last frame in the title layer - at frame 80.

   

The idea is going to be to make the text shrink and move between frame 1 and 40 and then grow and move back between frames 40 and 80.

Click on Keyframe 40 to select it.

Drag the text to the top of the stage.

dragged to the top
   

If you now click on Keyframes 1, 40 and 80, you should see the text jump from the bottom to the top and then back again.

Now to change its size.

Click on Keyframe 40 again.

Select the free transform tool by clicking on it in the toolbox or by pressing Q.

free transform tool
   

The text will now have black handles around it and you will find that you can change its size by dragging on them. Its worth mentioning that the same tool lets you rotate objects, hover the mouse near to a corner and the pointer will change to indictae the rotate function.

Make the text smaller by dragging it inwards and then drag it back to the middle of the stage.

smaller text
   

Finally, to make the text animate rather than jump, left-click on a frame between 1 and 40 (but not either of these frames).

Look down to the properties pane at the bottom of the screen for the Tween list control.

Select Motion from the list.

The frames between 1 and 40 now show an arrow, this indicates that the object on the stage will be animated bewteen them.

Now click between frames 40 and 80 and add a motion tween for the second half of the movie.

tween list
   

To test the animation. Click on Keyframe 1 and then press the enter key.

Flash previews the movie and you will see the text grow, move and then shrink.

The next page shows you how to add more objects to the stage and how to animate them in different ways.

 
     
 

Adding more content

 
     
 

Click on frame 1 of the title layer.

Click on File in the main menu and then select Import... from the sub-menu list.

The Import dialog will then appear. Use the controls to navigate to the lesson_1_images folder.

file import
 

Select the beans image and then click on the Open button.

The image of a can of beans manufactured by a famous company will appear on the centre of the stage.

Now repeat the process, importing the images of the pasta and then the fries.

 

import dialog
   

Each image will be placed in the middle and so tidy up by dragging them so that all three are separated.

Now use the mouse pointer to select all three images by dragging a box around them and then releasing the mouse pointer.

Each will have a grey box around it to show that it is selected. Make sure that the text at the bottom has not been selected.

all three images on the stage
   

With all three images still selected, click on Modify in the main menu and then select Distribute to Layers from the sub-menu.

Each selected object is now placed on its own named layer. This means that you can animate each one independently.

You could have created a layer for each image separately and then imported them to their own layers. There are at least 3 ways to carry out most tasks!

You now have a nicely organised timeline to your movie, but you have also created a problem. From now on you must keep looking at the timeline every time you intend to change an object to check that you are really changing the intended layer. Unfortunately it is very easy to delete or alter objects on other layers by accident.

The best advice is click on an object, check that it has a selection border around it and then look at the timeline to be sure.

The next page shows you how to use different animations with the imported images.

distribute to layers
 
     
 

Using tween properties

 
     
 

Click on the beans tin and then look up to the timeline to check that you are working in the beans layer.

Notice that you can achieve the same thing by clicking on frame 1 on the beans layer. The beans image will be selected.

Now right-click on frame 40 in the beans layer and select Insert Keyframe from the menu.

Place a Keyframe on frame 80 of the beans layer.

 

Click back on frame 40 of the beans layer and then add a motion tween using the list control in the properties pane. You will see the tween arrow between frames 1 and 40.

tween list control
   

Since the beans tin is in the same position on frame 1 and frame 40, the tween doesn't do anything yet.

Check that you have still clicked on a frame inside the tween and then use the tween properties at the bottom to choose CW from the rotate control. This will rotate the object once clockwise between frame 1 and frame 40.

rotate tween
   

Now click on a frame between 40 and 80 in the beans layer and add a motion tween that rotates the tin anti-clockwise once as the movie plays. Remember to look for counter-clockwise or CCW!

Move the play head (the red rectangle above the timeline) back to frame 1 and press enter to see the effect.

If you want to rotate the shape more quickly, alter the number of times it rotates in the tween properties.

 
     
 

Frame by frame animation

 
     
 

Click on frame 1 of the fries layer. The cup of chips should be selected on the stage.

Now create a Keyframe along the timeline in the fries layer every 10th frame.

 
frame by frame
   

Now select frame 10 in the fries layer and use the mouse to drag the image up the screen a little bit.

Another way to move objects in one direction is to tap the arrow keys when an object is selected. This nudges the object in the direction of the key.

Click on frame 30 in the fries layer and tap the down arrow key a few times to drop the image down the stage a bit.

Carry on, nudging the image alternately up and down on every other keyframe. Hopefully the image will appear to jump up and down as the movie plays. Click on frame 1 and press enter to see if it works.

This is a very simple introduction to frame-by-frame animation. You can move an object (or change its shape) in each successive keyframe and it will animate as the movie plays. The more keyframes, the smoother the animation.

In most animations it is good policy to add keyframes as you animate so that each new one starts off based on the changes you made to the last one.

Trt to get your chips a bit more excited by getting them to jump further (by nudging) or more often (by adding keyframes and then nudging).

To make this rather jumpy animation smoother, add a motion tween between each keyframe and then watch the effect.

 
     
 

Working with a symbol

 
     
 

You are now going to animate the pasta by making it fade in and out as the movie plays.

Click on frame 1 on the pasta layer.

Check that the image is definitely selected and then click on Insert and then Convert to Symbol... in the sub-menu.

Symbols are objects in the movie just like all the other things that you have placed on the stage. Their special feature is that they are placed in the movie's library and you can add copies (called instances) of symbols to the stage without adding to the size of the final movie file. You can also edit a symbol and all the instances of it in the movie are automatically updated.

convert to symbol
 

A dialog appears. Use it to give a meaningful name to the symbol (e.g. fusilli!) and select its behaviour. You will learn more about behaviours in lesson 2. For now select Graphic and then click on OK.

convert to symbol dialog
   

The only change that you will notice is that the pasta has a blue selection box around it instead of the grey one. However, you can now alter the object in some new ways.

   

Insert a Keyframe at frame 40 and frame 80 of the pasta layer.

Click on frame 1 of the pasta layer and then click on the object on the stage.

Use the symbol's properties at the bottom of the screen to chage the color alpha property to 0%.

The alpha property sets the object's opacity. In this case, you have made it completely transparent.

set alpha property
   

Repeat the procedure for frame 40 in the pasta layer, but set its alpha to 100%.

Finally, move to frame 80 and set the symbol's alpha property to 0%.

If you watched the movie now, the pasta would stat of invisible, suddenly appear half way through and then just as suddenly disappear.

To make it fade in and then out, insert a motion tween between each keyframe.

Try the movie and then see if the effect is better if the pasta fades the opposite way as it plays by changing its alpha property on each keyframe. You could have the symbol partly visible at frame 40.

Click on Next to add one more animation.

 
     
 

Using path animation

 
     
 

Click on the beans layer so that it is highlighted.

Select Insert and then New Layer.

A new layer will appear above beans with its default name e.g. Layer 8.

Double-click on the name and change it to question.

insert layer
 

Click on frame 1 of the layer question and then select the text tool.

Use the properties pane to make the text fill colour blue and the size 40.

With the text tool still selected, click in the grey area to the left of the stage and enter and why? into the text box.

Select the arrow tool and click on the text to select it. Drag it so that the words are all off the stage and about half way up.

add question text
   

Insert a Keyframe at frame 80 on the question layer and then click on that keyframe.

Check that you are definitely working in the right layer and frame and then drag the text all the way off the right hand edge of the stage.

Add a motion tween between frame 1 and frame 80 so that the words fly across the stage as the movie runs.

   

The words will appear to fly behind objects in layers above its layer and in front of objects in layers below its layer. You can drag the question layer to a different place in the timeline order to change this effect.

PowerPoint is quite good at this sort of thing so you are now going to make the words fly along a given path.

layer order
   

Click on frame 1 of the question layer.

Click on the add motion guide button below the layers.

A new layer appears above (and attached to) the question layer.

add motion guide
   

Click on frame 1 of the guide layer for the question layer.

Select the pencil tool from the toolbox and in its options pane at the bottom of the toolbox, select smooth.

Check that frame 1 of the guide layer is still selected and draw a wavy line on the stage between the place where the question text starts and where it ends up. It doesn't matter if you are a bit out, you can sort it out later.

path line

select pencil tool
   

Click on frame 1 in the question layer.

Select the arrow tool and use it to drag the text so that it sits on top of the stat of the guide line.

Do this at the other end at frame 80.

When you try the movie, the text should follow the guide as it flies across. However, if it does not snap to the start of the line, it may just fly straight across. Keep on trying to get the text to latch on, it will after a few attempts.

By the way, don't worry about the guide line, it is invisible in the finished movie.

latch onto the end
 
     
 

Publishing your movie

 
     
 

Now that you have finished your movie, you can publish it to a flash file that can be played using Internet Explorer or added to a PowerPoint slide.

You will publish the movie to a shockwave flash file (.swf) and also produce a web page that plays the file automatically.

Click on File in the main menu and then Publish Settings...".

 

file and then publish setings
 

Check that the two default options - flash and html are selected and then click on the Publish button.

Flash will compile the flash file, construct a web page and then save both to the folder where you have been saving the working file.

You can then click on the OK button to return to the design.

The Flash and HTML tabs provide settings for the way that flash should save the files. Have a look at the options but the default settings will work fine for most situations.

publish settings dialog
   

Once you have checked the publish settings in this way you can publish the flash file to the working folder by File and then Publish.

The last part of this lesson shows you how you can play your movie.

 
     
 

Playing your movie

 
     
 

When you have published the movie, you will probably have three sorts of files in your working folder.

The Flash document is the working file containing all the layers and images and tweens.

The Flash movie file is the published movie ready to play.

The HTML document is a web page set to play the Flash movie file. Note that if you move the HTML document, you must move the Flash movie to the same location. You can rename the HTML file but you should leave the movie file with the same name to ensure that it loads into the web page.

the working folder
 

To play your movie, you could...

Double-click on the web page. It will load the movie and set it running.

Double-click on the movie file. If the flash player is installed, it will load the movie into its own movie and play it.

Right-click on the movie file and select Open With and then Internet Explorer.

This last method has the advantage over the first in that the movie will automatically resize when you resize the Internet Explorer window.

open with internet explorer
   

Alternatively, you could insert the movie into a PowerPoint slide. This means that the movie can be a part of a slideshow that brings together a variety of other objects such as images, text, movies and sounds.

Start a new PowerPoint presentation.

Create a blank slide.

Open the Control Toolbox by right-clicking on the grey toolbar area and selecting it from the menu that appears.

Click on the More Controls button on the toolbox and then scroll down the menu that appears until you find Shockwave Flash Object. Click on this and the mouse pointer will become a cross hair.

Drag a box out on the slide, this is where the movie will be played.

Right-click on the box that you drew out and select Properties from the menu that appears.

Set the EmbedMovie property to True. This means that once you have run the slideshow once and then saved the movie, it will be a permanent part of the PowerPoint file.

Enter the full path to the movie in the Movie property. The best way to do this is to run the movie in Internet Explorer and then highlight and copy the path from Explorer's address bar at the top. It can then be pasted into the property page.

Run the slideshow and then save the file.

Congratulations, you have created a Flash movie designed to look like a PowerPoint slide, and then put it on a PowerPoint slide!

open control toolbox

more controls

the properties list

 

 
     
 

One last thing...

 
     
 

You are probably thinking that this has been a lot of effort to produce something that is really rather like PowerPoint.

To make matters worse, it isn't always easy to adapt a flash movie to do something different so you might be faced with starting from scratch for the next one!

One way to overcome this is to use Flash's facility for swapping images and symbols. This means that you can insert different objects into a movie without having to redesign it from the bottom up.

 

Press the F11 key to bring up the Library window. It shows the main objects in the movie.

Right-click on beans in the library and select Properties....

Click on the Import button.

Navigate to the folder where you originally found the food images and select the perrier image.

When you click on OK, the picture of the Perrier bottle will replace the beans and it will animate in the same way.

This trick works best if you have a set of images that are all a similar size, otherwise you may find yourself moving things about on the stage and this can be tricky.

library