Here the final result:
3 images (in this case 550×400, images available in the tutorial zip file)
Note: The screenshots in this tutorial are made in Flash CS3. It works exactly the same in Flash 8 or Flash CS4. This tutorial is ActionScript 2 (although no ActionScript is required).
Rename the already existing layer to “img01″. Create to more layer and name them “img02″ and “transition01″. Again the naming is only for a better overview. You can choose other names if you want.
Drag the first two image Movieclips from the library to the respective layer.
Click in the first frame of the layer “transition01″. Drag the TV Fuzz Effect component from your library onto the stage. The component will automatically snap to the upper left corner of your Movieclip.
For every layer click on frame 50 and create a frame [press F5] or right click and “Insert Frame”.
It’s important to give the image Movieclips instance names, otherwise the effect component is unable to detect them. Click on the image Movieclip one-by-one and set an instance names, in this case “image01″ and “image02″ (you can choose a different name if you want).
Click the TV Fuzz Effect on stage and open the component inspector panel [press SHIFT-F7] or “Window” -> “Component Inspector”. All Movieclips with instance names in this frame are listed in the “Start Movieclip” and “End Movieclip” select list. Choose “image01″ as “Start Movieclip” and “image02″ as “End Movieclip”.
Export the flash movie [press Ctrl-ENTER] or “Command” -> “Test Movie”. The transition is going from the first image to the second.
On every layer click on frame 51 (one frame after the previous transition has ended) and insert a keyframes [press F6] or right click and “Insert Frame”.
We will reuse the second image Movieclip, since the second transition should start with it. Click the just created keyframe on the layer “img03″ and drag the Movieclip “image02″ from the library onto the stage. Click the just created keyframe on layer “img04″ and drag the Movieclip “image03″ from library onto the stage.
Now set the instance names of this image Movieclips to “image03″ and “image04″.
It’s a bit confusing to set layer and instance names one number up then the original Movieclip name. But for better overview and to keep the number of potential errors low, it’s better to treat the Movieclips of the second transition as completely new Movieclips.
Select the layer “transition02″ and drag the effect component from your library onto the stage. Again, the component will snap automatically.
Click the component on stage, open the component inspector panel and select “image03″ as “Start Movieclip” and “image04″ as “End Movieclip”.
For the new three layer create a frame at frame 100 [press F5] or right click and “Insert Frame”.
When you export your flash movie now, you see that both transition are shown before the movie is lopped.
Now select the whole block of the second transition (you can so that by clicking frame 51 of “transition01″ and with pressed SHIFT Key clicking frame 100 of “img04″) and move the hole block to frame 81.
You can do the same for the second transition.
You can also download the TV Fuzz Effect here.
Here you can find a video tutorial of how to implement a different effect.
Requirements
Flash 8, Flash CS3 or Flash CS4.3 images (in this case 550×400, images available in the tutorial zip file)
Note: The screenshots in this tutorial are made in Flash CS3. It works exactly the same in Flash 8 or Flash CS4. This tutorial is ActionScript 2 (although no ActionScript is required).
Step 1 – Install the effect component
Download the TV Fuzz Effect here. Please follow the installation instructions and drag the component from the component panel into the library of your .fla file.
Step 2 – Import images
Import all three images “File” -> “Import” -> “Import into Library…”.
Step 3 – Convert images into Movieclip
Create a new Movieclip [press Ctrl-F8] or “Insert” -> “New Symbol…”, name it “image01″ and put the first image in the first frame of this Movieclip. Repeat this step for the other images, name those Movieclips “image02″ and “image03″. BTW, the naming is up to you.
Step 4 – Create first transition
Now click on “Scene 1″ to get back to the main timeline.
Rename the already existing layer to “img01″. Create to more layer and name them “img02″ and “transition01″. Again the naming is only for a better overview. You can choose other names if you want.
Drag the first two image Movieclips from the library to the respective layer.
Click in the first frame of the layer “transition01″. Drag the TV Fuzz Effect component from your library onto the stage. The component will automatically snap to the upper left corner of your Movieclip.
For every layer click on frame 50 and create a frame [press F5] or right click and “Insert Frame”.
It’s important to give the image Movieclips instance names, otherwise the effect component is unable to detect them. Click on the image Movieclip one-by-one and set an instance names, in this case “image01″ and “image02″ (you can choose a different name if you want).
Click the TV Fuzz Effect on stage and open the component inspector panel [press SHIFT-F7] or “Window” -> “Component Inspector”. All Movieclips with instance names in this frame are listed in the “Start Movieclip” and “End Movieclip” select list. Choose “image01″ as “Start Movieclip” and “image02″ as “End Movieclip”.
Export the flash movie [press Ctrl-ENTER] or “Command” -> “Test Movie”. The transition is going from the first image to the second.
Step 5 – Add second transition
Create three more layer and name them “img03″, “img04″ and “transition02″.
On every layer click on frame 51 (one frame after the previous transition has ended) and insert a keyframes [press F6] or right click and “Insert Frame”.
We will reuse the second image Movieclip, since the second transition should start with it. Click the just created keyframe on the layer “img03″ and drag the Movieclip “image02″ from the library onto the stage. Click the just created keyframe on layer “img04″ and drag the Movieclip “image03″ from library onto the stage.
Now set the instance names of this image Movieclips to “image03″ and “image04″.
It’s a bit confusing to set layer and instance names one number up then the original Movieclip name. But for better overview and to keep the number of potential errors low, it’s better to treat the Movieclips of the second transition as completely new Movieclips.
Select the layer “transition02″ and drag the effect component from your library onto the stage. Again, the component will snap automatically.
Click the component on stage, open the component inspector panel and select “image03″ as “Start Movieclip” and “image04″ as “End Movieclip”.
For the new three layer create a frame at frame 100 [press F5] or right click and “Insert Frame”.
When you export your flash movie now, you see that both transition are shown before the movie is lopped.
Step 6 – Add pause between both image transitions
To have a little bit more time between the transitions leave the keyframes of layer “img01″ and “transition01″ untouched. Extend the length of the layer “img02″ (the image which the transition ends with) by adding a frame in frame 80 [press F5] or right click and “Insert Frame”.
Now select the whole block of the second transition (you can so that by clicking frame 51 of “transition01″ and with pressed SHIFT Key clicking frame 100 of “img04″) and move the hole block to frame 81.
You can do the same for the second transition.
Download
Click here to download the .fla of this tutorial. Note: The .fla includes the trial version of the effect component, which will only work in the Flash IDE (Flash 8, Flash CS3 or Flash CS4) but not inside the browser.You can also download the TV Fuzz Effect here.
Here you can find a video tutorial of how to implement a different effect.
No comments:
Post a Comment