Creating a customized Ticker Component in Flash Lite

by Manikantan

The Ticker is essentially a scrolling text that can be used to display advertisements, news headlines, stock quotes and many more. Ticker component is one of the simplest components to create on Flash Lite. Such a component is however, not available in the standard components set. Hence, in this article, we discuss how to create such a component.

To start coding such a component, begin with a New Movie Clip.

  • Create a dummy shape on the stage. This will serve as placeholder, to denote where you have placed it on the Stage. As the ticker’s textfield is created dynamically. This is only for your reference and should not appear during the execution.
  • To not display this dummy shape created previously, we need to add some code to the first frame of the topmost layer(the only layer) this._visible = false;
    • Now, on the same frame we code to create an EmptyMovieClip on the parent stage and insert a TextField into it. We also create a reference to the TextField by the name textf, this is just for convenience.
    main.createEmptyMovieClip("ti", main.getNextHighestDepth());
main.ti.createTextField("contentStr", 0, 0, this._y, 50, 50);
 
var textf = main.ti.contentStr;
    • To create the scrolling effect, we need to move its _x and _y properties at regular intervals. This we achieve by including it in a setInterval function.
    function runthis() {
if (Style == "left") {
if (textf._x+textf._width<0) {
textf._x = Stage.width;
} else {
textf._x -= speed;
}
} else {
if (textf._x>Stage.width) {
textf._x = -textf._width;
} else {
textf._x += speed;
}
}
}
setInterval(runthis, 0);
    • The ticker can be either left moving or right moving and this is decided by the Style variable in the above function.
    • You can also include other stylizing parameters like TextColour, FontSize. This can be best done by creating a TextFormat instance and then binding it to the TextField using setTextFormat().
    var tf = new TextFormat();
if (TextColor == undefined) {
tf.color = 0x000000;
} else {
tf.color = TextColor;
}
// Assure FontSize is non-negative, or take the Default Value
if (FontSize>0) {
tf.size = FontSize;
}
textf.autoSize = "left";
    • textf.setTextFormat(tf); Now on the library panel, right click on this MovieClip and select Component Definition. Here, add the input parameters (the previously discussed TickerContent, Style, Speed or even add new parameters like BOLD, ITALICS etc) to the list.
    • Now the component is ready and can be dragged onto the stage. You shall see the dummy shape, but this does not appear during run-time.
    • To enable placement of multiple instances of this component, we need to generalize the emptyMovieClip name. To do that, we create a quasi-static variable inst. This denotes the number of instances of the component we have on stage. Modifying the code in step 4 as we enable multiple instance to be placed on the stage.
    if(_parent.inst == undefined) {
_parent.inst =0;
}
_parent.inst ++;
main.createEmptyMovieClip("ti"+_parent.inst, main.getNextHighestDepth());
eval("main.ti"+_parent.inst).createTextField("contentStr", 0, 0, this._y, 50, 50);
var textf = eval("main.ti"+_parent.inst).contentStr;
    • Having the component selected, enter the values to the variables in the Parameters panel.

    Related posts:

    1. Combining Python with Flash Lite and Symbian C++ This month series of papers were released by the Symbian...
    2. Bing translator in Flash Lite Its been quite a long time I put my hands...
    3. Connecting to Pandorabots from Flash Lite Yesterday, I authored an article at Forum Nokia, as to...
    4. Getting Started with Flash Lite 1.1 Game Development I found this wonderful tutorial on how to get started...
    5. UI Component – Py-iAlbum-Viewer With lots of new features like 3G, GPS, Camera, Video;...

    Related posts brought to you by Yet Another Related Posts Plugin.