Please support lukamaras.com website:
All my tutorials are free, while hosting costs money.
The most viewed tutorials in April:
You will now create the mask and also use the same shape you just created to make two buttons.
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.
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:
REMEMBER 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.
NOTE You'll notice that in Flash, invisible buttons are represented with a bluish-turquoise hue.
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:
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.
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, so please continue onto the third page of this tutorial.
