I made this mainly because I haven’t made a tutorial for a while, and Wtf presented me with an excuse to make one, so here it is.





Just for reference's sake, and because I'll probably change it soon, here's an example of a good interactive signature.





Click it to get started.


Also, please note that this tutorial assumes you have a basic knowledge of flash, please don't ask me where the properties inspector, the toolbar or the actionscript panel are.

Oh, and one more thing.

Whenever I put single quotes (like ‘this’), they are just for recognition and should NOT be included in any frame labels or coding. That’s important.

And, by the way, this tutorial was written for ActionScript 2.0.



Okay.

Straight to it.

The Background:

When making an interactive signature, probably the best place to start is with your background. Because this will be tagged with your name and so on, you will need to know where those little bits and pieces are, and you'll need to have a reasonable background size as well.

Start by going to the properties inspector and changing the size of your stage; it probably shouldn't need to be much bigger then a maximum of 700 (width) by 400 (height). For mine, I went with 550 x 200.

While you’re at it, set the framerate to something like 20; it makes it look smoother, but the framerate is really up to you.

You can be as fancy or simplistic as you want with your background; if you really want, you can make something in photoshop and import it into flash, or you can just have a plain colour like mine, but keep in mind that if it's too complex, people mightn't be able to read the text.

If you're using a plain solid colour, and you want your signature to blend in with the forum background, the colour you're after is #e5e5e5 .

