Gallery 102 by CyanBlue
Gallery 102
Gallery 101 + ScrollPane Component
by CyanBlue
 
This is the version that I have added a Flash MX ScrollPane compoenent on top of the previous Gallery 101 file where you can add more images.
 
Just reciting what I have said on Gallery 101 tutorial. The same thing applies to this tutorial as well.
  • We already know the names of the image files and the thumbnail files. (If you don't know, that means that you are getting the names from the outside source which could be flat file, XML file or any other server side script that feeds the data to the Flash file. But I do not want to go over that far.)
  • Image files are located in the same directory as the Flash movie file is and they are all in the same size. (That means that we are not going to resize any image to fit into the dimension we have.)
Take a look at the final version so that you will have better idea on what you need to do.
 
 

FlashVacuum Flash ActionScript Tutorial CyanBlue subQuark JT

You do not have the Flash plugin installed, or your browser does not support Javascript.

  
 
Still pretty much the same as the Gallery 101, right? Hope you still remember what you needed to learn from the previous one.
 
Okay, let's tackle it process by process, but I am going to omit what I have said in Gallery 101 tutorial. If you don't understand the part that I am not mentioning, you probably will be able to find it in the previous tutorial.
 
1. Preparation
 
Image file names : image0.jpg, image1.jpg, image2.jpg, ... , image17.jpg, image18.jpg, image19.jpg
Thumbnail file names : image0_tn.jpg, image1_tn.jpg, image2_tn.jpg, ... , image17_tn.jpg, image18_tn.jpg, image19_tn.jpg
 
Okay, the same drill. We are going to define an array, image_arr, that will hold the name of the image files. We just assigned the names as a string last time, but we are going to use the for loop this time since we have many image files that are in sequential order. (Usually it is very easy to name the image files this way so that you can get rid of any possible problem. Besides that, you only need to change the '20' in line 2 if you ever need to change the number of the images.) 
  1. image_arr = new Array();
  2. maxImages = 20;
  3. for (var i = 0 ; i < maxImages ; i++)
  4. {
  5. 	image_arr.push("image" + i);
  6. }
 
I am introducing two more variables here. 'gap' is used to give some spaces between the thumbnails and the 'topY' is used to move the overall Y location of the gallery. 
  1. gap = 10;
  2. topY = 65;
 
This part is the most important change from the previous tutorial. I had this thumb0_mc, thumb1_mc, thumb2_mc on the main time line last time, but those movieClips are going to be housed within this thumb_mc movieClip. I have to do that because I can only assign one movieClip into the ScrollPane component. That movieClip can contain many other contents in it, but it has to be only one that I need to assign to the ScrollPane. 
  1. this.createEmptyMovieClip("thumb_mc", theDepth++ + 10000);
 
The last part of this preparation process is to place the ScrollPane component into the Stage where we are going to put the list of the thumbnails into. (This tutorial is written for Flash MX not Flash MX 2004, so you will need to replace the functions that I am using to Flash MX 2004 specific ones if you need to use FMX 2004/AS 2.0.) 
  1. this.attachMovie("FScrollPaneSymbol", "thumb_sp", 1000, {_x:25, _y:topY});
  2. this.thumb_sp.setSize(100 + gap + 16 + gap / 2, 200);
  3. this.thumb_sp.boundingBox_mc._alpha = 0;
Line 1   this.attachMovie("FScrollPaneSymbol", "thumb_sp", 1000, {_x:25, _y:topY});
  This is the actual command that attaches the ScrollPane instance from the library.
 
  A requirement to get this script to work
You will have to have a ScrollPane in the library. To do so, what you need to do is to open up the Component panel from the menu(Window -- Component), select the ScrollPane from the library, drag it to the stage, select the component on the stage, and delete it by hitting the Delete key.
By doing so, you are deleting the visual copy, but the ScrollPane componet is now available in the library.
 
  Open up the library(Window -- Library) and see if you have a folder called 'Flash UI Component', and in that folder, you should be able to find the item called 'ScrollPane'. Right click on that 'ScrollPane' and select 'Linkage' from the context menu. You should be able to see 'FScrollPaneSymbol' in there, and that's what I am using in this line to attach it onto the stage. See the _y property that I am setting with the variable topY? Now, I don't have to change this line whenever I need to move the Gallery vertically. You can also create another variable and assign it to _x if you wish to.
Line 2   this.thumb_sp.setSize(100 + gap + 16 + gap / 2, 200);
  Basic math. 100 being the width of two thumbnail images(50 each), gap being the 10 I have defined previously, 16 being the width of the scrollTrack, and gap / 2 being the space that I want to have between the scrollTrack and the second column of the thumbnail images.
Line 3   this.thumb_sp.boundingBox_mc._alpha = 0;
  Here I am setting the border of the ScrollPane component to be not visible. If you want to know more about customizing the component, check out the Flash manual. (Using Flash > Using Components > Customizing component skins)
 
Some cosmetic changes to customize the ScrollPane component.(Check this section from the Flash manual for more information. Using Components > Customizing component colors and text > Changing the properties of specific components) 
  1. this.thumb_sp.setStyleProperty("arrow", 0x800080);
  2. this.thumb_sp.setStyleProperty("scrollTrack", 0x88BBFF);
  3. this.thumb_sp.setStyleProperty("face", 0x99CCFF);
 
2. Thumbnails
 
The first thing you will notice is that some scripts gotten shorter alot. That's because I have one more variable called _mc in line 1 and I am referencing it many times. It's normally a good idea to create a variable reference to the movieClip when you are use often that is not in the same timeline. That should give you abit faster response time from the application because you are accessing the variable in the same time line rather than navigating two levels up every time you need the value. 
  1. var _mc = this._parent["thumb" + this.no + "_mc"];
  2. var l = _mc.getBytesLoaded();
  3. var t = _mc.getBytesTotal();
  4. if ((l >= t) && (t > 1) && (_mc._width > 1))
  5. {
  6. 	_mc.num = this.no;
  7. 	_mc.onPress = function()
Line 1   var _mc = this._parent["thumb" + this.no + "_mc"];
  This line is the key line where I am defining the variable _mc to the actual movieClip that I am looking for.
Line 2 - 7   The rest of the lines show you how I am using that _mc reference. It's very easy to write and to understand.
 
Every other thing in this Thumbnail section is pretty much the same as the previous tutorial. The difference #1 is that I am using 'this.thumb_mc' instead of 'this' to accomodate the path change, and the difference #2 is this block of code that assigns the updated thumb_mc into the ScrollPane component instance so that the new thumbnail can be dispalyed as soon as it is fully loaded. 
  1. this._parent._parent.thumb_sp.setScrollContent(this._parent);
  2. this._parent._parent.thumb_sp.refreshPane();
Line 1   this._parent._parent.thumb_sp.setScrollContent(this._parent);
  This line gets executed only when the thumbnail image is fully loaded. So, I assign this._parent, which is the thumb_mc movieClip, to the scrollPane so that the thumbnail can be displayed in the ScrollPane.
Line 2   this._parent._parent.thumb_sp.refreshPane();
  Don't forget to use the 'refreshPane()' function whenever you make the change.
 
3. Image Loading
 
Well, see if you can find the difference between this function and the previous tutorial. I am sure it's really hard to find the difference unless you have really good eyes.
Okay. All I have is the cosmetic change to accomodate the widened thumbnail section. That's all. 
  1. this["img" + currentHolder + "_mc"]._x = 175;
  2. ...
  3. this._parent["img" + currentHolder + "_mc"]._y = topY;
 
Well. That's about it. You should be able to understand what I did with no problem if you have followed the previous tutorial and this one.
 
Please post the question to the forum if you have any or if you have suggestion/correction.
 
Download the file from here : Gallery102.zip
 
   |      |      |      |   Last Modified: July 17, 2009 @ 4:25 am