In this tutorial I will show you how to create a slick sliding effect that
reveals an image while covering another one.
As is shown in the example below, this slideover is done with easing. Move
your mouse over the movie and see how the imaginary line between the two images
is slowing down as it approaches your mouse.
Placing the elements on stage
1. Open a new flash document. Open the Document Properties
dialog by pressing CTRL+J. Set the dimensions to 420 by 320
pixels. Set the frame rate to 24 fps.
2. Call the layer you're now working in image
frame.
3. Select any color you like and draw a borderless rectangle
on stage. Make the rectangle's dimensions equal to the stage dimensions. Then,
center the rectangle on stage vertically and horizontally.
Do this by selecting the rectangle, turning on the "To stage" button in the
Align panel, and then pressing the buttons as shown in the image below.
4. Draw a rectangle near the existing one, but use a
different fill color (the images below are zoomed out screenshots of the
workspace - don't let the size confuse you).
5. Select this new rectangle and make its dimensions 400 by
300 pixels in the Properties panel.
6. Center this rectangle on stage vertically and
horizontally.
7. Now, click anywhere outside the stage to deselect this
shape, then select it again and delete it. You should be left with a 20 pix
frame on the stage.
8. Lock this layer. Before proceeding, download
the pictures for this project. Unzip this file, you will find two images
inside. Place them somewhere you will find them quickly.
Create a new layer and call it image 1. Pull this layer below the
image frame layer.
9. Select File > Import > Import to
Library and find the pictures you just downloaded. Select both images
(image01.jpg and image02.jpg) and click Open.
10. Open the Library (Window > Library) and you'll find
the images there. Drag the image01.jpg from Library and drop it over
the stage. It will land in the image 1 layer.
Center the image on stage vertically and horizontally via the Align panel.
Lock this layer.
11. Create a new layer between the existing ones and call it
image 2 (how imaginative, huh?).
12. Drag image02.jpg from the library into this
layer. Do the same thing as you did with the previous one: Center it on stage in
both directions.
Lock this layer.
Now you have two pictures in two layers. The frame is in place too. You will
now proceed to create a mask which, in conjuction with some actionscript code,
will bring about the desired effect.
Creating the mask movie clip
13. Make a new layer between the layersimage
2 and image frame. Give this layer the name mask. Or
Zorro, if you like.
14. Draw a 400 by 300 pixel rectangle on stage. It is
important that its width be 400 pixels, but you can adjust its height at 302 or
304 pixels, if you like.
Center this rectangle vertically.
15. Now, you should position this rectangle horizontally so
that its right edge is aligned with the images' left edge.
I've hidden the blue frame and also made an image where the frame has its
alpha lowered, so that you can more easily see what I mean. The images below are
zoomed in. If you placed the rectangle correctly, its X coordinate should be
-390.
16. Convert the rectangle to a movie clip
(F8). In the Properties panel, give it the instance name
imageMask.
17. Lock this (mask) layer. Right-click on it and
select Mask. Now, this layer will mask the one below it.
Creating the easing mask effect with ActionScript
The first image is always visible. The second one isn't visible now, because
it is masked, and its mask is positioned outside the stage. You can see this if
you test your movie.
So, the second image will begin to emerge once the mask begins moving across
it. You will enable the mask to follow the mouse in a moment, with a little
actionscript.
18. Create a new layer on top of all the others. Call it
actions. Lock it.
Click on its first keyframe and select Window >
Actions.
20. Test your movie and you should see the second image
begin to appear when you move your mouse over the movie.
Now, let me explain you how this code works.
The code behind the mask movement
In the first line,
speed = 14;
you create the variable speed which will be used later to
determine the speed of the mask following the mouse. The lower the number, the
faster the mask will move. Try entering 6, for example, and you'll see the
difference!
Next comes the onEnterFrame event which runs all the time during
which it tracks the position of the mask in relation to the mouse.
This onEnterFrame event is assigned to the imageMask
movie clip, although it could have been assigned to the _root
timeline as well. It is a matter of your choice, do what suits you best. Just
keep the paths correct!
OK. I've bolded the base if / else if / else statements so that
you can easily see the main conditions that are being evaluated while the
onEnterFrame event is running.
tells what must be executed in the case the mask is to the left side of the
mouse. That is, if it's right edge is left of the mouse. Take a closer look at
the condition between the parentheses that is being evaluated.
It says that if the value of mask's width (this._width) added to
the current X coordinate of the mask (this._x) is lesser than the
current mouse position (_xmouse), then the actions between the
curly braces will be executed. The picture below explains that clearly.
The diagram above explains the situation at the beginning - when the mask is
at its starting position. Don't let that confuse you - the following explanation
can be applied to any situation where the imageMask movie clip is left
of the mouse.
So, the imageMask's horizontal position is, let's say, -390. The
movie clip's width is constant, it is 400 pixels. Applied to actionscript, it
means this:
if ((this._width + this._x) < _xmouse) {
if ((400 + (-390)) < _xmouse) {
if (10 < _xmouse) {
So the result 10 is exactly what you want. It is the position of the
imageMask's right edge. And if this value is lesser than the current
horizontal position of the mouse (_xmouse), the actions between the
curly braces get executed.
Before I explain you what is going on between those curly braces (they are in
love), let's first quickly see what the other conditions are implying.
The second one,
} else if ((this._width+this._x) > _xmouse) {
is similar to the previous one. What it basically says is that if the
imageMask's right edge horizontal is greater than that of the mouse,
the code code following it will be executed.
And what does that else mean? It means when the first two
conditions haven't been met. And those conditions, in their respective order,
say: 1. when the mask's right edge is to the left of the mouse and 2. when this
edge is right of the mouse. So, what is left is the case when the edge's
horizontal position coincides with that of the mouse. That means when their X
position is exactly the same.
} else {
Ok? Let's get back to the first condition - when the mask is "behind" the
mouse and not "in front" of it. Then the following code gets excuted:
And here is another if statement. It says that if the distance
of the mask's right edge (again, the edge's X coordinate is
calculated by adding: this._width + this._x) to the mouse is
lesser or equal to zero point eight pixels (0.8),
(this._width + this._x >= _xmouse - 0.8)
the mask's right edge position will be made to match the position of the
mouse.
this._x = _xmouse - this._width;
Why? Here's the explanation: the next line says that in all other cases (when
the distance between the mask and the mouse is bigger then 0.8 pixels),
} else {
the _x position of the mask will be increased constantly.
This increase is done in the following way: the += operator means that
whatever number is found on the right side of that statement, should be added to
the value on the left side. That basically makes the mask closer to the mouse
each time the onEnterFrame event is fired.
The first if (remember the distance of 0.8 pixels) is there to
watch out that this "getting closer" doesn't stretch forever. Because,
mathematically, it could. It goes like this:
Imagine that this._x is, for example, currently at -200, and the
_xmouse at 300. So,
See now, the smaller the value of speed is (it's 14 in this
example), the bigger the number will result at the right side, so that
this._x will in turn become bigger also.
The distance between the mask and the mouse will always diminish, but the
mask will never actually reach the mouse. That's why there is the
if at the beginning.
The second condition (else if) has inside its curly braces a
similar mechanism, which moves the mask in the left direction.
The last else makes sure that the mask stays put if its
horizontal position is the same as the mouse's.
Imagination has no limits
This simple effect can yield some great results. Consider having the same
image in black and white, and color. The slide looks smooth then. Or one that is
sharp and the other blurred. Or mirror pictures, day and night... the
possibilities are endless. Let your imagination run wild.
But the single most stunning use of this effect I have seen so far is shown
on Wonderbra's site. Note
that it takes long for it to load - if you have a slow connection you will wait
a bit. After the intro animation, you'll see the effects selection scene.
It is mind-bending! Sure, if you put beautiful young ladies wearing only
underwear on a site, that will look good in majority of the cases. But the point
is in the interaction - it makes the user see the actual use of the bra, both
with and without the dress. There's nothing that has to be explained - it is
self-explanatory.
REMEMBER Simplicity always works.
Below you can download the source files for both examples.