Once you have your background (if you've made it in flash, I suggest you group it before continuing), put in a piece of text that has your name, if you haven't already done so, probably one of the corners is the best place for this.

This is really all you should need in your background. Lock the layer you were working on for the moment.

Now onwards to the main interface.




Making the menu buttons:

After making a new layer, start by putting in a few pieces of text; these will be indicators that show what people are clicking on. If you want, they can even be the buttons themselves, it's up to you. Just make sure that they make sense, and remember there's no good reason to include something useless if it isn't needed.

Once you have the text done, you may want to align it to the stage and to eachother properly; play around with the align tool (Ctrl + K), until you get what you want.


Now to actually make the buttons:

If you're just using the text for buttons, select each text field individually and press F8, and convert them into a button class. Now double click on them, select the 'Hit' frame, press F6, and draw a rectangle over the text (not too big, but not too small either - it really should just cover the text completely). This makes your button so that it can be clicked easier. For example, without doing this, your button could only be clicked if someone moused directly over one of the lines of the text, but with it they don't have that difficulty.

I reccommend you also change the colour for the up, over and down frames, as this tends to make it look better, but this isn't necessary.



Buttons that are separate from the text: I prefer these, because you only need to make them once. As you can see in the example, I've use the same button everywhere in the signature.

So, go ahead and draw your button, then select it, F8, make it a button. If your button is just a solid shape, like mine are, you don't need to worry about editing the hit area, but again, I find it looks better if you change the colour or something on the 'up' and 'over' frames.

If your button has lots of gaps (though I don't want to know what kind of crazy signature yours is if it does), fill in the gaps on the hit frame.

Now duplicate your button, once for each piece of text you made earlier, and position them obviously so that people can click them and know what they're clicking on. I suggest somewhere like next to the text.

Again, feel free to use the Align tool.



Now to code your buttons:

Ok. Now, you're going to do a trick that will speed up the production of your signature greatly.

Anyone who knows how to make a button will probably know the whole gotoAndStop(framenumber); deal.

But a useful trick for things like this where you'll probably be moving frames around which could screw up the whole thing is to use frame labels. Frame labels are pretty much tags that you can apply to frames. You can also use them in actionscript, which means if you move a frame with a tag, the actionscript will still send it there even after it's moved.

I wonder if anyone actually understood that rambling of a paragraph.

Anyway, on each of your buttons put this code in the actionscript panel.

on(release){

         _root.gotoAndStop("framelabel");

}

Be sure to change the text in red to something obvious: For example, if a button says 'My animations', in the actionscript, I would change the text in red to 'animations'. Be sure not to make duplicate frame labels.

Once you have done this, don't worry about the frame labels any more for the moment, we'll deal with them later.

Now add anything else you feel your menu needs, but you don't have to if you don't want to.

Now just to make moving your menu easier, select all of it, press F8, and convert it all to a movie clip. Lock the layer you were working on.





Now you have your menu, let's move on to making a cover, not unlike mine.

Menu Covers:

You don't have to include a cover for your menu, in most cases it just looks good.

Make a new layer, and draw something that fills up the entire stage, and blocks out the content under it. Hell, you could just put a big rectangle. Put anything you want. If you want, put some text on it. As you can see, I put a big <3. Select it, and convert it to a movie clip.

If you want it to be animated, double click on it, and animate inside the movie clip.

Then go back to the main stage, and convert the movie clip into another movie clip, leaving you with an animated movie clip inside a movie clip on your stage.

This is now your cover.

Insert a few frames (on all the layers), I wouldn't put more then twenty. Within those frames animate your cover leaving the stage. You can do this as elaborately as you want, just as long as it's completely off the stage and your meny is completely visible by the end.

Now lock that layer, and create a new one. Draw a rectangle that covers the whole stage. Don't waste your time making it look pretty, you're never going to see it anyway.

Convert it into a button, and double click on it. Select the 'Up' frame (it should be the one you're already on). Now select and drag that frame to the 'hit' frame. If done correctly, that frame should have been moved to the hit frame, leaving you with nothing on the up, over or down frames, and a hugeass rectangle on the hit frame.

Congratulations, you've made an invisible button. Go back to the main stage, and you'll see a big, transperant, light blue rectangle. Don't worry about it, because when you export the signature, you won't see it. This is just flash's way of showing us that a button is there but we can't see it.

The button you've just made will be used to tell if someone is clicking on or mousing over your signature to make it start.

It's your choice which of these you do.

Select your button.

If you want to make people click on your signature to start it, add this actionscript to the button:

on(release){

         play();

}

If you want people to be able to just mouse over it, add this instead:

on(rollOver){

         play();

}

Now, on frame two, create a new keyframe and delete the button. Lock that layer. Create a new one for some on-frame actionscript.

Select the first frame and add this quick bit of actionscript:

stop();

This basically just stops the movie from playing before you tell it to.

Now go to the frame where the cover has finished its animation of leaving the stage, and create another keyframe on the actions layer.

Again, put the stop action.

stop();

Now you might want to test your movie (ctrl + enter, for those of you who don’t know).

Your menu cover should fly off the screen when you click on/roll over it, so that’s all we need to do with that.

Now, to add in those extra sections.




Adding the sections:

So your signature looks great, but the menu buttons don’t seem to work, and it doesn’t have any content.

I can’t really tell you everything to do with this, because I don’t know what your sections are, so let me just use a few generic examples that should pretty much tell you all you need to know, and should help you making your own sections.

Lets say you have four sections, Animations, Signatures, JukeBox and Funny Quotes, and the frame labels you made the gotoAndStop at earlier are ‘anims’, ‘sigs’, ‘juke’ and ‘quotes’.


Start by making a few more frames, at least five per section after the frame your menu is on (so in this case, twenty frames after the menu). Now chuck in another layer for frame labels.

Put a keyframe on the frame where the menu is. Select the keyframe. In the properties inspector, where it says , put ‘menu’.

Put another keyframe on the next frame. Give it a label of ‘anims’ (just using my examples here, change that to fit your own).

Five frames later, put another keyframe, labelled ‘sigs’, then another five frames later, on labelled ‘juke’, and finally, another five frames later, on labelled ‘quotes’.

Of course, you probably won’t need that many frames, but it makes the whole process a lot easier because you can see what each frame is labelled on the timeline.

Lock that layer.

Make a new layer, and put a keyframe where the ‘anims’ frame is.

Add another button, appropriately labelled with text, that has this code on it:

on(release){

         stopAllSounds();

         gotoAndStop(“menu”);

}

This will be a button that sends users back to the main menu. It should be on all frames after the one with the menu on it, which is why we put it on a separate layer.
The stopAllSounds(); part is only necessary if you’re including a Juke Box. It’s important if you are.

Lock this layer and don’t touch it for anything unless you’re moving the button.

Unlock the one your menu was on.



Animations:



Insert a blank keyframe on that layer, at the frame where the label ‘anims’ is.



Put in some text, in a corner or something, that entitles the frame ‘animations’ or something (a heading).

Now chuck in some text that lists your animations. Put buttons next to each piece of text (or convert each piece of text into a button) like before, and put this actionscript on each one:

on(release){

         getURL(“www.ahostingplace.com/ananimation.swf”, “_blank”);

}

where the text in red is a link to the appropriate animation. This opens a new window and sends the user to the animation when the button is clicked.



Signatures:


Go back to the other layer you were just working on, the one your menu was on.

Go to the frame labelled ‘sigs’. This is slightly more complicated, because you’ll have multiple images here. Again create a blank keyframe, and add a title.

Import the sigs you want to include (file > import to library), but try to stay withing five, because images take a bit out of flash to load.

Add the first one to the stage, and position it as desired. Now add a ‘next’ button, do it however you like. Script it with:

on(release){

         gotoAndStop(nextFrame);

}

Create a keyframe on the next frame, delete the first signature and replace it with the second. But it’s on top of the button? That won’t do. Select the image, and press Ctrl + Shift + Down, or right click > send to back.

Now add a ‘previous’ button, in the same way as the next button, and code it:

on(release){

         gotoAndStop(prevFrame);

}

Good, now you have your buttons.

Next frame, delete the old image, add a new one, send it to the back.
Repeat.
Repeat and delete the ‘next’ button. This is important.

Well, you should now have a working image gallery, with five images.

Congrats.


****CHARACTER LIMIT, CONTINUED IN NEXT POST****

The Juke Box:





Making the jukebox is surprisingly easy.



Well, it was to me when I figured it out, anyway.







Go to the ‘juke’ frame, blank keyframe it, give it a title.



Import some music into your library the same way you did with the gallery. Again, try to stick to a maximum, but this time, of four. Music sends loading time through the roof. Also, I can’t be bothered to tell you to add frames.



We’re going to need to make a sub-menu, like the one we had for the ‘anims’ section, so make some buttons and text like before.



This time, instead of using external links, we’re going to use frame labels again, so to each button, add the code:

on(release){



          gotoAndStop(“song1”);



}

Obviously you change the number of the song for each button.



Now add keyframes for each of the four frames after that one on the layer you were doing the frame labels on.



Give each one a label of ‘song1’ or ‘song2’ etc.



Now select one of those frames, and go to the properties inspector. Where it says ‘Sound: None’, select the appropriate piece of music for that frame. In the box that says ‘Sync: Event’, choose start. Add some text to show some details about the song, such as the song’s name, artist, and length.



Repeat for the other three frames.



Now go back to the layer with all your content on it. Create a blank keyframe where the first song is, and add a button that says something like ‘Back to JukeBox’. Give it the following actionscript:

on(release){



          stopAllSounds();



          gotoAndStop(“juke”);



}

When this button is pressed, whatever sounds are playing will stop, and the user will be brought back to the music selection screen.



You may also notice that the ‘stopAllSounds’ is the same as the one on the button that returns you to the main menu; we added that there so that it isn’t possible to have more then one song playing at once.



Your juke box should now function properly, so now we can move on to the last example section, which is the quotes.





Quotes:



This is a very easy section; all it is, is text.



Create a blank keyframe at the frame the ‘quotes’ label is.



Add an appropriate heading.



Add some funny quotes.



Well that was easy, wasn’t it?







Conclusion:





Of course, the sections I’ve listed are still just examples, so feel free to play around with them on your own.



Well, this took me about two hours to write, 14,879 characters, 2,699 words, 469 lines, 180 paragraphs and nine pages from Microsoft Word, so you better ****ing enjoy it.









=]

















Kthxbai.

Your leet superior

- Jawz

...ouch..? Wtf?

I'm a guy, but wtf does that have anything to do with anything?

jawz u said u were a Lesbian so how could u be a guy
on a different topic i liked the tut JAWZ rules!!!

I lied.

Moar comments.

Quote from Jawz

I lied.

Moar comments.

You lied?

Moar comments.

When I try too add actionscript it wont let me....
Edit:nevermind I got it working

NICE, i like thia tut

Bump for justice and lesbianocity.

Thanks Face Plate.