Scrolling Text with mx.transitions.Tween

[ofanged1]

I am creating a horizontal text scroller using the kirupa tutorial here http://www.kirupa.com/developer/actionscript/tween.htm my problem is I want it to scroll in an endless loop, and i'm stuck.
here's the code

import mx.transitions.Tween;
import mx.transitions.easing.*;
loc1 = 708;
loc2 = 60/2;
_root.createEmptyMovieClip("scroll_mc", 0);
with (_root.scroll_mc) {
moveTo(0, 0);
lineTo(Stage.width, 0);
lineTo(Stage.width, Stage.height);
lineTo(0, Stage.height);
endFill();

createEmptyMovieClip("scrollMask",3);
with(scrollMask){
moveTo(108,21);
beginFill(0x000088);
lineTo(708,21);
lineTo(708,60);
lineTo(108,60);
endFill();
}

createTextField("scrollText",2,loc1,loc2,10,10);
with(scrollText){
setMask(_parent.scrollMask);
autoSize = true;
textStr = " | ";
for (var i = 0; i < (_global._data.length - 1); i++) {
textStr = textStr + _global._id[i] + ": " + _global._data[i] + " | ";
}
text = textStr;
}

//create the tween
var xPosT:Tween = new Tween(scrollText, "_x", Regular.easeOut, loc1, (0-scrollText.textWidth), (scrollText.textWidth * 1), false);
xPosT.onMotionFinished = function() {
trace("stopped");
};
}

[Kraken]

You're going to need to duplicate your textfield, or create another one with the same text, and scroll that second one in tandem with the first. Then, when the first one goes all the way off the screen, push them back to the other side and continue to move them.

[ofanged1]

cool thanks!
that was easy

var xPosT:Tween = new Tween(_root.scroll_mc.scrollText, "_x", Regular.easeInOut, loc1, (50-_root.scroll_mc.scrollText.textWidth), (_root.scroll_mc.scrollText.textWidth * 1), false);

xPosT.onMotionFinished = function() {
trace("stopped");
this._x = loc1;
this._y = loc2;
this.start();
}

[ofanged1]

You're going to need to duplicate your textfield, or create another one with the same text, and scroll that second one in tandem with the first.
This was not as easy as i thought it would be... I tried using onEnterFrame to test for a collision but since the colliding objects remain over each other for long periods of time and don't "bounce off" like in a game the processes run tooooo many times. The other problem is once the last textBox tweens past the collision object and the first tween is started again the last tween disappears from the stage. I have done this with both 2 and three text boxes. they are all masked by one mask.


Then, when the first one goes all the way off the screen, push them back to the other side and continue to move them.
I tried to set _x and _y of the tween but that did not move it back to the beginning. Although, calling xPosT1.start() does start it from the position specified when creating the tween.

My fla and xml file can be downloaded at http://diroccos.com/share/TickerText.zip

[Kraken]

Do you just want continuous scrolling? If so, I wouldn't use a tween, just an onEnterFrame loop. Copy and paste the following into a new FLA:



var s:MovieClip = this.createEmptyMovieClip("scroll_mc", 0);
with (s) {
moveTo(0, 0);
lineTo(Stage.width, 0);
lineTo(Stage.width, Stage.height);
lineTo(0, Stage.height);
endFill();
}

var m:MovieClip = this.createEmptyMovieClip("scrollMask",3);
with(m){
moveTo(108,21);
beginFill(0x000088);
lineTo(708,21);
lineTo(708,60);
lineTo(108,60);
endFill();
}
var h:MovieClip = this.createEmptyMovieClip("holder_mc",33);
//h.createTextField("scrollText",2,loc1,loc2,10,10);
h.createTextField("scrollText",2,0,0,10,10);
var t:TextField = h.scrollText;
//h.setMask(m);
t.autoSize = true;
t.wordWrap = false;
//t.textStr = "By the pricking in my thumbs, something wicked this way comes.";

var myData:Array = [];
myData[0] = "What is coming?";
myData[1] = "Something wonderful.";
myData[2] = "My God! It's full of stars!";
myData[3] = "Open the pod-bay doors, Hal.";
myData[4] = "By the pricking in my thumbs,";
myData[5] = "Something wicked this way comes.";

var textString:String = " | ";
var tot:Number = myData.length;
for (var i:Number = 0; i < tot; i++) {
textString += i + ": " + myData[i] + " | ";
}
t.text = textString;
//then create the second textfield:
h.createTextField("second_txt",3,0,0,200,10);
h.second_txt.autoSize = "left";
h.second_txt.wordWrap = false;
h.second_txt._x = t._width;
var textString2:String = "";
for (var i:Number = 0; i < tot; i++) {
textString2 += i + ": " + myData[i] + " | ";
}
h.second_txt.text = textString2;

var tCheck:Number = 0 - t._width;

//and I wouldn't use a tween here since you
//just want the text to scroll by, right?
//so, just use an onEnterFrame like this:
h.onEnterFrame = function() {
this._x -= 1;
if (this._x <= tCheck) {
this._x = tCheck - this._x;
}
}

[ofanged1]

Awsome kraken, thanks alot man. That makes a lot more sense, I was trying to move it via _x, but not using onEnterFrame. this works much better for me :+)