Getting started with Flash (how to make an animation)

A place for tutorials on how to get the most out of Flash

Getting started with Flash (how to make an animation)

Postby Renara » Wed Jun 02, 2010 8:04 pm

A lot of people coming by here are new to Flash, and are looking for the right tools to begin making their own contributions to this project, or to begin their own! For this reason this topic will be kept as up-to-date as possible to try and provide access to the latest Flash resources. If you know of anything that is missing here, then please send me a private message!

What is Flash?
Flash is a platform-independant, rich-internet content engine. Specifically it is used widely to make interactive web content that can perform beyond the limits of standard HTML, CSS, and so-on. In our case we are primarily interested in Flash as a vector-animation tool allowing us to produce a game, though it has applications above and beyond this.

Where can I get a Flash editor?
Unfortunately Flash is proprietary software unlike open source standards such HTML, CSS, and Javascript. This means that the only real program for editing Flash files is Adobe's Flash editor. There are some varying tools that you can use depending upon your needs, all of which are currently available for a free trial from the Adobe website.


Are there any ways to get Flash for free?
At present there are no ways that I know of to get Flash for free and legally, unless you are able to get a copy from a place of work or student course that offers to pay for your copy, or has a suitable multi-user license.

Most Adobe products are available with student discounts, and may be subject to further discounts depending where you get it.

Where can I get Flash illegally?
This forum does not allow discussion of warez or software theft, any such topics posted will be deleted.

Okay, I got Flash, so where I can learn to use this monster?
Flash CS5 itself contains a number of tutorials and video tutorials available from the main screen and help menus. In addition there are a large number of good tutorial sites available by simply searching in Google. If anyone has any particularly good tutorials for beginners, or areas that are particularly helpful for LoK then please PM me and I'll add the links here!

Flash Tutorials
Renara (team twitter | newgrounds)
Team Lead Programmer
Lok Team Member
Site Administrator
User avatar
Renara
Foxy Admin
 
Joined: Fri Jan 08, 2010 4:16 pm

Animation flow

Postby Renara » Wed Jul 14, 2010 1:05 pm

Since it comes up a lot, I'm going to cover animation flow here, basically answering the questions of how to make a loop, and how to make buttons. The following describes how to do this in ActionScript 2.0 since that's what most people will be using as they learn Flash, I'll post again with ActionScript 3.0 code later on, and when v0.3 eventually comes out we'll write a tutorial on how to do looping etc. in that.

Creating smooth loops
I'm assuming here that you already have most of your animation done, but it's worth noting how to create nice smooth loops. To create a loop you need a section of your animation that starts and ends the same. The easiest way to achieve this is to copy the "column" of frames at the start of your loop (select them, right-click then choose "copy frames") then paste them at the end by selecting the "column" of frames at the end then right-clicking and choosing "paste frames". To create a truly smooth loop your loop should actually loop one frame before the newly pasted frames, otherwise you may get the same frame twice resulting in a brief pause.

Making loops
Now, to begin with it's a good idea to create a new layer for organising your animation, just add a new layer as normal, then create a key-frame at the start of each section of your animation. Clicking on these keyframes, look in the properties window and give them a unique name. It's generally good practise to name all important sections of your animation, even if you don't intend to loop them, as you can add back buttons to skip back to them if you like. You should end up with your timeline looking something like this:

Timeline 1.png
Timeline with names
Timeline 1.png (37.32 KiB) Viewed 56855 times


Now, using names is optional, but it makes it much easier to organise your animation, and you can also use them when jumping around within the animation to make things much easier, the code we're interested in is this:

Code: Select All Code
gotoAndPlay("name");


This line tells Flash to jump to the frame named "name" and begin playing from there, you can also use gotoAndStop("name") if you don't wish the animation to continue playing after the jump.

To add a loop, we need to add some more keyframes at the end of each looping section, and insert the gotoAndPlay("name") code into them. To do this, simply add the keyframes, then select each one and open the actions window, then type in the gotoAndPlay("name") line, replacing "name" with the named frame you wish to jump to. In the example picture we would add gotoAndPlay("fuck") to frame number 21, and gotoAndPlay("hard") to frame number 31, giving us two looping sections. Now when our animation plays it will enter the "fuck" loop and loop forever (as it has no way to skip ahead yet). At this stage you may also like to add a keyframe at the very end, and add the following command into it:

Code: Select All Code
stop();


As this will stop the animation when it reaches the end. You could also add a looping section at the end if you wish, but in this example I'll just have it stop. Your timeline should now look something like this:

Timeline 2.png
Timeline with scripted looping
Timeline 2.png (32.13 KiB) Viewed 56855 times


Adding buttons
So now we have a looping animation, but we need some way to exit the loops and move forwards! To do this we will add buttons. Create yourself a new layer to put the buttons on, create a keyframe in your first loop and throw the buttons somewhere into the scene. In my example I'll just add a single button to the "fuck" loop so I can proceed to the "hard" loop.

Simply select your button and open the actions window. Now, we want to add our friend the gotoAndPlay() function to this button, but we need a little extra code to describe when to do this, in our case we will use the on(release) event, which simply means to perform the jump once the user lets go of their mouse button. Add the following code to your button using the actions window:

Code: Select All Code
on(release) {
    gotoAndPlay("name");
}


Replacing of course "name" with the appropriate named frame to jump to. During the "fuck" loop I would add gotoAndPlay("hard"). You can now add buttons to your other loops in the same way by adding new keyframes, buttons, and code as normal.

Your animation should now be interactive, and your timeline will look like this:

Timeline 3.png
Time with scripted buttons
Timeline 3.png (39.25 KiB) Viewed 56855 times


In this example we might add a forward button to the "fuck" loop that jumps to "hard", then two buttons in the "hard" loop, one going back to "fuck", and one going forward to "cum". The "cum" section will then have a single back button jumping back to "hard".
We could optionally add a back button the "fuck" loop, and an "again" or "all done" button to the "cum" section which use gotoAndPlay(1) to jump back to the start of the animation, in that case we might want to name the first frame for clarity.
Renara (team twitter | newgrounds)
Team Lead Programmer
Lok Team Member
Site Administrator
User avatar
Renara
Foxy Admin
 
Joined: Fri Jan 08, 2010 4:16 pm


Return to Tutorials



Who is online

Users browsing this forum: No registered users