Week 6: Dynamic Image Gallery, Part 1

Topics:

• Introducing Project 2
• Simple Image Gallery (Javascript)
• Dynamically Loading Images (Flash)

Introducing Project 2: Rich Media Player

For the next 5 weeks we are going to explore techniques to work with dynamic media assests (images, audio and video) in both Flash / Actionscript and HTML5 / JavaScript. Our ultimate goal will be to build a dynamic media player in either actionscript or javascript.

Here’s a project that I did using actionscript to create an interface that acts as both an audio and video player:

Nick Brooke’s Homepage

The first thing we’re going to tackle is a simple image gallery.

Creating a Simple Image Gallery (JavaScript)

There are lots of scripts out there for creating various types of image galleries and slideshows with HTML and Javascript, using libraries like JQuery, and we are going to start exploring those next week. But it’s helpful to do a simple DIY version first with plain Javascript so that you understand the basic principles involved.

This (and virtually all) Javascript relies on accessing and manipulating elements of the DOM (Document Object Model) in reaction to an event.

Accessing and Manipulating the DOM

You can use JavaScript to access and manipulate the html elements of your page, and there are several methods of the document object that help you do that. This is similar to targeting elements in your CSS, you can find them by name or type. If you aren’t already familiar with this, there are two basic ways you can access elements on your page:

getElementById() – allows you to find an element with a specified name

getElementsByTagName() – allows you to find all the elements with a specified tag name. Because this can return multiple elements, what you get back is in the form of an array.

The event we are using in this case is “onmouseover” and we are going to trigger it within a tags. This is a pretty old school way of doing this, and doesn’t do a good job of separating behavior from content and structure, but it’s a good way to get your feet wet.

Step 1: Setting up your HTML

This script depends on your HTML being set up in a very particular way. Set up a basic HTML document and save it into the same folder as the images and css files that you downloaded today. Add a the stylesheet to your html:

<link href="gallery.css" rel="stylesheet" type="text/css" />

Now between your body tag, paste the following:

<div id="container">
 <div id="leftcol">
 <ul>
 <li><a onmouseover="return showPic(this)" href="images/1.jpg" ><img src="images/th_1.jpg" alt="image 1" width="65" height="65" border="0" /></a></li>
 <li><a onmouseover="return showPic(this)" href="images/2.jpg" ><img src="images/th_2.jpg" alt="image 2" width="65" height="65" border="0" /></a></li>
 <li><a onmouseover="return showPic(this)" href="images/3.jpg" ><img src="images/th_3.jpg" alt="image 3" width="65" height="65" border="0" /></a></li>
 <li><a onmouseover="return showPic(this)" href="images/4.jpg" ><img src="images/th_4.jpg" alt="image 4" width="65" height="65" border="0" /></a></li>
 </ul>
 </div>
 <div id="rightcol">
 <img id="fullimg" src="images/1.jpg" width="400" height="300" border="0" alt="image 1"/>
 </div>
 <div id="kicker"></div>

Check the file and make sure the images are all displaying properly. Now we add the code, which I’m going to walk you through step by step.

Dynamically Loading Images (Flash)

So far you’ve probably only been working with images in your Flash library. Today we’re going to explore loading image files that are external to your Flash movie using the URL Request and Loader objects.

LOADING EXTERNAL ASSETS

File size adds up quickly when you are bringing graphics onto the stage from your library. An overly large file is going to take forever to download and start playing in the viewer’s browser. One way to minimize this is to load the assets as you need them when the Flash movie is playing. This is similar to the way you include images in a Web page. It also means that you have to upload those images to your Web server along with your swf and html files in order for them to load and display.

STEP 1: CREATE THE LOADER

You can load images (jpeg, png, or gif only) or other swf files. First you need to create a container to hold the image you are going to load. This container is a special object called a Loader. This is how you create a loader:

var myLoader:Loader = new Loader();

In this example, “myLoader” is a variable Name that you decide, everything else is set.

STEP 2: ADD THE LOADER TO THE STAGE

When we create an object like this with ActionScript 3, it doesn’t automatically add that object to the stage. Adding the loader is simple:

addChild(myLoader);

