Animated Car Banner in Flash CS5

Embed Size (px)

Citation preview

Animated Car Banner in Flash CS5pen a new flash file. ChooseWindow > Propertiesfrom the main menubar thePROPERTIESpanel is displayed as shown in figure below

Choose theEditbutton under thePROPERTIESarea in the panel, theDocument Settingswindow is displayed. Set the dimensions as728(WIDTH)and300(HEIGHT)and choose theOKbutton to make the changes.2.Rename the existing layer asbuildingsand chooseFile > Import > Import to Libraryfrom the main menubar and import the files downloaded at the starting of the tutorial.3.ChooseWindow > Libraryfrom the main menubar; theLIBRARYpanel is displayed. Pull the building images to the stage area and align it as shown in Figure below.

4.Select the image and chooseModify > Convert to Symbolfrom the main menubar and name this movieclip asbuilding_animation.5.Double-click on the movieclip and select the building image and create a moviclip again and name it asbuilding. Rename the layer asanim_building.6.Select frame 460 and add a keyframe. Select thebuildingmovieclip and open thePROPERTIESpanel and se the X value to -1450. Publish the file to see the animation. If at any point of time you find a jerk in the animation please adjust the position and frames of the building movieclip accordingly.7.Go to the main stage area and create a new layer namedroad. Choose theRectangle Toolfrom theToolspanel and create a box at the bottom of the building area and align it as shown in Figure below. Make sure that the color of the road is set to #171717.

8.Next, create a new layer namedroad stripand create a grey and white rectangular pattern using theRectangle Toolfrom theToolspanel, as shown in Figure below. Make sure that the length of the road strip pattern is almost equal to that of the buildings.

9.Select the road strip and choose theFree Transform Toolfrom theToolspanel and distort the road strip as shown in Figure below. Make sure that the color of the grey part in the strip pattern is similar to that used inroad.

10.ChooseModify > Convert to Symbolfrom the main menubar and name it asroad strip. Select the movieclip and chooseModify > Convert to Symbolagain and name it as road strip animation. Place this animation in the center of the road as shown in Figure below.

11.Animate the road strip as you did for the building movieclip. But make sure that the speed of the road strip is double as compared with the moving speed of the buildings. Publish the flash file to see the transition in the animation.12.Next, move back to the main stage area and create a new layer and name it aslogo. Drag the logo.jpeg file from the LIBRARY panel and place it in the scene by first scaling it down as shown in Figure below.

13.Create a new layer in the main stage area and rename it asfootpath. Create the footpath using theRectangle Toolas shown in Figure below. Make sure to match the length of the footpath series with the road strip.

14.Align the foothpath as shown in Figure below.

15.Animate the foothpath similar to the road strip with the same speed. Publish the flash file to see the effect.16.Next, in the main stage area create a new layer and rename it ascar. ChooseModify > Convert to Symboland rename it ascar. Double click on thecarmovieclip and create a new layer and rename it astyre_front. Zoom in the to the front tyre area in the screen and create a pattern using theRectangle Toolas shown in Figure below.

17.Make this pattern as a movieclip and renmae it astyre_mask. Double click on this movieclip and rename the existing layer asbgand selec the cross pattern again and chooseModify > Convert to Symbolfrom the main menubar and rename it asspokes. Choose Window > Properties from the main menubar and add blur filter to it.18.Next, create a new layer over it and rename it asmask. Create an oval shape exactly the shape of the rim of the car as shown in Figure below.

19.Activate thebglayer and create keyframes at frames 3 and 6. Rotate the spokes movieclip at frame 3 by around 180 degrees and add motion tween between the keyframes.20.Next, activate the mask layer and chose frame 6 and press F5 to extend the frames. Now, right click on themasklayer and chooseMaskfrom the drop-down list, spokes will be visible only in the rim area as shown in Figure below.

21.Similarly, add the same effect to the rear wheel. Move back to the main stage area and double click on thecar_animationmovieclip and create a keyframe on frame number 40. Move the car movieclip a bit in the top right position. Next, add another keyframe at frame number 75 and place the car in the bottom right position. Add one more keyframe at frame 115 and place the movieclip in the top left position. Add the last keyframe on frame 190 and place the moviclip at the same position as it was on frame1. Add motion tween between the all the keyframes.22.Position the car on the main stage area as shown in Figure below.

23.Publish the flash file to see the banner animation.24.You can also use this banner animation for creating an banner advertisement for mercedes benz. To do so, create one more layer in the stage area and rename it as text and add it in the scene and make it fly in the stage area and then stop as shown in Figure below.

25.Publish the flash file to get the animation as shown below.

TO CREATE MOTION TWEENSteps to Follow :Create a Symbol First draw an object for Motion Tween.Like in the above demonstration I used heart. Select the object you have drawn and press F8 to convert this object to a Symbol. In the Symbol window which appears now. Name this object heart_mc, choose Movie clip behavior and bottom center square for registration. Press OK.

