Untitled Document

Mirror Magazine

Masks and bustling bubbles
(Flash 5 - Masking continued)
Promises are meant to be kept... so here is the little "exercise" I promised two weeks back that will (I hope) help you come to terms with the idea behind working with 'mask' layers and 'masked' layers in Flash 5. It will help if you actually try this out in Flash because I don't think just reading through this (or even learning it by-heart) would help.
First open a new movie and set the stage properties the way you want (you can do this by right-clicking on the stage area and selecting "Movie Properties"). Then customize the layout of the panel sets in a way that suits your needs. It is important that you become comfortable with your interface before you start work, because that will make life easy for you as you work with Flash.

You can start off by naming your first layer in the timeline. For this example you can call it "Mask" if you wish because that will simplify things as we move on. Now select the text tool and type "BUBBLES" on the stage. Use a heavy font like 'Impact' and make sure that you adjust the text size so that it covers about 75% of the stage area. Now add another layer, name it "Masked Layer" and then drag it under the first layer (you must do this in the Timeline). Now right-click on "Mask" layer and select 'Mask'. This will change the icon of "Mask" layer into a white circle with a purple arrow pointing downwards and the icon of "Masked Layer" into a purple circle with a white arrow pointing horizontally. You may see a "Lock" on your layer, but to make life easy for now, just "unlock" it by clicking once on the icon on the 'lock' column in the time line. You get this "Lock" in masking because the effect of the mask itself is visible only when you lock the particular layer, but remember that you need to unlock it in order to edit its contents.

Make the layer you named "Mask" invisible by clicking on the "eye" icon in the timeline corresponding to that layer. This will help you concentrate on the layer you are currently working on. Draw a circle and from the "Fill" panel, choose a 'radial gradient' that runs from dark blue to white. Apply this fill to the circle you just drew so that it looks like a drop of water or a soap bubble (you may delete the outline of the circle if you want to). Now select the circle and convert it into a graphic symbol by pressing F8 and give it the name "Bubble". Now drag the "Bubble" symbol onto the "Masked Layer". Resize them and distribute them evenly so that it looks like you are looking into a tank bustling with air bubbles.

Select all the bubbles and group them all by selecting Modify>Group (Ctrl+G). Animate the group of bubbles in an upward motion using 'motion tween'. You must be familiar with motion tween by now, but if I thought I'll just remind you the basics again. First go to the "Masked Layer" and create a key frame in frame number 10 by pressing F6. Then move the group of bubbles up by about two inches. Note that you can make sure that the movement is perfectly vertical (or horizontal) if you keep the 'Shift' key pressed while you move the object across the stage. Now right-click on any of the frames between the two key-frames in the "Masked Layer" and choose "Create Motion Tween". You may now click on the 'eye' symbol on your "Mask" layer to make it visible again but you may not see it in frame 10 because there may not be a key-frame there. So create a key-frame in frame number 10 in the "Mask" layer too. Now you can test your movie by pressing Ctrl+Enter or choosing Control>Test Movie.

You may be able to make out the word "BUBBLES" in the foreground as the bubbles move, but it may not bee too clear. If you want the word "BUBBLES" to be clearly visible, first create another layer underneath your "Masked Layer". Then got to your "Mask" layer and copy the word "BUBBLES". Now come back to the new layer you created (You can name it "Text" if you like, but make sure it is a normal layer by checking to see whether its icon is different from the others) and right-click on the stage and select "Paste in Place". This will paste a copy of the text object in the exact position as the source object.

Now your animation is ready to be published. Please write in if you still have problems with "Masking" in Flash, and I will do my best to help you out. So get out of your own masks and keep animating till next week. Good luck.

Back to Mirror Magazine