Loading Images Via XML into Flash MX 2004

Written by: Neil Webb (www.nwebb.co.uk)
Difficulty Level: Intermediate
Requirements: Flash MX 2004
Assumed Knowledge: Having read the associated CSS in Flash & Flash/XML tutorials
File(s) to Download: imagesxml.zip

Loading Images in to Flash Using XML

Bonjour!

In my previous tutorial (the one catchily titled "Loading External XML formatted Content into Flash MX 2004") I mentioned that I would be covering how to load images into Flash via XML. I've been taking a bit of time out from Flash recently in order to party hard down at club-PHP, but I've been getting so many emails asking how to do the image thing that I thought it was about time I made good on my promise. This is just a primer but it should be enough to get you on the right tracks.

The problem with spending so much time in front of a computer is that your social life will invariably suffer, and don't fool yourself - SexyGurl_1979 who you've been chatting to on ICQ for the last two months is really a balding middle-aged male janitor from Basingstoke - and you were foolish enough to give out your address? Ha ha! So, with this in mind what better use could there possibly be for loading images in flash than trying to bag yourself a fine 'real' lady, eh?

Loading a picture in to Flash

In Flash Player 7 and later you can use the <img> tag to embed JPEG files, SWF files, and movie clips inside dynamic and input text fields. This tag is supported only in dynamic and input text fields that are multiline and wrap their text. The Flash Player does not support progressive JPEG files.

If we were keeping all of our code inside of Flash then to load a simple image into a textfield we would do something like this:

myTextBox.htmlText = "This is a picture of my best feature: <img src='backofhead.jpg'>";

This assumes you've got an html-enabled dynamic textbox and you're loading an image called "backofhead.jpg" in to Flash.
If you're loading the image into a TextArea component of the same name you would use myTextBox.text and not myTextBox.htmlText

Pictures can only be aligned left or right of the textbox. The default value is left, and if you have a fair bit of text then it should automatically wrap around the image. What you may find however, is that when you test your movie on the web your picture doesn't load in instantly, so what happens is that the text loads, doesn't wrap (because it has nothing to wrap around), and then the picture loads over the text, and it all looks a horrible mess! Never fear, you can reserve the space that the image will take up by specifying the width and height attributes for your image tag, just like you do in HTML. You will see this in the example.

Something to note about the above code is the use of quotation marks. The whole line is enclosed in double quotes, so for the SRC attribute I used single quotes, so as not to confuse the Flash parser. If you like you could use the escape charater (\) instead like this:

"This is a picture of my best feature: <img src=\"backofhead.jpg\">"; //use whatever floats your boat 

That was simple enough, but when you're as gorgeous as myself, the real problem you'll encounter is deciding just which sexy picture of yourself to use ... er obviously, so, wouldn't it be nice if you could load a swf full of different images or animation into the textbox instead? Well guess what... you simply create a movieclip, give it an identifier (right-click the movieclip in the library and choose 'linkage'), and then specify the linkage-id as the source:

myTextBox.htmlText = "This is a swf: <img src='movieclip_linkage_ID'>";

When you use a linked movieclip make sure the clip's registration point is set to 0,0 else you may get some odd results.

Okay so that's the basics covered, and the rest is down to layout. That should be easy, but I've mentioned a problem with ignoreWhite in one of my other tutorials - it doesn't seem to work. I've just installed the new MM patch so that I'm using Flash 7.01 and it still doesn't seem to work, which puts a spin on this tutorial beccause the way your HTML file will appear in Flash will ultimately be affected by linebreaks and this may mean some fiddling about to get what you want.

I also tried taking advantage of whitespace by setting ignoreWhite to false, and laying out my file in several different ways, but each presented a problem, so here's what we're going to do: Rather than me writing a lengthy speil that covers every single linebreak and tag you will need to download the tutorial files nowand look at them in conjunction with the guidelines below so you can see how I had to lay it out in order for it to display properly.

First let's take a look at the finished file so we can see what we're going to do (you will need the flash 7 player to view this)

Sexy eh!
All the details regarding the date.css file have been covered in my previous tutorial(s), so we can ignore that, so has the basic setup of the Flash file, so the only thing we need to concentrate on now is sexyboy.html

You'll notice that the whole thing is surrounded in <textformat> tags. These tags have padding attributes (leftmargin='30' rightmargin='30') that I've used to pad the text on the left and right to keep it away from the sides of the textbox (TextArea component). Our headline text is enclosed in our XML <headine> tags, and so will be affected according to the Headline style we've created in our date.css

Next we have the <img> tag. Let's look at that in a bit of detail:

<img align='left' src='pics' width='100' height='100' hspace='30' vspace='20' />

I've specified the alignment first, although this isn't strictly necessary as it will default to 'left' anyway. Next we have the src, which is the linkage identifier for our movieclip in the library.

If we were loading an external image here we would simply include the image file in the same folder as the html and change the source to say realrealrealrealsrc="mypic.jpg" src="http://www.actionscript.org/resources/admin/mypic.jpg" src="http://www.actionscript.org/resources/admin/mypic.jpg" src="http://www.actionscript.org/resources/admin/mypic.jpg" src="http://www.actionscript.org/dev/admin/mypic.jpg" .

The width and height attributes are specified in order to reserve the space for the image as discussed above, and finally vspace and hspace add extra padding around the image.

Alignment is one of the trickier things about HTML in Flash, so what I did for this file is to position the text where I wanted it next to the image, and then adjusted the image's vspace attribute until both were aligned.

Stuff such as my name, age etc are enclosed within the <details> tags for css formatting purposes, and nested inside those I used my infoText class in conjuntion with <span> tags to change the colour of the values (this should all be making sense to you. If it isn't then you'll need to have a look at my previous two tutorials concerning stylesheets and XML in Flash).

You'll notice that everything inside <details></details> is on one line. This is due to the ignoreWhite problem in Flash. It's the only way I could get it to display properly without losing the text below it. Finally, I've included a few breaks and a URL link with css formatting to round things off.

This has been a whirlwind tour of using images in Flash via XML, but used in conjunction with my other tutorials it should easily give you enough to be going on with, and it may even help you find that special person ;)

Hope it helped.

Cheers,
Neil.

If you have any suggestions or comments about this tutorial please email me at neil@nwebb.co.uk
This, and other tutorials can be found on nwebb.co.uk