In order to make things easier and keep this lesson focused on Action Script 3.0 rather than flash its’ self, I have attached an FLA file with our stage and symbols set up and ready to go. Please download that FLA before you continue.

Ok, let us start by quickly taking a look at how this file is set up and familiarize ourselves with the symbols associated with it.





On the main time line you will notice 4 layers labeled “image”, “border”, “tool”, and “actions”.

On our first layer we have our image. I have made it a Movie Symbol and given it the instance name “image.”



It is IMPORTANT to note here, that when creating this symbol we make its registration point centered as shown below
.
We will be zooming in and out on this image during run time and we want to be sure that it remains center focused.

On our second layer I have used the rectangle tool to create a red border that is the same size as the image and turned it into a Movie Symbol with the instance name: “viewArea” and again made its’ registration point centered.

On our third layer, we have a Movie Clip with an instance name: “zTool.” This is our zoom tool. Let’s go ahead and double click on our zoom tool and take a quick peek at its guts.

On the zTool timeline we have 5 layers named: “frame”, “image”, “targetArea”, “slider Line”, and “slider”

Our frame layer is simply for graphical purposes so we are going to focus on the remaining 4.

On our image layer, I have placed the image symbol from our main timeline and scaled it down to 20% its’ original size, again giving it the instance name, “image.”

In the target area layer, I have created another border using the rectangle tool. Again it is the same exact size as our image symbol. This time however, I have filled the center of the rectangle instead of leaving it empty, selected the center color and turned that into a button symbol, then selected the whole thing and made it a Movie Symbol with a centered registration point and the instance name, “targetArea.” It is IMPORTANT to note here that the border line scale should be set to 'None' in the property inspector as shown below. This is so when our red box gets bigger or smaller the line stroke does not change.


On the slider line layer, we have a symbol with the instance name “sliderLine.” Its registration point is actually left centered, and it will be serving both a graphical purpose and as a reference to our script.

Finally, we have the slider layer. On the slider layer we have a rectangle movie clip with the instance name, “slider” I threw in an invisible button with in this symbol just so it naturally induces a hand cursor when our users scroll over it, but its not necessary.

Ok GREAT! Now that we know our way around the shell, Let us move on to the code!