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

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.

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.

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:

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.

NOTE 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! Just make sure to post your results in the forums, in the Showroom section - I'd love to see them!

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.

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!