Requirements:

• Adobe Flash CS3
• Adobe Flex Builder 3
• Away3d Library (I recommend using the version I used)
• Tweener Library
• Source Files

Pre Requisites:

• Having done Part 1 and 2 of this tutorial.
• Intermediate programming skills.
• Moderate knowledge of AS3.
• Basic Familiarity with OOP.
• Basic knowledge of Flash CS3.

Step 0:

This is the last section of the tutorial we’ve been working on. We’re going to wrap up everything we’ve done so far and make our work a solid, working application, which we can use and even extend in the future. First, we will centralize all arbitrary parameters into what’s known as a model, then, we’re going to connect the photo gallery into an external xml so we can load images dynamically, and finally we’re going to enhance our graphics a little bit by adding a reflection effect to the 3D scene.

Step 1 – Centralizing data:

As I stated before, we will start by creating a place holder for all arbitrary variables used so far. With arbitrary variables I mean values that we’ve chosen such as the camera’s tween time in the “moveTo()” method within CameraController, or the Z position of the cameraTarget that can greatly affect the nature of the camera’s motion. All these will be placed in a class that will hold these static constants and will also be used to hold dynamic variables further on, so they can be accessed easily from anywhere in the application. So, go ahead and create a new folder next to “view” called “model”. In it, create a new Actionscript Class called “Model.as”.

Now, I need you to work alone for a while. The job to do is recognise all the values you have used so far throughout the application, that you think would be a good idea to name into a variable and control from this central class. Then, all these variables will be declared in Model.as as static constants. This is how my class looks after doing just that:

package  com.li.photoviewer.model

{ 

     public class Model

     {

          public static const  CAMERA_Z:Number = -2000;

          public static const  CAMERA_Z_ZOOMED:Number = -1500;

          public static const  CAMERA_ZOOM_TIME:Number = 1;

          public static const  CAMERA_ZOOM_EASE:String = "easeoutexpo";

          public static const  CAMERATARGET_FRICTION:Number = 0.95;

          public static const  CAMERATARGET_BOUNCE_FACTOR:Number = 0.5;

          public static const  CAMERATARGET_DRAG_FACTOR:Number = 0.1;

          public static const CAMERATARGET_SPEED_FACTOR:Number  = 0.05;

          public static const  CAMERATARGET_Z:Number = -100;

          public static const  CAMERATARGET_MOVETO_TIME:Number = 1;

          public static const  CAMERATARGET_MOVETO_EASE:String = "easeoutexpo";

          public static const  PHOTO_PLANE_SEGMENTS:Number = 3;

          public static const  PHOTO_MATERIAL_SMOOTH:Boolean = true;

          public static const  PHOTO_FADEIN_TIME:Number = 0.25;

          public static const  PHOTO_SPACING:Number = 750;

          public static const  BG_COLOR1:uint = 0x222222;

          public static const  BG_COLOR2:uint = 0x000000;

          public static const  BG_COLOR_RATIO:uint = 80

          public function Model()

          {

          }

     }

}

“public static const” is a way to declare a variable that will be accessible from the outside of the class, can be accessed without instantiating the holder class, and will not change. If you don’t what Im talking about, you should see how we are going to use these variables and then come back to what I’ve just said and you should get it right away.

Step 2 – Connecting to the centralized data:

So far all this is completely useless unless we connect our classes to Model.as, so that the constants can be used. This is done very easily; for instance to connect the “0.05” value representing a camera velocity factor, we do as in the following code:

private function followTarget(evt:Event):void

{

     camera.lookAt(cameraTarget.position);

     var dX:Number = cameraTarget.x - camera.x;

     camera.x  += dX*0.05;

...

Simply change to:

private function followTarget(evt:Event):void

{

     camera.lookAt(cameraTarget.position);

     var dX:Number = cameraTarget.x - camera.x;

     camera.x  += dX*Model.CAMERATARGET_SPEED_FACTOR;

     ...

As long as the model has been imported in CameraController of course:

import com.li.photoviewer.model.Model;

So this is what you should do next. Import Model.as in all the view and controller classes, and connect the values to it. If you’ve imported the model into a class first, you should get useful codehints from Flex to help you complete this task. When you’re done, you’ll have the power to very precisely tweak the entire application from Model.as. You should play around with this to tune it to your liking.

Step 3 – Setting up an external XML:

Now that our model is set up and working, we will read data from an external xml, and also use the model to store the data contained in the xml. We will trigger a service that will read an xml and detail the images that will be loaded in our application, and once this service is done, the 3D scene will build itself based on this data. For this, lets start by designing our xml. Create a folder named “data” and in it a new file named “data.xml”. The folder should be next to “com” or  “away3d” folders. Then design the xml structure of data.xml like this:

<?xml  version="1.0"?>

<imgs>

     <img name="testImage.jpg"/>

     <img  name="1.jpg"/>

     <img  name="2.jpg"/>

     <img  name="3.jpg"/>

     <img  name="4.jpg"/>

     <img  name="5.jpg"/>

     <img  name="6.jpg"/>

     <img  name="7.jpg"/>

     <img  name="8.jpg"/>

     <img  name="9.jpg"/>

     <img  name="10.jpg"/>

</imgs>

The xml is extremely simple, it just contains the name of each image.

Step 4 – Creating an XML Reader:

We should continue by creating a folder called “services” next to “view” and in it a new Actionscript Class called “XmlReader”, which will take care of extracting the data from the xml. This class should have two variables in its constructor, “xmlPath” as a string and “onComplete” as a function, It will also have a “loader” variable as a URLoader:

private var xmlPath:String;

private var onComplete:Function;

private var loader:URLLoader;

public function XmlReader(xmlPath:String,  onComplete:Function)

{

     this.xmlPath = xmlPath;

     this.onComplete = onComplete;

     loader = new URLLoader();

     loader.addEventListener(Event.COMPLETE,  completeHandler);

     loader.load(new URLRequest(xmlPath));

}

The path of the xml file is stored, (as well as “onComplete” which we will see in a minute), then the loader is initialized and triggered. The function “completeHandler()” will, as its name says, handle the loader once it’s done:

private function completeHandler(evt:Event):void

{

     var xmlDocument:XMLDocument = new  XMLDocument();

     xmlDocument.ignoreWhite  = true;

     var xml:XML = new XML(evt.target.data);

     xmlDocument.parseXML(xml.toString());

     for(var i:uint; i<xmlDocument.firstChild.childNodes.length;  i++)

          Model.data.push(xmlDocument.firstChild.childNodes[i].attributes.name);

     onComplete();

}

The handler parses all the data in the xml and injects it in the model. Of course, we need to go back to Model.as and declare this “data” variable that we are referring to. Just add it after all the constants:

public static var data:Array = [];

Finally (referring again to the completeHandler method), “onComplete()” gets called as soon as all the parsing is done. Remember that we designed this XmlReader to receive a reference to this external function when it is instantiated. This will simply be the function to be called when the reader has finished its job.

Step 5 – Using the reader:

Lets implement this now in the application’s main class, PhotoViewer3D.as. Carefully study these modifications:

package

{

     import com.li.photoviewer.services.XmlReader;

     import com.li.photoviewer.view.PhotoScene;

     import flash.display.Sprite;

     import flash.display.StageAlign;

     import flash.display.StageScaleMode;

     [SWF(backgroundColor="0x000000", frameRate="30")]

     public class PhotoViewer3D extends Sprite

     {

          public function PhotoViewer3D()

          {

               stage.scaleMode  = StageScaleMode.NO_SCALE;

               stage.align  = StageAlign.TOP_LEFT;

               var reader:XmlReader = new XmlReader(”data/data.xml”, init);

          }

          private function init():void

          {

               var photoScene:PhotoScene = new PhotoScene();

               addChild(photoScene);

          }

     }

}

I’ve just instantiated an XmlReader, pointed it to the xml path, put the creation of the scene in its own separate method, and also pointed the reader to this method so its called as soon as its done.

Step 6 – Loading the images:

The next step is pretty obvious. We now have the data array containing all the names of our images, waiting for us in the model and we’ve also delayed the creation of the 3D scene till after this data has been obtained. So we just need to alter the “initObjects()” method of PhotoScene.as to read this data. It’s too simple actually:

private function initObjects():void

{

     for(var i:uint; i<Model.data.length; i++)

     {

          var photo:PhotoLoader = new PhotoLoader("imgs/" + Model.data[i]);

          photo.x  = i*Model.PHOTO_SPACING;

          scene.addChild(photo);

          cameraController.maxX  = photo.x;

          photo.addOnMouseDown(photoClickHandler);

     }

}

That’s it. Test the application and see how it now loads all the corresponding different images. We’re practically done now, I just want to add an additional effect to the app…

Step 7 – Adding a reflection:

As it is usual in many open source projects, many people share their code in classes that can be very handy and easy to use. You can very often download a class that does a particular thing, use it, and never know how it actually works. So that’s what we’ll do, we will greatly enhance the look of our application by downloading a class, and I will make my point of showing how great it is to use other people’s classes, or even design classes yourself to be reusable in this way.

Download Reflection.as and paste it in the view folder.

The class should be ready to work, except that its package path is all wrong. This is pretty logical, since I’ve just used it for another project and it was placed completely on a different place. Correct this path to the class’ current location. You can also look into the class, now or later, to understand how it works and maybe learn new things that could motivate you to other uses or even new ideas with Away3D.

Step 8 – Plugging in the reflection:

Go back to PhotoScene.as and declare the reflection instance (we don’t need to import Reflection.as since it is in the same package as PhotoScene.as):

private var  reflection:Reflection;

Then, in the “initScene()” method, initialize it and add it to the display list:

reflection = new Reflection(scene, camera);
addChild(reflection);

And finally, in “renderScene()” add a call to the reflections rendering method:

private function renderScene(evt:Event):void

{

reflection.render();

view.render();

}

I also took the time to connect the Reflection class to the model and drop its arbitrary variables there. I even set up a USE_REFLECTION constant in the model and applied this Boolean value in the initialization of the reflection in “initScene()” and the “renderScene()” method too. All this allows you to, not only tweak the app to look good, but also to consider performance issues. With the values that you should have in the model after you do this, you can really optimize the application.

public static const USE_REFLECTION:Boolean = false;

public static const REFLECTION_OFFSET:Number = -525;

public static const REFLECTION_BLUR:Number = 8;

public static const REFLECTION_ALPHA:Number = 0.25;

public static const REFLECTION_SCALING:Number = 2;

So, that’s it! The application is flexible enough to be extended easily. Maybe a horizontal scroller could be a good idea, for example… I leave that to your creativity. I wanted to keep the MVC architecture as simple as I could by avoiding custom events, singleton classes, etc, but those could be good things to investigate for future projects. On the other hand, I really recommend playing with the Away3D engine, the possibilities with it are endless!!

I hope you’ve enjoyed the tutorial. I’m looking forward to make another one when I can =)

Those would be forwarding and rewinding slides, play and pause the slideshow and linkable slides. If you haven’t read the first part tutorial yet, you should do it before continue. You can read it here.

Requirements

Adobe Flash CS3

Try / Buy

Sample files:

slideshowprt2.zip

Adjust XML structure

To store the link of each slide, we just add it as an attribute to the xml file, or to be more accurate, on the image nodes. We also set the target window of the link, which might be neccesary to set in some cases. So, our xml is looking now like this:

<slideshow>
	<image src="images/fly.jpg" desc="Fly" link="http://www.wikipedia.org" target="_self"/>
	<image src="images/mouse.jpg" desc="Computer mouse" link="http://www.google.com" target="_blank"/>
	<image src="images/country.jpg" desc="Country" link="http://www.thetechlabs.com" target="_self"/>
	<image src="images/rope.jpg" desc="Rope" link="http://www.amazon.com" target="_blank"/>
	<image src="images/flower.jpg" desc="Flower" link="http://www.adobe.com" target="_self"/>
</slideshow>

Adding new objects

Since we know, how the xml looks like, we can move on to the knew stuff on the stage. In the mcInfo movieclip we’ve added 4 new buttons. Pause/Play and Forward/Rewind, which will later be assigned to event listeners. On the main stage is a invisible button as big as the size of the slides which will be used to open the links defined in the xml.
Alright, that’s already enough to go on with the coding part.

Adding new variables

First of all, we need to add some new variables to our script.

To know, if the slideshow is currently playing or paused, we set a flag:

var bolPlaying:Boolean = true;

And we also store the current slide link and target window in a variable:

var strLink:String = "";
var strTarget:String = "";

Init function

This is all we need for the variable. Now let’s take a look about what’s changing in the init function of the slideshow. We added the following two lines at the beginning of the function to prevent the user to click any button as long as the xml file hasn’t been loaded completely:

	mcInfo.visible = false;
	btnLink.visible = false;

We’ve also changed the function that will be called once the slideTimer event is fired. Now the function nextSlide() will be called, which we’ll create later:

	slideTimer.addEventListener(TimerEvent.TIMER, nextSlide);

On the last line of the initSlideshow() function we add the event listeners for the buttons. The play and button pause event listeners will be assigned to the same function togglePause(). The next and previous button will be asssigned to the nextSlide() and previousSlide() function. And last of all, we connect the invisible link button that covers the slide area with the goToWebsite() function. And since our slideshow will automatically be playing at the beginning, we hide the play button.

	btnLink.addEventListener(MouseEvent.CLICK, goToWebsite);
	mcInfo.btnPlay.addEventListener(MouseEvent.CLICK, togglePause);
	mcInfo.btnPause.addEventListener(MouseEvent.CLICK, togglePause);
	mcInfo.btnNext.addEventListener(MouseEvent.CLICK, nextSlide);
	mcInfo.btnPrevious.addEventListener(MouseEvent.CLICK, previousSlide);
	mcInfo.btnPlay.visible = false;

onXMLLoadComplete function

Once the xml is completely loaded, we need to show the mcInfo and the button link again. So we add the following two line of code to the function onXMLLoadComplete()

	mcInfo.visible = true;
	btnLink.visible = true;

And since our switchSlide() function will now need to have the index number of the slide, we add a zero as the parameter. We’ll explain the changes in the switchSlide() function later.

	switchSlide(0);

NextSlide/PreviousSide function

Let’s take a look at the nextSlide() and previousSlide() functions. They are called when clicking the next and previous button and the nextSlide() function is also called when the Timer event of the sliderTimer has been fired.
The nextSlide() function checks, if there are any slides left to move on. If so, the current switchSlide() function will be called with the next slide index. If there are no more slides left, then the parameter will be zero standing for the first slide.
The previousSlide() function works the same way. If there are slide we can go back, then the switchSlide() function will be called with the previous slide index. If we’re already on the first slide, then we start the slideshow from the last slide with calling the switchSlide() function with the parameter of the total slide count minus one since the array count begins with zero.

function nextSlide(e:Event = null):void {
	if(intCurrentSlide + 1 < intSlideCount)
		switchSlide(intCurrentSlide + 1);
	else
		switchSlide(0);

}

function previousSlide(e:Event = null):void {
	if(intCurrentSlide - 1 >= 0)
		switchSlide(intCurrentSlide - 1);
	else
		switchSlide(intSlideCount - 1);
}

SwitchSlide function

Since the nextSlide() and previousSlide() functions are now handling the checking for the slides, we can take out this part in the switchSlide() function.
To prevent the user from clicking too fast on the next and previous button, we check, if the tweener is still fading in the slides. If so, we just ignore the action. We’re doing this by adding the following if-statement to the first line of the switchSlide() function.

	if(!Tweener.isTweening(currentContainer)) {

Now we only need to set the new link and the target of it. This will be done exactly the same way as setting the description of the slide.

		strLink		= xmlSlideshow..image[intCurrentSlide].@link;
		strTarget	= xmlSlideshow..image[intCurrentSlide].@target;

FadeSideIn function

The fadeSlideIn() function has also a small addition. We check if the slideshow is currently playing and show the number of seconds to the next slide. If the slideshow is paused, we show a status message. The text will be assigned to the lbl_info label.

	if(bolPlaying) {
		mcInfo.lbl_loading.text = "Next slide in " + TIMER_DELAY / 1000 + " sec.";
	} else {
		mcInfo.lbl_loading.text = "Slideshow paused";
	}

OnSlideFadeIn function

On the onSlideFadeIn() function we now need to check, if the slideshow is playing. If so, we can start the timer again:

	if(bolPlaying && !slideTimer.running)
		slideTimer.start();

TogglePause function

The togglePause() function will be called when the user clicks on the play and pause button. First, we check, if the slideshow is playing, if so, we show the play button, set the bolPlaying variable to false, change the status message of the lbl_info label to “Slideshow paused” and stop the timer.
If the slideshow is currently paused, we show the pause button, set the bolPlaying variable to true again, show the time to the next slide and restart the timer.

function togglePause(e:MouseEvent):void {
	if(bolPlaying) {
		mcInfo.btnPlay.visible = true;
		mcInfo.btnPause.visible = false;

		bolPlaying = false;
		mcInfo.lbl_loading.text = "Slideshow paused";
		slideTimer.stop();
	} else {
		mcInfo.btnPlay.visible = false;
		mcInfo.btnPause.visible = true;

		bolPlaying = true;
		mcInfo.lbl_loading.text = "Next slide in " + TIMER_DELAY / 1000 + " sec.";
		slideTimer.reset();
		slideTimer.start();
	}
}

GotToWebsite function

The last function we need to define is the goToWebsite() function. This function will be called once the user clicks on the invisible button. It will check, if the strLink variable is empty or null. If not, the link will be opened.

function goToWebsite(e:MouseEvent):void {
	if(strLink != "" && strLink != null) {
		navigateToURL(new URLRequest(strLink), strTarget);
	}
}

We’ve already reached the end of the second part of the slideshow tutorial. We hope that you enjoyed reading it and we appreciate any kind of feedback.

Note

The feature for clicking the invisible button only works, when you’re running the flash on a webserver or in the flash sdk.

Full code with comments

// import tweener
import caurina.transitions.Tweener;

// delay between slides
const TIMER_DELAY:int = 5000;
// fade time between slides
const FADE_TIME:Number =	1;

// flag for knowing if slideshow is playing
var bolPlaying:Boolean = true;
// reference to the current slider container
var currentContainer:Sprite;
// index of the current slide
var intCurrentSlide:int = -1;
// total slides
var intSlideCount:int;
// timer for switching slides
var slideTimer:Timer;
// slides holder
var sprContainer1:Sprite;
var sprContainer2:Sprite;
// slides loader
var slideLoader:Loader;
// current slide link
var strLink:String = "";
// current slide link target
var strTarget:String = "";
// url to slideshow xml
var strXMLPath:String = "slideshow-data.xml";
// slideshow xml loader
var xmlLoader:URLLoader;
// slideshow xml
var xmlSlideshow:XML;

function initSlideshow():void {
	// hide buttons, labels and link
	mcInfo.visible = false;
	btnLink.visible = false;

	// create new urlloader for xml file
	xmlLoader = new URLLoader();
	// add listener for complete event
	xmlLoader.addEventListener(Event.COMPLETE, onXMLLoadComplete);
	// load xml file
	xmlLoader.load(new URLRequest(strXMLPath));

	// create new timer with delay from constant
	slideTimer = new Timer(TIMER_DELAY);
	// add event listener for timer event
	slideTimer.addEventListener(TimerEvent.TIMER, nextSlide);

	// create 2 container sprite which will hold the slides and
	// add them to the masked movieclip
	sprContainer1 = new Sprite();
	sprContainer2 = new Sprite();
	mcSlideHolder.addChild(sprContainer1);
	mcSlideHolder.addChild(sprContainer2);

	// keep a reference of the container which is currently
	// in the front
	currentContainer = sprContainer2;

	// add event listeners for buttons
	btnLink.addEventListener(MouseEvent.CLICK, goToWebsite);
	mcInfo.btnPlay.addEventListener(MouseEvent.CLICK, togglePause);
	mcInfo.btnPause.addEventListener(MouseEvent.CLICK, togglePause);
	mcInfo.btnNext.addEventListener(MouseEvent.CLICK, nextSlide);
	mcInfo.btnPrevious.addEventListener(MouseEvent.CLICK, previousSlide);

	// hide play button
	mcInfo.btnPlay.visible = false;
}

function onXMLLoadComplete(e:Event):void {
	// show buttons, labels and link
	mcInfo.visible = true;
	btnLink.visible = true;	

	// create new xml with the received data
	xmlSlideshow = new XML(e.target.data);
	// get total slide count
	intSlideCount = xmlSlideshow..image.length();
	// switch the first slide without a delay
	switchSlide(0);
}

function fadeSlideIn(e:Event):void {
	// add loaded slide from slide loader to the
	// current container
	currentContainer.addChild(slideLoader.content);
	// clear preloader text
	mcInfo.lbl_loading.text = "";

	// check if the slideshow is currently playing
	// if so, show time to the next slide. If not, show
	// a status message
	if(bolPlaying) {
		mcInfo.lbl_loading.text = "Next slide in " + TIMER_DELAY / 1000 + " sec.";
	} else {
		mcInfo.lbl_loading.text = "Slideshow paused";
	}

	// fade the current container in and start the slide timer
	// when the tween is finished
	Tweener.addTween(currentContainer, {alpha:1, time:FADE_TIME, onComplete:onSlideFadeIn});
}

function onSlideFadeIn():void {
	// check, if the slideshow is currently playing
	// if so, start the timer again
	if(bolPlaying && !slideTimer.running)
		slideTimer.start();
}

function togglePause(e:MouseEvent):void {
	// check if the slideshow is currently playing
	if(bolPlaying) {
		// show play button
		mcInfo.btnPlay.visible = true;
		mcInfo.btnPause.visible = false;

		// set playing flag to false
		bolPlaying = false;
		// set status message
		mcInfo.lbl_loading.text = "Slideshow paused";
		// stop the timer
		slideTimer.stop();
	} else {
		// show pause button
		mcInfo.btnPlay.visible = false;
		mcInfo.btnPause.visible = true;

		// set playing flag to true
		bolPlaying = true;
		// show time to next slide
		mcInfo.lbl_loading.text = "Next slide in " + TIMER_DELAY / 1000 + " sec.";
		// reset and start timer
		slideTimer.reset();
		slideTimer.start();
	}
}

function switchSlide(intSlide:int):void {
	// check if the last slide is still fading in
	if(!Tweener.isTweening(currentContainer)) {
		// check, if the timer is running (needed for the
		// very first switch of the slide)
		if(slideTimer.running)
			slideTimer.stop();

		// change slide index
		intCurrentSlide = intSlide;

		// check which container is currently in the front and
		// assign currentContainer to the one that's in the back with
		// the old slide
		if(currentContainer == sprContainer2)
			currentContainer = sprContainer1;
		else
			currentContainer = sprContainer2;

		// hide the old slide
		currentContainer.alpha = 0;
		// bring the old slide to the front
		mcSlideHolder.swapChildren(sprContainer2, sprContainer1);

		// create a new loader for the slide
		slideLoader = new Loader();
		// add event listener when slide is loaded
		slideLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, fadeSlideIn);
		// add event listener for the progress
		slideLoader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, showProgress);
		// load the next slide
		slideLoader.load(new URLRequest(xmlSlideshow..image[intCurrentSlide].@src));

		// show description of the next slide
		mcInfo.lbl_description.text = xmlSlideshow..image[intCurrentSlide].@desc;

		// set link and link target variable of the slide
		strLink		= xmlSlideshow..image[intCurrentSlide].@link;
		strTarget	= xmlSlideshow..image[intCurrentSlide].@target;

		// show current slide and total slides
		mcInfo.lbl_count.text = (intCurrentSlide + 1) + ” / ” + intSlideCount + ” Slides”;
	}
}

