How to Drag (scroll) a MoiveClip in a smooth way

[MikaelB]

Hello

 

This is my first post after I’ve just become a Corporate Member, so glad to be on board

 

I’ve been looking through many tutorials and I have an account at Lynda.com, but still I consider myself as a rookie and lost thought!

 

Now back to my problem, I like to make an iPhone & Android smooth scrolling and use some Greensock to manage it!

 

The problem is I can’t figure out how to implement the tweening part and which one I should use, please help me with this!

 

Like the “ThrowPropsPlugin” and the way it smooth things out and the bounce back at the end (Flick-scrolling example).

 

Best Regards

Mikael

Sweden

 

This is my code so far:

 

import flash.display.MovieClip;

import flash.display.Sprite;

import flash.events.MouseEvent;

import flash.geom.Rectangle;

 

var dragRect:Rectangle = new Rectangle(drag.x,drag.y,0,bar.height - drag.height);

 

drag.addEventListener(MouseEvent.MOUSE_DOWN, dragMouseDown);

 

function dragMouseDown(evt:MouseEvent):void

{

drag.startDrag(false,dragRect);

stage.addEventListener(MouseEvent.MOUSE_UP, dragMouseUp);

}

 

function dragMouseUp(evt:MouseEvent):void

{

drag.stopDrag();

stage.removeEventListener(MouseEvent.MOUSE_UP, dragMouseUp);

}

[Carl]

Hello Mikael,

 

Thank you for posting your problem. Perhaps you can be more clear on what you meant by:

 

I like to make an iPhone and Android smooth scrolling.

 

ThrowProps was intended to simulate the user interaction of scrolling through very long lists as you would find in an address book or perhaps itunes playlist. The potential uses for this plugin go well beyond this though.

 

Others are looking for a way to gracefully flick between numerous screens or panels like when flicking through a series of images or "menu" screens.

 

this second panel-flick action can be achieved without using throwProps.

 

There are examples of BOTH styles on the the throwProps page here:

 

http://www.greensock.com/throwprops/

 

the "panel flick' demo can be found at the bottom of that page in the FAQ section.

 

-------------

 

I would suggest starting with the code in the examples provided and experiment with adding your own artwork/assets to the demos.

be sure to take a look at the docs:

http://www.greensock.com/as/docs/tween/ ... lugin.html

 

---------

 

unlike other TweenLite/Max plugins there is a bit more responsibility left to the developer to determine how fast they want the throw to start and also determining min and max values. the examples show very reliable methods for determining the initial throw speed and the min/max values are optional.

 

if you are still lost after tinkering with the demo files, don't hesitate to post back with more detailed questions.

 

Best,

 

Carl

[MikaelB]

Thanks Carl for your quick answer.

 

I did download the FLA project and I’ve been looking at the Video also but I still can’t understand how to implement this inside in my "existing code"?

 

Tried to follow the code exemple but to sad I’m still lost (sad I know).

 

My project is like this:

The project is for Android 480x800.

I have a long list, a text inside a MovieClip that is like 400 in “x” and 2000 in “y” called “drag” and a reference max and min scroll “bar”, I can scroll it as is now but I like to add the smooth scrolling as in the example project. The way it is now is that it stops abruptly as fast as I stop scrolling, like to have the feel as inside the ThrowProps project.

Best regards

Mikael

[MikaelB]

Hello Carl

 

I have finally solved the problem, I'm probably the happiest man in the world's right now!

 

Hepp!!!

 

Best Regards

Mikael

[Carl]

great to hear that. thanks for letting us know. I was actually just going through the demo files seeing what I could do to help you.

 

 

i'm very happy to hear you had success.

[MikaelB]

Thanks Carl for all your help and effords, I really appreciate it!

 

This is my code, I have one long MovieClip in the library exported for ActionScript as MC but with one

difference, instead of use the "flash.display.MovieClip" I extend it and use "flash.display.Sprite" class.

 

My notes are both in Swedish and English, so I hope you don't get confused.

 

Best Regards

Mikael

Sweden

 

My Code:

import com.greensock.*;

import flash.events.MouseEvent;

import com.greensock.plugins.*;

import com.greensock.easing.*;

import flash.geom.Rectangle;

import flash.utils.getTimer;

import flash.text.*;

import flash.display.*;

 

TweenPlugin.activate([ThrowPropsPlugin]);

 

//*****************************( x y W H

var bounds:Rectangle = new Rectangle(30,30,400,700);

 

//Kom ihåg att göra om MC i "Library" under "Export for ActionScript" till "flash.display.Sprite".

var mc:MC = new MC(); //i stället för att köra på "default" "Export for ActionScript" till "flash.display.MovieClip".

mc.x = 30;

mc.y = 30;

addChild(mc);

 

 

//some variables for tracking the velocity of mc

var t1:uint,t2:uint,y1:Number,y2:Number;

 

mc.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);

 

function mouseDownHandler(event:MouseEvent):void

{

TweenLite.killTweensOf(mc);

y1 = y2 = mc.y;

t1 = t2 = getTimer();

//**************************( x y W H

mc.startDrag(false, new Rectangle(bounds.x, -20000, 0, 30000));

mc.addEventListener(Event.ENTER_FRAME, enterFrameHandler);

mc.stage.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);

}

 

function enterFrameHandler(event:Event):void

{

//track velocity using the last 2 frames for more accuracy

y2 = y1;

t2 = t1;

y1 = mc.y;

t1 = getTimer();

}

 

function mouseUpHandler(event: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;

var yOverlap:Number = Math.max(0,mc.height - bounds.height);

ThrowPropsPlugin.to(mc, {ease:Strong.easeOut, throwProps:{y:{velocity:yVelocity, max:bounds.top, min:bounds.top - yOverlap, resistance:300}}}, 1, 0.25, 1);

}

[MikaelB]

Just one mor question Carl

 

When I bought the Corporate Memberships I got this cryptic addition "You can access the SVN repository for the main tweening classes here", is it intended that I should download them and replace them over the existing files (com / greensock), the one I just downloaded?

 

Regards

Mikael

[GreenSock]

When I bought the Corporate Memberships I got this cryptic addition "You can access the SVN repository for the main tweening classes here", is it intended that I should download them and replace them over the existing files (com / greensock), the one I just downloaded?

Welcome to the club, Mikael. The SVN repository is TOTALLY optional - it's just another way to get the latest versions of the public classes (not the bonus stuff like ThrowPropsPlugin). If you're not familiar with what SVN is, don't even worry about it. Ignore the whole thing. It was just intended for folks who already use SVN and wanted to get stuff that way. Most people just download the bonus zip from their GreenSock account and use those files rather than messing with the SVN repository. Don't let the SVN thing confuse you.

[MikaelB]

Thanks, I feel more "com" now.

 

Love the pruduct I just bought, and I just LOOOOOOVE IT

 

Makes my app fly!!!!

 

Best Regards

Mikael