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 ! in the image "elow# so that its width equals 5 pi!els and height " pi!els. $his will "e enough to accommodate the picture that you're going to download later and import into your Flash document. Set the speed of your mo%ie the #rame rate &see ' "elow# to 3 fps.

$. Download the image i prepared for this tutorial, sa%e it someplace where you will easily find it and un(ip it. 5. Select #ile > %mport > %mport to &tage, find the image, select it and click 'pen. $he image should appear on your document's stage.

". )hile the image is still selected, check out in the Properties panel that it is positioned on round pi*els.

$he image's + and , %alues its coordinates on the stage, e*pressed in pi*els# should end with a zero and not any other num"er. -f this isn't the case with your image, change those num"ers to (eros manually. -f the image isn't placed on round pi*els, it may turn out "lurry in your final S)F mo%ie. $his is not the "lur effect you will "e doing in this lesson -'m talking a"out, "ut rather the .uestion of how Flash displays o"/ects that are not placed on round coordinates. Since a part of the image either the foreground or "ackground# will always "e in focus, the image itself has to "e sharp. (. Call the current layer background. 0ake a new layer a"o%e it and call it car.

). Click on the image with the Selection tool *+, to select it. Press -trl.- to copy the image. /. 1ock the background layer.

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

1 . Press -trl.&hift.+ to paste the image in place here. Pasting an o"/ect in place in Flash is different from simple pasting. )hen you paste something in place, that o"/ect is placed e*actly on the same spot as the original one. So now you ha%e two copies of the same picture, placed e*actly one a"o%e the another, in their respecti%e layers. $his is a must if you wish to o"tain the effect discussed in this lesson. ,ou can't ha%e a realistic focus&changing effect if your images are placed on different locations. $op of page

0sing the Pen tool to create a precise outline

11. 1ock the car layer. 0ake a new layer a"o%e it and call it car mask.

