Week 7: Dynamic Image Gallery Part 2

Topics:

• Flash
• Adding Flexibility to Your Flash Gallery with XML data
• Javascript
• Using jQuery to simplify Javascript
• A JQuery XML Gallery

Adding Flexibility to Your Flash Gallery with XML data

Last week we explored loading images dynamically into a Flash movie. While our technique last week was great for a simple image gallery, it was limited. We had to rename our images numerically to make it work, and we weren’t able to display any information with the images.

Today we are going to solve these two problems by learning how to load external data into Flash in much the same way that we loaded the images. The type of data that we are going to load is an XML document. XML stands for eXtensible Markup Language and is basically a specially formatted text document that looks a lot like HTML—the language that web pages are written in. But with XML, instead of prescribed tags, you make up your own (which is where the extensible part comes in). You are probably already interacting with XML documents without knowing it—podcasts and RSS feeds are actually XML files with a specific structure.

Create your XML Document

For the purpose of our image gallery, we are going to use XML to store data about a folder of images. When preparing an XML file for use in Flash, first you need to include this line to identify the document type and encoding (character set):

<?xml version="1.0" encoding="utf-8" standalone="yes"?>

Next we want to create a parent tag, or node to hold all of our data:

<images>
</images>

Notice that you must be sure open and close each node, and that nodes are nested inside each other.

Next you will add a node type to hold data for each image. In this case, the <photo> node holds two other nodes, <image> which holds the image path, and <caption> which holds a short description or title of the image.

<images>
      <photo>
        <image>images/saharan.jpg</image>
        <caption>Saharan on Sunset</caption>
      </photo>
</images>

That’s the basic structure, you then can add a photo node for every image you want to display.

<images>
      <photo>
        <image>images/saharan.jpg</image>
        <caption>Saharan on Sunset</caption>
      </photo>
      <photo>
        <image>images/sedona.jpg</image>
        <caption>Sedona Skyline</caption>
      </photo>
      <photo>
        <image>images/capecod.jpg</image>
        <caption>Cape Cod Beach Fence</caption>
      </photo>
      <photo>
        <image>images/unguarded.jpg</image>
        <caption>Unguarded Area</caption>
      </photo>
      <photo>
        <image>images/montauk.jpg</image>
        <caption>Montauk is Listening</caption>
      </photo>
</images>

The structure and names of the node in your document is arbitrary and completely up to you.

It’s important to validate your XML documents before trying to load them into Flash. Even a small syntax error can cause the whole thing to fail with no explanation. Check your XML file by loading it into any Web browser.

Next, we are going to take our gallery code from last week and modify it to use XML. There are a few new objects we’ll use for this, here is reference for them:

• Arrays
• XML
• URLLoader

Using Jquery to simplify Javascript

Jquery is a library that helps you simplify Javascript by converting common tasks like into a kind of shorthand that lets you do the same thing with a lot less code. For example, if you had a div called “harold” in your html, instead of this:

getElementById("harold");

With Jquery, you just write this:

$("#harold");

In order to use Jquery, you need to load its core library in the head tag of your html file as the src attribute like this:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

This is similar in concept to how we load stylesheets and images, and you can in fact do this with any javascript file (as we will in our example).

The other thing to know about Jquery is that it generally works with a function called document.ready. This function is called when an html document is fully loaded, and looks like this:

$(document).ready(function()
{
  // do something
});

You can find a lot more info about jQuery here

Homework

1. Finish what we began in class today – convert your Flash gallery to use XML as the data source
2. Use the same XML file to display your images/captions using HTML and jQuery. You can either use my HTML/CSS, or create your own.
3. Project 2: Wireframe – Create a sketch of the rich media player you will build for project 2. This interface should include either still images and audio or a series of video. If you create this on paper, scan it in so we can look at it up on the projector.
4. Look at the JQuery plugin library, and find a gallery or slideshow plugin that you would like to try out. Bring 10-15 images to class next week, and a link to that code.