Flash project (takeover) on rotating quotes

All,

I have to modify somebody's project (rotate quotes on refresh see top right corner) to fit the new layout "From our customers" quotes instead of the rotating image files.

It looks like there is a script on the page that is calling two other files; a flash movie quotes2.swg and an .xml file with the actual quotes.

I've never done flash :confused:, your help would be greatly appreciated. I do have Adobe Flash CS3 if it helps.

Here is that script:

<script type="text/javascript">
var so = new SWFObject("quotes2.swf", "quotes", "296", "199", "8");
so.write("flashcontent");
so.addParam("quality", "high");
so.addParam("wmode", "transparent");
so.addParam("salign", "t");
so.write("flashcontent");
</script>

Would you mind pasting your entire code down or even zipping up the project you are doing now. Because the code you posted it is javascript not Flash so it
will be quite hard for people who wants to help you. I do not think javascript could be written in Adobe Flash CS3

Quote:

---

Originally Posted by avorob

All,

I have to modify somebody's project (rotate quotes on refresh see top right corner) to fit the new layout "From our customers" quotes instead of the rotating image files.

It looks like there is a script on the page that is calling two other files; a flash movie quotes2.swg and an .xml file with the actual quotes.

I've never done flash :confused:, your help would be greatly appreciated. I do have Adobe Flash CS3 if it helps.

Here is that script:

<script type="text/javascript">
var so = new SWFObject("quotes2.swf", "quotes", "296", "199", "8");
so.write("flashcontent");
so.addParam("quality", "high");
so.addParam("wmode", "transparent");
so.addParam("salign", "t");
so.write("flashcontent");
</script>

---

Do you have access to the original .fla file for the implementation? If so, you should be able to open it in Flash CS3 and just alter the fonts/orientation. If you don't, then you'll have recreate it from scratch. The "script" you posted is just the code to embed the Flash into your HTML page. It has nothing to do with functionality.

Now, if you just want to replicate the effects that you have on the new layout page, I'd suggest going with a javascript option. That might be easier for you to work with.

But if you want to stick with Flash, you'll have to get your hands a little dirty in ActionScript. Below are some examples of how something like this is created. All of the files are released under Creative Commons NC, so feel free to play around with them.

If you have any questions, post back.

Here is XML-based random quote display created in ActionScript 2.0. It will show a new quote every time you refresh the page. 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.

For the AS 3.0 converts out there, here is a version of the same in ActionScript 3.0.

I've been digging through the tutorials on ActionScripts and some samples (starting with the one from Mr. Mediman) trying to dissect those for understanding. Unfortunately, the samples I found don't encompass all my task and I can't figure out how to modify or combine them. My task is to read the XML file (done), display one at a time quote (title/author) in a 300x100 window (need to figure out how to format that text), and randomly rotate the rotate quotes every time the browser is refreshed.

Here my progress:
- I adjusted my XML file with quotes to the following structure:
<Books>
<Book ISBN="1">
<title>
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.
</title>
<author>
The Malones - Westport, CT
</author>
</Book>
<Book ISBN="2">
<title>
.....
</Books>

Here is the script that reads it:

var xmlLoader:URLLoader = new URLLoader();
var xmlData:XML = new XML();

xmlLoader.addEventListener(Event.COMPLETE, LoadXML);

xmlLoader.load(new URLRequest("books.xml"));

function LoadXML(e:Event):void {
xmlData = new XML(e.target.data);
ParseBooks(xmlData);
}

function ParseBooks(bookInput:XML):void {
trace("XML Output");
trace("------------------------");

trace(bookInput.Book.author.text()[2]);
}

Right after I posted my comment I found a sample to rotate quotes
http://blog.six4rty.ch/tutorials/fla...quote-rotator/

Would it do what I need? I don't mind to redo the XML file headers.

Yes, you can use that code. If you want to find out how to format the actual .fla file, download my AS3 example that I posted above.

It's identical in functionality.

What you would need to change in my example would the code related to reading the XML, since your XML is formatted differently. But that is only changing 1-2 lines of code.

It works for me. Thanks so much. Actually, I like this script better as it shows a dynamic test not a movie. Thanks again.

Quote:

---

Originally Posted by avorob

It works for me. Thanks so much. Actually, I like this script better as it shows a dynamic test not a movie. Thanks again.

---

Hmm...
I think you're misunderstanding something. They both do the same thing in the same way (reading XML). But, by all means, if you understand one more over the other..use it.

:confused:

I modified the code from http://www.visualbinary.net/files/tu...om-quotes/as3/ to removed lines 21-23
// 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;

and lines 28-29
// Set theTitle text field to the contents of the title attribute in the random node
theAuthor.text = quote[index].attribute("author");

As I don't have "title" in my quotes.xml file. It worked fine for me in the browser but apparentely kicking errors:

TypeError: Error #2007: Parameter text must be non-null.
at flash.text::TextField/set text()
at randomQuotes_AS3AV_fla::MainTimeline/showRandomQuote()
at flash.events::EventDispatcher/dispatchEventFunction()
at flash.events::EventDispatcher/dispatchEvent()
at flash.net::URLLoader/onComplete()

What did I do wrong?

Thanks.

It looks like you deleted more than just those. Error 2007 means that you're probably trying to assign text to an object instead of a text field. Since, that isn't happening in the original code, you must have made some alterations.

If you want to post the code on your actions layer here, I'm sure it'll be easy enough to spot the offending code.

:D

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"));

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.

Code:

---

// 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:

Code:

---

        // 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.

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"));

Quote:

---

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.

Quote:

---

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.

Code:

---

// 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.

Quote:

---

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?

Quote:

---

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.

Code:

---

// 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:

Code:

---

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.

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.

Quote:

---

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 :D.

Quote:

---

Originally Posted by Medyman

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.

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.

Code:

---

#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");

---

Excellent! Thank you.:D