Flash tutorials
Home 3D (2) Actionscripting (66) Animation (108) Audio (4) Drawing (7) Full flash sites (4) Getting Started (15) Navigation (25) Special Effects (61) Text Effects (38)

Incredibly realistic coffee smoke effect

12.1.2009, 20:18    Total views: 107190
Page:  1  2  3

I drink good coffee every morning. Today, coffee is one of the most popular beverages worldwide, so I have decided to make and show you how to create incredibly realistic coffee smoke effect. Using this very advanced and realistic effect, you will see how to draw smoke shape, how to animate it, how to convert it into a Movie Clip Symbol, how to apply alpha effect on it and much more. You don't have to use action script code to make this lesson. Let's go!

Example:



Step 1

Create a new flash document. Press Ctrl+J key on the keyboard (Document Properties) and set the width of your document to 421 pixels and the height to 278 pixels. Select any color as background color. Set your Flash movie's frame rate to 32 and click ok.





Step 2


Save now the picture below!



Step 3

Choose now File > Import > Import to Stage (Ctrl+R) and import the picture that you just saved into a flash stage!

Step 4

While the picture is still selected, go to the Align Panel (Ctrl+K) and do the following:

1. Make sure that the Align/Distribute to Stage button is turned on,
2. Click on the Align horizontal center button and
3. Click the Align vertical center button.



Step 5

Call the current layer background. Double-click on its default name (Layer 1) to change it. Press Enter once you have typed in the new name.

Step 6

Download now Png picture of cup of coffee.

Step 7

Go back now into a flash and create a new layer above the layer background and name it cup of coffee.



Step 8

Select now cup of coffee layer and choose File > Import > Import to Stage (Shortcut key: Ctrl+R) and import a png picture of cup of coffee into a flash stage!

Step 9

After that, place that picture on the position like it is shown on the picture below!



Step 10

While the picture is still selected, press F8 key (Convert to Symbol) to convert it into a Movie Clip Symbol.



Step 11

Double-click on the movie clip on stage with the Selection tool(V).You should now be inside the Movie Clip.



Step 12

Create now a new layer above the layer 1 and name it smoke effect.

Step 13

Select now the Pencil Tool (Y), for Pencil Options choose Smooth and draw a shape like it is shown on the picture below!





Step 14

While the smoke shape is still selected, press F8 key (Convert to Symbol) to convert it into a Movie Clip Symbol.



Step 15

Double-click on the movie clip on stage with the Selection tool(V). You should now be inside the Movie Clip.



Step 16

While the smoke shape is still selected, press again F8 key (Convert to Symbol) to convert it again into a Movie Clip Symbol.



Step 17

Double-click on the movie clip on stage with the Selection tool(V). You should now be inside the Movie Clip.



Step 18

Click now on frame 30,31 and 60 and press F6 key.

Step 19

While you're still on frame 60, using the Free Transform Tool (Q), change smoke effect shape like it is shown on the picture below!



Step 20

Go back now on frame 31 and make this smoke shape:



Step 21

Select now frame 30 and make this shape:



Step 22

Right-click anywhere on the gray area between frame 1 and 30 and frame 31 and 60 on the timeline and choose Create Motion Tween from the menu that appears.



Step 23

Go back now on the previous scene (Smoke_Effect_mc).



Step 24

Create now a new layer above the layer 1 (layer 2). Select now layer 2, take again the Pencil Tool (Y) and draw this smoke shape:

Have questions about this tutorial?
Visit our friendly Community Forums!
Digg it! Add this tutorial to del.icio.us! Furl it! Add this tutorial to reddit! Spurl it! Add this tutorial to technorati!

Top tutorials

1. Advanced full flash site - Part 1
Total views: 292626

2. High-tech city animation
Total views: 240614

3. Water effect
Total views: 224809

4. Photo slide show
Total views: 207528

5. Special Picture Effect
Total views: 183302



Related links