IntroductionWelcome| 00:00 | Hi, I'm Todd Perkins. Welcome to creating Flash games on the Wii.
| | 00:04 | I'm going to walk you through the process of
creating Flash content that's playable on the Nintendo Wii,
| | 00:09 | through the Internet Channel.
| | 00:11 | Creating Flash on the Wii is a very exciting topic
| | 00:14 | and I absolutely love teaching about it.
| | 00:16 | In this title, we'll learn how to detect
left and right, up and down, point and click,
| | 00:21 | and circular interactivity from the Wii Remote. You'll also
be able to mimic velocity-based interactivity. Using those
| | 00:27 | techniques, we will even create several games from start to finish.
| | 00:31 | So, hope you are excited to learn about creating Flash games on the
Wii because I'm sure excited to teach it. So, let's get started.
| | Collapse this transcript |
| Using the example files| 00:00 | If you are a premium subscriber to lynda.com
or if purchased this title on a disk,
| | 00:05 | you have access to the exercise files.
| | 00:07 | Exercise files in this title are organized by chapters.
| | 00:11 | Each chapter contains the files that
we will be working with for that chapter.
| | 00:16 | The files are in order according to movie number.
| | 00:19 | For example,
| | 00:20 | for movie 2 the file begins with 02 or for movie 3, the file begins
with 03. Final states for each exercise file are also provided
| | 00:29 | and they all end with _final. If you don't have access
to the exercise files, you can still follow along.
| | 00:35 | Throughout the title, I will show how you can set up your files, so
that they will be the same as the files that I'm working with. So,
| | 00:41 | let's get started.
| | Collapse this transcript |
| Prerequisites for this course| 00:00 | Now before you dive into start creating Flash Wii games, you should
know that this is sort of an advance title and I expect you
| | 00:06 | to know some of the things coming into it. Here
are the titles that I expect you to have watched
| | 00:11 | or at least have the equivalent knowledge of.
| | 00:13 | First, Flash CS3 Fundamentals.
| | 00:16 | If you haven't watched Flash CS3 Fundamentals,
| | 00:19 | you should have at least watched Flash CS3 Essential
Training. So you should basically understand
| | 00:24 | the basics of the Flash interface,
| | 00:26 | including movie clips structure, layers,
and how to work with the Time Line.
| | 00:31 | ActionScript 2.0 Essential Training, it would be ideal for
you to have watched ActionScript 2.0 Essential Training,
| | 00:37 | but since we're working in Flash CS3,
| | 00:39 | it is more likely that you have watched ActionScript
3.0 Essential Training, which will also do.
| | 00:44 | Just know that creating Flash Wii games uses ActionScript 2.0,
| | 00:48 | so there is going to be a little bit different syntax.
| | 00:51 | In this title,
| | 00:52 | I have set up chapter 2 as a sort of a crash course in
ActionScript 2.0 for those of you who already know ActionScript 3.0
| | 00:59 | and for those of you who already are familiar with ActionScript 2.0,
| | 01:02 | chapter 2 will be a review for you.
| | 01:04 | So basically coming into this title, you
should have a basic knowledge of Flash
| | 01:08 | and you should have a basic knowledge of ActionScript. So
you should be familiar with variables, functions, and events.
| | 01:13 | As we go through the title,
| | 01:15 | I'm going to speak as if you already know what
these things are and I won't go into detail
| | 01:19 | explaining the structure of the code, we will quickly go through
the code and add interactivity that we are going to use and
| | 01:25 | create the games that we are going to be creating. So if you don't feel
comfortable with Flash or ActionScript, I recommend watching the titles
| | 01:30 | that I have listed here. Otherwise, let's
get started in creating some Flash Wii games.
| | Collapse this transcript |
|
|
1. Getting Started with Flash on the WiiPlaying Flash on a Wii| 00:01 | If you're watching this title,
| | 00:02 | chances are you already know how to make Flash applications,
| | 00:05 | but you may not know how Flash works on the Wii. Getting the
applications that you develop on the Wii is actually incredibly simple.
| | 00:12 | There are only two steps that need to be
taken from the Wii to view Flash content.
| | 00:16 | The first step is to download the Internet Channel.
| | 00:19 | You can download the Internet Channel from the Wii Shop Channel
for 500 Wii points or $5. The Internet Channel is made by
| | 00:25 | Opera and is a simplified version of
the Opera Web browser for your computer.
| | 00:30 | One of the features of the Internet Channel
is that it has Flash Player support built-in.
| | 00:34 | The version of the Flash Player it supports is Flash Player
7. So you can view Flash Player content up to player 7
| | 00:41 | and ActionScript up to version 2.0.
| | 00:44 | The second step you need to take
| | 00:46 | is simply browse through a site that
has Flash Player 7 or earlier content.
| | 00:50 | If you like to see Flash content on the Wii right now,
| | 00:53 | you can use the Internet Channel on
your Wii to browse through youtube.com
| | 00:56 | and watch YouTube movies from your Wii.
| | 00:59 | YouTube uses Flash Player 7 for its video player.
| | 01:02 | On the Wii, the Wii Remote works exactly the
same as the mouse and the A button on the Wii
| | 01:08 | acts as a mouse click. Well that means to you as a developer
| | 01:11 | is that you don't have to make any changes to your
applications in order to make them work on the Wii.
| | 01:16 | You simply create Flash Player 7
or earlier mouse-based applications
| | 01:21 | and that's all there is to it.
| | Collapse this transcript |
| Creating a Wii game template in Flash| 00:00 | Now we will create a Flash Template,
so we can create Wii games quickly.
| | 00:04 | If you are following along, I'm working in
02_template.fla in the chapter 01 folder.
| | 00:09 | If you don't have access to the exercise files,
just create a blank .fla file ActionScript 3.0
| | 00:14 | and create a layer called actions and a layer called art.
| | 00:17 | The first thing we are going to do is
set the resolution for our Flash movie.
| | 00:21 | We are going to click to Size button in the Property
inspector and set the dimensions to 790 x 610.
| | 00:28 | This is a resolution that will
work on every television monitor.
| | 00:32 | For the Frame rate, I will type 24 frames per second.
| | 00:35 | Flash content on the Wii needs to be
really optimized and will run slow
| | 00:40 | if you set a Frame rate higher than 24 frames per second.
| | 00:43 | So just keep that in mind.
| | 00:44 | I'm going to click OK and then we
will click the Publish Settings button
| | 00:49 | in the Property inspector and go to the Flash tab.
| | 00:53 | From there I will set the version to Flash Player 7,
the ActionScript version should be ActionScript 2.0,
| | 00:59 | then I'm going to jump over to the HTML tab and go down
to the Scale area and set the Scale mode to No scale.
| | 01:06 | That way your content will look exactly the same whether
| | 01:08 | or not if the person viewing the
content is on a wide screen television.
| | 01:13 | Then we click OK to save those Publish
Settings, and that's really all there is to it.
| | 01:17 | Now we will just save this file as a
template, so we can use it easily later on.
| | 01:20 | I'm going to choose File, Save as Template and
for the name I'm going to call it Flash Wii,
| | 01:28 | for the Category, I'm going to type Games.
| | 01:31 | Now if you don't have a Category called Games, Flash
will automatically create this Category for you.
| | 01:36 | For the Description I'm just going to type the
resolution, which is 790 x 610, now on the next line,
| | 01:43 | I'm going to type Flash Player 7 and then ActionScript 2.0.
| | 01:47 | Now, I will click Save to save the template and now what
I'm going to do is close this file and create a new file
| | 01:53 | from our template to make sure everything is working ok.
| | 01:56 | So in the Create from Template area of the Welcome screen,
I'm going to click the More button and then I'm going
| | 02:01 | to click the Games category and you can see
that I have my Flash Wii template right there
| | 02:07 | and my description is the same description I just typed in,
so I will click OK and there is the file from our template.
| | 02:12 | So, if you already know ActionScript 2.0 or just
want to see your own Flash animations on your Wii,
| | 02:18 | you can simply use this template, create your Flash content
as normal, upload it to the web just as you normally would
| | 02:25 | in any other Flash application and
browse to its location on your Wii.
| | 02:29 | For those of you who aren't very familiar with ActionScript
2.0, in the next chapter, I will explain the basic elements
| | 02:35 | of ActionScript 2.0 that you will
need to create Flash Wii games.
| | Collapse this transcript |
|
|
2. ActionScript 2.0 EssentialsKnowledge prerequisites| 00:00 | Due to the complex nature of this title,
| | 00:03 | I expect you to know a few things about Flash
and ActionScript before coming on board.
| | 00:07 | Here is a look at what I expect you to know.
| | 00:09 | I expect you have a basic knowledge of the
Flash interface including how Timeline works,
| | 00:14 | how movie clips are structured and how they can be
organized, and other basic elements of the Flash interface.
| | 00:20 | Basically, I expect you to know at least what's contained in
the Flash CS3 Fundamentals title in the Online Training Library.
| | 00:28 | You should also have at least a basic knowledge of ActionScript 2.0 or
| | 00:32 | ActionScript 3.0.
| | 00:34 | This includes understating variables, functions, loops, events, etc.
| | 00:38 | If any of these terms seem foreign to you, I
recommend watching ActionScript 2.0 Essential Training
| | 00:44 | or ActionScript 3.0 in Flash CS3 Professional
Essential Training in the Online Training Library.
| | 00:50 | You should have an understanding of how Flash applications work
and how to build them from scratch. That means you should know
| | 00:56 | how variables, functions, loops, and events,
| | 00:59 | all work together to create an application
| | 01:01 | Again, if you don't feel comfortable with Flash or ActionScript,
| | 01:04 | I definitely recommend watching the titles I mentioned earlier,
| | 01:07 | but if you do feel comfortable,
| | 01:08 | this chapter is going to be a refresher for
those of you who already know ActionScript 2.0
| | 01:13 | and ActionScript 3.0,
| | 01:15 | focusing on the differences between the two languages.
| | Collapse this transcript |
| Migrating from ActionScript 3.0| 00:00 | Let's talk about some of the differences
between ActionScript 2.0 and ActionScript 3.0.
| | 00:05 | Some of the main differences include Display
Objects and the Display List, Properties,
| | 00:09 | Classes and Data Types, Event Handling,
and the use of Keywords.
| | 00:13 | Display Objects are significantly
different from ActionScript 3.0,
| | 00:17 | for example MovieClip is the main
display object container class
| | 00:21 | and for that matter, it's also
the main display object class.
| | 00:24 | So we do have classes like Shape or Sprite or
DisplayObjectContainer or Display Object, etcetera.
| | 00:30 | You simply use MovieClip for just
about every display object.
| | 00:34 | There is also a different display list.
| | 00:36 | Depths are not organized in the same Child
way that they are in ActionScript 3.0,
| | 00:41 | rather they are controlled using methods of
MovieClips like getNextHighestDepth and a few others.
| | 00:47 | In addition, when you create a MovieClip dynamically, Flash
doesn't automatically creates a Depth for that MovieClip,
| | 00:53 | you need to manually tell Flash
the Depth of the new MovieClip.
| | 00:58 | Properties are not very different in ActionScript
2.0, but this tends to be the biggest area
| | 01:04 | of running into problems because it's so subtle.
| | 01:08 | Property names typically begin with an underscore,
so we have _alpha instead of alpha and so on.
| | 01:14 | Property values range between 0
and a 100 instead of from 0 to 1.
| | 01:19 | Like I said these are the most common pitfall for people
going between ActionScript 2.0 and ActionScript 3.0.
| | 01:25 | So remember that your Properties have underscores and your
Property values go from 0 to a 100 in ActionScript 2.0.
| | 01:33 | Creating instances of classes is pretty different
in ActionScript 2.0, for example Display Classes
| | 01:38 | like MovieClips, Text Fields etcetera are not created using
the new Keyword rather they are created using MovieClip
| | 01:45 | class methods like createEmptyMovieClip,
duplicateMovieClip, and attachMovie.
| | 01:50 | So we don't have the addChild method to create objects, and
there is no addChild method to add objects to the stage.
| | 01:58 | When using void for a return value and functions,
the ActionScript 2.0 Void has a capital V.
| | 02:03 | For Number Data Types, ActionScript 2.0 does
not have support for int and uint Data Types,
| | 02:09 | so the only Number Data Type in
ActionScript 2.0 is the Number Class.
| | 02:15 | Event Handling is significantly
different in ActionScript 2.0.
| | 02:18 | Instead of being done through adding
listeners, it's done through properties.
| | 02:22 | Most properties begin with on,
so instead of MouseEvent.Click,
| | 02:26 | we have the onRelease property or the onPress property.
| | 02:31 | Values for these properties are functions and
the functions or the listeners for the event.
| | 02:37 | So when onRelease event happens, the function
connected with that property is triggered.
| | 02:43 | The keywords _root and this are
different in ActionScript 2.0 as well.
| | 02:47 | For example _root has an underscore instead of just
being root and it always refers to the main Timeline.
| | 02:54 | The use of _root is discouraged
because it can change it's meaning.
| | 02:58 | This is only in cases when you
are loading external .swf files.
| | 03:01 | Since we won't be doing that in this title, we
will use _root to represent the main Timeline.
| | 03:06 | The this Keyword is pretty different
in ActionScript 2.0 as well.
| | 03:10 | It's relative, so it represents the container
that the word this is held within and instead
| | 03:15 | of an event handler it works the same as a
event.currentTarget does in ActionScript 3.0.
| | 03:20 | So it represents the objects that's
connected with that event.
| | 03:24 | Outside of event handlers and outside of methods, the this
represents the object where the word this is contained.
| | 03:32 | For example in side of a MovieClip,
this represents that MovieClip.
| | 03:37 | On the main Timeline, this represents the main Timeline.
| | 03:40 | So this is a look at some of the basic differences
between ActionScript 2.0 and ActionScript 3.0.
| | 03:46 | For more information, you can look at Flash
help in the ActionScript 2.0 language reference.
| | Collapse this transcript |
| Working with variables and properties| 00:00 | Now, we will take a look at writing the code
for variables and properties in ActionScript 2.0.
| | 00:05 | If you are following along, I'm working in
03_Variable_Properties.fla in the Chapter 02 folder.
| | 00:11 | If you don't have the access to the exercise files,
| | 00:13 | simply create a file from the Flash Wii template
| | 00:16 | and create a MovieClip on the stage, name cow_mc.
| | 00:20 | Also create a layer called Actions.
| | 00:23 | Let's go to the first keyframe in the Actions layer
| | 00:25 | and open up the Actions panel.
| | 00:27 | Let's say I wanted to create a variable to hold the cow's alpha.
| | 00:31 | I'm going to call this cowAlpha
| | 00:33 | and remember in ActionScript 2.0, the only number
data type is Number, so we don't have int or uint.
| | 00:39 | Remember that alpha is 0-100 and not 0-1.
| | 00:44 | So if I wanted to set the alpha to 50%,
| | 00:47 | it would be 50 instead of 0.5.
| | 00:49 | On the next line, I will set the alpha of the cow,
| | 00:52 | cow_mc._alpha.
| | 00:54 | Notice that I'm using an underscore and not just alpha.
| | 00:58 | The one big mistake when people are coming
from ActionScript 3.0 to ActionScript 2.0
| | 01:03 | is to omit the underscore here.
| | 01:05 | This is really tough because alpha is the keyword in
Flash CS3 because it's a keyword in ActionScript 3.0,
| | 01:11 | and ActionScript 2.0 doesn't have as good error handling, so you
won't get an error if you try to set the alpha property of an object.
| | 01:19 | So remember to keep that underscore there.
| | 01:21 | I'm just going to set the alpha property here equal to cowAlpha.
| | 01:25 | Now I will test the movie
| | 01:26 | and see the cow's alpha,
| | 01:29 | and there is our cow with 50% alpha.
| | 01:31 | I will close the Preview window now.
| | 01:33 | So when you are working with variables,
| | 01:35 | make sure that you use the Number data type for numbers
and remember to add the underscore for properties
| | 01:40 | and that values tend to range between 0 and a 100.
| | Collapse this transcript |
| Understanding functions| 00:00 | Now, we will take a look at writing the
code for functions in ActionScript 2.0.
| | 00:04 | If you're following along you can open
up 04_Functions in the Chapter 02 folder
| | 00:08 | or just use the same file from the last exercise.
| | 00:11 | Let's go to the first keyframe in the Actions layer
| | 00:13 | and open up the Actions panel.
| | 00:15 | What we are going to do is wrap the code we have here
| | 00:18 | in a function.
| | 00:19 | So I'm going to create a standard
function, I'm going to call it setCowAlpha.
| | 00:26 | This is not going to return a values it's going
to be Void and remember that it has a capital V
| | 00:31 | and I'm going to run this setCowAlpha
function at the bottom of my code.
| | 00:38 | So you can see it's very, very simple, we have pretty
much the exact same syntax for creating a function
| | 00:43 | other than the fact that Void has an
uppercase V. So if I test the movie,
| | 00:47 | you can see that it's working.
| | 00:49 | There is also another way to write functions in ActionScript
2.0 and that is to give the value to a variable so we
| | 00:56 | can type setCowAlpha
| | 00:59 | equals function,
| | 01:01 | and that works as well.
| | 01:06 | So that's how our functions work.
| | 01:07 | So for the most part in ActionScript 2.0 functions are the same.
| | Collapse this transcript |
| Handling events| 00:00 | In this movie we will write the code
to handle Events in ActionScript 2.0.
| | 00:04 | If you are following along you can open up
05_Handling_Events.fla in the Chapter 02 folder
| | 00:10 | or you can just use the same file from the last exercise.
| | 00:13 | Let's go to the first keyframe in the Actions layer
| | 00:15 | and open up the Actions panel.
| | 00:17 | As I mentioned earlier in this chapter,
| | 00:19 | events are handled using properties instead of the addEventListener()
method. So let's say I wanted something to happen
| | 00:26 | when I clicked on the cow. I would type co_mc.onRelease
| | 00:31 | and we can use one of our methods for writing functions
| | 00:34 | and set the value of the onRelease property
| | 00:37 | equal to a function that we created right here.
| | 00:43 | So I just create my function right here
and let's say I wanted the cow to say
| | 00:47 | Moooooo,
| | 00:51 | so I will test the movie, click on the cow
| | 00:53 | and then I get my Moooooo message in the Output window.
| | 00:57 | So I will close the Output window and the Preview window
| | 01:00 | and maybe you don't like that method of setting a function
value inline like this, maybe you'd rather have a normal function,
| | 01:08 | well you can do that, it's just fine. So I push this function code down
| | 01:13 | and I created a function called moo.
| | 01:18 | Now I could set the value of cow_mc.onRelease
| | 01:21 | equal to moo.
| | 01:22 | Notice I'm not using parenthesis here after moo or else that
would moo the return value of the function, which is Void
| | 01:30 | and the value of onRelease tends to be a
function. So here I get the same result,
| | 01:34 | it's just little bit cleaner in the code.
| | 01:39 | So in ActionScript 2.0 you set the value
of the event property equal to a function
| | 01:44 | and it doesn't matter whether or not
your function is an inline function.
| | Collapse this transcript |
| Understanding "this" and "_root"| 00:00 | Now let's take a look at the keywords this and root.
| | 00:03 | If you are following along I'm working in
06_this_and_root.fla in the Chapter 02 folder
| | 00:08 | or you can just use the same file from the last exercise.
| | 00:11 | Let's go to the first keyframe in the Actions layer
| | 00:13 | and open up the Actions panel.
| | 00:16 | Here I have emptied out the moo function.
| | 00:19 | Now we will take a look at the value of this versus _root.
| | 00:23 | As I mentioned earlier _root represents the
main Timeline. So inside of the moo function
| | 00:29 | if I trace _root
| | 00:33 | and click on the cow, if I tested the movie
then I get _level0 in Output window.
| | 00:38 | _level0 represents the main Timeline.
| | 00:40 | Essentially levels are depths.
| | 00:42 | For more information about levels,
| | 00:44 | you can look at Flash Help.
| | 00:46 | So now let's say we trace(this)
| | 00:48 | inside of the function.
| | 00:50 | Let's see what we get.
| | 00:52 | We get _level0.cow_mc so it's a reference to the cow.
| | 00:57 | Because this function is attached to
cow_mc through its onRelease property,
| | 01:03 | this is referring to cow_mc.
| | 01:07 | So if were to cut and paste this trace statement
| | 01:10 | outside of this function
| | 01:12 | then I would get the main Timeline. So we are going
to press Cmd+X on the Mac or Ctrl+X on the PC to cut,
| | 01:17 | Cmd+V on the Mac, Ctrl+V on the PC to paste.
| | 01:21 | So now when I test the movie,
| | 01:23 | in the Output window I get _level0.
| | 01:25 | So you can see that this is relative but depending on its context.
| | 01:29 | In a function that's attached to
an Object like our eventhandler here,
| | 01:34 | this represents the Object that the function is attached to
| | 01:38 | and outside of functions and methods,
| | 01:41 | this represents the object where the code resides,
| | 01:44 | in this case the main Timeline.
| | 01:46 | Now if I were to put this trace statement inside of cow_mc
| | 01:51 | then this would represent that instance of cow_mc.
| | 01:55 | So that's how this and _root work in ActionScript 2.0.
| | Collapse this transcript |
| Creating movie clip instances dynamically| 00:00 | Common thing to do in games is to
create movie clip instances dynamically,
| | 00:05 | that is to bring them out of the
library and on to the stage at runtime.
| | 00:08 | In this movie we will talk about how
to do that using ActionScript 2.0.
| | 00:12 | If you are following along I'm working in
07_Movie_Clip_Dynamic.fla in the Chapter 02 folder
| | 00:18 | or you can just use the same file from the last
exercise, just make sure to delete the cow off the stage.
| | 00:23 | The first thing we will need to do to create
movie clip instances dynamically is to tell Flash
| | 00:28 | to export this movie clip for ActionScript.
| | 00:31 | So I'm going to right click on mcCow in the library,
| | 00:34 | Ctrl+Click if you don't have a right
click on your mouse, choose Linkage.
| | 00:37 | From there, all you need to do
is check Export for ActionScript.
| | 00:42 | The difference between ActionScript 2.0 and 3.0 here is
that we use the Identifier instead of a Class text field
| | 00:49 | to export our movie clip for ActionScript.
| | 00:51 | Now you can still use Class if you wanted to connect a movie
clip to a Class but that's not what we are doing right here.
| | 00:56 | Also, make sure not to change the identifier name,
so it's the same as the name inside of the library.
| | 01:02 | That way you can simply glance over the library
to know the identifier name of your movie clip.
| | 01:06 | So click OK, go to the first keyframe in the
Actions layer and open up the Actions panel.
| | 01:12 | The method that you use to create
movie clips dynamically is attachMovie.
| | 01:16 | So I'm going to type _root referring to the main Timeline
_root.attachMovie, then you need to pass in some parameters.
| | 01:25 | This is the identifier name associated
with your symbol in the library.
| | 01:29 | Next, is the new name, which is also a string and this
is the instance name for the object that's being created.
| | 01:36 | I'm going to call this cow_mc, the next
parameter is depth, in this works like addChild,
| | 01:43 | except for we need to explicitly tell Flash
what depth we want the object to be created at.
| | 01:48 | So I'm going to type _root.getNextHighestDepth
and that's the method
| | 01:54 | and that returns the next highest unoccupied depth.
| | 01:58 | Using getNextHighestDepth we put the
Object in front of everything else inside
| | 02:03 | of its parent, which in this case is _root.
| | 02:07 | Now I close out the parenthesis and let's
test the movie and there is our cow, nice.
| | 02:16 | Let's go to the next line and then from here what we
can do is modify our movie clip in whatever way we want.
| | 02:24 | I'm going to call it by its instances,
so I can just type cow_mc.
| | 02:27 | Notice that it's not a string here, I'm using
sort of like a variable name and I can type .
| | 02:34 | _x and set that to some value here.
| | 02:36 | So let's say I set it to a 100 and I test the movie, I
can see the cow has shifted to 100 pixels to the right.
| | 02:43 | That's how to create movie clip instances dynamically.
| | 02:46 | If you'd like to take a look at more methods for
creating movie clip instances dynamically you can look
| | 02:51 | up Create Empty Movie Clip and
Duplicate Movie Clip in Flash Help.
| | Collapse this transcript |
| Initializing dynamically created movie clips| 00:00 | When you create movie clips dynamically
you can associate them with objects
| | 00:06 | and have them adopt properties,
methods and events of those objects.
| | 00:10 | In this movie we will take a look at how to do that.
| | 00:12 | If you are following along I'm working in
08_Initializing_Movie_Clips.fla in the Chapter 02 folder.
| | 00:20 | You can also use the same file we
worked with in the last exercise.
| | 00:23 | Let's go to the first keyframe in the
Actions layer and open up the Actions panel.
| | 00:27 | Above all the code that I have here I'm going
to create a new variable and this is going
| | 00:31 | to be a generic object, so an instance of the object Class.
| | 00:35 | I'm going to call this init.
| | 00:37 | So I'm going to create a new instance
of the object Class and I'm going to cut
| | 00:44 | and paste where I set the cow's x position,
cutting with Cmd+X, Ctrl+X on the PC,
| | 00:51 | pasting with Cmd+V, Ctrl+V on the PC.
| | 00:55 | Now I'm going to set the init object's _x property to 100.
| | 01:00 | Now when we ran the attachMovie method, you may have noticed
| | 01:03 | that in the code hinting there was
an optional parameter called init.
| | 01:08 | What you do is pass in your initialization
object after the depth in the attachMovie Method.
| | 01:15 | So I'm going to pass in my initialization
object and once this cow_mc instance is created,
| | 01:23 | it adopts all of the properties
and methods connected to init.
| | 01:27 | So if I test the movie, I will see that the cow adopts
the x position of a 100 from its initialization object.
| | 01:36 | So if I go to the next line below where I set its
x position, I could set the init's y position equal
| | 01:43 | to a 100 as well, to show you that, that works.
| | 01:47 | Now why on earth would you ever
want to do something like this?
| | 01:49 | Let's say we are going to create a ton of movie clips in a
huge loop and we want them all to have the same properties.
| | 01:55 | we can create one init object and have all
those movie clips adopt from that object.
| | 02:00 | This doesn't just work with properties,
it also works with methods and events.
| | 02:05 | So let's say I wanted to have an onRelease
event, so I wanted the cow to move for example.
| | 02:13 | I could set the init object's onRelease property
equal to moo and I could create that moo function
| | 02:21 | and then in my moo function I will just trace moo.
| | 02:29 | Test the movie, click on the cow and
I get moooooo in the output window.
| | 02:33 | So now I could create 100's of cows and
they would all adopt the same properties
| | 02:38 | as long as I passed in the init object here.
| | 02:41 | So that's how to initialize movie
clips using an init object.
| | 02:44 | We will talk about this more in detail and
these more advanced techniques with init objects
| | 02:49 | as we go throughout this title and that's
how we use this technique in applications.
| | 02:53 | So now you can initialize dynamically created movie clips
with whatever properties, methods or events that you want.
| | Collapse this transcript |
| Using the TweenLite engine| 00:00 | For games we are going to be doing a lot of ActionScript
animation, mostly in fading things in and out.
| | 00:06 | Now we could write the code by hand that's a little bit
tedious and we could use the built in ActionScript Tweens,
| | 00:12 | but that's a little code heavy and
tends to run a little bit slow.
| | 00:15 | What I have choosen to do for these
games is use an engine called TweenLite.
| | 00:19 | The TweenLite class has great syntax and it enables to do
ActionScript Tweens very powerfully, easily and quickly.
| | 00:27 | In this movie we will have an intro to the TweenLite
class and how to use it in your applications.
| | 00:32 | If you are following along I'm working in
09_TweenLite.fla in the Chapter 02 folder.
| | 00:37 | You can also just use any file with
a movie clip instance on the stage.
| | 00:42 | In this file the movie clip instance is called cow_mc.
| | 00:44 | In order to use the TweenLite engine, you
need to download it from tweenlite.com.
| | 00:51 | I'm going to jump over to Firefox right
now, going to tweenlite.com will take you
| | 00:58 | to the ActionScript 2.0 version of Tween Lite.
| | 01:01 | You will see that there are two links, one
to download the class and one to donate.
| | 01:06 | You don't have to make a donation to download the class but
you can make a donation if you find the class very useful.
| | 01:11 | Click download now to download the zip
file, and once you downloaded the file,
| | 01:15 | unzip the file to reveal the TweenLite folder.
| | 01:18 | I'm going to jump over to my desktop now where I have
already downloaded and unpacked the TweenLite class.
| | 01:25 | The TweenLite folder contains two folders and some
files, the folder that we are mostly concerned
| | 01:30 | about is the gs folder, this contains
the TweenLite class, TweenLite.as.
| | 01:35 | So I'm going to select the gs folder, copy using
Cmd+C on the Mac or Ctrl+C on the PC and paste the file
| | 01:42 | to my desktop using Cmd+V on the Mac, Ctrl+V on the PC.
| | 01:45 | From there I will open up the Exercise Files folder, open
up the Chapter 02 folder and drop the gs folder in there.
| | 01:53 | Now we can use the TweenLite class.
| | 01:54 | So I will jump over into Flash and in Flash
I'm going to select the first keyframe
| | 01:58 | in the Actions layer and open up the Actions panel.
| | 02:01 | Now to use the TweenLite class, the first
thing we will have to do is import the class.
| | 02:05 | So I'm going to import gs.TweenLite and
then we can tween using one line of code.
| | 02:10 | TweenLite has two main methods
and they are both static methods.
| | 02:14 | The first method is TweenLite.to, TweenLite.to tweens
an object's properties to the values that you pass in.
| | 02:23 | Let me show you how it works.
| | 02:25 | It accepts three parameters, the first parameter is the
object that you are going to tween, which is cow_mc,
| | 02:30 | the second parameter is the amount of time for
the tween to take in seconds, so let's choose 2,
| | 02:37 | the third parameter is an object and is used
| | 02:40 | to tell the TweenLite engine what
properties we want the object to end up with.
| | 02:45 | We use object to tell the TweenLite engine, where we want
the object to endup, so we give it different property values
| | 02:51 | that it has now and the TweenLite engine
tweens the object to those properties.
| | 02:57 | For example if I wanted to fade out the cow, I
will type _alpha and use Object Notation set to 0.
| | 03:05 | Now if I test the movie, in two seconds the cow will fade
out to an alpha to 0, you can pass in as many parameters
| | 03:13 | as you want here and the TweenLite engine will
change the values of those properties over time.
| | 03:17 | So let's say I wanted to also change _x to 0 and _y to 0.
| | 03:24 | If I test the movie all the properties
tween at the same time.
| | 03:29 | Now the great thing about the TweenLite engine is
that I can do all of this with one line of code.
| | 03:33 | With ActionScript Tweens that are built into
Flash this would take the three separate tweens
| | 03:38 | and it wouldn't run as fast.
| | 03:39 | So that's just one of the reasons
why I love the TweenLite engine.
| | 03:42 | I mentioned earlier that there were two
methods of the TweenLite class for animation.
| | 03:47 | The other method is TweenLite.from, TweenLite.from
works basically the same as TweenLite.to except
| | 03:55 | for it tweens the object to its current properties
| | 03:58 | from whatever the properties you
pass in through the tween object.
| | 04:01 | So instead of the cow animating to an alpha:0, x:0, and y:0,
| | 04:06 | it animates from alpha:0, x: 0,
y:0 to its current properties.
| | 04:12 | If I test the movie, we will see that in
action, I will close the Preview window.
| | 04:18 | That's mostly all there is to the TweenLite class.
| | 04:20 | You can see that the syntax is extremely easy and its very
powerful, very fast and it only takes one line of code.
| | 04:28 | There is actually a lot more that you can do with the
TweenLite engine and you can look up that information
| | 04:32 | on the TweenLite website or inside of the TweenLite
class, where you will also find some great documentation.
| | Collapse this transcript |
|
|
3. Flash for the Wii EssentialsUnderstanding the limitations of Flash on the Wii| 00:00 | Developing Flash Wii games is great, but you have to understand
the limitations of Flash Wii games before you start creating them.
| | 00:07 | For example,
| | 00:08 | you don't have access to all the features of the Wii
Remote including the Accelerometer and the De-pad.
| | 00:14 | Also you can only capture input from the A button. So
essentially a Flash Wii game is just like a regular mouse game.
| | 00:21 | So you can think of it in the same way.
| | 00:22 | You can track or the cursor is,
| | 00:25 | and when the user clicks.
| | 00:27 | Another limitation is that the Wii
Remote must always point at the screen.
| | 00:31 | If someone playing your game rotates their Wii Remote, so
it's not facing the screen anymore, then your Flash movie will
| | 00:37 | lose focus and your game will no long to be playable, that
is, until the player points their remote back at the screen.
| | 00:44 | Lastly we have some graphical limitations,
| | 00:47 | earlier I mentioned that you want to keep your
frame rates between 12 and 24 frames per second.
| | 00:51 | On top of that you want it be a little bit more safe when
creating Flash Wii applications than you would for say,
| | 00:57 | a computer. That means you want to go a little
bit easier on bitmaps, gradients, audio and video.
| | 01:03 | So with all of these limitations, it presents
a lot of challenges as a developer of games.
| | 01:08 | The purpose of this chapter is to work with these challenges
| | 01:11 | and find creative solutions to mimic
console Wii game interactivity in Flash.
| | Collapse this transcript |
| Creating simple point-and-click interactivity| 00:00 | The simplest interactivity for the Wii is point and click. So, here
we will pretend that we are making a game where you pop balloons.
| | 00:07 | If you are following along, I'm working in
02_Point_Click.fla in the Chapter 03 folder.
| | 00:12 | If you don't have access to the exercise files, you can simply create
three movie clips and name them anything you would like. I called them
| | 00:17 | balloon 1_mc, balloon 2_mc and balloon 3_mc.
| | 00:21 | So, I'm going to go to the first keyframe in
the Actions layer and open up the Actions panel
| | 00:25 | and here I have an array of all the balloons and a loop
where I set the onRelease property for each of the balloons
| | 00:32 | equal to the balloon, click function
| | 00:35 | and my balloon click function is really simple, it just runs
the unloadMovie method on whatever balloon you click on.
| | 00:41 | So, I'll test the movie,
| | 00:43 | click on a balloon,
| | 00:44 | and they unload.
| | 00:47 | So Point and Click interactivity is extremely simple,
it works exactly the same as mouse click interactivity.
| | Collapse this transcript |
| Adding up-and-down or left-and-right interactivity| 00:00 | Another type of interactivity is detecting if the player of
the game is moving their Wii Remote up and down or if they're
| | 00:06 | moving their Wii Remote side to side.
| | 00:08 | In this movie we will talk about how to
capture that information and to use it.
| | 00:12 | If you are following along I'm working
in .fla in the Chapter 03 folder.
| | 00:17 | If you don't have access to the Exercise Files,
you can simply create a file based on the Wii template.
| | 00:22 | Create a movie clip, that's a pump.
| | 00:25 | One frame of the pump up and one frame of the pump down
| | 00:29 | and a movie clip that's a balloon,
| | 00:31 | that's just a simple graphic. I named the pump, pump_mc
| | 00:35 | and the balloon, balloon_mc.
| | 00:37 | In this file I also have a hidden layer called Buttons.
| | 00:40 | In the Buttons layer there are two invisible
buttons, one on the top called top_btn and
| | 00:46 | one on the bottom called bottom_btn.
| | 00:49 | These button control all of the interactivity for this application.
| | 00:53 | Let's take a look at the code and see how it works.
| | 00:55 | I'm going lock and hide the Buttons layer first
| | 00:57 | then select the first keyframe in the
Actions layer and open up the Actions panel.
| | 01:01 | You see the code for this application is extremely simple.
| | 01:05 | When you roll over the top button,
| | 01:07 | the up function runs and when you roll over
the bottom button, the down function runs.
| | 01:12 | I'm stopping the pump at the beginning
to make sure that it doesn't animate.
| | 01:16 | The up function is very simple, it makes the pump go to its up
state and the down function makes the pump go to its down state
| | 01:22 | and scales up the balloon.
| | 01:25 | That's really there is to it. If you test the movie
| | 01:28 | and move your mouse up and down, you
see that you are pumping up the balloon.
| | 01:32 | I'm going to close the Flash Player window.
| | 01:35 | Now if you wanted to do this with left and right motion then
you can simply create a button on the left half of the screen
| | 01:40 | and a button on the right half of the screen
and change your functions accordingly.
| | 01:44 | So you can see this process is pretty simply,
but imagine actually playing this on the Wii.
| | 01:48 | You are moving the Wii Remote up and down or
moving your hand up down simulating moving a pump.
| | 01:53 | So using this formula you can successfully capture
| | 01:56 | a player of your game moving their Wii
Remote up and down or left and right.
| | Collapse this transcript |
| Detecting Wii Remote rotation| 00:00 | So let's say you wanted to detect
circular motion from the Wii Remote,
| | 00:03 | whether the remote is moving clockwise or counterclockwise.
| | 00:07 | In this movie we will take a look
at how to detect that information.
| | 00:10 | If you are following along I'm working in
04_Rotation.fla and this is in the Chapter 03 folder.
| | 00:16 | If you don't have access to the Exercise Files,
| | 00:18 | simply create a wheel movie clip that's just a simple
graphic and then create some invisible buttons.
| | 00:25 | Let's take a look at the invisible buttons here.
| | 00:27 | I'm going to unlock and unhide the buttons layer.
| | 00:31 | You will see that there four buttons here.
| | 00:34 | I'm going to use these buttons to detect the direction,
| | 00:37 | if the person playing the game is rotating
the Wii Remote or rotating the mouse.
| | 00:42 | Now I have named these buttons tl, short
for top-left tl_btn, top-right button,
| | 00:48 | bottom-right button, and bottom-left button.
| | 00:51 | So if I unhide my guide layer, it's going
to show you how my little system works.
| | 00:56 | I'm going to lock the Buttons layer here.
| | 00:58 | I'm going to store all these buttons
in an array, so I have Index 0, 1, 2, 3.
| | 01:05 | Now let's say the person playing the gaming is moving their
Wii Remote in a clockwise motion, so they are going to go
| | 01:11 | from 0 to 1 to 2 to 3 and then back to 0.
| | 01:15 | Whether they start from 0, 1, 2 or 3 that's
the progression that they are going to move.
| | 01:20 | So from 0 the next step is 1, from 1 the next step is 2,
from 2 the next step is 3 and from 3 the next step is 0.
| | 01:27 | For counterclockwise motion it's the opposite, the
movement goes from 0 to 3 to 2 to 1 and then back to 0.
| | 01:36 | So what we are going to do is create some simple conditional
statements to check to see what the current button rolled
| | 01:43 | over is based on what the last
button the person rolled over was.
| | 01:47 | So let's take a look at the code.
| | 01:49 | Select the first keyframe in the Actions
layer and open up the Actions panel.
| | 01:52 | In the Actions panel I have some variables here.
| | 01:55 | The first one is an array of all the buttons
and they are in the order that I showed earlier.
| | 02:01 | So top-left(tl_btn), topright(tr_btn),
bottomright(br_btn) and then bottomleft(bl_btn).
| | 02:05 | We have variables representing the currentIndex and
previousIndex of the buttons that are rolled over,
| | 02:10 | the direction that's being rotated in, this is going
to be +1 for clockwise, -1 for counterclcokcwise.
| | 02:17 | The speed at which to rotate the
wheel which I just set at 10.
| | 02:21 | I have a loop here, connected each button's
RollOver event to the rotate function.
| | 02:25 | The rotate function is where all the magic happens.
| | 02:28 | The first thing is we set the value of currentIndex, to do
that I used the function called indexOf to get the index
| | 02:35 | of the button that was currently rolled over.
| | 02:38 | You scroll down you will see the indexOf function, simply
passed in a button, use a loop to see if the button
| | 02:46 | in the loop matches the button that was passed in, if so
return that button's index, if there is no match, return -1.
| | 02:54 | So let's scroll back up to the rotate function.
| | 02:57 | These conditional statements here check to
see whether the user is moving the Wii Remote
| | 03:03 | in a clockwise or counterclockwise direction.
| | 03:06 | First we are checking to see if they are moving clockwise.
| | 03:09 | The main general rule for a clockwise movement is
if the currentIndex is equal to the previousIndex,
| | 03:16 | so the index of the button that is currently RolledOver is
equal to the index of the previously RolledOver button +1.
| | 03:23 | So in this sense it's capturing from 0
to 1, or from 1 to 2, or from 2 to 3.
| | 03:28 | Now of course we have the fourth
scenario, which is from 3 to 0
| | 03:32 | for clockwise motion, so we need to check for that as well.
| | 03:34 | So we check to see if the currentIndex
is 0 and the previousIndex is 3.
| | 03:39 | If so the user is rotating the Wii Remote in a
clockwise motion, so we set the direction to 1.
| | 03:46 | Checking for counterclockwise motion is exactly the
opposite, check to see if the currentIndex is equal
| | 03:51 | to the previousIndex-1, so that would
be 3, then 2, and then 1, and then 0.
| | 03:57 | Then the exception is moving from 0 to 3, so we check to
see if the currentIndex is 3 and the previousIndex is 0,
| | 04:04 | if so the player is rotating counterclockwise
so we set the direction to -1.
| | 04:09 | After the calculations are made we take the datas of
the index of the button that was currently rolled over
| | 04:14 | and we hold it in our previousIndex variable, that way
we can use it the next time a button is rolled over.
| | 04:21 | Then we simply update the rotation of the wheel.
| | 04:24 | I'm adding onto it in the value of the direction which
is going to be 1 for clockwise, -1 for counterclockwise,
| | 04:31 | times speed which at the top I set to 10.
| | 04:34 | Now let's see the game in action.
| | 04:36 | Test the movie, move the mouse in a circular
motion clockwise, the wheel rotates clockwise.
| | 04:44 | If you move the mouse in a circular motion
counterclockwise, the wheel rotates counterclockwise.
| | 04:50 | I will close the Preview window and that is how
| | 04:52 | to capture circular motion whether it is
clockwise or counterclockwise from the Wii Remote.
| | Collapse this transcript |
| Adding velocity-based interactivity| 00:00 | Now we will look at adding one more element
to our Flash Wii games and that's Velocity.
| | 00:04 | Now let's say we wanted to make a balloon pumping game,
| | 00:07 | but to make the game a little bit more
exciting the balloon is constantly loosing air,
| | 00:11 | so you have to pump extra fast to
get the balloon pumped up in time.
| | 00:14 | If you are following along, I'm working in
05_Velocity.fla in the Chapter 03 folder.
| | 00:20 | The file is actually pretty simple, there is a pump, two
frames up and down, it has an instance name of pump_mc,
| | 00:27 | there is a balloon with an instance name of balloon_mc.
| | 00:33 | Two buttons one at the top called top_btn
and one at the bottom called bottom_btn.
| | 00:38 | Then we go to the first keyframe in the Actions layer and
open up the Actions panel, let's take a look at the code.
| | 00:44 | Two variables, one called shrinkAmt and one called growAmt,
shrinkAmt is the rate at which the balloon is shrinking
| | 00:52 | and growAmt is the rate at which the balloon grows.
| | 00:55 | I'm going to scroll down to the bottom of my
code and take a look at what runs immediately.
| | 01:00 | We roll over the top button, the up function runs and
we run over the bottom button the down function runs.
| | 01:07 | I'm stopping the pump on frame one
and executing shrink every frame.
| | 01:13 | I'm going to scroll up a little bit and
look at the up, down functions real quick.
| | 01:16 | It is actually pretty simple when you roll over the top
one, the pump goes to its up state and when you roll
| | 01:23 | over the bottom button, it goes
to it's down state and scales up.
| | 01:27 | The real magic happens in the shrink function.
| | 01:29 | Every frame the balloon is shrinking in
the amount of the shrinkAmt variable,
| | 01:34 | if the balloon ever shrinks too small then
we just simply reset the balloon size.
| | 01:41 | So now when I test the movie I move the mouse up and down to
pump up the balloon, but you can see the balloon is a kind
| | 01:48 | of fighting back and shrinking as I'm trying to pump it up.
| | 01:54 | So you can use this technique to create an endurance
game or to add a little fun to another game.
| | 01:59 | This completes the look at the techniques that we are
using to mimic the console interactivity for Wii games.
| | 02:06 | If this is enough information for you, feel free to
go out and create your own Wii games immediately.
| | 02:11 | If you'd like to see some examples of these techniques in
actual games then stick around to the next few chapters
| | 02:17 | and in each chapter we will make fully
functional games that use these techniques.
| | Collapse this transcript |
|
|
4. Creating Point-and-Click Interactivity: Meteor Shooter GameViewing the finished game| 00:01 | In this chapter we are going to create a Meteor Blaster game
where your Wii window will act as your laser gun to shoot Meteors.
| | 00:07 | If you are following along you can go ahead and
open up 01_Finished.fla in the Chapter 04 folder,
| | 00:13 | or you can do simply watch the application in action.
| | 00:16 | I'm going to test the movie
| | 00:17 | and you will see that we have this logo on the screen, level
information, how many points to win the level, and a click here to start.
| | 00:25 | If you run the keyboard shortcuts for test
movie again you will simulate the download
| | 00:31 | and you can see that there is a preloader for this application.
| | 00:34 | I'm going to start the game and you will
see that the gun shoot lasers and have sounds
| | 00:40 | and you could advance through levels and so on.
| | 00:44 | If the meteors hit your ship, your ship shrinks.
| | 00:55 | You also hear an intense roaring noise, and if your energy goes
down below zero then you get game over and you get some information
| | 01:02 | about what level you made it to and you
can click the button to play the game again.
| | 01:06 | So that's and overview of our Meteor Blaster game
| | 01:08 | so I'll start making it.
| | Collapse this transcript |
| Exploring the game's FLA file| 00:01 | Let's take a look at how the .fla for our game is set up.
| | 00:03 | If you are following along I'm working in
02_Exploring.fla in the Chapter 04 folder.
| | 00:09 | The first thing is that this game isn't
exactly from the Wii game template
| | 00:14 | in that I changed the frame rate to 12 frames per second.
| | 00:17 | Let's take a look at the layers.
| | 00:18 | We have the actions layer with no ActionScript
and no content, the preloader layer has no content
| | 00:24 | and we have the end layer, if I unhide it; is
what you see before you start playing the game
| | 00:29 | and after you are done playing the game; and
just shows the game's logo and some other text.
| | 00:35 | There is one Movie Clip on that layer called end_mc
| | 00:37 | and if you double click the Movie Clip you
will see that the Movie Clip is fairly simple.
| | 00:42 | There is the logo on the logo layer, on the
button layer there is an invisible button,
| | 00:46 | and the text in the background layer contains
dynamic text fields and a black background.
| | 00:50 | The text fields are level_txt, points_txt; level_txt, which
will display the level that the user is on, point_txt,
| | 01:00 | which will display how many points the user needs
to get to win that level, and clickHere_txt,
| | 01:06 | which is the message that's going to
basically say click here to play the game.
| | 01:10 | Let's go back to Scene1 and go down to
the next layer, which is called station.
| | 01:14 | I'm going to hide the end layer and lock it.
| | 01:16 | Station is kind of the main graphical
elements that we are looking at.
| | 01:21 | There is a Movie Clip on the station
layer called station_mc.
| | 01:23 | So if you just double click any of the artwork on
that layer then you will enter into station_mc.
| | 01:28 | You will notice that inside of station_mc,
you will see the cursor and that's going
| | 01:33 | to represent the cursor while you are playing the game;
so that is an instance of a Movie Clip called cursor_mc;
| | 01:38 | then the players energy bar is
in a Movie Clip called energy_mc.
| | 01:41 | Energy_mc is farily simple; there is a Movie Clip
called cover_mc at the top, and that represents the mask
| | 01:49 | for the energy, so we can make it look
like the player's energy is going down
| | 01:52 | and it has the energy Movie Clip called bars_mc.
| | 01:56 | Back to mcBattleStation, there is also this text field
that has the user's score, which is called score_txt
| | 02:04 | and two gun turrets; on the left we have
gunleft_mc and on the right we have gunright_mc.
| | 02:12 | At the top there is a Movie Clip
called dome_mc and that's about it.
| | 02:17 | So we have our main graphical elements, I'm going
to lock station layer, unlock the container layer,
| | 02:23 | and see that the container layer it
simple contains an empty Movie Clip,
| | 02:26 | which is and instance of mcContainer called container_mc.
| | 02:29 | I will lock the container layer and unlock the stars layer.
| | 02:33 | The stars layer is a very simple Movie Clip that
just contains some star graphics, back to Scene 1.
| | 02:39 | And that is it for how the stage is set up in our layers.
| | 02:42 | There are also some Movie Clips that we are going
to be using and some other library elements.
| | 02:46 | If you jump over to the library you will see mcMeteor.
| | 02:49 | If you double click mcMeteor you will see that
it's a very simple Movie Clip with three frames
| | 02:54 | and each frame has a different color of Meteor.
| | 02:56 | The actions layers simply has its Stop action
so that this Movie Clip will stop on frame one.
| | 03:01 | Also in the library you will see some
sounds the first one is called hit.mp3,
| | 03:07 | which will play when the player shoots a
Meteor; the next one is called laser.mp3,
| | 03:12 | which will play when the user shoots the
lasers, and the last one is called moo.mp3,
| | 03:21 | which will play when the player gets hit by a Meteor.
| | 03:28 | So that's how this .fla file is set up.
| | 03:29 | If you don't have access to the Exercise Files you can
simply set up an .fla file based on our game template
| | 03:35 | and that way you can follow along with all the
code that we write throughout this chapter.
| | Collapse this transcript |
| Setting up game variables| 00:00 | Now we will take a look at some of the variable that
we're going to use in our game just to start setting it up.
| | 00:05 | If you are following along, I'm working in
03_Varibles.fla in the Chapter 04 folder.
| | 00:11 | Let's go to the first keyframe of the
actions layer and open up the Actions panel.
| | 00:16 | I'm going to paste in some code, which can be found in code.txt
also in the Chapter 04 folder and you could find the exact
| | 00:22 | code in the Movie 3 section.
| | 00:25 | The first thing we are doing is importing gs.TwenLite.
| | 00:30 | If you are not familiar with TweenLite make
sure to watch the TweenLite movie in Chapter 02.
| | 00:34 | In order for this to work you will need to
copy the gs folder into the Chapter 04 folder.
| | 00:38 | Let's take a look at our variables;
| | 00:40 | meteorNum represents the current meteor number that's being
created. We'll talk more about that later once we start creating
| | 00:47 | the meteors, meteorInterval is going to be used with the set
Interval function to create meteors at certain intervals of time.
| | 00:54 | meteorInit is our initialization object for our meteors.
| | 00:58 | I'm initializing score to 0, initializing
the pointsToWin the first level at 1000,
| | 01:04 | initializing the currentLevel to start at 1,
| | 01:07 | initializing the currentMeteors:Array equal to an empty array.
The currentMeteors is going to hold all of the meteors
| | 01:14 | that are currently on the screen,
| | 01:16 | growthRange and spinRange represent
| | 01:19 | the random range of growth and spin that the meteors can have,
| | 01:24 | which we will also talk about more later
when we start animating the meteors.
| | 01:27 | maxObjects defines how many meteors can be on the state of maximum,
| | 01:31 | which in this case is three.
| | 01:33 | moo, hitSound, and laser are our game sounds and I'm
setting them equal to new instances of the sound class.
| | 01:39 | origX and origY represent the origingal X
and Y position of station_mc respectively.
| | 01:45 | So let's look at the variables that we are going to be using in
our game. In the next movie we will take a look at the functions
| | 01:50 | we are going to use to initialize our game.
| | Collapse this transcript |
| Initializing the game| 00:00 | Let's take a look at writing some of
the initialization code for our game.
| | 00:03 | If you are following me along I'm working in
04_Initializing.fla in the Chapter 04 folder.
| | 00:08 | And just like the other code I pasted in all of this code
is inside of the code.txt file in the Chapter 04 folder.
| | 00:14 | So I will paste it in and I'm simply using the
attachSound method to attach sounds from the library
| | 00:19 | to our sounds we created as variables
earlier; and that's moo, hitsound, and laser.
| | 00:24 | I'm also setting laser's volume to 50%, so unlike
ActionScript 3.0 volume ranges between 0 and 100.
| | 00:31 | So I'm not making the volume 50
times louder than it normally is.
| | 00:35 | I'm setting it at 50%.
| | 00:36 | Running this showScreen function, which I will show in
just a second and stopping the timeline because later
| | 00:42 | on we are going to have multiple frames in this timeline.
| | 00:45 | So I will put the showScreen function in between the
variable section and the run immediately section.
| | 00:49 | The showScreen function essentially
just shows the end screen.
| | 00:53 | This is the same screen for starting the game,
advancing through levels, and when you get a game over.
| | 00:58 | Let's take a look at the specifics of the function.
| | 01:00 | Showing end_mc; it is set by setting
its _visible property to true.
| | 01:05 | Tweening it in using the TweenLite engine,
by the way if its already at an alpha
| | 01:09 | of 100 you won't see any ActionScript tween at all.
| | 01:12 | Setting the score 0, setting the text in the clickHere_txt
text field which is inside of end_mc equal to Click here
| | 01:19 | to start; adding 1 to the growthRange and that's
just going to add to the speed that the meteors grow,
| | 01:25 | which we'll talk about more when we look at
animation for the meteors; disabling the onPress event
| | 01:31 | for stars_mc by setting its value to null.
| | 01:35 | Running the stopAllSounds function to stop
all sounds that are currently playing;
| | 01:39 | setting the invis_btn onPress event equal to statrtGame.
| | 01:43 | What that means is that when the user clicks
on the text that says Click here to start,
| | 01:47 | which is where the invisible button
is, the startGame function will run.
| | 01:51 | We'll take a look at the startGame
function in just a minute.
| | 01:54 | I'm showing the Mouse and by the way the mouse is
not going to hide on the Wii, it's only going to hide
| | 02:00 | on the computer if someone plays it there.
| | 02:02 | And I'm disabling _root.onEnterFrame
by setting its value to null.
| | 02:06 | Let's take a look at the startGame function; I
will paste it right below the showScreen function.
| | 02:10 | The startGame function actually
starts the game, so when you click,
| | 02:14 | Click here to play then the game
starts and here you see what happens.
| | 02:18 | Again, we set the score to 0, just to be safe setting the
score_txt field equals to the score that the user has,
| | 02:24 | setting the _xscale of the cover_mc movie clip that
the one that covers the energy bar equal to 100.
| | 02:31 | So as the player gets hit the cover will shrink and
it will appear that the player's energy is going down.
| | 02:38 | And this line of code is connected with the next line,
| | 02:41 | which sets the mask of the bars_mc movie
clip equal to the cover movie clip.
| | 02:46 | So in ActionScript 2.0 you set a mask using
the setMask method and not the mask property.
| | 02:52 | Now we will started the game, I'm hiding the mouse, showing
the cursor, which is going to follow the users mouse,
| | 02:59 | disabling _root.onEnterFrame and then resetting it
equal to updateAll, this code is just to be safe.
| | 03:06 | First we disable it, make sure that everything
is cleared, and then we add the value again
| | 03:11 | to run the updateAll function,
which we will also talk about later.
| | 03:14 | Then I'm setting the pointsToWin variable
equal to the current level time to 1,000.
| | 03:19 | So for Level 1 the player needs 1,000
points; for level 2, 2,000 and so on.
| | 03:23 | And then this block of code fades out
the end_mc movie clip in 0.25 seconds.
| | 03:31 | And notice this section here that says onComplete, hideEnd.
| | 03:35 | The onComplete property that we can pass in to the
object tells the TweenLite engine what function to run
| | 03:42 | when the tween is complete and the function
that I'm running is called hideEnd.
| | 03:46 | First we will take a look at the updateAll
function and then the hideEnd function.
| | 03:50 | updateAll function is fairly simple, I will
paste it right below the startGame function.
| | 03:55 | All it's doing right now is it is setting the cursor's x and
y position in every frame equal to the position of the mouse
| | 04:03 | and notice that we are, kind of, offsetting
it by the x and y position of station_mc.
| | 04:07 | The reason for that is because the
cursor is inside of station_mc.
| | 04:12 | So to match its position with the mouse we
need to offset its value by its parents.
| | 04:18 | So to match the position of the cursor
with the player's mouse we just need
| | 04:23 | to simply offset it by its parents x and y positions.
| | 04:26 | Now you may be thinking why don't
we use the startDrag method.
| | 04:29 | The problem with the startDrag method is it puts the
movie clip under your mouse constantly so when you click,
| | 04:35 | click Events can be captured by
the object that you are dragging
| | 04:38 | and that's definitely something we do not want to have.
| | 04:41 | We don't want to click on the cursor,
we just want to have the cursor be there
| | 04:44 | and move around with the player's mouse,
and this the simple way to achieve that.
| | 04:48 | Next we will take a look at the hideEnd function.
| | 04:50 | I will paste it right below the
updateAll function and again this runs
| | 04:54 | when the tween is complete for
the end movie clip fading out.
| | 04:58 | And I'm simply setting its visible property to
false; the reason why I'm doing that is to make sure
| | 05:03 | that it doesn't register any click events.
| | 05:05 | So that we can click on the meteors and on the
background and other objects on the screen.
| | 05:10 | So let us take a look at what's
going to initialize our game.
| | 05:12 | So if I test the movie right now I should be
able to click where it says Click here to start
| | 05:17 | and run the startGame function, which starts the dragging
of the custom cursor and close the preview window.
| | 05:25 | The next step is to start creating
meteors, which we will do in the next movie.
| | Collapse this transcript |
| Creating meteors| 00:00 | We are also going to look at creating meteors.
| | 00:03 | If you are following along, I am
working in 05_Creating_Meteors.fla,
| | 00:06 | or you can just use the same file from last exercise.
| | 00:09 | Let's scroll down to the start Game function,
at the bottom of the start Game Function,
| | 00:13 | I'm going to use a function called setInterval, to
run a function called, to create meteors every second.
| | 00:21 | When you are using the setInterval function,
it's best to use a variable to hold setInterval.
| | 00:27 | We have already defined a variable, and
that variable is called meteorInterval.
| | 00:30 | So we're going to set meteorInterval = setInterval,
again, setInterval runs a function every certain amount
| | 00:37 | of milliseconds, and for the syntax, the
first value you pass in is the timeline
| | 00:43 | in which the function you want to run is attached.
| | 00:45 | So I'm going to type _root, because our
functions is going to be on the main timeline.
| | 00:49 | The second parameter is the name
of the function as a string.
| | 00:54 | The function is called, createMeteors.
| | 00:59 | The third parameter is the amount of milliseconds to wait
before executing the function, and that's going to be 1000.
| | 01:07 | whenever you setInterval, it's best to
clear the interval before you set it.
| | 01:12 | Now, basically clearing the interval is the same
thing as calling, a setting _root.onEnterFrame = null,
| | 01:19 | it stops the createMeteors function or
whatever function you pass in from running.
| | 01:24 | This is considered a best practice you can serve memory.
| | 01:27 | So right above where we set the interval, we are going to
call clearInterval and I'm going to pass in meteorInterval.
| | 01:37 | For information on setInterval
and clearInterval, see Flash Help.
| | 01:41 | I'm also going to run clearInterval inside
of the show screen function to make sure
| | 01:47 | that meteors are not being created
as soon as the game stops.
| | 01:50 | So, at the very bottom of the show screen function, I am
calling clearInterval, and I'm passing in meteorInterval.
| | 01:57 | Now we write the createMeteors function.
| | 02:01 | I will paste it right above the show screen function.
| | 02:07 | The first thing I'm doing in here, is checking
to see if the length of meteors array is less
| | 02:12 | that the maximum number of objects that are allowed.
| | 02:15 | If so, then it will create a meteor, I am
holding the meteor in a variable called meteor,
| | 02:21 | setting the variable's value = container_mc.attachMovie.
| | 02:26 | So what this does is, is it creates a movie clip
that I'm holding it inside of this meteor variable.
| | 02:31 | That way I can quickly and easily reference it later on.
| | 02:34 | In the attached movie method, I
am passing in a few parameters.
| | 02:37 | The first one is mcMeteor which represents the
identifier name for the mcMeteor symbol in the library.
| | 02:43 | Then I'm passing in the meteor's instances
name, which is going to be meteor+meteorNum.
| | 02:49 | This represents the number of meteor that's
created, and I'm using a variable here,
| | 02:53 | so that it will have a unique instance
name every time I create a meteor.
| | 02:58 | The depth I'm setting is container_mc.getNextHighestDepth,
so that each meteor will be
| | 03:03 | at the container's next highest available depth.
| | 03:07 | The Init that I'm passing in, is meteorInit.
| | 03:10 | On the next line of code, I am
running meteor.initializeMeteor,
| | 03:15 | initializeMeteor is not a built in method.
| | 03:18 | It's a method that I'm going to define in just
a minute connected to our meteorInit object.
| | 03:23 | So not only the built in properties
and methods apply to objects
| | 03:27 | when they are attached via the Init object parameter,
but custom, properties and methods attach as well.
| | 03:33 | Next I'm clearing the meteorInterval, and
then setting a new value to meteorInterval,
| | 03:37 | which is pretty much the same thing, except for the
time interval, which going to be a random number.
| | 03:42 | This will make the game a little bit more interesting, so
the player will not know exactly when a meteor is created.
| | 03:47 | If you create a meteor every second,
then the game will become easy,
| | 03:51 | because the player will know when
to expect a meteor to appear.
| | 03:53 | Next I'm incrementing the meteorNum variable by one,
and then adding the meteor to the currentMeteors array.
| | 03:59 | Let's take a look at the initialized meteor method.
| | 04:03 | I'm going to paste it right above
the createMeteors function.
| | 04:06 | Those are attached to meteorInit.
| | 04:09 | So instead of MovieClip.initFrame = functions,
I have meteorInit which is my Init object,
| | 04:15 | .intializeMeteor that's a method that I'm defining
now, and I'm setting it's value = a function.
| | 04:20 | Let's take a look at what this function does.
| | 04:22 | First it sets up a random frame, the random frame is
mathematically calculated to perform a simple formula,
| | 04:30 | and all it does, is it grabs a random
frame from the meteor movie clip.
| | 04:35 | As I showed earlier in this chapter,
the meteor movie clip has three frames.
| | 04:39 | So by multiplying Math.random by *this, meaning the meteor.
| | 04:43 | _totalframes, and then rounding it up using math.ceil.
| | 04:48 | we get a random frame that meteor has.
| | 04:50 | So we either get one, two or three.
| | 04:53 | Then I'm running TweenLite.from, so this Tweens the meteor
and in from a certain value, so this being the meteor,
| | 05:00 | the Tween will take 0.5 seconds, and it will Tween from
{_alpha:0}to {_alpha:100} I'm setting the _xscale,
| | 05:07 | and _yscale properties equal to Math.random * 50 + 50.
| | 05:14 | This is a random number with a minimum
value of 50 and a maximum value of a 100.
| | 05:19 | Then I'm setting the growthRate, the
growthRate is based on the growth range variable.
| | 05:24 | The growthRate is the rate at which the
meteor will grow, when it's starts animating.
| | 05:28 | The spin is essentially the same thing; I'm setting
the rotation to a random value between -180 and +180.
| | 05:36 | I'm setting the X and Y properties
to random values on the stage.
| | 05:41 | Actually it's 2.0, notice that you get
the width of the stage by Stage.width
| | 05:44 | and the height of the stage by Stage.Height.
| | 05:46 | So it's a little bit different in ActionScript 3.0.
| | 05:49 | Next, I'm telling the media to gotoAndStop at the value
of the randomFrame variable that we have defined earlier.
| | 05:56 | Next, I'm setting the pointValue for this media.
| | 05:59 | The point is also a custom property that I'm creating right
here, and it's a whole number, as you can see by Math.floor,
| | 06:06 | and the value comes from the growthRate *the currentFrame.
| | 06:11 | So basically the higher the frame number the more points
it's going to worth, * 25, and that will create our meteors.
| | 06:19 | If I test the movie, then I will see meteors
created, once I click, Click here to start.
| | 06:24 | Meteor one, meteor two and meteor three, notice that they
all fade in, nice and easy, and they have random rotations,
| | 06:30 | random sizes, and random frame numbers, nice.
| | 06:34 | I will close the preview window, and now
we have successfully created meteors.
| | 06:38 | Next, we'll take a look at animating these meteors.
| | Collapse this transcript |
| Animating meteors| 00:00 | Now we will Animate the meteors, which
is actually going to be pretty simple.
| | 00:04 | If you are following along, I'm working in 06_Animating_Meteors.fla,
in the chapter four folder. You can obviously just use
| | 00:11 | the same file from last exercise as well.
| | 00:13 | We are going to scroll down to the Update All function,
| | 00:16 | and if you watch the title I'm creating a Particle System in
ActionScript 3.0. This process will look very familiar to you.
| | 00:21 | At the bottom of this function I'm going
to paste in some code, and it's a loop
| | 00:26 | that runs for each meteor in the currentMeteors array.
| | 00:29 | I'm creating a variable here called meteor that holds currentMeteors
index, open square bracket, I, closed square bracket, semi-colon,
| | 00:33 | just so I can reference it shorthand,
| | 00:35 | and very simply modifying the meteor, based on it's growth rate
and spin properties. So I'm adding to the meteors X scale
| | 00:43 | by it's growthRate, setting the meteors Y scale equal to it's X
scale, and then adding to it's rotation based on it's spin amount.
| | 00:51 | If I test the movie now, we will see the meteor spin and grow,
| | 00:56 | once they are created.
| | 01:01 | I'll close the preview window, and now our meteors animate.
| | 01:04 | In the next movie, we will take a look at
shooting the meteors, when you click on them.
| | Collapse this transcript |
| Shooting meteors| 00:00 | Now add the functionalities, so
that when you click on the meteors
| | 00:03 | with your mouse or Wii-Remote the meteors will fly back.
| | 00:07 | If you are following along, I'm working
07_Shooting_Meteors.fla in the chapter four folder
| | 00:13 | or you can just use the same file from last exercise.
| | 00:16 | Let's go down to meteorInIt.intializeMeteor
and at the bottom of this method,
| | 00:20 | we are going to add in the code
for its onRelease event handler.
| | 00:24 | So this.onRelease or the meteor.onRelease = hitMeteor.
| | 00:32 | Make sure do not put any parenthesis, because
we don't want to run the function now,
| | 00:35 | we want to run it when the onRelease event happens.
| | 00:38 | The hitMeteor function is fairly simple.
| | 00:40 | I'm going to paste right below meteorInIt.intializeMeteor,
it simply runs another function called hit and passes
| | 00:47 | in two values, this which is the meteor, because
this is connected to the meteor.onRelease event
| | 00:54 | or onRelease property and a value of true.
| | 00:57 | Let's take a look at the hit function, let's take a look at
the hit function or paste it right below hitMeteor function.
| | 01:04 | So it sets two parameters a meteor which
is MovieClip and point which boolean.
| | 01:09 | The point value is whether or not
the player gets a point for this hit.
| | 01:14 | We are going to use this function in two ways, when a
player clicks on a meteor and when a meteor hits the player.
| | 01:21 | So point just tells us true, if the player gets a
point and false if the player got hit by a meteor.
| | 01:28 | We have two variables here, one called randomRotation,
that's a random value between -180 and +180 and random scale
| | 01:35 | which is a random number between 0 and 50.
| | 01:38 | Then I'm running TweenLight.to method passing in the
meteor, that's passed in, the other meteor parameter.
| | 01:45 | The animation will happen in 0.5 seconds and here
are the properties that are going to be affected.
| | 01:50 | The alpha will go to 0, the xscale
will go to the randomScale,
| | 01:54 | yscale will go to randomScale and
rotation will go to randomRotation.
| | 01:59 | Now if the value of point is true, then we are going to add
on to the player score, in the amount of meteor.pointValue
| | 02:07 | and just to make sure that value is an
integer, I'm using math.floor here.
| | 02:11 | Then we are taking the score and put
it again inside of score text field.
| | 02:15 | Now we should be able to click on the meteors and we
test the movie and they should fade out and spin away
| | 02:21 | and then added to the score at the bottom of the screen.
| | 02:24 | Let's test the movie and see that works.
| | 02:26 | Click here to start, then as I click meteors
notice the points go up in the score text field
| | 02:31 | at the bottom and the meteors float away.
| | 02:33 | I will close the preview window and now we can
shoot meteors, the next step is to fire lasers
| | 02:40 | when you shoot the meteors and add the laser sound.
| | Collapse this transcript |
| Firing lasers| 00:00 | Now let's take a look at firing lasers to shoot the meteors.
| | 00:03 | The first step in firing lasers is rotation
the guns toward wherever the cursor is,
| | 00:08 | to do that I'm going to scroll
down to the updateAll function.
| | 00:12 | At the top of the updateAll function, I'm going to paste
two lines of code, now that may not look like two lines,
| | 00:18 | but I have word wrap on and have a large font.
| | 00:20 | So it's not as intimidating as it looks.
| | 00:23 | Let me walk you through it.
| | 00:24 | What we are doing is we are controlling the rotation
of gunLeft_mc and the rotation of gunRight_mc,
| | 00:31 | both of these use the exact same
formula to get the rotation of the guns.
| | 00:35 | If you watch title on creating particle
systems in ActionScript 3.0 this going
| | 00:40 | to be the exact same formula used to
rotate objects toward a certain point.
| | 00:44 | What I'm using is math.atan2,
atan2 is short for arc tangent 2
| | 00:51 | and if you want more information
you can look at up in Flash Help.
| | 00:55 | But for this purpose, all you need to know is that you
pass X an Y positions and you can use this function
| | 01:02 | to make an object rotate toward a
certain point and in Math.atan2,
| | 01:07 | remember that you pass in the Y
position before the X position.
| | 01:12 | So it may not be quite as intuitive,
but it's actually pretty easy to use.
| | 01:16 | So the first parameters is the Y point,
I want the gun to rotate towards.
| | 01:20 | As this massive value here, sort of
the Y position in the cursor inside
| | 01:26 | of station_mc, then I subtract station_mc.gunLeft_mc.
| | 01:33 | _y, so basically this value is the distance
of the cursor from the gun MovieClip.
| | 01:39 | For the X value it's exactly the same thing, the
X distance of the cursor from the gun MovieClip
| | 01:44 | and then the science happens when you take
that value and you multiply it by 180 over pi.
| | 01:51 | So again I multiply it by 180 divided by Math.PI, so you do
that for the gunLeft MovieClip and the gunRight MovieClip
| | 01:59 | and you have the guns that rotate toward the cursor.
| | 02:02 | You will notice that if you look at the gunRight
MovieClip the formula is exactly the same.
| | 02:07 | I simply copied and pasted the code
and changed the name of the MovieClip.
| | 02:10 | So there is no magic that you have to do
for the right gun or for the left gun.
| | 02:14 | Alright let's test the movie and see what we have got.
| | 02:15 | Start the game, move the cursor
and watch the guns follow it, nice.
| | 02:23 | The next step is to make the laser shoot
out of the guns, to fire the laser,
| | 02:28 | we are going to use a function called fireTheLasers,
I'm going to paste that at the very bottom
| | 02:33 | of all my elite functions here and I'm going to
scroll up and walk-through, what this function does
| | 02:38 | and it accepts one parameter which
isHit and the value is Boolean.
| | 02:42 | The value is true, if the player hit a meteor
and false if the player did not hit a meteor.
| | 02:47 | If the value is false then we run the
stopAllSounds function to stop all the sounds.
| | 02:52 | Here I'm attaching the laser.mp3 sound to the laser
and then running the start method to start the sound.
| | 02:58 | This large block of code here, simply draws some lines
inside of station_mc there is movie clip called lasers_mc,
| | 03:07 | that's just an empty movie clip,
it's an instance of mc container.
| | 03:11 | I'm writing the clear method to clear all
the graphics that are previously drawn,
| | 03:15 | inside of lasers movie clip then I'm setting the
alpha of the lasers movie clip equal to a hundred.
| | 03:20 | From there I simply define a lineStyle
which going to be stroke of 5, the color Red
| | 03:27 | and alpha of 100 and true for pixel hunting.
| | 03:31 | That will make sure that it angle to point to the line or
on whole pixels and not floating point numbers for pixels.
| | 03:36 | The same thing is true here, make sure that our lines
will not be jagged, when they display on screen.
| | 03:42 | Then I run the moveTo method on the lasers to put starting
point of line at gun X and Y position, simple it up,
| | 03:50 | and draw a line to the cursor and that's for the left gun
and then I move the line point to draw a laser starting
| | 03:57 | from the right gun and ending up at the cursor.
| | 04:00 | So we have these two red lines coming out, one
from each gun and they both end up at the cursor
| | 04:06 | and then I Tween the lasers out
using TweenLite, pretty simple
| | 04:11 | and now we will just have to run the fireTheLasers function.
| | 04:13 | We are going to do that in a few places, the first
place is going to be, in the hitMeteor function.
| | 04:17 | So I'm going to scroll up and I'm going to find
hitMeteor and in my code hitMeteor is on line 35
| | 04:25 | and right below everything else I'm going to run
fireTheLasers and if they hit meteor function runs
| | 04:31 | and we know that we hit a meteor,
I'm going to pass in true.
| | 04:34 | Before we adjust the movie, I'm going
to add fireTheLaser in a few more places.
| | 04:37 | I'm going to scroll to the startGame function
and at the very bottom of the function,
| | 04:42 | I'm going type stars_mc.onPress equals fireTheLasers.
| | 04:49 | By not passing in the value of true,
Flash is going to assume about your false
| | 04:53 | for our Boolean variable and fireTheLasers.
| | 04:55 | So that way the lasers will fire, when we click on
the background of the clip which is called star_mc.
| | 05:00 | If we test the movie at the point, we'll be able to shoot
the lasers and see them in action and here is some sounds.
| | 05:06 | It looks like it's working great and just
to manage the sounds a little bit better,
| | 05:19 | I'm going to paste some more code
inside of the hitMeteor function.
| | 05:23 | So I'm going to scroll up, going to find
hitMeteor and at the very top of the code,
| | 05:28 | I'm going to paste in some sound modifying code.
| | 05:30 | So I'm going to stopAllSounds
always before hitting a meteor,
| | 05:35 | then I'm going to attach the sound hit.mp3
to the laser and then start that sound.
| | 05:40 | Now when I test the movie, I'm going to get a little
bit more advanced sound when I shoot the meteors.
| | 05:44 | I'm not only going to get the laser sound,
| | 05:47 | but I'm also going to get the hit sound
and that looks like it's working great.
| | 05:56 | So now we have our meteor set up
or guns point toward the cursor.
| | 06:00 | We can shoot the meteors and lasers
come out, we even have sound.
| | 06:03 | The next step is to optimize the game by properly discarding
meteors that are unused and effectively reset the meteors.
| | Collapse this transcript |
| Properly discarding meteors| 00:00 | Now we'll take a look at properly discarding
meteors, once we are done with them.
| | 00:03 | If you are following along, I'm working in
09_Discarding_Meteors.fla in the chapter four folder.
| | 00:10 | There are a few things we are going
to do, to discard the meteors.
| | 00:12 | The first one is going to be to get rid of all the meteors
when we start the game or when we are done with the game.
| | 00:18 | So I'm going to scroll down on my code and
I'm going to find the showScreen function.
| | 00:24 | At the bottom of the showScreen function, we are going
| | 00:26 | to run a function called sweep, which
we will define in just a minute.
| | 00:29 | Sweep function is going to get rid of all the
meteors inside of the current meteors array.
| | 00:33 | I'm also going to run this sweep function inside of
the startGame function, at the top of the function.
| | 00:40 | Now let's define the sweep function.
| | 00:42 | We are going to paste it in at the bottom
of all of the other functions in my code.
| | 00:49 | The sweep function is actually pretty straight forward,
I'm using a while loop to go through all of the meteors,
| | 00:56 | in the current meteors array, as long as the
length is grater than zero and what I'm doing,
| | 01:01 | is I'm running the shift method,
on each meteor in the array.
| | 01:04 | And what the shift method does, is it removes
and returns the first element of an array.
| | 01:10 | So we are taking that element and we are calling
unloadMovie on it and unloadMovie simply discards the movie.
| | 01:17 | So basically at one line of code
here, we are taking the meteor
| | 01:20 | out of the current meteors array and we are unloading it.
| | 01:24 | The next place to get rid of meteors,
is in the hit function.
| | 01:27 | I'm going to scroll up to find the hit function.
| | 01:29 | Fine, it starts on line 44, and I'm going
to find the TweenLite.to line of code.
| | 01:35 | I'm going to add some properties inside of the
object area, toward the end of the block of code.
| | 01:40 | Make sure your cursor is inside of the closed curly
brackets and then we will add some additional properties.
| | 01:46 | Once the meteor fades out after it's hit, I'm going to
run a function called discard, so type onComplete:discard.
| | 01:55 | Remember onComplete runs once the Tween is finished.
| | 01:59 | So I'm going to run the discard
function once this Tween is finished.
| | 02:02 | Now I want the pass in a parameter to
this function, and the way to do that is
| | 02:07 | through another property called onCompleteParams.
| | 02:13 | OnCompleteParams accepts an array of parameter
values and the array is simply going to hold meteor.
| | 02:21 | Now let's define the discard function.
| | 02:23 | We'll define it below all of my other functions.
| | 02:25 | I'm going to scroll down right below sweep,
I'm going to paste in the discard function,
| | 02:30 | which accepts one parameter called
trash and that's a MovieClip
| | 02:34 | and we are simply running the unloadMovie
method on that MovieClip.
| | 02:37 | The next thing we need to do, is make sure
that these meteors that are unloading,
| | 02:41 | are being taken out of the meteors array, so
they stop updating in the update all function.
| | 02:45 | So what I'm going to do, is scroll up, I
am going to go back to the hit function,
| | 02:49 | and at the bottom of the hit function, I'm going to run a
function called remove, and I'm going to pass in meteor.
| | 02:57 | The remove function is simply going to take
a meteor out of our current meteors array.
| | 03:01 | I'll write the remove function below
all the other functions in my code.
| | 03:05 | So right below the discard function, I'll paste it in, it
accepts one parameter which is the meteor and some MovieClip
| | 03:11 | and have a variable code index, then I'm looping
through all the meteors in the current meteors array.
| | 03:17 | If the meteor that's passed in is
equal to currentMeteors index i,
| | 03:22 | then the variable index is set
to i and then I'm running break.
| | 03:27 | Break simply stops this loop from running.
| | 03:31 | Once we have the index removed then we run
currentMeteors.splice and splice removes indices
| | 03:37 | of an array starting with whatever index you pass in,
so the index is whatever the index variables value is
| | 03:44 | and then the next parameter is how many indices
to remove and the remove count here is just one,
| | 03:49 | because we want just to remove that
meteor from the current meteors array.
| | 03:53 | So once the meteor is removed from the array,
it'll stop updating in the update all function
| | 03:57 | and that will keep our code nice and efficient.
| | 04:00 | So let's test the movie and meteor should
keep on coming after we click them.
| | 04:07 | Nice, so now our game is starting to
look and feel a lot more like a game.
| | 04:20 | We just have a few more finishing touches
to add, until out game is complete.
| | 04:24 | The next feature we are going to add is a system for
advancing through levels, we'll do that in the next movie.
| | Collapse this transcript |
| Advancing through levels| 00:00 | Now, look at building a level system for our game.
| | 00:03 | If you're following along I'm working
in 10_Levels.fla in the Chapter 4 folder
| | 00:07 | or you can just see it's the same
file from the last exercise.
| | 00:10 | Let's scroll down to the Hit function.
| | 00:12 | At the very bottom of this function, we're going
to write a conditional statement to check to see
| | 00:17 | if the player's score is greater than or equal
to the number of points require to win the level.
| | 00:25 | If so, the players are ready to advance to the next level.
| | 00:28 | So I'm going to add on to the currentLevel variable,
and then I'm going to run the showScreen function.
| | 00:39 | We're also going to need to add some
functionality to the showScreen function.
| | 00:42 | So I'm going to scroll to the showScreen function.
| | 00:46 | Here, I'm going to add some code right below score = 0.
| | 00:52 | This is fairly simple, resetting the value
of pointsToWin = currentLevel times of 1000.
| | 00:59 | Then, I'm displaying some text in the Level Text field.
| | 01:02 | So it says "LEVEL" + the value of currentLevel.
| | 01:06 | Then, I'm putting the value in the Points
text field to explain the points to win.
| | 01:11 | So it'll show the value of the pointsToWin
variable, and then it will say "Points To Win".
| | 01:17 | That's really all there is to it.
| | 01:18 | Now we pretty much have a level system.
| | 01:20 | So I'll play the game and advance through a few levels.
| | 01:23 | So we see LEVEL 1, 1000 Points to Win, start the game.
| | 01:30 | So I beat LEVEL 1.
| | 01:34 | Now I'm on LEVEL 2 with 2000 Points to Win.
| | 01:40 | Let's start the game.
| | 01:43 | So if you notice you can click the meteors
really fast multiple times and get extra points.
| | 01:56 | That's something that I kind of like the way it is,
but if you want to change it, you can feel free to take
| | 02:00 | on that project as a homework assignment and do a
little research and figure how to do it yourself.
| | 02:05 | So we can see that our level system works great.
| | 02:07 | I'm going to close the Preview window,
and we have a working level system.
| | 02:11 | The next step in finishing up our game is
to make some sort of difficulty or challenge
| | 02:16 | for the players, so they can lose the game.
| | 02:18 | The first thing we'll do for that is set
up a system so that the player gets hit
| | 02:22 | if the meteor gets too close to their ship.
| | Collapse this transcript |
| Handling ship hits| 00:00 | Now, we'll make it possible for the player
to get hit by meteors if they get too large.
| | 00:05 | If you're following along, I'm working in
11_Handling_Hits.fla in the Chapter4 folder.
| | 00:11 | You can obviously just use the same
file from the last exercise as well.
| | 00:14 | Let's scroll down to the updateAll function.
| | 00:17 | In my code, you'll see the updateAll function on line 114.
| | 00:20 | At the very bottom of this function, I'm going to paste
in a block of code to check to see the size of the meteor.
| | 00:27 | If the size of the meteor tested only by its x scale
because the meteor has the same X and Y scale is >= 150
| | 00:39 | and the meteor_alpha property is == 100, then the
meteor is big enough to hit the ship and I'm going
| | 00:46 | to run a function called shipHit on that meteor.
| | 00:50 | For the shipHit function, I'm going to scroll down and I am
going to paste the function below all the other functions.
| | 00:57 | Now, this function is kind of big
but it's actually pretty simple.
| | 01:00 | I'll walk you through the function line by line, accepts
one parameter and that's the meteor that hit the ship.
| | 01:07 | We have a variable called numOfTimes, I'm setting it out
= 0 starting the moo sound which is the sound that happens
| | 01:14 | when the ship gets hit and I'm setting the
onEnterFrame property of station_mc equal to a function.
| | 01:20 | Now here's one part of the shipHit function.
| | 01:24 | Our onEnterFrame block takes up
the code that I have selected here.
| | 01:28 | All it does is it shakes the ship.
| | 01:31 | So it's actually pretty simple.
| | 01:33 | It's x and y position, moves by a small random increment.
| | 01:38 | It's x and y scale increases or
decreases by a small random increment.
| | 01:44 | The number of times variable goes up.
| | 01:46 | If the number of times variable is >= 5, then I have
reset the values of x and y position and x and y scale
| | 01:54 | for the station and disable the onEnterFrame event
by setting the onEnterFrame value equal to null.
| | 02:01 | The other part of this function simply makes the meteor get
hit where it passes in a value of false to the hit function.
| | 02:08 | The rest of this function is pretty simple.
| | 02:10 | I run the hit function passing in the meteor and a value
of false because the user is not going to get a point
| | 02:16 | when a meteor hits the ship and then the last two
lines deal with the energy inside the station_mc.
| | 02:22 | The cover for the energy's xscale decreases in the
amount of the meteor's growth rate times (*) 2.
| | 02:30 | So the faster the meteor is moving, the more
energy it will take away from the player.
| | 02:34 | Then I'm simply resetting the mask
on bars_mc using the setMask method.
| | 02:39 | That's really all there is to it.
| | 02:41 | So let's test the movie and watch the ship
shake and make a sound when the meteor hits it.
| | 02:46 | So you can hear that chorus of
roars when the meteor hits the ship.
| | 03:01 | So we have successfully detected when the
meteor is too big and it hits the ship.
| | 03:05 | The next step is to make a way for the player to
lose the game when the player's energy runs up.
| | Collapse this transcript |
| Losing the game| 00:00 | Now, we'll create a way for the player to lose the game.
| | 00:03 | If you're following along, I'm working
in 12_Losing.fla in the Chapter4 folder.
| | 00:08 | You can obviously use the same file from the last exercise.
| | 00:10 | Find the shipHit function in your code.
| | 00:13 | I'm on line 184 in my code, but
yours may be a different line.
| | 00:17 | At the bottom of the shipHit function,
I'm going to paste in some code.
| | 00:20 | In order to check to see if the player is lost, I simply
have a conditional statement that checks to see if the cover
| | 00:28 | of the player's energy or the mask for the player's
energy xscale is < 0, if so, the player has lost the game.
| | 00:37 | I'll just program my code there to make it a little easier
to read and let's go through what this block of code does.
| | 00:42 | It's pretty simple.
| | 00:43 | First it makes the end movie clip visible,
tweens it in, displays text for the level
| | 00:49 | and points text fields, level text field says GAME OVER.
| | 00:53 | The point text field says You made it to
level and then whatever level you made it to.
| | 00:58 | clickHere text field says click here to play again.
| | 01:01 | The currentLevel is reset to 1, growthRange is reset to 2.
| | 01:05 | I'm disabling the Stars on press so it's null,
running the stopAllSounds functions, showing the Mouse.
| | 01:15 | Nullifying the _root.onEnterFrame by setting its value
to null, running the sweep function and setting the value
| | 01:23 | of the invisible buttons onPress property = startGame.
| | 01:28 | So this pretty much resets everything just
as if we started the game all over again.
| | 01:31 | So you can see it's actually pretty simple.
| | 01:33 | Let's test the movie and see as an
action and see if we can lose the game.
| | 01:36 | And I'll just start the game and let the meteors destroy me.
| | 01:55 | And there is the GAME OVER screen.
| | 01:59 | It says You made it to Level 1, then you can
play the game again by clicking the button.
| | 02:04 | And it looks like everything is working great.
| | 02:10 | So now we can lose the game, we can win the game and
there's one more thing I want to add onto the game
| | 02:15 | and that's a Preloader because this game is pretty
intense graphically especially for a Wii game.
| | 02:20 | We'll take a look at adding a Preloader
to this game in the next movie.
| | Collapse this transcript |
| Creating a preloader| 00:00 | Now we'll take a look at adding a Preloader to our game
| | 00:02 | to make sure all the assets are loaded before
the person playing the game starts playing.
| | 00:06 | If you're following along, I'm working in
13_Preloader.fla in the Chapter4 folder.
| | 00:11 | You could also use the same file from the last exercise.
| | 00:14 | The first thing I'm going to do, first thing I'm going to
do is move all of the frames on frame one over to frame two.
| | 00:19 | So I'm going to select them all by
clicking-and-dragging and then I'm going
| | 00:22 | to click-and-drag my selection to frame two.
| | 00:24 | I'm going to go to the first key from
the Actions layer and I'm going to open
| | 00:28 | up the Actions panel, and I'll
paste it in my Preloader code.
| | 00:32 | A Preloader code is very simple, it is running the
Preload function on the onEnterFrame event for _root
| | 00:38 | and I'm having the time line stop and we'll take a look
at the Preload function of a variable called percent,
| | 00:43 | it's a number and I'm simply rounding using Math.ceil,
the value of _root.getBytesLoaded/_root.getBytesTotal
| | 00:54 | so the loaded bytes for the movie divided
by the total bytes for the movie times 100.
| | 00:58 | So we may get a value between 1
and 100, pretty straight forward.
| | 01:02 | And then I'm taking that value and I'm putting it
inside of a text field which I'll create in just a second,
| | 01:08 | and it says Loaded after the percent (%).
| | 01:10 | If the percent is greater than or equal to 100 which by
the way it's not likely that it'll ever be greater than 100
| | 01:16 | but just in case I'll put the greater than (>) sign there,
| | 01:18 | going to nullify_root.onEnterFrame
and then move to the next frame.
| | 01:23 | That's all there is to it.
| | 01:24 | Let me close the Actions panel and on the Preloader
layer, I'm going to create a Preloader text field.
| | 01:28 | To do that, I'll have to unlock the Preloader layer and then
click-and-drag to draw a dynamic text field on the stage
| | 01:35 | and I'm going to give it an instance name of
preload_txt and set the font to OCR A Standard.
| | 01:45 | Make sure the text is not selectable.
| | 01:48 | Set the font to a font size of 45 and white.
| | 01:52 | I'm going to click the paragraph alignment
center, center the text on the stage and that's it.
| | 01:58 | So I'm going to test the movie and to simulate download,
you can just press the Text Movie keyboard shortcut again.
| | 02:04 | Before you do that, make sure your
download settings are set to DSL.
| | 02:07 | So I'm going to press the keyboard shortcut again
to test the movie, and there's my percent loaded text
| | 02:14 | and the game is loaded and you could
see, you can play the game as usual.
| | 02:21 | And that is our finished meteor game.
| | 02:24 | So now that your game is complete, you can simply
publish this file using Flash Publish Settings
| | 02:29 | and then upload the HTML and the other
files that are published to your server,
| | 02:35 | browse to that file using the Internet Channel
on your Wii and there is your first Wii game
| | 02:39 | and you can play your first Wii game right on your Wii.
| | Collapse this transcript |
|
|
5. Creating Up-and-Down Interactivity: Xylophone Master GameViewing the finished game| 00:00 | In this chapter, we're going to create a xylophone game
that will utilize our up-down motion with the Viewer mode.
| | 00:06 | If you're following along, you could open up 01_Viewing.fla
or you can simply just watch this movie and see the file in action.
| | 00:13 | I'm going to test the movie and show the game.
| | 00:16 | In this game, a ghost player or enemy player hits keys on the
xylophone. Then the player of the game needs to use a trusty hammer
| | 00:25 | to match hitting the same keys.
| | 00:27 | The way that you hit the keys is by moving
the mallet or the hammer up and down.
| | 00:31 | So I have the mallet raised now. I'm going to hit the blue key,
and the yellow key to match with the ghost or enemy player played.
| | 00:42 | When you get something right,
| | 00:45 | your score is increased at the bottom right of the screen.
| | 00:48 | At the bottom left of the screen, the number of tries
you have are displayed. If you get something wrong,
| | 00:53 | then you get an oops message that tells you how many
tries you have left, and you can click it to play again.
| | 00:59 | If you run out of tries, you get a game over
| | 01:05 | with information about how far you've got, and you
can play the game again by clicking the message.
| | 01:09 | So,
| | 01:11 | you can see that the game is pretty simple, but it really takes
advantage of some of the up-down interactivity that you can use in
| | 01:18 | Flash with a Viewer mode. So in this chapter, we're going to go
through the step-by-step process of creating this game, and then if you
| | 01:23 | don't have the exercise files, just follow along and set up your
FLA file in the same way as I have mine setup, and you can write
| | 01:30 | the same code and your game will work in the same way. So throughout
this chapter, we'll build this game writing the codes step-by-step.
| | 01:36 | We'll start it by covering how the FLA file for the game is setup,
so that if you want to build a similar game, you can set up
| | 01:42 | your file in the same way.
| | Collapse this transcript |
| Exploring the game's FLA file| 00:00 | Now let's take a look at how this FLA file is set up.
| | 00:02 | If you're following along, go head an open
up 02_Exploring.fla in the Chapter5 folder.
| | 00:08 | If you don't have access to the exercise
files, I'm going to walk you through this file
| | 00:11 | and show you how the file is set up, so that
you can set up your file in the same way.
| | 00:15 | The first layer we have is actions
layer which currently contains no code.
| | 00:19 | The next layer is called message and contains
a single movie clip called message_mc.
| | 00:24 | If I double-click message_mc, I can enter its
timeline and see if there are only two layers, window,
| | 00:30 | which contains the button type
graphic with some text fields.
| | 00:34 | These text fields are going to
contain information about advancings
| | 00:37 | through the levels and have any game overs and such.
| | 00:41 | The other layer is background; it's just
simple semitransparent black background.
| | 00:46 | The text fields inside of the window
layer called message_txt at the top
| | 00:52 | and info_txt at the bottom, which are in the scene 1.
| | 00:56 | Let's go to the next layer.
| | 00:58 | First I'll hide message, and then on the speed up
layer, there is a very simple easy to miss movie clip
| | 01:04 | at the bottom right that doesn't have any artwork on
the first frame, but if you double-click the element,
| | 01:09 | you'll see some artwork on the other
frame if you scale the timeline.
| | 01:13 | There is a simple animation of the
text speed up, moving up and fading up.
| | 01:21 | The actions layer simply has a stop action
on frame 1 or into the main timeline.
| | 01:28 | Lock the speed up layer and go to the hammer layer.
| | 01:31 | The hammer layer has a few phrases; it's pretty simple.
| | 01:35 | The first keyframe in the actions
layer simply has a stop action.
| | 01:38 | It has two labels in labels layer, one called up and
another one called down representing the hammer in its up
| | 01:45 | and down stage, and if I scroll the play head, you'll see
the hammer is up on the up frame and down on the down frame.
| | 01:50 | We are tuning the scene 1; I'll lock the
hammer layer and lock the top elements layer.
| | 01:57 | The top elements layer contains a few different elements,
bullying behind everything else is called enable_mc;
| | 02:04 | enable_mc is actually pretty simple movie
clip; it's just a transparent graphic.
| | 02:09 | This is what enables interactivity
when the person is playing this game.
| | 02:15 | In order to hit a key, you need to first move
the Wii Remote or mouse up over enable_mc.
| | 02:22 | That way, the person playing the game, won't be able
to activate the keys by moving the hammer horizontally.
| | 02:28 | The other element in the top elements
layer is the Listen movie clip.
| | 02:32 | This is an instance of mcPlayListen and which
I'm going to double-click in the library.
| | 02:37 | I'm going to set the background to
black, so it's a little bit easier to see,
| | 02:42 | and on frame 1 we have Listen and on frame 2 it says Play.
| | 02:46 | This is just the visual indicator for what the
users suppose to do while playing the game.
| | 02:51 | I'm going to set the background back to white.
| | 02:53 | I'm going to return to the main timeline.
| | 02:54 | I'm going to walk to top elements layer
and select the graphic on the keys layer.
| | 02:59 | On the keys layer there is a movie clip
called keys_mc which is an instance of mcKeys.
| | 03:05 | If I double-click that movie clip; I'll see that there
are four movie clips inside of the mcKeys movie clip.
| | 03:10 | There is blue_btn; green_btn; yellow_btn; and red_btn.
| | 03:18 | These movie clips are simple black graphics to cover the
buttons so that we can fade them out and fade them in.
| | 03:25 | Page contain two layers, one called hotspot.
| | 03:30 | Hotspot is simply an invisible rectangle
or rectangle within alpha of zero.
| | 03:35 | We turn back to the Blue move clip.
| | 03:38 | Layer 1 is the black graphic which is
the same shape and size as each key.
| | 03:43 | This is the part that's going to fade in and fade out.
| | 03:46 | The hotspot is interactive area of each of these buttons.
| | 03:50 | So the player will have to rollover the hotspot to
activate the key or to hit the key with the hammer.
| | 03:55 | We will return to mcKeys and you can see
that green_btn is set up in the similar way.
| | 04:02 | There is the hotspot, the solid color background,
and if you look at the other movie clips,
| | 04:08 | you'll see they are set up in exactly the same way.
| | 04:12 | So we have a hotspot and a solid color background.
| | 04:15 | We'll tune the main timeline now, lock the
keys layer and unlock the Background layer.
| | 04:19 | The Background layer is a movie clip,
but it doesn't have an instance name
| | 04:23 | because it's not going to be interactive at all.
| | 04:25 | If I double-click the Movie Clip, you can see it's
a simply a bitmap graphic with the keys on it.
| | 04:31 | So the Background Movie Clip simply has a
bitmap that has the xylophone in the background.
| | 04:36 | Let's go back to Scene 1; lock the Background
layer, unlock the bottom elements layer.
| | 04:41 | The bottom elements layer is pretty simple.
| | 04:43 | There is a bitmap graphic of a mini xylophone.
| | 04:46 | The dynamic text field next to
that graphic is called tries_txt,
| | 04:50 | which will show how many tries the player has
left, and then on the right we have score_txt,
| | 04:55 | which is the dynamic text field that will show what the
players' score is or how many levels they have advanced to.
| | 05:02 | Other than that, the file is pretty straight froward.
| | 05:06 | The only Library elements that we are going
to be using dynamically are the sounds.
| | 05:10 | There is C, C8, E, and G, and if
you'd like you can select the sound
| | 05:15 | and click the play button in the
Library to preview the sound.
| | 05:18 | So these are all exported for actions scripts as I can show
you in Linkage Properties as their default identifier name.
| | 05:26 | So if you don't have access to the
exercise files, just export these elements
| | 05:30 | for action script using their default
identifier names and it will be good to go.
| | Collapse this transcript |
| Setting up game variables| 00:00 | The first thing we are going to do write the code for a
game is to create the variables that we are going to use.
| | 00:05 | If you following along, I'm working in 03_Variables.fla
or you can just use the same file from the last exercise.
| | 00:11 | Let's go to the first keyframe with the actions layers and
open the actions panel, I'm going to paste in some code
| | 00:17 | and just like in the last chapter, the code
that I'm going to paste in can be found
| | 00:21 | in the chapter 5 folder in a file called code_txt.
| | 00:24 | The code that we will paste in for each
movie can be found in the file corresponding
| | 00:29 | to the movie number we are currently working in.
| | 00:31 | For the movie number, you can just look
at the name of the file that I'm using
| | 00:35 | for my exercise file which in this case is 03.
| | 00:37 | Let's take a look at this code.
| | 00:39 | The first thing we are doing is importing gs.TweenLite.
| | 00:42 | Now if you are not familiar with TweenLite, I
recommend watching the TweenLite movie in chapter 2.
| | 00:46 | TweenLite is a powerful animation engine, that
we are going to be using in this game to fade
| | 00:51 | in and fade up the keys when they are hit.
| | 00:53 | To use the TweenLite engine, you will need to follow
what I taught in chapter 2 and download TweenLite
| | 00:59 | from the TweenLite website, copy the
gs folder into the chapter 5 folder.
| | 01:03 | So make sure you have the gs folder and that TweenLite is
inside of that folder before you move on writing your code.
| | 01:09 | On to the variables.
| | 01:10 | Four variables representing sounds.
| | 01:13 | The names of these variables correspond
to the names of the sounds in library.
| | 01:16 | So we have C, C8, E and G. Pretty straight forward there
and I have a buttons array that's going to represent all
| | 01:24 | of the button keys that we will
be hitting when playing the game.
| | 01:28 | So we have keys_mc.red_btn.
| | 01:32 | Then the green button, the blue
button and the yellow button.
| | 01:38 | So they all are inside of keys_mc.
| | 01:41 | A variable called enemyInterval, this is going to hold the
set interval value for the Ghost Hammer or Enemy Hammer.
| | 01:49 | The intervalAmt refers to that amount of time in between
hammer hittings for the Ghost or the Enemy player,
| | 01:55 | decreasIntervalBy represents how much the interval
is going to be decreased by as the game progresses
| | 02:02 | so that the ghost or the enemy player will speed up.
| | 02:06 | LowestInterval is the lowest possible interval
for the ghost or the enemy player to play at.
| | 02:12 | So never go below 250 in this case,
increaseIntervalEvery is the amount
| | 02:18 | of successful hits at which to increase the speed interval.
| | 02:22 | So that way the game will get faster after
five and after ten, after fifteen and so on.
| | 02:27 | This makes the game a little more interesting.
| | 02:30 | OriginalInterval has a simple value, it's just interval
amount and then value is to reset the interval,
| | 02:38 | if the player does a game over, enemyMovedelay is the
amount of time to wait the before the enemy starts moving
| | 02:47 | or the Ghost Hammer, enemyMoves is an array that holds
the order of keys that were hit for the enemy player
| | 02:54 | or the Ghost player, enemyCount represents the current index
of the Array that the enemy is going to be on when moving
| | 03:03 | through the enemyMoves array while
the enemy is hitting the keys.
| | 03:08 | PlayerCount represents where the player is and in
the playerMoves array and this is used to compare
| | 03:13 | against the enemyMoves array to see if the player is
hitting the right key in the right index of the array.
| | 03:19 | For example, if the enemyMoves Array contain red, green,
blue, the playerMoves Array will need to contain red,
| | 03:27 | green, blue as well for the player to advance.
| | 03:30 | playersTurn is a Boolean value that
represents whether or not it's a player's turn.
| | 03:35 | It's initialized to false, because in the beginning of
the game the enemy player or the ghost will move first.
| | 03:41 | addHit is a Boolean variable that represents whether or
not more moves should be put inside the enemyMoves array.
| | 03:48 | We will talk more about this variable
when we start discussing ememyLogic.
| | 03:52 | triesLeft represent how many times a player
can make a mistake without losing the game.
| | 03:58 | It is set to one but you can set it to whatever you
want if you want the player to have more chances.
| | 04:02 | originalTries simply allows us
to capture the triesLeft variable
| | 04:07 | so that we can reinitialize the game
when a player gets to game over.
| | 04:12 | tweenTime and longerTweenTime are values that
are used for elements that fade in and out.
| | 04:18 | These elements include the Hammer, the
message screen that tells the player
| | 04:22 | to play the game and the keys once they are hit.
| | 04:26 | minButtonAlpha represents the minimum Alpha for the
keys that are hit and these aren't just the keys,
| | 04:32 | these are the black areas over the keys and maxButtonAlpha
represents the maximum Alpha of the black keys
| | 04:40 | when they are hit, which is going to be zero.
| | 04:42 | Now you may thing this is kind of reverse,
so it is like minimum is 50 and maximum is 0.
| | 04:47 | But these are the black keys that are the overlay
so that as they fade in then the main keys fade out.
| | 04:53 | Now you may think that these values are sort of backwards
with minButtonAlpha being 50 and maxButtonAlpha being 0.
| | 05:00 | But the way I thought about this when I prepared the
game was that I wanted to refer to the minimum Alpha
| | 05:05 | of the actual key and not the black faded key.
| | 05:08 | So the black key will have an Alpha
of 50 but that will represent the time
| | 05:12 | when the key is the most faded out or the most black.
| | 05:15 | So basically, at the max Alpha of 0 for the black key,
| | 05:20 | the main key or the background key for
the xylophone is at its full Alpha.
| | 05:24 | So that's why I set-up the variables that way and
that's all the variables that we have for our game.
| | 05:28 | The next step is to write the functions
that are going to initialize our game.
| | Collapse this transcript |
| Initializing the game| 00:00 | Now we are at the code to initialize our game.
| | 00:02 | The file I'm using is 04_initialize.fla and of course,
you can just use the same file from the last exercise.
| | 00:09 | I'm going to paste in some code.
| | 00:11 | This file can be found in the code.txt file in
the chapter 5 folder in the movie 4 section.
| | 00:17 | Here I'm simply attaching sounds from the library
using the appropriate linkage identifier names,
| | 00:24 | running a function called initialize.
| | 00:25 | I will paste the initialize function
| | 00:28 | above the run immediately code I just pasted
and let's take a look at how it set up.
| | 00:32 | First we have a for loop that's running for
each of the buttons in the buttons array.
| | 00:38 | The first thing it's doing is it's setting the hitArea
of each button which is going to be the hotSpot
| | 00:43 | for that button equal to that button's
movie clip called hotSpot_mc.
| | 00:49 | So this way, we have a customs hotSpots for each
button, using a hotSpot movie clip, that I created.
| | 00:55 | Then we are setting the alpha of
each button equal to minButtonAlpha.
| | 01:00 | This is going to set each of the xylophone
keys at the minimum visible alpha.
| | 01:05 | So they are going to have a thicker black overlay.
| | 01:08 | I'm setting the playLIsten movie clip to gotoAndStop
at frame one (1) to display the Listen frame.
| | 01:13 | Then I'm running a function called hideObjects
which I'm going to show you in just a second.
| | 01:18 | tries_txt is set equal to the String,
which starts with a "x " and a space
| | 01:24 | and then a String value from the number triesLeft.
| | 01:28 | As we talked about in the last movie, the
triesLeft variable has an initial value of 1.
| | 01:32 | On the next line, setting the Score
value in the score_txt.text field.
| | 01:37 | It says "Score: " and then a space then the String value
| | 01:40 | of the number (enemyCount) Then I'm running
a setEnabled function with a value of false.
| | 01:46 | We will talk about this function in a minute as well.
| | 01:49 | Then I'm having the hammer_mc.gotoAndStop
at the ("up") frame.
| | 01:52 | Let's take a look at the hideObjects functions.
| | 01:54 | I will paste that right below the initialize function.
| | 01:57 | The hideObjects function is simply disables
the message movie clip and makes it invisible.
| | 02:04 | Now let's take a look at the setEnabled function.
| | 02:07 | Remember that we are passing in a value of False.
| | 02:09 | It accepts one parameter called
isEnabled, which is Boolean of course.
| | 02:13 | Then we have a loop for each button in the buttons array.
| | 02:17 | The loop sets each button's Enabled property equal
to the value passed in via the isEnabled parameter
| | 02:23 | which this first time that we are running it, is false.
| | 02:25 | Then we have a somewhat conditional statement that tries to
see, if isEnabled is false and if it is not the playersTurn.
| | 02:32 | If so and we will show the Mouse and
then Tween out the hammer and that's it,
| | 02:38 | that's all the initialization code for our game.
| | 02:40 | I will test the movie at this point and we
will see that our game is really simple.
| | 02:46 | It just shows the Listen review clip on the
Listen frame, displays the triesLeft and the score
| | 02:51 | and the buttons have a semi transparent black overlay.
| | 02:54 | I will close the Preview window
and that's all there is to it.
| | 02:57 | So now again to initialize.
| | 02:59 | The next step is to set up the Ghost or the Enemy player.
| | Collapse this transcript |
| Creating the enemy player| 00:00 | Now we will begin writing the code to create the enemy player
or the example or Ghost player, whatever you want to call it.
| | 00:06 | If you are following, well I'm working in 05_Enemy.fla or you
can obviously just use the same file from the last exercise.
| | 00:12 | Let's go up to the initialize function
| | 00:14 | and at the very bottom of this function,
I'm going to paste in a few lines of code.
| | 00:18 | Here I'm running two functions,
| | 00:21 | addEnemyHit
| | 00:22 | and listen and then setting the onPress property of message_mc
| | 00:28 | to run the listen function.
| | 00:30 | Let's first take a look
| | 00:31 | at the listen function. Let's scroll down to the bottom of the code,
| | 00:35 | I'm going to paste the listed function right about my run
immediately code. The purpose of the listen function is to
| | 00:40 | run the functionality to listen to the enemy player hit notes.
| | 00:45 | So the first thing I'm doing is running setEnalbed(False)
| | 00:49 | disabling the OnRollOver event for enable_mc.
| | 00:53 | If addHit is true,
| | 00:56 | I'm running a function called addEnemyHit,
| | 00:58 | which we will take a look at in a second.
| | 01:00 | Then I'm setting the value of playersTurn
equal to false, this is the enemies turn
| | 01:05 | and fading out
| | 01:07 | message_mc and running hideObjects once message_mc has
faded out. Let's take a look at the addEnemyHit function.
| | 01:15 | I will paste it right below the listen function.
| | 01:18 | addEnemyHit is pretty simple. First we grab a randomIndex
| | 01:22 | of the buttons array,
| | 01:24 | so that picks a random button
| | 01:26 | and then we put that button inside of the enemyMoves array.
| | 01:31 | As you know that it sort of initialize the enemy player, but
nothing is going to be too different if we test the movie.
| | 01:37 | We simply have the same screen that we saw before.
| | 01:41 | Now everything is set up though, so we can
start having the enemy player hit the keys.
| | 01:46 | We will take a look how to do that in the next movie.
| | Collapse this transcript |
| Making the enemy hit keys| 00:00 | In this movie we will write the code
to make the enemy player hit keys.
| | 00:03 | If you are following along, I'm working 06_Keys_Enemy.fla
or you can just use the same file from last exercise.
| | 00:10 | In your code, find the listen() function.
| | 00:12 | We are going to paste in some code at
the bottom of the listen() function.
| | 00:15 | Now it would be hard to tell where the code I just pasted
in is, so it's start from line 76 and ends on line 81.
| | 00:25 | First, I'm setting a value to enemyInterval
and the value is equal to setInterval
| | 00:30 | and the function resides on the
_root or on the main Timeline.
| | 00:34 | The function it's going to run is showEnemyMoves,
which we will take a look at in a minute and it's going
| | 00:40 | to run based on the variable value of enemyMoveDelay.
| | 00:44 | Here we have a conditional statement that checks
to see, if it's timed to speed up the game.
| | 00:49 | The first check is to see if the
intervalAmt > lowestInterval.
| | 00:55 | If that's true and if enemyMove.length - 1, if that's true
| | 01:03 | and if the player's value is a multiple
of five, we will speed up the game.
| | 01:07 | The way that you check to see if the player's value
is a multiple of five is by checking the length
| | 01:11 | of the enemyMoves array -1, that's just saying
what the highest index of the enemyMoves array is.
| | 01:19 | Then we use the % sign to give us a value
of the remainder after division takes place,
| | 01:23 | so we divide that enemyMoves.length-1 value by
increaseIntervalEvery and it's value is five
| | 01:30 | and the remainder is whatever is left over
when that's divided, if that is equal to zero,
| | 01:37 | then the player has a multiple of five correct
| | 01:41 | and in that case increase the intervalAmt
by the decreaseIntervalBy variable.
| | 01:47 | Then we will play the speed up movie clip (speedUp_mc).
| | 01:51 | Next we will take a look at the showEnemyMoves function.
| | 01:53 | I will paste that right below this function, showEnemyMoves
is what actually makes the enemy player hit keys
| | 02:00 | on the xylophone.
| | 02:02 | So we have a variable here called thisMove and the data
type is a button and it is equal to enemyMoves(enemyCount).
| | 02:09 | So it's dependent on the value of enemyCount,
it's that index of the enemyMoves array.
| | 02:16 | Clear the enemyInterval and then
reset the enemyInterval here.
| | 02:22 | Then we are on a function called hitButton on this move,
hitButton which we will talk about in just a second,
| | 02:28 | is what plays the animation and the sound for a button hit.
| | 02:31 | Now I'm incrementing enemyCount by 1, then we check to see
if enemyCount is greater than or equal to enemyMove.lenght
| | 02:39 | and if so then we just clear the interval which
is the enemyInterval and stop hitting keys.
| | 02:46 | Let's just take a look at the hitButton function.
| | 02:48 | I will paste that right below showEnemyMoves.
| | 02:53 | This function may look a little massive,
but it's not as intimidating as it may seem,
| | 02:57 | hitButton expects one parameter
which is btn, it's the button to hit.
| | 03:02 | The first thing we do is set the alpha
of that button equal to maxButtonAlpha.
| | 03:08 | Now remember maxButtonAlpha has a value of 0,
| | 03:10 | so maxButtonAlpha is completely
revealing the background button.
| | 03:14 | Then use TweenLite.to to tween the button,
using the longerTweenTime variable,
| | 03:22 | tweening it to an alpha of minButtonAlpha, which is 50.
| | 03:26 | so the button will tween from completely revealing the
xylophone key, to putting a semitransparent black overlay.
| | 03:32 | Once the animation is complete we will
run a function called checkIfLast.
| | 03:38 | That will check to see if the button was the
last button to be hit in the buttons array.
| | 03:43 | The buttons array being, the array that
holds the player moves or the enemy moves.
| | 03:47 | We will take a look at the checkIfLast()
function in just a minute.
| | 03:50 | I'm running stopAllSounds to stop all sounds currently
playing, you can see it's a built-in function.
| | 03:55 | Then I have this large block of code,
that's the switch case statement,
| | 03:58 | that hits the different note, depending
on which button was hit.
| | 04:01 | If you are not familiar with the switch statement,
| | 04:03 | you can look it up in Flash Help but
I will give a brief definition here.
| | 04:07 | A switch term is basically like an if-else statement, except
for a switch statement you take the value of one variable,
| | 04:13 | in this case btn, and you have a different
reaction based on the value of that variable.
| | 04:19 | So case checks to see the value of that variable.
| | 04:24 | So if the button is the green button, then play the e sound,
| | 04:29 | and after each case statement have
a break to stop evaluating results.
| | 04:35 | If the red button was hit start c8 sound, if
the yellow button was hit, start the g sound,
| | 04:41 | if the blue button was hit start the c sound and then
default is what happens if none of the case values are true,
| | 04:50 | I'm simply calling return to stop running this function and
this function is not referring to the switch case statement,
| | 04:57 | but referring to hitButton() and that's
all there is to the hitButton() function.
| | 05:02 | Let's take a look at the checkIfLast() function.
| | 05:05 | I paste the checkIfLast() function right below hitButton().
| | 05:08 | Let's take a look at how it is set up, it simply
checks to see if enemyCount is greater than
| | 05:13 | or equal to length of the enemyMoves array.
| | 05:15 | So if the enemy has gone through all of the buttons
in the enemyMoves array, then here's what happens,
| | 05:22 | enemyCount is reset to 0, the onPress property of
message_mc is set to run the playback function,
| | 05:31 | which we will talk about in a minute, message_mc
is hitted and it's alpha property is set to 0,
| | 05:41 | the top text field says Your Turn and
the bottom text field say Click to Play.
| | 05:46 | Then I'm running the playBack function,
which again we will look at in a minute.
| | 05:51 | The enable_mc movie clip's onRollOver event
is connected to the enableButtons functions,
| | 05:56 | so that will run once that enable_mc
movie clip is rolled over.
| | 06:00 | Mouse is hidden, the hammer tweens into an alpha of a
100, the playerListen movie clip goes to the second frame,
| | 06:08 | which is the play frame and that's really
all there is to the checkIfLast() function.
| | 06:13 | The playBack() function is pretty simple.
| | 06:15 | I will paste it right below checkIfLast.
| | 06:17 | The playBack() function simply resets the playerCount
and playersMoves variables, sets the playersTurn to true
| | 06:23 | because that's where the enemy has
done it's move, it's the player's turn,
| | 06:28 | then sets enable_mc.OnRollOver event
to run the enableButtons function.
| | 06:35 | The Mouse is hidden.
| | 06:37 | The hammer tweens in and the hideObject() function runs.
| | 06:42 | Let's take a look at the enableButtons() function.
| | 06:44 | I will paste below playback and it simply sets
the onRollOver value of enable_mc equal to null
| | 06:53 | with disabled interactivity for enable_mc and then run
the setEnabled function passing in a value of true.
| | 07:00 | So that's enables all the buttons on the xylophone.
| | 07:03 | So now that our enemy interactivity is
set up, let's take a look at how it works.
| | 07:08 | I will test the movie and there are two key hits from
the enemy player and the enemy successfully animates.
| | 07:17 | Notice you can't see my mouse here because we
haven't shown the hammer or moved around the hammer.
| | 07:22 | We will talk about how to do that
in the next movie but you can see
| | 07:24 | that the enemy player is successfully
hitting the keys, which is great.
| | 07:29 | The next step is to start moving around the hammer
so that we can create some player interactivity.
| | Collapse this transcript |
| Moving the hammer| 00:00 | Now we will set up the interactivity for the player to
move their hammer and hit the keys on the xylophone.
| | 00:05 | If you are following along, I am
working in 07_Moving_Hammer.fla,
| | 00:09 | which could be found in the Chapter 05 folder.
| | 00:11 | In your code, find the initialize()
function, mine starts on line 28.
| | 00:16 | At the bottom in the initialize() function, set the
onEnterFrame event of hammer_mc to run updateHammer.
| | 00:22 | The updateHammer function is fairly simple, we
will add it right below the initialize() function.
| | 00:27 | It's simply set the x and y positions of the
hammer equal to the positions of the mouse.
| | 00:32 | Now if you test the movie, you can see that in action.
| | 00:36 | As I move my mouse around the hammer falls in, nice.
| | 00:41 | The next step is to enable the
hitting of the xylophone keys.
| | 00:45 | We will do that inside of the setEnabled() function.
| | 00:47 | So scroll down, find that and at the bottom of the For loop
in the setEnabled function, we are going to paste some code,
| | 00:57 | and it sets the onRollOver and onRollOut events
for each button based on the isEnabled value.
| | 01:04 | You may be unfamiliar with the syntax,
so I will do a quick walk through of it.
| | 01:08 | Here I have (isEnabled) this is actually
shorthand syntax for conditional statement.
| | 01:14 | We wrap the condition in parenthesis,
so whether or not isEnabled = true,
| | 01:19 | then you separate the if-else results
using a question mark(?).
| | 01:23 | First you have if the value is true, if the
value is true then onRollOver = handleHit,
| | 01:29 | it's going to run the handleHit function.
| | 01:32 | Then you have a colon (:) to specify the else code.
| | 01:35 | If isEnabled = false, then set the
onRollOver event for each button = null.
| | 01:42 | You may find this shorthand syntax for conditional
statements very useful as it also works in ActionScript 3.0.
| | 01:48 | It's really best for just simple functionality like this
where you are just executing one action or giving one value
| | 01:54 | if the condition is true and one
other value if the condition is false.
| | 01:58 | So I'm doing the same thing for the onRollOut event except
for if isEnabled is true, onRollOut will run, raise hammer.
| | 02:07 | Let's take a look at the handleHit function.
| | 02:09 | I will paste handleHit right below setEnabled,
handleHit simply plays the hammer movie clip
| | 02:18 | which will loop the Timeline back to frame
one, run setEnabled with the value of false,
| | 02:23 | which disables all the buttons on the
xylophone then sets enable_mc.onRollOver event
| | 02:29 | to run the enabledButtons function.
| | 02:30 | So again the player will have to move
the mouse or Wii Remote to the top
| | 02:35 | of the screen in order to enable the buttons again.
| | 02:38 | So that will force the player, they have
to move up and down to play the game.
| | 02:42 | Then I'm running hitButton with the value of this
| | 02:45 | and this represents whatever button was
rolled over to run the handleHit function.
| | 02:52 | Remember handleHit is connected
to each button's onRollOver event.
| | 02:58 | Now let's take a look at the raiseHammer function.
| | 03:00 | I will paste that right below the handleHit function.
| | 03:04 | It simply has the hammer gotoAndStop at the up frame.
| | 03:07 | It's pretty straight forward.
| | 03:09 | The last thing we will do is add
some code to the hitButton function.
| | 03:14 | So find the hitButton function in your code, mine starts
on the line of 118 by the way and at the very bottom
| | 03:23 | of this function, we are going to paste in some code.
| | 03:26 | If it's the player's turn, so if hitButton
is running based on the playersTurn,
| | 03:32 | then we put whatever button the player hit into the
playerMoves array and add 1 to the playerCount variable.
| | 03:38 | What this will do, is will store the data for each
key the player hits inside of the playerMoves array.
| | 03:44 | Now we have set up our basic hammer interactivity.
| | 03:47 | If you want to test it out, go ahead and test the movie.
| | 03:53 | Now try to hit keys, and notice that you have to move the
mouse up and down or the Wii remote if you are playing
| | 04:04 | on the Wii and you can hit as many keys as you want.
| | 04:10 | The next step is to alternate between
the playersTurn and the enemysTurn.
| | 04:14 | So you can see that the hammer is working successfully.
| | 04:17 | So we can go from the enemiesTurn to the playersTurn.
| | 04:20 | What we are going to do in the next movie is
have the ability to go back from the playersTurn,
| | 04:24 | to the enemiesTurn to set up the rest
of the functionality for the game.
| | Collapse this transcript |
| Alternating turns| 00:00 | Now as for the interactivity for alternating between
the player and enemy and back to the player again,
| | 00:05 | if you are following along I'm working in
08_Alternating.fla in the Chapter 05 folder.
| | 00:11 | You can obviously just use the same file from last exercise.
| | 00:14 | So scroll over to hitButton and mine starts on line
118 and then scroll to the bottom of that function
| | 00:20 | and find the conditional statement
that we wrote in the last movie.
| | 00:23 | At the bottom of that conditional statement,
run a function called checkPlayerTurn.
| | 00:28 | We will write that function right now.
| | 00:30 | I will place that function right
below the hitButton function.
| | 00:33 | Now this function is rather large but it's not
too complex and I will go through it step by step.
| | 00:39 | This simply checks to see if it should
still be the player's turn and it checks
| | 00:44 | to see the player's moves against the enemy's moves.
| | 00:47 | So in other words, if enemy hits green and then blue, the
player must hit green and blue and if the player hits green
| | 00:54 | and then red then the player has an incorrect move.
| | 00:57 | Let's take a look at how it works.
| | 01:00 | Here we have a variable called allCorrect,
it's Boolean initialized to true.
| | 01:04 | If not every move is correct by the Player
then allCorrect will have a value of false.
| | 01:09 | So here we have a loop that runs for
the length of the playersMoves array.
| | 01:16 | You see that the loop ends right
where I have selected on line 164.
| | 01:22 | So it's sort of a large loop and the
body of it runs a conditional statement.
| | 01:28 | The conditional statement checks to see each one of
the player's moves against each one of the enemy moves.
| | 01:34 | The conditional statement is true
if index i of the player's move --
| | 01:38 | so if any one of the player's moves is not
equal to that position of the enemy move.
| | 01:44 | So running through the loop it checks the first
move pf the player and the first move of the enemy,
| | 01:48 | then the second move of the player against
the second move of the enemy and so on.
| | 01:52 | So if the conditional statement is true or
if there is a mismatch in the playerMoves
| | 01:57 | and enemyMoves array then we set addHit to false,
set allCorrect equal to false, hide message_mc,
| | 02:08 | set some text in the message_mc text fields.
| | 02:12 | The top text field will display Oops, the bottom text
field will display how many tries left the user has.
| | 02:19 | The tries text at the bottom left of the
screen will show how many tries you are left.
| | 02:25 | Message_mc.onPress event is set to run the listen function.
| | 02:30 | message_mc fades in with a delay of 0.5 seconds
so that it means it will start after 0.5 seconds
| | 02:37 | and once the animation is complete
the enableMessage function will run,
| | 02:42 | which we will talk about in just a second.
| | 02:44 | PlayListen goes to the first frame which displays listen.
| | 02:49 | PlayersTurn is set to false and everything is disabled.
| | 02:54 | Now I will scroll down to outside of the for loop
and take a look at this conditional statement.
| | 03:01 | If after the loop, allCorrect is equal to true and the
length of the playerMoves array is equal to the length
| | 03:10 | of enemyMoves array, then addHit is set to true,
the score text field shows the new updated score,
| | 03:21 | the playListen movie clip goes to the listen frame,
the listen function runs and buttons are disabled.
| | 03:28 | So basically, if the player hits all of the keys in
the right order then it's the enemy's turn again.
| | 03:34 | I mentioned earlier that we create
the enableMessage function.
| | 03:37 | So I will paste that right below this
function and it simply enables message_mc.
| | 03:43 | Now why to have a full whole function to change this value?
| | 03:47 | That's because I don't want to enable the
message until it's completely faded in.
| | 03:52 | So that's why I'm using a function in this
onComplete event that's connected to our Tween.
| | 03:58 | Now if we test the movie, we should be able to go
between the player's turn and the enemy's turn.
| | 04:03 | So I will hit yellow and then red to match the
enemy, then I will hit yellow, red, green and so on.
| | 04:14 | You could see that my score is going
up and everything is looking great.
| | 04:24 | So now if I hit the wrong key then I get this Oops message.
| | 04:28 | Now if I click the button, I can play again.
| | 04:30 | If I hit the wrong key again, I get another chance.
| | 04:40 | So, that's it for the basic functionality of our game.
| | 04:42 | You can go back and forth between the player and
the enemy, there is just no way to lose the game.
| | 04:46 | In the next movie, we will finish
the game by making a way to lose.
| | Collapse this transcript |
| Losing the game| 00:00 | Now we will finish the game by making
a way for the player to lose the game.
| | 00:03 | If you are following along, I'm working in
09_losing.fla in the chapter five folder.
| | 00:08 | Of course, you can just use the
same file from the last exercise.
| | 00:11 | In your code, find the checkPlayerTurn
function, in my code it's on line 143.
| | 00:16 | Of course, it maybe different in your code.
| | 00:18 | In this function, find the for loop, into that
for loop find a conditional statement that checks
| | 00:24 | to see if the players move was incorrect.
| | 00:28 | At the bottom of that conditional statement,
I'm going to paste a large block of code.
| | 00:31 | Just like the rest of the large block of codes that I have
pasted in, this is a lot less intimidating than it looks.
| | 00:37 | It starts on line 162 in my code
with triesLeft -- (minus minus).
| | 00:41 | All this code does is it decrements triesLeft
by one, if the player gets to move on
| | 00:47 | and then checks to see if the player has any triesLeft.
| | 00:50 | If the player has no triesLeft then the block of code runs.
| | 00:54 | The block of code simply shows game over on the screen
| | 00:58 | and initializes all the variables
so that the player can play again.
| | 01:01 | Scroll up, we will talk about this line by line.
| | 01:04 | There is a variable called finalScore and
this represents the player's final score.
| | 01:08 | For nearly every case, the player score
is going to enemyMoves.length - 1.
| | 01:14 | The exception to that rule is if the player
loses the game without ever scoring a point
| | 01:19 | because the enemyMoves array starts with two elements.
| | 01:23 | So if the player doesn't get any of
those two, ememyMoves.length is -1
| | 01:28 | and the player score would be 1 where it should be zero.
| | 01:31 | So I'm having this conditional statement,
make sure that the player score is in bounds.
| | 01:35 | So we check to see if ememyMoves.length - 1 is not
1, if so, the player score is ememyMoves.length - 1.
| | 01:45 | If that conditional statement is false and the player
score is one then I simply set the player score to zero.
| | 01:52 | In the message text field, I'm setting -- I
am displaying Game Over, new line which is n
| | 02:02 | and the score displaying the player's final score.
| | 02:07 | The info text field says, click to play again.
| | 02:09 | From here I'm simply resetting the game's values.
| | 02:14 | Emptying out enemyMoves and playerMoves,
setting enemyCount and playerCount to zero.
| | 02:18 | Resetting the value of intervalAmt to originalInterval,
setting the score text field to display zero,
| | 02:25 | which is the current value of enemyCount.
| | 02:27 | Setting triesLeft equal to originalTries.
| | 02:30 | Displaying the original amount
of tries in the tries text field.
| | 02:34 | Running the EnemyHit function.
| | 02:36 | Setting playersTurn to false.
| | 02:39 | Running setEnabled to disable all the
buttons and setting addHit to true.
| | 02:43 | That's really all that there is to it.
| | 02:45 | Let's test the movie and see this in action.
| | 02:47 | So I'm going to get a few points and then lose.
| | 02:55 | Now hit the wrong key, so it says I have zero tries left
and I have game over with my final score being accurate
| | 03:06 | at two points, click to play again
and the game starts over again.
| | 03:11 | Now I will lose with a score of zero.
| | 03:17 | Now I will lose with a score of zero.
| | 03:21 | So I'm getting Game Over with my accurate score.
| | 03:26 | I can click the button and play the game again
and now we can successfully lose the game.
| | 03:35 | So that completes our Xylophone game.
| | 03:37 | Just like with the other games you can publish this file
so you can get the proper html to contain the SWF file
| | 03:43 | and put all the files online, browse to it on your Wii
using Internet Channel and play this game on your Wii.
| | Collapse this transcript |
|
|
6. Creating Circular Interactivity: Setting the Clock GameViewing the finished game| 00:00 | Let's take a look at the game that we are going to be creating in this
chapter. The game is called Set the Clock and you can find the file in
| | 00:05 | the Chapter 06 folder and the file is called 01_Set_the_Clock.fla.
| | 00:11 | Or you can just watch and just see how the game works.
| | 00:14 | We will test the movie and here on the right side
of the screen is Target time which says 1:25
| | 00:20 | and the clock is pointing to 1:25. So by using circular, clockwise
or counterclockwise motions the goal is to match the time
| | 00:29 | on the clock.
| | 00:30 | Once you have matched the time, you can
click with your mouse or the Wii remote
| | 00:35 | and then you get the message that comes and tells you did a good job and
tells you how long it took you to match the time on the target clock.
| | 00:42 | So this game will give you some practice using the circular
motion technique that you have learned in Chapter 3.
| | Collapse this transcript |
| Exploring the game's FLA file| 00:00 | Let's take a look at how a game FLA file set up.
| | 00:03 | If you are following along you can go ahead and
open up 02_Exploring.fla in the Chapter 06 folder.
| | 00:08 | If you don't have access to the exercise
files, you could just create your own FLA file
| | 00:12 | and make sure you set it up exactly
how I have this file set up.
| | 00:15 | Let's take a look at our Layers.
| | 00:17 | First I have the Actions layer with no code in it yet.
| | 00:19 | Then there is the End layer, if I show the end layer
there is a movie clip on that layer so unlock the layer
| | 00:25 | to reveal the movie clip and it's called end_mc.
| | 00:28 | If I double click the movie clip you
will see that it is instance of mc
| | 00:31 | and there are three layers text, box and shadow.
| | 00:35 | The text includes some text field and a button.
| | 00:38 | At the top, is the static text field,
below that is another static text field
| | 00:44 | and the other text field it's a dynamic text field.
| | 00:46 | Let's say it's end.txt.
| | 00:47 | This text field will display information
about the players finishing time.
| | 00:52 | Way again is simply a static text field in form a graphic.
| | 00:56 | You will notice it's not a button, I
actually made this whole movie clip a button.
| | 01:00 | So we will have all the interactivity
placed in this entire movie clip.
| | 01:04 | Back to scene one.
| | 01:05 | We are going to lock and hide the end
movie clip and reveal the Buttons layer.
| | 01:09 | Unlock the buttons layer to show
the buttons that are on the stage.
| | 01:13 | Noticed that there are invisible buttons
which means they only have a Hit frame.
| | 01:17 | If you remember from Chapter 03, I have showed
this rotation technique using four buttons.
| | 01:22 | So we have one in each quadrant.
| | 01:25 | So the top left or tl_btn, tr_btn, br for
bottom right_btn and bl for bottom left_btn.
| | 01:36 | So as the player plays the game, they are going
to rollover these buttons in the sequence,
| | 01:39 | whether it's clockwise or counterclockwise.
| | 01:42 | If this system of circular motion using
four buttons is unfamiliar to you,
| | 01:46 | I highly recommend watching the movie
on circular rotation in Chapter 03.
| | 01:50 | Going to lock the Buttons layer and
hide it and the Small Clock layer,
| | 01:54 | there is some artwork at the top right of the screen.
| | 01:57 | Target time is the static text field.
| | 01:59 | Here is a dynamic text field that's called target_txt
| | 02:02 | and this will display the target time
in numbers for the person to match.
| | 02:08 | The target clock will display the target time on a clock.
| | 02:13 | Its instance name is target_mc.
| | 02:15 | If I double click the movie clip, you will
see it's very simple and it has four layers.
| | 02:20 | Bolt, choose the bolt in the center of the clock,
smallHand, longHand and the Clock background.
| | 02:29 | Note that the smallHand and the longHand are movie clips
| | 02:32 | with registration toward the bottom,
going to Zoom-in to show that.
| | 02:37 | So if I click on the longHand you will see it's
instance name is minute_mc and if I double click
| | 02:42 | that movie clip you will see that its
registration point is toward the bottom.
| | 02:46 | That's really important because it's
going to be rotating around that point.
| | 02:50 | Back to small clock and if I double
click the hour hand or hour_mc,
| | 02:55 | you will see that its registration
point is also toward the bottom.
| | 03:00 | So make sure if you are developing
your own file to give your minute
| | 03:03 | and hour hands registration points
that you want them to rotate around.
| | 03:08 | Back to scene one.
| | 03:09 | You can press Cmd+2 on the keyboard, it's
on the Mac and it's Ctrl+2 on a PC to Zoom-out.
| | 03:15 | Now we have the Main Clock layer.
| | 03:18 | The main clock layer is pretty much
exactly the same thing as the target clock.
| | 03:22 | It's instance of main clock called clock_mc
and if I double click it you will see it set
| | 03:26 | up in the same way as the target clock movie clip.
| | 03:29 | So we have the Bolt, the smallHand and longHand which have
registration points for the bottom and the clock background.
| | 03:36 | Back to scene one, the Background layer
contains a simple background graphic.
| | 03:40 | So that's how this FLA file setup.
| | 03:43 | If you look in the Library, you won't see any
extra elements that I didn't mentioned already.
| | 03:48 | That's because we are only going to be using
elements that are already on the stage for this game.
| | 03:52 | So we are not going to be creating any elements dynamically.
| | 03:55 | Now that we have taken a look at our
FLA file, let's start creating our game.
| | Collapse this transcript |
| Setting up game variables| 00:00 | Now we are at the variables that we
are going to be using in our game.
| | 00:03 | If you are following along you can open up 03_Variables.fla
or you can just use the same file from the last exercise.
| | 00:09 | Let's go to the first keyframe in the
Actions Layer and open up the Actions panel.
| | 00:12 | I'm going to paste in some code here as with the other
games that we have created, the code that pasted in
| | 00:18 | and the code that I have paste in
the rest of this chapter can be found
| | 00:21 | in the Chapter 06 folder in a file called code.txt.
| | 00:25 | To find the movie number, you can look
at the FLA file that I'm working in.
| | 00:28 | So right now I'm working in movie three so this code
to be found in the movie three section of code.txt.
| | 00:34 | So first we have rotateAmt.
| | 00:36 | It has a value of 30 and it corresponds to the
amount that the hands move around the clock.
| | 00:42 | Going to explain this value in more detail once
we start creating the interactivity for the clock.
| | 00:46 | So we will come back to it little bit later.
| | 00:48 | The buttons array simply holds all the buttons in order
from top left, top right, bottom right and bottom left.
| | 00:55 | This will be very familiar to you if you watch the
movie on creating circular motion in Chapter 03.
| | 01:02 | CurrentButtonNum, lastButtonNum these variables hold
the current and the last buttons that we rolled over,
| | 01:08 | which also should be familiar to you at this
point and then these four variables cw1, cw2,
| | 01:14 | ccw1 and ccw2 are boolean values and they
represent whether the person is rotating the mouse
| | 01:20 | or Wii remote clockwise or counterclockwise.
| | 01:24 | We will talk more about this in detail a little bit later
on but these are essentially going to be the same values
| | 01:29 | that we used when we did circular motion in Chapter
03 and I'm just holding them in variables here.
| | 01:35 | Target number of minutes is where the player needs
to rotate the minute hand to you to win the game.
| | 01:39 | TargetHour is the same thing for hours instead of minutes.
| | 01:43 | TargetMinuteRotation is the rotation amount that
corresponds to the target minute that should be rotated to
| | 01:49 | and targetHourRotation is the same
thing but for the target hour.
| | 01:53 | FullTargetRotation represents the sum of target
minute rotation and target hour rotation.
| | 01:58 | We will talk about that more when we
start moving the hands on the clock.
| | 02:01 | StartTime represents the time that
the player started playing the game
| | 02:05 | and endTime represents the time
when the player finishes the game.
| | 02:08 | So those are the variables that we
are going to be using in the game
| | 02:10 | and you could see here they are pretty straight
forward and now that we have our variables set
| | 02:14 | up we could start writing the code to initialize our game.
| | Collapse this transcript |
| Initializing the game| 00:00 | Now we are at the code to initialize our game.
| | 00:02 | If you are following along, I'm working in
04_Initialize.fla in the Chapter6 folder.
| | 00:07 | You can also use the same file from the last exercise.
| | 00:10 | The first thing I'm going to do is
run a function called initializeGame.
| | 00:15 | In between my run immediately code and my
variables will define the initializeGame function.
| | 00:20 | At this point it's pretty simple. Setting startTime = getTimer.
| | 00:24 | Setting the clock hour rotation equal to
zero. Clocks minute rotation equal to zero.
| | 00:30 | Running a function called enableAll passing in a value of true.
| | 00:33 | We will talk about the enableAll function
in just a minute and I'm hiding end_mc.
| | 00:38 | The enableAll function is also very pretty simple
accepts one parameter isEnabled and it's Boolean
| | 00:44 | and I have a loop running for all the buttons in the buttons array
| | 00:47 | and I set enabled equal to the value passed in via the isEnabled
parameter and then I set a dynamic property called num.
| | 00:54 | A dynamic property is a property that you can
create on a button or a movie clip in your code.
| | 01:00 | So num doesn't already exist, I'm just creating it
right here. I'm setting the value of it equal to i.
| | 01:06 | So each button has its own index memorized. Now, before we
use an index of function to get the index of each button.
| | 01:14 | This way it makes it very easy to
connect a buttons index to the button.
| | 01:20 | In that way we don't have to use an
extra function to get a button's index.
| | 01:23 | So now our game is successfully initialized. If we test
the movie, we won't see anything too fancy at this point,
| | 01:29 | we will just see the head in end_mc
| | 01:32 | and both the clock hands pointing up.
| | 01:34 | I will close the preview window
| | 01:36 | and now our game is initialized.
| | Collapse this transcript |
| Updating the target clock| 00:00 | e Now we will setup their functionality
to add rotation to the clocks.
| | 00:04 | We are going to start with the rotation of the target clock.
| | 00:06 | If you are following along, I am
working in 05_Target_clock.fla
| | 00:11 | or you can obviously use the same
file from the last exercise.
| | 00:14 | In your code, find the initializeGame
function, right below startTime = getTimer,
| | 00:18 | we are going to paste in a block of code.
| | 00:20 | So the pretty large block of code but it's
actually fairly simple and I will explain.
| | 00:25 | Here we have targetHour and targetMinutes being set.
| | 00:29 | TargetHour is a rounded number,
it's a random between 0-11+1.
| | 00:35 | So random number between one and 12.
| | 00:38 | So it represents it hour on the clock.
| | 00:41 | TargetMinutes represents the number of minutes on the clock.
| | 00:45 | So random numbers that's rounded between 0-11 then that
value is multiplied by 5 so then the values are in range
| | 00:53 | between 0-55 and only in multiples of five.
| | 00:57 | So if the rounded number would
one, the value of targetMinutes
| | 01:00 | to be five, the value would two, ten and so on.
| | 01:03 | TargetHourRotation and targetMinuteRotation
represent the amount that hour
| | 01:08 | and minute hand should rotate based on the targetHour value.
| | 01:13 | TargetHourRotation is targetHour * 360.
| | 01:17 | Now 360 degrees are in a full circle or essentially
saying that the targetHourRotation is going
| | 01:23 | to be the targetHour is rotated
in a full circle that many times.
| | 01:27 | So if the targetHour is seven, it
will be rotated in seven full circles.
| | 01:32 | TargetMinute rotation is a little bit different.
| | 01:34 | The value is targetMinutes divided
by five times the rotate amount.
| | 01:39 | Let me explain how this works.
| | 01:42 | RotateAmt has a value of 30.
| | 01:46 | Now the way that that number is
derived is 360 divided by 12.
| | 01:53 | So essentially this allows the clock to rotate in
five minute increments and here is how it works.
| | 01:58 | Take targetMinutes, let's say the
clock it should rotate to 30 minutes.
| | 02:03 | So we have targetMinutes as a value of 30, we
divide that by five, that corresponds to the point
| | 02:10 | on the clock where the hand should rotate.
| | 02:13 | So 30 divided by five is six.
| | 02:15 | So the clock should rotate towards the six hand.
| | 02:17 | So that's how that works and then we multiply that value
by rotateAmt and the clock will rotate to that position.
| | 02:24 | So if targetMinutes is 30, divide that by 5 and
we get 6, that's where the clock should point to.
| | 02:30 | We multiply that by the rotate
amount which is 30 and we get 180.
| | 02:37 | So the clock hand would rotate exactly where it wants to go
from pointing straight up to pointing straight down to 30
| | 02:44 | and that's how targetMinuteRotation works.
| | 02:46 | FullTargetRotation is the sum of
targetHourRotation and targetMinuteRotation
| | 02:52 | which we will talk about more in just a minute.
| | 02:55 | Here I'm initializing the target hour and minute rotations
to zero then running a function called updateClock,
| | 03:02 | passing in target_mc and fullTargetRotation.
| | 03:05 | We will talk more about updateClock in just a minute.
| | 03:08 | The conditional statement that I have
here, simply displays the targetMinutes
| | 03:12 | and targetHour inside of the target text field.
| | 03:15 | Now there is one reason why we have to use
a conditional statement here and that's
| | 03:18 | because of targetMinutes has a value less
than ten, it's going to be a one digit value.
| | 03:23 | So we will have the value of zero or five.
| | 03:25 | Now if we just put that value in the text field
we might get 10:5 or 10:0 instead of 05 or 00.
| | 03:33 | So this conditional statement fixes that by setting
the value of target text = targetHour+:0+targetMinutes.
| | 03:41 | So 10:05 or 10:00 put on a clock.
| | 03:44 | Since that's to the exception to the rule, the rest of the
time the value just going to be targetHour+:+targetMinutes.
| | 03:51 | Let's take a look at the updateClock function.
| | 03:53 | I will paste that right below initializeGame.
| | 03:57 | UpdateClock is pretty simple but it's where the
lot of the magic happens in this application.
| | 04:02 | It accepts a clock so either clock_mc or the target
clock which is target_mc then it accepts the updateValue
| | 04:09 | which is the value by which to update a minute
and hour hands on the clock and that's a number.
| | 04:15 | Let's take a look at what's inside of the function.
| | 04:17 | First it rotates the minute hand
by the amount of updateValue.
| | 04:22 | Now remember that updateValue is the value
of targetHourRotation + targetMinuteRotation.
| | 04:28 | TargetHourRotation is multiplied by 360,
so it's going to represent full circle.
| | 04:32 | So we can basically take that add of equation as far as
minute_mc is concerned because as you rotate elements
| | 04:39 | in flash, after you go pass 360 the value is reset anywhere.
| | 04:43 | If we subtract that we just have the targetMinuteRotation.
| | 04:47 | So again, let's say the value is 180
because we want the clock to point down.
| | 04:51 | Then we are simply adding to the amount of the
clocks rotation currently which is going to be zero
| | 04:57 | because we initialize that in initializeGame
function so add on 180 and the clock will face down.
| | 05:03 | Now here is the more complicated
part, rotating the hour hand.
| | 05:07 | The rotation of the hour hand is added to
in the amount of updateValue divided by 12.
| | 05:13 | The logic behind this is that the hour
hand rotates at one-twelfth of the speed
| | 05:19 | as the minute hand, just like in a normal clock.
| | 05:22 | So for example, the minute hand in an
hour will go through a full rotation once.
| | 05:26 | In that hour, the hour hand will only rotate
one hour, so that's one-twelfth of the speed.
| | 05:33 | So that's how we make the clock
rotate to the correct position.
| | 05:36 | We have moved the minute hand by the updateValue
and hour hand by updateValue divided by 12.
| | 05:42 | Let's test the movie and see what we get.
| | 05:45 | Get Target time is 6:50 and if everything
is correct it should display 6:50
| | 05:50 | on the target clock and sure enough it does, nice.
| | 05:55 | So now we have our target clock rotating
and our updateClock function ready to go.
| | 05:59 | The next step is adding the interactivity
for the player to rotate the clock
| | 06:03 | by moving the viewer mode or cursor in a circular motion.
| | 06:07 | We will take a look at that in the next movie.
| | Collapse this transcript |
| Adding player interactivity| 00:00 | Now, we will take a look at adding the player
interactivity so we can capture the clockwise
| | 00:04 | or counterclockwise rotation from the Wii Remote with mouse.
| | 00:08 | If you are following along, I'm working in
06_Player_Interactivity.fla in the Chapter6 folder.
| | 00:13 | Of course, you can use the same file from the last exercise.
| | 00:16 | In your code, find the enableAll function.
| | 00:18 | At the bottom of the loop within the
enableAll function write the following code.
| | 00:24 | Set buttons(i) onRollover event.
| | 00:27 | To trigger a function called buttonOver.
| | 00:30 | I will define the buttonOver function
right below the enableAll function.
| | 00:34 | Again, the buttonOver function may look a little bit
complex, but again, this is the same formula used
| | 00:39 | in the circular motion movie in chapter three.
| | 00:42 | First what I'm doing is setting currentButtonNum
= this meaning the button rollover.num.
| | 00:48 | Remember num is a dynamic property that has
each buttons index in the buttons array.
| | 00:53 | Now, here we have is lastButtonNum is
undefined then lastButtonNum = this.num.
| | 00:58 | Now, lastButtonNum is only going to be
undefined when the game first starts.
| | 01:02 | So if you scroll to top of your
code, you will see there is no value
| | 01:05 | for lastButtonNum or currentButtonNum for that matter.
| | 01:10 | So for the first button rollover that
button is going to be lastButtonNum.
| | 01:13 | Next, I'm setting the value of the clockwise1,
clockwise2, counterclockwise1, counterclockwise2 variables.
| | 01:25 | Remember that these values were Boolean.
| | 01:29 | These are the same values that we used to calculate
circular motion in the movie in chapter three.
| | 01:34 | One scenario for clockwise is the
currentButtonNum is 0 && lastButtonNum == 3.
| | 01:41 | The other scenario for clockwise is
currentButtonNum is == lastButtonNum + 1.
| | 01:48 | There are also two scenarios for counterclockwise.
| | 01:52 | The first one is currentButtonNum == 3 && lastButtonNum = 0.
| | 02:00 | The other scenario is currentButtonNum == lastButtonNum-1.
| | 02:06 | So our conditional statements simply check if clockwise
scenario one is true or clockwise scenario two is true.
| | 02:12 | If so, updateClock and the clock will be
clock_mc and updated in the value of rotateAmt.
| | 02:20 | So for rotating clockwise, we are going to rotate
the clock hand by the rotate amount which is 30.
| | 02:28 | If the player is not moving clockwise then check
to see if the player is moving counterclockwise.
| | 02:33 | So if condition one for counterclockwise or
condition two for counterclockwise is true,
| | 02:40 | then outrun updateClock passing in the
value of clock_mc and then -rotateAmt.
| | 02:46 | So the clock hand will then rotate back 30.
| | 02:49 | After all the calculations are made,
lastButtonNum is set to = this.num and again,
| | 02:56 | that's just to capture the current button for the
next time the player rose over a button and again,
| | 03:02 | if this doesn't make any sense, I highly recommend
watching the circular motion movie in chapter three.
| | 03:05 | We will test it out and see in action.
| | 03:06 | Going to rotate my mouse in a circular
motion and watch the clock hands update.
| | 03:08 | Looks like it's working great clockwise.
| | 03:09 | So now I will rotate counterclockwise and it looks
like the clock is moving exactly as it should.
| | 03:11 | So now our basic interactivity works
and the last thing we have to do
| | 03:13 | for our game is compare the player's clock
rotation against target clock rotation.
| | 03:15 | We will do that in the next movie.
| | Collapse this transcript |
| Determining a win| 00:00 | Last thing we have to do is compare the
rotation of the hands on a players clock
| | 00:03 | versus the rotation of the hands on the target clock.
| | 00:06 | In this movie, we will take a look at how to do that.
| | 00:08 | If you are following along you can open up 07_Finishing.fla
or just use the same file from the last exercise.
| | 00:13 | In your code, find the enableAll
function and at the bottom of the loop
| | 00:17 | in the enableAll function set the onRelease event
for buttons(i) to run a function called checkWin
| | 00:24 | or at the checkWin function run
under the buttonOver function.
| | 00:33 | CheckWin is actually pretty simple.
| | 00:34 | It simply checks to see if the rotation
of the clock's hour hand is equal
| | 00:39 | to the rotation of the target clock's hour hand.
| | 00:42 | In this case we don't even need to
check the rotation of the minute hand
| | 00:46 | because the hour hand is going to be very precise.
| | 00:49 | For example, if the target clock is rotated at the 360,
the hour hand is going to be halfway between six and seven.
| | 00:56 | Now, there is no other way to get the hour hand
halfway between six and seven then for the player
| | 01:00 | to rotate the main clock's hour hand to
six and seven and be at 6:30 as well.
| | 01:05 | So we only need to check the hour hand here.
| | 01:07 | Let's take a look at inside of this conditional statement.
| | 01:09 | endTime is set to the value of getTimer.
| | 01:11 | So the current value on the timer minus (-) the time the
player started the game divided (/) by 1000 and divided (/)
| | 01:17 | by a 1000 gives us a value in seconds for the endTime.
| | 01:21 | End movie clip is shown.
| | 01:23 | The text inside of the end text
field displays endTime + seconds.
| | 01:29 | enableAll runs here.
| | 01:30 | Set to false to disable all the buttons and end_mc
is onRelease event is connected to initializeGame.
| | 01:38 | So once end_mc is clicked again, the game will
restart and that's really all there is to it.
| | 01:43 | Let's test the movie and see if we can get to win.
| | 01:46 | So the target time is 11:30, I'm going to rotate
the clock's minute hand down to 30 minutes.
| | 01:52 | So my clock is 11:30 and I should be able to click
on any of the buttons and check to see if I won.
| | 01:58 | If so, I get this message.
| | 01:59 | It says Good Job!
| | 02:00 | and looks like it's working great
and my time was 13 seconds.
| | 02:03 | I'm going to click play again and now I can play again.
| | 02:06 | You can see that if you click and your player clock is not
| | 02:10 | in the right position then you are
not going to get the winning message.
| | 02:14 | If you set it just right then you will get it.
| | 02:17 | So looks like our game is working
great and there you have it.
| | 02:20 | There is another game.
| | 02:21 | Just like with the other games you can take this game,
publish it meaning create the necessary extra files
| | 02:27 | like the HTML, Javascript and your
SWF file and then upload that file,
| | 02:31 | browse to it on the web using the Internet Channel on
your Wii and you can play another game on your Wii.
| | Collapse this transcript |
|
|
7. Creating Velocity-Based Interactivity: Fun Run GameViewing the finished game| 00:00 | In this chapter, we are going to utilize the velocity
technique we learned in Chapter2 by creating a running game.
| | 00:06 | If you are following along, you could open
up 01_Fun_Run.fla in the Chapter7 folder
| | 00:12 | or you can simply watch.
| | 00:14 | I'm going to test the movie to show the game in action.
| | 00:17 | The game has several elements, here is the main screen.
| | 00:19 | Here is a little information window that has some text
| | 00:23 | and tells you what time do you need to get what medals.
| | 00:27 | There is a speedometer at the bottom
| | 00:29 | and a little indicator of how far the players
run at the bottom of the screen as well.
| | 00:33 | So I'm going to click play
| | 00:34 | and I move the mouse or Wii Remote
up and down to make the player run.
| | 00:39 | Faster I move the mouse, the faster the player runs.
| | 00:42 | As I run the amount of miles goes up
| | 00:44 | and the player advances across the road.
| | 00:47 | Based on the time when I finished I get a medal.
| | 00:50 | Unless of course I finish after 9 seconds.
| | 00:53 | Once you are done playing the game you can
simply click the information window to play again,
| | 01:01 | and that's the Fun Run game.
| | 01:03 | So let's start making it.
| | Collapse this transcript |
| Exploring the game's FLA file| 00:00 | Now, let's take a look at our FLA file is set up?
| | 00:03 | If you are following along, go ahead and open
up 02_Exploring.fla or if you don't have access
| | 00:08 | to the exercise files, you can simply create your file and
set it up in the exact same way that I set this file up.
| | 00:14 | Let's go through our layers.
| | 00:16 | First, we have actions layer currently with no code in it.
| | 00:19 | The next layer is called bottom elements that contains
the graphical elements at the bottom of the stage.
| | 00:24 | There is some text fields and some movie clips.
| | 00:27 | Speed is a static text field.
| | 00:29 | There is a Movie Clip.
| | 00:30 | There's an instance of mc speed called speed_mc.
| | 00:32 | The sister graphic that will show the player's speed.
| | 00:36 | Based on the speed of the player, the Movie Clip will scale.
| | 00:38 | There is a dynamic text field called distance_txt that will
display the text value for how far the player has traveled
| | 00:45 | and then there is another visual queue for how far the
player has traveled in a Movie Clip called distance_mc.
| | 00:52 | That Movie Clip is pretty simple, it's just a
Motion-Twin of a mini runner, running across a mini road.
| | 00:57 | Actions layer simply has a stop action.
| | 01:00 | Back to scene one, going to unhide the end window layer,
unlock it and show that a system Movie Clip called end_mc
| | 01:12 | and if double-click the Movie Clip or enter its
timeline, you can see that it's fairly simple.
| | 01:17 | The medals layer contains information about how
fast the player needs to run to get what medal.
| | 01:21 | The text layer contains text.
| | 01:24 | So, there is some Dynamic Text fields, head_txt,
sub_txt and time_txt then the play button.
| | 01:35 | The box layer contains the background graphic
and the shadow contains the shadow graphic.
| | 01:39 | So you can see this is pretty straightforward.
| | 01:41 | We can go back to scene one, unlock
the end window layer and hide it.
| | 01:44 | Unhide the buttons layer and unlock it.
| | 01:46 | The buttons layer contains two buttons, one
called top_btn, and one called bottom_btn.
| | 01:52 | These buttons manage the interactivity for this game.
| | 01:54 | Player moves the mouse or we remote up and
down, back and forth to make the player run.
| | 01:59 | If you double-click one of the buttons,
you will see there are both instances
| | 02:02 | of btn in this and there is only Hit frame.
| | 02:07 | Lock and hide the buttons layer.
| | 02:09 | The runner there contains the runner
that instance name is runner_mc.
| | 02:13 | If you double-click the Movie Clip,
you'll see there are three keyframes.
| | 02:17 | On each keyframe is the runner and the runner is a graphic.
| | 02:24 | There is an instance of the runner on each keyframe.
| | 02:27 | On the first frame the runner is a graphic.
| | 02:29 | On the second keyframe the runner is a Movie
Clip, instance of mc running with no instance name
| | 02:34 | and notice the frame label above the runner.
| | 02:37 | Frame label on the label's layer is run
and then there is the finished frame.
| | 02:42 | The finished frame has a frame label of finished and a Movie
Clip, there is an instance of mc finish called moving_mc.
| | 02:50 | If I double-click the runner, you will see the timeline for
mc finished, the first frame the runner is on the ground.
| | 02:59 | The next keyframe has a label name of gold and
simply shows the runner wearing the gold medal.
| | 03:06 | Now, if I lock the mask in the middle layer and
unhide the mask where you could see that it looks
| | 03:10 | like the runner is wearing the gold medal.
| | 03:13 | The instance of the runner on that frame is a graphic.
| | 03:19 | We'll go to the silver frame label to
the runner just holding a silver medal,
| | 03:25 | then on the bronze frame label, the
runner is holding a bronze medal.
| | 03:29 | I will go back to scene one now.
| | 03:31 | The next layer is called the finish line.
| | 03:34 | So I will unlock it and select a finish line which is
an instance of mc finish line called the finishline_mc
| | 03:41 | and if I double-click the graphic or enter
its timeline and it has got two frames
| | 03:45 | and it is actually just a simple graphic that
semi transparent and it is an Alpha of 35.
| | 03:51 | Scroll down, then there is BG.
| | 03:54 | The background there contains all of the main
graphical animating elements for this file.
| | 04:00 | So I select the artwork on the background
layer, it's an instance of mcBg called bg_mc.
| | 04:06 | If I double-click that instance of taking to that timeline
and they are a bunch of different movie clips in here
| | 04:12 | that control the different parts of the timeline.
| | 04:14 | So we have the sidewalk, buildings, rocks,
road, the sidewalk graphic and the sky.
| | 04:24 | Everything is set up pretty straightforward here.
| | 04:26 | Each one of these layers contains a
movie clip that is repeated twice.
| | 04:31 | So for example if I alter Option+Click
the lock button in the buildings layer,
| | 04:36 | I can unlock that layer and lock all other layers.
| | 04:38 | If I select the buildings movie clip, see it's an instance
of mc building, or the instance name of buildings1_mc.
| | 04:45 | So I have my buildings1 here and
it has a building and little lake.
| | 04:51 | If I scroll to the right, I'll see immediately to the right
| | 04:54 | of that movie clip is another instance
of mc buildings called buildings2_mc.
| | 04:58 | This enables us to have a scrolling background,
just like more about how the scrolling background.
| | 05:03 | I will talk more about how this scrolling going background
works once we start writing the code for our game.
| | 05:08 | But within this movie clip all the arms
are set up in pretty much the same way.
| | 05:12 | So if I were to unlock sidewalk, you see that there are two
instances of mc sidewalk, sidewalk1_mc and sidewalk 2_mc.
| | 05:19 | If I unlock the rocks layers, you
will see that there are two instances.
| | 05:22 | So I have clouds1_mc and clouds2_mc
and so on down the chain.
| | 05:29 | The last animating element is the road
which is road1_mc, road2_mc and the sidewalk
| | 05:35 | in the sky elements don't animate,
they are just static graphics.
| | 05:39 | Returning the main timeline, and that's
it for how this file are is setup.
| | 05:42 | So once a file is setup, ready to start writing the code
for the game, and we'll start doing that in next movie.
| | Collapse this transcript |
| Setting up game variables| 00:00 | We'll start writing the code for our game by
creating the variables that we're going to be using.
| | 00:04 | If you're following along and working in 03_Varibles.fla,
| | 00:07 | or you're going to just use the
same file from the last exercise.
| | 00:10 | Then we have got the first key from the
actions layer and open up the Actions panel.
| | 00:14 | The Actions panel will paste some code in.
| | 00:16 | By the way this code can be found in code.txt
in the Chapter7 folder, in the movie 3 section.
| | 00:22 | Let's take a look what this code is?
| | 00:24 | Importing gs.TweenLite; which is our animation
engine and if you are familiar with that,
| | 00:29 | I definitely recommend watching the TweenLite movie
in chapter 2 and since we are importing TweenLite,
| | 00:34 | we're going to need to have the gs folder with the TweenLite
class copied in the same folder where this fla file is.
| | 00:41 | So we have some variables here, there is
speed that represents the speed of the player.
| | 00:45 | pixelsPerMiles an arbitrary number that represents how
many pixels there are in a mile which of course has
| | 00:50 | to be arbitrary because we can't
really measure pixels to miles.
| | 00:55 | Here is the totalMiles and it's
26.2, so marathon distance here.
| | 01:01 | pixelsTraveled represents how many
pixels the player has gone.
| | 01:05 | This is the miles as how far the player has gone
in miles based on our pixels to miles formula,
| | 01:11 | milePercent is the percentage of
miles traveled by the player.
| | 01:15 | Finished is Boolean and represents whether
or not the player has finished the game.
| | 01:19 | startTime represents the time that player started the game,
endTime represents the time that player finished the game.
| | 01:25 | goldTime, silverTime and bronzeTime are the amount
of time that the player needs to complete the game
| | 01:30 | in to get the gold, silver and bronze medals respectively,
| | 01:34 | and these are based on the totalMiles
variable divided by certain numbers.
| | 01:38 | So totalMiles divided by 5 for goldTime,
4 for silverTime and 3 for bronzeTime.
| | 01:43 | FlstartX is the starting x position of finishLine_mc.
| | 01:48 | So I'm capturing it right here.
| | 01:51 | milesFromPlayer is how many miles
the finished line is from the player.
| | 01:55 | That's determined by subtracting the position of
the runner from the flstartX variable and dividing
| | 02:02 | that by how many pixels are in a mile and those are
the variables that we're going to be using in the game.
| | 02:07 | Next, we'll look at initializing the game.
| | Collapse this transcript |
| Initializing the game| 00:00 | Now, look at initializing our game.
| | 00:02 | If you're following along, I'm working on
04_Initialize.fla in the Chapter7 folder.
| | 00:07 | Of course you can use the same file from last exercise.
| | 00:10 | Below our variables, I'm going to paste
some code, this code initializes our game.
| | 00:14 | Set end_mc onRelease event to run the startGame
function which I'll define in just a second.
| | 00:21 | Having the runner gotoAndstop at frame 1, setting
some text in the text fields and set up end_mc.
| | 00:27 | The headline text says Fun Run,
the sub text says Have a Blast!
| | 00:31 | Just take a look at the startGame function.
| | 00:33 | I'll paste that right above the code I just wrote.
| | 00:37 | The startGame function is fairly straightforward.
| | 00:40 | It simply initializes the game.
| | 00:42 | finishLine_mc is x position is initialized to flstartX.
| | 00:47 | Finished is set to false.
| | 00:49 | StartTime equals the current time on the timer.
| | 00:52 | PixelsTraveled distance in miles.
| | 00:54 | MilePercent and speed are all initialized to 0 and the
enableAll function is called with values of true and true.
| | 01:00 | We'll create the enableAll function in just a minute.
| | 01:03 | The runner is sent back to frame 1 and
using the TweenLite engine, end_mc fades out
| | 01:12 | and once it's done fading out,
the hideMessage function will run.
| | 01:16 | We'll define the hideMessage function in a minute as well.
| | 01:18 | Just take a look at the enableAll function.
| | 01:20 | We'll paste it right below the startGame function.
| | 01:23 | EnableAll accepts two parameters.
| | 01:25 | isEnabled which is a Boolean value and
isAnimating which is also a Boolean value.
| | 01:30 | For now, we're just going to use isEnabled.
| | 01:33 | The top and bottom buttons enabled property
is set to whatever the value of isEnabled is.
| | 01:38 | So this function is pretty straightforward.
| | 01:40 | Just take a look at the hideMessage function.
| | 01:42 | We'll paste hideMessage right below enableAll.
| | 01:45 | hideMessage simply hides end_mc once it's twined out.
| | 01:50 | The reason why I'm doing this is so that the
interactivity for end_mc is also disabled
| | 01:56 | and that's all the rest you initialized in our game.
| | 01:58 | I'll test the movie and see this in
action and if you click the Fun Run block
| | 02:05 | or end_mc it'll fade out and the game starts.
| | 02:10 | Though nothing happens.
| | 02:12 | In the next movie, we'll take a look at actually adding
some interactivity to the game and making the player run
| | 02:18 | when you move your mouse or re-remote up and down.
| | Collapse this transcript |
| Creating runner speed| 00:00 | Now, add the interactivity to make our player run.
| | 00:02 | If you are following along, open up 05_Running.fla
or you use the same file from the last exercise.
| | 00:08 | In the enableAll function we're going to paste in some code.
| | 00:12 | This code is based on the value of
isAnimating variable which when we first run it
| | 00:16 | in the startGame function and it has a value of true.
| | 00:19 | If it's time to animate, then _root.onEnterFrame
is set to run the run function.
| | 00:28 | If not _root.onEnterFrame is set to null.
| | 00:31 | So the onEnterFrame event is disabled.
| | 00:33 | Let's take a look at the run function.
| | 00:35 | The run function is very straightforward.
| | 00:37 | I'll paste it right below hideMessage.
| | 00:41 | It runs two functions - setSpeed and showSpeed.
| | 00:45 | Let's take a look at setSpeed first.
| | 00:46 | I'll paste setSpeed right below the run fuction.
| | 00:49 | SetSpeed modifies the value of speed every frame.
| | 00:54 | So if speed is greater than zero, then
it's going to keep decreasing by 0.2
| | 01:00 | and the runner is going to go to the run frame.
| | 01:04 | If speed is less than or equal to zero or else, speed
is set to be zero and the runner is set to frame 1.
| | 01:13 | At frame 1 the runner is stopped.
| | 01:15 | So this function constantly decreases
the speed of the player so that I've
| | 01:19 | to keep moving the mouse or re-remote to keep running.
| | 01:22 | Let's take a look at showSpeed function next.
| | 01:24 | I'll paste that right below the setSpeed.
| | 01:26 | ShowSpeed is fairly straightforward.
| | 01:31 | The speed Movie Clip which is the
block that displays the player's speed,
| | 01:35 | as its xscale property set to speed time is 10.
| | 01:39 | So the speed will have a value between zero and ten at full
speed, speed_mc will have an xscale of 100 and just keep it
| | 01:47 | in balance, we have some conditional statements.
| | 01:49 | If the speed xscale is greater than
100, then speed xscale equals 100.
| | 01:54 | If it's less than zero then it
equals zero, pretty straightforward.
| | 01:58 | Now, add the interactivity for the player to move the
mouse or remote up and down to make the player run.
| | 02:04 | I'll paste this code right below showSpeed.
| | 02:06 | Here I'm setting the value of top_btn onRollOver equal
to bottom_btn onRollover which is equal to a function.
| | 02:18 | The function simply checks to see if speed is less than ten.
| | 02:23 | If so, then speed goes up one, so as the player is moving to
the mouse or re-remote up and down, the speed is increasing
| | 02:30 | and if they don't move it up and down,
the speed is constantly decreasing.
| | 02:34 | Let's test the movie to see this in action.
| | 02:36 | I'll click end_mc to start playing the game, move the
mouse up and down and you can see the player's speed.
| | 02:42 | And the faster I move the mouse up and
down, the faster the player's speed is.
| | 02:47 | If I start moving the player's speed decreases.
| | 02:49 | It eventually stops, stopping the runner.
| | 02:52 | Nice, so now we get the player
running, but it doesn't really look
| | 02:56 | like he is running because the background is not moving.
| | 02:58 | In the next movie, we will take a
look at scrolling the background
| | 03:00 | so we can make the players running a little more realistic.
| | Collapse this transcript |
| Scrolling the background| 00:00 | Now, we'll make the background of the movie scroll
when the player is running so it looks more realistic.
| | 00:05 | If you are following along, you can open
up 06_Scrolling.fla in the Chapter7 folder
| | 00:09 | or you can simply use the same file from last exercise.
| | 00:12 | In your code, find the run function and at the bottom
of the run function, run a function called moveGraphics.
| | 00:21 | The moveGraphics function is fairly simple and
I'll paste it right below the run function.
| | 00:27 | First, it adds to pixelsTraveled in the amount of speed
times (*) 5, speed times (*) 5 comes from the rate
| | 00:34 | at which the road moves, which
is where the player is running.
| | 00:38 | So essentially that's what distance the player is traveling.
| | 00:42 | The scrollMc function controls the
movement for all of the background elements.
| | 00:46 | There are three values that are passed in, the
initial movieClip, the copy movieClip or the duplicate
| | 00:52 | that moves along with it to be act as a buffer and
then the rate at which the movieClip should travel.
| | 00:58 | Let's take a look at the scrollMc function.
| | 01:00 | I'll paste it right below moveGraphics.
| | 01:03 | ScrollMc isn't too complicated, you can see it
accepts three parameters, mc1, mc2 and the rate
| | 01:10 | and the function moves mc1 horizontally
in the amount of its rate.
| | 01:18 | So, it's going to move the object to the left.
| | 01:21 | They may have a conditional statement
that's used to loop the movieClips.
| | 01:25 | If movieClip1's x position is less than or
equal to the rate minus (-) the width of mc1.
| | 01:33 | So basically if mc1 has completely scrolled after left
edge of the stage then we'll set mc1's x position to 0.
| | 01:43 | For mc2 it's x position is simply x position of mc1 plus
(+) the width of mc1 minus (-) 10 pixels just to make sure
| | 01:54 | that the movieClips are overlapping just a
little bit so there is no space in between them.
| | 01:58 | And the way this is all powered is each movieClip scrolls
slower based on how far it is supposed to be back.
| | 02:08 | So the closest movieClip or the
road scrolls it speed times (*) 5,
| | 02:12 | the sidewalk which is a little
bit farther is speed times (*) 3.
| | 02:15 | buildings are farther back at speed times (*) 2
| | 02:18 | and the clouds are the farthest back
and they just go at the rate of speed.
| | 02:22 | Let's take a look at how this works.
| | 02:24 | I'll test the movie, start playing
the game and move the mouse up
| | 02:28 | and down to scroll the movieClips and that looks great.
| | 02:36 | So we have this parallax scrolling effect with
each object scrolling in relation to its distance.
| | 02:42 | So now our movieClip scrolls successfully.
| | 02:44 | The next step is to have some way to measure
the distance that the player has traveled,
| | 02:48 | so that there can eventually be a
way for the player to win the game.
| | Collapse this transcript |
| Tracking distance| 00:00 | Now, we use our pixelsTraveled variable to show
the distance that the player has traveled in miles.
| | 00:06 | If you are following along I'm working in
07_Distance.fla in the Chapter 7 folder.
| | 00:11 | Of course you can use the same file from last exercise. In your
code, find the run function, at the bottom of the run function.
| | 00:18 | I'm going to run a function called showDistance.
| | 00:23 | I'll define the showDistance function right below the run function.
| | 00:27 | ShowDistance is what's going to show the distance
that the player has traveled on the screen.
| | 00:33 | First, we grab the distanceInMiles. That value is calculated
by taking the number of pixelsTraveled and dividing that by
| | 00:40 | the number of PixelsPerMile. Again PixelsPerMile is an
arbitrary value that I made up for this game so don't go out
| | 00:46 | and try to measure the actual amount of PixelsPerMile and
prove me wrong or anything because I just made up that value.
| | 00:53 | So, milePercent
| | 00:54 | is set to be an rounded number.
| | 00:57 | And what I've done here is I take the distanceInMiles
and divided by the number of totalMiles and multiply that
| | 01:04 | value by 100.
| | 01:05 | So this is kind of the standard formula
for getting the percentage between 1 and 100.
| | 01:09 | Take a value, divide it by a total value,
multiply it by 100 and then round it.
| | 01:14 | Then I'm having the distance movieClip gotoAndStop
| | 01:17 | and the milePercent. Where did the distance movieClip is 100
frame motion tween of the runner, running across the road.
| | 01:26 | In the distance text field
| | 01:28 | we have the distanceInMiles value rounded down using Math.floor
| | 01:33 | and then the text miles.
| | 01:35 | We'll see it an action. We're going to test the movie,
| | 01:39 | start the application and watch the runner
run at the bottom right of the screen.
| | 01:45 | Nice.
| | 01:47 | Close the preview window.
| | 01:49 | Now, we have successfully measure the
distance that the runner has traveled.
| | 01:52 | In the next movie we'll finish the game
by making a way for the player to win.
| | Collapse this transcript |
| Winning the game| 00:00 | Now, we will finish off our game by
making a way for the player to win.
| | 00:03 | If you are following along, I'm working in
08_Finishing.fla in the chapter 7 folder.
| | 00:08 | You can also just use the same file from the last exercise.
| | 00:11 | In your code find the run function and at the bottom of
the run function, run a function called moveFinishLine.
| | 00:21 | I'll paste the moveFinishLine function
right below the run function.
| | 00:24 | The moveFinishLine function is fairly straightforward.
| | 00:27 | If the player is closing up to the end or if distanceInMiles
is greaten than or equal to totalMiles-milesFromPlayer;
| | 00:36 | MilesFromPlayer is how many miles
the finish line is from the player.
| | 00:41 | If so, then move the finish line at a rate of speed x 5.
| | 00:47 | The reason why it's moving at that rate is because
that's the rate at which the road is moving
| | 00:50 | and the finish line is of course on the road.
| | 00:52 | Let's test the movie and see the finish line in action.
| | 00:55 | We're going to start the application, move the mouse up
and down and watch the player run at the bottom right
| | 01:01 | on the screen and the finish line should come
right there, right as the player finishes.
| | 01:05 | Great. I'll close the preview window and now, let's
give the player an award for finishing the game.
| | 01:12 | We'll put the finishing code inside
of the showDistance function.
| | 01:15 | At the very bottom go in to paste a block simply
checks to see if distanceInMiles is greater than
| | 01:20 | or equal to the totalMiles that the player needs to run.
| | 01:24 | If so, then run a function called finish.
| | 01:26 | Let's take a look at the finish function.
| | 01:28 | I'll write the finish function, right
below the showDistance function.
| | 01:31 | It's a pretty large function but you'll
see that it's fairly straightforward.
| | 01:36 | The first thing we do in the finish function
is check to see if the game is not finished.
| | 01:42 | If so, then finished is set to true and the
endTime is calculated using the formula getTimer
| | 01:49 | which returns the current time for the flash movie minus
the time the player started the game 01:54 the startTime
| | 01:55 | variable divided by 1000 so the
time is converted into seconds.
| | 02:00 | EnableAll has run with the value of false and then
true - false to disable the interactive elements
| | 02:07 | like the buttons and true to keep animating.
| | 02:11 | And then what's checked here is the speed of the player.
| | 02:17 | If speed is less than or equal to zero or if the player
has finished running, then end movieClip is visible.
| | 02:25 | It tweens end to an alpha of 100, the time text field inside
of the end movieClip displays the endTime plus seconds.
| | 02:35 | The runner goes to the finished frame which
remember contains gold, silver and bronze frames
| | 02:43 | and so the following conditional statements
just check to see the player's time
| | 02:48 | against the goldTime, silverTime, and bronzeTime.
| | 02:51 | If the endTime is less than or equal to goldTime then the
movieClip inside the runner_mc goes to the gold frame.
| | 02:59 | If the endTime is less than or equal to the silverTime
then I use an else if statement to check to see
| | 03:05 | if endTime is less than or equal to silver time,
if so then have the runner go to the silver frame.
| | 03:11 | If the runner is not worthy of a gold or silver
medal, then we'll check to see if endTime is less than
| | 03:17 | or equal to bronzeTime, if so the
runner goes to the bronze frame.
| | 03:21 | end_mc is set to start the game over again when clicked.
| | 03:26 | The header text of the end movieClip says,
Nice Job and the sub line says, Your time was.
| | 03:33 | That's really how others do it.
| | 03:34 | Let's test the movie and see in action.
| | 03:36 | I'm going to play the game and run nice and
fast and go for the gold, and I got a gold, nice.
| | 03:46 | So, it's Nice Job.
| | 03:47 | Your time was and it has my time.
| | 03:49 | The runner has a gold medal and I can
click end_mc to play the game again.
| | 04:01 | It looks like it's working great and there is
another game and just like with the other games,
| | 04:06 | you can publish the game meaning create the
html, JavaScript and swf files that you need.
| | 04:10 | Upload these to your web server, browse to them on your Wii
and you have got another game that you can play on your Wii.
| | Collapse this transcript |
|
|
ConclusionGoodbye| 00:00 | Well, that's it.
| | 00:02 | You have now learned the techniques
that you need to create Flash Wii games.
| | 00:06 | I hope you had as much fun as I did.
| | 00:08 | You've learned how to use the techniques like adding, porting,
click interactivity, adding up down, or left right interactivity,
| | 00:14 | adding rotational or circular interactivity
and you created velocity based interactivity.
| | 00:20 | You've learned how to take games that you create in Flash
| | 00:23 | and play them on the Wii
| | 00:24 | using the Internet Channel.
| | 00:25 | So now that you've learned this, go
out there and make some great games.
| | 00:30 | Be sure to email me when you do.
| | 00:32 | You can email me at todd@chadandtoddcast.com.
| | 00:35 | See next time.
| | Collapse this transcript |
|
|
