Flash Tutorials
& Resources
Dreamweaver
Tutorials
Fireworks Tutorials
& Resources
Photoshop
Tutorials
Web Design
Tutorials & Resources
CSS
Tutorials
CorelDraw
Tutorials
You are here : : Home > Free Resources > Flash Tutorials & Resources > Cool Lighting Effects   

Flash Tutorials

Basics

Animation & Effects

Actionscript

Creating a Website New!

Miscellaneous

Flash Articles

Free Flash Resources

Other Flash Resources

Cool Lighting Effects in Flash

Learn how to create cool lighting effects to an image using advanced lighting & masking techniques in Flash.

Tutorial Details

Program: Flash  CS5

Difficulty: Advanced

Estimated Completion Time: 50 Minutes

Tutorial Assets

The following assets were used during the production of this tutorial.

Source File ( .fla )

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.

img1.jpg

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.

img2.jpg

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.

img3.jpg

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.

img4.jpg

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.

img5.jpg

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.

img6.jpg

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.

img7.jpg

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.

img8.jpg

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.

img9.jpg

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.

img10.jpg

15.   Next, set a new keyframe on frame 7 and create some brush strokes similar to that in the figure below.

img11.jpg

16.   Next, set a new keyframe on frame 15 and create some brush strokes similar to that in the figure below.

img12.jpg

17.   Next, set a new keyframe on frame 22 and create some brush strokes similar to that in the figure below.

img14.jpg

18.   Next, set a new keyframe on frame 29 and create some brush strokes similar to that in the figure below.

img12.jpg

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.

img16.jpg

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.

img17.jpg

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.

img18.jpg

24.   Press F6 to create keyframe a keframe. Rearrange the rectangle streaks to as shown in the figure below.

img19.jpg

25.   Press F6 again to create keyframe a keframe. Rearrange the rectangle streaks to as shown in the figure below.

img20.jpg

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.

img21.jpg

28.   Next, make sure that the layers are placed exactly similar to the structure shown in the figure below.

img22.jpg

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.

img23.jpg

30.   You can also animate the car to get more life into the animation.


Now building a website is as easy as 1-2-3!

Please Like, Tweet, Share or Comment on this page if you found this tutorial/resource useful!

No portion of these materials may be reproduced in any manner whatsoever, without the express written consent of Entheos. Any unauthorized use, sharing, reproduction or distribution of these materials by any means, electronic, mechanical, or otherwise is strictly prohibited.


Looking for high-quality Flash Website Design? Choose from over 6000 templates!

Featured Template
Template # 35999
Type: Joomla 1.7 Template
Price: $69

Flash Photo Galleries