Flash
  Home arrow Flash arrow Page 6 - Flash 101 (part 3): Bouncing Around
Dev Shed Forums  
Administration  
AJAX  
Apache  
BrainDump  
DHTML  
Flash  
Java  
JavaScript  
Multimedia  
MySQL  
Oracle  
Perl  
PHP  
Practices  
Python  
Reviews  
Security  
Smartphone Development  
Style-Sheets  
Web Services  
XML  
Zend  
Zope  
Mobile Linux  
App Generation ROI  
IBM® developerWorks  
Forums Sitemap  
E-Commerce Hosting  
Linux Web Hosting  
Managed Hosting  
Small Business Hosting  
VPS Hosting  
Weekly Newsletter

 
Developer Updates  
Free Website Content 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us Get Paid  
Request Media Kit
Contact Us  
Site Map  
Privacy Policy  
Support  
 USERNAME
 
 PASSWORD
 
 
  >>> SIGN UP!  
  Lost Password? 
Google.com  
FLASH

Flash 101 (part 3): Bouncing Around
By: icarus, (c) Melonfire
  • Search For More Articles!
  • Disclaimer
  • Author Terms
  • Rating: starstarstarstarstar / 14
    2000-12-27


    Table of Contents:
  • Flash 101 (part 3): Bouncing Around
  • For The Cool In You
  • The Colour Purple
  • A Tint Of Scarlet
  • Taking The Scenic Route
  • Bouncing Balls
  • Zooming In
  • Curves In All The Right Places
  • Taking A Hint...Or Two...Or Three

  • Rate this Article: Poor Best 
      ADD THIS ARTICLE TO:
      error-file:tidyout.log Del.ici.ous error-file:tidyout.log Digg
      error-file:tidyout.log Blink error-file:tidyout.log Simpy
      error-file:tidyout.log Google error-file:tidyout.log Spurl
      error-file:tidyout.log Y! MyWeb error-file:tidyout.log Furl
    Email Me Similar Content When Posted
    Add Developer Shed Article Feed To Your Site
    Email Article To Friend
    Print Version Of Article
    PDF Version Of Article

     
     
    ADVERTISEMENT


    Flash 101 (part 3): Bouncing Around - Bouncing Balls
    ( Page 6 of 9 )

    Motion tweening is a great way to create animation clips that look good and are simple to put together - as this next example demonstrates.



    How did I do this? Very simple.

    First, draw a circle on the Stage and fill it with a gradient fill - I've used blue, but feel free to experiment - to create a smooth bouncing ball. Convert it to a graphic symbol - you'll be using this symbol throughout the exercise.



    Next, select frame #7, insert a new keyframe, and move the ball vertically downwards. Use the scaling handles to flatten it vertically and stretch it horizontally, so that it looks like it's been squashed.



    Go back to frame #1 and create a motion tween between the two keyframes (you can also do this by right-clicking anywhere between the two keyframes and selecting the "Create Motion Tween" command)

    Now, move on to frame #14, insert a new keyframe, and move the ball back up to its original location. Pop open the Transform panel, and use the Reset button (bottom right corner) to restore the symbol to its original state. Insert a motion tween between frame #7 and frame #14.



    When you play your clip, you'll see something like this:



    If you think the clip would look better if it played a little faster, you can alter the frame rate through the Modify -> Movie dialog.



    There are just a couple more steps to this animation. First, select frame #7 (the flattened ball) and move the symbol about 100 pixels to the left. Do the same with frame #14, the final keyframe, except that the symbol should be moved to the right When you play the clip, the ball will appear to bounce across the screen.



    And finally, the fade-in/fade-out effect. Select the ball in the first frame, and use the Effects panel to add an alpha effect, so that the ball is partially transparent. Do the same for the final keyframe.This time, when you play the clip back, the ball will slowly solidify as it moves downwards, and fade out as it bounces upwards.



    How long did that take? About five minutes, I'd say - and the result is a pretty good-looking animation clip. Plus, since the entire clip is built using a symbol, you can easily alter the colour and size of the ball in symbol-editing mode, and have your changes immediately reflected in the clip itself. Try it yourself and you'll see what I mean!

    This article copyright Melonfire 2000. All rights reserved.

     
     
    >>> More Flash Articles          >>> More By icarus, (c) Melonfire
     

       

    FLASH ARTICLES

    - An Overview of Flash and ActionScript
    - Building Web Forms In Flash
    - Building Data-Driven Flash Movies
    - Flash 101 (part 6): The Final Countdown
    - Flash 101 (part 5): Spiralling Out Of Control
    - Flash 101 (Part 4): Don't Touch Me!
    - Flash 101 (part 3): Bouncing Around





    © 2003-2009 by Developer Shed. All rights reserved. DS Cluster 2 Hosted by Hostway
    For more Enterprise Application Development news, visit eWeek