XML is a data format that's well-suited to dynamic image galleries. It's also really easy to process in Flash with AS3. With the help of XML and ActionScript, we're going to create an image gallery that's dynamic and categorized into different themes.
We're also going to learn how to use a very practical tweening class, called Tweener, to move the different theme icons and the thumbnails. In this tutorial I'm going to concentrate on the effective processing of the data retrieved from XML; all the fancy image animation is up to you ;)
Step 1: Setting Up the Stage
First I'll share how I set up my stage. These are not fixed options, so if you want to change things, that's perfectly fine. Just make sure you change the code in this tutorial to fit with your settings (particularly regarding the size of the stage).
My stage is 900 x 600 px; I set the background color to black and the frame rate to 25fps. Although the SWF movie is only one frame long, setting the fps is important because it will affect the tweening we're going to perform.
As you can see we're going to use a document class, but before getting to that, we need to set up the layers, and place the objects that we're going to use.
Step 2: The Main Image's MovieClip
All of our non-moving content will be on a layer called 'BigPic+Title+Arrows' (create this now). The first one is an empty MovieClip called Img (instance name: img); this is the Mc in which we're going to load each big picture. Create this, and place it at (x: 450, y:220).
Step 3: Creating the Navigation Arrows
The simplest way to create these is to use a big '<' character. Create a new static text field, choose whatever font and size you want, type '<', and then use the 'Break apart' command: select the character and press CTRL+B or Modify > Break Apart.
Then, convert this shape into a MovieClip, name it 'Arrow', and change the registration point to the center of the left-hand side (where the arrow points).
Step 4: Placing the Navigation Arrows
We will need two of these on the stage, so drag one more from the Library. Flip one of them horizontally (Modify > Transform > Flip Horizontal). Position the left one at (x:0, y:220), and give it an instance name of 'prevArrow'. The right one should go at (x:900, y:220), and have an instance name of 'nextArrow'.
Step 5: The Title Text Field
Create a 900px wide dynamic text field (so that you can use titles as long as you wish). Place it at (x:0, y:440), and give it an instance name of 'txtField'. I used Arial font at 16pt, aligned to the center; don't forget to embed it!
Step 6: Drawing the Covering Plate
These are just little design elements for the theme icons and the thumbnails to make them fade out at the borders of the stage. Create a 30px wide, 130px high rectangle (without a stroke - just the fill), and with the rectangle still selected, go to the Color panel and change the Fill style from solid to linear. Set both colors to black, but set one of them to 0% alpha.
Step 7: Converting and Placing the Covering Plate
Now, convert the rectangle to a MovieClip (reg. point: top left corner, name:Cover). Do the same as you did with the arrows: drag two instances onto the stage, and flip one of them. In each case, the 0% alpha-side should be closest to the center of the stage.
Place them at the sides of the stage: (left one: (x:0, y:470); right one: (x:900, y:470)).
All right - we're done with this layer.
Step 8: The "themes+thumbs" Layer
Under our existing layer, create a new one called 'themes+thumbs'. On this layer, create an empty MovieClip for the theme icons (name: 'Themes', reg. point: top left corner, instance name: 'themes', x: 0, y: 470) and another for the thumbnails (name: 'smallPics', reg. point: top left corner, instance name: 'smallPicsMc', x: 0, y: 510).
We'll need to create some more symbols which don't start out on the stage, but we will create these in ActionScript later.
Step 9: The Thumbnail Symbol
Create an empty MovieClip (name: 'SmallPicButton', reg. point: top left corner). This MC will contain one thumbnail; we're going to have a lot of instances of this symbol, so we'll create each of these at runtime.
In order to do that, we have to export this symbol for ActionScript: in the Library panel, right-click on this symbol, then select Properties. Tick the 'Export for ActionScript' box, then set the Class to SmallPicButton. Base Class stays as it is.
After you click OK, double-click on this symbol in the library to enter edit mode, then go to the Actions panel - we're going to write some code now. We're going to make sure that this MovieClip behaves like a proper button.
Step 10: Action for the SmallPicButton
Copy and paste this code into the Actions panel:
//if the cursor is over the symbol we change its alpha to 1
function rollOver(e:MouseEvent):void{
alpha = 1;
}
//if the cursor just moved off the symbol, we change its alpha to 0.5
function rollOut(e:MouseEvent):void{
alpha = 0.5;
}
//register the event listeners to run the above functions
addEventListener(MouseEvent.ROLL_OVER, rollOver);
addEventListener(MouseEvent.ROLL_OUT, rollOut);
//this guarantees that the cursor changes to the little pointing hand over the symbol
buttonMode = true;
useHandCursor = true;
//set its initial alpha to 0.5
alpha = 0.5;
Step 11: The ThemeButton
This Symbol will be used for the icons you can click on to select a different themed category - what a surprise :). This is similar to the SmallPicButton, so in order to create it repeat Steps 8-10 - only, change the name and the Class to ThemeButton instead of SmallPicButton. You don't have to change anything in the code.
Step 12: What We Have So Far
So, we created two layers: the top one is the BigPic+Title+Arrows, the bottom one is themes+thumbs.
On the BigPic+Title+Arrows layer we have the img, the prevArrow, the nextArrow, the txtField and the two covering plates at the sides on the bottom.
On the themes+thumbs layer we have two empty MovieClips: Themes, which will contain all the theme icons, and smallPicsMc, which will contain all the thumbnails.
In the library, we have SmallPicButton and ThemeButton symbols with properly set linkage options.
I hope you're with me so far. It's crucial to have the symbols named properly, because otherwise the upcoming code won't work.
Step 13: Setting Up the Folder Structure
All right - so we're done with the Flash part. We have two things to do before we start coding: put all the pictures in a usable folder structure and create our XML file.
In the same folder as your FLA file, create a folder called 'pics'. In that folder create two others: one of them called 'small' (to contain the thumbnails) and another called 'big' (to contain the big images). In both folders you'll have the same folder structure: one folder for each theme.
Step 14: The Image Files
Each of your thumbnails should have the same name as its corresponding big picture. It's important that in the 'small' folder all the pictures should be 80px high to fit our UI. The size of the big images is not important, because we're going to resize them before adding them to the stage, but bear in mind that the maximum image size we will be able to show is 840px by 420px.
Step 15: Creating the XML File
Create a new text file in any file manager program and name it 'pics.xml'.
You can edit this file with any text editors like Notepad, but it's much easier to edit it with Flash.
Step 16: Editing the XML File
I will only tell you the things we need for XML to work properly, if you are interested in learning more about XML you can find plenty of tutorials here at Activetuts+ (like this one by Dru Kepple) or other pages on the web - and don't forget: Google is your friend ;)
In this XML file we're going to describe the folder structure (and the pictures within it), so that Flash can read and interpret it.
<pics> <theme name="The name of the theme"> <pic title="The title of the picture" filename="FilenameOfThePicture.jpg" /> </theme> </pics>
So, pics is the root element, and everything goes between the pics tags. If you want to add a new theme, you just copy and paste an existing theme element and change its attributes. If you want to add a new picture to one of the themes you just copy and paste a pic tag inside the right them, and change its attributes. The name attribute of the theme tag must be the same as the folder name, because that's where we're going to tell Flash to look for the file. Both name and filename are case-sensitive.
Step 17: Creating the Document Class
Click File > New and select ActionScript File. Copy and paste the following code.
package {
public class Gallery extends MovieClip
{
}
}
Basically this code doesn't do anything, but it says that this class is in the global package, and it's a public class called Gallery.
Step 18: The Constructor
The first function we start to write is the constructor. It's the basic function of the whole program, and will be the first code run when the SWF is started.
Copy and paste this code between the curly braces that go with the "public class Gallery extends MovieClip" line:
public function Gallery():void
{
}
Step 19: The URLLoader
The first thing we need to do is to load the XML file we created. We will do this with the help of the URLLoader class, which is in the flash.net package.
In order to use it, we need to import that package. Actually, let's just import every package we will need. Copy and the following code and paste it above the "public class Gallery extends MovieClip" line:
import flash.display.*; import flash.events.*; import flash.net.*; import flash.text.*; import flash.xml.*; import caurina.transitions.*;
Remember, imports will be always at the beginning of the code (after the 'package{ ' part), the declaration of the non-local variables will be before the constructor, and all the functions will be after the constructor.
In order for Flash to import that "caurina.transitions" package, you'll need to have this package in the same folder as your FLA and your document class. So, open up my Source zip file, and copy the \caurina\ folder into your project's folder.
After we've imported the packages we're going to need, we can declare - and create a new instance of - our URLLoader variable:
var urlLoader:URLLoader = new URLLoader();
(Put that code in the constructor function.)
Now we can tell Flash to load our XML file, and add an event listener to urlLoader:
public function Gallery():void
{
urlLoader.load(new URLRequest("pics.xml"));
urlLoader.addEventListener(Event.COMPLETE, urlLoadComplete);
}
So when urlLoader finishes loading pics.xml, Flash will run the urlLoadComplete function, which is our next thing to write...
Step 20: The urlLoadComplete Function
When the XML file is loaded we're going to have to put all the info it contains into an XML object. Then, in order to use that, we're going to need an XMLList object too:
//these are non-local variables var xml:XML; var list:XMLList;
After the constructor paste this:
protected function urlLoadComplete(e:Event):void
{
xml = new XML(urlLoader.data);
list = new XMLList(xml.children());
}
Now, all the child nodes of the pics element - that is, all the theme tags - are in the list variable. If you want to see what's in there, paste 'trace(list);' after the second line of the urlLoadComplete function.
Step 21: Creating the Theme Buttons
In order to do this we'll need a for loop. So first we need to declare a loop-variable for the loop to work properly and an array for the themeButton objects:
//these are non-local variables var themeButtons:Array = new Array(); var i:int;
After the two existing lines of the urlLoadComplete function we'll have to start writing our loop:
for(i = 0; i< list.length(); i++)
{
//we create a new instance of the ThemeButton symbol
var themeButton:MovieClip = new ThemeButton();
//we set the content of the textfield to the name of the theme
themeButton.txt.text = list[i].@name;
//we set the name of the textfield instance to be the same as its content
themeButton.name = list[i].@name;
//we add the click eventListener
themeButton.addEventListener(MouseEvent.CLICK, themeClick);
//we place the clips in a row with 10px padding
themeButton.x = i*(themeButton.width+10);
//we put the movieclip in the themes MC
themes.addChild(themeButton);
//...and in the themeButtons array also
themeButtons[i] = themeButton;
}
After this, we put all the buttons in the themes MC, then we align it to the center of the stage:
//change 450 to match the width of your stage themes.x = 450-themes.width/2;
You can test your movie now and see if it works. You should see your theme buttons (working like buttons) in a line...
Step 22: Moving the themeButtons
In order to have the themeButtons moving, we add a mouseMove eventListener to the stage; paste this in the constructor:
stage.addEventListener(MouseEvent.MOUSE_MOVE, slideTheme);
Before we write the slideTheme function, we declare another non-local variable:
//this will help calculate the position to which the themes should slide var ratio:Number;
In the slideTheme function we'll use the Tweener class - specifically, one function of that class, called addTween(). (You can read all about this class here.)
protected function slideTheme(e:MouseEvent):void
{
if(mouseY>470 && mouseY< 600)//we move the themeButtons if the cursor is the themeButtons-thumbs area
{
ratio = themes.width/850;
//we move the themes MC if it is longer then the stage
if(themes.width > 900)
{
//if it is longer, the position depends on the cursor's X position
Tweener.addTween(themes, {x: (450-themes.width/2)-(mouseX-450)*ratio, time: 1}); }
else
{
//otherwise, we align it to the center of the stage
Tweener.addTween(themes, {x: (450-themes.width/2), time: 1});
}
}
}
Test your movie; the themes MC should move now (if it's longer than the stage).
Step 23: Variables for the themeClick Function
Before we begin to write the function, we need to declare some more non-local variables:
var j:int; //another loop-variable //if we click on one of the theme icons, it will be contained in this variable var themeClicked:MovieClip = new ThemeButton(); //the list of the pictures in a particular theme var picsList:XMLList; var smallPicSource:Array; //the thumb's source var bigPicSource:Array; //the big picture's source //this will contain all the thumbs var smallPics:Array; //this will contain the titles of the pictures in the selected theme var picTitles:Array;
Step 24: themeClick() Reset State
The beginning of this function takes care of resetting things when you click one of the themeButtons.
protected function themeClick(e:MouseEvent):void
{
//the whole function shall be executed only if the theme you selected is not the same as you selected just before
if (themeClicked != e.currentTarget)
{
//makes the smallPicsMc invisible - it's on the stage, but it contains nothing yet
smallPicsMc.visible = false;
//removes the mouseMove eventListener - added afterwards
stage.removeEventListener(MouseEvent.MOUSE_MOVE, slideSmallPics);
j = 0; //resets the loop counter to zero
Step 25: themeClick() Clear Image and Text
If there was a picture on the stage (in the img Mc), it will be removed, and the title text field will be cleared:
if(img.numChildren > 0)
{
img.removeChildAt(0);
}
titleTxt.text = "";
Step 26: themeClick() Remember Clicked Theme
This part guarantees that the program will be able to 'remember' which theme you clicked on, by storing a reference in the themeClicked variable.
if (themeClicked != null){ //if it's not the first time you click on a theme
themeClicked.alpha = 0.5; //the previous themeButton's alpha is set to 50% themeClicked.addEventListener(MouseEvent.ROLL_OUT, themeClicked.rollOut); //its rollOut eventListener is re-added
}
themeClicked = MovieClip(e.currentTarget); //the content of the themeClicked MC is changed to the themeButton you've just clicked on
themeClicked.alpha = 1; //its alpha is set to 100%
themeClicked.removeEventListener(MouseEvent.ROLL_OUT, themeClicked.rollOut); //...and its rollOut eventListener is removed
Step 27: themeClick() Filter XML
The next part of this function will filter the content of the list to just the elements from the theme you selected:
//loop goes through the themeButtons array
for (i=0; i< themeButtons.length; i++)
{
//if the name of the themeButton you clicked on matches the current item in the array
if (e.currentTarget.name == themeButtons[i].name)
{
//we make picsList contain all the <pic> elements from that theme
picsList = new XMLList(list[i].pic);
}
}
Step 28: themeClick() Removal
If the smallPicsMc contains any items (that is, you've already clicked on some theme), we remove them all.
if (smallPicsMc.numChildren != 0)
{
for(i=smallPicsMc.numChildren; i>0; i--)
{
smallPicsMc.removeChildAt(i-1);
}
}
Step 29: themeClick() Filling the Arrays
If the selected theme has at least one picture, we fill the source arrays and the titles array and load the thumbs.
if (picsList.length() > 0)// if the picsList XMLList has at least 1 element in it
{
//we create new arrays
//(if they have already been created, we clear their contents)
smallPicSource = new Array();
bigPicSource = new Array();
smallPics = new Array();
picTitles = new Array();
//loop through picsList
for(i=0; i< picsList.length(); i++)
{
//now we create the source path of the images
smallPicSource[i] = "pics/small/" + e.currentTarget.name +"/" + picsList.@filename[i];
bigPicSource[i] = "pics/big/" + e.currentTarget.name +"/" + picsList.@filename[i];
//put the titles in the picTitles array
picTitles[i] = picsList.@title[i];
}
j = -1;
//this will eventually load the small pics
smallPicLoad(null);
Step 30: themeClick() Dealing With Empty Themes
If the selected theme doesn't have any pictures in it, we tell the user that it's coming soon.
else
{
//if img had a picture in it...
if(img.numChildren > 0)
{
img.removeChildAt(0); //...we remove it
}
//then we write, instead of the title, that this theme is coming soon
titleTxt.text = "Coming soon...";
}
Step 31: The slideSmallPics Function
This function does the same as the slideTheme function, but with smallPicsMc instead of the themes MC.
protected function slideSmallPics(e:MouseEvent):void
{
if(mouseY>470 && mouseY< 600){
ratio = smallPicsMc.width/850;
if(smallPicsMc.width > 900)
{
Tweener.addTween(smallPicsMc, {x: (450-smallPicsMc.width/2)-(mouseX-450)*ratio, time: 1});
}
else
{
Tweener.addTween(smallPicsMc, {x: (450-smallPicsMc.width/2), time: 1});
}
}
}
Step 32: The smallPicLoad function
This function loads the thumbs in the smallPics array and displays the loading process.
protected function smallPicLoad(e:Event):void
{
if (j < smallPicSource.length-1)
{
j++;
//it tells the user which thumbs are loading now
loadTxt.text = "Loading thumbs: " + (j+1).toString() +" / " + (smallPicSource.length).toString();
//creates a Loader object in the array
smallPics[j] = new Loader();
//loads the next element of the smallPicSource array
smallPics[j].load(new URLRequest(smallPicSource[j]));
//if it's loaded, call this function again
smallPics[j].contentLoaderInfo.addEventListener(Event.COMPLETE, smallPicLoad);
}
else
{
//if all of the elements of the array are loaded, call the smallPicComplete function
smallPicComplete();
}
}
This is kind of tricky so I'll give a more detailed explanation. It loads the thumbnails one by one; it's like a loop but I do the looping 'manually', almost recursively. This solution was needed because I wanted the thumbnails to appear at the same time. Recall that we set the visibility of the smallPicsMc to false, previously, so that we could reveal the thumbnails together.
[/sourcecode]
Step 33: smallPicComplete() Loading Pictures
First we have two other non-local variables to declare:
var bigClicked:String;//the source of the big picture var cpi:uint;//it stands for CurrentPictureIndex: it's the index of the picture which is shown
This is the first part of the function in which we load the first big picture, then fill the smallPicButtons array and the smallPicsMc.
protected function smallPicComplete(e: Event = null):void
{
bigClicked = bigPicSource[0];//sets the source of the big picture to the first one in the array
loadPic(bigPicSource[0]);//calls the loadPic function with the same parameter
cpi = 0;
var smallPicButtons:Array = new Array();//this will store the created smallPicButtons
for(i=0; i< smallPics.length; i++)
{
smallPicButtons[i] = new SmallPicButton();//we create a new instance of the SmallPicButton object in the smallPicButtons array
smallPicButtons[i].addChild(smallPics[i]);//we put the matching element of the smallPics array to the smallPicButtons array
if (i>0)
{
smallPicButtons[i].x = smallPicButtons[i-1].x+smallPicButtons[i-1].width+20;//beginning with the second element, we place them in a line as we did it with the themeButtons
}
smallPicButtons[i].data = bigPicSource[i]; //we set its data property to the source of the big image (so that we can use it as a link)
smallPicsMc.addChild(smallPicButtons[i]); //we add the button to the smallPicsMc
smallPicButtons[i].addEventListener(MouseEvent.CLICK, click);// we add a click eventListener to that button
}
Step 34: smallPicComplete() Revealing Thumbs and Arrows
This is the second half of this function. Here we reveal the thumbnails and the navigation arrows (and set them to ready to be navigate).
smallPicsMc.visible = true; //we set the visibility back to true
smallPicsMc.alpha = 0; //...but we set its alpha to 0%, so that we can do a little fade-in animation
Tweener.addTween(smallPicsMc, {alpha:1, time:1}); //we fade in the smallPicsMc
stage.addEventListener(MouseEvent.MOUSE_MOVE, slideSmallPics); //...then add the mouseMove event listener to it
nextArrow.addEventListener(MouseEvent.CLICK, nextPic); //add a click event listener to the navigation arrows (nextPic, prevPic functions will be explained later)
prevArrow.addEventListener(MouseEvent.CLICK, prevPic);
prevArrow.visible = false; //since we're about to reveal the first picture there won't be a previous one, so we don't need the prevArrow yet
nextArrow.visible = true; //we do need the nextArrow though
prevArrow.buttonMode = true;
nextArrow.buttonMode = true;
After commenting the lines where we call a function we haven't written yet, you will be able to test your movie, click on the theme buttons and have the thumbnails show up and sliding.
Step 35: The nextPic Function
This function loads the next picture in the row. It's triggered by clicking the nextArrow.
protected function nextPic(e:Event = null):void
{
if (cpi < bigPicSource.length-1)//if there is one more picture in the bigPicSource array
{
cpi++;
loadPic(bigPicSource[cpi]); //load next pic
}
}
Step 36: The prevPic Function
This function loads the previous picture in the row. It's the reverse of the nextPic function, and triggered by clicking the prevArrow.
protected function nextPic(e:Event = null):void
{
if (cpi > 0)//if it's not the first picture we want to load
{
cpi--;
loadPic(bigPicSource[cpi]); //load previous pic
}
}
Step 37: The click Function
Another non-local variable to declare:
var bigPic:String; //this will store the source path of the big image
This is the function called by clicking on a thumbnail:
protected function click(e:MouseEvent):void
{
//if this picture is not the same as shown already
if (bigClicked != e.currentTarget.data)
{
if(img.numChildren > 0) //if there is already something in the img MC
{
img.removeChildAt(0); //we remove it
}
titleTxt.text = ""; //we set the title text field to empty
//we store the source path of the big picture of the thumbnail
bigClicked = e.currentTarget.data;
bigPic = e.currentTarget.data;
loadPic(bigPic); //pass the source path of the big pic to loadPic()
}
}
Step 38: loadPic() Clearing the Old
This function loads a big picture and takes care of the navigation arrows.
First we need to declare a Loader that will load the picture...
var bigLoader:Loader; //this will load the big picture
...and now, the actual function:
protected function loadPic(bigPic):void
{
if(img.numChildren > 0) //if this is not the first picture we load
{
img.removeChildAt(0); //we clear the previous one
}
titleTxt.text = ""; //and clear the title too
Step 39: loadPic() Loading the Image
Then we create the Loader object, start the loading, and add some listeners.
bigLoader = new Loader(); //we create the Loader object bigLoader.load(new URLRequest(bigPic)); //we start to load the big picture -- remember bigPic contains the source path of the big image bigLoader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, progress); //call progress() whenever a bit more is loaded bigLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, bigLoadComplete); //and if the big picture is loaded we call the bigLoadComplete function
Step 40: loadPic() Figure Out Image's Index
Here we select the right index of the image we loaded. This is important because cpi tells us what picture we're at, and what title to show.
for (i=0; i< bigPicSource.length; i++)
{
if (bigPic == bigPicSource[i]) //if the source path of the images match
{
cpi = i; //we set the cpi to that index
}
}
Step 41: loadPic() Display or Hide Nav Arrows
Whether the navigation arrows are hidden or revealed depends on the value of cpi.
if (cpi > 0) //if this is not the first picture prevArrow.visible = true; //we show the prevArrow if (cpi == 0) //if this is the first picture prevArrow.visible = false; //we hide it if (cpi == bigPicSource.length-1) //if this is the last one nextArrow.visible = false; //we hide the nextArrow if (cpi < bigPicSource.length-1) //if this is not the last one nextArrow.visible = true; //we reveal it
Step 42: The Load Progress Handler
This function is executed whenever a new chunk of the picture is loaded.
protected function progress(e: ProgressEvent): void
{
//we write the percentage of the loading progress into the loadTxt dynamic textfield
loadTxt.text = "Loading picture: " + Math.floor((e.bytesLoaded / e.bytesTotal) * 100) + "%";
}
Step 43: bigLoadComplete() Setup
The first thing this function does is set the contents of the text fields, and then set and get some properties of the loaded image.
protected function bigLoadComplete(e:Event):void
{
//the loading has ended and we don't need this text till the next loading
loadTxt.text = "";
//we use cpi to get the title that belongs to this picture
titleTxt.text = picTitles[cpi];
//we create a new bitmap object, and we put the picture in it
var bitmap:Bitmap = e.target.content;
bitmap.smoothing = true;
var origWidth:Number = bitmap.width;
var origHeight:Number = bitmap.height;
Step 44: bigLoadComplete() More Variables
We create some new variables so that we can resize the picture properly. They should go inside the bigLoadComplete() function.
var maxWidth = 840; //the width var maxHeight = 420; //and the height of the space where we want to place the picture // -- it depends on your layout //these will store the new size of the image var newWidth:Number; var newHeight:Number; //this variable is the ratio of the sides of the image //we will do the resizing with the help of this ratio var ratio:Number = origWidth / origHeight;
Step 45: bigLoadComplete() Set Picture Size
This part will set the new size of the picture.
//if one of the sides of the picture is longer than the space
if (origWidth > maxWidth || origHeight > maxHeight)
{
//if the width-difference is bigger then the height-difference (portrait)
if (maxWidth - origWidth > maxHeight - origHeight)
{
newHeight = maxHeight; //we set the height to the maximum
newWidth = Math.round (newHeight * ratio); //then we set the length of the other side accordingly
}
else //if the orientation is landscape or shaped like a square
{
newWidth = maxWidth; //we set the width to the maximum
newHeight = Math.round(newWidth / ratio); //then we set the length of the other side
}
}
else //if the picture is smaller then the space
{
//the new size will be the same as the original
newHeight = origHeight;
newWidth = origWidth;
}
Step 46: bigLoadComplete() Reveal the Image
We set the properties of the bitmap, then reveal it on the stage.
bitmap.width = newWidth; //set the resized width
bitmap.height = newHeight; //and height of the image
bitmap.x = -bitmap.width/2; //we set the x
bitmap.y = -bitmap.height/2; //and y coordinates
//(since the img MC is in the center we should align the bitmap to the center of the MC)
img.addChild(bitmap); //we put the bitmap in the MC
img.alpha = 0; //we set the alpha of the img MC to 0% so that we can fade it in
Tweener.addTween(img, {alpha:1, time:1}); //we fade in the img MC
Conclusion
All right! We're done now! I hope you could understand the ideas in this tut (and enjoyed it too).
Thank you for reading!
Finally here comes the entire code:
package {
import flash.display.*;
import flash.events.*;
import flash.net.*;
import flash.text.*;
import flash.xml.*;
import caurina.transitions.*;
public class Gallery extends MovieClip
{
var urlLoader:URLLoader = new URLLoader();
var xml:XML;
var list:XMLList;
var picsList:XMLList;
var themeButtons:Array = new Array();
var themeClicked:MovieClip = new ThemeButton();
var i:int;
var j:int;
var smallPicSource:Array;
var bigPicSource:Array;
var smallPics:Array;
var picTitles:Array;
var bigLoader:Loader;
var bigPic:String;
var bigClicked:String;
var cpi:uint;
var ratio:Number
public function Gallery():void
{
urlLoader.load(new URLRequest("pics.xml"));
urlLoader.addEventListener(Event.COMPLETE, urlLoadComplete);
stage.addEventListener(MouseEvent.MOUSE_MOVE, slideTheme);
}
protected function urlLoadComplete(e:Event):void{
xml = new XML(urlLoader.data);
list = new XMLList(xml.children());
for(i = 0; i 0)
img.removeChildAt(0);
titleTxt.text = "";
if (themeClicked != null){
themeClicked.alpha = 0.5;
themeClicked.addEventListener(MouseEvent.ROLL_OUT, themeClicked.rollOut);
}
themeClicked = MovieClip(e.currentTarget);
themeClicked.alpha = 1;
themeClicked.removeEventListener(MouseEvent.ROLL_OUT, themeClicked.rollOut);
for (i=0; i0; i--)
smallPicsMc.removeChildAt(i-1);
}
if (picsList.length() > 0)
{
smallPicSource = new Array();
bigPicSource = new Array();
smallPics = new Array();
picTitles = new Array();
for(i=0; i 0)
img.removeChildAt(0);
titleTxt.text = "Coming soon...";
}
}
}
protected function smallPicLoad(e:Event):void
{
if (j < smallPicSource.length-1)
{
j++;
loadTxt.text = "Loading thumbs: " + (j+1).toString() +" / " + (smallPicSource.length).toString();
smallPics[j] = new Loader();
smallPics[j].load(new URLRequest(smallPicSource[j]));
smallPics[j].contentLoaderInfo.addEventListener(Event.COMPLETE, smallPicLoad);
}else
{
smallPicComplete();
}
}
protected function smallPicComplete(e: Event = null):void{
bigClicked = bigPicSource[0];
loadPic(bigPicSource[0]);
cpi = 0;
var smallPicButtons:Array = new Array();
for(i=0; i0)
smallPicButtons[i].x = smallPicButtons[i-1].x+smallPicButtons[i-1].width+20;
smallPicButtons[i].data = bigPicSource[i];
smallPicsMc.addChild(smallPicButtons[i]);
smallPicButtons[i].addEventListener(MouseEvent.CLICK, click);
}
smallPicsMc.visible = true;
smallPicsMc.alpha = 0;
Tweener.addTween(smallPicsMc, {alpha:1, time:1});
stage.addEventListener(MouseEvent.MOUSE_MOVE, slideSmallPics);
nextArrow.addEventListener(MouseEvent.CLICK, nextPic);
prevArrow.addEventListener(MouseEvent.CLICK, prevPic);
prevArrow.visible = false;
nextArrow.visible = true;
prevArrow.buttonMode = true;
nextArrow.buttonMode = true;
}
protected function nextPic(e:Event = null):void
{
if (cpi < bigPicSource.length-1)
{
cpi++;
loadPic(bigPicSource[cpi]);
}
}
protected function prevPic(e:Event = null):void
{
if (cpi > 0)
{
cpi--;
loadPic(bigPicSource[cpi]);
}
}
protected function loadPic(bigPic):void
{
if(img.numChildren > 0)
img.removeChildAt(0);
titleTxt.text = "";
bigLoader = new Loader();
bigLoader.load(new URLRequest(bigPic));
bigLoader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, progress);
bigLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, bigLoadComplete);
for (i=0; i 0)
prevArrow.visible = true;
if (cpi == 0)
prevArrow.visible = false;
if (cpi == bigPicSource.length-1)
nextArrow.visible = false;
if (cpi < bigPicSource.length-1)
nextArrow.visible = true;
}
protected function progress(e: ProgressEvent): void {
loadTxt.text = "Loading picture: " + Math.floor((e.bytesLoaded / e.bytesTotal) * 100) + "%";
}
protected function bigLoadComplete(e:Event):void{
loadTxt.text = "";
titleTxt.text = picTitles[cpi];
var bitmap:Bitmap = e.target.content;
bitmap.smoothing = true;
var origWidth:Number = bitmap.width;
var origHeight:Number = bitmap.height;
var maxWidth = 840;
var maxHeight = 420;
var newWidth:Number;
var newHeight:Number;
var ratio:Number = origWidth / origHeight;
if (origWidth > maxWidth || origHeight > maxHeight)
{
if (maxWidth - origWidth > maxHeight - origHeight)
{
newHeight = maxHeight;
newWidth = Math.round(newHeight * ratio);
}else
{
newWidth = maxWidth;
newHeight = Math.round(newWidth / ratio);
}
}else
{
newHeight = origHeight;
newWidth = origWidth;
}
bitmap.width = newWidth;
bitmap.height = newHeight;
bitmap.x = -bitmap.width/2;
bitmap.y = -bitmap.height/2;
img.addChild(bitmap);
img.alpha = 0;
Tweener.addTween(img, {alpha:1, time:1});
}
protected function click(e:MouseEvent):void
{
if (bigClicked != e.currentTarget.data){
if(img.numChildren > 0)
img.removeChildAt(0);
titleTxt.text = "";
bigClicked = e.currentTarget.data;
bigPic = e.currentTarget.data;
loadPic(bigPic);
}
}
protected function slideSmallPics(e:MouseEvent):void
{
if(mouseY>470 && mouseY< 600){
ratio = smallPicsMc.width/850;
if(smallPicsMc.width > 900)
{
Tweener.addTween(smallPicsMc, {x: (450-smallPicsMc.width/2)-(mouseX-450)*ratio, time: 1});
}
else
{
Tweener.addTween(smallPicsMc, {x: (450-smallPicsMc.width/2), time: 1});
}
}
}
protected function slideTheme(e:MouseEvent):void
{
if(mouseY>470 && mouseY< 600){
ratio = themes.width/850;
if(themes.width > 900)
{
Tweener.addTween(themes, {x: (450-themes.width/2)-(mouseX-450)*ratio, time: 1});
}
else
{
Tweener.addTween(themes, {x: (450-themes.width/2), time: 1});
}
}
}
}
}
Envato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!
Translate this post
