Draggable Menu 2.0 Part I : Making it Work
         written by ilyas usal a.k.a. pom

OK. I've just realized that the tutorial I made for that effect was impossible to understand, even for me, so here's :

The menu with a dragger 2.0 - Part I : How to make it work

Take a look at the effect


[ drag the blue square ]


The Main Idea
There are 2 very important things in this effect:

  • the clip that is going to scroll
  • the dragger

The clip is totally passive. It controls nothing, but it is controlled by the dragger. Basically, when you make the x (horizontal) position of your dragger change by 10, you'll make the x position of the clip change by 5 times as much.

Before you begin, I would like you to download the partial source file for this tutorial. Don't worry, the source code does not include the coding and other techniques needed to make the animation work. You will do that with information found in this tutorial! Download:

Download


The Tutorial

  1. OK, so what do we have here ? Two layers, "mask" and "fond". On the "fond" layer, there's a large clip containing 4 numbers. If you open your library, you'll find it under the name "clipgeneral". On the mask layer, you'll find a mask, a movie clip in fact, that you'll find in the library under the name "mask".

[ the timeline ]

  1. The first thing you are going to do is put the dragger on the scene. In order to do so, click on the "mask" layer, and then on the white square with a "+" in the centre of it. This will add a new layer to your scene (see picture if you can't find the button). Name the layer "drag". In your library, you'll find a movie clip called "dragger". Simply drag and drop it in this layer. Save your movie.
     
  2. Let's take a look at that "dragger" movie clip. To edit it, you can either double click it, or right click it and choose "edit in place". You can now see that the rest of the scene has faded, and that the blue square in full of little grey points. This means that it's just Flash drawing, not an instance of a graphic, a clip or a button.
Note
You have to understand this because it's used quite often, at least by me.
We want the dragger to react when it's clicked, and to remain active as long as we press it. Intuitively, you can feel that there is going to be a button to press somewhere (actually, it could be done with clips only, but it would be awfully difficult, therefore stupid). But why did I make "dragger" a movie clip then ?, will you ask me. Good question. Because we want it to behave like that even after we've pressed it. That's why we put a button inside a movie clip.
  1. The grey spots also mean that it is selected. Press F8 (equivalent to Insert > Convert to Symbol) and choose "button" and name it "bouton". Doing so, we have a clip (dragger) containing a button ("but") containing a blue square. You can now see that the blue square has a blue outline, saying that it's an object. If you double click it, you will see that we get the grey spots again. You should see above your timeline :


[ the flash tabs ]

  1. Now we have all the objects we need on the stage. Time to write some code ! On the last screen capture, you can see that we are presently in Scene1, editing the "dragger" movie clip, in which we edited the button "bouton". We want to put some code to the button, so click on the "dragger" vignette. The button is selected. Open the Actions panel (right click and Actions, or the blue arrow at the bottom right of the screen). Click inside the window and press Ctrl + E to switch to Expert Mode. Put the code:

  1. This is what I call a flag. When we press the button (inside our movie clip), there is a variable set to 1, until we release the button. The fact that I put _root. in front of it makes so that it goes to the root. It will be easier to access for the other movie clips. Save your work.
     
  2. Now click at the "Scene 1" vignette. You're back at the root of your scene. If you want to use the variable "dragging" from here, you'll simply use "dragging". We first need to give an instance name to "clipgeneral" to manipulate it from the dragger. Let's call it "general". Save your work.

[ the flash instance panel ]

  1. Open the action panel of the dragger. First we want to know the original position of the clip, so that we can see by how much we have dragged it. That's the purpose of the first three lines. onClipEvent (load) means that the instructions that follow will be executed ONLY when the clip loads, that is to say at the very beginning. So we set a variable, xold, to the current x position of the dragger.


 

  1. Then there is the onClipEvent (enterFrame) action. That means that the actions that follow will be executed on every new frame. First we test if we're dragging the dragger (that syntax is equivalent to if (dragging == 1)). If not, nothing happens. Cool. If it's true, we set the position of the dragger equal to the position of the mouse (_root. is very important there ! If you don't put it, you'll see what happens !!). This makes the dragger follow the mouse. If you stop the code here and test your movie, you'll see that the dragger follows your mouse when you click it. Save your work.
     
  2. Then we set a variable dxdrag to the difference between the current position (_x) and the former position of the dragger (xold). Finally, xold becomes the current position of the mouse. In the end, we move the x position of the clip "general". We access it with the path _root.general., because at that moment, we're in "dragger", so we have to go back to _root. and take the clutch to "general". The syntax value += 5 is equivalent to value = value + 5. Here what we do is say : every time we move the dragger by 10, we move the clip by 30 (because it's bigger !). Save your work.
Note
If we don't do that somewhat bizarre xold = _x, lets see what happens. Let's say I move the dragger by 10 on the right and leave it there. The first time the code is executed, dxdrag = 10 and I move general by + 30, hence to the right. Cool. The second time the code is run, dxdrag = 10 because nothing has changed. The clip general moves by 30 to the right, whereas the dragger is still. Now let's see what happens with that xold = _x. The first execution is identical. Except now (new)xold = (old)xold +10. So now dxdrag = 0, and we don't move the clip !!
  1. All you have to do now is set the layer "mask" as a mask and test your movie:

[ mask command ]

[ after the mask ]

  1. I hope this made sense. This was a very basic way to do this. We'll see in the second part of that tutorial how to make it a little more professional, and more reusable too.

If you are curious to know how my version of this tutorial turned out, download the final source file by clicking the download link below:

Download

This tutorial is written by Ilyas Usal. Ilyas is also known as ilyaslamasse on the kirupa.com forums!

Just a final word before we wrap up. If you have a question and/or want to be part of a friendly, collaborative community of over 220k other developers like yourself, post on the forums for a quick response!

Kirupa's signature!

 




SUPPORTERS:

kirupa.com's fast and reliable hosting provided by Media Temple.