[Magosis]

Hi, my name is Patrick, I have worked with Macromedia Flash for 3 years now, initially as a hobby but later professionally in web design. I originally began making these tutorials for perfected pastime dot com but the site went bankrupt. After that I worked several smaller design jobs. Currently I’m a phone Internet tech support agent. But if I give much more detail on that this will just turn into a rant about how I want a real I.T. job.

In the tutorials that follow you can expect to see a few things; the tutorials are starting off very basic so if you have had prior experience then you may wish to wait for some of the advanced tutorials to be written. The other thing you may not is I have abhorrent spelling and grammar, so if you see a typo let me know and I’ll fix it.

Index
Intro
Post 1 – The Intro and Index (Done)
Part One - Animation
Post 2 – Lesson I: The Tool (Done)
Post 3 – Lesson II: Tweening Animation (Done)
Post 4 – Lesson III: Frame by Frame Animation (Done)
Post 5 – Lesson IV: Using Movie Clips (Done)
Post 6 – Lesson V: Basic Scripting for Animation Effects (Done)
Post 7 – Lesson VI: Your First Project (Done)
Part Two – User Interface Programming
Post 8 – Lesson VII: Buttons
Post 9 – Lesson VIII: Player Commands and Frame Use
Post 10 – Lesson IX: Text Input and Variables
Post 11 – Lesson X: Object and Level Referencing
Post 12 – Lesson XI: Movie Clip Behavior and Properties
Post 13 – Lesson XII: Math Functions
Post 14 – Lesson XIII: Logical Statements (if, else)
Post 15 – Lesson XIV: Logical Statements (for, while)
Post 16 – Lesson XV: Key Input
Post 17 – Lesson XVI: Your First Interface
Part Three – Advanced Programming
Post 18 – Lesson XVII: Using JavaScript in Flash
Post 19 – Lesson XVIII: Exporting Variables to a Server Side Script
Post 20 – Lesson XIX: Importing Data from PHP
Post 21 – Lesson XX: Your First Game
Closing
Post 22 – After Thoughts

Thanks to the admin team for pinning this topic

Edited by Magosis, 15 November 2006 - 06:34 PM.

[Advertisements]

Lesson I: The Tool

The macromedia flash application is a tool for development of applets for the Macromedia flash activeX plug-in. The tool as of this documents last up date is currently on version 8.

A free 30 day all features included trial of this software can be found at: http://www.macromedi...o/?promoid=BINT

This tool is quite large however so the download may take a while, While your waiting why not read on.

There are 3 primary uses for macromedia flash although there are many more the key ones are:
(*) Animation
(*) Game Development
(*) Web user interfacing

The easiest of these to learn the basics of is the Animation end of the program and a grasp of this is essential for all other uses of the application.

Once the tool has been downloaded and installed, upon first opening the tool you will notice an interface much similar to that of a image editing application. Although there will be several notable differences the most important of these for your first experience will be the Timeline.

The time line is the basis of all animation. This is were you can add sequential frames to allow for an almost flip book effect or sure other animation tools (or scripting tool later) to generate the wanted effects.

Now the best way to learn is to jump right in so lets get started by making your first image. Many of you will wish to skip this step as you have used other image editors, this is not recommended as Flash reacts differently in some cases.

First we will need to click on the paint brush tool this is the primary drawing tool in Flash.



Now to learn how the tool renders a line lets try to draw a straight line with the pint brush tool. This is normal a difficult feat in a paint program but with macromedia’s smooth paint feature it becomes much easier.



Moving on, let’s erase that using the eraser tool which works the same way as in other applications.



Now to further illustrate this lets try to draw a circle.



Once you have gotten the hang of using the paint tool to draw basic shapes we will try to draw a face. Start with a circle



Next add lines as shown



We will now remove the line that is separating the head portions using the eraser tool.



We will now ad a nose to the head this proportions the face and allows us to judge were other features should be placed.



Next we need to add the eye brows to finish the proportions.



Now that the skeletal structure of the face is in place can add the hair. The simplest hair style to draw is the medium unkempt hair but there are many others that you could try. Once you have added the hair to the image be sure to erase any excess lines.



Now that you have the basic face, we can add color., using the fill tool,



Fill each area with an appropriate color. You can change the fill color in the Color Mixer sub menu



or by using the quick color selector.



So it should look something like this.



Now that you have the basics down lets try something a touch more advanced and add some shading. To add shading we will need to add a second layer to the image, for this we will need to use the time line menu.



Now right-click were it says layer 1. And click on “Insert Layer”



