Alias13
01-02-2006, 11:01 PM
interactivity for idiots
a tutorial by alias13
1. buttons: there are lots of buttons tuts out there already. this is an advanced one. to make a button, you convert something to a symbol, then chose button. then change the 4 button frames to whatever you want them to be. if you cant follow this, go find a different tut. heres the button we have so far.
http://i2.photobucket.com/albums/y30/Alias13/button.swf
now lets try making an animated button like this.
http://i2.photobucket.com/albums/y30/Alias13/uberbutton.swf
that sort of button is very easy to make. you just have to put a movie clip of the spinning dots in the up button frame. then flip the movie clip for the down frame. then make another movie clip for the down frame.
heres a random but useful fact. you can make a movie clip work like a button with the code
onClipEvent(enterframe){
this.onRollOver = function(){
gotoAndStop(2)
}
this also works with onPress, onRelease, onRollOut, and onReleaseOutside.
2. drop down menu.
i had no idea how to do this before, but i figured it out caues i wanted to write a tut about it. heres what we're shooting for.
http://i2.photobucket.com/albums/y30/Alias13/menu.swf
now to start make a movie clip called button, and write menu on it.
then put two frames in it.
in the second frame, put whatever animation you want the button drop down to be in a movie clip.
now go back the your movie clip/button. to make it work properly give it the following code.
onClipEvent(enterframe){
this.onRollover = function(){
this.gotoAndStop(2)
}
this.onRollout = function(){
this.gotoAndStop(1)
}
this.onReleaseOutside = function(){
this.gotoAndStop(1)
}
}
then make a second frame in your main timeline. in it put how you want your menu to look once its finished, complete with buttons and everything. now go back into your movie clip/button, and, in the last frame of your menu animation, put the code
_root.gotoAndStop(2)
now go back your main timeline, and in that second frame, make a fill that goes around everything that is in your menu. your menu will disapear when it touches this fill. make the fill a button and give it this code.
on(rollOver){
_root.gotoAndStop(1)
}
then change its alpha to zero to make it invisible, and your done.
3. custom cursors:
this is incredibly simple. just make any arrow that points up and to the left. then make it a movie clip and give it the code
onClipEvent(load){
Mouse.hide
}
onClipEvent(enterFrame){
this._x = _root._xmouse
this._y = _root._ymouse
}
thats so easy i dont really think you need an example. plus i dont want to make one.
4. custor cursors advanced:
whats that you say? you don't want your cursor to be an arrow pointing up and to the left. ok, whatever. the reason the up and to the left arrow works is because flash automatically makes the center of a new movie clip its top left corner. if you want to make any other shape, you'll have to edit the movie clip so that the little white cross is whereever you want your mouse tip to be. when you enter the code i gave you, the tip of your mouse will align with the center of that little white cross.
5. animated cursors:
now for the fun part; animated cursors. lets say you want to make a shooting game or somthing, so you want your cursor to do somthing when you click. well, thats easy. start by making your cursor movie clip animated. add a bunch of frames to the end of your movie clip, and don't forget to put a stop() script on the first frame. now we need to make your cursor work like a button, so use this code.
//you don't need to add an onClipEvent(enterframe){ handler because you already have one.
this.onMouseDown = function(){
this.play()
}
there. now it will play though the animation after you click the mouse.
5. preloaders
ok, first the really simple way. if you made a short anim and dont want to put much effort into the preloader, just do this. start by making a rectagle with an outline. now convert just the rectangle(not the outline) into a movie clip. then give it this code
onClipEvent(enterFrame){
this._xscale = (_root.getBytesLoaded()/_root.getBytesTotal())*100
if (this._xscale == 100){
_root.play()
}
}
6. advanced preloaders:
now the idea behind this is that we make a hundred frame animation, then give it the code
onClipEvent(enterframe){
this.gotoAndStop((_root.getBytesLoaded()/_root.getBytesTotal())*100)
}
to make it go the the frame the represents the % of the movie that is loaded. you can also use _root.framesLoaded, but this makes for a jerky preloader.
now to make a hundred frame animation, your going to want to use tweening. what i do is change the corner rounding on the rectangle tool to about 20(double click on it to change this), and use it to draw a bar. then change the bar into a movie clip. once inside the movie clip, select the bar, but not its outline, and right click and chose distribute to layers. now put a mask on the layer. change the corner rounding back to zero, and draw a rectangle slightly bigger than the preloader one. put it right next to the preloader bar. now make a new keyframe on frame 99 and move the mask bar so it just barely covers the preloader bar. now make it tween. now on the last frame put a button that says 'play', and give it the code
on(release){
_root.play()
}
now put the code i showed you above in the movie clip itself, and your done.
if you want the preloader to show the percent of the movie thats loaded, just add a new layer to your preloader clip, and put a block of dynamic text in it. make the variable for the dynamic text "text"(without the quotes, and the variable can be changed in the propertys bar.) now put this code in the first frame of your movie clip.
text = Math.round((_root.getBytesLoaded()/_root.getBytesTotal())*100)
and that should work
7. code you should know:
here is some simple code that you should have memerized if you want to be good at actionscripting.
first, the handlers. handlers are only neccisary in movieclips and buttons, and they tell flash when to do what you tell it to do.
for movieclips, the handlers all begin with onClipEvent(. once you type that in, a list should pop up with all kind of things to put in the brackets. the most commons ones are:
enterFrame: this is the handler for most movieclip functions. this will make the included code happen every frame. even if the movie is stoped, it will still redo the code as if it was running.
load: this handler will make the code happen only once, when the movieclip first appears in the movie. i've used this for making the mouse disappear with a custom cursor.
there are others, but i've never used them.
if your working with buttons, your handlers will all start with on(. once again, this will make a list pop up. here are some common ones.
release: the code will execute when you release the button. use this for most buttons.
press: when you press the button.
rollOver: when you rollover the button.
you get the idea. some other ones are rollOut, releaseOutside, and mouseDown.
functions are what you put in the handlers, they make stuff happen in your code. some very common and useful ones are:
play(): play the current movie. if put in a button, it will target _parent. in a movieclip, it will target the movieclip itself. don't forget the brackets or it won't work.
gotoAndPlay(): same as play, but you put a frame number in the brackets, and it will play starting from that frame. or to pick a scene, this is the format
gotoAndPlay("scene name",frame number)
gotoAndStop(): guess what this does.
stop(): if you put this in a frame, the movie will stop when it gets to that frame. very useful. otherwise, works the same as play, only it stops the movie.
targets: you will see i used the words _root and _parent. these are targets. they determine what movieclip will be affected by a function.
_root: you will be useing this alot. targets the main timeline. to target a movieclip or button on the main timeline, use _root.yourmovieclipsname.
eg:
on(release){
_root.movieclip.gotoAndPlay(5)
}
will make the clip called movieclip go to it's 5th frame and play.
_parent: this targets the movieclip which the current clip is in. do not use this to target _root, even if your clip is on the main timeling. thats just ugly.
this: this(lol) targets the current movieclip itself. has all kinds of uses.
and now you have a very basic knoledge of coding.
note: all of the code in this tut should work if copied directly into flash, but i didn't actually test any of it, so if you find an error, please tell me.
note: if your animation just plays though without you clicking the button, you probably need to put the action stop() in the first frame. please do so before posting in the thread.
a tutorial by alias13
1. buttons: there are lots of buttons tuts out there already. this is an advanced one. to make a button, you convert something to a symbol, then chose button. then change the 4 button frames to whatever you want them to be. if you cant follow this, go find a different tut. heres the button we have so far.
http://i2.photobucket.com/albums/y30/Alias13/button.swf
now lets try making an animated button like this.
http://i2.photobucket.com/albums/y30/Alias13/uberbutton.swf
that sort of button is very easy to make. you just have to put a movie clip of the spinning dots in the up button frame. then flip the movie clip for the down frame. then make another movie clip for the down frame.
heres a random but useful fact. you can make a movie clip work like a button with the code
onClipEvent(enterframe){
this.onRollOver = function(){
gotoAndStop(2)
}
this also works with onPress, onRelease, onRollOut, and onReleaseOutside.
2. drop down menu.
i had no idea how to do this before, but i figured it out caues i wanted to write a tut about it. heres what we're shooting for.
http://i2.photobucket.com/albums/y30/Alias13/menu.swf
now to start make a movie clip called button, and write menu on it.
then put two frames in it.
in the second frame, put whatever animation you want the button drop down to be in a movie clip.
now go back the your movie clip/button. to make it work properly give it the following code.
onClipEvent(enterframe){
this.onRollover = function(){
this.gotoAndStop(2)
}
this.onRollout = function(){
this.gotoAndStop(1)
}
this.onReleaseOutside = function(){
this.gotoAndStop(1)
}
}
then make a second frame in your main timeline. in it put how you want your menu to look once its finished, complete with buttons and everything. now go back into your movie clip/button, and, in the last frame of your menu animation, put the code
_root.gotoAndStop(2)
now go back your main timeline, and in that second frame, make a fill that goes around everything that is in your menu. your menu will disapear when it touches this fill. make the fill a button and give it this code.
on(rollOver){
_root.gotoAndStop(1)
}
then change its alpha to zero to make it invisible, and your done.
3. custom cursors:
this is incredibly simple. just make any arrow that points up and to the left. then make it a movie clip and give it the code
onClipEvent(load){
Mouse.hide
}
onClipEvent(enterFrame){
this._x = _root._xmouse
this._y = _root._ymouse
}
thats so easy i dont really think you need an example. plus i dont want to make one.
4. custor cursors advanced:
whats that you say? you don't want your cursor to be an arrow pointing up and to the left. ok, whatever. the reason the up and to the left arrow works is because flash automatically makes the center of a new movie clip its top left corner. if you want to make any other shape, you'll have to edit the movie clip so that the little white cross is whereever you want your mouse tip to be. when you enter the code i gave you, the tip of your mouse will align with the center of that little white cross.
5. animated cursors:
now for the fun part; animated cursors. lets say you want to make a shooting game or somthing, so you want your cursor to do somthing when you click. well, thats easy. start by making your cursor movie clip animated. add a bunch of frames to the end of your movie clip, and don't forget to put a stop() script on the first frame. now we need to make your cursor work like a button, so use this code.
//you don't need to add an onClipEvent(enterframe){ handler because you already have one.
this.onMouseDown = function(){
this.play()
}
there. now it will play though the animation after you click the mouse.
5. preloaders
ok, first the really simple way. if you made a short anim and dont want to put much effort into the preloader, just do this. start by making a rectagle with an outline. now convert just the rectangle(not the outline) into a movie clip. then give it this code
onClipEvent(enterFrame){
this._xscale = (_root.getBytesLoaded()/_root.getBytesTotal())*100
if (this._xscale == 100){
_root.play()
}
}
6. advanced preloaders:
now the idea behind this is that we make a hundred frame animation, then give it the code
onClipEvent(enterframe){
this.gotoAndStop((_root.getBytesLoaded()/_root.getBytesTotal())*100)
}
to make it go the the frame the represents the % of the movie that is loaded. you can also use _root.framesLoaded, but this makes for a jerky preloader.
now to make a hundred frame animation, your going to want to use tweening. what i do is change the corner rounding on the rectangle tool to about 20(double click on it to change this), and use it to draw a bar. then change the bar into a movie clip. once inside the movie clip, select the bar, but not its outline, and right click and chose distribute to layers. now put a mask on the layer. change the corner rounding back to zero, and draw a rectangle slightly bigger than the preloader one. put it right next to the preloader bar. now make a new keyframe on frame 99 and move the mask bar so it just barely covers the preloader bar. now make it tween. now on the last frame put a button that says 'play', and give it the code
on(release){
_root.play()
}
now put the code i showed you above in the movie clip itself, and your done.
if you want the preloader to show the percent of the movie thats loaded, just add a new layer to your preloader clip, and put a block of dynamic text in it. make the variable for the dynamic text "text"(without the quotes, and the variable can be changed in the propertys bar.) now put this code in the first frame of your movie clip.
text = Math.round((_root.getBytesLoaded()/_root.getBytesTotal())*100)
and that should work
7. code you should know:
here is some simple code that you should have memerized if you want to be good at actionscripting.
first, the handlers. handlers are only neccisary in movieclips and buttons, and they tell flash when to do what you tell it to do.
for movieclips, the handlers all begin with onClipEvent(. once you type that in, a list should pop up with all kind of things to put in the brackets. the most commons ones are:
enterFrame: this is the handler for most movieclip functions. this will make the included code happen every frame. even if the movie is stoped, it will still redo the code as if it was running.
load: this handler will make the code happen only once, when the movieclip first appears in the movie. i've used this for making the mouse disappear with a custom cursor.
there are others, but i've never used them.
if your working with buttons, your handlers will all start with on(. once again, this will make a list pop up. here are some common ones.
release: the code will execute when you release the button. use this for most buttons.
press: when you press the button.
rollOver: when you rollover the button.
you get the idea. some other ones are rollOut, releaseOutside, and mouseDown.
functions are what you put in the handlers, they make stuff happen in your code. some very common and useful ones are:
play(): play the current movie. if put in a button, it will target _parent. in a movieclip, it will target the movieclip itself. don't forget the brackets or it won't work.
gotoAndPlay(): same as play, but you put a frame number in the brackets, and it will play starting from that frame. or to pick a scene, this is the format
gotoAndPlay("scene name",frame number)
gotoAndStop(): guess what this does.
stop(): if you put this in a frame, the movie will stop when it gets to that frame. very useful. otherwise, works the same as play, only it stops the movie.
targets: you will see i used the words _root and _parent. these are targets. they determine what movieclip will be affected by a function.
_root: you will be useing this alot. targets the main timeline. to target a movieclip or button on the main timeline, use _root.yourmovieclipsname.
eg:
on(release){
_root.movieclip.gotoAndPlay(5)
}
will make the clip called movieclip go to it's 5th frame and play.
_parent: this targets the movieclip which the current clip is in. do not use this to target _root, even if your clip is on the main timeling. thats just ugly.
this: this(lol) targets the current movieclip itself. has all kinds of uses.
and now you have a very basic knoledge of coding.
note: all of the code in this tut should work if copied directly into flash, but i didn't actually test any of it, so if you find an error, please tell me.
note: if your animation just plays though without you clicking the button, you probably need to put the action stop() in the first frame. please do so before posting in the thread.