12. 2oom in on the image using the 1oom tool *1,. ,ou are going to draw a precise outline of the car, so (ooming in on the picture will make your work a lot more easier. 13. Select the Pen tool *P,. -n the Properties panel, select hairline as type of line and choose a color that will "e in good contrast with the image.

1$. Position your cursor somewhere on the left "ottom edge of the car see the left image "elow#. -lick and don2t release your mouse & /ust drag it a little "it away from the point where you first clicked. 3s you can see in the image on the right "elow, thin "lue handles will appear. ,ou can release your mouse "utton now.

$his techni.ue of clicking and dragging is %ery important if you want to o"tain ad/usta"le cur%es with the Pen tool. -f you /ust click without dragging, you would ha%e o"tained straight lines with points which are de%oid of handles. ,ou could add the control points with handles later, "ut why do it afterwards if you can do it now4 ,ou will need cur%ed and not straight lines, "ecause you are going to ad/ust them later to make them follow the car's outline precisely. 15. 5e*t click /ust "elow the car's rear light and again drag your mouse. 6elease it once the control handles for the second point ha%e appeared.

3fter you release your mouse "utton, you will see the first segment of the cur%e on your scene. 1". Continue clicking&and&dragging until you ha%e reached the other side of the car. Don't "e "othered if some segments of your cur%e go o%er the car & you will ad/ust that in a moment. For now, the only important thing is to place the points around the edges of the car.

,ou can stop once you reach the light on the car's right edge, /ust like in the image a"o%e. ,ou will soon see why. But, first, you must finish the cur%e so that it follows the outline of the car smoothly. ,ou call that a car4# 7# 1(. Select the Su"selection tool *3,. Click on the cur%e to select it for work. $he little s.uares control points# will appear. 1). Click on a control point to select it for manipulation.

1/. Place your cursor o%er one of the control handles the small circle at the end of the handle#, click on it and start dragging. ,ou will see a thin "lue line appear, indicating the new position of the handles. 6elease your mouse.

3s you can see in the image a"o%e on the right, the cur%ature of cur%es on "oth sides of the control point ha%e changed. 3nd you certainly noticed that "oth handles were mo%ing in unison. )hat you need to do in order to ad/ust the cur%es so that they fit the car outline perfectly, is to control only one handle of a control point, not "oth at the same time. 2 . $o succeed in doing e*actly that, place your mouse o%er the control handle, press and hold the 3lt key, then click your mouse and start dragging the handle. Only the selected handle will mo%e & the other one will stay still.

$he picture a"o%e shows how /ust one cur%e the one to the left of the selected control point# has changed its cur%ature. $he other one has remained unchanged. Following the said techni.ue, ad/ust all the segments of the cur%e so that it fits the car perfectly. Start from either end of the cur%e, select point after point, and mo%e each control handle until all of the cur%e has fallen into place. - ha%e selected the cur%e on the image "elow, so that you can "etter see how it should look in the end.

$op of page

-ompleting the mask outline

21. Select the 1ine tool *4,. Click outside the image, on its right somewhere near the white plastic "ag on the picture#, hold &hift and start dragging your mouse to the left.

Once you ha%e reached the other side, you can release your mouse and the &hift key.

22. Select the Selection tool *+,. Click on the portion of the line that is 8inside8 the car to select it.

9it Delete to remo%e this part of the line.

23. :se the 1ine tool *4, once again to create three more lines that will encompass the rest of the car and the lower part of the picture. $he only important thing you should pay attention to is that all the lines should "e connected. ,ou are going to fill this outline with color in a moment, so e%erything must "e connected, with no gaps left "ehind.

2$. Select the Paint Bucket tool *5, and choose a stark color that is well %isi"le in contrast with the rest of the picture. Click anywhere inside the outline to fill it with color.

,ou will now create the mask and also use the same shape you /ust created to make two "uttons.

-reating the mask and seeing it in action

25. 1ock the car mask layer.

2". 9ide the background layer.

-t 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 "e a"le to see the mask at work. 2(. 6ight7click on the car mask layer and select Mask from the menu that shows up. $he layer will turn into a mask, and the one "eneath it car# will instantly "e the masked one.

3s you can see, only the car is %isi"le now, thanks to the precise shape for the mask you drew earlier. Flash rules; <#

Of course, the terrain around the car is %isi"le too & it would "e unnatural to make the camera focus effect which focuses only on the car and not its surroundings. -n this way, the effect will seem more realistic. $op of page

-reating the in8isi9le 9utton for the car

2). :nlock the car mask layer. 2/. )ith the aid of the Selection tool *+,, select the whole mask shape & the outlines as well as the fill. $he easiest way to do this is to dou9le7click on the shape's fill.

3 . Press -trl.- to copy the shape. 31. 1ock the car mask layer. 32. Create a new layer a"o%e all the others and call it car button.

33. Press -trl.&hift.+ to paste the shape in the same e*act place as the one in the layer "elow it. 3$. )hile, after pasting, this shape is still selected, press #) or select Modify > -on8ert to &ym9ol#. -n the window that appears, select :utton as type, call it car button and click O=. -t doesn't matter if this new "utton has the same name as the layer it is situated in. Flash has no pro"lems with this, so there is nothing to worry a"out.

35. Dou9le7click the newly made "utton on the stage to enter inside it. -f e%er in dou"t as to what timeline you are currently working in, /ust ha%e a look a"o%e the layers. Flash is always informing you where you are currently in.

3". Click on the 0p keyframe, hold your mouse "utton and drag it o%er to the ;it keyframe.

,ou ha%e /ust created an in%isi"le "utton. $he first three keyframes of a "utton sym"ol in Flash are the states which show up when a user interacts with the "utton in .uestion<

$he 0p state is present when there is no interaction with the "utton. $he '8er state shows up when a user rolls his mouse o%er the "utton. $he Down state happens when the "utton is clicked.

R E M E M B E R 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 pro ects 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 #lash movie. 3(. Click on the &cene 1 link a"o%e the timeline to return to the main scene.

