Week 6: Dynamic Image Gallery, Part 1

Topics:

  • Introducing Project 2
  • Creating a 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. Customize the gallery by changing the layout, size of the pictures, background color, etc. Do both versions, Javascript and Actionscript, and bring ALL of your files, to class next week  .html, .fla, .swf. AND image files!

 

Posted in Lesson | Leave a comment

Week 14: Work Session, Final Project Requirements

Class, please follow these guidelines when turning in your final projects:

1. Put your .fla and .swf files in my dropbox on the adga server

2. Post your .swf and .html files on your public website, and post a link to the files as a comment on the class blog. If you are unsure how to do this please see me.

You must both turn in your files to me in class and post them online to get full credit.

Posted in Lesson | 4 Comments

Week 13: Work Session

We’ll be working in class today, and I’ll be checking your progress.

Posted in Lesson | Leave a comment

Week 12: Hit Testing, Tweens, Transitions, and Third Party Libraries

Hit Testing

It can be useful when creating dynamic code based animation to be able to detect when one display object collides with another. This is called “Hit Testing”. You can hit test two ways, with two objects or with an object and a point on the stage.

To hit test two objects, use the hitTestObject method:

object1.hitTestObject(object2)

To hit test and object and a point, use the hitTestPoint method:

object.hitTestPoint(xcoordinate,ycoordinate)

TWEENS

The Tween class allows you to animate the same properties you could using a Motion Tween on the timeline:

Tween Reference

Now, with these objects, for the first time we are using Flash packages that are not automatically imported when we publish the file, so we have to do that first:

import fl.transitions.Tween;
import fl.transitions.easing.*;

TRANSITIONS

There are a number of transitions designed to bring content on or off the stage in the fl.transitions package. The Transition Manager class allows you to access these transitions:

Transition Manager Reference

USING THIRD PARTY LIBRARIES: TWEEN LITE

Third part libraries are code created by companies or individuals to extend the capabilities of Flash or make common tasks easier. These libraries arenot part of the core actionscript packages but can be imported into your Flash project for use in your applications. We’re going to look at one popular library today.

Tween Lite – A more robust tweening engine than the built in Tween class.

Here are the detailed instructions that we’re going to follow today to use Tween Lite

There is also a good tutorial on importing third party libraries here

Posted in Lesson | Leave a comment

Week 11: Animating With Code

Topics

  • Final Project Concept Presentations
  • Frame-based events
  • Timers
  • Hit Testing

So far we’ve been working with user-generated Mouse Events. Today we’re going to explore some non-User events that allow us to animate and react with code.

Drag and Drop Events

Any named movieclip instance on the stage can be made “draggable” with the startDrag( ) method.

myObject.startDrag();

Usually this is triggered with an event listener on the MOUSE_DOWN event on the instance. Once startDrag is called, the object will follow the mouse movement. To stop this behavior, you use the stopDrag( ) method, usually implemented on MOUSE_UP.

myObject.stopDrag();

This behavior also has a property associated called dropTarget. The dropTarget is the object that is under the draggable object when the stopDrag method is called. To get the name of the drop target, you must access its name property.

myObject.dropTarget.name;

Frame-based Events

Now that we are comfortable with working with and creating display objects, and using event listeners and event handlers, we can also create animation entirely from code, without involving the timeline. To do this, we use a new event type, onEnterFrame, or ENTER_FRAME event.

You might think that you could use a for loop for animation, like this:

for(i = 0; i < 500; i++){
    ball.x = i;
}

Where “ball” is a display object that you have defined elsewhere. You might think that this code would move the ball 1 pixel 500 times, and in a sense you would be right. The problem is that you would only see the result of the last loop, because all 500 loops are executed before the frame is rendered.

To get around this, you need to introduce time between loops, which is where ENTER_FRAME comes in. The ENTER_FRAME event is dispatched at the frame rate of the .swf.

This is how you set up an enter frame event:

instancename.addEventListener(Event.ENTER_FRAME, eventHandler);

function eventHandler(event:Event):void {

            //do something
 }

Timer Events

You can also set up an event that will happen at regular intervals in your code. This is called a Timer Event. A timer is actually an object, so first you need to create a new Timer instance, then add an event listener and handler to it, and last, start the timer!

//create the timer instance
var myTimer:Timer = new Timer(500, 10);

//add the timer event to it
myTimer.addEventListener(TimerEvent.TIMER, eventHandler);

//start the time
myTimer.start();

function eventHandler(event:TimerEvent):void {
    //do something
}

Hit Testing

It can be useful when creating dynamic code based animation to be able to detect when one display object collides with another. This is called “Hit Testing”. You can hit test two ways, with two objects or with an object and a point on the stage.

To hit test two objects, use the hitTestObject method:

object1.hitTestObject(object2)

To hit test and object and a point, use the hitTestPoint method:

object.hitTestPoint(xcoordinate,ycoordinate)

Final Project: Project Planning

The next step in your final project is to create a detailed plan. For next class  you need to produce the following:

  1. Project Brief
  2. Process Flow
  3. Storyboards

1. Project Brief– This is a text description of your project. It should include the following:

  • Overview: A few sentence summary of the project.
  • Audience: Who is application for? Include age range, gender, anticipated technical skills, language capability.
  • Platform: How do you envision this application being used? Is it part of a larger Web site? A mobile application? Part of an installation?
  • Functionality requirements: Describe how the application will operate. How many distinct states or screens or pages will it have? How will a user interact with it?
  • Technical requirements: Describe as best you can what code elements will be required for the application.

 2. Process Flow – This is a bit like a site map for a Web site. A process flow visualizes the way a user would move through the application from a high level.

flowchart

Every distinct state or page of the application should be represented by a rectangle, connected by diamond shaped decision points.

3. Storyboards

Take your process flow and turn everything that is represented there into a fully designed interface for each step represented there. Design these in whatever tool you are most comfortable with (Photoshop, Illustrator, Flash itself, a combination) but turn the storyboards into a single PDF that you will present to the class. You should be able to fully walk us through the functionality of your application with these storyboards. They should represent the near final design of your application. The more time you put into this step, the more time you will have for animation and coding. You are going to need it!

FYI, this is how the final project grades will break down:

Final Project Grading:

  • 30% Concept and Planning
  • 30% Interface and Graphic Design
  • 30% Code and Functionality
Posted in Uncategorized | 1 Comment

Week 10: Project 2 Presentations

Topics:

  • Project 2 Presentations
  • Final Project Introduction

Final Project

For the rest of the semester you will be working on your final project. Next week you should be ready to discuss your project concept.

For the final project, you can choose to continue work on either Project 1: The Drawing Application or Project 2: The Media Player, building on and perfecting the functionality you have already started. You may also choose to start a new project. You can use either HTML5/CSS/Javascript or Flash/Actionscript.

Posted in Lesson | Leave a comment

Office hours this week

A class is using 1104 today , so I’ve relocated to Au Bon Pain across the street at the Metrotech plaza, I’ll be there until 12:30.

Posted in Uncategorized | 1 Comment

Week #9: Project 2 Code Jam

Topics:

  • Interface Design Reviews
  • Code Jam!

Homework

Continue working on your multimedia application and be prepared to present your progress next week. Remember to credit any code or asset sources you use!

Your final project files will be due after Spring Break, however, if you can get them done for next week, all the better for your vacation!

*Note: Midterm grades are due this week, if you want to turn in any missing homework, please do so before 5pm tomorrow (Friday). You can email me a .zip file not to exceed 10MB, or put the file on Dropbox or other public file sharing service and share it with me. Please use my classes@catherinegarnier.com email address for turning in homework.

Posted in Lesson | Leave a comment

Week 8: Loading and Playing Audio and Video

Topics:

  • ActionScript: Loading and Playing Audio
  • ActionScript: Loading and Playing Video
  • HTML5: Loading and Playing Audio and Video

ActionScript: Loading and Playing Audio

Loading external audio files is similar to loading image or swf files, but you use the Sound and SoundChannel objects instead of the Loader. These objects also let you play and stop the playback.

Loading Video

Loading video is similar to loading audio, but it needs a few more objects because video is loaded into the video object as a stream rather than the whole file at once. Here’s some good reference on the video playback:

Livedocs > Working with Video

HTML5: Audio and Video

Before HTML5, we’ve had to view multimedia content such as video and audio via a plug-in like Quicktime and Flash. This presents cross-platform compatibility issues — choose Flash and your content won’t load on iPhones and iPads, choose Quicktime and a lot of Windows users won’t see the content. Add to that that we have to use double tags to ensure loading on most browsers and it got really messy.

HTML5 eliminates the need for a plugin, giving browsers the ability to directly display audio and video, with new tags:

<audio src = "myMovie.mp3" >

>HTML5 Audio Reference

<video src ="myMovie.mov">

> HTML5 Video Reference

The two code examples will embed a player in your HTML page, but leave it to the browser to decide how to implement the controls and behavior. To take control of this yourself, there are some additional parameters you can include in the tag. Say you want to display controls and have the video or audio automatically start playing, you’d want to include the following:

<video src ="mySong.mov" controls="controls" autoplay="autoplay" />

You can also use the shorter version:

<video src ="myMovie.mov" controls autoplay />

You might be thinking: Hooray for native audio and video elements, my troubles are over!

Well, don’t run off to happy hour yet, there is a wrinkle. The most popular audio and video formats are proprietary, so browsers have to pay to include support for them. This is fine for browsers that are developed by big companies, like Safari, but not so good for open source browsers like Firefox. Firefox instead supports the non-patent restricted formats from xiph.org. These files have the extension .ogg (Ogg Vorbis) for audio and .ogv (Theora Ogg) for video.

Converting to Ogg Formats

Here’s some good info on Wikipedia about encoding Theora Ogg video files.

There are a number of free utilities out there for converting .mp3 to .ogg, however, I tried a few that didn’t work. What did work was Audacity, which is a nifty little sound editing tool.

The easiest converter I’ve found for .ogv files is Firefogg which is a Firefox add-on.

So, to support all the browsers that support the audio and video tags, you have to include multiple formats:

<video controls="controls">
   <source src="myMovie.ogv" type="video/ogg" />
   <source src="myMovie.mov" type="audio/mp4" />
</video>

Ok, not so bad. I have to make two versions of the same file, that’s a drag, but doable.

But wait, we’ve forgotten about our old friend Internet Explorer. IE8 doesn’t support the audio/video tags (but IE9 promises to). So, we still need to fall back on the old object tag to embed a Quicktime or Flash player. Since IE is a Windows only browser, and Flash has much greater adoption on Windows, it makes sense to use Flash.

Wait, does that mean I have to make another media file for Flash?

Fortunately, it does not. Flash now supports Quicktime files if they are encoded properly.

If you are familiar with Flash, you can create a dyanmic FLV movie player for yourself. If not, you can use Abobe’s Flash Media Player

Adding the Flash player code will look something like this:

<video controls="controls">
   <source src="myMovie.ogv" type="video/ogg" />
   <source src="myMovie.mov" type="video/mp4" />
   <object type="application/x-shockwave-flash" width="360" height="240" data="mySwf.swf">
     <param name="movie" value="mySwf.swf">
     <a href="mySwf.swf">Download the movie</a>
   </object>
</video>

>Here’s a working example*

* I first had trouble with the Firefox version of this because my server needed a MIME type added.

Whew, that was complicated.

There are potentially simpler solutions if you want to:

Homework

1. Combine the XML example we went over last week with what we covered about audio today to make an audio player that can play mutliple tracks. The track info should come from an xml file. The player should have buttons to play and stop the current track, and navigate to the next and previous tracks. You can use either HTML5 or Actionscript to do this homework.

2. Taking your wireframes and the comments from today and create the interface design for your project.

3. We’re having a quiz next class, don’t miss it!

Posted in Lesson | 2 Comments

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:

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.
Posted in Lesson | Leave a comment