Creating a FIFA World Cup News Ticker XML

I know most people thinks about soccer right now, so let me show you a quick tutorial on how to stay updated with the latest news from FIFA. Here is a tutorial on how to create a flash news ticker XML with the latest FIFA World Cup 2010 news. Hope you like it !

Requirements

• Adobe Flash (CS3, CS4, CS5 )
• Flash Text FX extension
• Results from FIFA World Cup™ News

Final Result

Using Creative Text FX V2

With Creative TextFX v2 you can create stunning text effects in FLASH. This Flash component gives you access to more than 300 predefined text effects that are customizable from the user interface or directly with ActionScript elements - properties, methods, constructor parameters and events - thoroughly documented in the complete product manual or in the Contextual Help.
If you want to see some tutorials you can find them here. If you need help installing Creative Text FX, you can learn more here on how to install an extension.

Creating a flash news ticker XML

In order to create a news ticker that reads an XML file, we need to place some action script code inside our flash file.

Open Flash and go to Actions (or press F9)

Go to Frame 1, press F9 to open your Actions Panel and add this code:

import flash.net.URLRequest;
import flash.net.URLLoader;
import flash.events.Event;
import flash.events.TimerEvent;
import flash.utils.Timer;
import flash.display.Loader;
import flash.display.Sprite;



var index : Number;
var duration : Number; // in seconds

// the XML loaded from the rss feeder
var XML : XML;

// a list with all the news from the XML
var itemsList : XMLList;

// this points to fifa's rss address. if you want to use a different rss feeder you need to
 change this link
var urlRequest : URLRequest = new URLRequest("http://www.fifa.com/worldcup/news/rss.xml");

// object used to load the movieclip from the library
var mcClass : Class = getDefinitionByName("itemMC") as Class;

// object used to position the images on the stage
var imageHolder : Sprite = new Sprite();

// this code sends the request to the server
var urlLoader : URLLoader = new URLLoader();
urlLoader.load(urlRequest);
urlLoader.addEventListener(Event.COMPLETE, xmlLoaded);

// once the XML is loaded it's passed to the XML object and parsed
function xmlLoaded(e:Event):void { 
	 try {
       XML = new XML(urlLoader.data); 
     } catch (e:TypeError) {
     	trace("Could not parse the XML file.");
     }
	 parseXML();
}

// the itemsList is populated with the news from the XML  
function parseXML():void { 
	if(XML == null) return;
	
	// in this case, each news is kept inside "item" tags. the item tags are 
    found inside a channel tag
	itemsList = xml.channel.item;
	index = -1;
	
	// timer used to load next skins. change the duration parameter if you 
want a different time
	duration = 5;
	var timer : Timer = new Timer(duration * 1000);
	timer.addEventListener(TimerEvent.TIMER, tickHandler);
	timer.start();
	
	// create the first news. it will be replaced by the second when the timer ticks
	createNews();
}

function tickHandler(e:TimerEvent):void { 
	createNews();
}

function createNews():void { 
	// remove previous news holder from the stage
	if(index > -1) removeChildAt(0);
		
	// gets the next item from the list 
	index++;
	var item : XML = itemsList[index];
	
	// create a new movieclip object that will hold the news and populate it with the 
title and description from the XML
	var mc = new mcClass();
	mc.title_tf.htmlText = item.title;
	mc.desc_tf.htmlText = item.description;
	mc.addChild(imageHolder);
	
	mc.x = 0;
	mc.y = 0;
	
	// load the image for the current article
	var imageLoader : Loader = new Loader();
	imageLoader.load(new URLRequest(item.enclosure.attribute("url")));
	imageHolder.addChild(imageLoader);
	
	imageHolder.x = 15;
	imageHolder.y = 15;
	
	addChildAt(mc,0);
	// create the text fx object for the current title
	createTextFX(mc);
}


// imports needed by the textFX component
import xtd.textFX_v2.effects.ShockingFlakesEffect;
import xtd.textFX_v2.effects.NoneEffect;
import xtd.textFX_v2.effects.SplitLetterEffect;
import xtd.textFX_v2.presets.actions_NoneEffect;
import xtd.textFX_v2.presets.*;
import xtd.textFX_v2.TextFXMain;

// this function creates the text fx object
function createTextFX(holder):void { 
	// hide the text field that holds the title
	holder.title_tf.visible = false;
	var tfx : TextFXMain;
	var a : SplitLetterEffect;
	var b : ShockingFlakesEffect;
	var c : xtd.textFX_v2.effects.NoneEffect;
	
	// create a new instance of the Text FX class
	tfx = new TextFXMain(
		holder, 
		"SplitLetterEffect",
		"NoneEffect",
		"SplitLetterEffect",
		"NoneEffect",
		in_SplitLetterEffect.Extend_Default + ";duration=" + duration * 4,
		wait_NoneEffect.Extend_Default,
		out_SplitLetterEffect.Extend_Default + ";duration=" + duration * 4,
		actions_NoneEffect.Extend_Default,
		holder.title_tf.htmlText,
		null,
		

"delayTime=0;loop=false;useIn=true;useWait=true;afterInDelay=0;afterWaitDelay=0;
useOut=true;useInAsOut=true;useMove=false;moveDuration=150;moveFromX=200;moveFromY=200;
moveEasing=None.easeNone;"
	);
	// position the text fx component
	tfx.container.x = 170;
	tfx.container.y = 20;
	tfx.start();
}

Adding content to your flash XML news ticker

We need to add a Creative Text FX component. Open the Components Panel from Window->Components or press Ctrl+F7. And drag a Text FX Component to our stage. Now delete it from the stage, we only need it in the library because we will use the above ActionScript to control it.

Adding Creative Text FX Component

Create a movie clip called "itemMC" this will be our container. Find a background image with the FIFA World Cup and import it to stage and add it inside the itemMC. Add two text containers, inside the itemMC, one called "title_tf" this will hold our title for the news XML Add the second text container and name it "desc_tf" this will hold our actual news, the description of one XML item.

This what your library should look like:

If you want to change your font for your flash news ticker, go inside the itemMC and select the title_tf and change the font you want for your title. And if want to change the font for the description go to desc_tf and change the font.

If you want to place your items in another way, go to the ActionScript and change the coordinates for the image, title and description. If you want to set a bigger duration timer, find the variable called "duration" inside the function "parseXML" and change it. The default is set to 5, meaning 5 seconds.

If you have any questions please send them to: support@extendstudio.com