Thomas Joos | mobile application developer

(re)create your thoughts and expand your limits.

Flash actionscript 3: Pixelfumes’ AS3 Reflection class

with 26 comments

We all have seen the new web 2.0 style. Everything reflects on the ground.. sometimes it’s nice, sometimes it is quite an overkill. But if you think a reflection could be impressive in a project or design you are working on, the Reflection class could come in handy.

Pixelfumes guru Ben Pritchard released an actionscript 3 reflection class which reflects static objects ( bitmap or movieclip ) for you. The Reflection class as3 also supports updating. This means when the movieclip ‘changes’, the reflection will too. If you ever would feel the need to reflect an flv for example, it would be no problem no more.

First of all, you can download the class here, and here’s an example of how to use it when trying to reflect a movieclip

import com.pixelfumes.reflect.*;
var r1 = new Reflect({mc:ref_mc, alpha:50, ratio:50, distance:0, updateTime:-1, reflectionDropoff:0});

as you see you need to fill in some properties, the alpha rate of the reflection, his gradient ratio, the distance, an updateTime ( if you have a changing mc like an flv for example, it needs to bee updated, but when you use a static object, this is not really necessary so just put -1 ) and then finally you give a reflectiondropoff value, this simply specifies how large the reflection should be, the gradient ratio just specifies how quickly the reflections loses his opacity.

if you would like to know more about the class you should absolutely visit adobe’s developer center

Thomas

Advertisements

Written by vilebody

November 8, 2007 at 11:20 pm

Posted in as3

Tagged with

26 Responses

