The Ticker and the Custom NewsTicker AS3 Class

In this effect, we show how to use our custom AS3 class 'NewsTicker' to create a cutomizable 3D news ticker in Flash CS4. We use the new 3D methods available in AS3 for Flash Player 10. News messages are loaded from an external XML file.

Click on the screen shot above to open the applet in a new window.

Download

  • Download all files corresponding to the applet above: ticker.zip

The fla file that corresponds to the applet above is 'tickermain.fla'. The fla file uses the class 'NewsTicker' in the nested sequence of folders flashandmath-as3 contained in the package. The folder and the fla file must be in the same directory for the fla file to compile. 'tickermain.swf' file loads 'news.xml' file at runtime. Again, 'news.xml' must be in the same directory as the swf and the corresponding html file.

The Custom 'NewsTicker' Class

The 'NewsTicker' class is simple to use and its code is easy to follow.

The constructor.  The only public method of the class is its constructor evoked with the keyword 'new'. The contructor requires one parameter, 'msgs' - a Vector of Strings contaning messages to be displayed. The remaining five parameters are optional:

new NewsTicker(msgs:Vector.<String>,st:int=130,bc:Number=0x990000,
                       tc:Number=0xFFFFFF,sf:Number=4)

'st' is the number of frames that each message will be displayed before rotation (default: 130). 'bc' is the color of the background (default: red 0xCC0000). 'tc' is the color of the text (default: white 0xFFFFFF). 'sf' is the scale factor. To minimize the blurring effect, we scale our ticker by moving it along the z-axis rather than by changing its dimensions. The higher scaling factor passed to the constructor, the smaller the ticker will be. Recommended values: 1-8.

Note:  The class creates a PerspectiveProjection object for each instance of NewsTicker. This object, whose fieldOfView and projectionCenter can easily be adjusted, is independent of the ProjectionPerspective object of the main movie.

The Blurring Side Effect for 3D Display Objects

If you worked with the new 3D methods of FP10, then you probably noticed the undesirable effect of objects becoming blurry when turned into AS3 3D objects. This is particularly bothersome when dealing with text. In our NewsTicker, to avoid blurriness as much as possible, we used translation along the z-axis to change the size of an instance rather than changing sizes of fonts.

We demonstarte the blurring effect on the next page.

Back to Flash CS4 Tutorials              Back to Flash and Math Home

We welcome your comments, suggestions, and contributions. Click the Contact Us link below and email one of us.

Adobe®, Flash®, ActionScript®, Flex® are registered trademarks of Adobe Systems Incorporated.