Get SourceSee Demo

Step 1: Getting Started

To begin with, open Flash and create a new Actionscript 3.0 Flash file.

Set the stage to 800×500 and then create a new Actionscript file.

Step 2: The Libraries

In this tutorial we’ll be using the as3flickrlib library to interface with the Flickr API. You can download it here and you’ll also need the as3corelib library as as3flickrlib is dependent on that. You can download that here

Step 3: Setting Up

Once you’ve downloaded the libraries, you’ll need to make them accessible to Flash. To do this, go into preferences and then click on the Actionscript category and then Actionscript 3.0 settings. Here you’ll be able to add a new source path which you’ll need to set the location of the libraries you’ve just downloaded.

Step 4: Begin Coding

Start a package and begin by importing the following classes.

package
{
  import flash.display.*;
  import flash.events.*;
  import flash.net.URLRequest;
  import flash.filters.DropShadowFilter;
  import flash.geom.Point;
  import flash.system.Security;
  import com.adobe.webapis.flickr.*;
  import com.adobe.webapis.flickr.events.*;

Step 5: The Class

Start a class that extends Sprite and name it something like FlickrGallery, make sure to give the Actionscript file the same name when you save it.

public class FlickrGallery extends Sprite
{

Step 6: The Variables

Some of these variables can be changed at your discretion such as the minScale and maxScale variables, the maxWidth and maxHeight variables.

var xPosition:int = 0; //The X position of an image
	var yPosition:int = 0; //The Y position of an image
	var prevHeight:int; //Store the height of the last image to be loaded
	var imageCounter:int = 0; //Iterate each time an image is added
	var minScale:Number = 0.3; //The minimum scale boundary for images
	var maxScale:Number = 2.5; //The maximum scale boundary for images
	var totalResults:int = 15; //The number of results you want to be pulled from Flickr
	var api_key:String = ""; //your Flickr API key
	var searchQuery:String = "paris"; //the search criteria, change this to what you want
	var user:String = ""; //optional, the NSID of a particular Flickr user
	var photoCollection:PagedPhotoList; //the collected images
	var imageIndex:int = 0; //the image index for the array
	var displayPic:Bitmap = null; //the bitmap that the images will be assigned to
	var dShadow:DropShadowFilter = new DropShadowFilter(); //the shadow that will be applied to the images
	var targetImage:DisplayObject; //the target image for scaling
	var maxWidth:int = 150; //the maximum width that the images will be initialy displayed at
	var maxHeight:int = 200; //the maximum height that the images will be initially displayed at
	var xyPoints:Point; //the x and y points of an image when scaling
	var xyDistance:Number; //the distant between the x and y points and the mouse
	var imagesReturned:int = 0; // the number of images returned

Step 7: Policy Files

You’ll need to load Flickr’s cross domain policy files to enable you to load the images from Flickr in your own domain.

	Security.loadPolicyFile("http://farm1.static.flickr.com/crossdomain.xml");
   	Security.loadPolicyFile("http://farm2.static.flickr.com/crossdomain.xml");
   	Security.loadPolicyFile("http://farm3.static.flickr.com/crossdomain.xml");
   	Security.loadPolicyFile("http://farm4.static.flickr.com/crossdomain.xml");
	Security.loadPolicyFile("http://farm5.static.flickr.com/crossdomain.xml");

Step 8: The Constructor

Here we’ll declare the constructor; it will need to be named the same as the class. In this case FlickrGallery.

	public function FlickrGallery() {
	  dShadow.distance = 5;
	  dShadow.angle = 90;
	  dShadow.alpha = 0.5;
	  var service:FlickrService = new FlickrService(api_key);
      	  service.addEventListener(FlickrResultEvent.PHOTOS_SEARCH, handleResults);
          service.photos.search(user, searchQuery, "any", "", null, null, null, null, -1, "", totalResults, 1);
    }

It starts by setting the distance, angle and alpha of the drop shadow that will be applied to the images. After that a new instance of the FlickrService class is created and then an event listener is attached to the Flickr search which will call the handleResults function when Flickr returns the search results.

Step 9: Handle the Results

Following on from the Flickr search in the constructor, the handleResults function starts by using an if statement to check if the search was successful. If it was, then the returned photos are placed in the photoCollection array, the number of images is assigned to the imagesReturned variable and the loadImages function is called.

	private function handleResults(event:FlickrResultEvent):void {
		if(event.success) {
			photoCollection = event.data.photos;
			imagesReturned = photoCollection.photos.length;
			loadImages();
	  } else {
		  trace("Failed to load images.");
	  }
    }

Step 10: Load the Images

The loadImages function starts by forming the URL of image to be loaded and then loading it using the URLReequest object and a Loader object. An event listener is then attached to the Loader and is set to call the displayImages function when it completes.

	private function loadImages() {
		var picURL:String = "http://static.flickr.com/" + photoCollection.photos[imageIndex].server + "/"
+ photoCollection.photos[imageIndex].id + "_" + photoCollection.photos[imageIndex].secret + ".jpg";
		imageIndex++;
		var imageRequest:URLRequest = new URLRequest(picURL);
		var loader:Loader = new Loader();
		loader.contentLoaderInfo.addEventListener(Event.COMPLETE,displayImages);
		loader.load(imageRequest);
	}

Step 11: Display the Images

The displayImages function is large and will be broken up across then next few steps. It starts by assigning the content of the event target, i.e. the loaded image, to the displayPic variable which we declared earlier as a Bitmap.

	private function displayImages(event:Event):void {
		displayPic = event.currentTarget.content
		if(displayPic.width>maxWidth) {
			displayPic.height = (displayPic.height/100)*((maxWidth/displayPic.width) * 100);
			displayPic.width = maxWidth;
		}
		if(displayPic.height>maxHeight) {
			displayPic.width = (displayPic.width/100)*((maxHeight/displayPic.height) * 100);
			displayPic.height = maxHeight;
		}

After that the width and height of the image is checked against the maxHeight and maxWidth variables to see if the image size is within the required boundaries. If it’s not, then scaling is performed on the image by assigning the maxWidth or maxHeight to it and then working out the change as a percentage and applying that to the dimension that wasn’t changed.

Step 12: Create the Image Holder

We now need to create the holder for the image which in this case will be a Sprite. First, we create a new Sprite object and apply a colour fill of white to it. Then we draw it as a rectangle with its width and height slightly larger than the image it will be holding.

		var holder:Sprite = new Sprite();
		holder.graphics.beginFill(0xFFFFFF);
		holder.graphics.drawRect(0,0,displayPic.width+10,displayPic.height+30);
		holder.graphics.endFill();
		holder.rotation = (Math.round(Math.random() * (1+4-1)) + 1)*-1;
		holder.name = "im" + imageIndex;
		holder.filters = [dShadow];

Next, a slight rotation is applied to the holder to give the gallery a kind of rough scattered style a Polaroid gallery needs. Here, its minimum rotation is 1 and its maximum is 4 but you can alter these if you like. The holder is then named according to the imageIndex and then a drop shadow filter is applied to it which we set up in the constructor at the beginning.

Step 13: Create the Scale Tab

In this section we create the little tab that goes in the bottom-right corner of the holder, this is what the user drags to resize the image.

		var scaler:Sprite = new Sprite();
		scaler.graphics.beginFill(0xBBBBBB);
		scaler.graphics.drawRect(0,0,10,10);
		scaler.graphics.endFill();
		scaler.buttonMode = true;
		scaler.useHandCursor = true;
		scaler.x = displayPic.width - 2;
		scaler.y = displayPic.height + 17;

Once again we create a new Sprite object and this time fill it with a light grey colour, but you can use whichever colour you like. We then draw it as a rectangle and set its width and height to 10, we apply buttonMode and useHandCursor so that the cursor turns to a hand when a user hovers over it. We then set its x and y positions based on the width and height of the image associated with it. For the purpose of this tutorial I’ve kept this part simple and just used a grey square to represent a resize tab but you could use a more meaningful symbol or graphic.

Step 14: Position the images

Still working within the displayImages function, we now need to set the position that the current image will appear on the stage at. The first image is positioned at 0,0 or the top left corner of the screen, after that the next image is given the same x coordinate but the y coordinate is calculated based on the previous images height and generated randomly somewhere between 90% and 100% of the previous images height. This further adds to the random scattered style of the gallery. Also, the images are currently organized into columns of 3 but you can alter this if you desire. Just change the number where it says if(imageCounter==3).

		if(imageIndex<2) {
			xPosition = 0;
			yPosition = 0;
		} else {
			yPosition = Math.round(Math.random() *
(1+(prevHeight+yPosition)-((prevHeight+yPosition)*0.9)) + ((prevHeight+yPosition)*0.9));
			if(imageCounter==3) {
				xPosition = displayPic.width + xPosition;
				yPosition = 0;
				imageCounter = 0;
			}
		}
		imageCounter++;
		prevHeight = displayPic.height;
		displayPic.x = 5;
		displayPic.y = 5;
		holder.x = xPosition;
		holder.y = yPosition;

After the image positions have been calculated we store the image height in the prevHeight variable for use with the next image and then set the x and y coordinates of the image within the holder, in this case 5,5.

Step 15: Add to Stage

In this section we add the displayPic and scaler to the holder and add the holder to the stage using the addChild method. Event listeners then need to be added to the holder and scaler, targeting the startImageDrag, stopImageDrag and scaleImage functions.

		holder.addChild(displayPic);
		holder.addChild(scaler);
		stage.addChild(holder);
		holder.addEventListener(MouseEvent.MOUSE_DOWN, startImageDrag);
		holder.addEventListener(MouseEvent.MOUSE_UP, stopImageDrag);
		scaler.addEventListener(MouseEvent.MOUSE_DOWN, scaleImage);
		if(imageIndex<imagesReturned) {
			loadImages();
		}
	}

And finally ending the displayImages function with a call to the loadImages function to load the next image, if the imageIndex is less than the imagesReturned.

Step 16: Dragg…

The startImageDrag function is called when a mouse down event is detected on the image holder sprite. It brings the target to the forefront of the display list using the setChildIndex method and then invokes the built-in startDrag method on the target.

	private function startImageDrag(evt:MouseEvent) {
		stage.setChildIndex(stage.getChildByName(evt.target.name),stage.numChildren-1);
		evt.target.startDrag();
	}

Step 17: And Drop

The simplest function of all, stopImageDrag is triggered when a mouse up event is detected on the image holder and invokes the stopDrag method on the target.

	private function stopImageDrag(evt:MouseEvent) {
		evt.target.stopDrag();
	}

Step 18: Prepare for Scaling

The scaleImage function is called when a mouse down event is detected on the scaler sprite. It assigns the target parent, i.e. the image holder, to the targetImage variable and then removes the mouse down event listener from it.

	private function scaleImage(evt:MouseEvent) {
		targetImage = evt.target.parent;
		targetImage.removeEventListener(MouseEvent.MOUSE_DOWN, startImageDrag);
		stage.addEventListener(MouseEvent.MOUSE_MOVE,startImageScale);
		stage.addEventListener(MouseEvent.MOUSE_UP, stopImageScale);
		xyPoints = new Point(targetImage.x,targetImage.y);
		xyDistance = (Point.distance(new Point(mouseX, mouseY),xyPoints))/targetImage.scaleX;
	}

Event listeners are then added to the stage for detecting the starting and stopping of the image resize, these call the startImageScal and stopImageScale functions. After that, the coordinates of the image holder’s position is assigned to the xyPoints point object and the distance between that and the x and y position of the mouse is calculated and assigned to the xyDistance variable. This will be used in the subsequent functions for calculating the resizing of the image.

Step 19: Scale Image

The startImageScale is called when the mouse moves, it calculates a new distance between the mouse x and y positions and the x and y position of the image holder. It then scales the image holder, and thus the image, according to the change in distance calculated by dividing the newDistance variable by the initial xyDistance variable. Checks are then made to see if the scaleX or scaleY of the target are greater than the maxScale or less than the MinScale variables and if they are then those variables are assign to the scaleX and scaleY to stop the image from being expanded or shrunk past the boundaries.

	private function startImageScale(evt:MouseEvent) {
		var newDistance = Point.distance(new Point(mouseX, mouseY), xyPoints);
		targetImage.scaleX = targetImage.scaleY = newDistance/xyDistance;
		if(targetImage.scaleX>maxScale) {
			targetImage.scaleX = targetImage.scaleY = maxScale;
		} else if(targetImage.scaleX<minScale) {
			targetImage.scaleX = targetImage.scaleY = minScale;
		}
	}

Step 20: Stop Scaling

The final function of this project is stopImageScale, it’s called when a mouse up event is triggered from the stage and starts by removing the event listeners on the stage that relate to scaling. It then adds the mouse down event back to the image holder that has just been resized.

	private function stopImageScale(evt:MouseEvent) {
		stage.removeEventListener(MouseEvent.MOUSE_MOVE,startImageScale);
		stage.removeEventListener(MouseEvent.MOUSE_UP,stopImageScale);
		targetImage.addEventListener(MouseEvent.MOUSE_DOWN, startImageDrag);
	}
  }
}

