Newbee Question Throwprop

[ekessler]

I am new to flash and to certainly Greensock.

 

I am a member of Greensock and downloaded the throwprop plug-in.

I am looking to make a history timeline that has a very long bar that will scroll horizontally only across stage the same way the demo does using the mouse.

I have had no luck trying to get this to work.

I was wondering if a very friendly forum member will be willing to tweek the demo code for me to paste in?

This would be greatly appreciated.

Thank you

Eliezer

[Carl]

throwPropsX.fla.zipHi ekessler. thanks for your question. to get the demo to work horizontally you to have a really WIDE display object with a narrow Blitmask. in the code you have to make a few adjustments mostly dealing with converting y/height to x/width y to x bounds.top to bounds.left yOffset to xOffset mouseY to mouseX etc. please see this example: http://snorkl.tv/dev/throwPropsX/ here is the code: 

 

 

import com.greensock.*;
import com.greensock.easing.*;
import com.greensock.plugins.*;
import flash.geom.Rectangle;
import flash.utils.getTimer;
import flash.events.MouseEvent;
import flash.text.*;
import flash.display.*;
TweenPlugin.activate([ThrowPropsPlugin]);
var bounds:Rectangle = new Rectangle(30,30,400,100);
var blitMask:BlitMask = new BlitMask(mc,bounds.x,bounds.y,bounds.width,bounds.height,true);
var t1:uint,t2:uint,x1:Number,x2:Number,xOverlap:Number,xOffset:Number;
blitMask.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
function mouseDownHandler(event:MouseEvent):void {
TweenLite.killTweensOf(mc);
x1 = x2 = mc.x;
xOffset = this.mouseX - mc.x;
xOverlap = Math.max(0,mc.width - bounds.width);
t1 = t2 = getTimer();
mc.stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
mc.stage.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
}
function mouseMoveHandler(event:MouseEvent):void {
var x:Number = this.mouseX - xOffset;
if (x > bounds.left) {
mc.x = (x + bounds.left) * 0.5;
} else if (x < bounds.left - xOverlap) {
mc.x = (x + bounds.top - xOverlap) * 0.5;
} else {
mc.x = x;
}
blitMask.update();
var t:uint = getTimer();
if (t - t2 > 50) {
x2 = x1;
t2 = t1;
x1 = mc.x;
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 xVelocity:Number = (mc.x - x2) / time;
ThrowPropsPlugin.to(mc, {throwProps:{ x:{velocity:xVelocity, max:bounds.left, min:bounds.left - xOverlap, resistance:300} }, onUpdate:blitMask.update, ease:Strong.easeOut }, 10, 0.3, 1);
}

throwPropsX.fla.zip

 

[ekessler]

Thank you so much! It works exactly how I wanted.

I have another question. As this is a history timeline and I am showing 6000 years, I have made the timeline part 6000px long. I would like to have the year number above the timeline and change when swiped. I figured to have the text changed by the x number. I plan to have the stage be 800x 600 and have the movie clip start at the x of 400. This is pretty straight forward when x is a positive number--but what about when it a negative? How do "convert" it into a positive in order to use it dynamically. If I have not been clear enough-- when year zero is at the x of -1000 the year should be 1400. How do I do the math?

Thank you very much. This has been a sanity saver.

[Carl]

if you are saying that

 

year 0 is at x:400

 

and

 

year 1400 is at x:-1000

 

try

 

year = Math.abs(mc.x - 400);

 

...

 

Math.abs(400 - 400) //year = 0

 

Math.abs(300 - 400) //year = 100

 

Math.abs(-5600 - 400) //year = 6000

[ekessler]

Perfect!

Thanks again!

[ekessler]

Thank you for all your help so far. I have one small problem. When calculating the years the 1st 400 and the last 400 won't show up.

I think it is caused by the mc not being able to go all the way to either end. Meaning although year zero starts at x:400 once you slide it, it won't go back there. The same problem is on the other end with year 6000.

BTW this project is for a smartboard and works awesome on it.

 

I have attached the file the swf and here is the fla http://dl.dropbox.com/u/7947007/maintime.fla .

 

Thank you so much for your time.

[Carl]

can't open cs5.5 files.

also I don't know how much time I am going to be able to dedicate to figuring out your dynamic date generation issues.

 

 

i don't know what you mean by

 

Meaning although year zero starts at x:400 once you slide it, it won't go back there

 

have you adjusted your throwProps values so that the object can be thrown from x of 400 to -5600?

 

also instead of dealing with such funky numbers you could place your timeline and blitmask in their own container movie clip and then just move that container to an x of 400. then as far as throwProps is concerned you are just moving the timeline from 0 to - 6000.

[ekessler]

have you adjusted your throwProps values so that the object can be thrown from x of 400 to -5600?

 

 

also instead of dealing with such funky numbers you could place your timeline and blitmask in their own container movie clip and then just move that container to an x of 400. then as far as throwProps is concerned you are just moving the timeline from 0 to - 6000.

Thank you very much.

Here it is in CS5 http://dl.dropbox.com/u/7947007/maintime.fla

You will see in the swf when you try to move the mc to the right and then go back to the left there is resistance that does not let you. It ounces back to about 1/2 an inch from the end of the screen. the same thing happens on the other side.

 

 

 

I will try to play with the numbers myself but I don't understand this. Any tutorials that explain the math here?

[Carl]

It ounces back to about 1/2 an inch from the end of the screen. the same thing happens on the other side

 

this is because the contents of mc were offset about a 1/2 inch from the registration point. you need to edit mc and make sure everything inside mc is lined up with the registration point.

 

take a look at the attached fla. I edited mc and I set the max and min values to 400 and -5600.

 

i removed some of the new drag resistance logic as it wasn't playing so nicely with your offset of 400 pixels. don't have time to get into that now.

[ekessler]

Thank you. I REALLY appreciate it!

[ekessler]

Thanks to your help my project is moving along. I am becoming more comfortable with flash and greensock. Your videos and website are awesome!

I have 2 more questions.

1. I would like the individual images to scale up as they pass the year marker. Similar to the way the programs act on a Mac. I have been able to get the blitmask turn on and off and make the first world into a button. But no luck in the other dept. Any ideas? I have a feeling it has to do with the blitmask on and off.

2. The other is that the images are not crisp. Is the blitmask causing this? Is there anyway around this?

 

Thank you again.

here is the file in cs5 http://dl.dropbox.com/u/7947007/maintime.fla

[Carl]

1. I would like the individual images to scale up as they pass the year marker. Similar to the way the programs act on a Mac. I have been able to get the blitmask turn on and off and make the first world into a button. But no luck in the other dept. Any ideas? I have a feeling it has to do with the blitmask on and off.

 

this is a fairly complex and ambitious undertaking. you would have to find a way to repeatedly adjust the scale of every image based on its distance from the year marker. since the target of the BlitMask would have its contents changing you would also have to recapture the bitmap over and over again which would not be efficient. If you really want to pursue this effect you may want to ditch the BlitMask altogether.

 

If you are just getting started with actionscript and greensock building that effect is going to be very difficult. If you really want it I would suggest you start with a file that allows you to simply drag your timeline mc and get images inside of it to adjust their scale properly without any use of ThrowProps or BlitMask.

 

Providing more assistance with how such an effect would be built is unfortunately well beyond the purpose of this forum. to get an idea of how the Mac program dock works you can start here: http://active.tutsplus.com/tutorials/ac ... -with-as3/

 

The other is that the images are not crisp. Is the blitmask causing this? Is there anyway around this?

 

i noticed the world_mc is not crisp when it gets larger. this is because it is a bitmap and the individual pixels get stretched when you scale it up. you can find your bitmap in the library and in the properties for that image select "allow smoothing" and see if you like that effect. http://www.bestcatalog.net/flash_part1_1.htm

 

if the crispness you are mentioning is not related to the scaling, BlitMask has a smoothing property which can be set to true or false. you can experiment with that as well. more info in the BlitMask docs. http://www.greensock.com/as/docs/tween/ ... #smoothing