Macromedia Flash 8 Masking Tutorial

Software: Macromedia Flash 8
Subject: Masking Animation Technique
Difficulty: Intermediate

This tutorial will guide you through the process of using the masking technique in Flash. Using masking you can create movie like transitions or use the effect to control what parts of the animation the user can see.

To begin, open Macromedia Flash and begin a new Flash document.



You will be presented with a blank new document. From this screen you will be able to do everything needed to create a masked animation.

You must first import an image to your stage. This means bringing an image in to Flash so that it can be used as part of the animation. To do this choose File > Import > Import to Stage or press Ctrl+R. Browse your computer and find the image which you want to import and open it. You will now see the image in Flash.

You can edit the size of the image using the image properties at the bottom of the screen when you have the image selected. Try to match it to the size of the canvas and align it so that it is covering the canvas.



Next, on the timeline, located at the top of the screen, insert a frame at frame 60. To do this right click at 60 on the timeline and from the menu select Insert Frame.



Rename that layer on the timeline as ‘Image’ and then lock it. Do this by double-clicking Layer 1 in the layer panel to the left of the timeline and typing in the new name and then clicking the dot underneath the padlock icon. Locking this layer means that it cannot be edited by accident as you progress.

Once you have done that add a second layer. To do this click the new layer button located to the bottom left of the layer panel (circled below). Rename this layer ‘Mask’. Your layer panel will now look like this:



On this new layer you now need to create a circle somewhere near the centre of your image. Select the oval tool from the tool menu at the left of the screen. Select any fill colour for the circle.



Now hold shift to create a perfect circle and click-and-drag out a small circle in the centre of your image.



Select the circle and press F8 to convert to a symbol. This means that it will be saved into the library and can be used again at any time. In the pop-up box that appears name the symbol ‘Circle’ and choose the graphic type.

Next on the mask layer insert a keyframe at 60 on the timeline. Right click on the mask layer under 60 on the timeline and choose Insert Keyframe from the menu.



Keep the 60th frame selected and click on the circle. Go to the menu bar and select Modify > Transform > Scale, then drag out the circle so that it covers the whole image as follows:



To get this shape to mask the image click the first frame of the mask layer and in the properties at the bottom of the screen select motion from the tween options.



After the motion tween is set right-click the mask layer in the layer panel and select ‘Mask’ from the menu. The image is now masked and is revealed as the circle gets bigger.

Press Ctrl+Enter to view your animation in a new screen. It should look something like the animation below:

Macromedia Flash 8 Morphing Tutorial

Software: Macromedia Flash 8
Subject: Morphing Animation Technique
Difficulty: Easy

This tutorial will guide you through making an animation which will gradually change one shape into another by using the morphing technique. Using this function in Flash allows you to morph 2 images easily and with minimal effort.

To begin, open Macromedia Flash and begin a new Flash document.



You will be presented with a blank new document. From this screen you will be able to do everything needed to create a morphing animation.

Firstly, select the rectangle tool from the tool menu on left of the screen:



The next step is to create a square on the animation canvas in the centre of the screen. The canvas is where all the animation happens. Once you have selected the rectangle tool alter the colour properties at the bottom of the screen. Choose the pencil colour and choose no colour in the top right of the selection window (circled in the below screenshot). Underneath the pencil colour you can choose a fill colour of your choice. For the tutorial I have chosen to use blue.



Now move your cursor to the canvas, hold down shift, which ensures you create a perfect square, and click-and-drag to create a square on the canvas. You should now have a square on the canvas.

Next you must create a blank keyframe somewhere on the timeline. To do this you must first look for the timeline at the top of the screen. Then right click under 20, or a frame of your choice, and choose to ‘Insert Blank Keyframe’ from the list which appears. This creates the frames which Flash will use in the morphing process.



Once the blank keyframe has been added to the timeline the canvas will go blank. You now need to create the second shape which the square will morph into.

Use the oval tool located next to the rectangle tool which you used previously to create a circle. Ensure that you alter the properties again so that the pencil has no colour and choose a fill colour of your choice. For the tutorial I have chosen to make a green circle.

Hold down shift, to ensure you create a perfect circle, and click-and-drag a circle in the same place on the canvas as you created your square. You should now have something which looks like this:



You now have both shapes which are going to morph. In order to get them to morph you must utilise the morphing technique. To do this, click on the timeline anywhere between the first and last frame and then go to the properties box at the bottom of the screen. Open the drop-down box labelled ‘Tween’ and choose the ‘Shape’ option.



You will now have an animation in which a square morphs into a circle. Press Ctrl+Enter to view your animation in a new screen. It should look something like the animation below:



You could expand this by following these steps to make the circle morph back into the original square or another shape.

Aims

This blog aims to provide people with simple to follow tutorials for various programs which I currently use or am hoping to use in the future.

Having followed a few online tutorials myself I know that sometimes they are not always easy to follow or very accurate. I hope to make my tutorials as simple to follow as possible and allow people with very little experience with the programs to be able to understand what to do.

If there are any software programs or techniques you need an easy to follow tutorial for please leave a comment and let me know what you need and I will attempt to create a tutorial for you.