Please support lukamaras.com website:
All my tutorials are free, while hosting costs money.
The most viewed tutorials in April:
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.
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.
13. Make a new layer between the layers image 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.
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.
19. Enter this code into the actionscript panel:
speed = 14;
imageMask.onEnterFrame = function() {
if ((this._width + this._x) < _xmouse) {
if (this._width + this._x >= _xmouse - 0.8) {
this._x = _xmouse - this._width;
} else {
this._x += (_xmouse - (this._width + this._x)) / speed;
}
} else if ((this._width+this._x) > _xmouse) {
if ((this._width + this._x) <= _xmouse + 0.8) {
this._x = _xmouse - this._width;
} else {
this._x -= ((this._width + this._x) - _xmouse) / speed;
}
} else {
this._x = _xmouse - this._width;
}
};
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.
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.
imageMask.onEnterFrame = function() {
if ((this._width + this._x) < _xmouse) {
if (this._width + this._x >= _xmouse - 0.8) {
this._x = _xmouse - this._width;
} else {
this._x += (_xmouse - (this._width + this._x)) / speed;
}
} else if ((this._width+this._x) > _xmouse) {
if ((this._width + this._x) <= _xmouse + 0.8) {
this._x = _xmouse - this._width;
} else {
this._x -= ((this._width + this._x) - _xmouse) / speed;
}
} else {
this._x = _xmouse - this._width;
}
};
The first one,
if ((this._width + this._x) < _xmouse) {
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:
if (this._width + this._x >= _xmouse - 0.8) {
this._x = _xmouse - this._width;
} else {
this._x += (_xmouse - (this._width + this._x)) / speed;
}
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._x += (_xmouse - (this._width + this._x)) / speed;
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,
this._x += (_xmouse - (this._width + this._x)) / speed;
this._x += (300 - (400 - 200)) / 14;
this._x += (300 - 200) / 14;
this._x += 100 / 14;
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.
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.
Download the zipped source FLA file.
Download the source for the example with the logo and the loader.
If you have found this tutorial useful, please consider donating to support lukamaras.com.
Got any comments or questions? Want to add something but don't know how? Discuss it in the forum!