function showProgress(e:ProgressEvent):void {
	// show percentage of the bytes loaded from the current slide
	mcInfo.lbl_loading.text = “Loading…” + Math.ceil(e.bytesLoaded * 100 / e.bytesTotal) + “%”;
}

function goToWebsite(e:MouseEvent):void {
	// check if the strLink is not empty and open the link in the
	// defined target window
	if(strLink != “” && strLink != null) {
		navigateToURL(new URLRequest(strLink), strTarget);
	}
}

function nextSlide(e:Event = null):void {
	// check, if there are any slides left, if so, increment slide
	// index
	if(intCurrentSlide + 1 < intSlideCount)
		switchSlide(intCurrentSlide + 1);
	// if not, start slideshow from beginning
	else
		switchSlide(0);

}

function previousSlide(e:Event = null):void {
	// check, if there are any slides left, if so, decrement slide
	// index
	if(intCurrentSlide - 1 >= 0)
		switchSlide(intCurrentSlide - 1);
	// if not, start slideshow from the last slide
	else
		switchSlide(intSlideCount - 1);
}

// init slideshow
initSlideshow();

In order to complete this tutorial you can download the source files here.

In our xml file, we want to store the path to the slides and a description for each of it. So let’s take a look at the example file

<?xml version="1.0" encoding="UTF-8"?>

  <slideshow>

<image src="images/fly.jpg" desc="Fly"/>

<image src="images/mouse.jpg" desc="Computer mouse"/>

<image src="images/country.jpg" desc="Country"/>

<image src="images/rope.jpg" desc="Rope"/>

<image src="images/flower.jpg" desc="Flower"/>

</slideshow>

On the first line we describe the version and the encoding of the file. Flash uses UTF-8 for encoding, so we should edit the file in UTF-8 only to avoid character encoding problems.

The first node defines the root node of the xml file and contains further nodes. These are the images with the attributes src and desc. Okey, that’s how the structure of the xml looks like, let’s move on to the flash file.
The stage has a movieclip which contains the textfields which will show us the description of the slides, the loading process and the slide count later. Under it you will find a mask layer which masks an empty movieclip, where our slides will be loaded into. And on our first layer we have the whole script, at wich we’ll take a look now.

As always, we need to import the necessary librarys first. In our case, we only have caurinas tweener engine which will later be used to fade in the slides.

import caurina.transitions.Tweener;

Then we define two constants. One for the delay between the slides in milliseconds and the other one for the fade time between the slides in seconds. You can change them freely according to your needs

const TIMER_DELAY:int = 5000;
const FADE_TIME:int =	1;

Now we need to set some variables for the slideshow. We’re beginning with a variable, that holds a reference to the current container which holds the slide and is in the front

var currentContainer:Sprite;

To know which slide is currently active, we set a integer. We start at -1 because the function switchSlide will go to the first slide, which is 0.

var intCurrentSlide:int = -1;

The total count of the slides will be stored in a integer variable

var intSlideCount:int;

Then we need to define a timer, which calls the switchSlide function after the delay time we set in the constant

var slideTimer:Timer;

To have a nice fade effect, we need two containers for the slides. Each one will contain one slide

var sprContainer1:Sprite;
var sprContainer2:Sprite;

Next we set a variable for loading our slides

var slideLoader:Loader;

The next variable defines the path to the xml file

var strXMLPath:String = "slideshow-data.xml";

xmlLoader will be used to load the xml file

var xmlLoader:URLLoader;

And finally we need a variable to store the xml stuff

var xmlSlideshow:XML;

Now we need to initialize the whole slideshow. First, we create a new urlloader for the slideshow xml file, add an event listener when it’s completly and load it

xmlLoader = new URLLoader();
xmlLoader.addEventListener(Event.COMPLETE, onXMLLoadComplete);
xmlLoader.load(new URLRequest(strXMLPath));

Then we create the time with the delay from the constant and add an event listener for the timer event

slideTimer = new Timer(TIMER_DELAY);
slideTimer.addEventListener(TimerEvent.TIMER, switchSlide);

Next we create 2 container sprite which will hold the slides and add them to the masked movieclip

sprContainer1 = new Sprite();
sprContainer2 = new Sprite();
mcSlideHolder.addChild(sprContainer1);
mcSlideHolder.addChild(sprContainer2);

And last of all, we keep a reference of the container which is currently in the front

currentContainer = sprContainer2;

Once our xml file is fully loaded, the function onXMLLoadComplete will be called. This function assigns the received data to xmlSlideshow, gets the total slide count and stores it in the variable intSlideCount. Then it’ll call the function switchSlide which will immadiately load the next slide without waiting on the timer event.

xmlSlideshow = new XML(e.target.data);
intSlideCount = xmlSlideshow..image.length();
switchSlide(null);

Ok, let’s move on to the switchSlide function. This function will be called every time the timer has reached the delay and fires the timer event. First of all, we check, if the timer is running and stop it, because we need to wait until the next slide will be loaded and faded in. Then we check if there are any slides left. If not, we go back to the beginning. Now we need to figure out, wich container is currently in the front and assign currentContainer to the one, that’s in the back containing the old slide. Next we hide the old slide and bring it to the front.

if(slideTimer.running)
	slideTimer.stop();

if(intCurrentSlide + 1 < intSlideCount)
	intCurrentSlide++;
else
	intCurrentSlide = 0;

if(currentContainer == sprContainer2)
	currentContainer = sprContainer1;
else
	currentContainer = sprContainer2;

currentContainer.alpha = 0;
mcSlideHolder.swapChildren(sprContainer2, sprContainer1);

Then we create a new loader for the slide. We add an event listener when it’s loaded and an event listener for the progress of the loading. Next we load the picture with a urlrequest that contains the source path to the current image. And last of all, we show the description of the slide on the lbl_description and update the current number of the slide on lbl_count.

slideLoader = new Loader();
slideLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, fadeSlideIn);
slideLoader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, showProgress);
slideLoader.load(new URLRequest(xmlSlideshow..image[intCurrentSlide].@src));

mcInfo.lbl_description.text = xmlSlideshow..image[intCurrentSlide].@desc;
mcInfo.lbl_count.text = (intCurrentSlide + 1) + ” / ” + intSlideCount + ” Slides”;

The showProgress function is quite small. It’s just one line that calculates the percentage of the bytes loaded from the current slide and displays it on the lbl_loading

mcInfo.lbl_loading.text = "Loading..." + Math.ceil(e.bytesLoaded * 100 / e.bytesTotal) + "%";

The last function is fadeSlideIn and will be called once the picture is fully loaded. First, we add the loaded slide from the slideLoader to the current container. Then we clear the preloader text. And finally, we fade the current container in with caurinas tweener engine and start the slide timer when the tween is finished. Like this, we’ll have an endless loop, which will switch the slides.

currentContainer.addChild(slideLoader.content);
mcInfo.lbl_loading.text = "";
Tweener.addTween(currentContainer, {alpha:1, time:FADE_TIME, onComplete:function(){ slideTimer.start();} });
}

That was already it. I hope you enjoyed reading the tutorial. Please feel free to ask questions or leave a feedback.

Full code with comments

// import tweener
import caurina.transitions.Tweener;

// delay between slides
const TIMER_DELAY:int = 5000;
// fade time between slides
const FADE_TIME:int =	1;

