Styling text pulled as attributes from XML file - is it possible?

[guermantes]

Hi,

I am learning Flash and ActionScript and I am following a tutorial of how to make a simple image gallery where the images are pulled from an external XML file. Also the title of each image is pulled from that file, as such:

PHP Code:

<image thumb_url="thumb5.jpg" full_url="image5.jpg" title="Grand Canyon #5 (oil on canvas)" /> 


I would like to be able to style the titles, so that 'Grand Canyon #5' becomes white and bold, whereas '(oil on canvas)' becomes black and regular.

Is that possible? Can I do it with CSS?

Thanks!

[gnomeontherun]

Yes you can, if you setup the text field to accept HTML/CSS content as described in this tutorial:

http://www.kirupa.com/developer/mx2004/css.htm

It might be different if using AS3, not sure, but this is AS2.

[guermantes]

Originally Posted by jeremywilken

Yes you can, if you setup the text field to accept HTML/CSS content as described in this tutorial:

http://www.kirupa.com/developer/mx2004/css.htm

Thanks for your reply.

I had seen that tutorial previously when looking for ways to do what I want. But - perhaps wrongly and due to my inexperience with ActionScript - I concluded that the situation in the tutorial you link to was different from mine.

Let me explain: The way I get text into my movieclip does not involve drawing a textbox or actually doing anything on the Flash stage itself (specifying 'dynamic text' or such). I just write ActionScript for frame one. The script loads an image from the XML file at a position in the movieclip that is defined in the XML file as well. Nothing is drawn on the stage. And the text I have comes from the XML file as well. So when I look at that tutorial I am wondering how I can apply what is taught there to my case.

The ActionScript code that loads the full image and also pulls the text from the XML-file looks like this:

PHP Code:

 function callFullImage(myNumber) {

myURL = myImages[myNumber].attributes.full_url;
myTitle = myImages[myNumber].attributes.title;

_root.createEmptyMovieClip("fullImage_mc",_root.getNextHighestDepth());
fullImage_mc._x = _root.full_x;
fullImage_mc._y = _root.full_y;

var fullClipLoader = new MovieClipLoader();
var fullPreloader = new Object();
fullClipLoader.addListener(fullPreloader);

fullPreloader.onLoadStart = function(target) {
target.createTextField("my_txt",fullImage_mc.getNextHighestDepth,0,0,200,20);
target.my_txt.selectable = false;
};

fullPreloader.onLoadProgress = function(target, loadedBytes, totalBytes) {
target.my_txt.text = Math.floor((loadedBytes/totalBytes)*100);
};

fullPreloader.onLoadComplete = function(target) {
new Tween(target, "_alpha", Strong.easeOut, 0, 100, .5, true);
target.my_txt.text = myTitle;
};
fullClipLoader.loadClip("full_images/"+myURL,fullImage_mc);

} 


On the Flash stage itself I have only specified the dimensions for the movie and the background colour.

Sorry for being daft, but is the tutorial you link to still relevant for my case?

Thanks for your help!

/g

[gnomeontherun]

It is relevant in some ways, but since you are doing this all through actionscript you have to know the necessary functions. I think this should set the same parameters using actionscript.

 function callFullImage(myNumber) {

myURL = myImages[myNumber].attributes.full_url;
myTitle = myImages[myNumber].attributes.title;

_root.createEmptyMovieClip("fullImage_mc",_root.getNextHighestDepth());
fullImage_mc._x = _root.full_x;
fullImage_mc._y = _root.full_y;

var fullClipLoader = new MovieClipLoader();
var fullPreloader = new Object();
fullClipLoader.addListener(fullPreloader);

fullPreloader.onLoadStart = function(target) {
target.createTextField("my_txt",fullImage_mc.getNextHighestDepth,0,0,200,20);
target.my_txt.selectable = false;
target.my_txt.html = true; // Enables HTML in this field
};

fullPreloader.onLoadProgress = function(target, loadedBytes, totalBytes) {
target.my_txt.text = Math.floor((loadedBytes/totalBytes)*100);
};

fullPreloader.onLoadComplete = function(target) {
new Tween(target, "_alpha", Strong.easeOut, 0, 100, .5, true);
target.my_txt.htmlText = myTitle; // Sends the text as HTML
};
fullClipLoader.loadClip("full_images/"+myURL,fullImage_mc);

}

[guermantes]

Thanks Jeremy,

I will try this code you gave me when I get home from work tonight and am in front of my project.

/g

[guermantes]

Hi again,

I tried and tried yesterday and just before giving up I managed to wrap my head around the code and finally managed to get the output styled as I wanted and in the positions I wanted.

Thanks a lot again for your help Jeremy!

I am not sure however if my code would pass a standards/best practices validation though. If someone doesn't mind having a look at the section I have been poking around in to see if I have made some horrible mistake that is not obvious to me (or if I am setting myself up for learning ActionScript badly/wrongly with this solution as my first 'own' coding) then I would be very grateful!

Also I am not quite sure whether my code loads the text before the full sized image or after (or even if it matters). I would assume the preloader's purpose is to wait until the image has loaded but the line specifying that the image shall load and display comes at the very end and that confuses me. Is the code not parsed from top to bottom?

Anyway,

Thanks a lot!

/g

PHP Code:

function callFullImage(myNumber) {

    myURL = myImages[myNumber].attributes.full_url;
    myTitle = myImages[myNumber].attributes.title;
    myDimensions = myImages[myNumber].attributes.dimensions;
    /*assign the width of each image - begin*/
    myWidth = myImages[myNumber].attributes.full_width;
    /*assign the width of each image - end*/
    _root.createEmptyMovieClip("fullImage_mc",_root.getNextHighestDepth());
    /*fullImage_mc._x = _root.full_x;*/
    fullImage_mc._x = (Stage.width-myWidth)/2;
    fullImage_mc._y = _root.full_y;



    var fullClipLoader = new MovieClipLoader();
    var fullPreloader = new Object();
    fullClipLoader.addListener(fullPreloader);

    fullPreloader.onLoadStart = function(target) {
        target.createTextField("my_txt",fullImage_mc.getNextHighestDepth,0,0,500,20);
        target.my_txt.selectable = false;
        target.my_txt.html = true;// Enables HTML in this field
    };

    /*fullPreloader.onLoadProgress = function(target, loadedBytes, totalBytes) {
    target.my_txt.text = Math.floor((loadedBytes/totalBytes)*100);
    };*/


    fullPreloader.onLoadComplete = function(target) {
        new Tween(target, "_alpha", Strong.easeOut, 0, 100, .5, true);
        target.my_txt._x = 0;
        target.my_txt._y = 500;


        /*begin CSS trials*/

        var format = new TextField.StyleSheet();
        var path = "slideshow.css";
        var titleClass = "<p class='title'>";
        var dimensionsClass = "<p class='dimensions'> - ";
        var closeP = "</p>";
        format.load(path);
        format.onLoad = function(loaded) {
            if (loaded) {
                target.my_txt.styleSheet = format;
                target.my_txt.htmlText = titleClass;
                target.my_txt.htmlText += myTitle;
                target.my_txt.htmlText += closeP;
                target.my_txt.htmlText += dimensionsClass;
                target.my_txt.htmlText += myDimensions;
                target.my_txt.htmlText += closeP;
            } else {
                target.my_txt.text = "Error loading CSS!";
            }
        };

        /*end CSS trials*/


        /*target.my_txt.htmlText = myTitle;// Sends the text as HTML*/


    };

    fullClipLoader.loadClip("full_images/"+myURL,fullImage_mc);


} 


[gnomeontherun]

Excellent, I was only thinking of having the CSS sent through HTML tags, which would have worked if you put the CSS inline with tags in the XML. However, you have done something more advanced and perhaps more appropriate, since your XML file will be cleaner and easier to manage.

The code executes based on the commands, when you wrap things in functions then their order becomes subject to conditions. In this case your event of .onLoadComplete, it runs only after the loading is complete (hence the name!) so your text is only displayed at this point. If you want it to display as soon as the next image is called, then you need to include the text display code in a function that is called when the next image is called.

[guermantes]

Originally Posted by jeremywilken

Excellent, I was only thinking of having the CSS sent through HTML tags, which would have worked if you put the CSS inline with tags in the XML.

It was my first thought to do it like that, but when I started putting in the HTML tags in the "title attribute" in the XML file, I seemed to upset the structure of the XML because my whole movie would be blank and no info seemed to get processed from the XML.

Thinking that everything within the quotation marks would be processed as HTML, I tried like this:

PHP Code:

<image thumb_url="thumb5.jpg" full_url="image5.jpg" title="<b>Grand Canyon #5</b> (oil on canvas)" /> 


...but the HTML tagging inside the quotation marks seemed to wreck things, and I did not know how to proceed.

EDIT: aha!!

<b>Bold text</b> = %3Cb%3EBold text%3C%2Fb%3E

However, you have done something more advanced and perhaps more appropriate, since your XML file will be cleaner and easier to manage.

Yay!!