Wednesday, January 21, 2009

How To: Create Realistic Candle Effect (Part II)

Following up the previous tutorial: How To Create Realistic Candle Effect (Part I) , today we will learn how to animate the flame of the candle using simple shape tweening.

I would recommend you to follow the last tutorial before going into this one as this will a continuation from the last.

The Final Effect:




Step 1) Starting from the last tutorial, you should have the following image: the candle body and the flame in separate layers.


Step 2) Insert -- New Symbol (Ctrl+F8) and create a new movie clip symbol called circle.

Step 3) Use the Oval Tool (R) and draw an oval which will indicate as the light around the flame. Select the circle and open up the Color Panel (Shift+F9) or Window -- Color.

Step 4) Settings for Color - Stroke: None, Fill: Radial.


The one on the left: #FFFF00 , Alpha: 100%.
The one in the middle: #FFFF6E , Alpha: 75%.
The one on the right: #FFFFCC , Alpha: 0%.

Step 5) Insert Keyframes at frame 15 and 30. Click on frame 15, select the circle and go to Modify -- Transform -- Scale and Rotate (Ctrl+Alt+S). Set Scale to 130%.



Step 6) Right-click anywhere from Frame 1-15 and select shape tween and do the same also to frame 15-30.


Step 7) Now exit that Movie Clip and onto your main scene with the Candle.


Step 8) Create a new layer on top of you flame and candle layers. Drag the circle you've just created from the Library (Window -- Library or Ctrl+L) and onto the stage. Place it over the flame and open up the Properties Panel via Ctrl+F3 (you should always keep the properties panel open as you will need to use it often). For color select Alpha and adjust it to 50%.




Step 9) Lock the Circle Layer and turn the Visibility to Off. At frame 50, Insert Keyframes (F6) for all three layers. On the flame layer, Insert a Keyframe at Frames: 7, 13, 19, 26, 33 ,39, 45.




Step 10) Use the Selection Tool (V) and alter the shapes of the flames in Frames: 7, 13, 19, 26, 33 ,39, 45 (It might take a while but be patient and adjust all the flames carefully). Frame 1 and 50 must maintain the same flame for a smooth transition when repeating the animation. See the image below.


  
Step 11) Shape Tween everything between frame 1 and 50.




Ctrl+Enter to test you movie and finished! That is all for animating a realistic candle.


Last Part: How to: Create Realistic Candle Effect (Part I)  


Please feel free to comment or ask any questions and finally, don't forget to Subscribe!

17 comments:

  1. very good!good learning experience these cool tutes are actually the essence of knowledge

    ReplyDelete
  2. thanx alot. in a simple effect u made us learn quite alot abt flash. n especially dis was da perfect tutorial for newbies

    ReplyDelete
  3. Thanks a lot this is so helpful.

    ReplyDelete
  4. very good tutorial

    ReplyDelete
  5. To Everyone:
    It is my pleasure to share my knowledge with everyone, hope they were helpful and thanks for supporting my blog.
    -Learn2Flash-

    ReplyDelete
  6. superb animation for beginners,
    helped me a lot,
    thanks.

    ReplyDelete
  7. Too good for beginners,
    helped me a lot,
    thanks.

    ReplyDelete
  8. This comment has been removed by a blog administrator.

    ReplyDelete
  9. Excellent. Excellent. Excellent. Best tutorials around. Good work.

    ReplyDelete
  10. Really Good Animation! Thanks!

    ReplyDelete
  11. excellent animation, simple but superb... thanks

    ReplyDelete
  12. thnks a lot..its very nice

    ReplyDelete
  13. Always need this kind good quality information on the web which helps us even to learn new things. Rocked with photoshop and i wish you to post more interesting topics.

    ReplyDelete
  14. Awsum tutorial Thank you so much for this! (^^) 5*

    ReplyDelete