You will now have two layers listed in the timeline. This time left click on layer 1 and press CTRL and C. once you have done this you will need to select the pointer tool this is the black cursor button



Now click on layer two and right-click anywhere in the white area on the editable document. And then click on paste in place.



Now change the color in the color mixer to black and lower the alpha value to 30% and click the right hand dot underneath the lock on the layer 1 line to change make the layer un-editable.

----

Now use the eraser tool, to erase the black in the area’s you do not wish to be shaded



And there you have it your well on your way to being an animator as the first step is always making a good picture.

Edited by Magosis, 07 December 2005 - 02:24 PM.

[Magosis]

Lesson I: The Tool

The macromedia flash application is a tool for development of applets for the Macromedia flash activeX plug-in. The tool as of this documents last up date is currently on version 8.

A free 30 day all features included trial of this software can be found at: http://www.macromedi...o/?promoid=BINT

This tool is quite large however so the download may take a while, While your waiting why not read on.

There are 3 primary uses for macromedia flash although there are many more the key ones are:
(*) Animation
(*) Game Development
(*) Web user interfacing

The easiest of these to learn the basics of is the Animation end of the program and a grasp of this is essential for all other uses of the application.

Once the tool has been downloaded and installed, upon first opening the tool you will notice an interface much similar to that of a image editing application. Although there will be several notable differences the most important of these for your first experience will be the Timeline.

The time line is the basis of all animation. This is were you can add sequential frames to allow for an almost flip book effect or sure other animation tools (or scripting tool later) to generate the wanted effects.

Now the best way to learn is to jump right in so lets get started by making your first image. Many of you will wish to skip this step as you have used other image editors, this is not recommended as Flash reacts differently in some cases.

First we will need to click on the paint brush tool this is the primary drawing tool in Flash.



Now to learn how the tool renders a line lets try to draw a straight line with the pint brush tool. This is normal a difficult feat in a paint program but with macromedia’s smooth paint feature it becomes much easier.



Moving on, let’s erase that using the eraser tool which works the same way as in other applications.



Now to further illustrate this lets try to draw a circle.



Once you have gotten the hang of using the paint tool to draw basic shapes we will try to draw a face. Start with a circle



Next add lines as shown



We will now remove the line that is separating the head portions using the eraser tool.



We will now ad a nose to the head this proportions the face and allows us to judge were other features should be placed.



Next we need to add the eye brows to finish the proportions.



Now that the skeletal structure of the face is in place can add the hair. The simplest hair style to draw is the medium unkempt hair but there are many others that you could try. Once you have added the hair to the image be sure to erase any excess lines.



Now that you have the basic face, we can add color., using the fill tool,



Fill each area with an appropriate color. You can change the fill color in the Color Mixer sub menu



or by using the quick color selector.



So it should look something like this.



Now that you have the basics down lets try something a touch more advanced and add some shading. To add shading we will need to add a second layer to the image, for this we will need to use the time line menu.



Now right-click were it says layer 1. And click on “Insert Layer”



You will now have two layers listed in the timeline. This time left click on layer 1 and press CTRL and C. once you have done this you will need to select the pointer tool this is the black cursor button



Now click on layer two and right-click anywhere in the white area on the editable document. And then click on paste in place.



Now change the color in the color mixer to black and lower the alpha value to 30% and click the right hand dot underneath the lock on the layer 1 line to change make the layer un-editable.

----

Now use the eraser tool, to erase the black in the area’s you do not wish to be shaded



And there you have it your well on your way to being an animator as the first step is always making a good picture.

Edited by Magosis, 07 December 2005 - 02:24 PM.

[Magosis]

Lesson 2: Tweening Animation

In Macromedia flash there is a animation rendering system called Tweening. This system attempts to automatically fill all frames along the timeline of a simple animation. This can be useful for only simple animation however because the effects generated when Tweening a complex picture or multiple objects at the same time can produce undesired effects.

The first type of Tweening we will try is called a Shape tween this is the simpler of the two, as it does not requite grouping the images. We will start the process by drawing a circle. With the Oval auto-shape tool



So it should look something like this.



Now right click on frame 30 in the timeline. And click on Insert Keyframe.



At this point we need to make some changes to the image so it has something to change into through the animation. Lets change the fill color. As well as reposition the circle using the arrow keys.



Now we can add the tween. If you look at the timeline there are two frames one large and one small. We will need to click anywhere inside the large frame.



Now at the bottom of the screen there is a window called the property inspector.



In this box we will need to set the tween type to shape.



