In this Flash 8 Pro tutorial, I will show you how simply it is to create an interactive image with camera blur/sharpen effects that appear as the user moves her mouse over it.
In this easy and comprehensive lesson, you will see how to:
- Use the Pen tool to create a precise mask,
- Make invisible buttons with custom shapes that cover specific parts of your image,
- Create a motion tween that uses the blending filters available in Flash 8 Pro,
- Make a slow or quick change of focus with ActionScript and a lot more.
Below is the finished example of what you are going to achieve at the end of this detailed tutorial. Move your mouse over the various parts of the picture to see the change of camera focus.
Nice effect! The photo is an interesting one - a car wreck in Zagreb.
Preparing the workspace
Before using the drawing tools, you'll first tweak some properties of your document and import the picture for this lesson.
1 Open a new Flash document.
2 Select Modify > Document to open the Document Properties window.
3 Change the Dimensions of your document (see 1 in the image below) so that its width equals 500 pixels and height 600 pixels. This will be enough to accommodate the picture that you're going to download later and import into your Flash document.
Set the speed of your movie (the Frame rate -see 2 below) to 30 fps.
4 Download the image i prepared for this tutorial, save it someplace where you will easily find it and unzip it.
5 Select File > Import > Import to Stage, find the image, select it and click Open. The image should appear on your document's stage.
6 While the image is still selected, check out in the Properties panel that it is positioned on round pixels.
The image's X and Y values (its coordinates on the stage, expressed in pixels) should end with a zero and not any other number. If this isn't the case with your image, change those numbers to zeros manually.
If the image isn't placed on round pixels, it may turn out blurry in your final SWF movie. This is not the blur effect you will be doing in this lesson I'm talking about, but rather the question of how Flash displays objects that are not placed on round coordinates. Since a part of the image (either the foreground or background) will always be in focus, the image itself has to be sharp.
7 Call the current layer background. Make a new layer above it and call it car.
8 Click on the image with the Selection tool (V) to select it. Press Ctrl+C to copy the image.
9 Lock the background layer.
Click on the car layer's first keyframe to select it.
10 Press Ctrl+Shift+V to paste the image in place here. Pasting an object in place in Flash is different from simple pasting. When you paste something in place, that object is placed exactly on the same spot as the original one.
So now you have two copies of the same picture, placed exactly one above the another, in their respective layers. This is a must if you wish to obtain the effect discussed in this lesson. You can't have a realistic focus-changing effect if your images are placed on different locations.
Using the Pen tool to create a precise outline
11 Lock the car layer. Make a new layer above it and call it car mask.
12 Zoom in on the image using the Zoom tool (Z). You are going to draw a precise outline of the car, so zooming in on the picture will make your work a lot more easier.
13 Select the Pen tool (P). In the Properties panel, select hairline as type of line and choose a color that will be in good contrast with the image.
14 Position your cursor somewhere on the left bottom edge of the car (see the left image below).
Click and don't release your mouse - just drag it a little bit away from the point where you first clicked. As you can see in the image on the right below, thin blue handles will appear. You can release your mouse button now.
This technique of clicking and dragging is very important if you want to obtain adjustable curves with the Pen tool. If you just click without dragging, you would have obtained straight lines with points which are devoid of handles. You could add the control points with handles later, but why do it afterwards if you can do it now?
You will need curved and not straight lines, because you are going to adjust them later to make them follow the car's outline precisely.
15 Next click just below the car's rear light and again drag your mouse. Release it once the control handles for the second point have appeared.
After you release your mouse button, you will see the first segment of the curve on your scene.
16 Continue clicking-and-dragging until you have reached the other side of the car. Don't be bothered if some segments of your curve go over the car - you will adjust that in a moment. For now, the only important thing is to place the points around the edges of the car.
You can stop once you reach the light on the car's right edge, just like in the image above. You will soon see why. But, first, you must finish the curve so that it follows the outline of the car smoothly. (You call that a car?) 😉
17 Select the Subselection tool (A). Click on the curve to select it for work. The little squares (control points) will appear.
18 Click on a control point to select it for manipulation.
19 Place your cursor over one of the control handles (the small circle at the end of the handle), click on it and start dragging. You will see a thin blue line appear, indicating the new position of the handles. Release your mouse.
As you can see in the image above on the right, the curvature of curves on both sides of the control point have changed. And you certainly noticed that both handles were moving in unison. What you need to do in order to adjust the curves so that they fit the car outline perfectly, is to control only one handle of a control point, not both at the same time.
20 To succeed in doing exactly that, place your mouse over the control handle, press and hold the Alt key, then click your mouse and start dragging the handle. Only the selected handle will move - the other one will stay still.
The picture above shows how just one curve (the one to the left of the selected control point) has changed its curvature. The other one has remained unchanged.
Following the said technique, adjust all the segments of the curve so that it fits the car perfectly. Start from either end of the curve, select point after point, and move each control handle until all of the curve has fallen into place. I have selected the curve on the image below, so that you can better see how it should look in the end.
Completing the mask outline
21 Select the Line tool (N). Click outside the image, on its right (somewhere near the white plastic bag on the picture), hold Shift and start dragging your mouse to the left.
Once you have reached the other side, you can release your mouse and the Shift key.
22 Select the Selection tool (V). Click on the portion of the line that is "inside" the car to select it.
Hit Delete to remove this part of the line.
23 Use the Line tool (N) once again to create three more lines that will encompass the rest of the car and the lower part of the picture. The only important thing you should pay attention to is that all the lines should be connected. You are going to fill this outline with color in a moment, so everything must be connected, with no gaps left behind.
24 Select the Paint Bucket tool (K) and choose a stark color that is well visible in contrast with the rest of the picture. Click anywhere inside the outline to fill it with color.
Fine! The form of the mask is now completed.
You will now create the mask and also use the same shape you just created to make two buttons.
Creating the mask and seeing it in action
25 Lock the car mask layer.
26 Hide the background layer.
It is necessary to hide the background layer if you want to see the masking effect in action. Since the background layer contains the same picture as the car layer, you wouldn't be able to see the mask at work.
27 Right-click on the car mask layer and select Mask from the menu that shows up. The layer will turn into a mask, and the one beneath it (car) will instantly be the masked one.
As you can see, only the car is visible now, thanks to the precise shape for the mask you drew earlier. Flash rules! 🙂
Of course, the terrain around the car is visible too - it would be unnatural to make the camera focus effect which focuses only on the car and not its surroundings. In this way, the effect will seem more realistic.
Creating the invisible button for the car
28 Unlock the car mask layer.
29 With the aid of the Selection tool (V), select the whole mask shape - the outlines as well as the fill. The easiest way to do this is to double-click on the shape's fill.
30 Press Ctrl+C to copy the shape.
31 Lock the car mask layer.
32 Create a new layer above all the others and call it car button.
33 Press Ctrl+Shift+V to paste the shape in the same exact place as the one in the layer below it.
34 While, after pasting, this shape is still selected, press F8 (or select Modify > Convert to Symbol).
In the window that appears, select Button as type, call it car button and click OK. It doesn't matter if this new button has the same name as the layer it is situated in. Flash has no problems with this, so there is nothing to worry about.
35 Double-click the newly made button on the stage to enter inside it. If ever in doubt as to what timeline you are currently working in, just have a look above the layers. Flash is always informing you where you are currently in.
36 Click on the Up keyframe, hold your mouse button and drag it over to the Hit keyframe.
You have just created an invisible button. The first three keyframes of a button symbol in Flash are the states which show up when a user interacts with the button in question:
- The Up state is present when there is no interaction with the button.
- The Over state shows up when a user rolls his mouse over the button.
- The Down state happens when the button is clicked.
The Hit state of a button symbol isn't visible at all - never ever. The contents of this keyframe define the clickable area of a button. This area can be bigger or smaller than the visible states of the button. So, when the first three keyframes are empty, the button is invisible, but still clickable! This is especially practical in projects like the one you are currently working on: you need a button to control the camera blur/sharp effect, but this button must not be seen, in order not to interfere with the visual aspect of your Flash movie.
37 Click on the Scene 1 link above the timeline to return to the main scene.
You'll notice that in Flash, invisible buttons are represented with a bluish-turquoise hue.
Making the invisible button symbol for the background
38 Lock the car button layer. You can hide it too, so that you can see more clearly your workspace.
Create a new layer above it and call it bkg button.
39 Select the Rectangle tool (R). Choose colors that are different from the ones that you used to create the mask for the car and the car button. Draw a rectangle that is bigger than the whole picture. You may need to make visible the background layer to better see the size of the rectangle you're going to draw. Just remember, you're creating this rectangle in the bkg button layer.
40 Lock the current (bkg button) layer and Unlock the car mask layer.
41 Just like you did before, select the whole mask shape with the Selection tool (V).
42 Press Ctrl+C to copy the shape. Lock the car mask layer.
43 Unlock the bkg button layer and click on its first frame to select it for work.
44 Press Ctrl+Shift+V to paste the copied shape into place.
45 Choose the Selection tool (V) and click on an empty part of the stage or outside it to unselect everything.
46 Double-click on the shape you just pasted to select it again, then hit Delete to erase it. You should be left with a shape that is just encompassing the background behind the car.
You had to click outside the stage and unselect everything. Had you pressed the Delete key immediately after pasting the shape onto the rectangle, you wouldn't have cut out the form of the car from it. By unselecting everything, the pasted shape "takes out" the part of the rectangle it is pasted over. So when you erase it after that, you get the rectangle with the part that is "bitten" out of it.
47 Select the new shape with the aid of the Selection tool (V). Be sure to select both the fill and the outline - don't leave anything unselected.
48 Hit F8 to convert it to a Button symbol. Name it background button and click OK.
49 To make this button invisible too, you'll have to repeat the same operations (see steps 35 through 37 above for a more detailed description) you did for the car button. Here is a quick recapitulation:
- Double-click the newly made button on the stage to enter inside it.
- Once inside the button symbol, click on the Up keyframe and drag it over to the Hit keyframe.
- Click on the Scene 1 link above the timeline to return to the main scene.
Great! Now you'll have to give Instance names to your buttons, otherwise you wouldn't be able to pass commands to them via ActionScript.
50 You are on the main scene now. Click the button on the stage once to select it. Do not double-click it, because you'll end up inside it, which is not what you need now.
51 Go to the left part of the Properties panel, and type background_btn in the Instance name field. You may hit Enter to confirm that.
52 Lock this layer (bkg button) and unlock the car button layer.
53 Click once the car button found in this layer, and give it an Instance name too: call it car_btn.
Lock this layer.
Creating the background fade in – fade out animation
54 Hide all the layers by clicking the eye icon situated above them.
55 Make only the background layer visible and unlock it.
56 Click on the image (old_car_wreck.jpg) that is inside it to select it. Select Modify > Convert to Symbol (or hit F8) to convert this picture into a symbol. Otherwise, you wouldn't be able to animate it.
Make sure to select Movie clip as type of symbol, because the selection has stayed on Button from before. Call it background mc and click OK. Click on the movie clip on the stage once to select it.
57 Click the Filters tab for the movie clip in the Properties panel.
58 Click the little plus icon (see 1 in the image below) and select Blur as the filter. Set both the X and Y blur values to 9 (2). Finally, choose Medium as the quality setting for the filter.
59 Right-click on frame 20 of the current layer and select Insert Keyframe.
60 Click on the movie clip in this keyframe and in the Filters tab, just click on the small minus icon (see below) to remove the Blur filter from the movie clip in this keyframe.
61 Right-click anywhere on the gray area between the two keyframes in the current layer and select Create Motion Tween. An uninterrupted arrow on magenta background will appear indicating that you have just made a proper motion tween animation.
62 Right-click on frame 1 of this same layer and select Copy Frames from the menu.
63 Right-click on frame 39 and select Paste Frames. Your background layer should now look like this:
Right-click on the gray area between the middle and the last keyframe and select Create Motion Tween just like you did for the first segment of the animation.
Why did you had to copy the first keyframe and paste it at the end of the animation? Well, this saves you time: instead of turning the blur filter on again and setting the same values as before, copying is much simpler. And since you are going to enable the user to start the in focus/out of focus animation for the background with a move of the mouse, this is just the best thing to do: The background going out of focus has to come to the same level of blurness as it started out with. That's why you just copied the first frame.
You are going to make a similar animation in the car layer in a moment.
Creating the sharp/blur animation for the car
64 Lock the background layer and hide it. Unhide the car layer and unlock it. Click the first keyframe of the car layer to select it for working. Your layers should look like this:
65 Click the image in this layer to select it. Press F8 to convert it to a Movie clip symbol. Call it car mc and click OK.
A small note: you can use the same movie clip that you used in the background layer (background mc) for this animation, as it sits in a separate layer. However, in order to do that, you should delete the image from this layer and replace it with the background mc movie clip. This movie clip would have to be positioned exactly as the one in the layer below it, so I find it easier to just make a new movie clip here.
66 Right-click on frame 20 in this layer and Insert a Keyframe.
67 Click on the movie clip in this keyframe to select it and then click on the Filters tab below the scene. Apply the same settings as you did for the movie clip in the background layer: select Blur as filter, put the X and Y values to 9 and select Medium quality.
68 Right-click on the grey zone between the two keyframes and make a Motion tween.
69 Right-click on frame 1 of this layer and select Copy Frames.
70 Right-click on frame 39 and select Paste Frames.
71 Right-click anywhere between the second and third keyframes and select Create Motion Tween. Here is how the timeline of the car layer should look now, together with the one below it:
72 There is still one more thing to do before proceeding to make this movie interactive with ActionScript: you must prolong the duration of the mask. The mask must cover the car animation in its entirety if you want the final SWF file to be impeccable.
Therefore, right-click on frame 39 of the car mask layer and select Insert Frame. There is no need to insert a keyframe here, as there isn't going to be any animation present. The mask will just last as long as the layer below it, with no modifications.
Lock the car layer. Here's the final look of the three layers:
73 Of course, the buttons should be present at all times, so that your users can interact with the movie without any problems. Do the following:
Right-click on frame 39 of the car button layer and Insert a frame. Do not make the mistake of inserting a keyframe! A frame should be inserted here if everything is to function properly. Remember, you are not animating the buttons, you are just making them last throughout the whole animation.
Do the same thing with the second button: Insert a frame in frame 39 of the bkg button layer. There you are! You can finally start ActionScripting.
Adding interactivity with ActionScript
74 You can make all the layer visible again, but lock any unlocked ones. Create a new layer above all the existing ones and call it actions.
75 Click the first keyframe of the actions layer to select it for placing ActionScript.
76 Press F9 (or select Window > Actions) to to open up the Actions panel. Put the following code inside it:
stop();
var carIsFocused:Boolean = true;
background_btn.onRollOver = function():Void {
if (carIsFocused) {
play();
}
};
car_btn.onRollOver = function():Void {
if (!carIsFocused) {
play();
}
}
77 Now, right-click on frame 20 of the actions layer and select Insert Keyframe. The timeline of the actions layer will now look like this:
78 While this new keyframe is still selected, open the Actions panel if you have closed it, and insert the following ActionScript code inside:
stop();
carIsFocused = false;
79 Test your movie by pressing Ctrl+Enter or selecting Control > Test Movie. If your car appears blurred (and it shouldn't be), do the following:
- Close the testing movie and go back to your FLA document.
- Unlock the car mask layer.
- If your mask shape appears to be selected, just click anywhere outside the stage to unselect everything.
- Lock the car mask layer.
I don't know why this is so, but the mask doesn't function if it is selected. I know that this is annoying, but somehow this little "misfunction" exists within Flash, so you have to live with it.
Test your movie again and roll your mouse over the background. It will come into focus, while the car along with its surrounding area will fade out of focus and will become blurred. Then try the opposite: place your cursor over the car and see it coming into sharp focus, while the background gets blurred out. Neat, huh? Superb! But let me explain you how this functions.
The first line of the ActionScript code in the first frame is simply:
stop();
This stops the playhead from going on. This is a necessary piece of code if you don't want your animation to loop endlessly - it wouldn't make any sense and the interaction with the movie would have no meaning.
Next, you are creating a variable to make Flash aware that the car is now in sharp focus.
var carIsFocused:Boolean = true;
When you want to create a variable, you first write the keyword var, followed by the variable's name. In this example, I chose the name to be carIsFocused. I just liked it that way and this name is also meaningful - it reminds me of the variable's purpose. I could have called it carFocus, carissharp or any way I liked.
The colon after the variable's name (:) signals to Flash that there is the type of value going to be written next. The value of this variable is of the Boolean kind. This type of value can be either true or false, and not any other whatsoever. A variable can also have a numerical value, textual, and so on.
So, why is this necesssary at all? In order to have this kind of basic interactivity, where the two buttons react to the mouse being rolled over them, you must tell Flash what's currently in focus and what's not, so that it can tell the buttons how to react to the mouse.
By setting the value of the carIsFocused variable to true, you make it clear to Flash that the car is in focus now, which is really the case at the start of your animation.
Now comes the function which controls the background_btn button's response to user's actions:
background_btn.onRollOver = function():Void {
if (carIsFocused) {
play();
}
};
When you want a button to react to a roll over mouse event happening, the easiest way to do this is to tie this event to a function. This function will then execute when a user rolls her mouse over that particular button.
So, the line
background_btn.onRollOver = function():Void {
does exactly that. The button's rollover event is handled by the event handler for this event: background_btn.onRollOver. When you place the assignment operator (=) after it, followed by the keyword function, this function will be run once this event has transpired. The Void keyword after the colon (:) tells Flash that this function does not return a value. Some functions are set up so that they return a value, be it numerical, text or some other kind of value. Even if there is no value being returned, like in the case of the aforementioned function, you must tell Flash this too.
And when a function is being run, what is in fact being executed is all the ActionScript code placed between its curly brackets: { and }. Let's have a look at this code:
if (carIsFocused) {
play();
}
What you see above is a simple conditional statement. Conditional logic is used so that the computer can decide by itself what actions to take, based on the input.
The first line of this simple if conditional statement says
if (carIsFocused) {
Translated to English, this means: if the value of the carIsFocused variable equals true, the code between the statement's curly brackets will get executed.
In the case of an if conditional statement, when you use the shorthand version of checking if a variable's value equals true, you write only the name of a variable between the parentheses (carIsFocused). This has the same effect as if you had written the full version: (carIsFocused == true).
So, if this is true (which it is at the beginning, because you had set the value of the carIsFocused variable to true in the second line of your ActionScript code), the code between the conditional statement's curly brackets will be executed. And this code is a single line containing a single command:
play();
To sum it all up, this is what happens when a user rolls her mouse over the background_btn button:
Flash runs the function which is connected to the button's onRollOver event handler. This function checks if the carIsFocused variable has a value of true. It has, so the animation starts playing.
The playhead goes on until it arrives at frame 20, where it is stopped. Why? Because at this moment Flash reads the ActionScript code contained within this keyframe and executes it:
stop();
carIsFocused = false;
The first line is clear: it is a simple stop(); action which stops the animation.
The second line sets the value of the carIsFocused variable to false. This makes sense, because at this point of the animation, the car is blurred, and the background is in focus.
Now, at this point in the animation, if a user rolls his mouse over the background button, nothing will happen. Why? Well, the function attached to this button's onRollOver event handler will check if the carIsFocused varaible equals true. Since Flash has just set it to false, nothing will happen.
That's the basic way an if conditional statement works: if the condition is true, the code between its curly brackets will be executed. If it turns out to be false, nothing happens. Flash simply skips the code between the curly brackets as if it wasn't there at all.
OK, so the background button does nothing at this point. But the car_btn is active now. To see why, just take a look at the function associated with this button's onRollOver event handler:
car_btn.onRollOver = function():Void {
if (!carIsFocused) {
play();
}
}
This function bears a very close resemblance to the one attached to background_btn button. The only thing that's different is the conditional if statement.
In this function, the conditional statement checks if the value of the carIsFocused variable equals false. And it does - when the playhead has arrived to frame 20, Flash read and executed the line of code
carIsFocused = false;
which has effectively set the value of this variable to false.
When you want a conditional if statement in ActionScript to check if the value of a variable equals false, all you have to do is place an exclamation mark (!) right in front of the variable's name:
if (!carIsFocused) {
So the code placed between this conditional statement's curly brackets will be run, and again, it is a simple play(); command. What happens at this point is that the animation continues playing, comes at the end (frame 39), and as every Flash animation does, it goes back to the beginning (frame 1), where it reads the stop(); command and it stops there.
The value of the carIsFocused variable is set back to true, so the background button becomes active again, and the car button inactive.
And that's it! I will show you just a small trick before the end of this lesson: how to make the instant transition from focused to blurred possible, with a simple modification to your ActionScript code (the modified parts are shown in bold). This change is applied to the code found in the first keyframe only. The code in the frame 20 stays unchanged.
stop();
var carIsFocused:Boolean = true;
background_btn.onRollOver = function():Void {
if (carIsFocused) {
gotoAndStop(20);
}
};
car_btn.onRollOver = function():Void {
if (!carIsFocused) {
gotoAndStop(1);
}
}
Conclusion
You have learned a lot in this tutorial! How to make a mask that precisely outlines a part of a photo, how to use the blending filters in Flash 8 Pro to create the effect of camera switching focus from foreground to background and vice-versa, and some simple ActionScript commands that make the whole Flash movie interactive.
The techniques and tricks shown in this lesson can be used to create menus, with different buttons coming in and out of focus as a user interacts with them. They can also be used just to make the camera focus transition effect, for great intros or headers for your website. Be creative, apply this to your ideas and expand it!
Download the zipped source FLA file for the smooth camera focus transition effect.
Download the source .FLA for the example with the instantenous blur/sharp change.
Nice tutorial. Just a question though: what do I do if, for example, i would like to apply the focus change effect to more than two objects? How do I adjust the timeline to this? Thanks.:)
I would put each object into a separate movie clip…this is the first thing that comes to mind.
Nice tutorial.Keep up the good work.
This is really cool. First time I’ve seen this effect.
nice, so will it work with cs5 in as2 or 3??
never tried it but seems pretty good =))))
how did u know it???