Since time is running short, and since I really want to see what you can do with this amazing program, I want to leave the end result somewhat up to you. There are a variety of tools available for building, crafting, smoothing, and texturing models in Maya. You won’t have time to become a Maya master before the end of the semester, but I encourage you to come back during second semester or download Maya on your home computer (if you have a new/fast enough computer) and practice more with it. Maya does so much more than just modelling, you can get into creating really neat animations with your models when you’re done. This is a high priced professional program, so it can do almost anything!

Your job is simple – create a realistic, appealing, interesting model. You’ll have to use the tools available to build it well, and then take the time to colour it and texture it so that the end result looks like a real item. Use the tutorials in the Robson213Files folder or online as provided in the Maya introduction post, and see what your skills and imagination can come up with!

Check out some samples of models that other students just like you have made!

Hopefully it goes without saying that I want you to take your time and do a great job on this one. You really need to spend time learning the program before you can adequately show what it can do, so don’t be afraid of doing some practicing & learning first!

As you’ve seen, there are some 3D modelling programs that you can use for free, including Sketchup, Tinkercad, and another common one that we won’t explore too much right now, Blender. All provide a lot of options and functions that will allow you to explore the world of 3D modelling and basic animation, and you’re encouraged to keep working with those.

For now, we’ll move on to one of the more professional applications, Maya. It’s a program that is used widely in professional settings, so it provides a lot more options than the free programs. Luckily, the makers of Maya provide free copies of their software for teachers and students, so we’re able to use it at school and you could download and install at home if you wish. (There are lots of other great programs which work on PC but not on our Macs.)

Maya is installed on your computer (and only that computer.) Unfortunately our computers are on the low end of the requirements for the program, and it takes a lot of computer memory to run, so you should CLOSE EVERYTHING ELSE if you can. You should also make sure to SAVE YOUR WORK OFTEN!

When you first open Maya, you’ll get a prompt offering you “Essential Skills Movies.” Those are a good overview, but they move quickly and don’t go into much detail. You’re encouraged to check those out, but don’t get frustrated if you don’t get much out of them. At least they show you what you can do as you learn more.

There is a good online book style training manual which you can check out.

They also have a series of videos that will guide you through different aspects of the program, as well as a YouTube Channel.

There are also videos being added to the Robson213Files folder. The first ones just go over what the program can do, but we will soon get into more things that you will do. For now, watch the introductory videos and get used to the program. There are as usual Exercise Files which allow you to work alongside the videos, and those are very handy.

Play around and get used to what the program can do, because we’ll be moving into doing assignments with the program soon, and the more practice you have the easier those will seem.

Once you’ve mastered the basic tools in Flash by doing lots of drawing, learning about different types of tweens and symbols, added audio, and added some Action Script, it’s safe to say that you have a pretty good understanding of the basics.

Now it’s time to start looking at the second part of our course, 3D Modelling. This one comes with a wealth of other options and possibilities, and there is a lot more to understand before you can really get comfortable, but once you do, the options are basically limitless.

There are a lot of different programs that will do 3D modelling and animation, and we may end up looking at a few. Even Photoshop can do a lot of this type of work now, so it’s becoming more commonplace.

We’ll start off with some basic concepts and one of the most common and basic 3D modelling programs.

In Flash, we’re used to making things move side to side or up and down, or any combination of those (any angles or diagonals.) But now we have to consider that things can move and exist in 3 dimensions. Now our shapes don’t just have with and height, they’ll have depth as well. Whereas before we just moved along the X and Y axis, now we add in Z.

What is 3D Modeling?
To answer this questions, we have to first understand what 3D means. Thinking in 3 dimensions takes some getting used to.

• 3 Dimensional design requires planning for height, width and depth
• When making changes to an object, you must consider all sides and angles.
• You have to view your object from various angles.
• When positioning multiple objects, there is now another dimension of space to consider

3 Dimensional space is measure in 3 Axes.

• X axis = Width – Right To Left
• Y axis = Depth – Toward or Away
• Z axis = Height – Up or Down

In the 3D Industry it is universally accepted to identify each axis with a color:

• X = Red
• Y = Green
• Z = Blue

An easy way to keep it all straight is to remember: XYZ = RGB.

 

IMPORTANT ADVICE: most of the programs that we’ll be working with assume that you have a 3 button mouse, and will work best if you do. Yours may or may not be set up as a 3 button mouse, so you should do the following:

