Flash project (takeover) on rotating quotes

[avorob]

Here is a fragment of quotes.xml file where I took "title" variable out:

<?xml version="1.0" encoding="ISO-8859-1"?>
<quotes>

<quote author="The Malones - Westport, CT"> I just wanted to thank you so much for all your help in finding us a buyer for our home. We will always recommend your service to our friends, we could have some other possibilities for you with people that may want to move out of Westport in the near future. Thank you again for everything.</quote>

......

</quotes>



And here is the modified code that generates errors:



// Create a URLLoader instance to load a external file
var loader:URLLoader = new URLLoader();
// When the URLLoader completes loading our XML file into the Flash movie.
// fire the showRandomQuote() function. This is the replacement for AS2's onLoad() method
loader.addEventListener(Event.COMPLETE, showRandomQuote);

// Create the XML Object and initiate the XML() Class.
var xml:XML;

function showRandomQuote(e:Event):void {
// Create a new XML object
xml = new XML(e.target.data);

// Create a XMLList object that holds all of our quotes (think of it as an array)
var quote:XMLList = xml.quote

// Here we calculate the number of quotes there are in the XML file and populate the
// totalQuotes variable.
var index:Number = Math.floor(Math.random() * (quote.length() - 0));

// If there is no "title" for the author, move the quote up so there isn't a gap
if(quote[index].attribute("title") == "") {
theQuote.y = theQuote.y - 20;
}

// Set theAuthor text field to the contents of the author attribute in the random node
theQuote.text = quote[index];
// Set theTitle text field to the contents of the title attribute in the random node
theAuthor.text = quote[index].attribute("author");
// Set theQuote text area to the contents of the quote node in the random node
theTitle.text = quote[index].attribute("title");
}

// Don't forget to load the actual XML file.
// To load the XML file we simply use the .load method of the URLLoader class
// In AS3, all external requests must be made by an URLRequest Object
loader.load(new URLRequest("quotes.xml"));

[Medyman]

I'm not able to replicate the errors that you posted. And the code that you pasted is the same as what I wrote originally -- no changes.

If your goal is to remove the title, use the code below. I have kept the original there for reference and commented out the unnecessary parts.

// Create a URLLoader instance to load a external file
var loader:URLLoader = new URLLoader();
//  When the URLLoader completes loading our XML file into the Flash movie.
//  fire the showRandomQuote() function.  This is the replacement for AS2's onLoad() method
loader.addEventListener(Event.COMPLETE, showRandomQuote);

// Create the XML Object and initiate the XML() Class. 
var xml:XML;

function showRandomQuote(e:Event):void {
	//  Create a new XML object
	xml = new XML(e.target.data);
	
	//  Create a XMLList object that holds all of our quotes (think of it as an array)
	var quote:XMLList = xml.quote
	
	// Here we calculate the number of quotes there are in the XML file and populate the 
	// totalQuotes variable.
	var index:Number = Math.floor(Math.random() * (quote.length() - 0));
	
	/* IF INCLUDING TITLES
	// If there is no "title" for the author, move the quote up so there isn't a gap
	if(quote[index].attribute("title") == "") {
		theQuote.y = theQuote.y - 20;
	}
	*/
	
	// IF NOT INCLUDING TITLES & MY EXAMPLE INTERFACE
	theQuote.y = theQuote.y - 20;
	
	// Set theAuthor text field to the contents of the author attribute in the random node
	theAuthor.text = quote[index].attribute("author");
	// Set theTitle text field to the contents of the title attribute in the random node
	//theTitle.text = quote[index].attribute("title");
	// Set theQuote text area to the contents of the quote node in the random node
	theQuote.text = quote[index];
}

// Don't forget to load the actual XML file.
// To load the XML file we simply use the .load method of the URLLoader class
// In AS3, all external requests must be made by an URLRequest Object
loader.load(new URLRequest("quotes.xml"));

You should only keep this:

	// IF NOT INCLUDING TITLES & MY EXAMPLE INTERFACE
	theQuote.y = theQuote.y - 20;

if you're using the same interface as my example. Otherwise, feel free to remove it.

[avorob]

Sorry about that. To many copies flying around. Below is the modified code that I'm having problems with.

My preference would be not to have "title" as a variable at all in the flash file and not have title="" in the xml file. Also, any idea why the link to the modified xml file wouldn'l link just quotes_av.xml but would work as ./quotes_av.xml while they are all in the same directory??

Is there a way to put a line break between the actual quote and the author insted of having two text boxes as the quotes vary in length.

See http://system.teardowns.com:8000/ it should be up shortly.

Thanks again for your help.


// Create a URLLoader instance to load a external file
var loader:URLLoader = new URLLoader();
// When the URLLoader completes loading our XML file into the Flash movie.
// fire the showRandomQuote() function. This is the replacement for AS2's onLoad() method
loader.addEventListener(Event.COMPLETE, showRandomQuote);

// Create the XML Object and initiate the XML() Class.
var xml:XML;

function showRandomQuote(e:Event):void {
// Create a new XML object
xml = new XML(e.target.data);

// Create a XMLList object that holds all of our quotes (think of it as an array)
var quote:XMLList = xml.quote;
// Here we calculate the number of quotes there are in the XML file and populate the
// totalQuotes variable.
var index:Number = Math.floor(Math.random() * (quote.length() - 0));


// Set theAuthor text field to the contents of the author attribute in the random node
theQuote.text = quote[index];
// Set theTitle text field to the contents of the title attribute in the random node
theAuthor.text = quote[index].attribute("author");
}

// Don't forget to load the actual XML file.
// To load the XML file we simply use the .load method of the URLLoader class
// In AS3, all external requests must be made by an URLRequest Object
loader.load(new URLRequest("./quotes_av.xml"));

[Medyman]

Below is the modified code that I'm having problems with.

I'm still not able to replicate. Did you try the code in my last post? It works in my testing. Make sure that your text field is a dynamic text field. If you still can't get it to work, post your .fla.

My preference would be not to have "title" as a variable at all in the flash file and not have title="" in the xml file.

Again, the code I provided in my last post should work. If it doesn't, then something might be up with your setup.

The below code gets rid of ALL references to the title. The code I posted earlier does the same thing, but I kept the old code commented out. I guess that's what you were getting confused with.

// Create a URLLoader instance to load a external file
var loader:URLLoader = new URLLoader();
//  When the URLLoader completes loading our XML file into the Flash movie.
//  fire the showRandomQuote() function.  This is the replacement for AS2's onLoad() method
loader.addEventListener(Event.COMPLETE, showRandomQuote);

// Create the XML Object and initiate the XML() Class. 
var xml:XML;

function showRandomQuote(e:Event):void {
	//  Create a new XML object
	xml = new XML(e.target.data);
	
	//  Create a XMLList object that holds all of our quotes (think of it as an array)
	var quote:XMLList = xml.quote
	
	// Here we calculate the number of quotes there are in the XML file and populate the 
	// totalQuotes variable.
	var index:Number = Math.floor(Math.random() * (quote.length() - 0));
	
	// Set theAuthor text field to the contents of the author attribute in the random node
	theAuthor.text = quote[index].attribute("author");
	// Set theQuote text area to the contents of the quote node in the random node
	theQuote.text = quote[index];
}

// Don't forget to load the actual XML file.
// To load the XML file we simply use the .load method of the URLLoader class
// In AS3, all external requests must be made by an URLRequest Object
loader.load(new URLRequest("quotes.xml"));

Just delete the title="" attributes from the XML. Also, delete the theTitle text input from the stage.

Also, any idea why the link to the modified xml file wouldn'l link just quotes_av.xml but would work as ./quotes_av.xml while they are all in the same directory??

Sounds like server issues. Are you using any type of .htaccess directive?

Is there a way to put a line break between the actual quote and the author insted of having two text boxes as the quotes vary in length.

Yeah. Try the code below. Of course, you'll want to remove theTitle and theAuthor text fields first.

// Create a URLLoader instance to load a external file
var loader:URLLoader = new URLLoader();
//  When the URLLoader completes loading our XML file into the Flash movie.
//  fire the showRandomQuote() function.  This is the replacement for AS2's onLoad() method
loader.addEventListener(Event.COMPLETE, showRandomQuote);

