Dynamic Reflection Generator Class for AS3

Martin Christov on Feb 5th 2010 with 13 comments

Hot on the heels of our Perfect Alpha Reflections Quick Tip comes this excellent utility class for dynamically reflecting your display objects, courtesy of Martin Christov.

How do I use it?

Step 1:

Copy the ReflectEffect.as file into the classpath of your Flash project (or the same directory as your FLA if you’re not using classpaths).

Step 2:

In your code, create a new instance of the ReflectEffect class, passing it the display object that you want it to reflect, like so:

var reflect:ReflectEffect = new ReflectEffect(movieClipToReflect);

Step 3:

Create a new variable for your reflected object and add it to the stage (or wherever you like):

var reflectedDown:Bitmap = reflect.down(length, fade, offset, blur, alpha);
reflectedDown.y = movieClipToReflect.y + movieClipToReflect.height;
addChild( reflectedDown );

The functions reflect.down(), reflect.up(), reflect.left() and reflect.right() will return a Bitmap of your object reflected in that direction. (Only the “length” parameter is required, the rest are optional.) As you see, you’ve got a few interesting options.

I think “length” is clear. So let’s take a look at “fade”. For example, if you put 40 for length and 30 for fade, the reflection is going to end 10px behind the actual reflection. Or, if you’d like you can set 40 for length and 50 for fade. This will make the reflection go from an alpha of 1.0 to something like 0.2.

The next is very interesting: “offset”. This basically moves your reflection up/down (or left/right) inside the Bitmap output. I use this option in the preview so that you can move your object around and see a Mac-like effect.

The last two parameters, “blur” and “alpha”, are pretty clear — take a look at the comments in the class for more info!

Enjoy, and let us know how you use this class :)

 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By Martin Christov

Rollover to read this author's bio or click through to see a full list of posts by this author.

I'm a 21 year old freelance developer from Bulgaria & a big fan of Envato - it gives a whole new sense to our digital professions. I enjoy being a part in any way.  

Plus Premium
 
 
Add Comment

Discussion 13 Comments

  1. gm says:
    February 5, 2010 at 2:05 am

    Hey, it’s dramatically slow!
    Optimize the code.
    Why not use PixelBender?

    Reply
  2. Bruno Crociquia says:
    February 5, 2010 at 2:43 am

    Nice class, thanks for sharing, just one thing,when i drag the label near a corner the frame rate drops instantly making it very laggy…Is it just me? Tested on Chrome and Firefox. I’m in a quad core and don’t usually experience frame drops… but my graphic card has been acting funny lately.

    Reply
  3. stryju says:
    February 5, 2010 at 4:57 am

    needs A LOT of speed up…

    Reply
    • stryju says:
      February 5, 2010 at 5:01 am

      tips:

      - why not to create (if blur is a must…) one blur instance and then apply the fade by manipulation sprites’ graphics ( beginGradientFill() ) ?
      - is the blur really a must? as u can see – it slows it a LOT…

      Reply
  4. Martin Christov says:
    February 8, 2010 at 10:14 pm
    Author

    So slow?! I see some lagging only if you drag it to some of the corners and you have two reflections.

    stryju, blur is optional. you can set it off when instancing the reflection. Anyway, I don’t think this is a problem.

    Reply
    • Karl Macklin says:
      February 9, 2010 at 4:45 am

      I’ll have to agree with the others – I see a 45% CPU usage in Firefox (going from 0-1% when there’s no flash showing), when draggig the logo to any (single) edge.

      Definitely needs optimization!

      Reply
  5. Martin Christov says:
    February 9, 2010 at 12:19 pm
    Author

    Well then at this point it is no good for using it the way I have for the preview.

    However, if you are instancing a reflection only once (not on mousemove as my app does) it will do you a perfect job.

    After all – it’s a freebie. Don’t use it if you don’t like it. :)

    I’ll take a look at ways of optimizing it when I have some spare time…

    Regards,
    Martin

    Reply
  6. _mark says:
    February 28, 2010 at 10:46 am

    Lag. Better solutions exist.

    Reply
  7. joene says:
    March 3, 2010 at 5:38 am

    pfff, why is everything for CS4, can’t open it on CS3

    Reply
  8. Ngộ Độc says:
    March 9, 2010 at 3:42 am

    haha ! NEED MORE SPEED

    it’s very lag when i draging it near mirror

    Reply
  9. Jeremy says:
    March 11, 2010 at 2:48 pm

    No lag problem for my two years old Mackbook Pro, thanks for this helpful tip Martin!!

    Reply
  10. surf says:
    July 28, 2010 at 8:48 am

    martin….some good work… just that… u need to ave a look at your code again,
    if statements dont have any open or closed brackets,
    variables instances needs classification to demonstrate wether its an integer, number , object….
    its free but dat dont mean u doin us a favour..

    Reply

Add a Comment

To add a code snippet to your comment, please wrap your code like so: <pre name="code" class="html">YOUR CODE</pre>. You can replace the class name with "js," "css," "sql," or "php." If there are any "<" or ">" within your code, please search and replace them with: &lt; and &gt; respectively.