Open System Preferences, and go to Mouse. Make sure that the ball on top of your mouse is set to “Button 3”

Learn and practice this with some easy tutorials for Google Sketchup. They are in the Robson213Files folder, or can be accessed online. You’ll want to download them and open them in Sketchup.

Press “Start Using Sketchup” to begin.

When opening these tutorials, you’ll get a warning, because they were created in an older version of Sketchup. Feel free to click “Do not warn me again.”

1. Introduction to Sketchup

2. Start a Drawing, part 1

3. Start a Drawing, part 2

4. Start a Drawing, part 3

There are also some video tutorials that contain some great examples and information. Unfortunately they move VERY quickly, so you should really pause the video regularly and practice the techniques as you go.

Exercise #12 : Practice these techniques by creating a model of your house (or the school). Try to be as accurate as possible, but we’re not being exact just yet, so just make it look somewhat realistic and accurate.

Action Script can get kind of complicated. There are entire courses just on Action Script. If you’d like to pursue your knowledge, let me know and I’ll get you some of those.

In the meantime, we’ll do a few basic types of commands with Action Script and then move on.

Go into the Robson213Files folder, then AN35S, then tutorials, then 16_ActionScriptBasics

One interesting thing about Flash is that sometimes when we use Flash, we need it to communicate with the Internet, but your computer doesn’t really like it when Flash tries to connect to the Internet in the background. This can make some things a little more complicated. We can, however, change the settings to tell your computer to let Flash communicate.

In order to follow along with the tutorials, you need to change the settings so that those files can communicate. If you’re building your own, similar projects, you’d need to apply these settings to your folder.

Go into the ExerciseFiles folder, and look inside of any of the folders for chapter 16:

Open up one of the files and right click anywhere in the window. “Choose Global Settings…”

That should open up your System Preferences and take you into the Flash settings. Choose “Advanced” and scroll all the way down to the bottom. Choose “Trusted Location Settings…”

You will now have a window that will list your currently trusted file locations (likely none) and will allow you to add ( + ) or delete ( – ) locations from your list. You want to add any location that contains Flash files. I’ve chosen to allow my entire Robson213Files folder to communicate. I also chose the location where I store my Flash work (for you, it should be your Drive or DropBox folder.)

This won’t always be necessary, but for the files in the tutorials, as well as future files that you may create, you may want to make these changes if necessary.

Have you ever made a project in Flash that was so long that it took you 5 minutes just to figure out which keyframe you wanted to modify? Or how about a project where you have so many layers that it becomes impossible to find the one you’re looking for?

Using scenes helps solve these problems. Not only does it make it so that your timeline isn’t a jumbled mess, but it also helps you to organize your animation into logical sections (ex. Introduction, body, conclusion.)

1. Open mousemaze.fla

2. Select Window > Other Panels > Scene to open your Scene panel. You should get a window that looks like this:

In this window, you can browse through all of the scenes in your movie, add scenes, rename them, etc.

3. Double-click on Scene 1 to rename it. Call this scene Maze.

4. Click on the Add Scene button at the bottom of the Scene panel:  to add a new scene. Rename this scene as Introduction.

5. Drag the Introduction scene so that it is above the Maze scene in your panel.

When you insert scenes into your animation, they will play in the order that you have chosen in the Scene panel (top first, bottom last). They will play continuously (they won’t stop playing when a new scene starts) unless some ActionScript code tells them to.

By selecting a scenes in your Scenes panel, you can browse through it on the stage. Notice that when you select your newly created Introduction scene, It is completely blank timeline. If we go back to the Maze scene, all of your previous animation is still there!

Introduction Timeline

Maze Timeline

6. In your Scene panel, select your Introduction scene.

7. Rename Layer 1 to Background. Insert frames (F5) up to frame 50.

8. Select the rectangle tool. Set the fill colour to green, and the stroke to none.

9. Draw a rectangle across the whole stage.

10. Create a new layer. Call this layer amazed.

11. Using the text tool, add text to your animation that says “Prepare to be amazed…” onto your amazed layer. Format your text any way you choose, but do take the time to make things look the way you would like them to (ie. choose your own font, size, colour, etc.)

12. On your amazed layer, add keyframes at frames 10, 20 and 30.

