Malarkey is Andy Clarke, a creative designer with a passion for accessibility and web standards. This is his personal website.

Fireworks and XML (pt1)

In the first of an occassional column on one of my favourite graphics applications (the largely under-rated) Macromedia Fireworks, I thought I’d write about how I often use a combination of Fireworks MX and XML to create a site-full of graphical text headers for use with FIR techniques.

Data-Driven Graphics Wizard

Sometimes plain text headers styled with CSS are not enough to compliment a design, sometimes there is no alternative to using graphical header images. But on a large site, creating a series of images can be time consuming, so to save time I have created Fireworks and XML templates that I use again and again. These templates, combined with Fireworks’ Data-Driven Graphics Wizard create a complete set of images in seconds and save me an enormous amount of time.

The XML file

I wanted to create a template that I could use many times over. As many sites share similar text content for headers (about us, contact us, privacy policy etc.) creating an XML file that contained all the header text that I was ever likely to need, seemed like a good idea. Setting up the XML was easy, even for a non-programmer.

In my favourite text editor, I created the XML file starting with,

<?xml version="1.0" encoding="iso-8859-1"?>
<records>
</records>

Now, for each header I’ll need, I add the header text between <record> tags. You can name the variable anything you like, but I have decided on <varHeader>.

<?xml version="1.0" encoding="iso-8859-1"?>
<records>


<record>
<varHeader>About us</varHeader>
</record>

<record>
<varHeader>Contact us</varHeader>
</record>
</records>

(Kindler Chase has recently made a nifty XML file generator inspired by this article over at nCubed.)

Save the XML file (remembering the .xml extension). Over time I have added header text variables for most eventualities and I still continue to add to this core XML file whenever a new header presents itself.

Setting up the Fireworks image template

Next I created a Fireworks canvas, making sure that I allowed enough width for longer header text. Next I used the Text Tool (T) to add text. In place of ’real’ text, I added a variable to match the variable in my XML file.

{varFIR}