Subscribe to comments with RSS.

  1. I have a problem where I am only getting half an image as a reflection. The left side is missing. I have tried everything and the problem still persists. Are you aware of such a result?

    sam

    March 23, 2008 at 8:22 am

  2. I am not aware of this result sam. Seems weird. Do you have this effect with every image you try to reflect?

    vilebody

    March 23, 2008 at 10:46 am

  3. Hi everybody and thanx for the class.

    I’ve got some problem with it. When I import the class the output window tells me that flash could not load the package. Should i have other classes installed?

    thank you.

    Adriano

    April 25, 2008 at 8:00 pm

  4. if you just place the class file in the same directory as the fla you do not have to import anything, if you want to import it, make sure the class is located in your classpath :)

    you can configure the classpath via the publish settings.

    grtz Thomas

    vilebody

    April 26, 2008 at 9:13 am

  5. Excellent class, very simple, and very cool FX :)

    xarald

    June 9, 2008 at 3:56 pm

  6. bs class, bs website

    sean

    June 24, 2008 at 9:19 am

  7. I updated the class to use a Sprite. It has no specific MovieClip properties and MC extends Sprite so it is better to just use Sprite. My project needed Sprite anyway. :-)

    Lemme toy around some more but so far it looks pretty cool.

    John C. Bland II

    July 9, 2008 at 11:03 pm

  8. The problems you’re experiencing is due to the placement of the clip. The Reflection-class creates a snapshot of the clip’s x:0,y:0 coorinates and upwards. Which means that any content outside these coordinates (as in negative coordinates) will not be concidered.

    – Roar

    Roar Johansen

    July 11, 2008 at 12:56 pm

  9. What if the image is coming in dynamically… As in from a UILoader component. What can we do to make it work that way?

    Blake Rogers

    August 4, 2008 at 10:53 pm

  10. or say with the following code:

    var imageLoader:Loader;

    function loadImage(url:String):void
    {

    // Set properties on my Loader object
    imageLoader = new Loader();
    imageLoader.load(new URLRequest(url));
    imageLoader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, imageLoading);
    imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, imageLoaded);

    }

    loadImage(“Test.png”);

    function imageLoaded(e:Event):void
    {
    // Load Image
    imageArea.addChild(imageLoader);
    }

    Blake Rogers

    August 5, 2008 at 11:35 pm

  11. does the latest version support masked movieclip?

    GamicPress

    September 20, 2008 at 12:55 pm

  12. How do I add a reflection to that ^ once I’ve imported the class?

    Andrew

    September 22, 2008 at 10:08 pm

  13. ..sorry it erased my example.

    How do you add a reflection to a simple mx:Image ? Anyone have a complete example?

    Andrew

    September 22, 2008 at 10:09 pm

  14. how can i use this for bitmap?

    gireesh

    November 6, 2008 at 9:28 am

  15. I seem to have the same problem that Sam does… the thing is that my reflection’ setting don’t seem to work at all as them should… my reflection is way below my movieclip even though the distance is set to 0, half the size (only the right sid is showing) an it only shows when the ratio is set to over, let’s say 180… can someone help please…

    clutch16b

    November 18, 2008 at 4:27 pm

  16. oke, I’ve solved my problem with this class… it’s working just fine as long as the target’s x and y values are 0… that’s fine with me, no bothers there… but something else came up. If I try to embede my flash movie in a html file and I set it’s windows mode value from windows to windowsless or transparent, the whole movie start’s to flicker and I mean really move around… cane someone confirm that and could someone help please…
    10x alot…

    cluth16b

    November 26, 2008 at 12:56 am

  17. Hi everyone,

    I did everything as per instructions, inserted the code in the first frame in the fla file:

    import com.pixelfumes.reflect.*;
    var r1 = new Reflect({mc:ref_mc, alpha:39, ratio:70, distance:5, updateTime:-1, reflectionDropoff:0});

    I have a movie clip with instance name ref_mc and placed the whole folder called com/pixelfumes/reflect in the same directory as the fla but it doesn’t work. My picture appears unreflected. Can someone help me and tell me if I am doing everything right, please. I haven’t used actionscript files and classes before, just simple actionscript 3 within flash cs3.

    Cheers

    Emiliya

    December 6, 2008 at 7:39 am

  18. Hi there,

    Relatively new to custom classes. I do have a question about combining Relect with PaperVision? I am still combing though tutorials and making my way in forums, but does anyone know of a good tutorial for combining the two? Even if its just a tip, that would be appreciated.

    This is a great class.

    Aric

    December 14, 2008 at 6:48 am

  19. Can someone post a link to download the working fla so I can try. I am having always an error.

    I am not sure where I’ll type the code, if in the Fla or inside Reflect.as. If someone can tell some more details i’ll appreciate.

    Rui Ganga

    December 30, 2008 at 2:47 am

  20. Hey I was having same problem as Sam and clutch. Fixed the half width thing but the reflection is still way low. What am I doing wrong? I have my coordinates set to 0,0 on my mc (like my origin point)

    Jeff

    January 13, 2009 at 6:55 am

  21. Emiliya,

    Did you figure out that you need to name the var r1:Reflect? Your code instance simply has r1.

    -e

    ervman

    February 6, 2009 at 5:34 am

  22. Hey there, I’m trying to use ur class on pictures stored in a Loader var, how do I work around that? I’m loading them from a XML feed, Any help appreciated.

    Ty.
    Kb@s-co.dk

    Kasper

    February 23, 2009 at 12:46 pm

  23. Hi,
    If I use this class in CS4 it makes only half object.
    Does anyone know how to fix it?
    3D tool was used too…

    Gesha

    March 27, 2009 at 8:15 am

  24. Hey all!

    Would also like to know if its possible to get it to reflect an image loaded in from UILoader? I can easily get it to reflect the sprite containing the loaded images, but it wont reflect the images.

    It makes sense, since its parameters expects a movieclip (or sprite, i altered it), but is there any way of changing that parameter to read a string such as a path to e.g an array?
    This way if you passed in a string, the reflect class could treat the returning value as sprite/movieclip.

    Not sure if this is possible at all, or if there is an easier way of doing it, but I sure would like to know if anyone else had success using this with UILoader?

    Cheers

    steff

    Steff

    May 5, 2009 at 1:21 am

  25. Hi,
    I am trying to create a reflection of a symbol by using the Pixelfumes’ Reflect class. However I got an error reading “5007:An ActionScript file must have at least one externally visible definition.” I don’t know what this means and I don’t know what I’m doing wrong. Here is my setup:
    I placed my symbol with an instance name “menu_mc” in Scene 1. and on a second layer I put the code:
    import com.pixelfumes.Reflect; (which is in the same folder with the fla file)
    r1 = new Reflect({mc:menu_mc, alpha:85, ratio:255, distance:1, updateTime:.33, reflectionAlpha:90, reflectionDropoff:1});

    I would appreciate any help with that!

    Mike

    June 12, 2009 at 8:30 pm

  26. I’m trying to get this to work, my movie clip is called homemc. I used the exact code that came in the readme.txt but obviously adjusted the name of the mc to match mine. No error is reported but no reflection is occuring.

    Amber

    July 13, 2009 at 1:32 am


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: