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.
- 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:
- Combining Python with Flash Lite and Symbian C++ This month series of papers were released by the Symbian...
- Bing translator in Flash Lite Its been quite a long time I put my hands...
- Connecting to Pandorabots from Flash Lite Yesterday, I authored an article at Forum Nokia, as to...
- Getting Started with Flash Lite 1.1 Game Development I found this wonderful tutorial on how to get started...
- 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.