3

Is it possible to show another instance of a sprite? What I'm trying to do is have a reflection of a animated sprite.
What I've got so far is my Sprite called "canvas" that has things animating inside it by use of AS3. And what I want to do is show a copy of it flipped, below it to look like a reflection. I tried the following code but to no luck, it just hides everything?..

addChild(canvas);
var reflection:Sprite = new Sprite();
addChild(reflection);
reflection.addChild(canvas);

Any ideas why this code doesn't work? Or do you have a better way to approach this.
Thanks

Owen
  • 760
  • 1
  • 7
  • 25
  • 2
    addChild(canvas) adds canvas, then reflection.addChild(canvas) removes canvas and from it's previous parent and adds it to reflection. You would need a duplicate of canvas. The easiest solution is to use a BitmapData to draw the contents of canvas into, to which you can apply the transform matrix to flip it and mask it if you so wish. Luckily there's a [Reflection class on Adobe Devnet](http://www.adobe.com/devnet/flash/articles/reflect_class_as3.html) which you can use. – George Profenza Jun 03 '11 at 10:34
  • @George, You wrote that comment JUST before I posted my answer! Shoulda put it into an answer I woulda upvoted :). –  Jun 03 '11 at 10:36
  • @Ascension Done. That's what I was already working on. :) – Matthias Jun 03 '11 at 10:42

2 Answers2

3

You could use BitmapData for that.

class members:

// flip vertically and shift by 100 (insert your canvas size)
private var reflect:Matrix = new Matrix(1, 0, 0, -1, 0, 100);
// instanciate BitmapData with 100x100 size (insert your canvas size),
// filled with black but with 100% transparancy, it's an
// ARGB value (0 == 0x00000000)
private var reflectionData:BitmapData = new BitmapData(100, 100, true, 0);
private var reflection:Bitmap = new Bitmap(reflectionData);

init:

// you might want to draw canvas already on startup
reflectionData.draw(canvas, reflect);
reflection.x = canvas.x;
reflection.y = canvas.y + canvas.height;
addChild(reflection);

on animation/redraw

// clear to transparency
reflectionData.fillRect(reflectionData.rect, 0);
// draw the current canvas with matrix applied
reflectionData.draw(canvas, reflect);
Matthias
  • 7,432
  • 6
  • 55
  • 88
  • This worked great! Just one question, when it first loads it very quickly flash as solid while how can I get around that? – Owen Jun 03 '11 at 12:51
  • 1
    @Owen `BitmapData` is filled with white on initialization by default. I will change this answer so that it is filled with black but 100% transparent and the canvas is already drawn in `init`. – Matthias Jun 03 '11 at 20:42
1

You've got almost the exact same issue as in this answer:

Adding multiple instances of a Sprite?

That will tell you why your existing code isn't working.

As far as how to accomplish what you're looking to do, I would just use a bitmap object to draw the original sprite inverted. You can do this using a Matrix object passed into the Bitmap.draw function as a parameter. When you create the matrix just invert the scale value of 1 for vertical dimension and set it to -1. Here is a tutorial on how to do this:

http://www.adobe.com/devnet/flash/articles/reflect_class_as3.html

They might not using the matrix transform and might just invert the scale of the sprite containing the the bitmapdata, I'm not sure I havn't read the full tutorial. All I know is this tutorial will give you exactly what you're looking to do (there is an example).

Community
  • 1
  • 1