The closing brackets for the class and package also need to be added here.

Conclusion

You can customize this however much you like; there are many things here that can be changed such as the search query, user NSID or the sizes of the images etc.

I hope you found this tutorial useful and thanks for reading.

Here is a list of 7 sites that provide an ambient user experience:

Vimeo
Vimeo’s homepage features an informal and friendly welcome message as well as making use of sky and sun imagery in the background. These features give the site a warm, relaxed and friendly feel.

Geek Storage
It’s the cartoon illustrations and geek humour on this site that give it a friendly and appealing tone.

CodeSlam
CodeSlam with its messages like “Your email is safe in our galaxy too.” and playful visuals.

Storenvy
Another example of playful imagery that gives the site a fun element.

Innocent Drinks
Innocent Drinks, particularly the family element of the site gives it a friendly appeal.

Flickr
Flickr with its quirky welcome messages.

The Show 09
The informal text content and wacky illustrations give this site a welcoming and friendly feel.

Download here
955kb | 14 x PNG | 1 x JPG

In this tutorial I will start from the beginning and give you a brief introduction to some of jQuery’s core concepts such as element selection, manipulation and events.

The first thing you’ll need to do is download the jQuery core library from jquery.com and add a reference to it in your html page.

Now we can start writing some code. As the majority of stuff you’re most likely to do with jQuery will involve the DOM in some way, we’ll need to start with the jQuery ready event. This is an event that gets triggered when the page has loaded and the DOM is ready to be accessed.

