Our Flash tutorials provide you with step-by-step instructions on how to create beautiful Flash animations and integrate them into your website.  Home Flash & Swish Flash Tutorials Awesome Background Light Effects in Flash - 3 FlashEff Component Giveaway
Your Ad Here

Awesome Background Light Effects in Flash - 3 FlashEff Component Giveaway


Step 1

Create a new document in Flash, I used 600x500 pixels because it was the area I had for my design. Then select the Rectangle Tool (R) and create a rectangle. Fill the rectangle with gradient. Use Linear for Type, and for the Colors use #040F1E and #2F4462. After that select the Gradient Transform Tool (F) and rotate the gradient. The dark blue will be at the bottom.

Awesome Background Light Effects in Flash - 3 FlashEff Component Giveaway image 1

Step 2

Select the Oval Tool (O) and create an ellipse, then go to Modify>Convert to Symbol (F8) and convert the ellipse to a symbol.

Awesome Background Light Effects in Flash - 3 FlashEff Component Giveaway image 2

Step 3

Editing the symbol, you will have the ellipse in the frame 1, go to the frame 100 and click the right button of the mouse. Select Insert Keyframe. Then with the Subselection Tool (A) edit the shape of the ellipse, move the points to create a different shape.

Awesome Background Light Effects in Flash - 3 FlashEff Component Giveaway image 3

Step 4

In the Timeline, click with the right button of the mouse in a frame between the first and the last and select Create Shape Tween.

Awesome Background Light Effects in Flash - 3 FlashEff Component Giveaway image 4

Step 5

Insert another Keyframe, this time in the Frame 200, then with the Subselection Tool (A) again, modify the shape of the object and apply another Shape Tween in the timeline.

Awesome Background Light Effects in Flash - 3 FlashEff Component Giveaway image 5

Step 6

Repeat the previous step, but for the last image instead of using the Subselection Tool (A) to deform the shape, copy and paste the ellipse of the first layer. Add the Shape Tween again. The idea is that this movie clip will be deforming an ellipse then getting back as an ellipse again, sort of endless loop.

Awesome Background Light Effects in Flash - 3 FlashEff Component Giveaway image 6

Step 7

Back to the Stage view, you will have the instance of the movie clipe you created. Duplicate that instance 3 times. Rotate and scale them like the image below. Then go to the Movie Clip Properties and change the Blend Mode to Overlay. Tip. You can create different movie clips with different shapes and number of frames, it will make it more fluid.

Awesome Background Light Effects in Flash - 3 FlashEff Component Giveaway image 7

Step 8

Select all instances of the ellipse movie clip and go to the Property Panel. Go to Filters and add Blur. Use 150px for the Blur X and Y. Then test your movie. If you want it faster you can edit the movie clip and reduce the number of frames, instead of 1 to 100 make it 1-60 for example.

Awesome Background Light Effects in Flash - 3 FlashEff Component Giveaway image 8

Step 9

Add a text to the stage in a new layer and convert it to Movie Clip, Modify>Convert to Movie Clip (F8). Then go to the Window>Components or F7. Select the FlashEff component and drag it right over the movie clip. That way it will link the component to the movie clip.

Awesome Background Light Effects in Flash - 3 FlashEff Component Giveaway image 9

Step 10

Go to Window>Other Panels>FlashEff Panel. Then select the component you dragged to the stage. Click on the Show tab and select the Pattern tab, you will be able to select the type of effect you want to apply to your movie clip. In my case I used FESDesertIllusion with the default palatinates. Then select the Hide tab. In this tab you can set how the type of effect you want to apply to hide the movie clip. I used the same as the show, so it will appear and disappear with the same effect.

Awesome Background Light Effects in Flash - 3 FlashEff Component Giveaway image 10

Step 11

Here the idea is create a transition to a black background. To do that, create another layer and go to the frame 110. Insert a blank keyframe by clicking with the right button of the mouse and selection Insert Blank Keyframe. With the Rectangle Tool (R) insert a rectangle with the dimensions of the stage. Fill it with black but change the Alpha to 0. Then go to the frame 125 and insert a Keyframe, not a blank this time. Change the Alpha of the rectangle to 100. Then apply a Shape Tween in this layer from the frames 110 to 125.

Awesome Background Light Effects in Flash - 3 FlashEff Component Giveaway image 11

Step 12

Insert frame to all layers in the frame 125. Then add another layer and rename it to logo. Add your logo and convert it to a movie clip. Then add another FlashEff component linked to the logo movie clip and go to the FlashEff panel. Select the Show Tab and set a pattern to make the logo appear in the screen. I used FES3DCamSquareFocus with the default settings. Then just save and test the movie.

Awesome Background Light Effects in Flash - 3 FlashEff Component Giveaway image 12

Conclusion

The blend modes in the new version of Flash CS4 are really cool, they work pretty much the same as in Fireworks and that is great to create some light effects very easily. Also the new interface of Flash is much better, more similar to After Effects.

This was the first time I had the change to play with the new version of Flash and I now, want to play more. Besides that, the FlashEff component is incredible, the effects you can do with it are very professional, and the best thing, you won't waste time trying to figure out a way to create those effects, just select a pattern and voilà.

Another Example



Author's URL: Abduzeedo
Thank you for voting.
Rate this Materials:
Bad 
1 2 3 4 5 Excellent
print this page subscribe to newsletter subscribe to rss

Internet & computing Flash is a vector-based moving graphics format created by Macromedia for the publication of animations on the World Wide Web. More Flash & Swish: Most Popular Materials | Fresh Materials | More Flash Tutorials at FlashPerfection.com

Add comments to "Awesome Background Light Effects in Flash - 3 FlashEff Component Giveaway"

Only registered users can write comment

No comments yet...