This content requires Flash

To view this content, JavaScript must be enabled, and you need the latest version of the Adobe Flash Player.

Download the free Flash Player now!

Now, there is one more thing I wanted to add to this, we will need some kind of a tracking system as we navigate through the program. It is not so obvious with the text which page of the website we are looking at. So, I would like to put some kind of a little pointer system up here above the buttons so we can keep track of that for the users visually. Let us close our preview window down and I will get my action script window out of the way for a moment. We will set a few graphics up. I am just going to make a really simple pointer and I will put a layer for it right above buttons and I call it pointer and I will create a pointer by just using a square. Now, let us see, If I got a red background, I think a white one would show up really nice and that would stick with the colors that we are working with so far. So, I am just going to draw a little square here and of course squares do not point very well but they are very easily modified into and so I got my selection tool here, triangle by just grabbing those two corners and pulling them in.

Now, I got snapping turned on so it is going to snap to a nice triangle there and clean it up. And I eyeballed it correctly I have got a nice sort of equal triangle that will uses a pointer. So, we can control in our action script. I will just press F8 so we make it into a movie clip symbol, I will call it something clever like pointer and I am going to register this in the center again.

Now, what I would like to do is I would like to have this thing just fly into the screen and point to whatever button we have currently clicked on. So, we are going to set this up in the on release handler but I also want to set up in the very beginning because we are going to be starting at the homepage, so we might as well just have it come flying and point at the home button. Now, I need to give this an instance name so we can call it out. So, we will call it MC pointer. It will be one of the few things in our interfaced so far, that is actually using my normal naming system, but that is a good way to make sure I do not forget it. And we will bring our action script window back up again and we will start back in our main menu, we will address the pointer.

Now, the first thing I wanted to do is point to home when we first load up the screen. So, I can put it right at the top of our on load statement. So, add a new line here, give ourselves a little bit of space to do that and we will set this up. Now, the easiest way I think of doing this one is by using a twin class that we saw in our previous lessons. Now, we toss in a little easing with it and if you remember from our lesson before, I will need to import both of those classes in order to be able to use them.

So, I am going to start thing off right by setting up an import statement and we are going to import the MX.transitions class, I will go ahead and import all of them since I am not sure which one I am going to use yet. So, that will be .* and if I am going to use easing at all, only to bring that one in as well. So, let us bring in an import, MX transitions easing. Once again, I am not sure what I am going to use, I am just going to import all of them. Now, let us create a twin that will do our first movement for us. We have to review our twin syntax, I am going to start off with the bar keyword because we are going to name our twin right off the back and declare it. I will call this one pointer twin, sounds descriptive enough for me. Now, I will use a colon and I will specify at as a twin class. Now remember, it is not showing up inside of our tool tip window because it was not imported as one of the basic ones. We will need to set that equal to a new twin decorator and if you remember correctly, we set up all of our properties last time right into the decorator for the statement. So, as we make the new twin, we are going to fill it up. Our twin consists of an object that specifies what we are twining and that is going to be MC pointer. Next, we need to specify the property that we are changing and that is going to be the _xproperty put that in quotes, followed by any easing that we are going to do.

Now, I figured we might have a little bit of fun. We could use the regular or strong easing. I am going to set it to the elastic one and I am just hoping that it is not to obnoxious. Also, when we specify an easing method, we are also going to specify a direction for it. So, this is going to be an on east out. And I will put the change in speed at the end of the animation.

Now, we simple need the beginning and the ending coordinates for our X value. Now, let us stop and think about this. In the very first point, I want to move it from wherever it is right now to wherever the home button is. So, instead of just typing in coordinates and measuring it myself on the screen, I am just going to let action script do all the work for me. I am going to set the starting position for wherever the pointer is right now. Now, we can specify that by just calling off the pointer and going for its X coordinate. Now, rolled it around the line on mine but you can see that is MC pointer ._X. So, that is going to be my starting coordinate and my ending coordinate will be wherever the home button is. We just called that one home, remember, because we are using our special namings on these ones. And again I am going to go for its _xproperty.

Now, our last two values control the speed. I can either measure my time in frames or seconds. And just to keep things easy, I am going to measure it in second. So, my second to last value is a duration and I will put in two and our last value was a bullion same whether it is seconds or frames. And true would set this to two seconds and there we have got a nice twin.

Now, let us just test that and make sure that we got something that is going to animate on the screen. My pointer comes flying in and you can see that elastic keys and kind of gets me a little bounce here. Now, depending on how you use that one since it is a canned animation. It might be a little bit too much but I am just going to leave it for right now and hope that it does not get really crazy as we start moving it around. That sets off the first part of my pointer but when I click on one of this buttons; I want the pointer to run over there. That is going to indicate which button we are currently on and then of course finally, we are going to need to change the content on the screen. Let us see if we can set that up.

Now, I am going to go down to my on release statement and I simply need to add the same kind of a twin but in this case we are going to change the beginning and the ending points. So, it is actually not too bad for me to go ahead and start with the one we have already written. I going to copy that and I want to drop inside of our release function underneath the trace.

Now, our twin statement down here is almost the same but first thing I am going to do is change the values of the starting and ending positions. Now, instead of going to the home button every time, I am going to whatever button we happen to just choose which actually is this, and so, we are going to go to this _x. So, whatever button you clicked on, that is the value we are going to end up with our final point. Now also, I would like to point out that since we are inside the button here, our path to MC pointer is actually a little bit different. Now, remember outside here we scope to the screen, but inside the function, we are scoped to the button.

So, I just need to go up a level on MC pointer in order to make sure we moved the right object. We will just modify our .syntax to this._parent.mcpointer and that leaves us with the starting location. Now, this is kind of interesting because we are going to start at whatever button my user clicked on last time. So, what I would like to do is I would like to makeup a new variable that is going to contain the last targeted position for our pointer. So, I am just going to makeup a variable for that and we will access it straight out of here.

Now, just like I have to choose where I put objects, I also have to choose where I am going to put variables. And what I would

Now, there is one more thing I wanted to add to this, we will need some kind of a tracking system as we navigate through the program. It is not so obvious with the text which page of the website we are looking at. So, I would like to put... click to read more