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 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.
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.
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.
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.
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.
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.
Download the zipped source FLA file.
Download the source for the example with the logo and the loader.
how would you make this 2 sided so there’s a fixed panel that follows the mouse and slides over a still image? like if i wanted to make something like an xray scanner or something
m: Easy, just replace one of the photos with a ‘panel’ or something like an ‘x-ray’.
I’m new to flash and used the other versions, know I have cs3 prof 9 and I can’t open a flash document as before it’s either action script 2 or 3. I would like to know how to make an automatic scrolling movie, endless looping movie, or whatever yor call them, that does not have to follow the mouse. For example I would like to have different photos attatched to each other and that they would continuously repeat. Could you please help me out ? Thanks in advance.
Regards,
Enriqueta
Hi, This is a great tutorial except that I work primarily in Actionscript 3.0. Do you have the code in this tutorial updated for 3.0 by chance? thanks!
Laura
Thanks so much for this, and your detailed explanation. This goes very well with before/after images.
Hey thanks for the tutorial its great.. I would like to know how can I make this.. Using the action script that you post, after its done “cleaning” or showing the back image, how can i make that it doesnt work more, i mean that dont make the masking again and jump to another frame with other animation. Please let me know and thanks a lot
Great Tut. Is there any way to make the slideshow keep playing (meaning sliding back and forth horizontally) in addition to following the mouse. In other words when the mouse is off the image how do I keep the slideshow moving as well, similar to this example: https://www.dermitage.com/index.html?s=bfc650310c8e48e2af8e48304baca4b7&nopop=all&SUBID=49401648;37076832
thank you.
Mars
hello
great apps and very usefull for me
but I try to force the mask to appear in the midel of the stage at the biguining but I dont know how
thank’s for your help
Here is the code in AS3…
var speed:Number = 10;
imageMask.addEventListener(Event.ENTER_FRAME,entrandonoframe);
function entrandonoframe(event:Event):void
{
trace(imageMask.name);
if ((imageMask.width + imageMask.x) = (mouseX – 0.8))
{
imageMask.x = mouseX – imageMask.width;
}
else
{
imageMask.x += (mouseX – (imageMask.width + imageMask.x)) / speed;
}
}
else if ((imageMask.width+imageMask.x) > mouseX)
{
if ((imageMask.width + imageMask.x) <= mouseX + 0.8)
{
imageMask.x = mouseX – imageMask.width;
}
else
{
imageMask.x -= ((imageMask.width + imageMask.x) – mouseX) / speed;
}
}
else
{
imageMask.x = mouseX – imageMask.width;
}
}
Thanks for the example!!!
Cool!
But why does it give me such output ? I am pretty new here
Thank you
**Error** Scene=Scene 1, layer=actions, frame=1:Line 4: ‘)’ expected
if (this._width + this._x >= _xmouse – 0.8) {
**Error** Scene=Scene 1, layer=actions, frame=1:Line 5: Syntax error.
this._x = _xmouse – this._width;
**Error** Scene=Scene 1, layer=actions, frame=1:Line 7: ‘)’ expected
this._x += (_xmouse – (this._width + this._x)) / speed;
**Error** Scene=Scene 1, layer=actions, frame=1:Line 8: Unexpected ‘}’ encountered
}
Total ActionScript Errors: 4 Reported Errors: 4
Hi, very new to flash, but love this script! I want to use as an “x-ray” type effect. I changed the size of the mask to a small square, but this just still travels horizontally!
How do I make this box (mask) follow the mouse in “all” directions for an X-Ray effect? Just different Action Code?
Thanks Very Much!
[…] Sliding image mask with easing | Flash Explained Oct 14, 2008 … With this tutorial you will learn to make a sliding … Now you have two pictures in two layers. … […]
I am using flash cs3 so wen i run my programe den compiler show 11eror plz send me cs3 coding or action script 3 colding.
Thank you
**Error** Scene=Scene 1, layer=actions, frame=1:Line 4: ‘)’ expected
if (this._width + this._x >= _xmouse – 0.8) {
**Error** Scene=Scene 1, layer=actions, frame=1:Line 5: Syntax error.
this._x = _xmouse – this._width;
**Error** Scene=Scene 1, layer=actions, frame=1:Line 7: ‘)’ expected
this._x += (_xmouse – (this._width + this._x)) / speed;
**Error** Scene=Scene 1, layer=actions, frame=1:Line 8: Unexpected ‘}’ encountered
}
wat am i suppose to do???
It’s a shame you don’t have a donate button! I’d most certainly donate to this outstanding blog! I suppose for now i’ll settle for book-marking and adding your RSS feed to my Google account.
I look forward to fresh updates and will talk about this blog
with my Facebook group. Chat soon!