Jump to content
GreenSock

attaboy

how do I make my scroll start over when finished?

Recommended Posts

I have a text scroller here: http://www.jimslounge.com/textScroll2.swf when it finishes I want it to start over.

this is my tween:

 TweenLite.to(tf, 40, {y:-800, ease:Linear.easeNone});

I tried using TimelineMax to make it repeat but it didn't work like I thought it would.

Link to comment
Share on other sites

There are many, many ways to make it repeat but before I give you all the options, answer me this: when you say "repeat" do you mean that literally where the tween starts again or do you mean to have the text wrap top-to-bottom so that as the bottom of the TextField scrolls up, the top of it shows up underneath so that there appears to be a seamless loop? Those are completely different things. If you want the latter, you'd need to duplicate your TextField so that the bottom of one and the top of the other can be seen simultaneously. You'd scroll the top one all the way up until it's out of the visible area and the duplicate bottom one is exactly where the top one began. Then you'd just repeat that tween because the top one would suddenly shift down to exactly where the bottom one is/was and take over from there, so it would look seamless to the viewer.

Link to comment
Share on other sites

A seamless loop is what I'm thinking of. can I handle the 2 textfields with 2 tweens appended to TimelineMax?

Link to comment
Share on other sites

A seamless loop is what I'm thinking of. can I handle the 2 textfields with 2 tweens appended to TimelineMax?

Sure, you can put the tweens into a TimelineMax that has an infinite repeat. But you wouldn't append() each tween because that would make one play, then the next (sequenced). You actually want them both tweening at the same time. So imagine your two TextFields situated one above the other. Let's say each TextField is 400 pixels tall. That means you'd tween BOTH TextFields at the same time 400 pixels up from where they start. Like:

 

var tl:TimelineMax = new TimelineMax({repeat:-1});
tl.insert( new TweenLite(textField1, 40, {y:"-400", ease:Linear.easeNone}) );
tl.insert( new TweenLite(textField2, 40, {y:"-400", ease:Linear.easeNone}) );

 

In fact, you could simplify it a bit using TweenMax.allTo() like this:

 

var tl:TimelineMax = new TimelineMax({repeat:-1});
tl.insertMultiple( TweenMax.allTo([textField1, textField2], 40, {y:"-400", ease:Linear.easeNone}) );

 

Hope that helps.

Link to comment
Share on other sites

I think this is waht I'm looking for I'll try it out in the morning. Thanks!

Link to comment
Share on other sites

I'm trying but it's not working. I still cant get a seamless transition. As soon as it repeats it blanks out the text on stage. Isn't there a way to make textfield1 position below textfield2 as soon as it's moved beyond the mask? I've done that using a timer and as3 before it was pretty simple.

 

here's the output: http://www.jimslounge.com/textScroll2.swf

 

here's the code:

 

import com.greensock.*;
import com.greensock.easing.*;
import com.greensock.plugins.*;
import flash.events.*;
import flash.net.*;
import flash.text.*;
import flash.display.*;

var myFont:Font2 = new Font2();
var extLoader:URLLoader = new URLLoader();
var req:URLRequest = new URLRequest("bio.txt");
var tf1:TextField = new TextField();
var tf2:TextField = new TextField();
var tf3:TextField = new TextField();
var msk1:Sprite = new Sprite();
var msk2:Sprite = new Sprite();
var myFormat:TextFormat = new TextFormat();
var tl:TimelineMax = new TimelineMax({repeat:-1});

tf1.x =50;
tf1.y =250;
tf1.width = 650;
tf1.height = 500;
tf1.multiline=true;
tf1.wordWrap=true;
tf1.condenseWhite=true;

tf2.x =50;
tf2.y =750;
tf2.width = 650;
tf2.height = 500;
tf2.multiline=true;
tf2.wordWrap=true;
tf2.condenseWhite=true;

tf3.x =50;
tf3.y =253;
tf3.width = 650;
tf3.height = 20;
tf3.htmlText = 'droolpigs.com | myspace site';

this.addChildAt(tf1, 0);
this.addChildAt(tf2, 0);
addChild(tf3);


msk1.graphics.beginFill(0x000000);
msk1.graphics.drawRect(0, 0, 650, 170);
msk1.x = 50;
msk1.y = 80;
msk1.graphics.endFill();

msk2.graphics.beginFill(0x000000);
msk2.graphics.drawRect(0, 0, 650, 170);
msk2.x = 50;
msk2.y = 80;
msk2.graphics.endFill();


extLoader.addEventListener(Event.COMPLETE, textReady);

myFormat.font = myFont.fontName;
myFormat.size = 14;
myFormat.leading = 2.5;

tf1.defaultTextFormat=myFormat;
tf1.embedFonts=true;
tf1.alpha=1;
tf2.defaultTextFormat=myFormat;
tf2.embedFonts=true;
tf2.alpha=1;

extLoader.load(req);

function textReady(e:Event):void {
tf1.cacheAsBitmap=true;
tf2.cacheAsBitmap=true;
	msk1.cacheAsBitmap=true;
msk2.cacheAsBitmap=true;
tf1.mask=msk1;
tf2.mask=msk2;
addChild(msk1);
addChild(msk2);
tf1.htmlText=e.target.data;
tf2.htmlText=e.target.data;

}

tl.insertMultiple( TweenMax.allTo([tf1, tf2], 20, {y:"-1000", ease:Linear.easeNone}));

Link to comment
Share on other sites

never mind I was trying to make it too complicated it works great with just 1 TextField...thanks again!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×