Image Transitions Tutorial

[Warangel]

Image Transitions

This tutorial is based on the effect seen at http://www.yulia-nau.de/splash.htm, an awesome DJ site.

The source file for this tutorial can be downloaded at http://www.flashgoddess.com/tutorials/ImageTransition.fla


Many people have asked me “How did they do that image transition thing?”. Well, the answer is surprising simple. It is a movieclip. And depending on the x position of the mouse, it plays a certain frame of that movieclip. Really straightforward. But there is more to it than that.

The button positions on that site also control it. And how did they do those cool transition effects? And how does it know when to play automatically? Well, I will explain all these things right now.

Step 1:

In Photoshop, open the image you want to work with. Then goto Filters --> Motion Blur, and set a value of 100. Make sure it is a left/right motion blur. Save this as a different image. Make sure you optimize both images for the Internet by choosing the Save for Web option from the File menu.

Step 2:

Now open Flash. Import your two images. Make them both graphic symbols. Great. Now create a new Movie Clip (MC), and put both those graphic symbols in it, on different layers, the blurred image above the clear image. Create ten frames. Create a keyframe in frame 10 on the blurred image layer. Make frames 1 – 10 on this layer a motion tween. Select the blurred image in frame 10. Set it’s alpha to 1%. I always use 1% and 99%, coz 0 and 100 coz images to jump in Flash. You will see what I mean. Anyway, if you play that now, you will see that your image blurs in. That’s it. To have it blur out, do the same thing, but in reverse.

So create a whole bunch of those sequences. As you can see on that DJ site, their crew is very talented. I created a simple 3D female to use, as I am not going to even try to attain their level of skill. I am the guy that makes things work. Nothing more.

Step 3:

Now we need to setup the MC, so it will play a specified frame, dependant on the X position of our mouse. X is the horizontal position. The following code does all that. It also uses EnterFrame to constantly run this routine while the MC exists.




Here we go:

onClipEvent (load)
{
/* ready = true is here to make the MC play. You can get rid of it if you need to control the MC another way. */
ready = true;
function autoPlay(t)
{
time = 0;
auto = true;
target = t;
steps = 200;
autoSteps = 5;
} // End of the function
f = 50;
steps = 200;
target = 100;
auto = true;
autoSteps = 10;
pause = false;
}

onClipEvent (enterFrame)
{
if (pause != true)
{
if (auto != true && ready == true)
{
if (_parent._ymouse < 310)
{
newF = _parent._xmouse;
} // end if
if (newF > 580)
{
newF = 580;
}
else if (newF < 1)
{
newF = 1;
} // end if
f = f + (newF - f) / steps;
gotoAndStop(Math.round(f))
if (steps > 3)
{
steps = steps - 1;
} // end if
}
else
{
time++;
if (time > 70 && steps > 3 && ready == true)
{
auto = false;
steps = steps - 1;
} // end if
newF = target;
f = f + (target - f) / autoSteps;
gotoAndStop(Math.round(f))
} // end if
} // end if
}

Now, there is some extra stuff in here that we don’t need for this to work right now. You will also notice in the sample file, that I don’t have any code attached to my MC until frame 41. This frame is just an arbitrary number I chose. I wanted my MC to play by itself for a bit before the code took over.

In the above code, I have set up all the variables we will need for interacting with buttons that control the playback of this MC as well. Auto, Ready, and Pause are all used to determine if you are off the MC, or over a button, and what to do to the MC’s playback position accordingly. I will leave that for you to figure out ! Just remember that in the onLoad event, you will need to get rid of the ready = true if you are going to use another method of telling the code that it is ready to start playing the cycle.

That’s it! Just that one spot for code. Of course you have to stop your main movie on frame 41 if you chose to use the same as the source file. But it is all contained in that one convenient spot for your editing pleasure. Enjoy.
_________________
Marcus J. Dickinson
I believe

* do NOT private message me your questions please. Post them on the board, so that all may benefit. Thank you.

[fabolous]

good tutorial warangel!

[barracuda]

alright war!!! i love this stuff!! you have a very good writing style, nice and conversational for tutorials.
_________________
barraCUDA

[Warangel]

Thanks Cuda
_________________
Marcus J. Dickinson
I believe

* do NOT private message me your questions please. Post them on the board, so that all may benefit. Thank you.

[Mystique]

I'm always amazed on your ability to dissect a web site.. excellent job.
_________________

[Flash Goddess]

You're my hero!
_________________
:: FAQ :: Search :: Books :: Tutorials ::
www.FlashGoddess.com :: inspire :: create ::

[Terry]

Hi I've just looked at the image transistion tutorial and would love to try it out , can you tell me will this work in flash 4, I've download the file but it keeps erroring flash 4,

Cheers Terry

[Warangel]

No, I am afraid this tutorial was built using Flash 5 functionality.
_________________
Marcus J. Dickinson
I believe

* do NOT private message me your questions please. Post them on the board, so that all may benefit. Thank you.

[Terry]

Guess I'll have to shell out on the latest version then, or maybe it could be done in Swish version 2 what do you think?

[dolcezza]

I am unable to downlad the fla using this link, can anyone help?

[Warangel]

Hopefully Kristin or Ann Marie will see this and help you out. If not, I can send you the original FLA.
_________________
Marcus J. Dickinson
I believe

* do NOT private message me your questions please. Post them on the board, so that all may benefit. Thank you.

[Flash Goddess]

[tsak021]

In the photos section. Is their a source file for the menu that you use to scroll through the photos?