Tuesday, 11 January 2011

AS3 Quotes rotator with XML

In this tutorial you will learn how to create a quotes rotator with XML using Actionscript 3. I have used quotes from famous movies in this rotator. You will need some working knowledge of XML in this tutorial. I have used the TweenNano plugin for the tweening which can be downloaded at greensock.com 

AS3 Quotes rotator with XML

Step 1

Open up your favourite text editor and add the following XML. I have used eleven quotes, but you can add in more quotes if you wish. Save the file name as: quotes.xml.

<item txt="I'll be back" name="The Terminator"/>
<item txt="Goodbye, Mr. Bond" name="Goldfinger"/>
<item txt="I'll be back" name="The Terminator"/>
<item txt="Get busy livin' or get busy dyin" name="The Shawshank Redemption"/>
<item txt="Fuh-get about it!" name="Donnie Brasco"/>
<item txt="Show me the money" name="Jerry Maguire"/>
<item txt="You're gonna need a bigger boat" name="Jaws"/>
<item txt="May the force be with you" name="Star Wars"/>
<item txt="There's no place like home" name="The Wizard of Oz"/>
<item txt="Say hello to my Little Friend" name="Scarface"/>
<item txt="Houston, we have a problem" name="Apollo 13"/>

Step 2

Open a new AS3 flash file and save it in the same directory as your quotes.xml file. Change the stage dimensions to 400 x 200 and choose whatever stage colour you wish. I have used #2E82FF colour for my stage colour.

Step 3

Firstly, you need to create a dynamic text field to hold the quote text. Select the text tool with dynamic text and drag out a one line text field the same width as the stage area. Change the paragraph behaviour to multiline and select the align center button. Give this text field the instance name: quote_txt. The dynamic text field will need to be converted into a movie clip so it can be animated later on. Convert the text field into a movie clip (F8) and give it the instance name: quote_mc.

Step 4

You also need a dynamic text field to hold the authors name, so repeat the same as above. Give the text field the instance name: name_txt. And the instance name: name_mc for the movie clip.

On the stage you should now have two movie clips. Inside these movie clips are two dynamic text fields.

Step 5

In the document class add the class name: RandomQuotes and then open up a new Actionscript file and enter the following code.

package {
    import flash.display.Loader;
    import flash.display.MovieClip;
    import flash.events.Event;
    import flash.net.URLLoader;
    import flash.net.URLRequest;
    import flash.utils.setInterval;
    import com.greensock.*;
    public class RandomQuotes extends MovieClip {
        private var loader:URLLoader;
        private var xml:XML;
        private var quotesArray:Array = new Array();
        private var quotesTotal:int;
        private var count:int = -1;
        public function RandomQuotes() {
            //Creates a new instance of the loader class to load the quotes data.
            loader = new URLLoader();
            loader.addEventListener(Event.COMPLETE, xmlLoaded);
            loader.load(new URLRequest("quotes.xml"));
        private function xmlLoaded(e:Event):void {
                xml=new XML(e.target.data);
        //Adds the quotes and authors names into the quotesArray.
        private function addQuotes():void{
            quotesTotal = xml.quote.children().length();
            for(var i:int = 0; i < quotesTotal; i++){
                                  name: xml.quote.children().attribute("name")[i]})
        //Displays the quotes from the xml and fades the movie clip in.
        private function randomQuotes():void{
            count == quotesTotal-1 ? count = 0 : count++;
            quote_mc.quote_txt.text =   "\"" + quotesArray[count].quotes + "\"" ; 
            name_mc.name_txt.text = quotesArray[count].name; 
            TweenNano.from(quote_mc, 2, { alpha:0} );
            TweenNano.from(name_mc, 2, { alpha:0} );

Step 6

Test the movie Ctrl + Enter.

You can download the source files here.


waitingfordoom 27 March 2011 at 09:55  

I'm new to actionscript.
I get this error:
Error: Access of undefined property quote_mc
And the same with name_mc, TweenNano

iliketo 28 March 2011 at 11:21  


It looks like you have not give instance names to your movie clips. You also need to download the TweenNano plugin. The link is at the top of the post.

  COPYRIGHT © 2014 · ILIKE2FLASH · Theme by Ourblogtemplates

Back to TOP