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:
The Tutorial
-
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 ]
-
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.
-
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. |
-
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 ]
-
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:
-
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.
-
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 ]
-
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.
-
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.
-
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 !! |
-
All you have to do now is set the layer
"mask" as a mask and test your movie:
[ mask
command ]
[ after the
mask ]
-
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:
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!
|