// reference to the current slider container
var currentContainer:Sprite;
// index of the current slide
var intCurrentSlide:int = -1;
// total slides
var intSlideCount:int;
// timer for switching slides
var slideTimer:Timer;
// slides holder
var sprContainer1:Sprite;
var sprContainer2:Sprite;
// slides loader
var slideLoader:Loader;
// url to slideshow xml
var strXMLPath:String = "slideshow-data.xml";
// slideshow xml loader
var xmlLoader:URLLoader;
// slideshow xml
var xmlSlideshow:XML;

function init():void {
	// create new urlloader for xml file
	xmlLoader = new URLLoader();
	// add listener for complete event
	xmlLoader.addEventListener(Event.COMPLETE, onXMLLoadComplete);
	// load xml file
	xmlLoader.load(new URLRequest(strXMLPath));

	// create new timer with delay from constant
	slideTimer = new Timer(TIMER_DELAY);
	// add event listener for timer event
	slideTimer.addEventListener(TimerEvent.TIMER, switchSlide);

	// create 2 container sprite which will hold the slides and
	// add them to the masked movieclip
	sprContainer1 = new Sprite();
	sprContainer2 = new Sprite();
	mcSlideHolder.addChild(sprContainer1);
	mcSlideHolder.addChild(sprContainer2);

	// keep a reference of the container which is currently
	// in the front
	currentContainer = sprContainer2;

}

function onXMLLoadComplete(e:Event):void {
	// create new xml with the received data
	xmlSlideshow = new XML(e.target.data);
	// get total slide count
	intSlideCount = xmlSlideshow..image.length();
	// switch the first slide without a delay
	switchSlide(null);
}

function fadeSlideIn(e:Event):void {
	// add loaded slide from slide loader to the
	// current container
	currentContainer.addChild(slideLoader.content);
	// clear preloader text
	mcInfo.lbl_loading.text = "";
	// fade the current container in and start the slide timer
	// when the tween is finished
	Tweener.addTween(currentContainer, {alpha:1, time:FADE_TIME, onComplete:function() { slideTimer.start(); }});
}

function switchSlide(e:Event):void {
	// check, if the timer is running (needed for the
	// very first switch of the slide)
	if(slideTimer.running)
		slideTimer.stop();

	// check if we have any slides left and increment
	// current slide index
	if(intCurrentSlide + 1 < intSlideCount)
		intCurrentSlide++;
	// if not, start slideshow from beginning
	else
		intCurrentSlide = 0;

	// check which container is currently in the front and
	// assign currentContainer to the one that's in the back with
	// the old slide
	if(currentContainer == sprContainer2)
		currentContainer = sprContainer1;
	else
		currentContainer = sprContainer2;

	// hide the old slide
	currentContainer.alpha = 0;
	// bring the old slide to the front
	mcSlideHolder.swapChildren(sprContainer2, sprContainer1);

	// create a new loader for the slide
	slideLoader = new Loader();
	// add event listener when slide is loaded
	slideLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, fadeSlideIn);
	// add event listener for the progress
	slideLoader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, showProgress);
	// load the next slide
	slideLoader.load(new URLRequest(xmlSlideshow..image[intCurrentSlide].@src));

	// show description of the next slide
	mcInfo.lbl_description.text = xmlSlideshow..image[intCurrentSlide].@desc;
	// show current slide and total slides
	mcInfo.lbl_count.text = (intCurrentSlide + 1) + ” / ” + intSlideCount + ” Slides”;
}

function showProgress(e:ProgressEvent):void {
	// show percentage of the bytes loaded from the current slide
	mcInfo.lbl_loading.text = “Loading…” + Math.ceil(e.bytesLoaded * 100 / e.bytesTotal) + “%”;
}

// init slideshow
init();

In this second, and final, part we’ll be learning how to save and edit the file and how to setup the bindings between the xml and our component.

Download the source files

On a side note, we’ll be using the application storage folder to save the data because AIR doesn’t allow us to write to the application folder itself.

<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" initialize="{init()}"
	layout="absolute" height="451" width="542">
<!-- // -->
	<mx:Script>
		<![CDATA[
			import mx.collections.XMLListCollection;
			private var myXml:XML;
			private var myLoader:URLLoader;
			[Bindable]
			private var myContactsCol:XMLListCollection;

Note the introduction of the [Bindable] above ‘private var myContactsCol:XMLListCollection;’ this tells the Flex components that they can use this variable to listen to changes and to change it’s values.

public function init():void
			{
				var dataFile:File = new File('app-storage:/data.xml');
				if(dataFile.exists){
					var myReq:URLRequest = new URLRequest('app-storage:/data.xml');
					myLoader = new URLLoader()
					myLoader.addEventListener(Event.COMPLETE, dataComplete);
					myLoader.load(myReq);
				}else{
					createFile()
				}

			}

We start by initializing the application, as we saw in the previous part, but this time we need to check if the XML file already exists in our
application storage. And if it doesn’t we need to create it.
Note: You’ll notice that we’re referencing the file as app-storage:/data.xml, app-storage is a shortcut that AIR give you to your local storage location on the users machine.

private function createFile():void
			{
				var xmlToSave:XML = new XML('<flashEnabled><contacts>' +
						'<contact>' +
						'<name>Contact1</name>' +
						'<telephone></telephone>' +
						'<email></email>' +
						'</contact>' +
						'</contacts>' +
						'</flashEnabled>')
				var saveStr:String = xmlToSave.toXMLString();

				var file:File = new File('app-storage:/data.xml');
				var fs:FileStream = new FileStream();
				fs.open(file, FileMode.WRITE);

				fs.writeUTFBytes(saveStr);
				fs.close();
				init();
			}

Since the file wasn’t found we’ll create it, we start by creating our base XML object and retrieving a string with xml identation, then we open a File reference to it and finally
we write the file using writeUTFBytes that will automatically save our string to the XML file with UTF-8.

private function dataComplete(e:Event):void
			{
				myXml = new XML(myLoader.data.toString());
				myContactsCol = new XMLListCollection(myXml..contact);

			}

			private function updateList():void
			{
				myContactsCol = new XMLListCollection(myXml..contact.(name.toLowerCase().indexOf(search_txt.text.toLowerCase()) != -1 ))
			}

Here you’ll also notice that we no longer need to invalidate the list or reset the datagrid’s dataprovider, this is because we now use Binding.

private function saveData(e:Event):void
			{
				var xmlToSave:XML = new XML('<flashEnabled><contacts>'+myContactsCol.toXMLString()+'</contacts></flashEnabled>')
				var saveStr:String = xmlToSave.toXMLString();

				var file:File = new File('app-storage:/data.xml');
				var fs:FileStream = new FileStream();
				fs.open(file, FileMode.WRITE);

				fs.writeUTFBytes(saveStr);
				fs.close();
			}

This is where we’ll save the file, it’s essentially the same as create file, but with the contents of our current contact xml collection as nodes.

private function addItem():void
			{
				myContactsCol.addItem(new XML('<contact>' +
						'<name>Contact1</name>' +
						'<telephone></telephone>' +
						'<email></email>' +
						'</contact>'))
			}

			private function removeItem():void
			{
				myContactsCol.removeItemAt(myDg.selectedIndex);
			}

		]]>
	</mx:Script>

Here we have the add and remove item from our collection. So first lets go over adding an item, we essentially need to create an empty node and add it to the xml collection.
This can be achieved in a myriad of ways, but I reckon this might be the easiest.
Then for the removing part it’s as easy as removing the item that corresponds to the current index of the data grid.

Design

