Jump to content

Animated Ripple effect (Simple) - Flash MX 2004

- - - - -

This topic has been archived. This means that you cannot reply to this topic.
11 replies to this topic

#1
ahsan16

ahsan16

    Learning Programmer

  • Members
  • PipPipPip
  • 36 posts
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



#2
AfTriX

AfTriX

    Programming God

  • Members
  • PipPipPipPipPipPipPip
  • 586 posts
Its a complex to understand. (( May be my knowledge on Flash I think, I'm new to that ))

#3
ahsan16

ahsan16

    Learning Programmer

  • Members
  • PipPipPip
  • 36 posts
Moved into a wrong section :D

#4
AfTriX

AfTriX

    Programming God

  • Members
  • PipPipPipPipPipPipPip
  • 586 posts
No matter wherever it is, you get points for the post, You get viewers either.

#5
xtraze

xtraze

    Programming God

  • Members
  • PipPipPipPipPipPipPip
  • 910 posts
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.

#6
AfTriX

AfTriX

    Programming God

  • Members
  • PipPipPipPipPipPipPip
  • 586 posts
Ahsan16! you can send a PM to any of the Moderator to asking for a Flash Tutorial Section.

#7
xtraze

xtraze

    Programming God

  • Members
  • PipPipPipPipPipPipPip
  • 910 posts
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.

#8
AfTriX

AfTriX

    Programming God

  • Members
  • PipPipPipPipPipPipPip
  • 586 posts
Soon these replies will be noticed by one of the moderator. And they will create such topic.

#9
shibbythestoner

shibbythestoner

    Programmer

  • Members
  • PipPipPipPip
  • 135 posts
A flash board would be nice, I'd enjoy learning some more actionscript.
Posted Image

#10
panta

panta

    Newbie

  • Members
  • Pip
  • 1 posts
wow. Great tutorial. Served my purpose perfectly.

Thank you!

#11
DevilsCharm

DevilsCharm

    Programming God

  • Members
  • PipPipPipPipPipPipPip
  • 884 posts
I'll have to look over this a few more times to fully comprehend it but it looks pretty good.

#12
Guest_duabevnh_*

Guest_duabevnh_*
  • Guests
Book Video training
Book Video Training