First time here? First time here? Newsletter Signup Newsletter
Search tutorials
Author: Paul Price | Website: http://www.chapterzero.org

The main idea behind the effect

An MC with a picture per frame is created. This clip is placed into another clip that has a rectangular mask on it. The masked MC is duplicated on the stage. The duplicated masked MC has functions on it that manipulate its scale and position during the pic-clip's transition from picture to picture. The buttons on the stage tell a variable on the main timeline to tell the picture MC to move forward or backward, producing a slideshow-like presentation. I have included a show border button for teaching purposes because it is difficult to visualize the position and scale of the masked MC without it. The border is NOT a part of the effect. Unfortunately, it causes a minor performance hit because Flash wants to alias the lines. This is why the pictures in picture MC should be rasterized graphics, NOT Flash vector graphics. Flash will automatically try to alias vectors causing the movie to run slowly.

The MC setup

Pic Clip

Make an MC called "PIC CLIP" (F8 is the shortcut to insert a symbol). Import your pictures into the PIC CLIP. If you have named them in sequence Flash will ask if you want to import them all. If this happens, click yes. Flash will place the pictures in your MC. All you have to do is center-align them and place them on individual frames. If you didn't name your pictures sequentially, then create several blank keyframes by selecting some frames, then going to Modify>Frames>Convert to blank keyframes. Now drag in the pictures for your slideshow. Make sure that the largest picture of your slideshow is on the first the frame. Use the Align tool to center-align each picture to the stage. Delete any extra blank keyframes by selecting them and then hitting Ctrl+Alt+x. Regardless of how you got your pictures into Flash, you must now add an "actions" layer to your PIC CLIP. On the first frame of this "actions" layer place a stop() action. Drag this layer above the pic layer for convenience. To recap, you should have two layers for your PIC CLIP: the first has your stop action, the second has your center-aligned pictures with one picture per frame.

Masked Pics Clip

Go back to the main timeline. Make an MC called "MASKED PICS" (F8). Add three layers to this MASKED PICS MC. On the first layer place a stop() action. On the second layer use the rectangle tool to draw a rectangle. Delete the border of the rectangle by double clicking it and hitting delete or select no border before you draw the rectangle. Once the border is deleted, select the rectangle, bring up the INFO panel, set the rectangle's width to 105 and its height to 65. While you have the INFO panel up, set the rectangle's X: 50 and Y: 30. I will talk about why we chose these coordinates later. On the third layer drag an instance of your PIC CLIP. Now name this clip's instance "pictures". Use the Info Panel to set the PIC CLIP X:200 and Y:100. Once you've done that, make the second layer (the one with rectangle) a mask by right clicking or control clicking and selecting mask from the contextual menu. This should create a rectangular mask for the PIC CLIP. Your MASKED PICS MC is finished.

» Level Intermediate

Added: 2001-12-17
Rating: 8 Votes: 54
(10 being the highest)
» Author
I am a subversive writer by profession/trade. My first book, The Real Work, is about street cons. I got interested in web design by accident. I just wanted to learn how to make a site to promote my book, but I ended up learning (D)HTML, JavaScript, and Flash 5.0 ActionScript by accident.
» Download
Download the files used in this tutorial.
» Forums
More help? Search our boards for quick answers!


  • There are no comments yet. Be the first to comment!

  • You must have javascript enabled in order to post comments.

Leave a Comment
  • Your email address will not be published. All fields are required.
Featured Flash FLA
» Author: Inocreato
» Title: RaiseTheBlocks
» Description: Raise all the blocks to win the game
Featured Sound Loops
Image for equalize

Audio Player

» Author: TomCat Carty
» Title: The Wood
» Description: Just a little game ending or it can maybe be looped. Recorders with music box and percussion to give the feel of well, I don't know, the woods? Free to use, just credit me. thank you
Latest Font
» Author: Fábio FAFERS
» Description: I created this font for free use. Everyone can apply it in personal or business texts. Its free, but I want to be communicated in case of business use. Donations are accepted to keep the project of free fonts alive! Thank you all
Featured Sound Fx
Image for equalize

Audio Player

» Author: Davisigner
» Description: Hmm... what to say about this one? It's reminiscent of the closing notes of the opening music from the Three Stooges done in a church organ style with a closing cymbal crash. I'll give this one away gratis, but feel free to check out my free loops and potential upcoming license-mandated ones over in the respective part of Flashkit.