If you have done everything correctly, you have a very basic animation completed. To view the animation, you will need to click on Control and the Test Movie.



It should look something like this.



Now we will look at motion tweens although further information on these can be found in Post 5 – Lesson IV: Using Movie Clips. To begin lets left click on frame 30 in the time line and then right click on the circle on the main stage. And click on “Convert to Symbol…”




A popup window will appear be sure that the movie clip radio button is selected and press ok.



Now repeat this process for the first frame in the timeline.



Finally click anywhere in the first larger frame of the timeline and then in the property selector change the tween to motion.



If you have done everything correctly, you have another very basic animation completed. To view the animation, you will need to click on Control and the Test Movie.



And it should look something like this.



Not that you have seen the difference in behaviors of tweens I recommend taking some time and playing with them. The important thing to remember is that a shape tween can have anything on its layer except symbols. While a motion tween is a tween that can only have a single symbol on the layer.

Edited by Magosis, 07 December 2005 - 04:04 PM.

[Magosis]

Lesson 3: Frame by Frame Animation

While the tween feature is very useful there are just some things that cannot be done properly by it, this why it is important to know how to animate, by individual frames. The concept here is very easy but to make the animation look decent takes a lot of work when using this method.

If you ever attempted to make a flip-book cartoon as a child then you are familiar with the general concept of frame by frame animation. We will need some kind of starting point for our animation here so lets draw a basic stick man using the paint tool



He should look something like this



Once you have the first frame drawn right-click on frame 2 in the timeline and click Insert blank Keyframe.



We will now use a feature called onion-skins to allow us to have a reference for drawing the next frame. Click on the onion-skins Icon to activate it



This will cause a faded version of the original sick man to show on the stage. This is not going to show in the final animation but can be used as a reference.



We will now draw the next frame, be sure to not add to drastic of a change to the image or it will not look realistic.



Repeat this process as necessary adding additional Keyframe to the timeline



Once you have completed your animation test it be clicking on Control then test movie.



Play around with this a bit and see how realistic of motion you can achieve.



This is quite possibly the hardest part of the application to become good at so practice makes perfect and when you are comfortable with your skill move onto the next section.

Edited by Magosis, 07 December 2005 - 04:40 PM.

[Magosis]

Lesson 4: Using Movie Clips

Macromedia Flash has a useful feature called movie clips these act as independent movies from the rest of the timeline. These Movie Clips are mainly used in applications such as games and user interface tools but they do serve a valuable purpose in the animation end of the program as well.

In this lesson we will make a bouncing ball. First we will need to click Insert, and then New Symbol.



Next the new symbol box will appear, be sure that the Movie Clip radio button is checked and press ok.



This will open the instance of the movie clip for editing. Since we are just making a bouncing ball lets first draw a circle with the oval tool.



So it will look something like this.



Now we will use a shape tween to make the ball move up and down. Right-click on frame 20 and click Insert Keyframe



Next we will right-click on frame 40 and insert a Keyframe.



We will now left-click on frame 20 and press the up arrow key approximately 40 times. This will move the ball up substantially.



Next we add the shape tween by clicking on the time line in the first large frame



And setting the tween type to shape



Finally to help simulate Gravity we will set the ease of the tween in the property inspector to 90



Now we will ad the animation for the ball falling. We will start by clicking on the timeline in the second large frame.



And setting the tween type to shape



Finally to help simulate Gravity we will set the ease of the tween in the property inspector to -90



Now lets see how that looks by clicking on Control and then Test Scene.



It should look something like this:



We now need to go back to the main stage this can be accomplished by clicking on the blue arrow in the upper left hand side of the screen.



At this point we will need to add the symbol we just made to the main stage. You will need to drag it from the library menu onto the stage



Next using the scroll bar under the timeline, scroll over to fame 120 and right-click and click on insert Keyframe.

--

Now move the ball horizontally to the opposite side of the stage. After which click on the first large frame in the timeline and add a motion tween



Now we will view the final product by clicking on Control and Test Movie.



It should look something like this:



As with the other Lessons I recommend you spend some time and play with these features we have covered, this will allow you to get a better feel for the tool before moving onto the next lesson.

Edited by Magosis, 08 December 2005 - 01:35 AM.

[Magosis]

Lesson 6: Basic Scripting for animation Effects

In some cases we have a movie clip that is tweened but we need it to behave differently than simply looping. To achieve this we will need to use the first elements of scripting.

When most animators hear scripting they shudder but in flash it is quite simple to use basic commands to bypass the use of difficult Frame by Frame animation.

In this we will be using the following codes

