XML random quotes rotator

admin — Thu, 02 Jul 2009 10:37:24 +0000

Today I will show you how to use XML and ActionScript 3 to create a small application that changes your favourite quotes after some time interval. We will be using also the AS3 Tween Class to animate the quotes’ appearance.

At first this was just an experiment but i thought it might be useful for some of you. What the rotator does is to choose a random quote from an XML file and then shows it for several seconds. Then it chooses another random quote and so on. You can use it for header of your blog or whatever you want. So, let’s get started.

1. Create a new Flash CS3 document with size 600 x 100 and background color #000000.
2. Create two dynamic text fields. The first one should be about 580px wide and the second one – about 200px. For the long text field choose #ffffff for color, size 14, bold. I have used “Verdana” for font. If you don’t like it choose another font. Align the text inside the text field to center. Give it an instance name “quoteTxt”. Embed the font like this:

Now repeat this step for the other text field but only change the color to #00CCFF and give it an instance name “authorTxt”.
3. Convert the text fields to movie clips. Select the long text field and convert it to movie clip with instance name “quoteMC”. Repeat the same for the other text field and put “authorMC” for instance name.
4. Now let’s create the XML file we will be using. You can simply download it from here. So after downloading put the file into directory named “data”.
5. Create a new layer called “actions”, open the actions panel and paste this code:


//importing tween classes
import fl.transitions.Tween;
import fl.transitions.easing.*;

//we create a variable to store the loaded XML
var xml:XML;
//the path to the xml file
var xmlPath:String = "http://www.flashadvanced.com/wp-content/upload/quotes/quotes.xml";
//we create a loader and when the loading is over we call the xmlComplete function
var loader:URLLoader = new URLLoader();
//a url request for our loader
var req:URLRequest = new URLRequest(xmlPath);
loader.addEventListener(Event.COMPLETE, xmlComplete);
loader.load(req);
//a variable for our tween
var myTween:Tween;
//we need to set a timer
var timer:Timer = new Timer(5000);
timer.addEventListener(TimerEvent.TIMER, changeQuotes);
timer.start();

function xmlComplete(e:Event):void{
	xml = new XML(e.target.data);
	addQuotes();
	randomQuoteTween();
}

//we create arrays to store the quotes and the authors
var quotesArray:Array = new Array();
var authorsArray:Array = new Array();
//we need a random quote number
var randomNumber:Number;

function addQuotes(){
	//we loop through the "quote" element of our XML
	for each(var item:XML in xml.quotes.quote){
		//we fill the arrays with quotes and authors
		quotesArray.push(item.content);
		authorsArray.push(item.author);
	}
}

function randomQuoteTween():void{
	//calculating the random number
	randomNumber = Math.round(Math.random() * (quotesArray.length - 1));
	//filling the text fields
	quoteMC.quoteTxt.text = quotesArray[randomNumber];
	authorMC.authorTxt.text = authorsArray[randomNumber];
	//creating tween effects
	myTween = new Tween(quoteMC, "alpha", Strong.easeOut, 0, 1, 3, true);
	myTween = new Tween(authorMC, "x", Strong.easeOut, 550, 500, 3, true);
}

function changeQuotes(e:TimerEvent){
	randomQuoteTween();
}

Here is the final result:

Countdown timer with ActionScript 3.0

admin — Tue, 23 Jun 2009 14:50:55 +0000

In this tutorial I will show you how to use Timer and Date classes to create a nice countdown timer using Actionscript 3.

Well, each of us is waiting for something nice – birthday, vacation, weekend. As a soccer fan I am waiting for the FIFA World Cup 2010 which takes place in South Africa and begins on 11th June 2010. I am counting down the days but I can say it’s not that easy. Because of this I made a Flash countdown timer and now it is much easier.

So let’s get started with our countdown timer.

1. Create a new Flash CS3 document and save it under the name “countdown.fla”.
2. Now create a new dynamic text field and name it “time_txt”. Here we’ll put the time that remains to the beginning of the world cup championship. For this tutorial I am using font downloaded from here. To fully complete this tutorial you have to download this font and to install it on your system. Choose #009900 for font color and 24 for font size. Embed the font like this:

3. Now we have to move to actionscript. Create a new layer called “actions” and on its first keyframe press F9 to go to the “Actions” panel. Here is the code:

//First we create a date object. Note that we count the months from "0"!
var endDate:Date = new Date(2010, 5, 11);
//next we create a timer that will update the time every second
var timer:Timer = new Timer(1000);
//we add an event listener to the timer and then we start it
timer.addEventListener(TimerEvent.TIMER, updateTime);
timer.start();
//Calculate the time remaining as it is being updated
function updateTime(e:TimerEvent):void{
	//we create a variable to hold the current date
	var currentDate:Date = new Date();
	//we calculate the time to FIFA World Cup 2010
	var timeLeft:Number = endDate.getTime() - currentDate.getTime();
	//we convert the remaining time into seconds, minutes, hours, and days
	var seconds:Number = Math.floor(timeLeft / 1000);
	var minutes:Number = Math.floor(seconds / 60);
	var hours:Number = Math.floor(minutes / 60);
	var days:Number = Math.floor(hours / 24);

	seconds %= 60;
	minutes %= 60;
	hours %= 24;

	//we convert the numbers to strings
	var sec:String = seconds.toString();
	var min:String = minutes.toString();
	var hrs:String = hours.toString();
	var d:String = days.toString();

	//if we have a single digit we add "0" in front of it
	if (sec.length < 2) {
	    sec = "0" + sec;
	}

	if (min.length < 2) {
	    min = "0" + min;
	}

	if (hrs.length < 2) {
	    hrs = "0" + hrs;
	}

	//we create a variable to hold all elements and then we add it to our text field
	var time:String = d + ":" + hrs + ":" + min + ":" + sec;
	time_txt.text = time;
}

Flash and ActionScript tutorials - flashadvanced » timer

XML random quotes rotator

Here is the final result:

Countdown timer with ActionScript 3.0

And here is the final result: