Please support lukamaras.com website:
All my tutorials are free, while hosting costs money.
The most viewed tutorials in April:
12.11. Creating the scrolling functionality for the gallery sections menu
I have made an example just for the purpose of showing you how the menu will look like when there are plenty of sections inside it. The section buttons in the example below are not clickable, but the menu is perfectly scrollable. Click on the down button to try it and then the up button when it appears!
The big function that follows, enableGalleryNavigation(), is made of two main parts: the definitions of onPress event handler functions for the two buttons that serve for scrolling the menu: menuDown and menuUp. Just as a reminder, here is a screenshot of these two buttons:
function enableGalleryNavigation():Void {
menuDown.onPress = function() {
if (firstLook) {
menuUp._alpha = 100;
menuUp.enabled = true;
var firstLook:Boolean = false;
}
var menuTop:Number = menuButtons._height-Math.abs(menuButtons._y);
if (menuButtons._y<=0 && menuTop>=galleryMask._height) {
var targetPos:Number = menuButtons._y-galleryMask._height;
menuDown.enabled = false;
menuUp.enabled = false;
menuButtons.onEnterFrame = function():Void {
menuButtons._y += (targetPos-menuButtons._y)/menuSpeed;
if (menuButtons._y<=(targetPos+0.8)) {
menuButtons._y = Math.round(targetPos);
delete menuButtons.onEnterFrame;
menuDown.enabled = true;
menuUp.enabled = true;
}
};
}
};
menuUp.onPress = function() {
var menuTop:Number = menuButtons._height-Math.abs(menuButtons._y);
if (menuButtons._y<0 && menuTop>0) {
var targetPos:Number = menuButtons._y+galleryMask._height;
menuDown.enabled = false;
menuUp.enabled = false;
menuButtons.onEnterFrame = function():Void {
menuButtons._y += (-menuButtons._y+targetPos)/menuSpeed;
if (menuButtons._y>=(targetPos-0.8)) {
menuButtons._y = Math.round(targetPos);
delete menuButtons.onEnterFrame;
menuDown.enabled = true;
menuUp.enabled = true;
}
};
}
};
}
Let's see how the functionality of the menuDown button is set up. To understand what is going on inside the function, keep in mind the following facts:
menuDown.onPress = function() {
if (firstLook) {
menuUp._alpha = 100;
menuUp.enabled = true;
firstLook = false;
}
var menuTop:Number = menuButtons._height-Math.abs(menuButtons._y);
if (menuButtons._y<=0 && menuTop>=galleryMask._height) {
var targetPos:Number = menuButtons._y-galleryMask._height;
menuDown.enabled = false;
menuUp.enabled = false;
menuButtons.onEnterFrame = function():Void {
menuButtons._y += (targetPos-menuButtons._y)/menuSpeed;
if (menuButtons._y<=(targetPos+0.8)) {
menuButtons._y = Math.round(targetPos);
delete menuButtons.onEnterFrame;
menuDown.enabled = true;
menuUp.enabled = true;
}
};
}
};
The first thing inside the event handler function is an if conditional statement which serves only to activate the menuUp button. If you remember, the menuUp button is invisible in the beginning, to avoid confusing the user. Once the menuDown button has been clicked, its counterpart will appear and the if statement will never be used again, because the condition will yield as false.
if (firstLook) {
menuUp._alpha = 100;
menuUp.enabled = true;
firstLook = false;
}
The condition if (firstLook) translates as if (firstLook == true). And when the menuDown button has been clicked for the first time, this condition will yield as true, because the value of the variable firstLook has been set as true at the very beginning of your code (when all the variables were defined).
So, the code between the curly braces, { and }, will be run. It restores the button's alpha (transparency) property to 100, meaning full opaqueness. After that, the button is enabled (it can be clicked).
menuUp._alpha = 100;
menuUp.enabled = true;
After that, the variable firstLook is set to false and that's why the if statement will be ignored every subsequent time that the menuDown button is clicked: the other button has appeared and that's it.
firstLook = false;
Next, the menuTop variable is defined. Keep in mind that the menuButtons variable is the shortcut for the buttonsHolder_mc movie clip, which is itself situated inside the galleryMenu_mc movie clip. So, the menuButtons movie clip is the one into which all the gallery section buttons were attached from the Library.
var menuTop:Number = menuButtons._height - Math.abs(menuButtons._y);
The value of the menuTop variable is the lowest point of your menu, all section buttons included. I called it menuTop because the Y coordinate values increase when going down, that's why. This value is obtained by substracting the absolute value (meaning the number itself, whether positive or negative, it will be converted to a positive value) of the vertical position (_y) of the menuButtons movie clip from its height. This value will be used to scroll the menu (to move it) properly, without fear that it will disappear by going off the stage etc.
Next comes an if conditional statement that checks for two things:
menuButtons._y <= 0) andmenuTop >= galleryMask._height).if (menuButtons._y <= 0 && menuTop >= galleryMask._height) {
These two conditions ensure that:
So, if these conditions have been met, the menu will be scrolled down, thanks again to an onEnterFrame event handler function and a few variables defined before it is executed. The variable that gets defined is the following:
var targetPos:Number = menuButtons._y - galleryMask._height;
The targetPos variable is a reference point up to which the menu will be scrolled. Think of it as an anchor towards which the menu is pulled. Its value is obtained by substracting the height of the mask from the position of the menu buttons. It makes sense: you have to scroll your menu by the height of its mask, so that each time the buttons below the current ones appear.
Next, both buttons that serve for scrolling the menu (menuDown and menuUp) are disabled just before the scrolling begins. You don't want your menu to be moved up and down without control — it is best to lock it until it has reached the targetPos coordinate.
menuDown.enabled = false;
menuUp.enabled = false;
And now comes the onEnterFrame event handler:
menuButtons.onEnterFrame = function():Void {
menuButtons._y += (targetPos-menuButtons._y)/menuSpeed;
if (menuButtons._y<=(targetPos+0.8)) {
menuButtons._y = Math.round(targetPos);
delete menuButtons.onEnterFrame;
menuDown.enabled = true;
menuUp.enabled = true;
}
};
The code line that makes the menu move is the one that adds a value to the menuButtons' Y coordinate each time the onEnterFrame event is fired:
menuButtons._y += (targetPos-menuButtons._y)/menuSpeed;
Remember that the addition assignment operator (+=) adds the value on its right side to the cuurent value of the variable on its left side. And what's added is the result of substracting the position of the menu section buttons from the target position point, divided by menu speed. As the menu approaches the target position, the distance is smaller each time and there you have the easing effect. Remember that the lower the value of menuSpeed, the quicker the menu will move. I found 6 to be an optimal value in combination with the speed of the SWF, which was set to 30 fps at the beginning.
And each time the menu approaches the target point, a check must be made to see if the point in question has actually been reached. This is done through an if conditional statement, of course.
if (menuButtons._y <= (targetPos+0.8)) {
The if conditional checks if the menuButtons movie clip's vertical position is lesser than or equal to (<=) the target position plus 0.8 pixels (targetPos+0.8). You have to make this so as a safeguard against waiting too long for the menu to reach the target position. This easing method is described in more detail in my sliding image mask tutorial.
And, once that condition is fulfilled (meaning that the menu has reached the target position), its position is fixed in place by setting it definitely to the rounded targetPos value. I recommend that you always do that in cases like this, because objects placed on round pixels are rendered much better than in other cases. Well, Flash 8 renders graphics greatly, but ensuring this with round coordinates doesn't hurt.
menuButtons._y = Math.round(targetPos);
Then, of course, you should delete the onEnterFrame event handler, because it has fulfilled its purpose and it is good to take load of the user's computer processor.
delete menuButtons.onEnterFrame;
After that, the buttons for scrolling the menu up and down are enabled again.
menuDown.enabled = true;
menuUp.enabled = true;
As for the onPress event handler function that serves to enable scrolling the menu up, the differences are only in the conditions and some other details.
menuUp.onPress = function() {
var menuTop:Number = menuButtons._height-Math.abs(menuButtons._y);
if (menuButtons._y<0 && menuTop>0) {
var targetPos:Number = menuButtons._y+galleryMask._height;
menuDown.enabled = false;
menuUp.enabled = false;
menuButtons.onEnterFrame = function():Void {
menuButtons._y += (-menuButtons._y+targetPos)/menuSpeed;
if (menuButtons._y>=(targetPos-0.8)) {
menuButtons._y = Math.round(targetPos);
delete menuButtons.onEnterFrame;
menuDown.enabled = true;
menuUp.enabled = true;
}
};
}
};
The main if conditional statement checks if the position of menu buttons movie clip is lesser than zero and if the lower edge point of the menu buttons movie clip is greater than zero. This time, the target position is determined by adding the height of the mask to the menuButtons' current position.
Congratulations on going through to the end of this tutorial and learning very much about ActionScript! I am glad that you have followed me until the end. There are some things I want to tell you.
First, this gallery is modular, expandable and pretty powerful. Of course, it could have been done in many other ways: having many thumbnails in each section instead of a maximum of 20, scrolling thorough thumbnails etc. But that would be another gallery.
The main purpose of my tutorial is to teach you to build a powerful dynamic image gallery by combining ActionScript and XML so that you can also build other galleries, which will have different interfaces and menus. I wanted you to show how to handle the main elements of such image galleries: XML, preloading, navigation, visual effects, etc. I hope that you have learned much and that you will use the knowledge in other galleries and create cool Flash websites.
Note also that if you are going to have many, many images (let's say, about 100 sections), the XML file is going to be heavy. In that case, you will need to preload the XML too, using the XML object's getBytesLoaded and getBytesTotal methods. Also, note that in this tutorial's code I have limited the number of pictures to 1000. This is more than enough for any practical purposes. If you need even more than that, just change the if/else if/else statement inside the enableButtons function.
I have invested much time, energy and work into the creation of this tutorial, because I want you to learn to create cool an amazing stuff in Flash, for free, and with as clear and detailed explanations as possible! Were it printed inside a paper book, the tutorial would be more than 80 pages long! And it's free.
If you find it useful, please consider making a donation. Your donations will ensure the creation of other tutorials like this one. The PayPal donation button can be found below. If you can't make a donation, you can still contribute by linking to my website. If you have a blog or some other website, link to my site, I will appreciate it very much.
As for any questions considering this tutorial, please remember that I am not answering any such questions by e-mail. Register at the forums and post your question there, in the appropriate category. Thank you! You can download the source files for this lesson below, comprising the entire folder structure (without the images, of course). See you in other ActionScript tutorials!