<mx:DataGrid bottom="60" top="10" left="10" id="myDg" dataProvider="{myContactsCol}" editable="true" right="10">
		<mx:columns>
			<mx:DataGridColumn headerText="Name" dataField="name"/>
			<mx:DataGridColumn headerText="Telphone" dataField="telephone"/>
			<mx:DataGridColumn headerText="Email" dataField="email"/>
		</mx:columns>
	</mx:DataGrid>
	<mx:Label x="10" text="Search:" bottom="10"/>
	<mx:TextInput x="65" id="search_txt" bottom="10"/>
	<!-- Code block 9 -->
	<mx:Button x="233" label="Go!" id="go_btn" click="{updateList()}" bottom="10"/>
	<mx:Button label="Save" click="{saveData(event)}" id="saveButton" bottom="10" right="10"/>
	<mx:Button x="286" label="Add" click="{addItem()}" bottom="10"/>
	<mx:Button x="343" label="Remove" click="{removeItem()}" bottom="10"/>

</mx:WindowedApplication>

With all the UI elements in place we can now set the two properties we need for the datagrid to work properly, the editable=”true” so that we can edit the contents of each item,
and the to set the dataprovider to myContactsCol so that it will bind to it.

Afterward we just have the normal buttons and layout to call the appropriate methods on click and you’re all set.

I hope that this will help you get some insight on how to use Bindings and how to modify and write files using AIR so that you can apply it to your own projects,
in the previous part of this article we mentioned the application self update, but since then Adobe has release the air update framework and therefore there’s no longer
need to use our own library to achieve a self updating application.

If you have any questions feel free to expose them here and I’ll address them as soon as I can.

Requirements

Adobe Flash CS3

Try / Buy

Source Files

Download

Sign up to weather.com

The first thing we gonna do is login in our weather.com account:

https://registration.weather.com/ursa/profile

Or if we already don’t have an account we could register for free in here:

https://registration.weather.com/ursa/profile/new?

Registering for weather.com XML Data Feed

Once we are in our account, we gonna have a page like this one, where on the left we gonna have all the services we are subscribed
and on the right, all the available services, the XML data feed is not there, it’s a little bit tricky.

So, we gonna signup to the XML data feed on this page

https://registration.weather.com/ursa/xmloap/

Where we gonna tell to weather.com in which way we gonna use the data. If it’s for personal purpose, there’s no problem, but
if it’s commercial purpose, you have to contact them, but everything is better explained on the mail you are going to receive.

So if our registration it’s oki, we gonna receive an email like this one (check on the spam inbox too, just in case).

The email explains us about the service, and there’s three important things to see in here:

