I've been looking for a while for a simple component or a script for a Flash ticker. Everything that's out there has way too many features: xml, customizable backgrounds, image scrolling, etc, like this one
I just need a widget that displays extra text by scrolling automatically and still has
a) smooth scrolling b) loops and c) I can easily change scrolling speed.
Any tips? Besides having to make it myself, of course 
I think make one yourself... or use the one I have just made you, hopefully it will help anyone learning as3, being that it is nothing fancy but has enough code to see how actionscript has changed.
// as3 timeline code - Simple Ticker // JLM 19 July 2008 // only bothered for movement in one direction. // assumes textfield off side of stage _txt with fonts embedded // make it an html textfield and put bold letter in and a not bold letter in
import flash.text.; import flash.display.; import flash.utils.Timer; import flash.events.TimerEvent;
// width of scroll area ( and height ) const wide: int = 200; var high: int = _txt.height; trace(_txt.htmlText); // screen position const px: int = 50; const py: int = 50; // text to scroll (use html formattig from the trace above ) const scroll_copy: String ='' + "I've been looking for a while for a simple component or a script for a Flash ticker.Everything that's out there has way too many features: xml, customizable backgrounds, image scrolling, etc, untill Justin made a quick one for me"+ ''; // gap between text const gap: int = 5; // timer fequency const freq: int = 30; // movement per cycle const dx: Number = 1;
var len: int;
var half: int;
var masked: Sprite = new Sprite();
var masker: Sprite = new Sprite();
var a_txt: TextField = new TextField();
var b_txt: TextField = new TextField();
var format: TextFormat = _txt.getTextFormat();
var cycle: Timer = new Timer( freq, 0 );
a_txt.setTextFormat( format ); b_txt.setTextFormat( format ); a_txt.embedFonts = true; b_txt.embedFonts = true; a_txt.htmlText = scroll_copy; a_txt.autoSize = 'left'; len = Math.round(a_txt.width); half = Math.round(a_txt.width/2); a_txt.x -= half; b_txt.htmlText = scroll_copy; b_txt.autoSize = 'left'; b_txt.x += half + gap;
masked.addChild( a_txt ); masked.addChild( b_txt ); masked.x = px; masked.y = py; masker.x = px; masker.y = py;
addChild( masker ); addChild( masked );
masked.mask = masker; masker.graphics.beginFill( 0xFF0000, 1 ); masker.graphics.drawRect( 0, 0, wide, high ); masker.graphics.endFill();
cycle.addEventListener( TimerEvent.TIMER, updateTicker ); cycle.start();
function updateTicker( e: TimerEvent ):void {
var temp: TextField;
// increment position
a_txt.x -= Math.round(dx);
b_txt.x -= Math.round(dx);
if( b_txt.x < 0 )
{
trace( 'swapping');
a_txt.x = Math.round(b_txt.x + len + gap);
// swap our refences round
temp = a_txt;
a_txt = b_txt;
b_txt = temp;
}
}
PS let me know if it needs a reflection, to get that itune over done web look!
Oh did you want vertical it should be modifiable if you need I can prob mod it.
whoa this does look different! I don't even know where to start to make it vertical!
Ok basically it is two textfields in a masked movieclip (movie with single frame are called sprites they are an optimisation thing but go with movieclips if it is more comfortable).
I place one below the others and every time the bottom (right) one is less negative than the mask I move the top one (left) to the bottom (right) and swap references to them and repeat.
we could have used a onEnterFrame event but it would be structured like the timer.
Anyway the conversion to vert was fairly simple although I am not sure how reliable 'height' is with htmlText maybe it is now fixed or my example does not have varing font sizes.
// as3 timeline code - Simple Ticker // JLM 19 July 2008 // only bothered for movment in one direction. // assumes textfield off side of stage _txt with fonts embedded // make it an html textfield and put bold not bold in
import flash.text.; import flash.display.; import flash.utils.Timer; import flash.events.TimerEvent;
// width of scroll area ( and height ) const wide: int = 200; const high: int = 100;//_txt.height; trace(_txt.htmlText); // screen position const px: int = 50; const py: int = 50; // text to scroll (use html formattig from the trace above ) const scroll_copy: String ='' + "I've been looking for a while for a simple component or a script for a Flash ticker.Everything that's out there has way too many features: xml, customizable backgrounds, image scrolling, etc, untill Justin made a quick one for me"+ ''; // gap between text const gap: int = 5; // timer fequency const freq: int = 30; // movement per cycle const dy: Number = 1;
var len: int;
var half: int;
var masked: Sprite = new Sprite();
var masker: Sprite = new Sprite();
var a_txt: TextField = new TextField();
var b_txt: TextField = new TextField();
var format: TextFormat = _txt.getTextFormat();
var cycle: Timer = new Timer( freq, 0 );
a_txt.setTextFormat( format ); b_txt.setTextFormat( format ); a_txt.embedFonts = true; a_txt.wordWrap = true; a_txt.multiline = true; b_txt.embedFonts = true; b_txt.wordWrap = true; b_txt.multiline = true; a_txt.width = wide; a_txt.htmlText = scroll_copy; a_txt.autoSize = 'left'; len = Math.round(a_txt.height); half = Math.round(a_txt.height/2); a_txt.y -= half; b_txt.width = wide; b_txt.htmlText = scroll_copy; b_txt.autoSize = 'left'; b_txt.y += half + gap;
masked.addChild( a_txt ); masked.addChild( b_txt ); masked.x = px; masked.y = py; masker.x = px; masker.y = py;
addChild( masker ); addChild( masked );
masked.mask = masker; masker.graphics.beginFill( 0xFF0000, 1 ); masker.graphics.drawRect( 0, 0, wide, high ); masker.graphics.endFill();
cycle.addEventListener( TimerEvent.TIMER, updateTicker ); cycle.start();
function updateTicker( e: TimerEvent ):void {
var temp: TextField;
// increment position
a_txt.y -= Math.round(dy);
b_txt.y -= Math.round(dy);
if( b_txt.y < 0 )
{
trace( 'swapping');
a_txt.y = Math.round(b_txt.y + len + gap);
// swap our refences round
temp = a_txt;
a_txt = b_txt;
b_txt = temp;
}
}
with gradient mask
// as3 timeline code - Simple Ticker // JLM 19 July 2008 // only bothered for movment in one direction. // assumes textfield off side of stage _txt with fonts embedded // make it an html textfield and put bold not bold in
import flash.text.; import flash.display.; import flash.geom.*; import flash.utils.Timer; import flash.events.TimerEvent;
// width of scroll area ( and height )
const wide: int = 200;
const high: int = 150;//_txt.height;
trace(_txt.htmlText);
// screen position
const px: int = 50;
const py: int = 50;
// text to scroll (use html formattig from the trace above )
const scroll_copy: String ='' +
"I've been looking for a while for a simple component or a script for a Flash ticker.Everything that's out there has way too many features: xml, customizable backgrounds, image scrolling, etc, untill Justin made a quick one for me"+
'';
// gap between text
const gap: int = 5;
// timer fequency
const freq: int = 30;
// movement per cycle
const dy: Number = 1;
const rightAngle: Number = Math.PI/2;
var len: int;
var half: int;
var masked: Sprite = new Sprite();
var masker: Sprite = new Sprite();
var a_txt: TextField = new TextField();
var b_txt: TextField = new TextField();
var format: TextFormat = _txt.getTextFormat();
var cycle: Timer = new Timer( freq, 0 );
a_txt.setTextFormat( format ); b_txt.setTextFormat( format ); a_txt.embedFonts = true; a_txt.wordWrap = true; a_txt.multiline = true; b_txt.embedFonts = true; b_txt.wordWrap = true; b_txt.multiline = true; a_txt.width = wide; a_txt.htmlText = scroll_copy; a_txt.autoSize = 'left'; len = Math.round(a_txt.height); half = Math.round(a_txt.height/2); a_txt.y -= half; b_txt.width = wide; b_txt.htmlText = scroll_copy; b_txt.autoSize = 'left'; b_txt.y += half + gap;
masked.addChild( a_txt ); masked.addChild( b_txt ); masked.x = px; masked.y = py; masker.x = px; masker.y = py;
addChild( masker ); addChild( masked );
var gMatrix: Matrix = new Matrix(); gMatrix.createGradientBox( wide, high, rightAngle, 0, 0 ); masker.graphics.beginGradientFill( GradientType.LINEAR, [ 0xcccccc, 0xFFFFFF,0xFFFFFF, 0xcccccc ], [ 0, 1,1, 0 ], [ 0, 0xFF/3, 0xFF/1.4,0xFF ], gMatrix );//.graphics.beginGradientFill( GradientType.LINEAR, [ 0xcccccc, 0xFFFFFF, 0xFFFFFF, 0xcccccc ], [ 0.5, 1, 1, 0.5 ], [ 0xFF/4, 0xFF/5, 0xFF/0.6, 0xFF/0.5 ], gMatrix ); masker.graphics.drawRect( 0, 0, wide, high ); masker.graphics.endFill(); masked.cacheAsBitmap = true; masker.cacheAsBitmap = true; masked.mask = masker;
cycle.addEventListener( TimerEvent.TIMER, updateTicker ); cycle.start();
function updateTicker( e: TimerEvent ):void {
var temp: TextField;
// increment position
a_txt.y -= Math.round(dy);
b_txt.y -= Math.round(dy);
if( b_txt.y < 0 )
{
trace( 'swapping');
a_txt.y = Math.round(b_txt.y + len + gap);
// swap our refences round
temp = a_txt;
a_txt = b_txt;
b_txt = temp;
}
}
thank you! I will put it up in a .fla and post a link here.