N O T E $ou'll notice that in #lash, invisible buttons are represented with a bluish-tur%uoise hue.

$op of page

Making the in8isi9le 9utton sym9ol for the 9ackground

3). 1ock the car button layer. ,ou can hide it too, so that you can see more clearly your workspace. Create a new layer a"o%e it and call it bkg button.

3/. Select the 6ectangle tool *6,. Choose colors that are different from the ones that you used to create the mask for the car and the car "utton. Draw a rectangle that is "igger than the whole picture. ,ou may need to make %isi"le the background layer to "etter see the si(e of the rectangle you're going to draw. >ust remem"er, you're creating this rectangle in the bkg button layer.

$ . 1ock the current bkg button# layer and :nlock the car mask layer. $1. >ust like you did "efore, select the whole mask shape with the Selection tool *+,. $2. Press -trl.- to copy the shape. 1ock the car mask layer. $3. :nlock the bkg button layer and click on its first frame to select it for work.

$$. Press -trl.&hift.+ to paste the copied shape into place.

$5. Choose the Selection tool *+, and click on an empty part of the stage or outside it to unselect e%erything. $". Dou"le&click on the shape you /ust pasted to select it again, then hit Delete to erase it. ,ou should "e left with a shape that is /ust encompassing the "ackground "ehind the car.

,ou had to click outside the stage and unselect e%erything. 9ad you pressed the Delete key immediately after pasting the shape onto the rectangle, you wouldn't ha%e cut out the form of the car from it. By unselecting e%erything, the pasted shape 8takes out8 the part of the rectangle it is pasted o%er. So when you erase it after that, you get the rectangle with the part that is 8"itten8 out of it. $(. Select the new shape with the aid of the Selection tool *+,. Be sure to select "oth the fill and the outline & don't lea%e anything unselected. $). 9it #) to con%ert it to a :utton sym9ol. 5ame it background button and click O=. $/. $o make this "utton in%isi"le too, you'll ha%e to repeat the same operations see steps 35 through 3( a"o%e for a more detailed description# you did for the car button. 9ere is a .uick recapitulation<

1. 2. 3.

Dou9le7click the newly made "utton on the stage to enter inside it. Once inside the "utton sym"ol, click on the 0p keyframe and drag it o%er to the ;it keyframe. Click on the &cene 1 link a"o%e the timeline to return to the main scene.

?reat; 5ow you'll ha%e to gi%e -nstance names to your "uttons, otherwise you wouldn't "e a"le to pass commands to them %ia 3ctionScript. 5 . ,ou are on the main scene now. Click the "utton on the stage once to select it. Do not dou"le&click it, "ecause you'll end up inside it, which is not what you need now. 51. ?o to the left part of the Properties panel, and type background&btn in the -nstance name field. ,ou may hit <nter to confirm that.

52. 1ock this layer bkg button# and unlock the car button layer. 53. Click once the car button found in this layer, and gi%e it an -nstance name too< call it car&btn.

1ock this layer. $op of page

-reating the 9ackground fade in = fade out animation

5$. 9ide all the layers "y clicking the eye icon situated a"o%e them.

55. 0ake only the background layer %isi"le and unlock it.

5". Click on the image old&car&wreck. pg# that is inside it to select it. Select Modify > -on8ert to &ym9ol or hit #)# to con%ert this picture into a sym"ol. Otherwise, you wouldn't "e a"le to animate it. 0ake sure to select Mo8ie clip as type of sym"ol, "ecause the selection has stayed on Button from "efore. Call it background mc and click O=. Click on the mo%ie clip on the stage once to select it. 5(. Click the #ilters ta" for the mo%ie clip in the Properties panel.

5). Click the little plus icon see ! in the image "elow# and select :lur as the filter. Set "oth the > and ? "lur %alues to @ '#. Finally, choose Medium as the .uality setting for the filter.

5/. 6ight&click on frame 2 of the current layer and select %nsert 5eyframe.

" . Click on the mo%ie clip in this keyframe and in the #ilters ta", /ust click on the small minus icon see "elow# to remo%e the Blur filter from the mo%ie clip in this keyframe.

"1. 6ight&click anywhere on the gray area "etween the two keyframes in the current layer and select -reate Motion @ween. 3n uninterrupted arrow on magenta "ackground will appear indicating that you ha%e /ust made a proper motion tween animation.

"2. 6ight&click on frame 1 of this same layer and select -opy #rames from the menu. "3. 6ight&click on frame 3/ and select Paste #rames. ,our background layer should now look like this<

6ight&click on the gray area "etween the middle and the last keyframe and select -reate Motion @ween /ust like you did for the first segment of the animation.

)hy did you had to copy the first keyframe and paste it at the end of the animation4 )ell, this sa%es you time< instead of turning the "lur filter on again and setting the same %alues as "efore, copying is much simpler. 3nd since you are going to ena"le the user to start the in focusAout of focus animation for the "ackground with a mo%e of the mouse, this is /ust the "est thing to do< $he "ackground going out of focus has to come to the same le%el of "lurness as it started out with. $hat's why you /ust copied the first frame. ,ou are going to make a similar animation in the car layer, so please continue onto the third page of this tutorial. "$. 1ock the background layer and hide it. :nhide the car layer and unlock it. Click the first keyframe of the car layer to select it for working. ,our layers should look like this<

"5. Click the image in this layer to select it. Press #) to con%ert it to a Mo8ie clip sym"ol. Call it car mc and click O=. 3 small note< you can use the same mo%ie clip that you used in the background layer background mc# for this animation, as it sits in a separate layer. 9owe%er, in order to do that, you should delete the image from

this layer and replace it with the background mc mo%ie clip. $his mo%ie clip would ha%e to "e positioned e*actly as the one in the layer "elow it, so - find it easier to /ust make a new mo%ie clip here. "". 6ight&click on frame 2 in this layer and %nsert a 5eyframe.

