Creating A Zipper In Swishmax, Intermediate - Advanced Options

[Eddie_K]

Creating a SwishMax Zipper - tutorial

Hi there . I'm going to explain how to build your own zipper with action in SwishMax. This will look like in the image below, a working version can be seen :: Here ::



You can download the source for the zipper here:
http://www.13dots.com/forum/index.php?auto...mp;showfile=207


First off we are going to create the zipper teeth. For this I have created a 12w /2.5h px rectangle, and copy pasted 32 times, like in the image below.



When I finished the teeth alignement, I started renaming them, l1-l16 (for the left teeth) and r1-r16 (for the right teeth). You will also need to check the Target checkbox for each tooth, because later on we need to animate these, as we drag the zipper downwards . For a zipper ending, I have added a larger rectangle at the bottom. When done, group all as a sprite and rename it teeth. Below is a rough sketch of the teeth...



Now, for the zipper puller, I have drawn in vector the image below:



I grouped all the shapes in a sprite and named it zipper. If you open up the zipper sprite you'll notice I have a slightly complicated arrangement.



This is because I wanted the light-grey part of the puller to balance when not pressed, and stop ballancing once it's pressed. So I have two states... One when this moves (balance2) and a state where it's stopped (balance).

Now... moving on to making this zipper interact with the user. I have added the following code for the zippa sprite. This contains all the elements of the zipper, and at his turn is contained in the sprite called zipper. You may wonder why all this grouping as sprite... Well, my code will not function correctly otherwise, as I'll actually add my code to the zippa sprite, making it dependant of the zipper sprite, BUT independent of the main scene's timeline. I'm a sprite kind of guy, don't like to work with scenes :whistle: . So... here is the code for zippa:

CODE

[color="blue"]on (press) {
_root.prs=1;
startDragUnlocked(145,145,250,400);
}
on (release) {
stopDrag();
_root.prs=0;
}[/color]

You may wonder what does this all mean... Well easy... We have two states for the sprite, once it's pressed and once it's released. As you remember from before, I have implemented a balancing option, to activate this, I have defined a variable called prs in the _root of my movie to control this action. It will all make sense, once we get to the main code of the movie, located in the _root of the movie. To give the user the possibility to drag the zipper, I have added the startDragUnlocked(145,145,250,400); code. This tells me that the user can drag the zipper on a constant _X of 145 and a variable _Y from 250 to 400.

Now, for the final touch of our movie, we'll add the code to the _root of our movie. For this click on Scene_1 and add the following code:

CODE

[color="blue"]onload () {
fact=0;
prs=0;
}
onEnterFrame() {
if (prs==0) {
zipper.zippa.zip.gotoAndStop(2);
} else {
zipper.zippa.zip.gotoAndStop(1);
}

dist=zipper._Y-250;
for (i=1; i<=16; i++) {
fact= math.exp(i/3*0.9+.5);
_root.teeth["l"+i]._X = -3-(dist/fact);
_root.teeth["r"+i]._X = 3+(dist/fact);
}
}
[/color]

What does all of this mean ? Well easy... First of all we define two variables called fact and prs. The prs is used for telling our movie if the zipper is pressed or not and fact is used in the code below.
What does onEnterFrame() mean? It means that this action will be performed continuously.

CODE

if (prs==0) {
zipper.zippa.zip.gotoAndStop(2);
} else {
zipper.zippa.zip.gotoAndStop(1);
}

With these lines I tell my zipper what action to do... balance or not. In case my zipper is pressed, stay static, else balance. Easy.

Probably the most confusing part of our zipper code and what makes actually the teeth move when dragging the zipper up or down is below

CODE

dist=zipper._Y-250;
for (i=1; i<=16; i++) {
fact= math.exp(i/3*0.9+.5);
_root.teeth["l"+i]._X = -3-(dist/fact);
_root.teeth["r"+i]._X = 3+(dist/fact);
}

Remember... all of this is executed "real-time" so my movie is refreshing itself every second. I have declared a variable dist to apreciate the distance where my zipper's _Y is. As we declared above on the dragging code, our zipper drags from _Y 250 to 400. dist is a variable that substracts from this interval 250, leaving me with an interval of 0-150. This way I can exactly tell my movie how far the teeth have to be from my zipper.

The following code is actually what makes the zipper teeth move from my zipper puller. To save a lot of my time, I have created a FOR function that will always loop through all my 16 teeth (on each side) of the zipper, so I can change their properties all at once.
I declared a variable called fact, that actually represents the factor of how the teeth will move on the _X axis. I'm not such a math wiz, but I used math.exp (exponential) for a curve that should have looked like



I did all my best , my variable beeing the i value from the FOR function.

CODE

_root.teeth["l"+i]._X = -3-(dist/fact);
_root.teeth["r"+i]._X = 3+(dist/fact);

After declaring my "movement" function, I had to make the teeth follow the graphic of this funtion. So I have moved the left and right teeth using _root.teeth["side"+i]._X, and where our i takes values from 1-16 all the time, like a loop.
The -3-(dist/fact); code represents the movement on the _X axis. This is the distance of movement divided by the factor, so meaning 0-150/curve. So it will move my zipper teeth according to the position of my zipper puller.

This concludes this tutorial. If you want to play, just modify for the variable fact the function, and I'm sure you'll have lots of fun. I know I did, obtaining very weird movements.
Hope this tut was pretty clear :whistle: , and questions, feel free to ask.

Yours,
Eddie

[*D*]

Very nicely explained and easy to follow Eddie

Thankyou

[Eddie_K]

Thanks It's pretty long, but hopefully people can understand my mumblings

Eddie

[StarSkreem]

Excellent tut, Eddie!

Would love to give it a try, but I don't have SWiSH

Nice work

[Zaigham]

Excellent job Eddie

Nice, well explained, easy to follow tutorial

Thanks for sharing,

Regards,

Zaigham

[zasul]

i think i got his flesh caught in the zipper good job bravo ma eddi

[Eddie_K]

Thank you

Eddie

[Daisy__]

I think that you explained very well this tutorial and you worked very clean and organised...
Very nice and realistic design!

This post has been edited by Daisy__: May 10 2005, 12:29 PM

[Eddie_K]

Thank you dear. I know someone that was close to me when I created it LOL

Eddie

[RedDragon]

cool tut Eddie

thx a lot!