Create a Motion Tween Double click on the Layer and type "Heart". Select Frame 30 and press F6 to insert a keyframe. Select Frame 15 and press F6 to add another keyframe. With the playhead still on Frame 15, hold the Shift key to move the heart_mc in a straight line, and drag the heart_mc up. Select any frame between Frames 2 and 14 and select Motion from the tween pop-up menu in the Property inspector. Select any frame between Frames 16 and 29 and select Motion from the tween pop-up menu in the Property inspector. Press Ctrl+S to save your changes.Create a Shape Tween Insert a new Layer and call it "Shadow". Select the first frame in the Shadow Layer, draw borderless shadow relevant to your Symbol. If your Color Mixture Window is not open, press Shift+F9 to open it. Select Eyedropper tool from your Tool box. Click it on your shadow. Now go to Color Mixture Window and type 25% for Alpha value.

Select Frame 30 and press F6 to insert a keyframe, then select Frame 15 and press F6 to insert a keyframe. With the playhead on Frame 15, select the Free Transform tool. Slightly reduce the size of the Shadow. With Frame 15 still selected, select the Eyedropper tool in the toolbar, and then click on your shadow object. Now go to Color Mixture Window and change Alpha value to 10%. Select any frame between Frames 2 and 14 on the Shadow layer. In the Property inspector, select Shape from the Tween pop-up menu. Select any frame between Frames 16 and 29 on the Shadow layer. In the Property inspector, select Shape from the Tween pop-up menu.Now its time for Final touch up Select Frame 1 of the Heart layer. Press F6 to add a keyframe. A new keyframe is added, and the playhead moves to Frame 2. Go back to frame 1, select the Free Transform tool from your toolbox. Select the transformation center point (the small circle near the center of the movie clip) and drag it to the bottom of the heart. On the Stage, drag the upper middle transform handle down to slightly compress the heart shape. Right-click Frame 1 of the heart layer and select Copy Frames from the context menu. Go to 29th frame and press F8 to insert a new keyframe. Right-click 29th frame and choose Paste Frame from the context menu. Click on the Stage, away from any objects. Type "28" in the Frame Rate text box of your Property inspector window. On the heart layer, select any frame between Frames 2 and 14. Then in the Property inspector, in the Ease text box, type 100. Similarly select any frame between Frames 16 and 29 in the same layer, then go back to Property inspector window and type -100 in the Ease text box. Do the same thing to the Shadow layer.PressCtrl+Enterto view your animation.Peeling Sticker Effect

Here we are taking the stage dimensions as300x400and the FPS is24, as shown in the Figure below. To start with the tutorials download thesource.rarfile that will provide you with the necessary files to be used in the tutorial.

1. First import the downloaded used images from the source. To do that,Go to the File menu >Select Import > Select Import to Library. See the reference image below.

2. Before starting we already have layer 1, now name the layer assticker front.Drag thefront_Sticker_imgfrom the libraryonto the stage and align it to the center of the stage. Then Convert the image to movie clip. To do that,Select the image > Right click > Select the Convert to Symbol > Select Movie Clipand Name the symbol assticker front. See the reference image below.

3. Insert a new layer and name it assticker back.Drag theback_Sticker_imgfrom the libraryonto the stage and align it to the center of the stage. Then Convert the image to movie clip. To do that,Select the image > Right click > Select the Convert to Symbol > Select Movie Clipand Name the symbol assticker back. See the reference image below.

4. Now select thesticker back, and then flip it vertical. To do that,Go the Modify menu > Select Transform > Select Flip Vertical. See the reference image below.

Now apply skew on it. To do that, Open theTransform panelfrom thewindow menu.Select Skewandset value to 162 degreeand-18 degree. See the reference image below.

Select thesticker backsymbol, and position it to the top outside of the stage. Place the image according to the given reference image below.

5. Now insert a new layer with name asshadow. Create a shape same asgreen outlinegiven in the reference image in below.

6. Now insert a new layer with name asmask. Create abox shapeon the top of thesticker frontimage asgiven in the reference image in below.

7. Now select frame 35 of all layers andPress F5to insert new frame. See the reference image below.

Now select thesticker backon frame35andPress F6to insert akey frame.Then change the position of the image to the bottom as given in the reference image below.

Now select any frame between frame1and frame35, thenRight click > Select Create Motion Tween.

8. Now go to the shadow layer. Open the color panel from the window menu. Now select the shape and select theliner gradientfrom the color panel as shown in the reference image below.

Nowselectthewhite color bucketlabeled as1in the reference image. Then choose black color, refer label2in the given reference image below, and set alpha to0%. See the reference image below.

9. Take theGradient Transform Toolfrom the tool bar. See the reference image below.

10. Select the shape usingGradient Transform Tool, thenhold down the small circle and rotate it to 90 degree angle.See the reference image on the left.

11. Hold down the Small Square and drag to up. Do not cross the center point. See the reference image on the Center.

12. And hold down the center of the gradient and drag to the bottom exactly as given in the reference image on the Right.

13. Select frame 35 of shadow layer andPress F6to insert a key frame. Select the shape using arrow tool from the toolbar and move the shape to the bottom exactly as given in the reference image below.

Take theGradient Transform Toolfrom the tool bar. See the reference image below.

Hold down the center of the gradient and drag to the top of the shape exactly as given in the reference image on the Right.

