XML random quotes rotator
Tweet
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:
@admin
Is there a way to add a “pause” button to this? I’ve made a banner and use the quote rotator on it. Some of the quotes I’m using are long, and some are short so I don’t want to change the timer to 15 or 20 seconds because for the short ones it would take forever. Please let me know if this is possible. Thanks!
Hi, Great tutorial.
I created an external PHP file, which is outputing XML values, but despite changing the xmlPath:String to pick up that file, nothing is showing.
I can access the PHP file directly in the browser, and the output conforms exactly to the structure.
Is there something else I need to change in AS3 to make it see ‘generated’ XML?
TIA Mike
AHHH, got it:
If generating XML from PHP, you must set the header type to XML, or the AS doesn’t read it correctly
header(‘Content-Type: application/xml’);
Hi. I’m doing an assignment and I found this tutorial. I’m having problems with … the quotes. Basically I did everything as was told, but I couldn’t figure out where directory is and what data is? Do i have to change the xml file name to data.xml? or leave it as it is? I’m new and confused. Hope I can get some help soon. Thanks!
In the directory where your FLA file is, create a new directory called “data”. In this directory you should save the quotes.xml file.
I’m tackling learning everything at once: Flash, Dreamweaver, CSS… Ugh! But this is an incredible little quote toy! Thanks for sharing. I do have a question, however:
Is there a way to implement longer quotations, say two or three lines, or a paragraph?
Am I missing something here, or is the quotes.xml file not where this rotator draws the quotations?
I edited all the quotations and authors in the quotes.xml files while in Dreamweaver; did a Save All; refreshed all files on the localhost server; refreshed Firefox… And all the original quotations and authors still appear in the Flash movie. I double and triple checked the quotes.xml file I have on the local server and my edits are still there. I don’t get it. Any ideas what I’m doing wrong?
@Bill
I’ve been digging all night and can not determine why the rotator still plays all the original quotations that came with the download, when I had changed and re-saved all the quotations in the quotes.xml file. Where is it getting the old quotations from?
I have it all saved to my site at localhost/www/writerspark/blog/quoteblock
Inside quoteblock reside the data and Scripts folders; inside date is the _notes folder and the quotes.xml I edited; my index.htm and quotes.swf files are also in the quoteblock folder. When I open index.xml in Firefox or IE I get a beautiful rendering of your quotation rotator, but even though the new quotations are in the data/quotes.xml file the originals scroll in the window. Totally lost
@Bill
Whew! I told y’all that I’m new.
I found the link in the actions script to the online version of the quotes.xml file and changed it to the relative “data/quotes.xml” and re-exported it. Problem solved.
I am still trying to find a way to show larger — paragraph size — quotations, though, so any ideas would be appreciated.
Thanks again for putting this gadget up. It really helped me learn a lot playing with it.
I finally managed to get the text box large enough along with Multiline to get three lines of text to display. Works quite well. But I’m still struggling to figure out how to get the background and document size enlarged enough to get even more lines in, but I either end up with a lot of black bordering showing from under the gradient background or the author text box overlaps the quote text or slips off the bottom edge of the background. Looking for a tutorial on balancing these elements. I’ll get there…
If my ramblings seem unnecessary, feel free to delete my recent posts. It was just a newbie working through a problem. If, on the other hand, you feel this might be useful to future newbies, let it all stand.
Thanks again for this most excellent bit of code. I learned a LOT exploring it and tweaking!
hey!
I know this was posted a while ago, just wondered if anyone knew a way to pull in multiple quotes at one time. I have an xml file currently pulling in one quote and author from about 110. But ideally i want to pull in about 40/50 quotes at a time and have them scroll from top to bottom of the page in a line.. any one got any ideas?
Thanks in advance!