gotoAndPlay(#);

This code sends the player head to a certain frame on the current timeline and plays from there

gotoAndStop(#);

This code sends the player head to a certain frame on the current timeline and stops it there

this. gotoAndPlay(#);

This code sends the play head of the selected movieclip to a certain frame and plays it from there

this.gotoAndStop(#);

This code sends the play head of the selected movieclip to a certain frame and stops it there

The most important thing to understand when using any scripting in Flash is that scripts can be attached in two places. The first place you can attach a script is to a frame in the timeline. This can be a frame in either the main timeline or a movie clip timeline. If a frame has script in it, it will appear like this.

The codes you would attach to a timeline are

gotoAndPlay(#);
gotoAndStop(#);

The other place you can attach a script is into a movieclip object it's self. The codes you would attach to a movieclip are, these work similarly and we will look at them further in later lessons.

this. gotoAndPlay(#);
this.gotoAndStop(#);

Now the usage of this might seem a bit obscure but I can assure you that these will be very useful when animating movieclips as you can use these to have a movie clip internally loop.

As this can be a somewhat difficult concept to simply explain, lets get down to it.

First we are going to create another movie clip



We are going to use the oval tool once more to create a circle



It should look something like this



Now in this movie clip we are going to add a second layer as we did in the first tutorial



This second layer for the time being will have nothing on it



Selecting the first layer again by clicking on the frame that we drew the circle in



We are going to modify the circle with the black cursor tool



Use this tool to stretch the circle by clicking anywhere on the white space of the stage and then clicking and dragging on the border of it



The goal here is to make it look something like this.



We are now using F6 going to add a second frame to each layer of the timeline. This can be done by clicking the second frame of either layer and dragging to highlight the second frame of the other.



We then press f6 to add the new frames.



Here is were you finally get a bit of creative license. On the second layer of the timeline we are going to animate eyes for our little friend here these will slowly open and be animated frame by frame. Be sure for each frame you add to the second layer you also add one to the first so the body remains constant



We are now going to add one more frame to the animation of both layers this frame should not have any changes from the once prior

---

Next on the bottom timeline, We will add a key fame using F6, six frames over from the one we just added



From this frame we will count another six frames over and add another key frame six more over.



highlighting the second of the larger frame sets on the first layer



we will use the transform tool



to vertically stretch the body of our creation



Next we will once again highlight the second large frame set



and set the frames to a shape tween.



We will then do this for the second large frame set



again changing them to a shape tween.



Next we will click on the timeline, on the second layer above the last frame of the animation and press F5.

---

We will now click controls and then test scene it should look something like this



Not exactly the picture of smooth animation, this is were the scripting comes in. We are now going to add another layer to this animation. This layer will be solely used for the script associated with the MovieClip time line.



We will then click and drag the layer we just created to be the bottom layer

------

we will now on Layer 3 highlight the frame directly below the first large frame set



also at this point be sure to note the frame number, in the case of our example the frame number is 10



now on layer three, click on the final frame of the animation.



Here we will create a key frame by pressing F6.



Now we will add the script to this first we will need to expand the actions interface. This can be done by clicking on the arrow next to where it says actions above the property inspector.



now that the actions tool is open we will click inside the white space of the actions tool, and a text cursor will apear.



in this box we will type in "gotoAndStop( " the frame number we took note of from the earlier step, in the case of our example this was 10 and then ");" looking something like this



now if we go to controls and click on test scene



it should look like this.



***Refresh the page to see this animation***

Alternatively if you click on the final frame of Layer 3 and change "gotoAndStop" to "gotoAndPlay"



You will achieve an effect that looks like this.



***Keep in mind I am limited to displaying GIF's here so there is a end point as I cannot employ swf ActionScript in a GIF***

Well this is yet another lesson under your belt. Congrats, But as always I encourage you to play with what you have learned here. The next lesson will finaly be your first real flash project. So make sure you are comfortable with all of the tools we have seen here before moving on.

Edited by Magosis, 01 August 2006 - 01:18 PM.

[Magosis]

Lesson VII: Your first project

In this lesson we are going to look at animation process as well you will begin your first project. We will also be looking at how to use scenes in an animation to organize our project and how to use folders in the library to do the same.

When one starts a project a bit o forward planning is often required. In this case I recommend drawing a storyboard and possibly writing a scrip, if the course of the animation is textual or verbal.

Click here, to download a story board template I have made. This is a useful too for many people in the planning stage. Alternatively you may use flash or another image editing program to emulate this in a digital environment. Remember at no time is this pre-planning written in stone, however as you are creating the piece you may find some things not working while others working exceptionally well, allow for this and adapt to it.

Whenever working on a project of any scale don't rush. All too often when w are proud of our work we want to rush and show it off. When you rush you get sloppy. This is no to say there are not short cuts and we have already explored a few o these, but when in dought do it frame by frame.

Now onto organization, this is likely my biggest failing as an animator but I still will show you the proper way to organize animation.

Firstly scenes are used much as they are in movies to separate changes in location or dramatic camera shifts these will allow you to keep smaller more manageable timelines and layers if you break up large changes in scene or perspective into multiple scenes.

To bring up the scene menu hold shift and press F2. A menu will appear much like this.



By default your first scene in named "Scene 1" you can double click on he scene name to change it.

Below the scene list there are a number of options they are

Duplicate Scene



Add Scene



And Delete Scene



To add a sene obviously click Add Scene, and the new scene will appear in the scene list with a name like "Scene x" were x is a number based on how many scenes have been made. This scene will appear as a blank timeline and stage much like if you had started a new document.



Some times when multiple symbols are being used the library can get quite cluttered. This can be frustrating if you are looking for a certain object. A method to avoid this and manage your work better over multiple sittings is to sort the library object by using folders

Press F11 to bring up the library and notice in the bottom left of the library window, there are some icons.



The icon we are concerned with here is the, Add Folder icon.



Click on add folder will add a new folder and prompt you to name it, to the library you can drag symbols from the library into this folder



To expand or collapse this folder just click on the folder icon next to it's name in the library.



You can add folders inside of others by clicking on the folder you wish to be the parent



And then pressing the add folder button.



Generally when animating is I good to sort movie clip objects by the following system, or something similar



Now that we have looked at the basics of organization these is on more aspect we need to look into before we can get to work. We are now going to be looking at stage size and background color.

Firstly you will need to click on the black cursor tool



Now click anywhere on the stage with no content

The properties inspector should change to look like this



Clicking on the color selector box next to background



Will bring up the standard color selector menu to change the background color just select a new one



To change stage size click on the size/document settings button



A new window will appear



From this window you can change the numeric values of the document size as well as the frame rate.

When you have the settings you like press o.k.

We are now ready to start your first project. As I mentioned earlier an story board and script of some kind will help you flech out your initial ideas. Your first project will be to create a scene with the following specifications:

600 pixels by 600 pixels in size
24 frames per second
At least 2 distinct original characters
At least one object they interact with
At least one scene change
Should have © Your name – today's date
Should be posted some were for others to see (not required but I can't give you advice if it's not)

When you are done your animation you will want to export it to a .SwF file these files are the web viewable flash format. To do this, click on file in the upper left of the screen.



Then click on export, and then export movie.\



It will ask you to save it under a file name so name it appropriately



Finally it will ask you to select your export settings,



For the most part we want to leave these at their defaults for now, except make sure there is a check mark next to "Protect from Import" this will help stop people from stealing your work, if you put it on the web.



Finally click ok to save the .SwF file

Keep in mind an SwF is not an editable file you will also want to be saving your work periodically by holding control and pressing the s key. This will save it as a .Fla file that is editable.

This concludes the basic animation part of my tutorial. Before moving on o the next section it may be good to review what we have gone over so far as practice is a much better teacher than I could be.

Edited by Magosis, 15 November 2006 - 06:31 PM.

[Magosis]

Post 8 – Lesson VII: Buttons

Edited by Magosis, 07 December 2005 - 02:03 PM.

[Magosis]

Post 9 – Lesson VIII: Player Commands and Frame Use

Edited by Magosis, 07 December 2005 - 02:04 PM.

[Magosis]

Post 10 – Lesson IX: Text Input and Variables

Edited by Magosis, 07 December 2005 - 02:05 PM.

[Magosis]

Post 11 – Lesson X: Object and Level Referencing

Edited by Magosis, 07 December 2005 - 02:07 PM.

[Magosis]

Post 12 – Lesson XI: Movie Clip Behavior and Properties

Edited by Magosis, 07 December 2005 - 02:08 PM.

[Magosis]

Post 13 – Lesson XII: Math Functions

Edited by Magosis, 07 December 2005 - 02:09 PM.

[Magosis]

Post 14 – Lesson XIII: Logical Statements (if, else)

Edited by Magosis, 07 December 2005 - 02:09 PM.

[Magosis]

Post 15 – Lesson XIV: Logical Statements (for, while)

Edited by Magosis, 07 December 2005 - 02:09 PM.