Masks
Flash lets the content in one layer mask the content in the layer below.
This effect works in ActionScript 3 or 2
Create a simple static mask
- Create a new movie in ActionScript 3
- Select the stage
- Change the name of layer1 to background
- Put the cursor in keyframe 1 of the background layer
- Import an image into the movie stage, which also places it in the library
- Adjust the image to the dimensions of the movie or the FLA document to the size of the image
- If the image is larger than the FLA document, any overhang will not be part of the movie
Create a mask layer
- Create a new layer named mask
- Draw an image with the brush in keyframe 1 of the layer
- Rightclick on the mask layer
- Click Mask on the popup menu
- Flash locks the layers
- Click Control>Test Movie, and you should only see what is visible through the mask
Add text to the simple static mask:
- Click in keyframe 1 of the Mask Layer
- Click the lock to unlock it for editing
- Select the Type tool on the toolbar
- Open the Property inspector and change the Font Size to make it large
- Type some text on the same layer as the brush drawing.
- Click Modify>Break Apart to turn the text into a graphic.
- You may have to repeat the Modify>Break Apart a second time if you have typed more than one letter
- Click the lock on the Mask layer to see the effects
- NOTE: If you draw with the brush and type text on the layer before you create the mask, you may have to:
- Select the text and break it apart two times to turn it into a graphic
- Select the text and the brush drawing and group them (Ctrl+G)
or change them into a symbol
- The text and drawing may have to touch
Example of static mask
Animate the mask
- Change the contents of the mask layer to a movieclip symbol
- create a simple motion tween that changes its shape, alpha, and size from the beginning of the timeline to the end
- move the mask across the page if you like
Prepare the movieclip
- Unlock the mask layer by clicking on the lock
- Doubleclick on the contents of the mask layer to select it
- Click Modify>Convert to Symbol and make it a Movieclip symbol called animask
Insert keyframes in the last frames of the layers.
- Select the last frame in all three layers, and click F6 to make them keyframes
Change the appearance of the mask movieclip in keyframe 1
- Click in the first keyframe of the mask layer and select the animask symbol.
- Select the transform tool or click Modify>Transform
- Decrease the size of the symbol by dragging the handles on the transform outline
- Open the filters panel and select the blur filter
- Adjust the blur filter to make it very blurry
- Open the property inspector and reduce the alpha of the symbol so it almost fades away.
Add the tween
- Rightclick on the timeline in the mask layer between the keyframes
- Select Create Motion Tween on the popup menu
- Lock the Mask layer by clicking on the lock at the left of the timeline
Test Movie
- Click Control>Test Movie to see if the movie works.
- fix any problems
top
Publish the movie
- Click File>Publish Preview to create a web page with the HTML code to play the movie.
modify this HTML page & publish it
- open it up in Dreamweaver
- convert the page to XHTML 1.0 transitional (File>Convert>XHTML transitional 1.0) which will fix the opening tags and the script tags.
- Delete the <embed> tags within the <object> tags to make the HTML code XHTML valid.
- Save the HTML page
- View in the browser
- Test validation
- Be sure to upload the javascript file that Flash generates ("AC_RunActiveContent.js") into the same folder as the Flash SWF file so that it can be found when the page loads.
top
insert Flash movie into an existing page
- copy and paste the contents of the <script> and <noscript> tags into another web page that is XHTML valid.
- Delete the <embed> tags within the <object> tags to make the HTML code XHTML valid.
- Copy and paste the contents of the two script tags from the HTML page generated by Flash and insert them within the <head> tags
- <script language="JavaScript" type="text/javascript">AC_FL_RunContent = 0;</script>
<script src="AC_RunActiveContent.js" language="JavaScript" type="text/javascript"></script>
- You need to add the language and type attributes (as in the above examples) to the script tags to make them XHTML valid
- Be sure to upload the javascript file that Flash generates ("AC_RunActiveContent.js") into the same folder as the Flash SWF file so that it can be found when the buttons are pressed.
top
Another Animated Mask
- Create a new movie and save it.
- Modify>movie and change its dimensions to 200 pixels x 200 pixels
- Rename Layer 1 and call it Text Reveal
- Click in the keyframe 1 of the Text Reveal layer
- Select the Text tool on the Toolbar
- Open the Character Panel
- Change the Font Size 96
- Change the Font to Impact to make it thick
- Type 421 in Keyframe 1
- Click the cursor in Frame 55 of the Text Reveal layer and insert a frame (F6) to continue text to there.
Create the animated mask layer and animate it
- Go to the Text Reveal layer and insert a new layer and name it Circle
- Create a new graphic symbol named circle (Insert>Symbol), and draw a red circle in the Symbol Editing window
- Hold down the shift key while you draw the circle to be sure that it is round.
- Edit the Movie
- Click in Keyframe 1 of the Circle layer
- Drag the circle symbol from the Library onto the stage
- Modify its size to make it as tall as the text (Modify>Transform>Scale)
- Position the ball just to the left of the text, but not touching it -- part of it will be off the stage
Tween the mask
- Click F6 in frame 55 of the Circle layer to create a keyframe there
- Select the Arrow tool on the toolbar
- Hold down the shift key (to keep movement in a straight line)
- Drag the circle to the right of the text in keyframe 55 of the
Circle layer
- Right click in the layer between the two keyframes and select Motion Tweening
Create the masked effect
- Rightclick the Circle layer, which should be at the top of the layer stack
- Click Mask on the popup menu
- Control>test the movie to see it work
