• home
  • forum
  • my
  • kt
  • download
  • Incredibly realistic coffee smoke effect

    Author: 2009-03-25 10:19:17 From:

    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:

    Step 25

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

    Step 26

    Click after that on frame 4 and press F6 key. Then, make this position of smoke shape:



    Step 27

    While you're still on frame 4, press F6 key four times.

    Step 28

    Go back now on frame 5 and make this position of smoke shape:



    Step 29

    Select now frame 6 and make this position of smoke shape:



    Step 30

    Select now frame 7 and make this position of smoke shape:



    Step 31

    Select now frame 8 and make this position of smoke shape:



    Step 32

    Select now frame 10 and press F6 key on the keyboard. While you're still on frame 10, make this position of smoke shape:



    Step 33

    While you're still on frame 10, press F6 key on the keyboard three times:

    Step 34

    Go back now on frame 11 and make this position of smoke shape:



    Step 35

    Go back now on frame 12 and make this position of smoke shape:



    Step 36

    Go back now on frame 13 and make this position of smoke shape:



    Step 37

    Click now on frame 15 and 19 and press F6 key. While you're still on frame 19, make this position of smoke shape:



    Step 38

    Go back now on frame 15, and make this position of smoke shape:



    Step 39

    Select again frame 19 and press F6 key on the keyboard eleven times. Then, make the positions of smoke shapes for every frame like it is shown on the picture below!

    frame 20



    frame 21



    frame 22



    frame 23



    frame 24



    frame 25



    frame 26



    frame 27



    frame 28



    frame 29



    frame 30



    Step 40

    Click now on frame 33 and press F6 key. While you're still on frame 33, make this position of smoke shape:



    Step 41

    While you're still on frame 33, press F6 key on the keyboard then times. Then, make the positions of smoke shapes for every frame like it is shown on the picture below!

    frame 34



    frame 35



    frame 36



    frame 37



    frame 38



    frame 39



    frame 40



    frame 41



    frame 42



    frame 43

    Step 42

    Click now on frame 45 and 48 and press again F6 key on the keyboard.

    Step 43

    While you're still on frame 48, make this position of smoke shape



    Step 44

    Go back now on frame 45 and make this position of smoke shape:

    Step 45

    Select again frame 48 and press F6 key on the keyboard four times. Then, make the positions of smoke shapes for every frame like it is shown on the picture below!

    frame 49



    frame 50



    frame 51



    frame 52



    Step 46

    Click now on frame 54 and press F6 key. While you're still on frame 54, press F6 key on the keyboard four times. Then, make the positions of smoke shapes for every frame like it is shown on the picture below!

    frame 54



    frame 55



    frame 56



    frame 57



    frame 58



    Step 47

    Click now on frame 60 and press F6 key. While you're still on frame 60, make this position of smoke shape:



    Step 48

    If now connected all images into one, you will get this:



    Step 49

    Select now layer 2 and go to the Properties Panel (Ctrl+F3) below the stage. On the left side, you will see Tween drop down menu. Select Motion on it.



    Step 50

    Create now a new layer above the layer 2 (layer) 3. Then, go back on the first frame of layer 2 and press Ctrl+C key (Copy). After that, select frame 1 of layer 3 and press Ctrl+Shift+V key (Paste in place).

    Step 51

    Move now that shape a little down. See the picture below!



    Then repeat the long process that we have worked from the 25 steps to 46 steps.

    Step 52

    Now, create as many layera as needed to get this kind of shape:



    Step 53

    Go back now on the previous scene (Cup).



    Step 54

    Select now the Selection Tool (V) and click once on the smoke shape to select it. Then, go to the Properties Panel (Ctrl+F3) below the stage. On the right, you will see the Color menu. Select Alpha in it and put it down to 8%.



    We're done!

    This lesson is very difficult to do, so I will note if you have problems with the construction, download source file at the end of tutorials and see what next!

    Have a nice day!

    Download source file (.fla)

    discuss this topic to forum

    relation tutorial

    No information

    Category

      3D (32)
      Math Physics (17)
      3rd Party (9)
      Navigation (69)
      Actionscripting (194)
      Optimization (17)
      Animation (150)
      Projector (11)
      Audio (53)
      Special Effects (169)
      Backend (26)
      Text Effects (86)
      Drawing (32)
      Tips and Techniques (47)
      Dynamic Content (32)
      Tricks (8)
      Games (101)
      Utilities (23)
      Getting Started (92)
      Video (56)
      Interactivity (45)
      Web Design (33)

    New

    Hot