+ Reply to Thread
Page 1 of 2 12 LastLast
Results 1 to 10 of 12

Thread: Animated Ripple effect (Simple) - Flash MX 2004

  1. #1
    ahsan16 is offline Learning Programmer
    Join Date
    Jan 2007
    Posts
    34
    Rep Power
    19

    Animated Ripple effect (Simple) - Flash MX 2004

    Create a Graphic Symbol.

    * Import an image to your work area upon which you would like to create ripple effect.
    * Press F8, to convert this image to a symbol.
    * Name this Symbol "girl_gr" and choose graphic behavior. Press OK.
    * Name this Layer "bg".
    * Select girl_gr and choose Alpha 99% from color list box in your property window.

    Create a Movie clip.

    * Press Ctrl+F8, to create Ripple movie clip.
    * Name this symbol "ripple_mc" and choose Movie clip behavior. Press OK.
    * Drag girl_gr to your working area from Library (ctrl+L).
    * Select girl_gr and choose Alpha 0% from color list box in your property window.
    * Insert Keyframe (F6) into the 5th frame.
    * Remaining on the 5th frame, Select girl_gr and choose Alpha 99% from color list box in your property window.
    * Now select 1st frame, choose Motion Tween from Tween list box in your property window.
    * Insert Keyframe into 15th frame and later to 20th frame.
    * Remaining on the 20th frame, Select girl_gr and choose Alpha 0% from color list box in your property window.
    * Select 15th frame, choose Motion Tween from Tween list box in your property window.
    * Insert a new layer above this layer, call it "Layer 2".
    * Select frame 1 of Layer 2 and draw a borderless square or rectangle depending on the type of ripple effect you want.
    In the above demonstration, I have used rectangle with 15 pix as its height.
    * Place this vector wherever you want the ripple to begin. Make sure that the vector belongs only to layer 2.
    * Insert Keyframe into the 20th frame of Layer 2.
    * Place the vector wherever you want the ripple to end or ebb.
    In the above demonstration, I have placed it right at the bottom and reduced the height to 5 pix.
    * Select 1st frame, choose Shape Tween from Tween list box in your property window.
    * Right click on Layer 2 and select Mask.
    * Save (ctrl+S). Make it a habit to save your work after each step you do.

    Insert Ripple Movie Clip onto Scene 1

    1. Now go back to Scene 1.
    2. Insert a new layer above bg layer and call it ripple1.
    3. Insert new Keyframe (F6) into the 10th frame of ripple1 layer.
    4. With 10th frame of ripple1 layer selected, Drag ripple_mc movie clip onto the working area. Place it appropriate to girl_gr. Make sure that this movie clip is placed exactly where you had placed your square or rectangular vector in ripple_mc Movie clip.
    5. Insert frame (F5) into the 30th frame of ripple1 layer. This is just to make sure that the ripple _mc runs only for 20 frame.
    6. Insert another new layer above ripple1 layer and call it ripple2
    7. Insert Keyframe into the 20th frame of ripple2 layer.
    8. With 20th frame of ripple2 layer selected, Drag ripple_mc movie clip onto the working area. Place it appropriate to girl_gr just the way you did in step 4.
    9. Insert frame (F5) into the 40th frame of ripple1 layer. This is just to make sure that the ripple _mc runs only for 20 frame.
    10. Insert frame (F5) into the 40th frame of bg layer.

    Here you go!! Your movie is ready. Press Ctrl+Enter to view your movie. Wasn't it simple.

    Okay now few things to Note - In the above demonstration I have created a subtle ripple effect. If you want the ripples to be more prominent, you can add few more layers of ripple_mc movie clip and reduce the Keyframe differences between layers. Like in the tutorial above, ripples appear every 10 frames. You can reduce this period and make it appear every 5 frames, which would make the ripple effect more prominent.
    Attached Files Attached Files

  2. CODECALL Circuit advertisement
    Join Date
    Always
    Posts
    Many

     
  3. #2
    AfTriX is offline Programming God
    Join Date
    Jan 2007
    Location
    Chicago
    Posts
    586
    Rep Power
    0
    Its a complex to understand. (( May be my knowledge on Flash I think, I'm new to that ))

  4. #3
    ahsan16 is offline Learning Programmer
    Join Date
    Jan 2007
    Posts
    34
    Rep Power
    19
    Moved into a wrong section

  5. #4
    AfTriX is offline Programming God
    Join Date
    Jan 2007
    Location
    Chicago
    Posts
    586
    Rep Power
    0
    No matter wherever it is, you get points for the post, You get viewers either.

  6. #5
    xtraze is offline Programming God
    Join Date
    Dec 2006
    Location
    Sri lanka
    Posts
    911
    Rep Power
    0
    Why not start a category for Flash tutorials ?
    I know there are many Flash tutorials to be added and Flash is related to programming as well.

  7. #6
    AfTriX is offline Programming God
    Join Date
    Jan 2007
    Location
    Chicago
    Posts
    586
    Rep Power
    0
    Ahsan16! you can send a PM to any of the Moderator to asking for a Flash Tutorial Section.

  8. #7
    xtraze is offline Programming God
    Join Date
    Dec 2006
    Location
    Sri lanka
    Posts
    911
    Rep Power
    0
    Not only ahsan16, anyone can ask for it as it is important to learn at least the basics of FLASH. Flash is one step higher than bitmaps, isn't it.

  9. #8
    AfTriX is offline Programming God
    Join Date
    Jan 2007
    Location
    Chicago
    Posts
    586
    Rep Power
    0
    Soon these replies will be noticed by one of the moderator. And they will create such topic.

  10. #9
    shibbythestoner's Avatar
    shibbythestoner is offline Programmer
    Join Date
    Jun 2007
    Location
    Scotland
    Posts
    136
    Rep Power
    0
    A flash board would be nice, I'd enjoy learning some more actionscript.

  11. #10
    panta is offline Newbie
    Join Date
    Dec 2007
    Posts
    1
    Rep Power
    0
    wow. Great tutorial. Served my purpose perfectly.

    Thank you!

+ Reply to Thread
Page 1 of 2 12 LastLast

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Similar Threads

  1. Simple Flash Card Program
    By whitey6993 in forum Classes and Code Snippets
    Replies: 1
    Last Post: 06-28-2010, 02:02 PM
  2. Animated sinus graphic
    By MrBrain in forum C# Programming
    Replies: 0
    Last Post: 06-19-2010, 12:56 AM
  3. My Tutorial Archive: Simple Professiona Text Effect
    By Jaan in forum Photoshop Tutorials
    Replies: 0
    Last Post: 07-25-2009, 03:38 AM
  4. Create a ripple effect
    By ahsan16 in forum Photoshop Tutorials
    Replies: 6
    Last Post: 01-11-2007, 08:55 AM
  5. Microsoft Virtual PC 2004
    By TcM in forum Software Development Tools
    Replies: 6
    Last Post: 12-28-2006, 09:23 AM

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts