Interactive Interface Design – Fall 2012

Please post a .zip of your final project files to your folder in the class Dropbox. Make sure to include in the comments credit for any code or plugins that aided you in your project. Please include your source files: .fla files and .swf files if your project was a flash project, and make sure that you include any special fonts, image, audio and video.

Your final files are due by midnight tomorrow night.

Have a great break!

Today we are going to work on projects. I’ll speak with each of you individually about your progress and help you with specific issues on your projects.

Homework

I was noticing as I was getting work together for the student show last week that I am missing homework or project files from some of you. Please check the Dropbox in the folder under your own name. Inside that folder is all of the homework that I have for you, if you don’t see an assignment that you know you did, please upload those files ASAP.

• For Flash work, make sure that I have the .fla as well as the .swf files, and any external image, audio, video, or xml files
• For HTML5 / JS work, make sure that you include any images, special fonts, or audio used in the project.

Next week your final projects are due. You will make a short presentation of the project, and we’ll have class critiques.

In order to get full credit for your project, you will turn in your source files as a .zip archive to the Dropbox by noon the Wednesday after class.

Topics:

• Javascript
  • Animating with Jquery Effects
  • Drag and Drop
• Actionscript
  • Hit Testing
  • Tweens and Transitions

Animating with Jquery Effects

JQuery has a number of animation technique through its effects methods. These are documented here:

JQuery Effects

A number of the effects have predetermined animations, with parameters that you can manipulate. These are:

• hide()
• show()
• fadeIn()
• fadeOut()
• fadeToggle()
• slideDown()
• slideUp()
• slideToggle()

You can also build your own effects with the animate() method. This method lets you animate one or more CSS properties over a specified duration. You can animate any property that has a numeric value.

The effects library is further extended by JQuery UI Effects, adding easing methods, and color animation, among other things. You can add the ui library to your page like so:

<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

Drag and Drop

The JQuery UI adds a .draggable method, which allows you to add drag and drop interaction to elements. This is simple enough to do:

$('element').draggable();

Draggable Reference

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, 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

Homework

For the next two classes, we are going to primarily work in class, though I may do some additional demos if there are things that you want to do with your final projects that we have not covered. For next week, I recommend that you have your wireframes and designs mostly finished, so that you can start coding.

If there are any topics or techniques that you would like to learn that we haven’t covered, please post them in the comments here, and I will try to add tutorials in the next two classes.

Topics:

• Project 2 Presentations
• Final Project Introduction
• ActionScript: Animating with code:
  • Frame-based events
  • Timers
  • Hit Testing

ActionScript: Animating with code

Today we’re going to explore some events that allow us to animate and react with code. Next week we’ll talk about how to do the same thing with jQuery.

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
}

Hurricane Sandy Project

Because of the class we missed during the hurricane, the college has asked the faculty to give an extra assignment to make up for the lost time. This is the project that I would like you to do, due next class:

During a natural disaster, communication becomes both crucial and difficult. Design a mobile application OR communication device that would have aided you or someone you know during the hurricane. You don’t have to build this app or device, just do a wireframe for it and provide an explanation of the functionality of it. We’ll discuss these next week.

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. OR you may also choose to start a new project. You can use either HTML5/CSS/Javascript or Flash/Actionscript. Your project should be imagined either in the context of a larger Web site, or as a mobile application. We will discuss more specific requirements next class.

Topics:

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

Adding Flexibility to Your Image Gallery with XML data

Last week we explored loading images dynamically into a Flash movie using Actionscript and an HTML5 file using Javascipt. 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 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 your application. 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.

Using XML in Flash

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

What is JQuery?

JQuery is a JavaScript library that is designed to make it easier to add complex behaviors to your HTML.

How Do I Use It?

Including the JQuery core

The core jQuery code is a single JavaScript file that you include as an external file in your page.

You can download the latest version here.  This page also has links to several publicly hosted copies of the JQuery core that you can link directly to.

You include the jQuery core in your page like this:

 <script src="jquery.js"></script>

That’s assuming the script file is in the same directory. You can put this code in either the head or the body element of your page. If you are going to put it in the body, it’s best to put it at the end, right before the ending </body> tag.

jQuery is built on Javascript, but the syntax is a little different, and all designed to make it easier to target an element in your HTML. The primary difference is that all jQuery is preceded by the $ function, which is basically a shortcut that signals the browser that the code to follow is jQuery.

Initializing JQuery

This starts with the way you initialize it in your page. Javascript will often use the onload event of the window object to trigger JavaScript once the page is loaded:

window.onload = somefunction();

jQuery accomplishes the same thing through its document.ready event

 $(document).ready(function(){
   // Your code here
 });

If you are using jQuery in conjunction with other JavaScript libraries, the $ function can cause a conflict. We’ll talk about how to handle this later.

> JQuery HTML Template

What can I do with it?

Events

One of the advantages of using jQuery over plain JavaScript is the easy ability to add behavior to elements without modifying the html of those elements. For example, if you wanted to add behavior to an div with the class “hi” when it is clicked, this is the code:

$('div.hi').click(function() {
  alert("Hi there!");
});

If you wrap this in a document.ready function, then when the document is loaded, all matching elements will have this behavior added on click.

Here is a list of all the events you can react to with jQuery.

Effects

Jquery has a number of built in effects that allow you to create simple animations. For example, if you wanted to fade in a div named “shyguy”:

$("div.shyguy").fadeIn("slow");

Here is a list of all the effects.

You can find a lot more info about jQuery here

Parsing XML with jQuery

Loading info into an HTML file from an XML file requires some cooperation between the server side and the client side. To do this, we use AJAX (Asychronous Javascript and XML) which allows us to retrieve new data without refreshing the page. The first place we started seeing major applications of AJAX were on dynamic web apps like Google Maps.

Jquery makes it easy to use ajax. Unfortunately, the instructions on the jquery site are not so simple, so I’m going to walk you through it.

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.

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!