• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 805
  • Last Modified:

flash ticker that reads xml

I'm working on a project and I really need some help with figuring out how to create a ticker in flash that reads from an xml file. I assumed that I could make a dynamic text box as a movie clip, add the actions that I wanted the text to do within the clip, and add the rest of the code in as3 but I can't find a good tutorial to help me with the code!!

1. as3 code to insert xml text into a text box
2. specifics on how to write the xml so that it doesn't all display at once (ie 1 sentence at a time)
3. as3 to read the xml file in the first place
4. if I'm even going about adding the animation the right way (with the movie clip)

Please help!
  • 4
  • 4
1 Solution
Antonio EstradaTech Leader / Senior Web DeveloperCommented:
Let's see if this works for you:

Source Files: http://vulturous.110mb.com/eefiles/XMLTicker.zip
The code:


Hope it helps.

import fl.transitions.easing.*;
import fl.transitions.Tween;
import fl.transitions.TweenEvent;
/* ------- Global Variables -------- */
var xmlLoader:URLLoader = new URLLoader();
var xmlData:XML = new XML();
var xmlUrl:String = "source.xml";
var tickerPhrases:Array = new Array();
var currentTickerShown:Number = 0;
var currentTicker:Ticker;
var totalTickers:Number = 0;
const animationDuration:Number = 2; //Seconds
const stopDuration:Number = 5; //Seconds
/* ------- Application Start ------- */
/* ------- Generic Functions ------- */
function startUp():void {
	xmlData.ignoreWhitespace = true;
	xmlLoader.addEventListener(Event.COMPLETE, xmlLoaded);
	xmlLoader.load(new URLRequest(xmlUrl));	
function parseXML(xml:XML):void {
	var xmlNode:XML;
	for each(xmlNode in xml.phrase) {
function showTicker(num:Number):void {
	var ticker:Ticker = new Ticker();
	var tween:Tween;
	ticker.txt.text = tickerPhrases[num].content;
	ticker.x = stage.stageWidth;
	tween = new Tween(ticker,"x",Strong.easeOut,ticker.x,0,animationDuration,true);
	tween.addEventListener(TweenEvent.MOTION_FINISH, tweenedIn);
	if(currentTickerShown==totalTickers-1) {
		currentTickerShown = 0;
	} else {
/* --- Event Triggered Functions --- */
function xmlLoaded(event:Event):void {
	xmlData = new XML(event.target.data);
function tweenedIn(event:TweenEvent):void {
	var timer:Timer = new Timer(stopDuration*1000,1);
	timer.addEventListener(TimerEvent.TIMER_COMPLETE, hideTicker);
	currentTicker = event.currentTarget.obj;
function tweenedOut(event:TweenEvent):void {
function hideTicker(event:TimerEvent):void {
	var tweenOut:Tween = new Tween(currentTicker,"x",Strong.easeIn,currentTicker.x,stage.stageWidth*-1,animationDuration,true);
	tweenOut.addEventListener(TweenEvent.MOTION_FINISH, tweenedOut);

Open in new window

flashhelpplzAuthor Commented:
WOW thank you so much!!!!! It's perfect! :D It's not made at all how I expected it would- so all the animation and text style and everything is created entirely by actionscript? If you don't mind too much, could you maybe explain a little bit about the code so I could change little things if I wanted to? Like the direction of the animation or the text color?

flashhelpplzAuthor Commented:
Thank you so much!! I'd love it if you'd explain it to me a little, though, please! :)
Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

Antonio EstradaTech Leader / Senior Web DeveloperCommented:
I'm glad it was useful for you :).

Ok, so about the text color. There is a MovieClip in the library, it includes a dynamic textfield and you can change the font, size, color or whatever in there.

About the animation, it's done with this line... let's break it out:
tween = new Tween(ticker,"x",Strong.easeOut,ticker.x,0,animationDuration,true);

The Tween class lets you create animations via code without too much of a hassle.

a) I tell the Tween class that I will animate the "ticker" object.
b) I tell the Tween that the animation will work over the "x" property (so, ticker.x will be the value that changes)
c) Strong.easeOut is one of the functions that can be applied to the tween to get different effects. You can use other things like Bounce, Elastic, Regular.
d) The animation will start at the current value of ticker.x which was something like 550
e) The animation will end at 0. So the ticker.x property will move from 550 to 0
f) I tell the Tween how many seconds the animation will take.
g) I force the duration to be in seconds.


Hope that helped, dunno if I was clear enough. If I wasn't I'll elaborate further.

flashhelpplzAuthor Commented:
Thanks! I think I understand...

Unfortunately I don't have my laptop with me to try it out right now, but for example if I wanted to make it animate from top to bottom I could just switch the x's for y's like
tween = new Tween(ticker,"y",StrongeaseOut,ticker.y,0,animationDuration,true);  ? and since it starts at 550, I would need to move the text field to somewhere at the top of the stage, too, right?

I know this is getting a little more complicated (for me anyway lol) but if I wanted to make it drop in from the top and leave out the right, would I need to add another new Tween? And I would have to make the first tween stop in the middle of the animation so the second one wouldn't be starting after it's already off the stage, right?  I'm just taking guesses-I wish I wasn't so clueless about actionscript...

Thanks so much for your help!! You have no idea how much I'd like to learn this stuff :D
Antonio EstradaTech Leader / Senior Web DeveloperCommented:
Exactly, you can play with those values and interchange them around.. here are a few examples:

(Line 1 should go instead of the line on the function showTicker, Line 2 should go instead of the line on hideTicker, and you'd also need to change the line ticker.x = stage.stageWidth; to ticker.x = 0;)


//fade into stage,fly out to the right
tween = new Tween(ticker,"alpha",Strong.easeOut,ticker.alpha,1,animationDuration,true);
var tweenOut:Tween = new Tween(currentTicker,"x",Strong.easeIn,currentTicker.x,stage.stageWidth*-1,animationDuration,true);
//fly from the top, fade out
tween = new Tween(ticker,"y",Strong.easeOut,ticker.y,stage.stageHeight/2,animationDuration,true);
var tweenOut:Tween = new Tween(currentTicker,"alpha",Strong.easeIn,currentTicker.alpha,0,animationDuration,true);
//etc ;)

Open in new window

flashhelpplzAuthor Commented:
Awesome, thank you so much!!! Thanks for explaining it, too, I really appreciate it!!
Hopefully one day I won't be so helpless anymore lol :D
Antonio EstradaTech Leader / Senior Web DeveloperCommented:
I'm glad to help ;)

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 4
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now