Center enlarged image within Throwprops

[Amnesicat]

Hi everyone,

 

Just wondering if someone could please help me out. I have a throwprops movieclip setup to scroll vertically with a mouse drag similar to ipad devices and the like. Inside the movieclip there is a couple of thumbnail image movieclips that when clicked enlarge to the fullsized image in the center of the stage. The problem is that the thumbnail images are positioned below the stage frame, so when you sroll down to the thumbnail and click it the enlarged image tweens up and is positioned out of view. Now I know this is happening because I have x/y positions set to fit in the center of the stage using (stage.stageWidth / 2;), I just thought someone may know a way to dynamically update the center position to reflect the currently viewed area of the throwprops movieclip.

 

Anyway, I've attached the code below. Any help would be greatly appreciated.

 

Thanks,

Alan

 

import com.greensock.*;
import com.greensock.easing.*;
import com.greensock.plugins.*;
import com.greensock.loading.*;
import flash.geom.Rectangle;
import flash.utils.getTimer;
import flash.events.MouseEvent;
import flash.text.*;
import flash.display.*;
TweenPlugin.activate([ThrowPropsPlugin, ScalePlugin]);

var bounds:Rectangle = new Rectangle(0,0,1024,768);
var blitMask:BlitMask = new BlitMask(mc,bounds.x,bounds.y,bounds.width,bounds.height,true,true,0,false);
var t1:uint,t2:uint,y1:Number,y2:Number;
blitMask.update();
blitMask.disableBitmapMode();
blitMask.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler, false, 0, true);
function mouseDownHandler(e:MouseEvent):void
{
TweenLite.killTweensOf(mc);
y1 = y2 = mc.y;
t1 = t2 = getTimer();
mc.startDrag(false, new Rectangle(bounds.x, bounds.y - 9999, 0, 9999999));
mc.addEventListener(Event.ENTER_FRAME, enterFrameHandler, false, 0, true);
mc.stage.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler, false, 0, true);
}
function enterFrameHandler(e:Event):void
{
y2 = y1;
t2 = t1;
y1 = mc.y;
t1 = getTimer();
blitMask.update();
}
function mouseUpHandler(e:MouseEvent):void
{
mc.stopDrag();
mc.stage.removeEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
mc.removeEventListener(Event.ENTER_FRAME, enterFrameHandler);
var time:Number = (getTimer() - t2) / 1000;
var yVelocity:Number = (mc.y - y2) / time;

ThrowPropsPlugin.to(mc, {throwProps:{
 y:{velocity:yVelocity, max:bounds.top, min:bounds.top - 632, resistance:600}
 }, onStart:blitMask.disableBitmapMode, onUpdate:blitMask.update, ease:Quad.easeOut}, 10, 0.3, 1);
}

///////////////////////smallPics//////////////////////////////////////////////////////////////////////////////

var picArray:Array = [mc.pic1,mc.pic2,mc.pic3,mc.pic4];
var mcAddChild:MovieClip;
var mcTween:TimelineMax;
var mc:MovieClip;
TweenMax.to(mc.mcCover, 0, {autoAlpha:0});
for (var i:int = 0; i < picArray.length; i++)
{
var stageX = stage.stageWidth / 2;
var stageY = stage.stageHeight / 2;
picArray[i].mouseChildren = false;
picArray[i].addEventListener(MouseEvent.CLICK, clickHandler, false, 0, true);
picArray[i].mcTween = new TimelineMax({paused:true,reversed:true,onStart:addMovieClip,onReverseComplete:addCover});
picArray[i].mcTween.insert(TweenMax.to(mc.mcCover,0.8,{autoAlpha:0.7,ease:Sine.easeInOut}));
picArray[i].mcTween.insert(TweenMax.to(picArray[i],1,{x:stageX,y:stageY,scale:1,ease:Back.easeInOut}));
}
function clickHandler(e:MouseEvent):void
{
e.target.mcTween.reversed = ! e.target.mcTween.reversed;
e.target.mcTween.resume();
mcAddChild = MovieClip(e.currentTarget);
}
function addMovieClip()
{
mc.addChild(mcAddChild);
}
function addCover()
{
mc.addChild(mc.mcCover);
}

[Amnesicat]

I thought I'd attach a simple FLA example to help explain what I mean.

 

Thanks,

Alan

 

Example.zip

[Carl]

Have you tried the globalToLocal() method of display object? That may do the trick. it will convert your global center stage x and y to the local xy of your target.

 

Run a google on as3 globalToLocal

[Amnesicat]

Thanks Carl,

 

Well, I tried to implement the globalToLocal method but couldn't really get it to center the image as I'd hoped. Though this is most likely due to my lack of actionscript knowledge. I'm not sure but I think I need to somehow use the ENTER_FRAME function in the throwprops code to updated the x/y coordinates to reflect the new center position for the tween. How to do this is well beyond my knowledge for now.

 

Thanks for your suggestion. I probably should try a more generic as3 forum as this is bordering more on just as3 rather than greensock.

 

Thanks again,

Alan

[Guest jackluies]

I think there are some predefined methods for it just look at its latest edition reference book..