Here the final result:
Note: The screenshots in this tutorial are made in Flash CS3. It works exactly the same in Flash 8. This tutorial is ActionScript 2 (Although no ActionScript is required).
Select this image and convert it into a Movieclip [press F8] or right click on the MovieClip -> “Convert to Symbol…”. Give the Movieclip the name “duck”.
Drag the duck Movieclip from your library to the first frame on the timeline. Now click on frame 60 and create a new keyframe [press F6] or right click and “Insert Keyframe”.
Click on the newly created keyframe and select the duck Movieclip on the canvas. Now move this Movieclip with the cursor key to the right (lets say 100px). You can check the new position in the info panel.
Go back to the first keyframe of the timeline. On the property panel select Tween: “Motion”. If you click somewhere in the timeline now, you see that the duck Movieclip is moving from left to right.
Move the animation Movieclip from your library to the first frame of the timeline.
Set the instance name of the Movieclip to “animation_mc” (you can choose a different name if you want. Make sure that the instance name is unique). Without an instance name, the component is unable to detect the Movieclip.
Set the parameter of the component inside the component inspector panel like in the screenshot. All Movieclips with instance names in this frame are listed in the “Target Movieclip” select list. Since you have only one Movieclip, the component assumes, that you want to apply the effect on the Movieclip “animation_mc”.
Note: These settings are only applied to this one instance of the effect component. If you draw the component on another Movieclip (somewhere else inside the .fla or in a new project) you have to set the settings again.
Now export ([press Ctrl-ENTER] or …). You will see that the head of the duck is somehow cut. Thats because the component has exactly the size of the duck Movieclip. But since the reflection wave will increase the size this will not fit any more.
Get back to the duck Movieclip by double-clicking it in your library.
Create a new layer below the tween layer.
Select the rectangle tool and draw a shape with the width of the duck. The height should be a few pixel higher then the duck (about 10 pixel). It might help to set the outline icon in the timeline, to see only the dimensions of the duck image.
With the shape selected open the color panel and set the alpha to 0.
When you test your movie now, you’ll see that the reflection is applied on the hole duck.
You can also download the Water Reflection Effect here.
Requirements
Flash 8, Flash CS3 or Flash CS4.Note: The screenshots in this tutorial are made in Flash CS3. It works exactly the same in Flash 8. This tutorial is ActionScript 2 (Although no ActionScript is required).
Step 1 – Install the effect component
Download the Water Reflection Effect here. Please follow the installation instructions and drag the component from the component panel into the library of your .fla file.
Step 2 – Create duck Movieclip
Import the duck image [press Ctrl-R] or “File” -> “Import” -> “Import on Stage…”. Make sure that the duck image is a .png with transparent background.
Select this image and convert it into a Movieclip [press F8] or right click on the MovieClip -> “Convert to Symbol…”. Give the Movieclip the name “duck”.
Step 3 – Create Animation Movieclip
Create a new Movieclip with [press Ctrl-F8] or Insert -> “New Symbol…”. Name this Movieclip “animation”.
Drag the duck Movieclip from your library to the first frame on the timeline. Now click on frame 60 and create a new keyframe [press F6] or right click and “Insert Keyframe”.
Click on the newly created keyframe and select the duck Movieclip on the canvas. Now move this Movieclip with the cursor key to the right (lets say 100px). You can check the new position in the info panel.
Go back to the first keyframe of the timeline. On the property panel select Tween: “Motion”. If you click somewhere in the timeline now, you see that the duck Movieclip is moving from left to right.
Step 4 – Put animation Movieclip on the main timeline
Now click on “Scene 1″ to get back to the main timeline. If the duck Movieclip is still there, remove it.
Move the animation Movieclip from your library to the first frame of the timeline.
Set the instance name of the Movieclip to “animation_mc” (you can choose a different name if you want. Make sure that the instance name is unique). Without an instance name, the component is unable to detect the Movieclip.
Step 5 – Apply effect component
Create a new layer, select the first frame and drag the effect component from your library onto the animation Movieclip. The component will automatically snap.
Set the parameter of the component inside the component inspector panel like in the screenshot. All Movieclips with instance names in this frame are listed in the “Target Movieclip” select list. Since you have only one Movieclip, the component assumes, that you want to apply the effect on the Movieclip “animation_mc”.
Note: These settings are only applied to this one instance of the effect component. If you draw the component on another Movieclip (somewhere else inside the .fla or in a new project) you have to set the settings again.
Now export ([press Ctrl-ENTER] or …). You will see that the head of the duck is somehow cut. Thats because the component has exactly the size of the duck Movieclip. But since the reflection wave will increase the size this will not fit any more.
Step 6 – Adjust animation Movieclip
To fix this, you will insert a invisible shape in the background of the duck Movieclip, which size up the Movieclip a little.Get back to the duck Movieclip by double-clicking it in your library.
Create a new layer below the tween layer.
Select the rectangle tool and draw a shape with the width of the duck. The height should be a few pixel higher then the duck (about 10 pixel). It might help to set the outline icon in the timeline, to see only the dimensions of the duck image.
With the shape selected open the color panel and set the alpha to 0.
When you test your movie now, you’ll see that the reflection is applied on the hole duck.
Step 6 – Add Background image
Create a new layer below the layer with animation and component. Import an image that match. Now you can change the position of the animation Movieclip to make it fit in with the background.
Download
Click here to download the fla of this tutorial. Note: The .fla includes the trial version of the effect component, which will only work in the Flash IDE (Flash 8, Flash CS3 or Flash CS4) but not inside the browser.You can also download the Water Reflection Effect here.
No comments:
Post a Comment