• Where to download the weather.com SDK (http://download.weather.com/web/xml/sdk.zip)
• The weather.com XML Partner ID & License Key
• How to make a properly formatted XML request for the service

Contents of the wheater.com SDK

On this package you gonna find a PDF, with the license agreement and some useful information about how to make a request for the services,
and two folder, one with the weather.com logos, and the other with the weather icons we gonna use on this tutorial as reference.
There’s 3 type of icon sizes, for this tutorial we gonna use the 93×93 icons.

The icons are not too fancy, so we could download a free cool set of weather icons from here:

http://liquidweather.net/icons.php#iconsets

This iconsets and backgrounds are from the Liquid Weather++ appi.

Setting up our api key

We could put all our data inside flash, like the code of our city, our partner id, and so on, but it’s gonna be a pain in the ass every time we want to change it.
So, it’s much better if we load this type of data externally form an XML file. The XML structure should looks like this:

	ARBA0009
XXXXXXXXX
	XXXXXXXXXX
	m

Loading our data in Flash

Now our hands on AS.

We gonna do all the programming in just 2 frames, pretty easy.

On the first frame, we load all the data to use it when we call the weather.com xml service.

On the second frame, called “weather”, we load the weather.com xml and display the data.

So, in our first frame:

• We define the variables we gonna use
• We call the xml that holds our data
• Then we pass the data from the xml to our variables
• And if everything it’s oki, we could go to the weather frame

stop();

//=================
//ini variables
//=================

//we define our variables to be loaded

var city:String;
var par_id:String;
var key:String;
var units:String;

//call the xml with our data

var data_xml_url:String = "data.xml";
var user_data:XML = new XML();
var data_url:URLRequest = new URLRequest(data_xml_url);
var dataLoader:URLLoader = new URLLoader(data_url);

dataLoader.addEventListener(Event.COMPLETE, dataLoaded);

function dataLoaded(e:Event):void
{
	user_data = XML(dataLoader.data);

	//pass the data from the XML to our variables

	city = user_data.city.toString();
	par_id  = user_data.parid.toString();
	key  = user_data.key.toString();
	units  = user_data.units.toString();

	//if everything it's oki, we could go to the weather frame

	gotoAndStop("weather");
}

The weather icons

To display the different type of weather, we need a movieClip that holds all the possible weathers, there’s not too much, just 47.
So, we create a new movieclip and call it “icons_mc”, and inside the icons_mc we import all the icons from the Weather.com SDK icons folder,
or from the cool icons from liquidweather. There’s a lil bit differences between the Weather.com SDK icons and the liquidweather icons.
On the weather.com SDK, the icons 25 and 44 are N/A, if you gonna use the liquidweather icons, just replace the 25 and 44 icons with the N/A png.

Don’t forget to put a stop(); in the first frame of the icons_mc, so the MC start stopped.

Loading the weather.com xml service

Now we could load the data from weather.com

We allow our swf to make calls from the domain “xoap.weather.com”, we make the icons_mc MovieClip invisible, because we don’t know which icon use yet, and we compose the weather xml url with the variables from the frame 1.

stop();
//=================
//allow domains
//=================
Security.allowDomain("*", "xoap.weather.com");
//=================
//ini settings
//=================
icons_mc.visible = false;
//=================
//XML
//=================
var weather_xml_url:String = "http://xoap.weather.com/weather/local/"+city+"?cc=*&link=xoap&par="+par_id+"&key="+key+"&unit="+units;

The xml from weather.com have this structure with some interesting data. As you can see there’s a lot of useful data to load, but we gonna load just the necessary by now.

Later you could play with it and make an advanced one.

    en_US
MEDIUM

    C
    km
    km/h
    mb
    mm

    Buenos Aires, Argentina
    1:39 PM
    -34.61
    -58.37
    8:01 AM
    5:52 PM
    -3

    6/27/08 1:00 PM Local Time
    Buenos Aires Air Park, Argentina
    13
    13
    Fog
    20

      1021.0
      falling

      11
      N/A
      360
      N

    82
    2.5

      2
      Low

    10

      23
      Waning Crescent

Displaying the data

To display the data, we have three different sprites:

• The icons MovieClip
• A dynamic text field to load the outside temp called “temp_txt”
• A dynamic text filed in the bottom to make a lil speech about how feels to be outside called “info_txt”

Our main interest is on the XML file on the icon number, so we could show the right icon.

We load the xml using our well formatted “weather_xml_url”, and traverse the xml three to find what we are looking for.

In this step we:

• we load the temp on the temp_txt text field
• make the icons visible, load the icon number and tell the icons:mc to stopn on thet icon frame
• and finally we set the complementary text

var weather:XML = new XML();
var weather_url:URLRequest = new URLRequest(weather_xml_url);
var weatherLoader:URLLoader = new URLLoader(weather_url);

weatherLoader.addEventListener(Event.COMPLETE, weatherLoaded);

function weatherLoaded(e:Event):void
{
	weather = XML(weatherLoader.data);

	//we load the temp on the temp_txt text field
	temp_txt.text = weather.cc.tmp;

	//we make the icons visible, load the icon number and tell the icons:mc to stopn on thet icon frame
	icons_mc.visible = true;

	var weather_icon:int = Number(weather.cc.icon.toString())+1;
	icons_mc.gotoAndStop(weather_icon);

	//and finally we set the complementary text
	var ud:String = weather.head.ud;
	var us:String = weather.head.us;

	var city:String = weather.loc.dnam;
	var time:String = weather.loc.tm;
	var temp:String = weather.cc.tmp;
	var flik:String = weather.cc.flik;
	var term:String;

	if (temp == flik)
	{
		term = "and it feels like "+flik+" degrees,";
	} else {
		term = "but it feels like "+flik+" degrees,";
	}

	var wind_v:String = weather.cc.wind.s;
	var wind_gust:String = weather.cc.wind.gust;
	var wind_d:String = weather.cc.wind.d;
	var wind_t:String = weather.cc.wind.t;

	var hmid:String = weather.cc.hmid;
	var vis:String = weather.cc.vis;

	info_txt.text = "It's "+time+" here in "+city+". It's "+temp+" degrees out there "+term+" the wind blows from the "+wind_t+" at "+wind_v+" "+us+", the humidity is "+hmid+"% and the visibility is "+vis+" "+ud+".";
}

Now we could export our movie and if it’s cold outside, it’s good to be inside.

Final thoughts

We gonna need to know the international code of our city, so we could go to

http://www.weather.com/common/welcomepage/world.html

Search for our city, and find the code on our address bar. I know it’s a lil bit tricky but it works fine.

Hope you enjoyed this lil tutorial as much as I enjoyed writing for you.

With web 2.0, the community websites come to life, and one of the most famous web2.0 community websites is Flickr.

Flickr stores on their servers, photos form all their users around the world, and they have an open api so you could interact with it, and make your own developments, like PicNik.com, the photos online editor, where you could import your Flickr photos and make it look really cool.

Now in this tutorial I’m gonna show you how to interact with the flickr data base, making your own photo search engine, looking for tags on the photos.

Requirements

Adobe Flash CS3

Try / Buy

Source Files

Download

Step 1

The first thing we have to do is have a flickr account, so you could sign up fot an API key, necessary to connect with the Flickr data base.

To sign up, we have to go to http://www.flickr.com, if you already have a yahoo! account, just use it!

Once you have your account, you could start uploading your pics to share with your friends, but that another story, by now we gonna sign up for the API key!

Step 2

So, go to http://www.flickr.com/services/, where you gonna find this options:

The number 4 is what we are looking for.

Once there we have to provide our name, email and the type of license we are applying. I recommend start with the Non commercial license.

Once you sign up, you could check you API id on the Your API Keys section.

The code you need is on the Key, the secret is used for more complex stuff, like callback data from you api to the server, but for this tutorial we don’t gonna need it.

Take note of your key, we gonna use it later.

Step 3

Now we gonna interact with the flickr DB and know what kinda data we gonna read from flash.

For this we go to the Flickr API documentation http://www.flickr.com/services/api/

In here we gonna find all the functions have to interact with the flickr data base, we gonna use a common one, the flickr.photos.search.

If we see the documentation about this function, we have a description and a list of parameters that we could pass to find pictures on the Flcikr data base.

By now we gonna go to the end of the page and Explore the API (API Explorer : flickr.photos.search)

In here we gonna find a common html form, pretty basic. The item we concern is tags, we gonna fill the tags field with any word:

Go to the end of the page and first select Don’t sign the call, so we could see the full url of the call, and make the call:

And there you go, here’s the data Flickr returns us with this call, we are calling to the page http://api.flickr.com/services/rest/
and passing this variables:

• method=flickr.photos.search
• api_key=45e88791aa46e06efe64fea743f3868c
• tags=westie

The api key in here is a test api key used just for test purpose, the key change every day, so you better use your own key.

As you could notice, Flickr return us an XML with some data

There’s two important things in here, the stat that tells us if the service is running (ok) of if it’s offline (error), all that you can check it on the documentation.

The second one is the data flickr returns us about the photos, the XML provide us data about:

• The page number where we are
• The number of pages according with the number of photos per page call
• The total number of pics we call, the default is 100
• The total number of photos with this tag

And then the Photos data, giving us info about

• Photo id
• Owner Flickr code
• The secret
• The server where the pic is located
• The farm where is located
• The Photo title
• If the photo is public

Step 4

Now with all this new knowledge, we could go to Flash and make our own Flickr search engine.

First we start with a new Flash file (actionScript 3);

Step 5

Start with an actions layer, and our search layer.

Our flash file gonna have 2 keyframes, one for the search, and the second to display the images, called “search”

Step 6

First we create an empty movieclip and we call it “search_mc”, put it on the first frame of the search layer.

The instance name of our input textfield must be “tags_txt” and the instance name of the button must be “search_btn”

Inside of our search movieclip we have an input field and a search button, it could looks like this

Now we could add some code to our first frame on the main time line.

First we set the tag variables

Then we add a mouse event to our search button, if the input field is empty, nothing happens, but if we entered a tag, flash goes to the second frame, the “search” frame.

stop();

//===================================
// get the tag to search
//===================================

var tag:String;

search_mc.search_btn.addEventListener(MouseEvent.CLICK, searchListener);
function searchListener(e:MouseEvent):void
{
	if(search_mc.tags_txt.text != "")
	{
		tag = search_mc.tags_txt.text;
		gotoAndStop("search");
	}
}

Step 6

Oki, so now we are passing our tag from the frame 1 to our search frame.

In here we gonna have an empty movieclip, in our display layer, we gonna call it “container_mc”, and inside this movieclip we gonna load our photos.

Now we gonna create our square holder, it must be a square of 75px width and 75px height, that’s the image size of the thumbnails on flickr.

Inside the square, we have an invisible button, called “go_btn”, this is the button that gonna take us to the flickr photo page, and it’s located on the 0x,0y of the square holder.

it also contains an empty movieclip called “holder_mc”, where we gonna load the photo, and it’s located, like the “go_btn” on the 0x,0y of the square holder.

Cool! So, we could add some code on the first frame of the square holder, to load the image comming from the Flickr XML.

To make a cool load we gonna use Caurina transitions tweener, an used to create tweenings and other transitions via ActionScript code for projects built on the Flash platform. It’s released and maintained for these versions:

• ActionScript 2.0, for Flash 7+ and Flash Lite 2.0+
• ActionScript 2.0, for Flash 8+
• ActionSctipt 3.0, for Flash 9+

And you can download the last version here: http://code.google.com/p/tweener/

Ok, so let’s start with the image loader:

first import the classes

//first we import the necessary class to work
import flash.display.*;
import flash.net.URLRequest;
import flash.events.*;
import caurina.transitions.*;

Now, let’s make the load class:

We pass the image source to the function, the function creates a new Loader, to load that image on the
holder_mc movieclip, the we set the alpha of the holder_mc to 0 so we could make a nice alpha transition from 0 to 100 with the caurina class.

I’m not setting a preloader, but with the progressListener you could set up your own easily.

function loadImage(img_src:String)
{
	var loader:Loader = new Loader();
	var img_url:String = img_src;
	var request_url:URLRequest = new URLRequest(img_url);
	loader.load(request_url);
	loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, progressListener);
	loader.contentLoaderInfo.addEventListener(Event.COMPLETE, completeListener);

	function progressListener(e:ProgressEvent)
	{
		var bl:int = e.bytesLoaded;
		var bt:int = e.bytesTotal;
		var percent:int = Math.ceil((bl*100)/bt);
	}
	function completeListener(e:Event)
	{
		holder_mc.addChild(loader.content);
		holder_mc.alpha = 0;
		Tweener.addTween(holder_mc, {alpha:1, time:1, transition:"linear"});
	}
}

Step 7

Now, we linkage the square that we gonna load the pictures, as the class Square:

Now we could add some code in our search frame, so we could connect with the Flickr data base, but first we have to know how call that pics:

In this url http://www.flickr.com/services/api/misc.urls.html, you gonna found how format the data flickr provide to call a picture.

We gonna use the url

http://farm{farm-id}.static.flickr.com/{server-id}/{id}_{secret}_t.jpg

to call the thumbnails.

Step 8

On our search frame, in our main timeline:

//=================
//import the neccesary classes
//=================
import flash.display.*;
import flash.events.*;
import flash.net.*;
//=================
//allow domains
//=================
Security.allowDomain("*", "api.flickr.com");

