Macworld Masterclass: Animate masks in Flash CS5

Macworld Masterclass: Animate masks in Flash CS5

Create zoom and light effects or sophisticated transitions when creating animations within Flash CS5

by


X

Email this to a friend

Characters remaining:

  • 1. New document 1
  • 2. Layer on layer 2
  • 3. The mask itself 3
  • 4. Convert to Symbol 4
  • 5. Perfect timing 5
  • 6. Animate it 6
  • 7. Mask it 7
  • 8. Hard edges 8
  • 9. Symbol editing 9
  • 10. Gradient editing 10
  • 11. Instance names 11
  • 12. The code 12
  • 13. Tweaks 13
  • 14. More please 14
Next Prev

Step 1 of 14: 1. New document

Create a new ActionScript 3.0 document via the Welcome Screen. The mask must be on a layer above the layer containing the contents it will mask. By default, a layer named Layer 1 will have been created in the Timeline. Double-click on the layer name, and rename it Image.

Next Prev slideshow image

Create a new ActionScript 3.0 document via the Welcome Screen. The mask must be on a layer above the layer containing the contents it will mask. By default, a layer named Layer 1 will have been created in the Timeline. Double-click on the layer name, and rename it Image.

Step 2 of 14: 2. Layer on layer

Import an image onto the layer (File > Import > Import to Stage), and choose an image you want to import. Click on the New Layer button at the bottom left of the Timeline to create a new layer, and rename the layer Mask. The mask layer will be placed above the image layer.

Step 3 of 14: 3. The mask itself

To create your mask select the Oval Tool in the Tools bar, hold down the Shift key and draw a circle on the left side of the Stage (document). Holding down the Shift key while you draw will ensure it’s a perfect circle, which is important to make the effect work.

Step 4 of 14: 4. Convert to Symbol

Convert the circle and image to Movie Clip symbol. It’s not strictly necessary, but will allow you to easily animate the mask and soften its edge later. Right-click on the circle and choose: Convert to Symbol, make it a Movie Clip type and name it Mask. Do the same to the image and name it ColouredImage.

Step 5 of 14: 5. Perfect timing

Let’s make the animation last four seconds. Flash, by default, works at 24 frames per second, so that’s 96 frames (4 x 24). Select frame 96 for both layers in the Timeline, holding down Shift, then right-click on a selected frame and choose Insert Frame. Insert Frame keeps layer content visible.

Step 6 of 14: 6. Animate it

Right-click on the grey bar in the Mask layer and choose Create Motion Tween, so the Mask symbol can be animated. Move the red playhead to frame 96, and then move the Mask symbol with the Selection Tool to animate it; a dotted motion path will appear showing the path the symbol will follow.

Step 7 of 14: 7. Mask it

Right-click on the Mask layer (near the layer name) and choose Mask, from the menu. The image will appear inside the circular mask; outside the mask the white colour of the stage will be shown. Test the movie by going to Control > Test Movie > Test, to see the effect currently achieved. Then close the test window.

Step 8 of 14: 8. Hard edges

By default, masks do not support transparency in Flash, so masks with feathered/soft edges aren’t possible. But with a little bit of code and know-how, that can be changed. Let’s soften the edge of the mask to create a feathered effect. First, click on both padlocks in the Timeline to unlock the layers.

Step 9 of 14: 9. Symbol editing

Using the Selection Tool double-click on the Mask symbol. Double-clicking allows the original artwork inside the symbol to be edited. In the Color panel click on the Fill Color icon (paint bucket) and choose Radial gradient, from the drop-down menu.

Step 10 of 14: 10. Gradient editing

The mask will now have a gradient applied. In the Color panel double-click on both colour pointers on the colour bar at the bottom, and choose black. Click on the right colour pointer and set the Alpha to 0% (usually set to A: 100%), to make that black transparent. Move the colour pointers as shown above.

Step 11 of 14: 11. Instance names

Click on Scene 1 to come out of symbol editing mode. Select the Mask symbol. In the Properties Inspector give the symbol an instance name of mask_mc  Select the ColouredImage symbol, give it an instance name of colouredImage_mc. This allows symbols to be controlled using ActionScript code. Relock the layers.

Step 12 of 14: 12. The code

Select the Mask layer, then create a new layer called ‘Actions’, then right-click on frame 1, choose Actions and type the code shown in the Actions panel: colouredImage_mc.cacheAsBitmap = true; mask_mc.cacheAsBitmap = true; colouredImage_mc.mask = mask_mc; Test the movie to see the code working.

Step 13 of 14: 13. Tweaks

Try importing a darkened version of the image used, onto a new bottom layer to enhance the torch effect. Also try adjusting the mask animation too, by moving the playhead, then moving the mask symbol, and resizing it with the Free Transform Tool – remember you’ll need to unlock the layer first.

Step 14 of 14: 14. More please

By default, only the layer underneath the mask layer is masked. To mask more layers, select the layers you want to mask and then drag the layers up underneath the Mask layer or a currently masked layer.  An indicator will appear, then release the mouse. The additional layers will then be masked.

Comments

Comments

Market Place

synology.com

Founded in 2000, Synology is dedicated to developing high-performance, reliable, versatile, and environmentally-friendly Network Attached Storage (NAS) servers for home and business users. To see their full product portfolio visit

Nokia branding killed in place of 'Microsoft Lumia': Windows Phone moves into new era

Nokia branding killed in place of 'Microsoft Lumia': Windows Phone moves into new era

Why you shouldn't buy the iPad mini 3: No wonder Apple gave it 10 seconds of stage time

Why you shouldn't buy the iPad mini 3: No wonder Apple gave it 10 seconds of stage time

Halloween Photoshop tutorials: 13 masterclasses for horrifying art, designs and type

Halloween Photoshop tutorials: 13 masterclasses for horrifying art, designs and type

Should you update your iPhone or iPad to iOS 8? iOS 8.1 brings back Camera Roll, adds Apple Pay in US

Should you update your iPhone or iPad to iOS 8? iOS 8.1 brings back Camera Roll, adds Apple Pay in...

We use cookies to provide you with a better experience. If you continue to use this site, we'll assume you're happy with this. Alternatively, click here to find out how to manage these cookies

hide cookie message