"(. Click on the mo%ie clip in this keyframe to select it and then click on the #ilters ta" "elow the scene. 3pply the same settings as you did for the mo%ie clip in the background layer< select :lur as filter, put the > and ? %alues to / and select Medium .uality. "). 6ight&click on the grey (one "etween the two keyframes and make a Motion tween. "/. 6ight&click on frame 1 of this layer and select -opy #rames. ( . 6ight&click on frame 3/ and select Paste #rames. (1. 6ight&click anywhere "etween the second and third keyframes and select -reate Motion @ween. 9ere is how the timeline of the car layer should look now, together with the one "elow it<

(2. $here is still one more thing to do "efore proceeding to make this mo%ie interacti%e with 3ctionScript< you must prolong the duration of the mask. $he mask must co%er the car animation in its entirety if you want the final S)F file to "e impecca"le. $herefore, right&click on frame 3/ of the car mask layer and select %nsert #rame. $here is no need to insert a keyframe here, as there isn't going to "e any animation present. $he mask will /ust last as long as the layer "elow it, with no modifications. Aock the car layer. 9ere's the final look of the three layers<

(3. Of course, the "uttons should "e present at all times, so that your users can interact with the mo%ie without any pro"lems. Do the following< 6ight&click on frame 3/ of the car button layer and %nsert a frame. Do not make the mistake of inserting a keyframe; 3 frame should "e inserted here if e%erything is to function properly. 6emem"er, you are not animating the "uttons, you are /ust making them last throughout the whole animation. Do the same thing with the second "utton< %nsert a frame in frame 3/ of the bkg button layer. $here you are; ,ou can finally start 3ctionScripting.

$op of page

3dding interacti8ity with 3ction&cript

($. ,ou can make all the layer %isi"le again, "ut lock any unlocked ones. Create a new layer a"o%e all the e*isting ones and call it actions.

(5. Click the first keyframe of the actions layer to select it for placing 3ctionScript. (". Press #/ or select Bindow > 3ctions# to to open up the 3ctions panel. Put the following code inside it< stop(); var carIsFocused:Boolean = true; background_btn.onRollOver = function(): oid ! if (carIsFocused) ! pla"(); # #; car_btn.onRollOver = function(): oid ! if ($carIsFocused) ! pla"(); # # ((. 5ow, right7click on frame 2 of the actions layer and select %nsert 5eyframe. $he timeline of the actions layer will now look like this<

(). )hile this new keyframe is still selected, open the 3ctions panel if you ha%e closed it, and insert the following 3ctionScript code inside< stop(); carIsFocused = false; (/. $est your mo%ie "y pressing -trl.<nter or selecting -ontrol > @est Mo8ie. -f your car appears "lurred and it shouldn't "e#, do the following< !. Close the testing mo%ie and go "ack to your F13 document. :nlock the car mask layer.

2.

B.

4.

-f your mask shape appears to "e selected, /ust click anywhere outside the stage to unselect e%erything. 1ock the car mask layer.

- don't know why this is so, "ut the mask doesn't function if it is selected. - know that this is annoying, "ut somehow this little 8misfunction8 e*ists within Flash, so you ha%e to li%e with it. $est your mo%ie again and roll your mouse o%er the "ackground. -t will come into focus, while the car along with its surrounding area will fade out of focus and will "ecome "lurred. $hen try the opposite< place your cursor o%er the car and see it coming into sharp focus, while the "ackground gets "lurred out. 5eat, huh4 Super"; But let me e*plain you how this functions. $he first line of the 3ctionScript code in the first frame is simply< stop(); $his stops the playhead from going on. $his 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 mo%ie would ha%e no meaning. 5e*t, you are creating a %aria"le to make Flash aware that the car is now in sharp focus. var carIsFocused:Boolean = true; )hen you want to create a %aria"le, you first write the keyword var, followed "y the %aria"le's name. -n this e*ample, - chose the name to "e carIsFocused. - /ust liked it that way and this name is also meaningful & it reminds me of the %aria"le's purpose. - could ha%e called it carFocus, cariss%arp or any way - liked. $he colon after the %aria"le's name :# signals to Flash that there is the type of %alue going to "e written ne*t. $he %alue of this %aria"le is of the Boolean kind. $his type of %alue can "e either true or false, and not any other whatsoe%er. 3 %aria"le can also ha%e a numerical %alue, te*tual, and so on. So, why is this necesssary at all4 -n order to ha%e this kind of "asic interacti%ity, where the two "uttons react to the mouse "eing rolled o%er them, you must tell Flash what's currently in focus and what's not, so that it can tell the "uttons how to react to the mouse. By setting the %alue of the carIsFocused %aria"le 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. 5ow comes the function which controls the background_btn "utton's response to user's actions< background_btn.onRollOver = function(): oid ! if (carIsFocused) ! pla"(); # #; )hen you want a "utton to react to a roll o%er mouse e%ent happening, the easiest way to do this is to tie this e%ent to a function. $his function will then e*ecute when a user rolls her mouse o%er that particular "utton. So, the line background_btn.onRollOver = function(): oid !

does e*actly that. $he "utton's rollo%er e%ent is handled "y the e8ent handler for this e%ent< background_btn.onRollOver. )hen you place the assignment operator =# after it, followed "y the keyword function, this function will "e run once this e%ent has transpired. $he oid keyword after the colon :# tells Flash that this function does not return a 8alue. Some functions are set up so that they return a %alue, "e it numerical, te*t or some other kind of %alue. C%en if there is no %alue "eing returned, like in the case of the aforementioned function, you must tell Flash this too. 3nd when a function is "eing run, what is in fact "eing e*ecuted is all the 3ctionScript code placed "etween its curly "rackets< ! and #. 1et's ha%e a look at this code< if (carIsFocused) ! pla"(); # )hat you see a"o%e is a simple conditional statement. Conditional logic is used so that the computer can decide "y itself what actions to take, "ased on the input. $he first line of this simple if conditional statement says if (carIsFocused) ! $ranslated to Cnglish, this means< if the %alue of the carIsFocused %aria"le e.uals true, the code "etween the statement's curly "rackets will get e*ecuted. N O T E 'n the case of an if conditional statement, when you use the shorthand version of checking if a variable's value e%uals 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 "eginning, "ecause you had set the %alue of the carIsFocused %aria"le to true in the second line of your 3ctionScript code#, the code "etween the conditional statement's curly "rackets will "e e*ecuted. 3nd this code is a single line containing a single command< pla"(); $o sum it all up, this is what happens when a user rolls her mouse o%er the background&btn "utton< Flash runs the function which is connected to the "utton's onRollOver e%ent handler. $his function checks if the carIsFocused %aria"le has a %alue of true. -t has, so the animation starts playing. $he playhead goes on until it arri%es at frame 2 , where it is stopped. )hy4 Because at this moment Flash reads the 3ctionScript code contained within this keyframe and e*ecutes it< stop(); carIsFocused = false; $he first line is clear< it is a simple stop(); action which stops the animation. $he second line sets the %alue of the carIsFocused %aria"le to false. $his makes sense, "ecause at this point of the animation, the car is "lurred, and the "ackground is in focus. 5ow, at this point in the animation, if a user rolls his mouse o%er the "ackground "utton, nothing will happen. )hy4 )ell, the function attached to this "utton's onRollOver e%ent handler will check if the carIsFocused %arai"le e.uals true. Since Flash has /ust set it to false, nothing will happen.

$hat's the "asic way an if conditional statement works< if the condition is true, the code "etween its curly "rackets will "e e*ecuted. -f it turns out to "e false, nothing happens. Flash simply skips the code "etween the curly "rackets as if it wasn't there at all. O=, so the "ackground "utton does nothing at this point. But the car&btn is acti%e now. $o see why, /ust take a look at the function associated with this "utton's onRollOver e%ent handler< car_btn.onRollOver = function(): oid ! if ($carIsFocused) ! pla"(); # # $his function "ears a %ery close resem"lance to the one attached to background&btn "utton. $he only thing that's different is the conditional if statement. -n this function, the conditional statement checks if the %alue of the carIsFocused %aria"le e.uals false. 3nd it does & when the playhead has arri%ed to frame 'D, Flash read and e*ecuted the line of code carIsFocused = false; which has effecti%ely set the %alue of this %aria"le to false. )hen you want a conditional if statement in 3ctionScript to check if the %alue of a %aria"le e.uals false, all you ha%e to do is place an e*clamation mark $# right in front of the %aria"le's name< if ($carIsFocused) ! So the code placed "etween this conditional statement's curly "rackets will "e run, and again, it is a simple pla"(); command. )hat happens at this point is that the animation continues playing, comes at the end frame B@#, and as e%ery Flash animation does, it goes "ack to the "eginning frame !#, where it reads the stop(); command and it stops there. $he %alue of the carIsFocused %aria"le is set "ack to true, so the "ackground "utton "ecomes acti%e again, and the car "utton inacti%e. 3nd that's it; - will show you /ust a small trick "efore the end of this lesson< how to make the instant transition from focused to "lurred possi"le, with a simple modification to your 3ctionScript code the modified parts are shown in "old#. $his change is applied to the code found in the first keyframe only. $he code in the frame 'D stays unchanged. stop(); var carIsFocused:Boolean = true; background_btn.onRollOver = function(): oid ! if (carIsFocused) ! gotoAndStop(20); # #; car_btn.onRollOver = function(): oid ! if ($carIsFocused) ! gotoAndStop(1); # #

http://www.lukamaras.com/tutorials/cool-design/camera-effect-blur-sharp.html