13. Add motion tweens between frames 1 and 10 on your amazed layer. Set the transparency (alpha) for frame 1 to 0%, and frame 10 to 100%.

14. Do the same thing between frames 20 and 30, but set frame 20’s transparency to 100% and frame 30’s to 0%.

[kml_flashembed publishmethod=”static” fversion=”8.0.0″ movie=”http://www.cacourses.com/AN35S/flashfiles/asscenes1.swf” width=”400″ height=”300″ targetclass=”flashmovie”]

[/kml_flashembed]

Notice that if we press play once the mouse is done running through the maze, the animation doesn’t go back to when the mouse is entering the maze: it goes to the beginning of the Introduction scene. So when the movie loops to the beginning, it doesn’t go to the beginning of the current scene; it goes to the beginning of the first scene.

As you can see, our movie plays the scenes in the order they appear on the Scenes panel. If we reversed the order, they would play like this:

[kml_flashembed publishmethod=”static” fversion=”8.0.0″ movie=”http://www.cacourses.com/AN35S/flashfiles/asscenes2.swf” width=”400″ height=”300″ targetclass=”flashmovie”]

[/kml_flashembed]

15. Insert a new layer in your Introduction scene. Name this layer mouse.

16. Insert a keyframe on this layer at frames 30 and 40.

17. Select frame 30 on your mouse layer. Using the text tool, add text that says “By the magical maze-solving Mousedini!” You can choose a different name for your mouse if you’d like. Again, format the text any way you like.

18. Add a motion tween between frames 30 and 40 on your mouse layer. Set the text’s transparency at frame 30 to 0% , and frame 40 to 100%.

[kml_flashembed publishmethod=”static” fversion=”8.0.0″ movie=”http://www.cacourses.com/AN35S/flashfiles/asscenes3.swf” width=”400″ height=”300″ targetclass=”flashmovie”]

[/kml_flashembed]

Now we have to start adding some ActionScript, so that we can choose when our introduction continues playing.

19. Insert two new layers on your main timeline. Call the first layer actions, and the second layer buttons.

20. Add keyframes to frame 40 on both the actions and buttons layers.

21. Select frame 40 on your buttons layer. From your library, drag a playbutton object onto your stage.

22. Select the playbutton instance on your stage. In the property inspector, set the instance name to start_btn.

Note*** Recall that you can have as many instances of any symbol as you want, and still have them work properly with ActionScript. You just have to make sure and give all of them different instance names!

23. Select frame 40 on your actions layer.

24. Open the Actions panel.

25. Tell Flash to stop playing at this point by typing

[kml_flashembed publishmethod=”static” fversion=”8.0.0″ movie=”http://www.cacourses.com/AN35S/flashfiles/asscenes4.swf” width=”400″ height=”300″ targetclass=”flashmovie”]

[/kml_flashembed]

26. Type in code that will tell Flash to do something when the play button is pressed:

So now we have to add in some code to make our play button direct the user to the next scene. We can do this by using our gotoAndStop or gotoAndPlay command.

When we’ve used gotoAndStop before, all we’ve put in the brackets is the number of the frame that we want to go to. We can also specify the scene.

27. Inside the curly brackets in our function, type in: 

Note*** When we tell gotoAndStop what scene to go to, we have to put the name in quotations. If you try to go to a specific scene, but forget to put it in quotations, your ActionScript won’t work!

What this tells Flash is: “Jump to the scene named Maze, then go to frame 1 and stop playing.” While we could have done the same thing by using the play() command, this prevents future problems from arising.

For example, what if we decided to insert a scene between the Introduction and the Maze? The animation would start playing that scene, even though we wanted to jump to the Maze scene.

[kml_flashembed publishmethod=”static” fversion=”8.0.0″ movie=”http://www.cacourses.com/AN35S/flashfiles/asscenes5.swf” width=”400″ height=”300″ targetclass=”flashmovie”]

[/kml_flashembed]

So now we can make our animation jump from the Introduction to the Maze scene. Lets do the opposite as well, so that we can watch our animation all over again from the beginning.

28. In the Scene panel, create a new scene. Call this scene Conclusion.

29. In your Conclusion scene, rename Layer 1 to buttons.

30. Insert a new Button symbol. Name it restartbutton.

31. Create a button that will restart your animation, looking something like this:

32. Go back to your main timeline of your Conclusion scene. On your buttons layer, drag your new button onto the middle of your stage.

33. In the property inspector, give your new button an instance name of again_btn.

34. Create a new layer named actions.

35. Click on frame 1 of your actions layer and open the Actions panel.

36. Tell your animation to stop by adding the stop(); command.

37. Add the following code to the end of your actions:

So our full code for this scene is:

Just like when we used gotoAndStop to jump between scenes, we can do the same thing with gotoAndPlay. Here, we are telling our animation to go to our Introduction scene and play from frame 1.

[kml_flashembed publishmethod=”static” fversion=”8.0.0″ movie=”http://www.cacourses.com/AN35S/flashfiles/asscenes6.swf” width=”400″ height=”300″ targetclass=”flashmovie”]

[/kml_flashembed]

Now we know how to start and stop animation, add buttons, navigate around our animation, and how to use scenes to our advantage. This is only one small part of what ActionScript can do.

38. Save this Flash animation as mousemaze.fla and complete assignment6.

Now that we know how ActionScript works, we’re going to start adding in some code that’s a little more useful. Having your animation stop whenever you want is OK, but what if we want to control the playback of our animation using buttons on the screen?

1. Open mousemaze.fla

2. On your main timeline, insert a new layer between your mouse layer and actions layer. Call your new layer buttons.

Note*** Because none of our buttons are animated, it’s ok to put them all on the same layer. If we were going to add tweening to them, they would each need to go on a separate layer.

3. Select Insert > New Symbol. Call this symbol playbutton, with a type Button.

4. Draw a play button for yourself, with the triangle play symbol on it. Although there are button assets available to you in Flash, for now, you need to take the time to draw the buttons for yourself.

5. Go back to your main timeline. Select the buttons layer, and drag the playbutton symbol from your library to the top-left of your stage.

So we have a play button on our stage, but nothing happens when we click it. That’s because we have to tell Flash what we want it to do when we click the button before it will do anything!

Note*** To control symbols using ActionScript, we must first give each individual symbol a unique instance name. This is important so that if we dragged 10 instances of a play button onto the stage, we would be able to tell them apart by their instance name.

To change a symbol’s instance name, select the symbol on your stage. In the property inspector, you can change the instance name to whatever you like (but be sure to follow the naming rules below!)

Important: When you are changing your instance names, there is a specific format that will make it very easy to use ActionScript later. The format is:

(name)_(symbol type)

So what this means is that in the name section you can give your symbol a name that will help you to identify it. So if you had an instance of a cloud on your stage, a good name for it might be cloud. The symbol type will be, in most cases, either a movie clip or a button.

Movie Clip: mc
Button: btn

So if our cloud symbol were a movie clip, the full name would be cloud_mc. If it were a button, the name would be cloud_btn.

6. Select your playbutton symbol on the stage. In the property inspector, change the name to play_btn.

7. Select the first frame of the actions layer. Open the Actions panel (Window > Actions if you haven’t already, you should dock this with the other panels in your WorkSpace.)

When we have symbols on the stage with instance names, we can call on them by name to change their properties or to do certain things. To do this, we have to type the instance name (upper and lower case matter, so always use lower case to be consistent) followed by a period (aka dot).

8. In the Actions panel, type: 

9. After onPress type: 

By putting in the dot, we are telling ActionScript that we want to do something to the symbol. In fact, as soon as you put the dot after the instance name, Flash automatically knows you want this instance of the symbol to do something. This is why a list of available actions appears automatically.

So your full code should appear as seen below:

There are a few things we need to know about this code:

First, we need to know about events. Events are things that happen in your animation, such as a mouse click, a button pressed on a keyboard, etc. In this case, onPress tells Flash that the event it should watch for is a mouse click on our play_btn instance.

Second, we are using something called a function. A function lets you group together one or more ActionScript commands, which will execute in the order they appear. For our code, this function will only run when our button is clicked by a mouse. When a function waits for an event to occur before executing, it is called an event handler.

Note*** Make sure you type the code exactly as it is here, or it won’t work! That means include both sets of brackets: () and {}, and to make sure everything is either capital or lowercase as it is shown here. If you miss either of these things, your code won’t work!

By inserting some ActionScript into our function, we can tell Flash exactly what it should do when this button is clicked.

10. Inside of the curly brackets {} in the function code, we can tell Flash what to do when the event occurs. Lets tell it to start playing, by typing inside the curly brackets.

So our code now should be:

If we translated this into English again, it would say: “Whenever a symbol named play_btn is clicked with a mouse, start playing the animation.” Test your movie to see what happens.

[kml_flashembed publishmethod=”static” fversion=”8.0.0″ movie=”http://www.cacourses.com/AN35S/flashfiles/asbutton2.swf” width=”400″ height=”300″ targetclass=”flashmovie”]

[/kml_flashembed]

So when we click the play button while the animation is running, nothing happens. That’s OK; if we tell Flash to play, and it is already playing, nothing should happen! If we click the button when the animation is stopped at the end, it starts playing again. That’s because when the animation starts playing at the end, it automatically loops back to the beginning again.

So we can start the animation playing if it’s stopped. What if we wanted to stop our animation if it is already playing? This will be done in a similar way.

Creating a Stop Button

11. Using the same method as we did to make the play button, insert a new symbol. Call this symbol stopbutton, and set the type to button. Make sure that your button has the square stop symbol on it.

12. Once this symbol is in your library, select the first frame of the buttons layer on your main timeline. Drag the stopbutton symbol onto the stage, beside the play button.

So now we have to add some ActionScript for this button to work; but before we do that, we need to give this button an instance name, so that Flash knows what object we’re trying to add code for.

13. Select the stopbutton symbol. In the property inspector, name it stop_btn.

14. Select the first frame of the actions layer. Open the Actions panel.

15. Below the code we already have, we are going to add some more code:

If we translated this into English, it would say “Whenever the symbol named stop_btn is clicked with a mouse, stop the animation.”

So now our full code should look like this:

Our animation now has both a play and a stop button:

[kml_flashembed publishmethod=”static” fversion=”8.0.0″ movie=”http://www.cacourses.com/AN35S/flashfiles/asbutton4.swf” width=”400″ height=”300″ targetclass=”flashmovie”]

[/kml_flashembed]

So now that we know how to control whether our animation is playing or not, how do we tell Flash to go to a specific frame? What if we wanted to add in a rewind button?

Creating a Rewind Button (Go To Function)

Insert a new button symbol, and call it rewindbutton. It can either say “Rewind” on it or have the double triangles on it:

16. Drag your button onto your stage beside the other buttons. In the property inspector, give this button an instance name of rewind_btn.

17. Select the first frame of your actions layer. Open the Actions panel and create a new function for your rewind button:

The question is, what code do we put in the function section, so that our animation will rewind? To do this, we have to introduce two new commands: gotoAndPlay, and gotoAndStop.

Both of these do exactly what they sound like: either go to a specific frame and start playing, or go to a specific frame and stop playing. So how do we tell Flash what frame we want it to go to? This is where the brackets after certain commands comes in: we can give it a certain frame number to jump to.

18. Inside the curly brackets for the function, type:

What this tells Flash is: “I want you to go to the frame number one, and stop playing once you get there.” So for this function, our animation will go to frame 1, and stop playing.

Here’s what our full code looks like now:

Now our animation should run as seen below:

[kml_flashembed publishmethod=”static” fversion=”8.0.0″ movie=”http://www.cacourses.com/AN35S/flashfiles/asbutton5.swf” width=”400″ height=”300″ targetclass=”flashmovie”]

[/kml_flashembed]

Now that we know how to control our animation, we can tell Flash to start, stop, and jump to certain frames. Using gotoAndStop and gotoAndPlay, we can also create separate scenes, and navigate between them.

Save this flash animation as mousemaze.fla and move on to the next lesson.

So far we have learned how to create images and text in Flash, and how to tween these things in various ways. This is only half of what we need to make a really good Flash animation; right now, all we can do is watch our animation from beginning to end. What if we want to make our animation jump to different times, or if we wanted to make a game in Flash? To do this, we need to use something called ActionScript.

ActionScript is a scripting language (similar to other programming languages like Java) that allows you to control your animation in ways that would be otherwise impossible. It can be used to control the playback and add interactivity to your animations.

Start by creating a new Flash file. Use Action Script 2.0. Make sure the frame rate is at 20fps, the screen size is 550 x 400 and the canvas colour is set to white. Save this file as mousemaze.fla in your Drive or DropBox folder.

1. Change the name of your first layer on the main timeline to maze.

2. Select the rectangle tool, set the stroke to black, and the fill colour to red. Use this to create a simple maze.

Here is an example:

3. Lock the maze layer. Create a new layer called mouse.

4. Select Insert > New Symbol. Name it mouse, with a type of Movie Clip.

5. You should now be editing the mouse symbol. Create a mouse, if you were to see it from above.

Note*** Make sure your mouse is properly aligned:

not aligned properly	aligned properly

In addition, make sure your registration point is in the same spot as the crosshair. If your mouse is aligned so that the center is in the center of the entire mouse, including the tail, your mouse will look very strange when it turns corners. So when you are aligning it, make sure the center is in the center of the mouse’s body not including the tail!

6. Go back to your main timeline. Drag your mouse symbol from your library to the start of your maze.

7. Motion tween your mouse so that it moves through the maze and comes to its first corner. This should take about 20 frames. Make it stop just before it gets to the corner.

[kml_flashembed publishmethod=”static” fversion=”8.0.0″ movie=”http://www.cacourses.com/AN35S/flashfiles/astimeline1.swf” width=”400″ height=”300″ targetclass=”flashmovie”]

[/kml_flashembed]

8. To make the mouse turn the corner, motion tween it so that it moves all the way past the corner. Select the free transform tool and use it to rotate the mouse until it is facing in the right direction:

before turn	after turn

Your timeline should now look something like this:

9. Repeat these steps until the mouse makes it out of the maze. Lock your mouse layer when you are done.

[kml_flashembed publishmethod=”static” fversion=”8.0.0″ movie=”http://www.cacourses.com/AN35S/flashfiles/astimeline3.swf” width=”400″ height=”300″ targetclass=”flashmovie”]

[/kml_flashembed]

So now we have a mouse that runs through the maze. What if we want to change the way the movie plays? For example, what if we wanted to be able to tell Flash that we wanted the movie to stop at a specific frame? That’s where ActionScript comes in.

Inserting Action Script on the Timeline

ActionScript can be added to any keyframe of any layer on your timeline. When your animation encounters the ActionScript while your movie is playing, Flash will run whatever commands you have included.

THIS IS VERY IMPORTANT: ActionScript should only be on one layer of your animation! What this means is that you should always have a dedicated layer for ActionScript, and that nothing else should go in this layer.

This might not seem that important for our purposes, but imagine if we had 10,000 lines of ActionScript code in our project. If we had our ActionScript all in different places, it would take a long time to find where a specific action was!

10.  On your main timeline, insert a new layer. Call this layer actions.

This will be the only layer that we can put ActionScript in!

Note*** ActionScript can be included in any keyframe. Whenever your animation encounters the ActionScript in a keyframe, it will run whatever commands you have included.

11. On the actions layer, insert a keyframe on the last frame of the animation.

12. Click on the keyframe you’ve just created. If you haven’t already opened it, select Window > Actions to open the Actions panel for that keyframe. You should get a window that looks like this:

Note*** Make sure you have the correct frame selected before opening the Actions panel. If you have the wrong frame selected, or you have an object or symbol on the stage selected, your ActionScript will run in a place you don’t want it to!!!!!

The first command that we will learn is how to make a movie stop playing. This means that instead of having your movie keep looping once it gets to the end, we can tell it to stop ourselves!

We’ve used this command before, in exercise 2, but now let’s stop and understand how it works.

13. In the Actions panel, type stop();

There are a few things we need to know about ActionScript:

1. If your ActionScript turns blue, that means that you have entered code that Flash recognizes.
2. Most commands need brackets after them. The brackets may or may not have something inside of them; in this case, there is nothing inside of them. We will talk about when to put things inside of them later.
3. Every ActionScript command needs to end with a semi-colon. This tells Flash that the current command is ended, and to move on to a new command on the next line.

Once you have inserted ActionScript to the keyframe, your timeline will look something like this:

Notice the “a” that appeared on the actions layer. Whenever you see this on a keyframe, that means that there ActionScript code on that keyframe that will be executed when the animation gets to that frame.

Our movie should now look like this:

[kml_flashembed publishmethod=”static” fversion=”8.0.0″ movie=”http://www.cacourses.com/AN35S/flashfiles/astimeline4.swf” width=”400″ height=”300″ targetclass=”flashmovie”]

[/kml_flashembed]

So when the animation gets to the last keyframe, ActionScript tells it to stop playing. You could technically use this in any keyframe to stop an animation. It doesn not need to be used only at the end.

Save this flash animation as mousemaze.fla and move on to the next lesson.

Until now, we’ve been using only the main timeline to create tweens and animations. While this works in most cases, sometimes this complicates things. If we use movie clips, we can add animation to individual parts of a larger symbol.

Start by creating a new Flash file, Action Script 3.0, and in the property inspector, change the frame rate to 20fps, leave the size as 550 x 400 but change the canvas colour to white. Save this file as skateboarder.fla in your Drive or DropBox folder.

1. Change the name of the first layer to Sky.

2. Select the rectangle tool, set the stroke to none, and the fill colour to blue.

Use this to create a sky across your whole stage.

3. Using the pencil tool, draw some clouds onto the upper area of your sky. Use the paint bucket tool to colour them white.

4. Lock your sky layer, and create a new layer. Call this layer Ground.

5. Using the rectangle tool, create some grass on the lower half of the Ground layer. Make sure the stroke is set to black, and the fill to green. Use the Deco Tool to add some trees and flowers. Add different kinds of foliage to change things up.

6. Use the rectangle tool to draw a road on the lower half of the grass.

7. Select the line tool, set the stroke to yellow and the stroke height to 3. Set the stroke style to Dashed.

Click on the pencil to Edit the Stroke Style.

Set the Dash to 40 pts and the Spacing to 40 pts. (you can play around with this if you want to change those settings a bit according to your personal preference.)

Use this to draw some lines on your road.

8. Select Insert > New Symbol. Name this symbol skateboarder, and make sure the type selected is Graphic.

9. You will have a white screen where you can modify your skateboarder symbol. Your timeline bar should look like this:

At the top of the screen, you should see this:

On the left you can click the arrow or Scene 1 to return to the main timeline. On the right, you’ll see the name of the symbol.

10. Rename your first layer to Skateboarder.

Note*** When editing a symbol, you can create layers, just like on the main timeline; the difference is that these layers exist only within the skateboarder symbol, and nowhere else.

11. Draw a person on a skateboard, but without wheels. Use any of the tools in your toolbox. Here is an example:

Recall: The crosshair on the stage is the center of the object, and will determine how your symbols tween. As well, symbols have “Registration Points”, which can also mark the center of the symbol. This will be very important later! If you would like a recap on registration points and the center of a symbol, you can find it here.

We are leaving out the wheels for one important reason: if we want the wheels to spin by themselves, they need to be tweened separately from the rest of the skateboarder. While we could do this on the main timeline, there is an easier way to do this by using movie clips.

12. Select Insert > New Symbol. Create a symbol named wheel, but make the type Movie Clip this time.

13. Select the circle tool. Set the fill colour to grey, the stroke to black, and the stroke height to 3. Draw a circle on the stage of the new symbol by holding down shift while drawing. It should be 30×30.

14. Make sure the whole wheel is selected by double clicking on it, then open the align panel by selecting Window > Align.

By having the whole wheel selected and using these align buttons, your wheel will move itself so that the wheel is centered in the horizontal and vertical directions. This is very important, since when the wheel is spinning, where the center of the symbol is determines how it moves.

 

15. Select the line tool and set the stroke to black and the stroke height to 3. Draw two lines splitting the wheel in half.

Hint: Holding the Option key while you draw will allow you to draw from the center of the circle to the outside edge.

16. If you like, you can select the paint bucket tool, and colour two halves of the wheel to white. Your wheel would now look something like this:

***Note*** You may have noticed earlier that a new timeline appears on the screen when you are editing a movie clip. This is the power of movie clips: they can have their own timeline, which runs separately from the main timeline! So while other things can be going on in the main timeline, your movie clips can have something completely different going on in their own timeline. This will become apparent as we continue.

17. While you are still inside of your wheel symbol, change the name of layer 1 to Wheel.

18. Insert a keyframe at frame 20 on the wheel’s timeline, and create a motion tween between the first and last keyframes.

19. Select any of the frames during the tween. In the property inspector, set the tween to rotate clockwise once.

By pressing the return, you can test your wheel’s motion (it will spin in a circle once). If you need a recap on rotate tweens, you can find it here.

20. Open your library panel by choosing Window > Library and double-click on the skateboarder symbol to edit it.

Your library should now appear as seen below:

 21. Create a new layer, on top of your Skateboarder layer, and name it Wheels.

22. Drag two wheel symbols from your library to the stage, so that your skateboarder symbol is complete.

 23. Go back to your main timeline (click on scene 1 in the edit bar). Create a new layer called Skateboarder.

24. Drag a skateboarder symbol from your library onto your new layer.

If you test your movie, it should now look like this:

[kml_flashembed publishmethod=”static” fversion=”8.0.0″ movie=”http://www.cacourses.com/AN35S/flashfiles/movieclips1.swf” width=”400″ height=”300″ targetclass=”flashmovie”]

[/kml_flashembed]

25. Move your skateboarder to the left of the stage.

26. Insert keyframes for your Skateboarder, Ground and Sky layers at frame 100.

27. Create a Classic Tween on your skateboarder layer. Go to the keyframe at frame 100 and move the skateboarder to the right of the stage.

If you test your movie, it should now look like this:

[kml_flashembed publishmethod=”static” fversion=”8.0.0″ movie=”http://www.cacourses.com/AN35S/flashfiles/movieclips2.swf” width=”400″ height=”300″ targetclass=”flashmovie”]

[/kml_flashembed]

For an added challenge (and bonus marks) use the Bone tool to make the skateboarder appear more lifelike – have his arms, legs, even neck bend a bit to appear that he’s reacting to the motion of the board. It’ll look much better!

***Note: Hitting the return key to preview a movie clip tween will only work when you are editing a movie clip (ie. If you are on the main timeline, the animation will not show up). You can only see movie clip animations when you test the movie (Command + Return) or open the .swf file in your folder.

You might notice that the upper and lower half of your wheels sometimes lag behind the upper part of your wheels. That’s OK; when you are previewing a movie in Flash, this error will sometimes arise. When you open the .swf file in your Drive/DropBox folder, it should run without this glitch.

28. When finished, save your flash file and go complete: assignment5

Finished samples:

Tyler:
[kml_flashembed publishmethod=”static” fversion=”8.0.0″ movie=”http://www.misterjrobson.com/StudentFiles/mckay_assignment5.swf” width=”400″ height=”300″ targetclass=”flashmovie” play=”true” loop=”true”]

[/kml_flashembed]

 

Jordan:
[kml_flashembed publishmethod=”static” fversion=”8.0.0″ movie=”http://www.misterjrobson.com/StudentFiles/tait_assignment5.swf” width=”400″ height=”300″ targetclass=”flashmovie” play=”true” loop=”true”]

[/kml_flashembed]

Once you’ve worked through all of the tutorials and examples I’ve given you so far (you have done them all, right? Go back and make sure), you should have a pretty good grasp of the basic drawing and motion tools in Flash.

Now it’s your turn to complete something impressive with all of that knowledge. You’ll use most of the tools we’ve practiced to create something longer, more impressive, and that has a bit more of a story to it.

READ ALL OF THE INSTRUCTIONS BEFORE YOU BEGIN. Ask questions if you need to.

Your animation could be:
A commercial
A public service announcement
A spooky Halloween story
An animated webisode (a short story)
…something like one of those. If you have a better idea, just make sure it’s going to be appropriate and effective

Requirements:
approximately 30 seconds minimum (could be a little bit less, could be longer)
use the drawing tools, fills, gradients, etc. to draw interesting characters/scenes
use deco brushes (buildings, fire, etc.)
different kinds of symbols (movie clip, graphic, button)
must include various types of tweens
characters must move naturally (use the bone tool)
import bitmap/raster images found online or from other sources (eg. consider importing a background scene for your characters to move around in)
morphing (text to shape, shape to text, shape to shape, text to text, etc.)
at least one example where you’ve used shape hints to transform
complex text tweens (like the last couple of exercises you’ve done, but with your ideas this time)
audio – dialogue or sound effects and music (use music that is appropriate and not distracting. Instrumental music works great for this. Consider using a free, legal source of background music like http://dig.ccmixter.org/)

PLAN THIS OUT A BIT. The story/idea is really important for something this long, so spend a bit of time planning this out and/or discussing it with someone in the class.

BE CREATIVE. Take your time to make this look good and work well. Make sure it MAKES SENSE (no random objects bouncing around, random violence, senseless characters & motion, etc.)

TAKE YOUR TIME! Something this long and complicated should take a little while. There’s no rush to get this done, so make sure you’re doing a good job.

Click links to view samples:

Jordan

Malcolm

Tyler