ladyb314

I have a vertically scrolling mc that i am controlling using the throwprops plugin with a blitmask applied to it. I also have a button within that movieclip that triggers a popup when tapped. After i scroll the movieclip one time i now show a duplicate of the movieclip behind it. so when i scroll up or down to the ends, when the movieclip goes past the end point, I see a duplicate of the movieclip behind it. This only happens after I have scrolled the full thing once, so i'm thinking it has something to do with the blitMask. Any help would be greatly appreciated. I'm using the demo code just to test it out, so i can then edit it. Here is my updated code: var bounds:Rectangle = new Rectangle(0, 0, 480, 800); var blitMask:BlitMask = new BlitMask(mc, bounds.x, bounds.y, bounds.width, bounds.height, false); blitMask.bitmapMode=false; var t1:uint, t2:uint, y1:Number, y2:Number, x1:Number, x2:Number, xOverlap:Number, xOffset:Number, yOverlap:Number, yOffset:Number; var isMoving:Boolean=false; var isCatched:Boolean=false; blitMask.stage.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler); function mouseDownHandler(event:MouseEvent):void { TweenLite.killTweensOf(mc); blitMask.disableBitmapMode(); if(isMoving==true) { isCatched=true; isMoving=false; } x1 = x2 = mc.x; xOffset = this.mouseX - mc.x; xOverlap = Math.max(0, mc.width - bounds.width); y1 = y2 = mc.y; yOffset = this.mouseY - mc.y; yOverlap = Math.max(0, mc.height - bounds.height); t1 = t2 = getTimer(); mc.stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler); mc.stage.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler); } function mouseMoveHandler(event:MouseEvent):void { isMoving=true; if(blitMask.bitmapMode==false) { blitMask.enableBitmapMode(); } var y:Number = this.mouseY - yOffset; //if mc's position exceeds the bounds, make it drag only half as far with each mouse movement (like iPhone/iPad behavior) if (y > bounds.top) { mc.y = (y + bounds.top) * 0.5; } else if (y < bounds.top - yOverlap) { mc.y = (y + bounds.top - yOverlap) * 0.5; } else { mc.y = y; } blitMask.update(); var t:uint = getTimer(); //if the frame rate is too high, we won't be able to track the velocity as well, so only update the values 20 times per second if (t - t2 > 50) { //x2 = x1; //x1 = mc.x; y2 = y1; t2 = t1; y1 = mc.y; t1 = t; } event.updateAfterEvent(); } function mouseUpHandler(event:MouseEvent):void { mc.stage.removeEventListener(MouseEvent.MOUSE_UP, mouseUpHandler); mc.stage.removeEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler); 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 - yOverlap, resistance:50}}, onUpdate:blitMask.update, onStart:blitMask.enableBitmapMode, onComplete:throwComplete, ease:Strong.easeOut}, 5, 0.3, 1); } function throwComplete () { isMoving=false; isCatched=false; blitMask.disableBitmapMode(); } mc.shortcuts_btn.addEventListener(MouseEvent.CLICK,FNA); mc.radar_btn.addEventListener(MouseEvent.CLICK,FNA); function FNA (e:MouseEvent) { if(isMoving==false && isCatched==false) { fna.visible = true; } else{ //donothing; } }

Hello, I am currently using the WONDERFUL PanelScroll example shown for tweenlite which allows me to swipe/flick through my images. I have a little twist I need to add on this though and am not sure how. I want to detect where the user started the swipe from. What I need is a true "Edge" swipe. So if the user swipes from the middle this should not count as a swipe, just from the edges. I have been googling for days now and don't see how to achieve this. I would guess it has something to do with my touch boundaries, but I'm not sure how to tweak this using the Panel Scroll example. Any ideas? Any help would be greatly appreciated. by the way I LOVE your products!!!!

So i was able to figure out how to just use regular swipe gestures to accomplish this with the use of TweenLite. Unfortunately if I use anything other than a easeInOut or easeIn tween, My cards swipe completely off the screen. Is there a reason that easeOut causes the tween to move the object further than the distance specified? For example: This works fine and moves the movieclip to the specified destination, but i don't like the animation because it delays the beginning of the animation: TweenLite.to(base_cards_mc, 0.6, {x:base_cards_mc.x + 480, ease:Strong.easeIn}); This is what i would like to use because the animation is more at the end of the tween, but it moves my movieclip completely off screen instead of to the specified destination. TweenLite.to(base_cards_mc, 0.6, {x:base_cards_mc.x + 480, ease:Strong.easeOut}); I finally see the light at the end of the tunnel thanks to your help. Now just trying to get the animation buttoned up. Thanks again!

I will try anything at this point. Thank you for all of your help!!

So I've tried your solution, but unfortunately it seems I can not use outside classes and have multiple frames on my timeline. I need to have this code live on a frame on my timeline for ease of handing this off. So I tried bringing the code over to the first frame of my timeline. I was able to get it to publish to my android device with no errors, but nothing happens when i touch and drag on the screen. Will this work on mobile? I am very rusty in my flash so this i probably an error on my part, but for the life of me I can't figure out what, and I've been working on this one thing for over a week, and the tweenLite package is the best I've found I just need to get it to work. Any help as always will be EXTREMELY appreciated. import flash.display.*; import flash.events.MouseEvent; import flash.utils.getTimer; import flash.events.Event; import flash.geom.Rectangle; import com.greensock.TweenLite; import com.greensock.easing.Strong; //class CardScroll extends Sprite { var _panelBounds:Rectangle = new Rectangle(0, 0, 480, 800); var _container:MovieClip; var _currentPanelIndex:int = 0; var _panelCount:int; var _x1:Number; var _x2:Number; var _t1:uint; var _t2:uint; function CardScroll() { _panelCount = 3; _container.x = _panelBounds.x; _container.y = _panelBounds.y; addChildAt(_container, 0); _container.addEventListener(MouseEvent.MOUSE_DOWN, _mouseDownHandler, false, 0, true); } function _mouseDownHandler(event:MouseEvent):void { TweenLite.killTweensOf(_container); _x1 = _x2 = this.mouseX; _t1 = _t2 = getTimer(); _container.startDrag(false, new Rectangle(_panelBounds.x - 99999, _panelBounds.y, 9999999, 0)); this.stage.addEventListener(MouseEvent.MOUSE_UP, _mouseUpHandler, false, 0, true); this.addEventListener(Event.ENTER_FRAME, _enterFrameHandler, false, 0, true); } function _enterFrameHandler(event:Event):void { _x2 = _x1; _t2 = _t1; _x1 = this.mouseX; _t1 = getTimer(); } function _mouseUpHandler(event:MouseEvent):void { _container.stopDrag(); this.removeEventListener(Event.ENTER_FRAME, _enterFrameHandler); this.stage.removeEventListener(MouseEvent.MOUSE_UP, _mouseUpHandler); var elapsedTime:Number = (getTimer() - _t2) / 1000; var xVelocity:Number = (this.mouseX - _x2) / elapsedTime; //we make sure that the velocity is at least 20 pixels per second in either direction in order to advance. Otherwise, look at the position of the _container and if it's more than halfway into the next/previous panel, tween there. if (_currentPanelIndex > 0 && (xVelocity > 20 || _container.x > (_currentPanelIndex - 0.5) * -_panelBounds.width + _panelBounds.x)) { _currentPanelIndex--; } else if (_currentPanelIndex < _panelCount - 1 && (xVelocity < -20 || _container.x < (_currentPanelIndex + 0.5) * -_panelBounds.width + _panelBounds.x)) { _currentPanelIndex++; } TweenLite.to(_container, 0.7, {x:_currentPanelIndex * -_panelBounds.width + _panelBounds.x, ease:Strong.easeOut}); } stop();

WOW! Thank you for the quick reply and sorry for the confusion, but I think you understood me 100%. I will try what you sent. I really appreciate you putting that together. Thanks a million!!!

Hello, I am trying to use the panel scroll example given on the website, but I need to scroll a movieclip that lives on the stage instead of loading them from xml. I have had no luck with this so I'm hoping someone can help. This is for an android prototype 480x800. I have a movieclip on the stage "base_cards_mc" that has 3 movieclips within it. Each of the movieclips are the same width and height of the stage. Here is my code. If anyone could help, I'd be forever grateful. This code is found on the first frame of my timeline, hence the stop(); at the end. import com.greensock.*; import com.greensock.easing.*; import com.greensock.events.LoaderEvent; import com.greensock.loading.*; import flash.display.Sprite; import flash.events.MouseEvent; import flash.utils.getTimer; import flash.events.Event; import flash.geom.Rectangle; import com.greensock.TweenLite; import com.greensock.easing.Strong; // -------------------- Scroll cards -------------------------------// var panelBounds:Rectangle = new Rectangle(0, 0, 480, 800); //var container:Sprite; var currentPanelIndex:int = 2; var panelCount:int = 3; var x1:Number; var x2:Number; var t1:uint; var t2:uint; function PanelScrollExample() { //container = new Sprite(); base_cards_mc.x = panelBounds.x; base_cards_mc.y = panelBounds.y; base_cards_mc.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler, false, 0, true); } function mouseDownHandler(event:MouseEvent):void { TweenLite.killTweensOf(base_cards_mc); x1 = x2 = this.mouseX; t1 = t2 = getTimer(); base_cards_mc.startDrag(false, new Rectangle(panelBounds.x - 9999, panelBounds.y, 9999999, 0)); this.stage.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler, false, 0, true); this.addEventListener(Event.ENTER_FRAME, enterFrameHandler, false, 0, true); } function enterFrameHandler(event:Event):void { x2 = x1; t2 = t1; x1 = this.mouseX; t1 = getTimer(); } function mouseUpHandler(event:MouseEvent):void { base_cards_mc.stopDrag(); this.removeEventListener(Event.ENTER_FRAME, enterFrameHandler); this.stage.removeEventListener(MouseEvent.MOUSE_UP, mouseUpHandler); var elapsedTime:Number = (getTimer() - t2) / 1000; var xVelocity:Number = (this.mouseX - x2) / elapsedTime; //we make sure that the velocity is at least 20 pixels per second in either direction in order to advance. Otherwise, look at the position of the _container and if it's more than halfway into the next/previous panel, tween there. if (currentPanelIndex > 0 && (xVelocity > 20 || base_cards_mc.x > (currentPanelIndex - 0.5) * - panelBounds.width + panelBounds.x)) { currentPanelIndex--; } else if (currentPanelIndex < panelCount - 1 && (xVelocity < -20 || base_cards_mc.x < (currentPanelIndex + 0.5) * - panelBounds.width + panelBounds.x)) { currentPanelIndex++; } TweenLite.to(base_cards_mc, 0.7, {x:currentPanelIndex * -panelBounds.width + panelBounds.x, ease:Strong.easeOut}); } stop();