Even though the loader is now part of the stage, you won’t see it. Loaders have no appearance of their own, they are just an empty container to put things into.

STEP 3: IDENTIFY THE ASSET TO LOAD

Next we need to create an object to hold the path to the image or swf that we want to load into the loader. This object is called a URLRequest.

URL stands for “Uniform Resource Location”, which is just a fancy way of saying Web address. In other words, URLs are what you see in the address field of a Web browser. The URLRequest is going to show the path to the asset on our local machine or the server.

There are two ways to represent this path, relative or absolute.

In an absolute path, you give the full address on the local machine or Web server:

http://www.domainname.com/subdirectory/filename.ext

In a relative path, you only give need to give the path relative to the swf file the image will be loaded into:

 subdirectory/filename.ext

It’s best to use the “relative” path to the asset, because this will be the same when you are working on your local machine as when you publish to the Web server. To simplify things and stay organized, keep your assets in a subdirectory (folder) in the same directory (folder) as your Flash files.

So, if you had an image called “my_image.jpg” in a subdirectory called “images” the relative path to it would be “images/my_image.jpg”

You create the URLRequest like this:

var myImage:URLRequest = new URLRequest(imagePath);

In this example “myImage” and “imagePath” are variables. You can either put the image path directly in to the parentheses after URLRequest or create another variable to hold it.

STEP 4: LOADING THE ASSET INTO THE LOADER

Now that you’ve created the empty container, and identified the asset to go into it, it only remains to load one into the other:

myLoader.load(image);

If you test your movie, you will now see it on the stage. Here’s a couple things to note about the loader object:

Positioning Loaded Content

The loader is placed at the 0,0 coordinates on the stage, so you may want to reposition it. You can do this by accessing it’s x and y properties:

myLoader.x = xposition;
myLoader.y = yposition;

Scaling Loaded Content

The image is loaded into the the loader at 100%. You can scale with code with the scaleX and scaleY properties, but like importing into the library, it’s better to resize it outside of Flash. The larger the asset is, the longer it will take to load, and you don’t want to make the viewer wait around unecessarily. The scale property is a percentage expressed as a decimal between 0-1, so .5 represents 50%. You can scale above 100%, but you’d be blowing a bitmap up larger than its pixel dimensions, which is never recommended!

myLoader.scaleX = myLoader.scaleY = yposition;

Using Loops to Load Multiple Photos

A “loop” in programming is a method to run code over and over again a specified number of times, or while a certain condition is true. The most common kind of loop is the for loop, and it looks something like this:

for (var i=1; i<=10; i++) {
   // do something
}

The for loop needs three pieces of information: an initial value stored in a variable (in this case, i=1), a condition that will keep the loop running as long as it is true (i <= 10), and an action to take at end of each loop (adding 1 to the value of i). So this loop will run 10 times, stopping when the value of i reaches 10.

We can use the loop to add multiple images to the stage. This example depends on having a series of images named numerically (ie – 1.jpg, 2.jpg, etc) in a folder called images in the same folder as the swf file.

If we had 5 photos, and we wanted to place them in a horizontal row that was spaced evenly across the stage, this is the code:

for (var i=1; i<=5; i++) {
   var thumbLoader:Loader = new Loader();
   var thumbURL:String = "images/"+i+".jpg";
   var thumbURLReq:URLRequest = new URLRequest(thumbURL);
   thumbLoader.load(thumbURLReq);
   addChild(thumbLoader);
   var scale = stage.stageWidth/(400*5);
   var offset = (scale*400);
   trace(scale);
   trace(offset);
   thumbLoader.y = 50; thumbLoader.x = ((i-1)*offset);
   thumbLoader.scaleX = scale;
   thumbLoader.scaleY = scale;
}

Now we’ve got the tools we need to create a simple gallery like in today’s example file, with the additional of some code to generate a random number and a few tricks to create event listeners on dynamic objects.

Homework

Using your own images,  and the code we learned today, and create your own image gallery. Design a layout for the image and thumbnails, and graphics for the buttons. Like Use at least 15 images for your gallery, and change the size of the images and the stage to suit your content. Bring the .fla, .swf. AND image files to class next week!