AS3 - Adding reflection/mirror to draggable movieclip

[l_tilter0405]

Hiya

I am needing to create a flash file that creates pattern shapes from just 1 image. It needs to reflect or mirror a loaded draggable movieclip - with the reflection/mirror updating as you move and drag the movieclip around the stage.

I had come across: http://active.tutsplus.com/freebies/...class-for-as3/
which does very similar to what i'm after. The demo seems ok but as in the comments there is lots of slowdown and lag in the dragging, especially when the image you drag starts off larger.

Sorry for asking for what seems quite a bit, i'm not after the complete solution, i just need to know firstly if it can be done and how i can go about achieving it?

I'm hoping the following images can help explain:

Stage 1:
Loading the users pattern image onto the stage as seen here:
http://www.tiltworld.co.uk/yhfus6fh/pattern_1.png

Stage 2:
Shows how i want the reflection to work - in 4 blocks on each side of the pattern:
http://www.tiltworld.co.uk/yhfus6fh/pattern_2.png

Stage 3:
Getting the reflection to adapt to where the user drags the pattern around on the stage. As in the image the reflection happens within the 4 blocks on each side rather than attached directly onto/next to the original movieclip.
http://www.tiltworld.co.uk/yhfus6fh/pattern_3.png

Lauren

p.s. My current code below shows currently Stage 1 - how i load the pattern onto the stage using fileReference.load and then startDrag to drag it around the stage.

// Create FileReference.
var draggableMC:FileReference;

// Create Loader to hold image content
var draggable_mc_loader:Loader = new Loader();
var draggable_mc_content:Sprite = new Sprite();

// Select Button Function.
select_btn.addEventListener(MouseEvent.CLICK, onselect_btnClicked);

function onselect_btnClicked(event:MouseEvent):void {
	draggableMC=new FileReference();
	draggableMC.addEventListener(Event.SELECT, onFileSelected);
	var imageTypeFilter:FileFilter = new FileFilter("JPG/PNG Files","*.jpeg; *.jpg;*.gif;*.png");
	draggableMC.browse([imageTypeFilter]);
}

// File Selected Function.
function onFileSelected(event:Event):void {
	draggableMC.addEventListener(Event.COMPLETE, onFileLoaded);
	draggableMC.load();
}

// File Loaded Function.
function onFileLoaded(event:Event):void {
	var fileReference:FileReference=event.target as FileReference;

	var data:ByteArray=fileReference["data"];
	var movieClipLoader:Loader=new Loader();
	movieClipLoader.loadBytes(data);
	movieClipLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, onMovieClipLoaderComplete);

	draggableMC.removeEventListener(Event.COMPLETE, onFileLoaded);
}

// Load Image onto Stage Function.
function onMovieClipLoaderComplete(event:Event):void {
	var loadedContent:DisplayObject=event.target.content;
	draggable_mc_loader =event.target.loader as Loader;
	draggable_mc_loader.x=10;
	draggable_mc_loader.y=10;
	draggable_mc_content.buttonMode=true;
	draggable_mc_content.addChild(draggable_mc_loader);
	addChild(draggable_mc_content);
}

// Drag
draggable_mc_content.addEventListener(MouseEvent.MOUSE_DOWN, drag);
stage.addEventListener(MouseEvent.MOUSE_UP, drop);

function drag(event:Event):void {
	draggable_mc_content.startDrag();
}
function drop(event:Event):void {
	draggable_mc_content.stopDrag();
}

[5TonsOfFlax]

It's very possible. You just need to draw your image into a few bitmaps, with appropriate transformations.

[cancerinform]

Here is a class, where a movieclip with mirror image is created and can be dragged. It's part of the Flashscript classes.

http://www.flashscript.biz/flashas3/...ImageAnim.html