Output:


Download Source File

Step 01: Create a new flash document.

Step 02: Open the components panel, Windows -> Components or press Ctrl+F7.

Step 03: In the components panel scroll down to User Interface section, click it to open the components. Find the Loader component.

Step 04: Click and drag the Loader component on to the main stage.

Step 05: Change the dimensions of the component according to your image dimension by opening the properties panel (Ctrl+F3).

Step 06: Left click on the Loader component and opent the properties panel (Ctrl+F3). Give ImageLoader as the instance name.

Step 07: Right click on the Loader component and select convert to symbol.

Step 08: Give ImageLoader as the name and select Movie clip as type.

Step 09: Left click on the ImageLoader movie clip and open the properties panel (Ctrl+F3) and give "image" as the instance name.

Step 10: Let us write simple actionscript to load the image into the loader component.
Left click the first frame and press F9 to open the action panel.
Copy and paste this code,



image.ImageLoader.contentPath="logo.jpg";



logo.jpg is the image we are going to load in the loader component. The .swf file and .jpg file must be in the same path.

Step 11: Press Ctrl+Enter to test whether the image is being loaded correctly.

Step 12: Left click on the ImageLoader movie clip and copy it. Right click on the main stage and select paste in place.
Align the pasted movie clip as below,

Step 13: Left click on the new movie clip and open the properties panel, change the instance name to image2.

Step 14: Left click on the new movie clip, press Ctrl + T to select Free Transform Tool.
Flip the movie clip from right to left.
Flip the movie clip from bottom to top.

Step 15: Right click on the new movie clip and select convert to symbol. Give ImageRef as name and select Movie clip as type.

Step 16: Double click on the ImageRef movie clip, now create a new layer.

Step 17: Select rectangle tool from tools panel or press R to select it.

Step 18: Remove the Stroke color and give the fill color same as background color.

Step 19: Draw a rectangle on layer 2, with same dimension and coordinates of the ImageLoader Movie clip.

Step 20: Left the rectangle, open the color mixer panel.
Windows -> Color Mixer or press Shift + F9

Step 21: In color mixer panel select type as Linear, click on the right marker and select alpha to 70%. Left the left marker and select color same as background color.

Step 22: Finally we need to add actionscript to load the image on th reflection movie clip.
Click on the first frame of the ImageRef movie clip and press F9 to open actionscript panel.

Copy and Paste this code:



image2.ImageLoader.contentPath="logo.jpg";




Step 23: Press Ctrl+Enter to test the movie.

- End of Tutorial.

Labels: ActionScript 2, Dynamic, Flash, Flash Intermediate, Reflection, Tutorials

Post a Comment

i dont get it...

in the end the output is error!.. why??

By  Agnes Carmela, at October 2, 2008 4:00 AM  

hi..
can you be more specific.. whats the error you are getting?

By  makubex, at October 2, 2008 5:15 AM  

**Error** Scene=Scene 1, layer=Layer 1, frame=1:Line 1: Statement must appear within on/onClipEvent handler
image.ImageLoader.contentPath="logo.jpg";

By  Paddy Griffin, at December 22, 2008 6:31 AM