$(document).ready(function() {

});

From within this function we can select and manipulate DOM elements. If, for example, you wanted to select an element by it’s ID, or select a group of elements by their class name, you can do this by using CSS selectors. This is done like this:

$("#nav")
//this would select an element with the ID of nav
$(".title")
//this would select all elements with the class name title
$("p")
//this would select all paragraphs

Once you have selected an element, or a group of elements, you have a vast array of options when it comes to dealing with that selection. You could:

$("#nav").css({'width':'500px','height':'200px'});
//alter it's css properties
var cont = $("#nav").html();
//assign its contents to a variable
$("#nav").html("insert this text");
//assign content to it
$("#nav").hide();
//perform an animation on it

And much more, you can also apply events to the elements you have selected. Here are some examples:

$(".title").click(function() {
//this triggers on a mouse click
});

$("input").focus(function() {
//this triggers when an input field gets focus
});

$("input").blur(function() {
//this triggers when an input field loses focus
});

$("#nav").mouseenter(function() {
//this triggers when the mouse moves over the element
});

$("#nav").mouseleave(function() {
//this triggers when the mouse moves over the element
});

Now we can put this all togther and create a basic function that gets triggered when an element with the ID of ‘nav’ gets clicked on, which then causes the text colour of all the paragraphs on the page to be set to red and their content to be set to the text ‘This is a paragraph’:

$(document).ready(function() {
	$("#nav").click(function() {
	$("p").css({'color':'#ff0000'});
	$("p").html("This is a paragraph");
});
});

This has been a basic introduction to jQuery, showing you some of the core concepts and functionality. The amount you can do with jQuery is vast and to get a better idea of this, I suggest you have a read through the documentation on the jQuery site. It’s very thorough and informative with lots of great examples and demonstrations. Other useful jQuery sites include jQuery for Designers and jQuery Howto.