// Create the XML Object and initiate the XML() Class. 
var xml:XML;

function showRandomQuote(e:Event):void {
	//  Create a new XML object
	xml = new XML(e.target.data);
	
	//  Create a XMLList object that holds all of our quotes (think of it as an array)
	var quote:XMLList = xml.quote
	
	// Here we calculate the number of quotes there are in the XML file and populate the 
	// totalQuotes variable.
	var index:Number = Math.floor(Math.random() * (quote.length() - 0));
	
	// Add the author's name to the top of the text area
	theQuote.text = quote[index].attribute("author");
	// Add a line break
	theQuote.appendText("\r\n");
	// Set theQuote text area to the contents of the quote node in the random node
	theQuote.appendText(quote[index]);
}

// Don't forget to load the actual XML file.
// To load the XML file we simply use the .load method of the URLLoader class
// In AS3, all external requests must be made by an URLRequest Object
loader.load(new URLRequest("quotes.xml"));

With the current setup though, there is no benefit for doing this. And it won't solve the problem of the quote having variable height. Assuming, that your authors' names do not go onto a second line, the author's line will always be the same height. So, simply adding it into the same textarea won't solve much.

The code you're looking for is:

theQuote.autoSize = TextFieldAutoSize.LEFT;

This will allow theQuote to expand/contract to whatever size the text within it is. You don't need to have everything in the same text box. Though, doing so won't have any detrimental (or beneficial) effects.

[avorob]

I ended up keeping separate text boxes for the quote and the author. I just moved the author on top. Adding a line brake wasn't a sufficient separation between the text and two breaks was to much. Plus it enabled me to make the "author" font size different than the "quote".

We'll see whether the code throws errors when it's uploaded to the live site.

Thanks.

[Medyman]

I ended up keeping separate text boxes for the quote and the author. I just moved the author on top. Adding a line brake wasn't a sufficient separation between the text and two breaks was to much. Plus it enabled me to make the "author" font size different than the "quote".

FYI: You could have also used CSS for this. It's not something I would recommend because the alternative is so much easier to implement and maintain. But, nonetheless, it is an option .

[tommatthews]

Here is a version of the same movie that loops through the quotes and displays a new one very 10 seconds. I'll upload the source to the looping one a little bit later.

Hi Medyman,

Any chance of posting the looping version of this (or instructions on how to modify it to loop) as it looks exactly what I am after.

[Medyman]

Download the source file from here and replace the AS on the actions layer with the code below. Change the highlighted number to set the transition time. You don't need to change anything else.

Note, that I'm using Zeh Fernando's MC Tween for the fading transitions. If you don't have it already, you can download it here.

#include "mc_tween2.as"

var xml:XML = new XML();
xml.ignoreWhite = true;

var totalQuotes:Number = new Number();
var index:Number = 0;
var delay:Number = 5;

xml.onLoad = function(success) {
	if(success) {
		totalQuotes = xml.firstChild.childNodes.length;
		loadQuote();
	}
}

function loadQuote() {
	var quote = xml.firstChild.childNodes[index];
	
	if(quote.attributes.title == "") { theQuote._y = 25; }
	else { theQuote._y = 45; }
	
	theAuthor.text = quote.attributes.author;
	theTitle.text = quote.attributes.title;
	theQuote.text = quote.firstChild.nodeValue;
	
	showQuote();
}

function showQuote() {
	theAuthor.alphaTo(100, .3, "easeOutQuad");
	theTitle.alphaTo(100, .3, "easeOutQuad");
	theQuote.alphaTo(100, .3, "easeOutQuad");
}

function hideQuote() {
	theAuthor.alphaTo(0, .3, "easeOutQuad");
	theTitle.alphaTo(0, .3, "easeOutQuad");
	theQuote.alphaTo(0, .3, "easeOutQuad", 0, loadQuote);
	index++;
	if (index >= totalQuotes) {
		index = 0;
	}
}

setInterval(hideQuote, (delay*1000));

xml.load("quotes.xml");

[tommatthews]

Excellent! Thank you.