Then I saved the file without any text styling. (Remember, this is a template that I continue to reuse in many different styles on many different sites.

Fireworks graphic template with one variable and no styling

Now for some action

With my template Fireworks file saved for use another day, I start each new project by adding styling to the text. Fonts, colours can be altered to suit and Fireworks effects can be also be added if I fancy a stroke, shadow or glow. For this example I have chosen the Lambretta style font used on this site.

Styled Fireworks graphic template with one variable

When the text variable is styled as I want it, I save the file as a new Fireworks PNG into my site ’elements’ folder.

Now I select Commands > Data-Driven Graphics Wizard from Fireworks’ menu and follow the on-screen instructions. The process is very clear.

Select the XML file created earlier1. Select the XML file created earlier.

2. Preview the imported data, tedious so I usually hit ’next’ pretty quickly to skip this step.

Select which records to convert into header images3. Select which records to convert into header images (usually all of them).

4. Map any mismatched variables to field names in your XML file (not usually necessary…).

Choose how you would like the files named and your export settings5. Choose how you would like the files named and your export settings (.gif or .jpg).

6. Press ’Done’ to export your all image headers.

Voila! Tens, hundreds or even thousands of graphical header images created in a fraction of the time it would take to create them manually. All from a standard XML file created just the once, and an easily styled Fireworks template image. Priceless!

A completed header image, automatically created from XML data source

Wrapping it up

The developer of the Data-Driven Graphics Wizard, Joseph Lowery, has witten a more comprehensive article on the technique over at Macromedia. I hope that it saves you as much time as it has saved me!

For more on CSS FIR image replacement techniques, see also:

Update

Hot off the press is Stewart Rosenberger’s article on Dynamic Text Replacement over at A List Apart. Awesome stuff! Anyone care to write an asp version.

Replies

  1. #1 On June 15, 2004 12:09 AM Gordon Mackay said:

    I said it once before and I will say it again Malarkey, you are the kiddie :)

    I have been using FW for almost two years now and have never once even touched the Data-Driven Graphics Wizard.

    Thanks for the insight :)

  2. #2 On June 15, 2004 12:19 AM Phil Baines said:

    Second that comment! I have been using FW for a good while now, and I didn’t know that this was possible!

    great stuff!

  3. #3 On June 15, 2004 02:07 AM Carina C. Zona said:

    Holy cow.

    So. Bloody. Useful.

    Thank you for pointing this feature out.

  4. #4 On June 15, 2004 03:11 AM Kindler Chase said:

    Hi Malarkey,

    Gordon showed me this here page… we got to thinking it’d be nice to have an automated way of generating the xml file… so, I whipped up a quick little app:

    https://www.ncubed.com/beta/FW_XML/

    If folks find this useful, I’ll make it a little more functional :)

    Enjoy!

  5. #5 On June 15, 2004 11:52 AM Jon Hicks said:

    Oh, this is just sweet! I use Fireworks for almost everything, but didn’t know you could do this!

    The article-image link though - a little tenuous mayhaps?!!

  6. #6 On June 15, 2004 08:54 PM Malarkey said:

    Kindler,

    Thanks for your effort on the XML generator. I have added it to the main body of the article (for completeness ;) )

    I’m gonna give the ’Dynamic Text Replacement’ technique over at ’A List Apart’ a try too. Anyone else given it a go yet?

    Jon,

    I had the Greavsy image lying around and I wanted to use it for something. Tenuous I know, but still pretty funny!

  7. #7 On June 15, 2004 09:30 PM Brian said:

    Wow, that’s absolutely awesome. I’ve been using FW for a little over a year now but had no idea that this was possible. It will let me add a lot of nice graphical touches to stuff on my site that I was either too busy or too lazy to get too. Thanks!

  8. #8 On June 15, 2004 10:05 PM josh said:

    Read all of the comments again… Thats how i feel.

    Thanks!

  9. #9 On June 16, 2004 12:18 AM Kindler Chase said:

    Malarkey,

    No problem :)

    If you (or anyone else) can think of a way to enhance the system, feel free to let me know.

    ciao,
    ::kindler::

  10. #10 On June 16, 2004 02:47 AM Linda Rathgeber said:

    You’re probably some kind of God, Kindler. :-)

  11. #11 On June 16, 2004 03:16 AM Malarkey said:

    Linda was polite enough not to plug her book, so I WILL! https://www.webdevbiz.com/pwf/razzle.cfm

    (Now do I get a free copy?)

  12. #12 On June 16, 2004 07:13 AM Ruben said:

    By experience I know there are quite a few people out there with old versions of Fireworks. Therefore it might be handy to know that the Data-Driven Graphics Wizard is an MX feature and didn’t exist in earlier versions. (Yet another reason for them to upgrade)

  13. #13 On June 16, 2004 09:23 AM Phunky said:

    Well i’ll be thats just bloody great!

    /me think im gonna have to start using Fireworks again, aint touched it since before MX

  14. #14 On June 16, 2004 01:35 PM Linda Rathgeber said:

    Hey Andy. Write to me off list. :-)

  15. #15 On June 16, 2004 04:31 PM DH said:

    lovely, just lovely. I could have spent so much more time at the pub / playing football / at the pub / watching cricket etc. etc. if only I’d known about this sooner! Time to catch up …

  16. #16 On June 17, 2004 12:37 PM Mike Stenhouse said:

    Ahhhhhh, that’s a great feature! I wish I’d known about it a week ago - I spent ages setting type in little gifs for IR only to decide that the font was wrong and have to over.

    I might have to dust off Fireworks again too…

  17. #17 On June 17, 2004 01:00 PM Derek Featherstone said:

    Absolutely brilliant… I’ve been using FireWorks for ages, and I’ve never upgraded past the original version I bought - waiting, patiently for a reason to pay for the new version.

    If there are other automation features like this in FW MX 2004, then I’ll be purchasing the latest and greatest… I mean, really -- its like taking tedious graphics production and turning it into programming/development. What other automation features are there with FW MX?

  18. #18 On June 20, 2004 07:58 AM Picselutz said:

    It’s a great feature endeed, but you can find out about it if you read the damn manual ;)

    Anyway… it’s so bloody usefull !

  19. #19 On July 3, 2004 11:29 PM Root said:

    The brits are very good at fiddling with widgets. I would hazard a guess that this will change the face of the internet quite literally.
    Vote Malarkey for Guru. :)