Flash 5.0 ActionScript Special-Effect (Optic Infusion Slideshow) - Page 2
The main idea behind the effectAn 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
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|
Rating: 8 Votes: 54
|Download the files used in this tutorial.|
|Download (720 kb)|
|More help? Search our boards for quick answers!|