6. MXML file

Now, let's take a look at the mxml file used to build the swf file and then we will analyze it step by step:

view main.mxml (leave it opened in a new window)

 

This is the list of all the used methods in the mxml file:

• loadNext():void
• onImageLoaded(e:Event):void
• onEffectEnd(e:EffectEvent):void
• init():void (the entry point)
• onTimerStep(e:TimerEvent):void
• handleEvent(e:Event):void
• first():void
• next():void
• getPhotoURI(p:Photo):String
• setter/getter current

Once the application has loaded completely, the init() method will be invoked. This is made with the applicationComplete="init()" attribute within the <Application> tag

First, take a look at the application constants used, which determine the application behavior:

• API
  This is your flickr api key, needed to fetch the flickr api
• NSID
  The user id whose images you want to display
• PAUSE
  The pause between each image
• EFFECT_DURATION
  Duration in ms of the Fade and CubeEffect effects
• BLUR_FILTER
  The BlurFilter used within the CubEffect
• TOTAL_IMAGES
  How many images to display

And now let's take a look in deep at each method:

6.1 init():void

This is the entry point method, where we will initialize the classes to be used in our application.

First initialize the FlickrService class, used for every remote call to the flickr methods, then assign the listeners we need to capture in the flickrservice and assign to everyone the same handler: handleEvent

Create a Timer instance (_timer) used to create a pause between each image and set the delay time to the constant "PAUSE".

After all make the call to the next method we need to call, first()

 

6.2 first():void

This method just call the _flickr.people.getPublicPhotos(NSID, "", 1, 1); method. Whic means: from the user NSID get 1 photo from his public photo.

This method wont be called anymore, since every other images will be called using the next() method

 

6.3 next():void

_flickr.photos.getContext(current.id);

Passing the current Photo id to this method we will receive a result with the next and previous photo from the current context.

 

6.4 handleEvent(e:Event):void

This is the handler for the flickr's methods calls: getInfo, getContext amd getPublicPhotos.

If the event type is PEOPLE_GET_PUBLIC_PHOTOS then set the current photos the first one in the received photo list.

 

If the event type is PHOTOS_GET_CONTEXT we need to check which will be the next image to load, the previous or the next one.

the getContext method return 2 Photo tags, previous and next, always. But if we are at the first image in the context there won't be a previous image and so the previous image id will be "0".

So, we need to check if the id of the Photo is not "0", otherwise get the other one.

Moreover we created a constant TOTAL_IMAGES whichis used to set the maximum number of images to display here. So if the currentIndex variable, which is incremented every time we load a "next image", is greater than the TOTAL_IMAGES, then we will take always the previous image till we will be at the first image. Then start over again getting the next image.

Once determined which image to be loaded call the _flickr.photos.getInfo(tmp_photo.id, tmp_photo.secret); which will return the informations of that image (such as the image path).

If the event type is PHOTOS_GET_INFO this means we have all the necessary informations to load the next image, so place the image informations into a temporary variable, _next_photo = Photo(FlickrResultEvent(e).data.photo); and then call _timer.start() (which after PAUSE milliseconds will call the onTimerStep method)

 

6.5 onTimerStep(e:TimerEvent):void

Get the temporary variable "_next_photo" and make it the current: current = _next_photo;

 

6.6 current(p:Photo):void

A setter method. this only will call loadNext()

 

6.7 loadNext():void

We have all the informations for loading the next image. So create a Box within a SWFLoader, set the swfloader source path as the result of getPhotoURI(current) and call onImageLoaded once the SWFLoader has loaded the image.

 

6.8 getPhotoURI(p:Photo):String

Usually you should just return an url like this: http://static.flickr.com/" + p.server + "/" + p.id +"_" + p.secret + "_m.jpg"

but, like we said above, because we are going to use BitmapData based effects we need to load the images from the same domain, so we will use the read.php file for loading the image, which for this tutorial is:

"/tutorials/flashPHP/cube_effect/files/read.php?file=http://static.flickr.com/" + p.server + "/" + p.id +"_" + p.secret + "_m.jpg";

 

6.9 onImageLoaded(e:Event):void

The image in the SWFLoader DisplayObject has been loaded and this event has been triggered.

2 situations: if it's the first image loaded then just display it using a simple Fade effect, otherwise use the CubeRotate effect between the current image and the one just loaded.

To create a CubeRotate effect which works we use this code:

f = new CubeRotate(container.getChildAt(container.getChildren().length-1));
CubeRotate(f).siblings = [SWFLoader(e.target).parent]
direction++;
if(direction >= directions.length) direction = 0;
CubeRotate(f).direction = directions[direction]
CubeRotate(f).blur = BLUR_FILTER;
f.duration = EFFECT_DURATION;
f.play();
				

Create a CubeRotate instance and pass the rotate-from target as parameter, in our case is: container.getChildAt(container.getChildren().length-1) (the current image display)

Tell the effect the rotate-to target:

.siblings = [SWFLoader(e.target).parent] // the image loade parent (VBox)

Set the CubeRotate direction using
CubeRotate(f).direction = directions[direction]

assign a BlurFilter (optional): CubeRotate(f).blur = BLUR_FILTER

set an effect duration: f.duration = EFFECT_DURATION

and finally play it.

Once the effect has finished the onEffectEnd method will be called

6.10 onEffectEnd(e:EffectEvent):void

When the Fade effect or the CubeRotate effect ends this methos is called. This means we can proceeed with the next image.

If the effect was a CubeRotate effect we need to make 2 more things:

1. remove the old image container, in order to free memory:

container.removeChild(DisplayObject(CubeRotate(e.target).target))

2. Add the new image container to the VBox main container, otherwise after the effect ends it would be removed from the list:

container.addChild(DisplayObject(CubeRotate(e.target).siblings[0]))

 

7. Conclusions

A big thanks to Alex Uhlmann and his great component!

for more examples on howto use this component just look at the example folder of the DistortionEffects.zip or look at this page