Summary

In this tutorial you will learn how to create a slideshow, which has a flicker / fuzz / broken TV transition between the images.

Here the final result:


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.

Drag component into library

Step 2 – Import images

Import all three images “File” -> “Import” -> “Import into Library…”.

Import images

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.

Create new Movieclip...

... name the Movieclip ...

... and drag the image on the timeline of the Movieclip

Library with Movieclips and images

Step 4 – Create first transition

Now click on “Scene 1″ to get back to the main timeline.

Go back to 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.

Rename layers

Drag the first two image Movieclips from the library to the respective layer.

Drag Movieclips on layers

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.

Drag component on layer

For every layer click on frame 50 and create a frame [press F5] or right click and “Insert Frame”.

Create frame...

... on all layers

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).

Set instance name of the first Movieclip

Set instance name of the second Movieclip

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”. 

Start Movieclip options

Transition settings

Export the flash movie [press Ctrl-ENTER] or “Command” -> “Test Movie”. The transition is going from the first image to the second.

Result

Step 5 – Add second transition

Create three more layer and name them “img03″, “img04″ and “transition02″.

Create more layer

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”.

Insert frame ...

... for all layers

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.

Drag Movieclips onto the created layers

Now set the instance names of this image Movieclips to “image03″ and “image04″.

Set instance name of the first image

Set instance name of the second image

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.

Drag component on stage

Click the component on stage, open the component inspector panel and select “image03″ as “Start Movieclip” and “image04″ as “End Movieclip”.

Settings inside the component inspector panel

For the new three layer create a frame at frame 100 [press F5] or right click and “Insert Frame”.

Insert frames in all three layers

When you export your flash movie now, you see that both transition are shown before the movie is lopped.

Result

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”.

Insert frame

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.

Select layers ...

... drag the block to frame 81 ...

and release it

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.