Animation & Effects
Creating a Website New!
Free Flash Resources
Other Flash Resources
Learn how to create cool lighting effects to an image using advanced lighting & masking techniques in Flash.
Program: Flash CS5
Estimated Completion Time: 50 Minutes
The following assets were used during the production of this tutorial.
In this tutorial you will learn how to create a lightning effect and an advance masking effect using Flash CS5 technology. To start with the tutorial, download the effect.rar file. At the end of the tutorial you will be able to create an effect similar to shown below.
1. Start Flash CS5 and create a new file. Next, choose Window > Properties from the main menubar; the PROPERTIES panel is displayed. Choose the Edit… button under the Properties tab to display the Document Settings window. Set the Width to 500 and Height to 300 as shown in Figure below. Choose the OK button to set the stage size.
2.Unzip the file you downloaded at the starting of the tutorial. Next, choose File > Import > Import to Stage from the main menubar and open the car.jpg.
3. The image is not aligned on the stage area. To align them, choose Window > Align from the main menubar; the ALIGN panel is displayed, as shown in Figure below.
4. Next, select the image on the stage and select the Align to stage checkbox from the ALIGN panel and choose the second button from left under the Align and the Distribute area. The images will be aligned to the stage.
5. Next, convert the images into symbols. Select img1.jpg and choose Modify > Convert to Symbol from the main menubar; the Convert to Symbol window is displayed; as shown in Figure below. Rename the movie clip as car and choose the OK button.
6. Next, select the car movieclip and choose Window > Properties from the main menubar to display the PROPERTIES panel. Expand the COLOR EFFECT tab in the panel and choose Advanced from the Style drop-down list. Enter the values as shown in the figure below.
7. Now, keep the movieclip selected and expand the FILTERS tab I the PROPERTIES panel and add Blur filter to it with the values as shown in Figure below.
8. On adding the above said properties the car movieclip will appear as shown in Figure below. We have set the background effect for the car. Rename the layer as bg effect.
9. Create a new layer and rename it as blending. Drag the car.jpeg file from the library and place it exactly over the stage area. Make it as a movie clip symbol with the name car_blending.
10. Make sure the PROPERTIES panel is displayed and the car_blending movieclip is selected. Next, expand the DISPLAY tab and choose Hard Light blending option from the Blending drop down list.
11. Next, expand the FILTERS tab and add the Glow filter to the car_blending movieclip. Set the following parameters in the FILTER tab to get the desired effect.
For the Color parameter in the Glow filter type use the hex value as #462953.
12. On adding the glow filter to the car_blending movieclip the car on the stage area should look as shown in the Figure below.
13. Create a new layer with the name lightning. Next, choose Insert > New Symbol from the main menubar to create a blank new symbol. Rename the new symbol to lightning and set the symbol type to Movie clip and choose the OK button. A blank new movieclip is created.
14. Choose the Brush Tool from the toolbar and create some brush strokes in the stage area as shown in the image below.
15. Next, set a new keyframe on frame 7 and create some brush strokes similar to that in the figure below.
16. Next, set a new keyframe on frame 15 and create some brush strokes similar to that in the figure below.
17. Next, set a new keyframe on frame 22 and create some brush strokes similar to that in the figure below.
18. Next, set a new keyframe on frame 29 and create some brush strokes similar to that in the figure below.
19. Next, set a new keyframe on frame 30 and create some brush strokes similar to that in the figure below. You can also add yellow color as the stroke color.
20. Next, set shape tween between the all the keyframes. Create a new layer and create random strokes similar to what created above in white and yellow colors with the position of the keyframes exactly at the same position as discussed above. Add shape tween between the keyframes. The time line should look as shown in Figure below.
21. Next, add Blur Filter to the movie clip in the PROPERTIES panel and set the Blur X and Y values to 10 and Strength to High.
22. Go back to the main stage and create a new layer. Create a blank movieclip with the name white strokes.
23. Choose the Rectangle Tool from the main menubar and create 5 rectangles randomly. Add linear gradient to it in the sequence transparent, white, transparent and arrange them as shown in the Figure below.
24. Press F6 to create keyframe a keframe. Rearrange the rectangle streaks to as shown in the figure below.
25. Press F6 again to create keyframe a keframe. Rearrange the rectangle streaks to as shown in the figure below.
26. Go back to the main stage area and press CTRL + T to activate the TRANSFORM tab. Set the Rotate value to 20 degrees.
27. Next, create a new layer and rename it as mask. Now, use your sketching skills and create a sketch similar to what is shown in the Figure below such that the car image can come exactly inbetween it.
28. Next, make sure that the layers are placed exactly similar to the structure shown in the figure below.
29. Now, select the layer named mask and right click over it and choose the Mask option from the flyout to mask the underneath layer. Publish the file by pressing CTRL + ENTER to get the animation effect as shown in Figure below.
30. You can also animate the car to get more life into the animation.
Join us on Facebook to keep updated with all the latest tutorials and web design freebies from EntheosWeb!