A Flash Developer Resource Site

Results 1 to 3 of 3

Thread: AS3 - Adding reflection/mirror to draggable movieclip

  1. #1
    Junior Member
    Join Date
    Apr 2012
    Posts
    3

    AS3 - Adding reflection/mirror to draggable movieclip

    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.

    Code:
    // 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();
    }

  2. #2
    Will moderate for beer
    Join Date
    Apr 2007
    Location
    Austin, TX
    Posts
    6,801
    It's very possible. You just need to draw your image into a few bitmaps, with appropriate transformations.

  3. #3
    Mod cancerinform's Avatar
    Join Date
    Mar 2002
    Location
    press the picture...
    Posts
    13,449
    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
    - The right of the People to create Flash movies shall not be infringed. -

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  




Click Here to Expand Forum to Full Width

HTML5 Development Center