Creating an Advance Flash Image Gallery - Page 5

In this section of our tutorial we will define the size of our gallery by masking it and then will make it scroll around using math and a conditional. The outline of this section is as follows:

1. Create a function to create a container for the mask.
2. Use the Drawing API to draw the mask in the container using the dimensions we extracted from the XML file.
3. Apply the mask using the .setMask method.
4. Create a function to scroll the gallery vertically using Cosine and an if conditional.

We are going to do the mask first and then work on the scrolling part.

Creating and Applying the Mask

The dimensions of our gallery will be determined by the mask that will cover it, we will draw this mask using the ActionScript Drawing API. The code will be written as a function to be called from within the .onLoad event handler property just like the callThumbs() function.

Our code will be executed through a createMask() function that we will place at the bottom of our existing code.

Our mask must be held within a container movie clip, we will call this movie clip mask_mc. Our mask should be placed right on top of our gallery, so we will use the same values we used for positioning our main gallery container, namely, _root.gallery_x and _root.gallery_y.

We do not have a tutorial on the Drawing API yet on Oman3D, but the basic idea is that you select a fill colour and then use a .lineTo method to draw a line from one point to another. Our variables are used as the targets of our lines, we are going to create a box that will be drawn using the .lineTo method this way:

The diagram above can be translated into the code below:

Our mask is now ready, we can apply it to our gallery container using the .seMask method:

The code of createMask function is now ready, we can execute this function from within our .onLoad event handler property by typing the name of the function after our callThumbs() function:

That should do it, you can now test your movie to see your gallery shrunk down.

Creating the Scrolling Function

We will now write the code to make our gallery scroll vertically according to where the mouse is. We are going to use the same code concept we used in our other Image Gallery tutorial but through a scrolling() function. We are going to detect the location of the mouse pointer away from the tip of our gallery and then apply that value to a cosine graph.

If we treat the _x axis in the cosine wave graph as a _y mouse position and the _y axis as the amount by which the gallery has to move, we can create a positive smooth scrolling movement on the first half of the graph and smooth negative scrolling movement on the second half of the graph. I am sorry if this sounds to complicated, but you can easily use this formula without necessarily understanding the math behind it. It is worth mentioning that the gallery container_mc is the object that needs to be scrolled, while the mask_mc is used to track the position of the mouse, we do this because the mask_mc does not move, while the container_mc will be moving. We cannot use a the mouse position of a moving object because that value will be changing all the time making it impossible to use in our formula..

Our code will be executed through a scrolling() function that we will have to type at the end of all of our existing code.

Oman3D recommends the book Foundation ActionScript 3.0 - Making Things Move by Keith Peters for anyone wishing to learn ActionScript animation. This book explains in detail all techniques and method for creating complex animations in simple terms for mathematician and non-mathematicians alike. Check it out at Amazon.com.

Using our code above the way it is will make our gallery run through to the top or bottom of our Flash movie without stopping at the boundaries of our gallery. To avoid this from happening we will add two conditionals to revert our gallery to where it should be position if it goes beyond any of its boundaries.

Our scrolling() is now ready, we can call it from within the .onLoad event handler property right below our callThumbs() and createMask() functions.

You can now test your movie to see your gallery scrolling around smoothly.

Summary of This page

1. Created and applied a mask to our gallery container_mc.
2. Used the cosine graph to scroll our gallery smoothly around.

You must have noted that the images in our incomplete demos above take time to load. In the next section of our tutorial we will add preloaders to each of our thumbnails and full image to rectify this problem.

Next Page.

Home | Tutorials | Features | Competitions | Forum | About Us | Contact Us | Legal | Privacy | Show Us Some Love, Donate! | Subscribe
© 2004-2009 Republic of Code - All Rights Reserved