Interstellar Solutions

Data Driven Graphics Tutorial

shopping mall
interstellar solutions
business plans
business plans

Data Driven Graphics Tutorial

The Data Driven Graphics Wizard combines data from XML files with variables embedded in a Fireworks template to generate new graphics based on the original template. If you've ever had the chore of churning out a slew of images where only a few key phrases and maybe a central graphic varied from file to file, then you're going to love the Data Driven Graphics Wizard.

All the files you will need can be found in our download section.

Read on.....

The XML file for this tutorial

The Data Driven Graphics Wizard works with standard-format XML files. These files can be exported by a database program (such as Access 2002) or created by hand in Dreamweaver MX or any text editor. If you have a MySQL database you can use a handy tool called MySQL Front.

With this tool you can export your database in XML format as well as other formats.

Anyhow I digress.

Start Macromedia Fireworks MX and open up the png file "xml_ tutorial.png"

You'll notice the word product surrounded by curly braces - {product} - this tells fireworks that the text is a variable.

Now click commands....Data Driven Graphics Wizard.


You should get the following screen without the "tutorial.xml" - locate that file on your hard drive and click next >.

screenshot of step 1

Step 2

The next step should show the first record in the xml file - you can skip forward and back to look at the details of the file if you so wish. Click Next >

Screenshot of Step 2

Step 3

Here you can choose whether to put all the records in the XML file, the first record or specific records. It can be quite useful to create specific records if you have added to the database later on after creating lots of images or if you find a spelling mistake. This had to be done in fact when I had the word Café in the database as Fireworks processed wrongly as "Caf? Business Plan". This meant I could replace just 3 images instead of creating all the picture boxes again.

Screenshot of Step 3

Step 4

As we have used the same name in our image file i.e. {product} that appears in our XML file - Fireworks has cleverly mapped the two variable already without us having to do anything otherwise the variables would appear in the drop down box on the left and we would simply click the one we wanted and choose the corresponding field in the right hand drop down box - then click add.

Screenshot of Step 4

Step 5

This looks a little complex but is actually straightforward - the filename box is the prefix to what we are going to call the files - in this case product starting at number 1, so our images will have values product1.jpg, product2.jpg etc. - We can leave this field blank if we so wish.

In images we need to export the images so tick the box if it isn't already and choose a location where you want the images to be created. In the drop down box you can choose how you want to optimise the file - the first option is the customised optimised settings in fireworks - i have chosen JPEG, 60% but you can choose whatever you feel like or even choose a preset.

The last box is where you want to save the source file(xml_ tutorial.png) - leave it blank.

Screenshot of Step 5

Step 6

This last screen shows a summary of what is about to happen - if your not happy you can always go back and change things. Otherwise your done and dusted.

Screenshot of Step 6

The Results

Not very exciting I know - now all it need is you to go back to the original PNG file and spice things up - add more pictures, more variables. I'll leave that to your imagination.....

Bar Business Plan
Car Wash Business Plan
Coffee Shop Business Plan
Day Care Business Plan
Nail Salon Business Plan
Real Estate Business Plan
Restaurant Business Plan
Tanning Salon Business Plan


Copyright © 2002 - 2012 Interstellar Solutions