Wednesday, 29 July 2009

Create reflection with Actionscript 3

I found an article over at Adobe.com which shows you how to add reflections to movie clips using a custom class. Reflections are quite a common effect that can be seen in various websites, adverts and galleries. It is possible to manually create reflections by duplicating the movie clip, flipping the y-axis and lowering the alpha property. However, if you have lots of movie clips on the stage this would take a long time especially if you need to make any changes afterwards. This problem can be solved by using a custom reflection class to dynamically applied reflections to a movie clips.

The reflection class can be downloaded for free at the same website. To fully understand each part of the code you can read the articles at Adobe.com, which describes the code in detail.

Below I will briefly discuss how to use and install the reflection class.


Create reflection with Actionscript 3.0

Step 1

Firstly, download the reflection class from Adobe.com. Then unzip the ‘com’ folder into a directory of your choice. Open up a Flash AS3 file and save the file in the same directory as the ‘com’ folder.


Step 2

Select any shape rectangle tool and create a basically shape on the stage. Convert the shape in a symbol then give your symbol an appropriate name, check movie clip, select the top left registration point and click ok.

Give your symbol the instance name ‘reflection_mc’.


Step 3

On timeline create a new layer called ‘Actions’ then hit F9 to open up the actions panel and enter the following code:

//1.
import com.pixelfumes.reflect.*;

//2
var r1:Reflect=new Reflect({mc:reflection_mc,alpha:50,ratio:50,distance:0,updateTime:0,reflectionDropoff:1});

Code:
1. This defines the package path for the Reflect class.
2. This creates a new instance of the Reflect class the parameters are described below:

* Alpha – This is the transparency of the reflection. If the alpha is 100 then the reflection will be completely opaque, and if the alpha is 0 it will be invisible.
* Ratio – This is the gradient mask ratio, increasing this number will show more of the reflection.
* Distance – This is the distance of the reflection from the original movie clip.
* Update Time – This is for animations or video clips.


Step 4

Test your reflection Ctrl + Enter.




You should now have a reflection on your rectangle shape. Why not try the reflection effect on text or images? Below I have listed a few reasons why the reflection is not visible.


Why can’t a see any reflections?

* Make sure you have saved you .fla file and it is in the same directory the reflection class.
* Make sure you have selected the top left registration point when you created a symbol.
* Make sure the alpha is not set to 0.

3 comments:

Search engine- 22 January 2010 at 04:56  

ok but i get 4 error mesages:
1. 1172: Definition com.pixelfumes.reflect could not be found.
2.1172: Definition com.pixelfumes.reflect could not be found.
3.1046: Type was not found or was not a compile-time constant: Reflect.
4.1180: Call to a possibly undefined method Reflect.
I downloaded the reflect_class_as3 at http://www.adobe.com/devnet/flash/articles/reflect_class_as3.html
i am working with flash cs 4 as3
but i dont know where to put the file if you can tell me bicause i just started and right now i need help :s please :(((((

iliketo 22 January 2010 at 07:57  

@search engine

Make sure the reflection class is in the same folder as your fla file as mentioned in step 1.

Obviously you have copied and pasted the code without even reading necessary steps.

Search engine- 23 January 2010 at 01:02  

:))) ok i got it i tought that i need to put com file in some directory where i instaled flash
but i got it wrong
for every 1 who have same problem
lets make this clearly when you create priject(move clip and you put the cod and istance name ) you need to save your file in same directory where is your com file and then reflection will work.

  COPYRIGHT © 2014 · ILIKE2FLASH · Theme by Ourblogtemplates

Back to TOP