Slider, smooth, continuous

[benjino]

I would rather focus on the specific things I need to learn to complete a project.

 

Using TweenLite along with a little help on this forum, I've been able to get the yellow banana figure to work well; it's a stand-in for artwork I haven't completed yet.

 

The globe is the issue now. It has flaws and limitations. Upper right Asia and Alaska need to be closer. The globe effect is created by tweening on the timeline in CS4 — no AS, no Tween engine, no Greensock. It is very, very limited, if I make any changes to it currently it breaks. I am certain that Greensock's engines will allow me to re-create the affect and allow me to control the speed of the effect of the spinning globe.

 

Basically, it's a gradient sphere masking the map that is rectangular. The map slides across the sphere giving the effect that the globe is rotating.

 

Here it is: http://siegfriedmedia.com/irtoc/

 

I'm pretty certain that the answers lie in the following case study: http://www.snorkl.tv/2011/05/real-world-benefits-of-oop-with-as3-for-the-completely-terrified-greensock-homepage-animation-case-study/#more-947, but I'm not certain which commands to focus on. Any help is appreciated. I'm new with Greensock.

[Carl]

before trying to attempt what you saw in the tutorial, I would focus on converting your timeline animation to Tweenlite so that all the motion is controlled by code.

 

it could be as simple as

 

TweenMax.to(map, 1, {x:-300, repeat:-1}); //use values that suit your project

 

the tutorial you referenced is better suited for more complex animations where multiple items are sharing common sequences of animation.

[benjino]

That works with the syntax and values at

 

TweenMax.to(map, 55, {x:-375, repeat:-1});

 

But, I run into the same issue I have found with using Flash's timeline too, and that is that I can get one end to finish and one beginning to start, but with a big gap between Asia and Alaska. If I make a new mc with two maps moved together with appropriate spacing between Asian and Alaska then I can make adjustments to the syntax and values so that that will work, but it will do the same thing but after these two maps joined together as a new mc go off the mask — there's the same big gap between Asia and Alaska.

 

Would using TimelineLite/Max with "offset" be a clue?

 

See, just after the far right of Asia has come onto the globe, Alaska needs to be there following it, so I need the same "map mc" replacing itself or another "map2 mc" coming in right where it needs to be.

 

Also, I have 30fps set on Flash's timeline, I'm pretty certain that there is math involved in the -x value and the speed set in the TweenLite syntax.

[Carl]

having 2 maps in one mc is the way to go.

 

you just have to loop it right before the 2nd map is fully on screen.

 

attached is an example

[benjino]

Having two maps helps a little and only spacing between those two as one mc.

 

The example you shared is movement from one side of the stage to the other and my issue is with one side of a mask to the other.

 

I'm running into the same issue as with the timeline based method I first started with. I do believe that with Greensock the solution is there.

 

Why doesn't the x value correspond with the "to" or "from" on the x-axis of the stage?

 

Would using the timeline with the 'offset' command be a solution?

 

The problem is still the same, Asia becomes too far separated from Alaska. If I join two maps with the right spacing that will satisfy the solution for those two maps but the spacing still occurs, so it doesn't matter if I join two or more maps together, at the end of the last map there is going to be a big gap before the start of the first map.

 

I have played with adjusting incrementally with great variance, and the settings you chose for the 'map of the world' animation will not behave the same going across the mask I have created for my situation. What other commands could I try?

[Carl]

you want to tween TO a value that has the second map displaying almost in its entirety, then when the tween repeats it starts with the first map displaying 100%.

 

my method will most definitely work with a mask. you just have to make sure your animation starts with the first map fully visible and then tween until the 2nd map is almost completely visible.

[benjino]

I start with Alaska on the left edge of the globe. I then find the x for it's movement to the left where Asia would be at the right edge of Asian would be at the right edge of the globe, and that x value is x=134.

 

I plug this value in for x with the speed at 10 and it does the jump thing. I then reduce 134 down in increments of 5 and it starts looking better as I get down to 115, I then go in increments of 1 down to 106 and find that it works well with the following:

 

TweenMax.to(imap, 10, {x:106, repeat:-1, ease:Linear.easeNone});

 

Buuut, when I put it up online live it does the 'popping' thing! So the swf in Flash behaves differently than the swf online!

 

I then go to offset this discrepancy by adjusting the x value by going higher and lower in number. It works going lower. I also adjust the speed down to 15.

 

Again, I also find that going to a lower x value than the x that it actually finishes on works better. I then find that the following works well with 15 as a swf in Flash:

 

TweenMax.to(imap, 15, {x:0, repeat:-1, ease:Linear.easeNone}); (there is some very minor jerkiness or popping to it, though it is ok)

 

Buuut, when I put it live it behaves differently! Currently as you see it here http://www.siegfriedmedia.com/irtoc it has TweenMax.to(imap, 15, {x:0, repeat:-1, ease:Linear.easeNone});

 

What is going on here? The swf and online live view shouldn't be any different!

 

You should see the swf, how can I send it to you?

[Carl]

i downloaded the swf that you posted. it runs the same with the same bad jump in the browser, or as a standalone swf.

 

you can zip your files and attach them to any message you post.

 

i've found on a mac, the swf preview you get in Flash, performs slower/worse than it plays in most browsers.

 

so I would develop with browser performance in mind.

[benjino]

Ok that would explain the difference in performance. I've never heard that before.

 

Here's the zipped file.

 

I use Firefox most often, do you recommend Chrome for this testing?

 

I don't have a PC, I use a Macbook Pro 2009.

 

File is zipped.

[Carl]

the problem is you have additional frames and keyframes in your timeline. get rid of all of them. or add a stop() action to frame 1 actions.

 

TweenMax.to(imap, 15, {x:"-115", repeat:-1, ease:Linear.easeNone});

 

this will work fine once you get rid of the extra stuff.

 

also you are taking a bitmap that is 1400 pixels wide and scaling it down to 300 pixels wide.

you should resize your map to the size that it should be in flash for the best performance

[benjino]

Cool, now that's working! I put it up online. After adjustments this is what works best: TweenMax.to(imap, 10, {x:"-104", repeat:-1, ease:Linear.easeNone});

 

Of course that's not going to be true for everyone else; the width of the mc will cause the x value to change.

 

I never got the right syntax with the parenthesis around the x value the entire time and did not realize that the extra frames would cause a problem either. I removed them.

 

How do you know when or when not to use the parenthesis? What do they do?