Now we set the ini variables that we gonna need:

• xpos: the ini x pos of the squares
• ypos: the ini y pos of the squares
• dif: the difference between an square and the other
• totalCols: the total number of columns
• count: the count so we could know how much columns we are having
• i: the counter
• squares_arr: the array that’s gonna holds the square duplications names

//=================
//ini variables
//=================
var xpos:Number = 0;
var ypos:Number = 0;
var dif:Number = 75;
var totalCols:int = 10;
var count:int = 1;
var i:int = 0;
var squares_arr:Array = [];

Now we set the flickr ini variables, like your flickr api key:

In here we construct the function url using the variables and the tag provided on the first frame. We start with the page 1 and we gonna load just 50 images.

//=================
//flickr variable
//=================
var key:String = ""; //your flickr api key
var per_page:int = 50;
var page:int = 1;
var xml_url:String = "http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key="+key+"&tags="+tag+"&per_page="+per_page+"&page="+page;

And we read the result just like any other XML data, we gonna use the ini variables to make a return while FLash populate the Squares inside the “container_mc”

As you can see in the code, we use the data provided by the Flickr XML to construct the image source and load it using the function on the Square movieclip

//=================
//XML
//=================
var pics:XML = new XML();
var pics_url:URLRequest = new URLRequest(xml_url);
var picsLoader:URLLoader = new URLLoader(pics_url);
picsLoader.addEventListener(Event.COMPLETE, picsLoaded);
function picsLoaded(e:Event):void
{
	pics = XML(picsLoader.data);

	var stat:String = pics.@stat.toString();
	var totalPages:int = pics.photos.@pages;
	var totalPics:int = pics.photos.@total;

	/*
	trace("status: "+stat);
	trace("Total pages: "+totalPages);
	trace("Total pics: "+totalPics);
	trace("-=-=-=-=-=-=-=-=-=-=-=");
	*/

	var allPics:XMLList = pics.photos.*;
	for each (var photo:XML in allPics)
	{
		var pic_src:String = "http://farm"+photo.@farm+".static.flickr.com/"+photo.@server+"/"+photo.@id+"_"+photo.@secret+"_s.jpg";
		/*
		trace("title: "+photo.@title+" owner: "+photo.@owner);
		trace("Source: "+pic_src);
		trace("-=-=-=-=-=-=-=-=-=-=-=");
		*/
		//
		var newName:String = "square_"+i;
		var my_square:Square = new Square();
		my_square.name = newName;
		my_square.x = xpos;
		my_square.y = ypos;
		my_square.loadImage(pic_src);
		//
		my_square.photo_id = photo.@id;
		my_square.photo_owner = photo.@owner;
		//
		squares_arr.push(my_square);
		container_mc.addChild(my_square);
		//
		if (count < totalCols)
		{
			xpos += dif;
			count++;
		}
		else
		{
			xpos = 0;
			ypos += dif;
			count = 1;
		}
		i++;
	}
}

Step 9

the last thing to do is pass the owner and the photo id to our photo holder, so we could set the right url to go

If you see this two lines in our previous code:

my_square.photo_id = photo.@id;
my_square.photo_owner = photo.@owner;

We already passed the variables to our holder.

Now on our photo holder, we set the necessary variables and add the event to our “go_btn”

//================================
// flickr photo page
//================================
var photo_id:String;
var photo_owner:String;
var photo_url:String = "http://www.flickr.com/photos/";
//================================
//add evento to the button
//================================
go_btn.addEventListener(MouseEvent.CLICK, goListener);
function goListener(e:MouseEvent):void
{
	var url:String = photo_url+"/"+photo_owner+"/"+photo_id;
	var req:URLRequest = new URLRequest(url);
	navigateToURL(req, "_blank");
}

Step 10

Now you are ready to ctrl+enter and see how it works.

On the source files you gonna find that I set the first search as “westie”, it’s my favorite dog, but you could leave it blank if you want.

At the end you should have something like this:

Feel free to explore the flickr api service and look all the cool stuff yahoo! is sharing with all of us.

Here’s some cool examples and resources:

• Picnik - edit photos the easy way, online in your browser
• Flickr Related Tag Browser
• TiltViewer is a free, customizable 3D Flash image viewing application
• stunning nikon - dslr
• Flickr Tools on Flickrbits » The definitive collection of Flickr tools, plugins and API applications
• The Flickr library is an ActionScript 3.0 API for the online photo sharing application, Flickr. It provides access to the entire Flickr API

We’ve been invited by Carlos to make some tutorials on what we know best, Flash and Flex.

This will be the first part of our first tutorial: How to build a contact manager in AIR using XML.

For the first part of this tutorial we’ll be reading, parsing and searching an XML into an AIR application and going through the whole getting it to compile and exporting a release version. So first things first, you’ll need Flex 3 SDK, or Flex 3 IDE, that you can get for free over at Adobe, or the 30 day trial if you go for the builder.

After you’ve installed it we’re good to go. Open Flex, and create a new Flex Project. Select the Desktop Application option and we’re all set to start coding.

First we must start by adding an initialize handler to our application so that we know when we can start working.

<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" initialize="{init()}" layout="absolute" viewSourceURL="srcview/index.html" height="451">
<!-- // -->
<mx:Script>
<![CDATA[
import mx.collections.XMLListCollection;

Then we create our variables and initiate them, set an Event handler to handle the loading of the XML File, and start the loading process.

private var myXml:XML;
private var myLoader:URLLoader;
private var myContactsCol:XMLListCollection;

The handler is simple, it casts the received data to an XML Object and initializes the XMLListCollection to our full data. (More on why we use a XmlListCollection on part 2)

public function init():void
{
var myReq:URLRequest = new URLRequest('data.xml');
myLoader = new URLLoader()
myLoader.addEventListener(Event.COMPLETE, dataComplete);
myLoader.load(myReq);
}

Now here's where the 'magic' happens the search and updating of our datagrid.

private function dataComplete(e:Event):void
{
myXml = new XML(myLoader.data.toString());
myContactsCol = new XMLListCollection(myXml..contact);
myDg.dataProvider = myContactsCol;
myDg.invalidateList()
}

I know this line might look scary but it really isn't, it's simple E4X at work, what we do is to get an XMLList out of our xml where the name node of each contact node matches our expression, in this case any name that contains our search string. And then we refresh the visual part of the datagrid.

private function updateList():void
{
myContactsCol = new XMLListCollection(myXml..contact.(name.toLowerCase().indexOf(search_txt.text.toLowerCase()) != -1 ))
myDg.dataProvider = myContactsCol;
myDg.invalidateList()
}
]]>
</mx:Script>

Now for the MXML part of our application, it’s simple enough we drag our datagrid to our workspace, name it and set the names for it’s columns, note the dataField property this related directly to the name of the XML Nodes.

<mx:DataGrid bottom="60" top="10" left="10" id="myDg">
<mx:columns>
<mx:DataGridColumn headerText="Name" dataField="name"/>
<mx:DataGridColumn headerText="Telphone" dataField="telephone"/>
<mx:DataGridColumn headerText="Email" dataField="email"/>
</mx:columns>
</mx:DataGrid>
<mx:Label x="10" text="Search:" bottom="10"/>
<mx:TextInput x="65" id="search_txt" bottom="10"/>

And finally we just set the click handler for the GO! button to update our search results.

<mx:Button x="233" label="Go!" id="go_btn" click="{updateList()}" bottom="10"/>
</mx:WindowedApplication>

Now in order to publish the application we need to create a certificate (or use an existing one), this can be easily done by using create new certificate option, which will create an unsigned certificate, or by getting one from Twathe or Verisign.

After that you just save your certificate, select it and hit finish!

We now have a fully working Air application.

In part 2 we’ll go through Editing and saving the file, how to set up our bindings so that both the Xml, and the results are updated automatically, go through the data types that we use and how to use an auto-updating library for your application.

Download the support files