14. Now select any frame between frame1and frame35, thenRight click > Select Create Shape Tween. See the reference image below.

15. Go to the mask layer and Select frame35on the same layer andPress F6to insert a key frame. Move the mask shape to the bottom to cover the sticker front image complete. Do it exactly as given in the reference image below.

Select any frame between frame1and frame35, thenRight click > Select Create Shape Tween.16. Now we will apply mask. To do that,Right Click on the mask layer > Select Mask. See the reference image below.

Now select the sticker front and sticker back layer by pressing shift key. Then Drag them little up and left side over the shadow layer. It will mask you other layers also. See the reference image below.

17. Select frame35on the all layers andPress F6to insert a key frame. Again Select frame85on the all layers andPress F6to insert a keyGo to the frame1, and Select the key frame of three layers except of sticker front layer, thenRight click > Select Copy Frames. See the reference image below.

Go to the frame50, and PressF6 keyto insert key frame on all layers.

Go to the frame85, PressF6 keyto insert key frame on all layers. Then Select the key frame of three layers except of sticker front layer, thenRight click > Select Paste Frames. See the reference image below.

18. At last apply shape tween and motion tween on the layers as given in the reference image below.

Publish the file and see the effect as shown in the Figure below.

Flash Ripple EffectSTEPS TO FOLLOWCreate a Graphic Symbol. Import an image to your work area upon which you would like to create ripple effect. Press F8, to convert this image to a symbol. Name this Symbol "girl_gr" and choosegraphic behavior. Press OK. Name this Layer "bg". Select girl_gr and chooseAlpha 99%from color list box in your property window.Create a Movie clip. Press Ctrl+F8, to create Ripple movie clip. Name this symbol "ripple_mc" and chooseMovie clipbehavior. Press OK. Draggirl_grto your working area from Library (ctrl+L).

Selectgirl_grand chooseAlpha 0%from color list box in your property window. Insert Keyframe (F6) into the 5th frame. Remaining on the 5th frame, Selectgirl_grand chooseAlpha 99%from color list box in your property window. Now select 1st frame, chooseMotion Tweenfrom Tween list box in your property window. Insert Keyframe into 15th frame and later to 20th frame. Remaining on the 20th frame, Selectgirl_grand chooseAlpha 0%from color list box in your property window. Select 15th frame, chooseMotion Tweenfrom Tween list box in your property window. Insert a new layer above this layer, call it "Layer 2". Select frame 1 ofLayer 2and draw a borderless square or rectangle depending on the type of ripple effect you want.In the above demonstration, I have used rectangle with 15 pix as its height. Place this vector wherever you want the ripple to begin. Make sure that the vector belongs only to layer 2. Insert Keyframe into the 20th frame ofLayer 2. Place the vector wherever you want the ripple to end or ebb.In the above demonstration, I have placed it right at the bottom and reduced the height to 5 pix. Select 1st frame, chooseShape Tweenfrom Tween list box in your property window. Right click onLayer 2and selectMask. Save (ctrl+S). Make it a habit to save your work after each step you do.Insert Ripple Movie Clip onto Scene 11. Now go back to Scene 1.2. Insert a new layer abovebglayer and call itripple1.3. Insert new Keyframe (F6) into the 10th frame ofripple1layer.4. With 10th frame ofripple1layer selected, Drag ripple_mc movie clip onto the working area. Place it appropriate to girl_gr. Make sure that this movie clip is placed exactly where you had placed your square or rectangular vector in ripple_mc Movie clip.5. Insert frame (F5) into the 30th frame ofripple1layer. This is just to make sure that theripple _mcruns only for 20 frame.6. Insert another new layer aboveripple1layer and call itripple27. Insert Keyframe into the 20th frame ofripple2layer.8. With 20th frame ofripple2layer selected, Drag ripple_mc movie clip onto the working area. Place it appropriate to girl_gr just the way you did in step 4.9. Insert frame (F5) into the 40th frame ofripple1layer. This is just to make sure that theripple _mcruns only for 20 frame.10. Insert frame (F5) into the 40th frame of bg layer.Here you go!! Your movie is ready. PressCtrl+Enterto view your movie. Wasn't it simple.Okay now few things to Note- In the above demonstration I have created a subtle ripple effect. If you want the ripples to be more prominent, you can add few more layers of ripple_mc movie clip and reduce the Keyframe differences between layers. Like in the tutorial above, ripples appear every 10 frames. You can reduce this period and make it appear every 5 frames, which would make the ripple effect more prominent.Working with layerteps to follow: Open a new flash file (Ctrl+N).New Documentwindow will appearSelectGeneralpanel and choose Type:Flash Document. Press OK. If your timeline window is not open, press (Ctrl+Alt+T). Now you can see a single Layer called "Layer1" in your timeline Window.

Create a Shape Tween on Layer1. Similar to the one in Shape Tween Tutorial. Single click on add new layer button.

A new layer gets added. By default it will be named "Layer 2". Create a Motion Tween on Layer 2. Similar to the one in Motion Tween Tutorial. After creating two layers, your timeline will look something like the one shown below.

Now press (Ctrl+Enter) to view your motion tween.