Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    Apr 2007
    Posts
    59
    Thanks
    10
    Thanked 0 Times in 0 Posts

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

    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!

  • #2
    Senior Coder gnomeontherun's Avatar
    Join Date
    Sep 2007
    Location
    Houston
    Posts
    2,846
    Thanks
    10
    Thanked 238 Times in 229 Posts
    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.
    jeremy - gnomeontherun
    Educated questions often get educated answers, and simple questions often get simple answers.

  • #3
    New Coder
    Join Date
    Apr 2007
    Posts
    59
    Thanks
    10
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by jeremywilken View Post
    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(targetloadedBytestotalBytes) {
    target.my_txt.text Math.floor((loadedBytes/totalBytes)*100);
    };

    fullPreloader.onLoadComplete = function(target) {
    new 
    Tween(target"_alpha"Strong.easeOut0100.5true);
    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

  • #4
    Senior Coder gnomeontherun's Avatar
    Join Date
    Sep 2007
    Location
    Houston
    Posts
    2,846
    Thanks
    10
    Thanked 238 Times in 229 Posts
    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.

    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;
    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);
    
    }
    jeremy - gnomeontherun
    Educated questions often get educated answers, and simple questions often get simple answers.

  • Users who have thanked gnomeontherun for this post:

    guermantes (12-03-2008)

  • #5
    New Coder
    Join Date
    Apr 2007
    Posts
    59
    Thanks
    10
    Thanked 0 Times in 0 Posts
    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

  • #6
    New Coder
    Join Date
    Apr 2007
    Posts
    59
    Thanks
    10
    Thanked 0 Times in 0 Posts
    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.easeOut0100.5true);
            
    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);




  • #7
    Senior Coder gnomeontherun's Avatar
    Join Date
    Sep 2007
    Location
    Houston
    Posts
    2,846
    Thanks
    10
    Thanked 238 Times in 229 Posts
    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.
    jeremy - gnomeontherun
    Educated questions often get educated answers, and simple questions often get simple answers.

  • #8
    New Coder
    Join Date
    Apr 2007
    Posts
    59
    Thanks
    10
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by jeremywilken View Post
    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!!
    Code:
    <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!!
    Last edited by guermantes; 12-03-2008 at 02:37 PM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •