home page icon Flash Bestiary / Fun with Text / Ticker with Effects

Ticker with Effects

This next ticker supports the use of a few different transition effects for displaying short lines. In addition to the basic scrolling text effect, we can introduce lines by scrolling from any of 4 directions, or doing two different 3d text-zoom effects.

I use a more complex data structure to control this. Instead of a simple array of strings, I use an array of hashes, which contains additional data fields for the debut and exit. Here's what it looks like:

var tickerItems = [
  {txt:'<font color="#FF0000">This is the first item in the ticker>/font>', debut:'left', exit:'down'},
  {txt:'<font color="#0000FF">This is the second item in the ticker.>/font>'},
  {txt:'<font color="#007777">This is the third item in the ticker.>/font>', debut:'out', exit:'in'},
  {txt:'<font color="#777700">This is the fourth item in the ticker.>/font>', debut:'up', exit:'out'},
  {txt:'<font color="#000000">This is the fifth item in the ticker.>/font>', debut:'down', exit:'left'},
  {txt:'<font color="#7700FF"><a href="http://www.krazydad.com" target="blank">This is the sixth item.</a>>/font>', debut:'in', exit:'right'},
  {txt:'<font color="#0000FF"><a href="http://www.krazydad.com" target="blank">Item 7.</a>>/font>', debut:'out', exit:'up'},
  {txt:'<font color="#770077"><a href="http://www.krazydad.com" target="_top">This ticker was brought to you by <u>krazydad.com</u></a> -- stay tuned for more news...>/font>'}

UPDATE: The source code below now contains an Actionscript 3 version, in addition to the original Flash MX code.


sourcecode iconDownload the flash project
book iconJim's Favorite Actionscript Books
wiki iconAsk Jim about Actionscript
Next: XML Ticker

Having trouble opening the project? You may need to Upgrade to Flash MX 2004

Copyright © 2003,2008 by Jim Bumgardner. All Rights Reserved.        Leave Jim some feedback