Flash Explained

Learn Flash easily.

Making the camera focus change effect in Flash with the aid of the blending filters

October 17th, 2008 | Author: Luka | Category: Design


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.

Modifying the document properties.

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.

The jpg image inside the fla document.

6 While the image is still selected, check out in the Properties panel that it is positioned on round pixels.

Making sure the image 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.

Adding a new layer to your scene.

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.

Locking the currently active layer.

Click on the car layer's first keyframe to select it.

Selecting the first keyframe of the car layer.

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.

Top of page

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.

A third layer is added to the scene.

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.

Selecting the options for the Pen tool.

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.

Creating the starting point of the curve with the Pen tool.

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.

Adding a second control point to the curve.

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.

The completed outline around the upper part 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.

Selecting a control point on the curve.

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.

Dragging a control handle of a curve point. The curves on both sides of the point have changed their curvature.

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.

Dragging a single handle of a control point.

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.

The curve outlining the car perfectly.

Top of page

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.

The beginning of the line being drawn.

Once you have reached the other side, you can release your mouse and the Shift key.

A horizontal line drawn across the image.

22 Select the Selection tool (V). Click on the portion of the line that is "inside" the car to select it.

Selecting a portion of the line.

Hit Delete to remove this part of the line.

A part of the line deleted.

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.

Closing the outline around the picture.

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.

The outline filled 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.

Top of page

Creating the mask and seeing it in action

25 Lock the car mask layer.

Locking the layer containing the mask.

26 Hide the background layer.

Hiding the layer at the bottom of the stack.

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.

The topmost layer is turned into a mask.

As you can see, only the car is visible now, thanks to the precise shape for the mask you drew earlier. Flash rules! 🙂

The mask effect shown in action.

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.

Top of page

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.

All of the drawn shape is selected - both the outlines and the 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.

A new layer is added to the scene.

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.

The Convert to Symbol window in Flash.

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.

The information on the current timeline is shown above the layers.

36 Click on the Up keyframe, hold your mouse button and drag it over to the Hit keyframe.

This sequence shows how to drag the Up keyframe of a button into its 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.

Going back to the main timeline in Flash.

You'll notice that in Flash, invisible buttons are represented with a bluish-turquoise hue.

The invisible button inside a fla document.

Top of page

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.

Adding the layer for the second invisible button symbol.

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.

Drawing a rectangle that is bigger than the imported picture.

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.

Selecting the first keyframe in a layer.

44 Press Ctrl+Shift+V to paste the copied shape into place.

The copied shape is pasted over the existing rectangle.

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.

The shape for the future background button symbol.

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:

  1. Double-click the newly made button on the stage to enter inside it.
  2. Once inside the button symbol, click on the Up keyframe and drag it over to the Hit keyframe.
  3. 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.

Assigning an instance name to a button in Flash.

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.

The instance name makes possible to control a symbol via ActionScript.

Lock this layer.

Top of page

Creating the background fade in – fade out animation

54 Hide all the layers by clicking the eye icon situated above them.

All layers in Flash can be made invisible by clicking a single icon.

55 Make only the background layer visible and unlock it.

The background layer is ready for work.

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.

Selecting the filters for a movie clip symbol.

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.

Setting the values for the blur filter.

59 Right-click on frame 20 of the current layer and select Insert Keyframe.

Adding a keyframe to the background layer.

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.

Removing the blur filter.

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.

Making a motion tween animation in Flash.

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:

A third keyframe is added to to the current layer.

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.

The background animation is now complete.

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.

Top of page

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:

Preparing the scene for work in the car layer.

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.

Inserting a second keyframe in the car layer.

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:

Both animations in the two adjacent layers are now complete.

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:

The mask layer must last as long as the animation in the layer beneath it.

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.

All the design and animation layers and their final appearance.

Top of page

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.

A new layer for ActionScript code is added.

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:

A second keyframe is inserted into the layer reserved for actionscript.

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:

  1. Close the testing movie and go back to your FLA document.
  2. Unlock the car mask layer.
  3. If your mask shape appears to be selected, just click anywhere outside the stage to unselect everything.
  4. 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);
}
}

Top of page

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.

Be Sociable, Share!

Comments

Submit a comment

  • Ali Oct 19, 2008 at 8:02 pm

    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.:)

  • Luka Oct 20, 2008 at 9:52 am

    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.

  • chicago web design Dec 9, 2008 at 8:00 am

    This is really cool. First time I’ve seen this effect.

  • dave Feb 17, 2011 at 7:15 am

    nice, so will it work with cs5 in as2 or 3??

  • anam Sep 24, 2011 at 7:21 am

    never tried it but seems pretty good =))))
    how did u know it???

You must log in to post a comment.