WelcomeIntroduction| 00:00 | Hi. Welcome to Adobe ActionScript 3.0 in
Flash CS3 Professional Essential Training.
| | 00:06 | I'm Todd Perkins and I'll be walking you
through learning ActionScript 3.0 in Flash CS3.
| | 00:11 | I'm an Adobe certified instructor in Flash. I love teaching
Flash, and I recently came over from being a Flash designer to
| | 00:17 | being a developer and so I know the struggles that you might
be going through if you're a Flash designer and you're
| | 00:22 | finally trying to learn ActionScript. In this title we'll
learn all the mysterious words that you've heard before like
| | 00:28 | function, method, class, object,
variable. We'll even create a few games.
| | 00:34 | So let's have some fun and learn some ActionScript.
| | Collapse this transcript |
| How to use the exercise files| 00:00 | If you are a premium member of the lynda.com Online Training
Library or if you are watching this tutorial on a disc,
| | 00:06 | you have access to the Exercise Files used throughout this
title. Exercise Files for this title are arranged by chapters.
| | 00:15 | I'll open up chapter 07.
| | 00:17 | The files we'll be using have names like MATH.fla
| | 00:22 | or Rounding.fla. Those are the starting states of the files that
I'll mention in the movies. Because this is a coding title, I
| | 00:29 | saved the final states of each of the fla files so you can compare
the final state of the code that I wrote against the code that
| | 00:36 | you write.
| | 00:37 | Those files have a suffix _capital F capital
I capital N. Those files end with _FIN.
| | 00:45 | Some chapters organize a little differently
| | 00:49 | Each movie in chapter 12 is organized in its own folder.
| | 00:52 | If I click 12-3 for example, we'll see all
the filenames that I'll reference in that movie.
| | 00:58 | There's also a folder called FIN that contains
the finished states of all of those files.
| | 01:05 | If you're a monthly or annual subscriber to Lynda.com, you
don't have access to the Exercise Files but you can follow
| | 01:11 | along anyway.
| | 01:12 | A lot of files I'll be creating from scratch, so you can create
those files from scratch as well. Other files will just need some
| | 01:17 | images or sound or video to work with. So let's get started.
| | Collapse this transcript |
|
|
1. Introduction to ActionScript 3.0Why you should learn ActionScript 3.0| 00:00 | Now let's talk about why you'd want to learn ActionScript
3.0. If you're a Flash designer, chances are you've only
| | 00:06 | gotten so far using Script Assist. Learning ActionScript 3.0
will help you break you through those barriers and get over the
| | 00:12 | walls that stand in your way to creating fully interactive
applications. Using ActionScript 3.0, you can create all types of
| | 00:19 | interactive applications. You can create dynamic Web applications
and you can create interactive video games, just to name a few.
| | 00:26 | Another reason to learn ActionScript
3.0, is that it's an object oriented
| | 00:30 | programming language. That will help you learn other
object oriented programming language as well. It's also an
| | 00:36 | ECMAScript language, which means it's very similar to JavaScript.
So if you want to learn JavaScript or other ECMAScript
| | 00:43 | languages, it'll be very easy for you. So enough talking about
why we'd want to learn it. Let's start learning ActionScript 3.0.
| | Collapse this transcript |
| Differences from ActionScript 2.0| 00:00 | In this movie we'll take a look at some differences between
ActionScript 2.0 and ActionScript 3.0. There are no
| | 00:05 | Exercise Files for this movie. It's just for you to watch,
especially if you know ActionScript 2.0 already. If you
| | 00:11 | don't, that's OK too. Let's take a look
at the ActionScript 2.0 section of this code,
| | 00:16 | on line three. To create a text field
| | 00:19 | you have to put the text field inside of a movie
clip and then call that createTextField method.
| | 00:26 | Specify an instance name, some width and
height values, positioning, and a depth.
| | 00:33 | In ActionScript 3.0,
| | 00:36 | to create a new text field, you simply create a new
instance of the text field class and you can specify all the other
| | 00:42 | properties later on. One reason this is
useful is because you don't have to remember
| | 00:47 | the create text field method. It's simply creating
a new text field. Let's consider the next example.
| | 00:52 | If we want to pull a movie clip
symbol out of our library at runtime,
| | 00:55 | you have to call a movie clip name.attachMovie,
| | 01:01 | the symbol name in your library,
the new instance name, and a depth value.
| | 01:06 | To create a new movie clip with ActionScript 3.0, we simply say,
| | 01:12 | create a new instance of the movie clip class. We can set
the properties for this instance later on, but the syntax is
| | 01:18 | the same whether we want a create a
text field, or to create a movie clip.
| | 01:23 | Now this is just an isolated example, not everything in
ActionScript 3.0 is less code, but the point it's standardized.
| | 01:30 | Create a new text field; create a new movie clip.
| | 01:34 | So in this example we've created a new instance of the text o
f class, a new instance of the movie clip class, but the point
| | 01:39 | is, it's standardized. It doesn't matter whether I'm creating
a text field, a movie clip, a shape, or many many other
| | 01:46 | objects. It's standardized in ActionScript
3.0, once you know how to use it
| | 01:51 | and that makes it easier to learn and easier use.
| | 01:55 |
| | Collapse this transcript |
| Moving beyond Script Assist| 00:00 | In this movie we'll talk about moving beyond Script Assist.
If you've done a lot of Flash design, chances are you've used a
| | 00:05 | lot of Script Assist. You've probably gone into
the toolbox and double-clicked a stop action.
| | 00:10 | and then clicked up at the top of the
Actions panel and set some properties.
| | 00:15 | Chances are, the theory behind everything you're doing doesn't
make a whole of sense. In this title we'll explore what it means
| | 00:22 | to call import flash.display.MovieClip
and why you'd need to use it.
| | 00:28 | We'll explain what it means when we type a movie
clip.stop and what the open and close parentheses mean
| | 00:35 | and why you need to type them, why you need to type a semicolon.
Why do you use dots? What do they stand for? What do they mean?
| | 00:41 | In this title we'll assume that you don't have
any prior knowledge of object-oriented programming
| | 00:46 | and we'll start from the beginning and explain everything along
the way. Now Script Assist is a great and a useful tool for
| | 00:52 | writing basic ActionScript. But when we go beyond Script Assist
and you learn how the code works yourself you can create advanced
| | 00:58 | interactivity and add more power to
your applications. So let's get started.
| | Collapse this transcript |
|
|
2. Communicating to MovieClips, Variables, and PeopleCommunicating to MovieClips| 00:00 | In this chapter I'm going to explain how to communicate with
different objects and with yourself or with others using
| | 00:06 | ActionScript. So the first thing that you need to understand about
communication is how to set up communication to a movie clip.
| | 00:13 | So let's open up the Welcome screen in Flash CS3 and select
Flash File (ActionScript 3.0) under the Create New section.
| | 00:21 | And that will create a new Flash document for you. Now what I'm going to
do is I'm going to draw a simple object on the Stage and set everything
| | 00:27 | up so we can communicate to this object with ActionScript. And
what do I mean by communicate? Let me show you in just a second
| | 00:33 | after we convert this object into a movie clip.
| | 00:35 | So I'm going to go over to the Rectangle tool,
| | 00:37 | and I'm going to select a Fill color,
whatever you want, I'm going to go for a green.
| | 00:42 | And you can select a stroke color if you
want or no stroke color, it doesn't matter.
| | 00:46 | Go onto the Stage with your mouse and click and drag
to draw a rectangle of any size, any width, any height.
| | 00:52 | Now what I'm going to do is convert this object
into a movie clips. So I'm going to go over here
| | 00:57 | to my Selection tool in the top left of
my screen, or press V on my keyboard,
| | 01:01 | and I'm going to draw a selection area around this whole object. You
can tell that it's selected by the white dots that are all over it.
| | 01:08 | Then I'm going to press F8 on my keyboard, or go to Modify,
Convert to Symbol, to convert this rectangle into a symbol.
| | 01:13 | I'm going to call it mc and then Rectangle, with a capital R.
| | 01:18 | Now if you've used Flash for a while you might already know the
naming conventions or what's legal and what's not legal to put as
| | 01:24 | a symbol name. Now mcRectangle is totally legal. Usually
you want to start with a lowercase letter, sometimes you want
| | 01:31 | to start with an uppercase letter, and what you want to do is
not give any spaces or any special characters, and by special
| | 01:37 | characters I mean ! ? etc. So this instance name is okay.
Verify that Movie clip is selected in the Type area,
| | 01:45 | and let's keep Registration at the top left and then click OK.
| | 01:49 | So now you have a movie clip on the Stage. Now let's just
deselect that by clicking this gray area to the left of the
| | 01:55 | Stage and there should no longer be a blue rectangle around
your square or your rectangle. And then click it again,
| | 02:02 | click your rectangle again and then look in the Properties
Inspector that's at the bottom of the screen. So it should say
| | 02:07 | Movie Clip and should have these open brackets and say <Instance
Name>. It's kind of gray in that area. If you click in the area,
| | 02:13 | you can give it an instance name. So I am g
oing to give this instance name of rectangle_mc.
| | 02:22 | Now there's a special naming convention I'm using here. I'm
giving it a name, starting with a lowercase letter. Again
| | 02:28 | for an instance name you want to follow basically the same naming
convention of giving it no spaces, no special characters. Giving it the
| | 02:35 | suffix of _mc will help me out in the future, and I'll show you
that in the next video what the difference it makes. Now what
| | 02:41 | I'm going to do is click on this movie clip on the
Stage and I'm going to go to my Free Transform tool,
| | 02:46 | or press Q on my keyword, and then you should see
all these rectangles all around, these little boxes.
| | 02:52 | So if I go over to the bottom right of my rectangle and
I click and I drag you can rotate this thing around,
| | 02:59 | and I release the mouse it's rotated,
| | 03:01 | and I can click any of these other handles
and resize or rotate or whatever I want.
| | 03:05 | I can grab different instances out of the library.
| | 03:10 | So now I have three rectangles on the Stage. I'm going to modify this
one a little bit as well, this bottom right one. I'm going to go to the
| | 03:16 | Color in the Properties Inspector, select the drop-down,
select Tint. I'm going to choose a random color.
| | 03:23 | My random color is going to be blue and
I'm going to give this a blue tint.
| | 03:27 | So we have three different instances on the Stage. Now this
is the most important thing that you need to understand about
| | 03:32 | communication for right now. In the Library this is called
mcRectangle. If I wanted to communicate to these objects
| | 03:39 | with ActionScript or modify the rotation or the transparency
or the color or anything, I need to give them an instance
| | 03:45 | name, because as far as Library is concerned,
| | 03:48 | this is mcRectangle, this is mcRectangle, this is mcRectangle.
The instance name is what differentiates the
| | 03:54 | objects from one another. So now that we have an instance name
on this rectangle_mc, we're ready to communicate to it or to
| | 04:01 | modify its properties using ActionScript.
So let's do that in the next movie.
| | Collapse this transcript |
| Modifying MovieClips properties| 00:00 | Now let's talk about modifying a movie clip's properties
with ActionScript. If you're following along in the working
| | 00:05 | files, this file is called MovieClip_Properties and it can
be found in the chapter 02 folder of the Exercise Files.
| | 00:12 | As I explained in the last movie, if we want to communicate to
an object or modify its properties using ActionScript, we need
| | 00:18 | to give it a unique instance name.
| | 00:20 | Now you may be wondering what are properties? Properties
are things you can modify in the Properties Inspector.
| | 00:26 | So if I click on this rectangle, I can modify the width.
| | 00:33 | So if I change it to, let's say I change
it to 125, it should get slightly wider.
| | 00:38 | I can modify the height.
| | 00:39 | I can modify the X position. So if I change it from
335 to 345 you'll see it move to the right slightly.
| | 00:46 | And if you click on the Free Transform tool, you can rotate it.
| | 00:53 | And we can change the transparency or the alpha. If you want
to do those with ActionScript again, you need have a unique
| | 01:00 | instance name for that object. So I'm just going to press
Cmd or Ctrl+Z on my keyboard, and let's give each one of
| | 01:06 | these objects an instance name. So I'm going to press V on my keyboard
to switch to the Selection tool, or you can just click on it in the
| | 01:11 | toolbar and on the left we have rectangle_mc.
I'm just going to call this rectangle1_mc.
| | 01:19 | And let's call the second one rectangle2_mc,
| | 01:23 | and then the one on the bottom right will be rectangle3_mc.
| | 01:34 | Alright now let's create a new layer.
| | 01:36 | I'm going to click on the Insert Layer button in the Timeline and
let's name this new layer actions. Now you don't have to name it
| | 01:41 | actions, but that's just to something I do and a lot other people do
if they put actions inside their timeline, is give it a special layer,
| | 01:47 | put it at the top and name it actions. The reason why it's at
the top is when your swf file loads by default, it loads from
| | 01:53 | the bottom up, so your actions run after everything is loaded.
Next step is to lock the actions layer. We don't want to put any
| | 01:59 | art in the actions layer. So I'm going
to click the dot under the lock symbol
| | 02:03 | in the actions layer and that'll make it
so I can't draw anything on that layer.
| | 02:06 | Then I'm going to click the blank keyframe in frame one and I'm
going to open the Actions panel by going to Window, Actions
| | 02:14 | or pressing Option+F9 on the keyboard if you're on a Mac or on
a PC it's just F9. Now you should see all these toolbars on
| | 02:22 | the left and some stuff on the right. You might see the window
looking like this with a bunch of extra gray area, because
| | 02:28 | Script Assist is on. First thing I want to do is turn off Script Assist.
So I'll go to the bottom right and I'll click the Script Assist button
| | 02:36 | and you know that it's on because it should
have little rectangle around it if it's on.
| | 02:40 | If it's off then you won't have any of that extra gray space at the top
of the Actions panel. The next thing I want to do is get rid of the toolbars
| | 02:46 | on the left side of my screen. To do that,
| | 02:48 | I'm going to find that little arrow, it's kind of the
divider between the toolbar or tools and the coding area
| | 02:56 | So if I click once on that, it'll go way and now I'm free to
type my code in here. The way that I refer to my object in
| | 03:02 | ActionScript is by calling it by its instance name, not the name
that I put in the library, the instance name. So I'm going to
| | 03:09 | type rectangle1_mc.
| | 03:13 | So that's the instance name. This naming convention
is very important. When you give it an underscore mc
| | 03:20 | instance name, and by the way you don't have to give it the
_mc instance name, you just have to not put spaces or special
| | 03:25 | characters.
| | 03:26 | But if you give it the name _mc, Flash will recognize it in
ActionScript as a movie clip. So if I type a dot, a dot is what
| | 03:33 | I use after the object name to speak to it. When I type the dot, Flash
recognizes that it's a movie clip because it has the name _mc and
| | 03:40 | then I get this thing called code hinting that comes up. And if I
type a property that I want to modify, like if I want to modify the
| | 03:46 | transparency of this object, I can type alpha, and that's the
same thing as opacity or transparency. And when it's selected,
| | 03:54 | so I can see that it's selected right here, if I just
| | 03:56 | press Enter or Return on my keyboard, Flash will write out the
rest that word for me, which is pretty convenient. So let's type a
| | 04:01 | space equals space. So now we're our saying the alpha or transparency
is equal to. Here's something really important to know. The alpha or
| | 04:09 | transparencies, if you're coming over from ActionScript 2, the
first thing you need to know is it's called alpha, and not _alpha.
| | 04:15 | The second thing is the property is not from 0
to 100, it's from 0 to 1. So I'm going to type .5
| | 04:23 | and then I'm going to type a semicolon and that ends the statement, kind
of like a period in a sentence. What I'm telling Flash is set the alpha of
| | 04:30 | rectangle1 to 50%, period or end sentence,
which is a semicolon in Flash.
| | 04:35 | Now let's minimize the Actions panel by just double-clicking
that Actions tab at the top left of the Actions panel,
| | 04:42 | and we'll just verify that rectangle1 is fully opaque,
| | 04:46 | which means it's not transparent at all. So
I'm going to press Cmd+Return or Ctrl+Enter on the PC,
| | 04:52 | to test the movie and then notice it's
a lot more transparent, it's 50% transparent.
| | 04:58 | So let's modify that a little bit more. So I'm going
to double-click on that Actions tab to come back up.
| | 05:04 | And then if you get this little menu that I have that says
Current selection cannot have actions applied to it, it's because
| | 05:09 | I don't have the right thing selected. So if I click
at the top of this and just drag it down a little bit,
| | 05:14 | and I just make sure to click on the Actions
keyframe, first keyframe of the actions layer,
| | 05:19 | then I get my code back and I can modify it.
| | 05:21 | If I want to make it really transparent,
I can give it an alpha of .15.
| | 05:26 | I'm going to move over this panel,
| | 05:29 | verify that it's fully opaque, test the movie with Cmd+Return
or Ctrl+Enter, and we see it's almost fully transparent.
| | 05:39 | So that's how to modify a property with ActionScript. You just
type an instance name and a dot and the property name. You set it
| | 05:45 | equal to some value.
| | 05:47 | Now I know what you're thinking right now, you might be thinking
okay, how on earth am I supposed to know that the alpha
| | 05:52 | property accepts a value between 0 and 1, so I have to
put a decimal point? How would you ever, ever know that?
| | 05:58 | Well Flash as a really cool code tool.
| | 06:01 | If you just select that alpha, see I'm selecting the
property name alpha, and then press F1 on your keyboard.
| | 06:07 | That will open up the Help menu,
| | 06:09 | and it will find that particular property
and tell you the values. So check this out.
| | 06:15 | Right here, alpha property
| | 06:17 | accepts a number, that's after this colon, I'm
going to explain the colon a little bit later on.
| | 06:22 | And then right here it tells you what it does. I'm going to select it so
you can see. It says indicates the alpha transparency value of the object
| | 06:27 | specified. Valid values are 0 (fully transparent) to 1 (fully opaque).
| | 06:32 | The default value is 1. So if you want to modify any property
or if you're curious about a property, you can type the
| | 06:37 | property name select it, press F1 to keyboard and Flash will
pop right up to it for you. And yes you could, in the Help menu
| | 06:44 | you could totally do a search, if you want to.
| | 06:47 | Only problem is, it takes a little bit longer to find it
that way, and I recommend doing the select and press F1 method
| | 06:53 | So that's how I can communicate to an object using ActionScript.
| | Collapse this transcript |
| Understanding variables| 00:00 | Now let's talk about variables. A variable is basically a
container that holds information. If you want to follow along,
| | 00:07 | this file's called Variables.swf and it's inside of the chapter 02
folder. On the left side of the screen we have our variable and
| | 00:14 | our variable is called userName, that's going to a be a box or a
container that holds data. The data is on the right. So basically
| | 00:20 | if you have a website that holds user names, every time a user
logs in, that userName variable is going to hold different data.
| | 00:27 | So if I click this button here,
| | 00:30 | at one point the userName would be
Todd, and if I click the button again,
| | 00:34 | at another point it could be Jimmy,
at another point it could be Susan.
| | 00:39 | So the main thing is that a variable is this container that
holds information. So now let's go into creating variables
| | 00:47 | with ActionScript.
| | Collapse this transcript |
| Setting variable data types| 00:00 | So now let's talk about setting variable datatypes. The first thing
we want to do is open up a new Flash file. So let's create a new one
| | 00:08 | from the Welcome screen.
| | 00:09 | And let's name layer 1 actions.
| | 00:13 | Click on the first frame of the actions layer
and press F9 on the PC or Option+F9 on the Mac
| | 00:19 | and open up the Actions panel. Now let's create that userName
variable that we were talking about before. So to create a variable
| | 00:25 | the first thing that you need to do is type the word var, that's
var, and then type a space. Var is a keyword in Flash and notice
| | 00:33 | that it turns blue when you type it.
| | 00:35 | This word says I'm going to create a variable. So after the space
then you type in your variable name. So var has to always be var,
| | 00:43 | your variable name can be what ever you want. Let's just say we're
creating the user name for a web site. So I'm going to type of user and
| | 00:49 | then Name with a capital N, and you're under the same
restrictions of spaces and special characters with variables as
| | 00:55 | you are with instance names and symbol names etc. Again no spaces,
no special characters. Best practice, start with a lowercase
| | 01:03 | letter and then each subsequent word
| | 01:05 | start with a capital letter, that way it's easy
to read. So userName and then type a space
| | 01:10 | and equals and then a space, and let's say our user name is
going to be a text value. That type of data is called a string.
| | 01:19 | A string can be any combination of numbers, spaces, special
characters, all at stuff. So when you're defining a string in Flash,
| | 01:26 | the string needs to be in quotes. So if the user name were to be
Todd, I would type open quote and then Todd close quotes, semicolon.
| | 01:34 | So userName = "Todd"; and that means it's a string of text.
| | 01:38 | It doesn't have to be Todd obviously. It could be anything you want.
I just made it up cause it's my name, first name I thought of.
| | 01:42 | But it needs to be in quotes because it's a string.
| | 01:45 | Now here is the setting the variable datatype that's very
important. We were defining variables the best practice and
| | 01:53 | very important thing that you can do is specify what type of
data is going to be held inside of that variable. Sometimes you'll
| | 02:01 | have a variable that holds numbers. Sometimes
you'll have a variable that holds text or whatever.
| | 02:06 | The way you specify what type of data a variable will hold, is after
the variable name, so I'm going to click right after userName, not a
| | 02:13 | space after it, just immediately after the e, put your cursor
right there, then type a colon and then another code
| | 02:20 | hinting menu pops up.
| | 02:21 | This time the code hinting menu is letting you assign
a datatype for your data that your variable's holding.
| | 02:28 | Because, like I said earlier, this datatype
is a string, I'm going to the word string.
| | 02:32 | Make sure you give it an upper case S. So uppercase S t r, Oh!
And it's already highlighted. I'm going to press Return or Enter
| | 02:40 | on my keyboard and Flash types out the rest for me. So we created
a userName that's a string and it's equal to Todd. I could
| | 02:48 | put any value I want in here. Sammy,
| | 02:51 | Bob, Jimmy, doesn't matter any kind of userName inside the quotes
and that will be acceptable. So why do you want to assign a
| | 02:57 | datatype to a variable? Basically it will help you later on with
your code, because sometimes you're going to put the wrong type
| | 03:03 | of data inside a variable, and you want Flash to tell you that s
o that you know that you're making a mistake in your code, and
| | 03:10 | it's not something else.
| | 03:11 | And so that is how you assign a datatype
to a variable and define a variable.
| | 03:17 | In the next movie we're going to use something called a
trace statement to check a value inside of a variable.
| | Collapse this transcript |
| Using trace statements| 00:00 | I mentioned in the last movie that you would set a variable
datatype so that you can check to make sure that your code's running
| | 00:06 | properly. Another way to make sure your code is running
properly is by using something called trace statements. A trace
| | 00:12 | statement is something that pops up in the Output window,
| | 00:15 | kind of like a message to yourself.
| | 00:17 | If you're working along in the working files, I'm in
the trace statements file and this is inside of the chapter 2
| | 00:22 | folder in the Exercise Files. I'm going to go to the first frame
of the actions layer and then open up the Actions panel by pressing
| | 00:28 | Option+F9 on the keyboard. Again that's just F9 on the PC.
| | 00:32 | And this is the same file that we worked on in the last exercise,
when we did the userName is a string equal to Sammy. If at any point
| | 00:38 | I want to check the value of this userName, after that semicolon I'm
going to press Return a few times to go down a few lines. And you
| | 00:45 | don't have to really go down that many lines,
I can just go to the second line and write this code.
| | 00:49 | Personally, I just like to space out my code a little bit so it's
easier for me to read. So on line four I'm going to type trace.
| | 00:55 | It's going to turn blue, because that's a keyword in Flash. Then an open
parentheses, and inside of the parentheses you write the value that you'd
| | 01:02 | like to trace. So I'm going to write user and then
Name with a capital N, just like I wrote it above.
| | 01:08 | It's very important to note the casing of my variable on line one.
| | 01:12 | If I gave it a capital U here and made it look like this, for
example, this would give me a different value. So you want to make
| | 01:19 | sure that your casing is all the same. This is totally case-sensitive.
| | 01:23 | Alright, so after userName I'm going to do a close parentheses and a
semicolon. And I'll press Cmd+Return and that'll test the movie
| | 01:30 | and then I get this message in the Output window
| | 01:33 | that says Sammy.
| | 01:34 | That might not seem like it's too important, but if you
can imagine if we have really complex code, thousands and
| | 01:40 | thousands of lines of code, and there's one line that's not
working properly, but Flash isn't giving you the problem
| | 01:46 | in the Output window or it's giving you a problem that you don't
understand, by using a trace statement you can check to see if
| | 01:51 | your code is working.
| | 01:54 | I can also put inside of the trace
statement, if I erase this userName.
| | 01:57 | Let's say I just want to check to see if my code's working properly.
So I'm going to put this trace statement inside of a block of code
| | 02:03 | to make sure it's running properly. So I put in
quotes: This code is running properly, close quotes.
| | 02:12 | And Cmd+Return or Ctrl+Enter and test the movie. This
code is running properly. Great, I'm glad this code is running
| | 02:18 | properly. It makes me happy.
| | 02:21 | So that is how you use a trace statement. It might not make a ton
of sense why you'd use it, but as we go on, you'll see when we
| | 02:27 | write lots and lots of lines of code, trace statements will
be very useful to us to check to see if it's running properly.
| | 02:33 | In the next movie, I'll explain how to make comments in your code.
| | Collapse this transcript |
| Using comments| 00:00 | Now let's talk about creating comments in your code. But first off,
what are comments? Comments are notes in your code. They can
| | 00:07 | be notes to yourself or notes to other coders who are looking
at your file and who may be confused about how you organized it.
| | 00:13 | You can also temporarily disable a block of code using
a comment as well. So let me show you how comments work.
| | 00:19 | So let's create a new Flash file from the Welcome screen.
| | 00:23 | Let's rename the first layer to actions
| | 00:27 | Click the first keyframe of the actions layer and go to Window,
Actions or press Option+F9 or just F9 on the PC to open up the
| | 00:34 | Actions panel. Now let's first talk about temporarily disabling a line
of code. So I'm going to type trace. Let's do a trace statement, so type
| | 00:41 | the word trace. all lower case, open parentheses, open quote
| | 00:45 | and trace something. You don't actually have to write something, you write
whatever you want in the quotes. Then make sure you close the quote.
| | 00:50 | Also notice that anything you put in quotes turns green.
That's to tell you that you're working with a string. So if you
| | 00:56 | ever want a use a string, it should be green every time. If
it's not green, you can change it in the Preferences or if you
| | 01:02 | don't like green for whatever reason, you can change that in the
Preferences as well, just look under the Preferences and find ActionScript.
| | 01:08 | Alright let's do the close parentheses and a semicolon, and I'll
press Cmd+Return or Ctrl+Enter on the PC to run the movie.
| | 01:14 | So we got something popping up in our Output window.
| | 01:17 | Wonderful.
| | 01:18 | Now let's say wanted to temporarily disable this line of code.
If I click right before the word trace and I press // notice
| | 01:25 | that it all turns gray. That has turned that line of code into a
comment. So if I want to make a comment that's one line I use //.
| | 01:33 | So I'm going to click right after the
semicolon and press Enter a few times.
| | 01:36 | I'm going to type // and I can make a note to my code. Let's
say have another person working on my project named Mitch. I can
| | 01:42 | type Hey Mitch, check this code out! It's great!
| | 01:53 | Something like that. Or I can say this part of the code does
this thing, or this part of the code does this thing. Or I can
| | 01:59 | make notes in my own code that organize it for me.
| | 02:02 | Let's say I want multiple lines of code
| | 02:06 | to comment, to be commented out.
| | 02:08 | So what I'm going to do is erase that line and go back to the trace
statement and I'll delete the // at the beginning of the trace statement
| | 02:16 | by selecting them and pressing Delete or Backspace on my keyboard.
Then I'm going to select this whole line of code just by
| | 02:21 | clicking and dragging. I'm going to press Cmd or Ctrl+C to copy
it. Click again after it, press Return or Enter. Go to the next line.
| | 02:28 | I'm going to paste the code using Ctrl or Cmd+V. If I
want to comment out multiple lines of code I can use something
| | 02:36 | called a multiline comment. Click right before the trace statement. I'm going to press Enter to push it down and press the up arrow to go up.
| | 02:42 | I'm going to type a / and then an asterix.
Notice that both of the lines of code turn gray.
| | 02:48 | If I click after the second trace statement and press Enter, I can
type * and then a / and that will close out that multiline comment.
| | 02:55 | So if I went down to another line and type a trace statement,
notice that it turns blue. So that is how to write comments.
| | 03:03 | Let me show you one more thing really quick. Now that you know
how to type them out, you actually don't have to type them out by
| | 03:09 | hand. You can actually select a line of code, and if I want it to be
a single line comment, there's a button up here in the coding toolbar
| | 03:16 | where you can select something to be a line comment.
So if I click this button, Apply line comment,
| | 03:21 | it comments out that line.
| | 03:22 | If I want to take away a comment, I could
just select code that's commented out,
| | 03:26 | then I click this button to remove comment. Pretty handy, huh?
| | 03:29 | If I select both of these lines then I can click apply block comment
| | 03:34 | and that'll apply a block comment.
Notice that the asterix and the / here
| | 03:38 | are not on separate lines, like how I put
them earlier. It does not matter.
| | 03:43 | I just like to do it because I feel more organized when my
comments are on separate lines, but your call there. Now again,
| | 03:49 | we can select and remove the comment by clicking
the button. And that is how to work with comments.
| | Collapse this transcript |
|
|
3. Using and Writing FunctionsUnderstanding functions| 00:00 | In this chapter I'm going to explain what functions are and how
to use them. If you'd like to follow along with this movie this
| | 00:07 | file is in the chapter 3 Working Files folder and it's called
Functions.swf. So feel free to open that if you want to
| | 00:13 | follow along.
| | 00:14 | A function is a reusable block of code. So let's say this is
a block of code right here, this big block in the middle
| | 00:23 | of the screen.
| | 00:24 | And I want to modify properties of my boarder,
| | 00:30 | which is right at the bottom right of the screen.
So I would drop the boarder inside of the function
| | 00:35 | to apply a function to the boarder.
| | 00:37 | I'm going to modify his rotation,
| | 00:42 | and then modify his movement.
| | 00:45 | Now if I click run function, he'll move and rotate.
| | 00:50 | So let's just click this reset button and try again. I'm going to
drag the boarder in there, cause we need to apply to the boarder.
| | 00:56 | And let's just say I want to only move him.
| | 00:59 | Run the function, moves, run the function, moves. Now let's say
if I want to only rotate the boarder. So I'm just going to toss
| | 01:06 | the rotate block inside of the block of code, and then run the
function, and that will just rotate the boarder and not move
| | 01:12 | the boarder.
| | 01:13 | So again a function is a block of code that we can use over
and over and over again. So let's learn how to write them in
| | 01:20 | the next movie.
| | Collapse this transcript |
| Using functions| 00:00 | Now I'm going to explain how to use
functions that are built into the Flash player.
| | 00:04 | If you want to follow along and I'm in
Using_Functions.fla in the chapter 3 folder.
| | 00:09 | Here, I have a very simple animation
with a motion guide. If I test the movie,
| | 00:14 | see how it works.
| | 00:16 | Now you're already familiar with functions if you've used Script
Assist at all or any form of ActionScript. You've probably used
| | 00:22 | stop actions to stop your movie.
| | 00:25 | Well stop is actually a function.
| | 00:28 | So let's write the stop function in our code.
| | 00:33 | I'll click the Insert layer button to create
a new layer and I'm going to call it actions.
| | 00:37 | The very last frame of the animation, I'm going to select it
and then press F7 on my keyboard to insert a blank keyframe.
| | 00:47 | If you'd like to insert the keyframe using the Window menu,
you go to Insert - Timeline and then select Blank Keyframe.
| | 00:57 | Select that frame, make sure it is
highlighted, it should be black.
| | 01:00 | And then open up the Actions panel by
pressing Option F9 on the Mac or F9 on the PC.
| | 01:05 | Inside of my Actions window, I'm just going to type stop();
| | 01:13 | Test the movie again and the animation plays once and stops.
| | 01:18 | Running this function is exactly the same as in
the last movie when we clicked the run function button.
| | 01:25 | The stop function just simply stops a movie from playing, and we're
running it by calling it here. We say the name of the function,
| | 01:32 | which is stop, and an open and close parentheses
and then a semicolon to end the statement.
| | 01:37 | Let's run one more function that you're
familiar with already and then we'll move on.
| | 01:41 | I'm going to select stop and delete it,
| | 01:44 | and I'm going to type goto, all lowercase,
And with a capital A, and then Stop with a capital S.
| | 01:51 | Notice that it turns blue. Then I'm going to type (2);
| | 01:57 | The reason I'm going to frame 2 and stopping is because
the boarder doesn't appear on the screen until frame 2, so
| | 02:06 | we'll just to see it loop once and
then he'll appear back on the screen.
| | 02:09 | Press Cmd+Return or Ctrl+Enter to test the movie.
| | 02:12 | Watch it play once and it ends at the beginning of the movie.
| | 02:16 | And so there's a little overview of how to use functions that you
already know. So in the next movie I'll explain how to write your
| | 02:23 | own custom functions.
| | Collapse this transcript |
| Writing custom functions| 00:00 | In this movie we'll write a custom function that will make
our snowboarder jump up into the air and turn a little bit.
| | 00:06 | If you'd like to follow along, this in the chapter 3
Exercise Folder and the file is called WritingFunctions.fla.
| | 00:14 | This is a very simple file. It has a movie clip called mcBoarder.
| | 00:19 | You can verify in the library that's the name
of the movie clip, and it's just a png image.
| | 00:25 | And I just drew some snow so he can have some turf to ride on.
Okay, let's write the code that will make this movie clip move.
| | 00:34 | So first I'm going to click on this boarder and just make sure that he
has an instance name, and there is an instance name and it is boarder_mc.
| | 00:42 | So if we want to communicate with ActionScript
| | 00:44 | to the snowboarder we're going to refer to him as boarder_mc.
| | 00:49 | I'm going to go up to the actions layer,
click the first keyframe of that layer.
| | 00:53 | I'm going to make sure it's locked.
| | 00:55 | Select that keyframe, press Option+F9 or F9
on the PC to open on the actions panel.
| | 01:01 | Now what we're going to do is
| | 01:03 | the same thing we did before when we changed properties of
an object except we're going to put it inside of a function.
| | 01:09 | In the next movie we'll explore how
to make this function more useful.
| | 01:14 | But for right now, let's just type the word function,
| | 01:16 | and then a space. And I'm going to call this function moveBoarder.
| | 01:22 | Defining a function is similar to defining a variable. Instead
of typing var and a space and the variable name, you type
| | 01:29 | function and a space and the function name.
| | 01:31 | So we're going to build our reusable
block of code here. So function moveBoarder().
| | 01:40 | And we need to put parentheses, always when we create function and
| | 01:44 | in the next movie I'll explain what you put inside
the parentheses. And then I'm going to type a colon and
| | 01:49 | and that's going to specify the return datatype.
| | 01:53 | I haven't yet explained the return datatype
and we'll cover that in a later movie.
| | 01:57 | But I'm going to type void for now, with a
lowercase V, that means there is no return datatype.
| | 02:03 | Press Enter or Return to go to the next line.
Open curly brace, next line, close curly brace.
| | 02:08 | up arrow, and then Enter or Return.
| | 02:12 | And inside of these curly braces is where we
write what happens in the moveBoarder function.
| | 02:17 | So all I'm going to do is adjust the boarder's position.
| | 02:21 | So I'm going to type boarder_mc,
that's our boarder instance name, dot y,
| | 02:30 | and type space equal space, and then type 50;
| | 02:34 | We're going to set the y-positioning of boarder_mc to 50. That's going
to be 50 pixels from the top of our Flash movie and not from the bottom.
| | 02:45 | Remember Flash counts pixels from the top
left, not the bottom left like in math class.
| | 02:51 | Now let's rotate our boarders. So I'm going to press Enter or
Return to go to the next line. And I'm going to type boarder_mc
| | 03:01 | .rotation space equal space 45, let's type a ;
| | 03:07 | And now if we were to test the movie right now, nothing would happen.
| | 03:10 | Just like I explained at the beginning of this chapter how we had to
drag elements inside of the function box and that didn't necessarily
| | 03:17 | run the function. We had to click the run function button. That's
what we're doing here. We're putting things inside of the function
| | 03:23 | block of code.
| | 03:24 | We have not ran the function yet. So we need
to do something else to run the function.
| | 03:29 | And that something else is like we did in last movie when we ran
go to and stop and we ran the stop function. So I'm going to
| | 03:35 | click right after this curly brace
on line 5 and I'm going to press
| | 03:39 | Enter or Return twice to go down 2 lines. You don't have to go down 2 lines, you can go down just one line, I just like to space out my code.
| | 03:46 | And then if we want to run this function, we need to type
and moveBoarder, which is the name of our function, ();
| | 03:51 | Notice how that looks exactly like stop.
| | 03:58 | Stop(); That actually runs the function.
| | 04:03 | So I'm going to close this Actions window.
| | 04:05 | Just take a note of where the
boarder is currently. Test the movie
| | 04:12 | and notice that it jumps to the top of the screen.
| | 04:15 | So if you move over the movie, you
can notice that he's also rotated.
| | 04:19 | Now that you know how to write a custom function,
let's learn how to make our functions more useful.
| | Collapse this transcript |
| Making a function modular| 00:00 | In this movie I'm going to explain how to make
functions modular. By the word modular I mean reusable.
| | 00:07 | In this swf file I'll demonstrate what that means to make a
function reusable. If you'd like to follow along, this is in the
| | 00:14 | chapter 03 folder of the Exercise Files and it's called ModularFunctions.swf.
| | 00:19 | In this example we have a function that's a
block of code that will rotate and move an object.
| | 00:24 | We don't put boarder and snow inside of that box
but rather I'm going to click and drag boarder
| | 00:31 | to the run function on section.
| | 00:34 | So the function will be run on boarder
| | 00:37 | and it'll take the boarder value and rotate and move it.
| | 00:42 | Now I'm going to click to run function on button.
| | 00:45 | The boarder rotates and moves.
| | 00:49 | I'll click the reset button and try it on the snow.
| | 00:52 | So click and drag the snow, set run function
on snow and watch the snow move and rotate.
| | 01:00 | Now I'm clicking the reset button.
| | 01:02 | So this function is now a lot more useful because I can
rotate and move anything I want. I just say run the function on
| | 01:10 | the boarder, on the snow, or whatever, and
it'll rotate and move that particular object.
| | 01:15 | So now let's go into Flash to
learn how to write the code for this.
| | 01:18 | So I'm going to close out the Flash player and go into Flash.
| | 01:23 | And this file is called Making_Modular.fla,
it's in the chapter 03 exercise folder.
| | 01:29 | What I'm going to do in this file is just
drag a few instances of mcBoarder from the library
| | 01:35 | onto the Stage. Make sure you have the art layer selected.
| | 01:40 | There's one there,
| | 01:42 | and then maybe one going down the slope.
| | 01:45 | Let's just rotate these slightly
| | 01:48 | so they look like they're actually on the slope.
| | 01:52 | There we go.
| | 01:55 | Nice.
| | 01:58 | And then I'll rotate this one as well. To rotate it
| | 02:01 | I press Q on my keyboard or you can select
the Free Transform tool in the toolbox.
| | 02:10 | And that looks good. So what I'm going to do is go to the Selection tool
or press V on my keyboard. I'm going to select the first boarder,
| | 02:19 | and I'll name him boarder1_mcm and I'll
name the other boarders boarder2_mc,
| | 02:28 | and then boarder3_mc.
| | 02:34 | And there we go.
| | 02:36 | Now let's open up our actions panel. I'm going to click on the first
keyframe of the actions layer and press Option+F9 my keyboard.
| | 02:43 | It's F9 on the PC.
| | 02:45 | And let's take a look at our moveBoarder function. So if I
wanted to run it now, I actually have to give a number instead of
| | 02:51 | boarder1_mc.y and rotation. So
I'm going to close the Actions window
| | 02:57 | and looking at all the boarders safely in the snow.
| | 03:01 | Test the movie by pressing Cmd+Return
or Ctrl+Enter on your keyboard
| | 03:06 | and the boarder is happily flying through the air.
| | 03:08 | Great.
| | 03:09 | If I wanted to run this function on the other boarders,
| | 03:13 | I'm going to click on that actions
keyframe and open up the Actions panel.
| | 03:16 | I could change boarder1 to boarder2 or boarder3,
| | 03:20 | but that really isn't the most effective way to do it.
| | 03:23 | What I'm going to do is when I run the
function or when I call the function, same thing,
| | 03:28 | move boarder in line 7,
| | 03:30 | I'm going to send in the boarder that I want to move to
the function. Remember we watched that movie a minute ago?
| | 03:36 | We said run function on. That's what we're going to do here. We're going
to run the function on whatever we want. What I'm going to do is click in
| | 03:43 | between the parentheses on line 7,
| | 03:45 | and I'm going to type boarder1_mc. So when
I run the function, I'm going to send it
| | 03:54 | to my function and then it's going
to run on whatever boarder I send in.
| | 03:58 | I need to do a few more things to set that up.
| | 04:01 | If I'm going to send it from somewhere or if I'm going to send
it when I run the function, the function needs to receive that
| | 04:07 | information or that data.
| | 04:09 | The type of data is a movie clip, and that's very important.
So I'm going to click in between the parentheses on line 1,
| | 04:16 | when we define our function.
| | 04:17 | And I'm going to type boarder.
| | 04:20 | I'm not going to type 1_mc, I'm just going to type boarder.
| | 04:24 | This is going to be a generic name to represent
whatever boarder we want to move. Then type a colon
| | 04:31 | and we're going to set the datatype
that this function will receive.
| | 04:35 | So I'm going to type movie clip with a capital M.
| | 04:38 | When it's selected in the code hinting window,
I'm going to press Enter or Return on my keyboard.
| | 04:42 | So we run the function in line 7, boarder1_mc. We send
a boarder1 to the function. The function receives the movie
| | 04:51 | clip and inside of the function it will be known as boarder.
| | 04:55 | So it doesn't matter what we send into the function,
we're going to call it boarder inside of the function.
| | 05:01 | When I say inside of the function, I mean between the
curly braces or within the curly braces of the function.
| | 05:07 | And let's just erase the one_MC
| | 05:09 | So it should just say boarder.y = 50, and boarder
.rotation = 45; The name boarder that we're using, and we
| | 05:17 | pass it in here as boarder movie clip, this is sort
of like a variable that's known to this function.
| | 05:25 | So we're sort of defining a variable called boarder,
that's a movie clip and then we can use it inside of here.
| | 05:31 | When we say an equal to value, we set what the
boarder is equal to when we send it like on line 7.
| | 05:39 | So in our function, we have boarder the
datatype is a movie clip equal to, in this case,
| | 05:46 | boarder1, as specified in line 7.
| | 05:49 | So again, boarder is a variable that
represents whatever we send in to the function.
| | 05:56 | So we're setting the y to 50 and the rotation to 45.
| | 05:59 | Let's just close the Actions panel and verify
that all the boarders are safely on the snow
| | 06:04 | Test the movie
| | 06:06 | and see the boarder flying through the air.
| | 06:09 | Now this function is reusable. Let me go back to the Actions panel
by selecting the actions keyframe and pressing Option+F9 on my
| | 06:16 | keyboard.
| | 06:17 | Now if I wanted to run this function on all
of the boarders, I could select the code on line 7
| | 06:23 | press Cmd+C or Ctrl+C on my keyboard,
| | 06:26 | after the ; press Enter, paste the code by
pressing Ctrl or Cmd+V on your keyword.
| | 06:33 | Then press Enter and paste the code again.
| | 06:36 | Change boarder1_mc to boarder2_mc, and then boarder3_mc.
So this function will run on all of the boarders,
| | 06:45 | but first it'll run on boarder1.
| | 06:48 | That boarder1_mc will be sent to the function as boarder.
| | 06:54 | Set the y to 50 and the rotation to 45. Then it will run as boarder2.
| | 06:59 | Set boarder2's rotation to 45 and y to 50, and the same for boarder3.
| | 07:04 | I'm going to press Cmd+Return to test the movie.
| | 07:07 | And they're all the top of the screen. Nice. Well, what if I
wanted them to rotate and move based on their current position?
| | 07:15 | So instead of going up to y of 50, and
a rotation of 45, what if I wanted them to move
| | 07:23 | a hundred pixels up from where they are currently, wherever that
is and rotate 45 degrees from where the current rotation is?
| | 07:30 | Let's do that.
| | 07:32 | So what I need to do to do that is go inside of the function.
When I say inside of the function, again I mean
| | 07:37 | within the curly braces of the function.
| | 07:40 | And instead of boarder.y = 50 I'm going to say boarder.y
| | 07:44 | minus equals 50. So put a minus sign right before the equal
sign, and that will subtract 50 from its current y value.
| | 07:54 | And again subtracting is not going to make it go down,
it will make it go up. The zero position of y is
| | 08:03 | at the top of the screen, not at the bottom of the screen.
So we want to subtract to go up and add to go down.
| | 08:09 | So let's add 150 so it will be a little bit more obvious,
| | 08:12 | and for the rotation, I'm going to click right before
the equal sign and I'm going to type a plus.
| | 08:18 | So it should say boarder.rotation += 45;
| | 08:25 | That will add 45 to the current rotation value of the boarder.
| | 08:29 | I will press Cmd+Return to test the movie.
| | 08:32 | Notice they're all moved up to different heights. They moved
up 150 pixels from where they were presently, or currently at
| | 08:38 | the bottom of the screen before we ran the movie.
| | 08:40 | When we run the function they move
up 150 pixels and rotate 45 degrees.
| | 08:47 | And that's how to make a function reusable.
If I wanted to make it reusable more,
| | 08:52 | I could even pass in different values when I run the
function. Different values for the y positioning and for
| | 09:01 | the rotation.
| | 09:02 | And so let's do that. I'm going to click
after the boarder:MovieClip on line 1,
| | 09:08 | and then type a comma.
| | 09:10 | If I want my function to accept
multiple variables or multiple properties,
| | 09:17 | or these are officially called parameters,
| | 09:19 | I separate them with a comma. After boarder:MovieClip
type a comma then a space and then type movement,
| | 09:27 | and this will be a variable representing the movement amount,
| | 09:30 | type a colon and then type Number with a capital N,
that's just the datatype that it's going to be accepting,
| | 09:36 | type a comma and then a space, and then we're going to accept the
rotation amount. I'm just going to create a variable here called
| | 09:43 | rotation, capital Amt, then type a colon and
then type the Number with the capital N.
| | 09:51 | Now the function will not only receive the boarder, it will
also send in the movement and the rotation amount so they can
| | 09:57 | change whenever we run the function.
| | 09:59 | So I'm going to replace 150 after boarder.y -= with movement.
| | 10:07 | So it'll be whatever we send in. We haven't sent
in anything yet. We'll do that in just a minute.
| | 10:11 | Now we'll replace the rotation += 45.
So select the 45 with rotation capital Amt.
| | 10:21 | So now what we need to do is send in a movement amount
and a rotation amount every time we run the function.
| | 10:27 | So I'm going to scroll back in my ActionScript code.
| | 10:30 | And when I'm running the function in lines 7, 8,
and 9, after boarder1_mc, I just type a comma
| | 10:37 | and it's just like we specified above, we separate the
values by commas and datatype in a number to represent the
| | 10:42 | movement amount. So I can type in 150 for this one and then a
comma then the rotation amount. I'll just type and 45 for this one.
| | 10:49 | And now when we run it on 8 and 9, I need to do the same thing
or else the function will not work properly. Because when this
| | 10:54 | function runs, it's going to be looking to accept
| | 10:58 | a movie clip, a number and another number separated
by commas. So we need to do that every time now.
| | 11:03 | So I'm going to type a comma and then pick a number
like 250, and then another number 90 degrees, rotate it.
| | 11:10 | Right after boarder3 inside the moveBoarder function on line 9
type a comma, and then we'll move this 50 pixels type a comma and
| | 11:19 | we'll rotate it 180 degrees.
| | 11:22 | Press Cmd+Return or Ctrl+Enter to test the movie
| | 11:25 | and notice they all move differently.
| | 11:28 | So now our function is completely reusable.
| | 11:32 | I can apply it on any object I want and
| | 11:35 | it can do a different thing based on the
values that I put in when I run the function.
| | 11:39 | So that is how to make a function modular. In the next movie I'll
explain how to make a function give back a value after it runs.
| | Collapse this transcript |
| Making a function return a value| 00:00 | In this movie I'll explain how to make a function return a value.
If you'd like to follow along, I'm in Returns.fla that
| | 00:07 | can be found in the chapter 03 folder of the Exercise Files.
| | 00:12 | Before I explain what it means to return a value,
let's walk through this file and just check it out.
| | 00:17 | I have some snow, one snowboarder in the
foreground, and one in the background.
| | 00:22 | I'm going to the Selection tool, or you can press V on you
keyboard and let's just check their instance names: boarder1_mc.
| | 00:28 | and then boarder2_mc.
| | 00:32 | I'm going to click on the actions keyframe
of the actions layer to open up the Actions panel.
| | 00:38 | I have a really simple function called
moveBoarder and it's going to make boarder1's
| | 00:43 | y subtract by 150, so it'll make it go up
150 pixels and then the .scaleX property
| | 00:50 | scales an object horizontally and the
scaleY property scales an object vertically.
| | 00:57 | And the value of 2 that I'm giving here
| | 01:00 | and here will make it twice as wide and twice as high.
| | 01:05 | So if I close the Actions panel and I test the movie,
| | 01:08 | we can see that the boarder is a lot bigger.
| | 01:12 | But what if, after this function runs, I want to make the height
of this boarder the same as the height of the first boarder?
| | 01:21 | But I don't want to run the function on the
first boarder, I just want to make his height the same.
| | 01:26 | Let me show you how to do that by
making the function return a value.
| | 01:29 | Let's open up the Actions panel again.
| | 01:32 | Now I'm going to talk about what this colon
void means. So function moveBoarder:void.
| | 01:38 | The colon specifies the datatype that's
going to be returned when the function runs.
| | 01:43 | So basically a function can run and give me back nothing or
it can give me back some type of data. Let me show you how
| | 01:51 | that works, because it's a little bit
easier to demonstrate than to explain.
| | 01:55 | So let's replace
| | 01:56 | the word void and then I'm going to type the datatype that
I want to return. I'm going to type Number with a capital N.
| | 02:03 | So when this function runs, it's going to give me back a number.
| | 02:07 | After line 5, where we set the scale y of boarder1_mc, I'm going
to press Enter or Return on my keyboard and then I'm going to type
| | 02:15 | the word return.
| | 02:17 | Notice that it turns blue when you type it. Then type a space
and then we're going to type the value that we want to return.
| | 02:25 | And again we'll see this in action in about
two seconds and you'll see what a return does.
| | 02:29 | So let's return boarder1_mc.y;
| | 02:40 | I'll test the movie again.
| | 02:42 | So notice that nothing happens different. So our
function returns a number but so far this does nothing.
| | 02:49 | Now what I'm going to do is click on line 9
right before the moveBoarder function and type trace.
| | 02:56 | And let's wrap moveBoarder, open and
close parentheses, inside of parentheses.
| | 03:01 | Just make sure you have two close parentheses here. You need to have one
to close out the moveBoarder function and one to close out the trace statement.
| | 03:09 | Now test the movie,
| | 03:12 | and we get the boarder's new y position, which is 160.05.
| | 03:20 | Now let's actually do something with
this number. So I'm going to take
| | 03:25 | this trace statement and remove it. So I'm
going to take away that close parenthesis
| | 03:28 | then the trace and the parentheses, so we just have moveBoarder.
| | 03:33 | Now we can set the y positioning or I can do anything I want
| | 03:39 | with this moveBoarder, cause when this runs it's going to be equal
to a number. So moveBoarder here it's not only going to run this
| | 03:46 | function, it's equal to whatever the new positioning of the
| | 03:51 | y is of boarder1_mc. So if I'd like to set the
y positioning the same for boarder2_mc, then
| | 03:58 | right before moveBoarder, I'm going to type
| | 04:02 | boarder2_mc.y =
| | 04:11 | So boarder2_mc.y equals moveBoarder();
| | 04:16 | So that will run the moveBoarder function, that's this whole block.
| | 04:21 | At the bottom or the last line that block
will return the y positioning of boarder1_mc.
| | 04:31 | It will kick it back out as the datatype number,
| | 04:35 | and that will replace this function right here.
| | 04:40 | So a function can do something and give
you something as well. So in this case,
| | 04:46 | moveBoarder open and close parentheses is going to give
us the y positioning of boarder1 and that'll make the
| | 04:52 | boarder2 y positioning the same as the boarder1.
| | 04:57 | So I'm going to close the Actions panel. Let's take a look at it now.
| | 05:01 | Press Cmd+Return or Ctrl+Enter to test the movie.
| | 05:05 | And it looks like I spelled boarder wrong again.
| | 05:10 | Good times. Okay. Let's test the movie.
| | 05:15 | And there we go.
| | 05:17 | The y positioning is in the center.
| | 05:19 | And so we see that these objects are aligned in the center.
| | 05:23 | So that is how to make a function return a value. And
returning a value just means when I run the function it's going
| | 05:30 | give me back some type of data. So in
this case moveBoarder is equal to a number,
| | 05:39 | and that's specified right here after the colon, and then you
also need to specify the word return, and then you can have some
| | 05:46 | sort of value. So instead of boarder1_mc.y I could
type any number I want and it'll give me a similar result.
| | 05:53 | And that is how you make a function return a value.
| | Collapse this transcript |
|
|
4. Responding to EventsUnderstanding event types| 00:00 | In this movie I'll explain what events are.
| | 00:03 | If you'd like to follow along, you can open
up Understanding_Events in the chapter 04 folder.
| | 00:09 | So let's take a look at this example here. On the left
side we have an event and that would be a radio station
| | 00:14 | broadcasting a signal.
| | 00:17 | Now when a radio station broadcasts a signal
| | 00:19 | not every radio automatically hears that signal.
| | 00:24 | You have to tune in your radio to a particular station to
listen for what that station is broadcasting. That's exactly
| | 00:30 | the same as an event in Flash. An event in Flash is something
that happens, whether the user clicks a button or a file
| | 00:37 | finishes downloading etc. etc. etc. We're going
to cover all kinds of events in this chapter.
| | 00:43 | But events are basically things that happen.
| | 00:47 | On the right side of the screen we have a
listener, and that would be our radio.
| | 00:52 | Until we tell our radio to listen, or to tune in to a
particular station, we do not hear what that station is
| | 00:59 | broadcasting.
| | 01:00 | So when I click the listen button,
| | 01:04 | the radio then hears what is being broadcast
and can do something, can project it out.
| | 01:11 | So we have two things here: events are things that happen and
listeners are things that listen for events that are happening.
| | 01:21 | Now that you understand what events and listeners are,
| | 01:23 | let's get some practice writing them in the next movie.
| | Collapse this transcript |
| Using a listener to catch an event| 00:00 | As I explained in the last movie, listeners are like a radio.
| | 00:04 | They listen for certain things to happen. So if I want something
to respond to a mouse click then I need to have it listen
| | 00:11 | for a mouse click.
| | 00:13 | In this movie, what we're going to do
is add an event listener to our boarder.
| | 00:18 | It has the instance name of boarder_mc.
| | 00:22 | I going to go up to the actions frame.
| | 00:24 | And by the way, if you're following along, I'm in Listeners.fla
which can be found in the chapter 04 exercise folder.
| | 00:32 | Let's select the first keyframe of the
actions layer and open up the Actions panel.
| | 00:36 | In order to add an event listener, I need to type first
| | 00:42 | the object that's going to be listening for the event. Now if
I want to click on the boarder and have him do something, then
| | 00:50 | he's going to be listening for the event.
So I'm going to type boarder_mc and then a dot.
| | 00:58 | And now what we're going to do here is basically attach an event
| | 01:02 | to the boarder. Now I'm going to
type add all lowercase, capital E.
| | 01:08 | That'll be for addEventListener and L is capitalized as well. If
it's highlighted in the code entry area, you can just press Enter
| | 01:15 | on your keyboard and that will write out addEventListener and create
an open parentheses for you. If you look in the code hinting area,
| | 01:22 | Flash will tell you what
| | 01:24 | it expects you to type in. So now the first going to type in when
we have an addEventListener and open parentheses is the type
| | 01:32 | of event that's being listened for. A mouse click
| | 01:36 | is called an mouse event so that's the general type
of event. So I'm going to type Mouse with a capital M
| | 01:42 | then Event with a capital E, no spaces there.
| | 01:47 | It should turn blue.
| | 01:48 | And then type a dot, and then you
should get code hinting that pops up.
| | 01:53 | And now we're telling Flash what mouse event
| | 01:56 | we're listening for. So I'm going to type a capital C and then click
should be highlighted and I can just press Enter or Return on my keyboard.
| | 02:03 | So this is how we say we're looking for a mouse click
| | 02:07 | MouseEvent is the event category
| | 02:12 | and then when I type a dot, then it's a specific event
| | 02:16 | inside of that category. And those specific events have capital
letters, all caps. So our boarder is listening for a CLICK and then
| | 02:24 | type a comma and then a space and then after that
| | 02:28 | what we're going to do is specify a function that's going to run
| | 02:33 | when you click on the boarder.
| | 02:38 | I'm going to call my function on,
both lowercase and then Click, with a capital C.
| | 02:45 | Then I'm going to type a close parentheses
and a semicolon to end the statement.
| | 02:49 | And so that is how you add an event listener to an object.
You type the object name.addEventListener, then you specify
| | 02:59 | the event type and then a dot,
| | 03:01 | the name of the event, it's all uppercase letters, then a comma,
then the function that runs when the event happens. In the
| | 03:08 | next movie we'll write the function that
will execute when you click on the boarder.
| | Collapse this transcript |
| Writing event handlers| 00:00 | In this movie we're going to write something called an event
handler that will respond to our click event. An the event
| | 00:06 | handler is a function that responds to an event. So instead of being
triggered when you tell it to be triggered by using open and close parentheses,
| | 00:14 | like we did before, it's triggered when an event happens. If you'd
like to follow along, I'm in Handlers.fla in the chapter 04 folder.
| | 00:23 | So on the Stage, we have boarder_mc.
| | 00:26 | Then let's go to the actions layer and open up the Actions panel.
| | 00:32 | This is the code that we wrote in the last movie.
| | 00:36 | We added an event listener,
| | 00:38 | so we told boarder_mc to listen for a mouse click
| | 00:45 | and then it's going to run a function called onClick. So
all we need to do now is write a function called onClick.
| | 00:51 | So after the semicolon, I'm going to press Enter a
few times to go down a few lines and I'm going to type
| | 00:56 | function space onClick with a capital C, open parentheses.
| | 01:02 | Now when this function runs, or any kind
of event function runs, it receives an
| | 01:10 | event. So it doesn't just run if I put a close parentheses,
it wouldn't work properly. When an event handler runs it receives
| | 01:19 | this MouseEvent.CLICK, or rather just the mouse event.
| | 01:25 | After the open parentheses, I'm going to type the word event. That's what
we're going to use inside of the function. It's going to be the variable
| | 01:32 | that represents the event that happened. Then type a colon,
| | 01:36 | then type Mouse with a capital M,
| | 01:39 | then type Event with a capital E, no spaces here.
| | 01:43 | Close parentheses, colon, void with a lowercase v.
| | 01:46 | Let me just explain what we've written so far.
| | 01:48 | When you click on boarder_mc, this click
function runs, this onClick function runs and
| | 01:56 | the mouse event, the click is passed into that function.
| | 02:01 | And it's not going to return anything so we have :void.
After void, I'm going to press Enter, open curly brace
| | 02:06 | Enter again, close curly brace, up arrow and then Enter. Inside of these
curly braces I'm going to write what happens when you click on the boarder.
| | 02:16 | I'm going to write trace ("click!!!!!!!!");
| | 02:29 | You could put anything you want in this trace statement. I
just want to check to make sure that this click is functioning
| | 02:34 | properly.
| | 02:36 | So all that should happen when I test the movie is when I
click on the boarder I should get a message in the Output window.
| | 02:43 | And it says click.
| | 02:45 | Click a whole bunch of times, look at the Output window,
| | 02:48 | it runs every time you click the button.
| | 02:53 | Now if you're wondering why you're not seeing
a hand cursor when you roll over the boarder.
| | 02:57 | Let's fix that right now.
| | 02:59 | Let's go back into our actions by selecting
the keyframe of the actions layer
| | 03:03 | opening the Actions panel.
| | 03:06 | After the curly braces of the onClick event handler, and remember
event handler just a fancy name for a function that reacts to an
| | 03:14 | event, I'm going to the press Enter a few times to go
down a few lines and then I'm going to type boarder_mc
| | 03:22 | .buttonMode, capital M = true. All button mode does is says
| | 03:32 | use the hand cursor if it's listening for
some sort of mouse event. Test the movie now.
| | 03:38 | Roll over the boarder and we get that cool hand cursor
| | 03:41 | and we're still getting a message in the Output window.
| | 03:44 | Since we no longer need that trace statement,
I'm going to click right before the word trace,
| | 03:49 | back in my Actions panel and type two //. You could also select it
| | 03:55 | and then click the Insert single line comment button.
| | 03:59 | After the semicolon of the trace statement, I'm going to press Enter,
| | 04:02 | and then I'm going to type
| | 04:04 | boarder_mc.y -= 15;
| | 04:16 | What this line will do, it will subtract
15 from whatever current y property
| | 04:21 | is on the boarder_mc which will move it up 15 pixels every time.
| | 04:27 | Press Enter after the;
| | 04:30 | And then type boarder_mc.rotation += 45;
| | 04:42 | This will increment the rotation by 45 every time we click
the button. So every time we click on the boarder he'll
| | 04:50 | move up to 15 pixels and rotate 45 degrees. Now I'll press
Cmd+Return or Ctrl+Enter on the PC to test the movie.
| | 04:58 | Click on the boarder and watch him fly.
| | 05:06 | Closing out that movie, let's go back to the code.
| | 05:09 | There's one more thing I'd like to show you
that we can do when we're using an event handler.
| | 05:14 | When you click on the boarder, click on any object that has an event
listener. The information that's passed into the event handler holds what
| | 05:22 | object was clicked. Instead of boarder_mc and
its event handler I can tell it something else.
| | 05:28 | So let's select it and let me show you how
that works. I'm going to select boarder_mc.
| | 05:34 | And I'm going to replace that with event, all
lower case, just like I wrote it in the onClick
| | 05:41 | area where it accepts a mouse event.
| | 05:44 | Then I'm going to type a dot, then I'm going to type target
| | 05:49 | That means the target movie clip, or the target object
that was clicked that initiated this mouse event.
| | 05:57 | Let's replace the lower boarder_mc with event.target as well.
| | 06:05 | So now if I ever want to apply this to another object,
it'll just increment the rotation and y properties as well.
| | 06:12 | So I can apply a listener to boarder2_mc or
boarder3 if I had those on my timeline, and
| | 06:18 | the same thing would happen. This actually makes an event handler
a lot more recyclable if we use event.target instead of the
| | 06:25 | object name that we're clicking. So
now I'll test the movie by Cmd+Return
| | 06:30 | and the same thing happens.
| | 06:34 | Let's close out that player window. So that is how to write an
event handler and you again an event handler simply a function
| | 06:40 | that executes when an event happens. Now that you
understand how to write event handlers, in the next movie
| | 06:48 | I'll explain that how to use a few more
different events and we'll start with mouse events.
| | Collapse this transcript |
| Responding to mouse events| 00:00 | In this movie I'll explain the various
mouse events and how to respond to them.
| | 00:04 | If you'd like to follow along, I'm in the MouseEvents
file and that's inside the chapter 04 folder
| | 00:10 | with all the other exercise files.
| | 00:12 | Let's click on the first keyframe of our
actions layer and open up the Actions panel.
| | 00:16 | Here we have the code that we wrote in the
last movie that has an event handler, right here.
| | 00:23 | We added an event listeners to boarder_mc,
| | 00:26 | and we set the button mode to true so the hand
cursor will show when you roll over the boarder.
| | 00:30 | Let's just add a simple rollover and rollout effect to the
boarder. So, what I'm going to do is after the semicolon on line 1
| | 00:38 | I'm going to press Enter and I'm going
to type boarder_mc.addEventListener.
| | 00:46 | Make sure the E of Event and the
L of Listener are capitalized.
| | 00:50 | And then I'll type MouseEvent with a capital E, dot capital R
| | 00:56 | then I'll press down on my keyboard to
go to ROLL_OVER in the code hinting area.
| | 01:02 | And I'll just double-click that.
Then I'll type a comma and a space.
| | 01:08 | After the comma we specify the function
that runs when we rollover with our mouse.
| | 01:13 |
I'm going to type boarderOver with a
capital O, close parentheses and a semicolon.
| | 01:22 | Press Enter a few times to go down a few lines and now
we'll write the event handler for the rollover event.
| | 01:28 | And this is going to be identical to
our onClick, so I'm just going to copy that.
| | 01:34 | Let's select all of the onClick
event handler. So from all the way at
| | 01:38 | the bottom curly brace, all the
way up to the function at the top.
| | 01:43 | Right click it or Ctrl+Click on the Mac, select Copy.
| | 01:49 | Click on a blank line. Right click and select Paste.
| | 01:53 | Now I'm just going to change the event
handler name. So instead of onClick, I will call this
| | 01:59 | boarderOver with a capital O and it's
still going to receive an event that is
| | 02:05 | a mouse event type.
| | 02:09 | So now let's just erase this code in the middle
| | 02:11 | Gonna gut it.
| | 02:14 | And let's just say event.target. And that's going to
be the target that we roll over, so it'll be boarder_mc
| | 02:25 | event.target.alpha -= .5;
| | 02:40 | So when you roll over the alpha will go down 50%.
| | 02:45 | Now if test the movie, roll over the boarder.
| | 02:50 | Roll out, nothing happens. Roll over again and
| | 02:54 | alpha is 0, so
| | 02:57 | let's just say alpha equals .5 instead of equals minus .5.
| | 03:02 | Now let's just create a roll out event so that
when we roll back out the alpha goes back to normal.
| | 03:10 | So I'm going to select line 2.
| | 03:13 | Press Cmd+C or Ctrl+C on the PC to copy that line
of code. After the semicolon, I'll go to the next line,
| | 03:20 | and then paste the code by pressing Cmd or Ctrl+V.
| | 03:23 | All we need to change here is where it says MouseEvent.ROLL_OVER,
change it to ROLL_OUT, just make sure it's all capitalized.
| | 03:31 | Just like that.
| | 03:32 | It should be blue when you're done typing it.
We'll change the function name to boarderOut
| | 03:39 | and then we'll copy the boarderOver function from
the word function all the way to the close curly brace.
| | 03:47 | Press Ctrl or Cmd+C to copy.
| | 03:49 | Go down a few lines and paste the code using Ctrl or Cmd+V.
| | 03:53 | We'll change the function name to boarderOut
| | 03:57 | and inside of the function in or inside of the curly
braces we'll set the value of alpha to 1.
| | 04:05 | Test the movie. Check out the animation. Roll over the
boarder, turns transparent. Rollout, goes back to normal.
| | 04:17 | And the click event still works.
| | 04:22 | And there we have it. We can
respond to a roll over and a rollout.
| | 04:27 | And that's how to capture and
react to different mouse events.
| | Collapse this transcript |
| Responding to keyboard events| 00:02 | In this movie I'm going to explain how to respond and capture
events from the keyboard, in other words when you press a
| | 00:08 | button on keyboard. If you want to follow along, the file is called
KeyboardEvents.fla and it's inside of the chapter 04 folder.
| | 00:14 | This movie is set up similar to the mouse events movie if you
watched that one. We have boarder_mc and he's just on the snow.
| | 00:20 | Let's click on the first keyframe of the
actions layer and then open up the Actions panel.
| | 00:26 | Keyboard events work a little bit differently than mouse events.
| | 00:29 | With a mouse event we apply the listener directly on the
object. With the keyboard event you want to not apply to the
| | 00:37 | object but apply it to the Stage.
| | 00:40 | Why do you want to apply to the Stage and not the object itself?
If you apply to the object itself you'll first have to select the
| | 00:47 | object before it can respond to any keyboard events. If you put it
on the Stage, the whole Stage is automatically active when you're
| | 00:54 | watching the Flash movie, so you can just type in
your keyboard events away and the code will run.
| | 01:00 | So let's first type the word Stage, all lowercase
.addEvent, capital E and then Listener with a capital L.
| | 01:12 | Open parentheses and then instead of MouseEvent,
I'm them going to type KeyboardEvent
| | 01:18 | with a capital K and then a capital E for Event.
| | 01:22 | Then a dot, then a capital K for KEY_DOWN. That's
going to be all capitals, just like the MouseEvent
| | 01:32 | and MOUSE_DOWN, it was all capitalized, same way. Then a comma
and a space and then we're going to specify what happens we press
| | 01:39 | key down.
| | 01:41 | I'm going to type a function called
jump, close parentheses and a semicolon.
| | 01:45 | So now we need to create a function called jump or an
event handler called jump that'll execute when a key is
| | 01:54 | pressed down.
| | 01:56 | So I'll press Enter twice to go down a few lines.
| | 01:59 | Type function space jump (
| | 02:06 | this is going to receive an event
| | 02:09 | and the datatype of the event is a KeyboardEvent,
| | 02:15 | just like we spelled it above with a capital K and capital E.
Close parentheses, colon, void with a lowercase V. Next line {
| | 02:25 | Enter, } up arrow, Enter. Now we'll type
what happens when the key is pressed down.
| | 02:30 | I'm going to type boarder_mc.y -= 50;
| | 02:43 | So let's test the movie and see what happens.
| | 02:49 | I'm going to press the Spacebar
| | 02:52 | and as I hold it down, it floats up
in the air. Let's close the movie.
| | 02:56 | And let's make something happen when we release the key. So
I'm going to copy this Stage add event listener line, so it's
| | 03:02 | line 1. Select it, press Ctrl or Cmd+C on your keyboard.
| | 03:07 | After the semicolon and press Return or Enter.
| | 03:10 | Paste the code with Ctrl or Cmd+V
| | 03:13 | Change the event to KeyboardEvent.KEY_UP
| | 03:19 | Verify that it's blue.
| | 03:21 | Change the word jump to land.
| | 03:24 | And then let's just copy the jump function.
| | 03:27 | Select it all the way from the word
function down to the close curly brace.
| | 03:31 | Right-click the block, select copy.
| | 03:35 | After the close curly brace, press Enter
or Return and right-click and select paste.
| | 03:44 | Change the function name to land and then
where we said boarder_mc.y -= 50; we'll say plus.
| | 03:54 | So it'll go up when the key is down. It'll go down when the key is released.
| | 04:02 | Close the Actions panel. Test the movie.
| | 04:05 | Press and release the Spacebar.
| | 04:08 | This will also work when you press a
few other keys like Shift or Command and Control.
| | 04:14 | So when the key is down the snowboarder will jump.
| | 04:18 | When the key is released, he'll come back down.
| | 04:22 | Now let's just make sure that we can
capture the key that's being pressed.
| | 04:29 | So I'm going to go back to my actions
| | 04:32 | in my jump event handler, I'm going to
press Enter after the open curly brace
| | 04:39 | and then type trace(event
| | 04:46 | Now one of the properties of the keyboard event is something
called keycode, and that is a number that represents the
| | 04:53 | key that was pressed. So I'm going to type event
.keyCode, all lowercase and then Code with a capital C
| | 05:03 | and then a close parentheses and a semicolon.
| | 05:06 | And now let's test the movie.
| | 05:08 | Press the Shift key and you get a different code. You can press
Control and you get a different code. So that says we can detect
| | 05:16 | what key is pressed. Now the problem here is we can't say only
jump if you press Space and go down if you press a different key,
| | 05:25 | because we don't know how to use something called Conditional
statements. That's something we're going to cover in Chapter 6.
| | 05:31 | But for right now,
| | 05:32 | we can react to the keyboard events whether the key is
being pressed down or released, and we can capture what
| | 05:39 | key has been pressed. So that's a
look at how to use keyboard events.
| | Collapse this transcript |
| Creating a link to a website| 00:00 | Now I'm going to explain how to create a link to a web site.
| | 00:04 | If you want to follow along in the working
files, I'm in Links.fla in the chapter 04 folder.
| | 00:09 | This is a very simple fla file. It just has a movie clip that
says click me on it and it's going to be a link to a web site.
| | 00:16 | The first thing I'm going to do is lock the actions layer, then I'm
going to select the first keyframe of the actions layer and open up the
| | 00:22 | Actions panel.
| | 00:24 | First let's set up the event listener for our button.
| | 00:28 | Let's verify that the instance name of our button is button_mc.
| | 00:34 | Go back to the Actions panel and you can type button_mc
.addEvent with a capital E, Listener with a capital L,
| | 00:45 | open parentheses, capital M for Mouse,
capital E for Event.Click with a capital C,
| | 00:55 | comma space onClick with a capital C, close parentheses, semicolon.
| | 01:02 | Press Enter a few times to go down a
few lines. Let's create the onClick function.
| | 01:06 | Press Enter a few times to go down a few
lines and we'll create the onClick event handler.
| | 01:11 | So I'll type function space onClick
with a capital C, open parentheses, event:
| | 01:23 | and it's going to receive a mouse event, so I'll type capital
M for mouse and then event with a capital E, close parentheses,
| | 01:32 | colon, void, Enter, open curly brace,
Enter, close curly brace, up arrow Enter.
| | 01:37 | And one more thing I want to do before
I write any code here is I want to make
| | 01:41 | button_mc have a hand cursor. So after the close curly brace of my
| | 01:46 | event handler, I'm going to go down a few lines and type
button_mc.buttonMode, with a capital M, space equal space true;
| | 02:01 | Now in ActionScript 2.0, you would call the get URL function in order
to get a URL. It works a little bit different in ActionScript 3.0,
| | 02:09 | so let's do that by clicking right before button_mc in line 1
of our code. I'm going to press Enter a few times to push all the
| | 02:16 | code down a few lines and the up arrow
to go all the way up to the top of the code.
| | 02:21 | Let's create a new variable by typing var and a space.
| | 02:24 | Then I'm going to type link, all lowercase. This is just
something I made up. This is going to represent our link:
| | 02:31 | capital U, capital R, capital L,
| | 02:34 | And then capital R for Request. Link,
| | 02:37 | and the datatype is URLRequest. And now we're going to do something
that we haven't done yet, is we're going to create a new instance of
| | 02:44 | a class without pulling it out of the
library. So type a space equal space.
| | 02:50 | Now this is something really important to note. Not every
datatype can be seen in your library like movie clips and buttons.
| | 02:57 | Some datatypes you have to create a new instance of in code and
this is how you create a new instance of your URLRequest in code.
| | 03:06 | So just think of URLRequest as some kind of thing in
our library and this line of code is going to grab it and
| | 03:12 | pull it out of the library and make an
instance of it. So we're setting it equal to a new
| | 03:18 | space, that means a new instance of, and then
type URL capitalized, then capital R for Request.
| | 03:27 | So that's how you create a new instance of an abstract
class. You type new and then a space and then the class name.
| | 03:33 | Class is just being the datatype. So it's a new URL Request.
| | 03:37 | Now I'm going to type an open parenthesis and it's going to accept a URL
and that's a string, so I need to put it in quotes. So type open quotes
| | 03:46 | and then type your favorite web site.
I'm going to type http://www.lynda.com");
| | 04:01 | and now we've successfully created
an instance of the URL request
| | 04:05 | and now we can call that in our onClick. So I'm going to go to
line 7 that's inside of our onClick event handler and then I'm
| | 04:12 | going to type navigate all lowercase,
To with a capital T, the word not the number,
| | 04:21 | then capital U, capital R, capital L. It should all turn blue.
| | 04:25 | Open parenthesis, and now it's going to accept a request, so
I need to type a link, and that's the name of our URL request,
| | 04:33 | close parenthesis, semicolon.
| | 04:36 | So basically URL request is a string, but it is a special
type of string, and you could do other things with it.
| | 04:42 | So we create the URL request in line 1.
| | 04:45 | It's called link. It's a link to the
lynda web site. We call it in line 7
| | 04:51 | using navigateToURL and putting in inside the praentheses.
| | 04:55 | Let's test the movie.
| | 04:57 | Click on the button, and the web site comes up.
| | 05:02 | Nice.
| | 05:06 | Let's close that out.
| | 05:08 | And that is how to create a link to a web site.
| | 05:11 | So when you do it again just make sure
to remember to create the URL request
| | 05:16 | by creating new instance of URL request,
| | 05:20 | and then you use navigateToURL,
| | 05:22 | and pass in the URL request.
| | Collapse this transcript |
| Using the enterframe to create animation| 00:00 | In this movie I'll explain how to create a
basic animation using an event called interframe.
| | 00:06 | This file is set up similarly to the
other files we've been working with.
| | 00:10 | We have boarder_mc see on the Stage, and in our ActionScript
| | 00:16 | we have the jump keyboard event already written.
| | 00:20 | So let me just explain some flaws with this keyboard
event we have so far. I'm going to test the movie
| | 00:26 | and then press and hold the Spacebar.
| | 00:29 | Notice that he jumps way up into the stratosphere and never
comes down. Not only is he defying gravity, but it's not that cool
| | 00:36 | so what we're going to do is make him do a flip.
| | 00:40 | Before we do that we need to make him always come down.
| | 00:43 | The reason why he's not coming down
| | 00:45 | is because as we hold the key down it keeps on
running this event, this jump event handler.
| | 00:53 | So what we need to do is have a way of taking away that
event handler, so the Stage no longer recognizes the key being
| | 01:00 | pressed until the key is let go.
| | 01:03 | So what I'm going to do is
| | 01:06 | copy the first line of code, KeyboardEvent.KEY_DOWN,
that add event listener line.
| | 01:12 | Select it, right click, Copy,
| | 01:16 | and in the jump event handler after we set the y value for
boarder_mc I'm going to press Enter, and let's paste that
| | 01:24 | line of code in here.
| | 01:26 | Except I'm going to change the word
addEventListener to removeEventListener.
| | 01:33 | What that does is it tells the Stage to stop
listening for the KeyboardEvent.KEY_DOWN
| | 01:43 | and to not execute the jump
function. So it would only execute once.
| | 01:49 | Now if I test the movie, holding Space,
| | 01:53 | not releasing it. I release it, it goes back down. I press
the Spacebar again and it doesn't go up, it only goes down
| | 02:00 | because we have to add this event listener again. So
we already copied it. So I'm going to copy it again.
| | 02:09 | So copy the first line KEY_DOWN
| | 02:12 | and then in the land event handler,
after we set the y value for boarder_mc,
| | 02:18 | I'm going to press Enter. I'm going to use
Cmd+V on my keyboard to paste that code.
| | 02:23 | So the event listener is removed while the key is
down and we'll add it in again after we release the key.
| | 02:30 | Now test the movie, holding Spacebar down, he goes up.
| | 02:35 | If I release the Spacebar, he goes
back down. If I press it again.
| | 02:41 | There we go.
| | 02:44 | Now let's make him do a flip while he's in the air.
| | 02:47 | So after the end of line 2 I'm going to press Enter,
| | 02:50 | then I'm going to type Stage.addEvent with a
capital E, Listener with capital L, open parenthesis.
| | 03:00 | Now this is going be a new event called Enter Frame
| | 03:04 | and the type of event is just regular event. So I'm
going to type Event with a capital E and then a dot
| | 03:10 | and then capital E for Enter Frame,
it's ENTER_FRAME, all capitalized.
| | 03:14 | Enter frame is something that's going to execute along
with the timeline. So if your timeline is 12 frames per second,
| | 03:22 | this function will execute 12 times per second.
| | 03:25 | And this is how we create a basic animation with ActionScript.
| | 03:28 | Then type a comma and then a space, then type the word
flip, all lowercase, close parenthesis and a semicolon.
| | 03:35 | Now we just need to write the flip event handler.
| | 03:37 | So after we define the land event
handler, after that close curly brace,
| | 03:42 | go down a few lines and type the
word function then a space
| | 03:45 | flip (Event:
| | 03:50 | Now this event is not going to be a keyboard event, it's
just a regular event. So type a capital E for Event):void
| | 04:01 | Down to the next line, open curly brace,
next line, close curly brace, up arrow, Enter.
| | 04:07 | Now all we want to happen is for our boarder to do a flip.
So I'm just going to type boarder_mc.rotation += 45;
| | 04:24 | So 12 times per second, that's the default frame
rate of my movie, my boarder will rotate 45 degrees.
| | 04:32 | Now let's test the movie.
| | 04:35 | And now he's rotating without me being in the air, so that's
| | 04:39 | not exactly what I want. I want it to start when I'm holding the Spacebar
down and stop when I release the Spacebar. So I'm going to select
| | 04:49 | this line, this ENTER_FRAME line on line 3.
| | 04:53 | Right-click. Cut, we don't want it
there at all. We want to add it in
| | 04:58 | when the boarder is jumping. So
| | 05:01 | on line 9, after the Stage.removeEventListener,
I'm going to paste that line of code
| | 05:06 | and then I need to remove that listener.
| | 05:09 | So I'm going to click in line 15 in the land event handler,
| | 05:12 | at the very last line of that block,
| | 05:15 | I'm going to paste the code again, then
I'm going to remove the event listener.
| | 05:21 | So I'm holding a key down the boarder will flip.
| | 05:26 | When I release the key the boarder will stop flipping.
| | 05:29 | Let's test the movie and check it out.
| | 05:32 | So now I'm holding Spacebar down and the boarder's flipping.
| | 05:36 | And I release it, oh, and he fell.
| | 05:39 | Let's try it again.
| | 05:41 | He's flipping, and release it. There we go.
| | 05:44 | So now we're starting to build somewhat of a game.
| | 05:49 | I'm going to try to get him to land on the slope
as he started out on the slope. There we go, just like that.
| | 05:55 | So that is how to use the enter frame event handler.
| | 05:59 | You may be thinking, is it possible to hold down the
Spacebar and make him jump from one slope to the other slope
| | 06:07 | without really knowing any more code?
| | 06:10 | My answer is yes. Take a second to
think about how you would do that.
| | 06:14 | If the enter frame property is just adjusting the rotation
and making him do a flip, what property would you modify
| | 06:22 | to make him move to the right, or to the other slope?
| | 06:25 | Let's close out the movie and go to the code.
| | 06:28 | To do this, we'll just modify the x property. So in our flip event
handler, after we set the rotation, we go to the next line and type
| | 06:38 | boarder_mc.x += and let's say 20,
| | 06:46 | so he'll rotate 45 degrees every frame and then he'll move to
the right 20 pixels every frame. Now let's test the movie.
| | 06:54 | Hold the Spacebar, and it's a whole different challenge.
| | 06:59 | And if we want him to jump higher we could
just change the y values in the jump and land.
| | 07:05 | So if I want to make him jump 150 pixels,
| | 07:08 | and then go back down 150 pixels when he lands, he can do that.
| | 07:12 | Testing the movie, there we go.
| | 07:15 | Now that's a real game, right? Nice.
| | 07:22 | So there's your simple game using the enter frame event.
| | 07:26 | Feel free to experiment and see what else you can do.
| | 07:29 | In the next movie, I'll explain another
technique of animation call the timer.
| | 07:34 |
| | Collapse this transcript |
| Using the timer event to control animation| 00:00 | In this movie I'm going to explain a different technique
of animation with ActionScript called a timer.
| | 00:06 | A timer is something that can execute not necessarily with a
frame rate of a movie, like enter frame executes, but at an
| | 00:14 | interval you specify, or however many times you specify, or both.
| | 00:19 | If you'd like to follow along, I'm in
Timer.fla in the chapter 04 working files.
| | 00:25 | Let's take a look at this movie before we get started.
| | 00:27 | We have our boarder on the timeline, but he's actually inside of
another movie clip called animations. So if we double-click there
| | 00:34 | then we can go to this timeline and see
that he jumps up and comes back down.
| | 00:39 | So let's preview the movie or test a
movie by pressing Cmd or Ctrl+Enter.
| | 00:46 | And he just jumps up and down indefinitely. So
let's call a stop function inside of this animation.
| | 00:52 | So make sure that you're in the timeline of animation
and create a new layer and name the new layer actions.
| | 01:01 | And on frame one of the actions layer,
| | 01:03 | open up your Actions panel, type the word stop, all lower case, ();
| | 01:11 | Test the movie to verify that it no longer animates.
| | 01:15 | Looks good. Close the movie.
| | 01:17 | Go back to scene one.
| | 01:19 | Now let's create our timer.
| | 01:21 | So I'm going to go on the actions layer of scene one.
| | 01:25 | Click on the first keyframe and open up the Actions panel.
| | 01:28 | The first thing you need to do to create a timer is to create
a variable that holds that timer. So type var and then a space.
| | 01:36 | Then we're going to give our timer a name.
| | 01:40 | So I'm going to call my timer jump and then Timer with a capital T.
| | 01:45 | Type a colon, and then type Timer with a capital T.
| | 01:50 | So the type of data that jumpTimer is going to hold is a
timer. Then type space equal space, then type the word new.
| | 01:58 | We saw this with the URL loader. We need to create a new instance
of the timer class. I'll explain classes in the next chapter.
| | 02:05 | We use the new keyword, this is basically
just like dragging an instance onto the Stage
| | 02:11 | from your library. So type new, space, and
then Timer with a capital T, and then parenthesis.
| | 02:17 | Now we need to specify
| | 02:19 | one thing and we can optionally specify a second thing.
The first thing we need to specify is the delay in milliseconds.
| | 02:26 | So let's say the delay is 5 seconds, so it's going to be 5000);
| | 02:36 | So we just created a variable called jumpTimer and the
datatype is a timer equal to an new instance of a timer,
| | 02:45 | and the delay on the timer is 5000,
which means it's going to run every 5 seconds.
| | 02:49 | Let's go down a few lines and type jumpTimer.addEvent,
with a capital E, Listener, with a capital L.
| | 02:59 | This time we're going to add the event listener to the timer,
not to the Stage, not to a movie clip, but to the timer itself.
| | 03:07 | Then for the type I'm going to put Timer,
capital T, Event with capital T
| | 03:13 | dot, and then capitalized TIMER comma, space.
| | 03:20 | The event we're passing in is TimerEvent.TIMER. That's going
to be whenever the timer runs. Now we're going to specify what
| | 03:27 | function is going to run every 5 seconds.
| | 03:31 | Let's just call this function jump);
| | 03:34 | Let's go down a few lines and type
function, space, jump, open parenthesis.
| | 03:43 | Now we need to say it receives an event, so type event,
colon and then TimerEvent with a capital T, capital E for Event,
| | 03:50 | close parenthesis, :void with a lowercase v, next line, open curly brace,
next line, close curly brace, up arrow, Enter to get within the curly braces.
| | 04:02 | Now here we specify what happens every 5 seconds.
| | 04:07 | What we need to do next is give the animation
and instance name. So let's close the Actions panel.
| | 04:13 | Click on the boarder on the Stage in scene one
| | 04:16 | and let's just give this an instance name of animation_mc.
| | 04:22 | That's the movie clip that holds the boarder jumping up and down.
| | 04:27 | The boarder's instance name is still boarder_mc
| | 04:30 | so it's inside of animation_mc.
| | 04:33 | So let's go back up
| | 04:35 | click on the actions keyframe, open up the Actions panel.
| | 04:40 | I just want to tell the animation to play,
so I'm just going to type animation_mc.play();
| | 04:54 | If you were test move right now, nothing would happen. Before
we do anything we need to tell the timer to start counting.
| | 05:04 | So after the close curly brace of my event handler, I'm going to go
down a few lines and I'm going to type jumpTimer, capital T, .start();
| | 05:15 | Now test the movie and every five seconds
| | 05:21 | your snowboarder will take a leap, like so.
| | 05:30 | Now let's say I only want him to jump once.
| | 05:34 | We go the very top my code, where we created the new instance of timer,
| | 05:38 | after the 5000 type a comma, a space and then a 1.
| | 05:43 | And that's going to be the repeat, or how many
times this is going to run. So let's test that.
| | 05:50 | Wait five seconds, watch him jump.
| | 05:57 | Wait five seconds longer.
| | 06:02 | And we don't see anything.
| | 06:07 | So we can have it run as many times as we want by specifying
that when we create the new instance of the timer class.
| | 06:14 | You can use this similar to enter frame, you can have it
execute more often, or less often or however you want.
| | 06:20 | You can see that the timer is a little bit more code than the
enter frame, but it also gives you a lot more control, so it's
| | 06:26 | pretty much your call as to whether you
want to use the enter frame or the timer.
| | 06:31 | If it's going to execute along with a frame rate anyway, I recommend
enter frame just cause it's a little easier to write and the
| | 06:39 | timer is good if you need it to execute more or less
than the frame rate or only a certain number of times.
| | 06:44 | And that's how to use a timer to control an animation.
| | Collapse this transcript |
|
|
5. Understanding ClassesUnderstanding classes| 00:01 | In this chapter I'm going to explain
what classes are, how to create them,
| | 00:05 | why it's important to create them
and what to do after you create them.
| | 00:10 | I'd first like to start off by explaining what classes are.
| | 00:13 | You already have a concept of classes
if you've worked with symbols at all in Flash.
| | 00:17 | Let's take a look at graphic symbols
versus movie clip symbols versus button symbols.
| | 00:22 | A graphic symbol animates with the timeline
| | 00:25 | so if I don't have the time line extended, the symbol won't animate.
| | 00:29 | I also cannot interact with a graphic
symbol in ActionScript or give it an instance name.
| | 00:34 | A movie clip symbol animates independent of the main timeline.
| | 00:38 | You can see that there's only one frame
inside of my Flash movie, but if I test the movie
| | 00:45 | my movie clip animates anyway.
| | 00:49 | So all graphic symbols act the same.
All movie clip symbols like the same.
| | 00:53 | All button symbols act the same as well.
If you're familiar with button symbols,
| | 00:57 | you know that you can roll over them
and give them some sort of effect.
| | 01:01 | They all have four frames: up, over, down, and hit
| | 01:07 | A movie clip is a type of class and a button is a type of class.
| | 01:11 | A class is simply a blueprint
| | 01:14 | of how all the objects in that class act.
| | 01:18 | They may look different, but they all do the same thing.
| | 01:22 | You can modify the same properties.
| | 01:24 | You can animate them.
| | 01:26 | Etc.etc.etc.
| | 01:28 | So the main thing you want to take away is that
a class is information about how an object acts.
| | 01:36 | So the movie clip is a class and the button is a class.
| | 01:41 | Now that you understand the concept of a class.
| | 01:43 | Let's write our own custom class.
| | 01:45 | We'll do that in the next movie.
| | Collapse this transcript |
| Writing a custom class| 00:01 | In this movie I'm going to explain how to
create our own custom ActionScript class.
| | 00:06 | In order to do this
| | 00:07 | we need to create an external ActionScript file. So from the
Welcome screen I'm going to create a new ActionScript file.
| | 00:15 | So select ActionScript file under the Create New menu.
| | 00:19 | The first that you need to do is go to File, Save
| | 00:24 | and find the place where you'd like to save this file
| | 00:27 | and give it a name. Now the name here is extremely
significant. The name of the file is the name of your class, so
| | 00:36 | I recommend calling this is same name as me.
| | 00:38 | If you give this a different name you're
going to have to write slightly different code.
| | 00:42 | So let's call this Custom with a capital C, it's special
naming convention you need to do for all of your classes.
| | 00:49 | You need to start them with a capital letter.
| | 00:51 | And then give each word a capital letter. So
Custom and then Class with a capital C, all one word,
| | 00:58 | no spaces, no special characters, and we start with
a capital letter and each word has a capital letter.
| | 01:04 | Select a folder and then select Save.
| | 01:07 | So we have CustomClass.as
| | 01:10 | The first piece of code that you want to write is the word package.
| | 01:13 | And we need to wrap every class inside of a package
| | 01:18 | and package is something I'll explain later
on in this chapter, but for right now, just press Enter.
| | 01:24 | Type an open curly brace, Enter again,
close curly brace, up arrow and then Enter.
| | 01:30 | We are going to put all of our
code within these curly braces.
| | 01:36 | The next step is to define your class, so type the word class
| | 01:41 | and then a space. This is similar to defining a function or variable.
| | 01:45 | So you type the class and then you're going to type your class name.
The class name must be the same as the name of your ActionScript file
| | 01:51 | which should always start with a capital letter. So type the
name of your ActionScript file, which is going to be Custom
| | 01:57 | with a capital C and class with a capital C.
| | 02:00 | Then press Enter, open curly brace,
next line, close curly brace, up arrow, Enter.
| | 02:09 | Now we're going to put everything
else inside of these curly braces.
| | 02:14 | The first thing we need create is
something called a constructor function.
| | 02:19 | A constructor function is a function that automatically runs
| | 02:23 | when the class is first created.
| | 02:26 | So let's say I create an instance of this class
| | 02:29 | on the main timeline of a Flash movie or something.
| | 02:31 | The constructor function is what runs automatically as soon as
I create an instance of this class or if I drag an instance out
| | 02:37 | of the library. The constructor function runs
automatically as soon as the movie is played.
| | 02:41 | To create a constructor function,
| | 02:43 | type the word function, and then a space
| | 02:48 | and then the name of your class again.
| | 02:51 | Custom and then Class with a capital C. Make sure Custom has
a capital C as well. Open parenthesis, close parenthesis.
| | 03:00 | When you're defining a constructor function,
you never, ever, ever put:void or: anything.
| | 03:07 | A constructor function cannot have a return type.
| | 03:11 | So you must not specify a return type.
| | 03:14 | Now press Enter, open curly brace,
Enter, close curly brace, up arrow, Enter.
| | 03:20 | And this is the area where you would write,
| | 03:22 | whatever happens when our code to first
runs or when our class is first created.
| | 03:28 | So I'm going to trace. So type trace("custom class working!");
| | 03:43 | So that is how to create a custom class.
We wrapped the whole thing in a package.
| | 03:49 | Inside of the package we have the word
class then the name of our class,
| | 03:54 | and then inside of the curly braces there, we define the
constructor function, which is also the same name as our class,
| | 04:01 | which is the same as our class filename.
| | 04:05 | Then we have open and close curly braces.
| | 04:07 | Then we have whatever we want to run automatically
whenever we create an instance of this class.
| | 04:13 | And so there's your first class congratulations.
| | 04:16 | Let's save this file and continue to build it in the next movie.
| | Collapse this transcript |
| Extending an existing class| 00:01 | In this movie I'm going to explain how to take an existing
class like movie clip and extend it, or to take all the things
| | 00:08 | the already exist in the movie clip
class and add to them in your own custom class.
| | 00:14 | The reason that you'd want to do that is so that you don't have
to invent your own class that has a timeline at all that stuff.
| | 00:20 | It's already all done for you.
| | 00:22 | So just take it and build on it.
| | 00:24 | So the first thing I'm going to do is after the word class,
and by the way I'm in CustomClass.as, and that's the file
| | 00:30 | that we built in the last movie.
| | 00:33 | You can find it in the chapter 05 working files.
| | 00:37 | After class CustomClass I'm going to type a space,
| | 00:42 | and then the word extends
| | 00:45 | and then a space and then movie clip
with a capital M and a capital C.
| | 00:50 | class CustomClass extends MovieClip.
| | 00:54 | That means custom class takes everything that's in the movie
clip class, the timeline, the way that you can position
| | 01:01 | them, how they animate independently,
| | 01:03 | and we're going to add to it.
| | 01:05 | Now as is, this is not going to run properly
because we need to do something called import.
| | 01:12 | After the word package and after the open curly brace on line 2,
| | 01:16 | you want to press Enter twice and then the up arrow,
| | 01:20 | and then I'm going to type imports flash.display
.MovieClip with a capital M and a capital C,
| | 01:31 | And then a semicolon.
| | 01:33 | With this line of code does, the line we just wrote on line 3,
| | 01:37 | is it brings in all the information about movie
clips, so that we can utilize it in this class.
| | 01:45 | If we do not have this line, then we have
no right to extend the movie for class because
| | 01:50 | Flash is not to know what we're talking about when we use
the word movie clip. We need to import that information.
| | 01:56 |
So if you're going to extend a class or if you're going
to use information from any class in an external file,
| | 02:02 | you need to import that class.
| | 02:05 | And that is how to extend the movie clip class.
| | 02:09 | In the next movie we'll write some custom functions
to build this class more fully and make it more unique.
| | Collapse this transcript |
| Understanding methods| 00:01 | In this movie I'm going to explain methods.
| | 00:05 | If you would like to follow along I'm in CustomClass.as
| | 00:09 | and this file can be found in the chapter 05 folder under 5-4.
| | 00:17 | A method is a new word you may or may not have heard before.
| | 00:21 | A method is actually a really simple concept to understand.
It's just a name that kind of throws people off sometimes.
| | 00:28 | A method is no more than a function,
| | 00:32 | but a method is a function that's attached to an object.
| | 00:38 | So, you may remember in the last
chapter, when we used timer.start.
| | 00:47 | Start is a method of the timer class.
| | 00:51 | To write your own custom methods, it's very simple.
| | 00:54 | After our constructor function,
that's this function CustomClass.
| | 00:59 | After that close curly Brace, I'll press Enter twice to go
down two lines. And let's type function and then a space
| | 01:08 | and then whatever method name you want.
| | 01:11 | And remember this is the same thing as a function.
| | 01:14 | So if I called this my and then Function with a capital F,
| | 01:18 | open and close parentheses, colon, void.
| | 01:22 | Next line, open curly brace,
next line, close brace, up arrow, Enter.
| | 01:29 | And then I can trace. So type trace("my method is working!");
| | 01:46 | So a function is exactly the same as a method, it's
just called a method because it's inside of this class,
| | 01:53 | which means only the CustomClass can run myFunction.
| | 02:00 | It's not known to any other class.
| | 02:04 | So that makes it a method,
| | 02:06 | and that is how to create a method.
| | Collapse this transcript |
| Public vs. private properties and methods| 00:01 | In this movie I'm going to explain what two words
mean. Those two words are public and private.
| | 00:06 | As this code is in CustomClass.as, and by the way if you're
looking for this file it's in the chapter 05 working files
| | 00:12 | folder in a folder called 5-5.
| | 00:16 | This code as is, is not written perfectly. When you're defining
classes and methods and variables inside of a class file
| | 00:26 | you need to specify whether each method
or the class or property is known only to the class
| | 00:36 | or if it's something that you can
call and modify outside of the class.
| | 00:41 | Let em show you how to do that.
| | 00:42 | The first I'm going to do
| | 00:45 | is right before the word class on line 5 I'm
going to type the word public and then a space.
| | 00:52 | So I can create this class anywhere I want.
| | 00:55 | That means if I'm on the main timeline and I'd like
to create instance of this class I can easily do that.
| | 01:00 | Before function CustomClass I'm going to type public as well.
| | 01:05 | And then for my function, myFunction,
I'm going to type private, because I only want
| | 01:13 | my CustomClass object to be able to run this function. So that
means if I'm going to run myFunction, I can only run it in this
| | 01:20 | file. I can't run it outside of this ActionScript file.
| | 01:25 | We'll see that in action in next movie.
| | 01:27 | And one more thing, we can create
custom properties on our classes.
| | 01:33 | The way we do that is we click right after public
class, right after the open curly brace, and
| | 01:40 | press Enter few times to go down a few
lines and press the up arrow once, go up.
| | 01:44 | Now we can define public or private variables.
| | 01:47 | Public and private variables work the
same as public and private functions or methods.
| | 01:51 | So we just need to type the word private or public.
I'm going to type private and then a space
| | 01:57 | than an underscore and then myVar with a Capitol V.
| | 02:04 | Starting a property's name with an underscore is not necessary,
| | 02:09 | but it is a common practice among Flash developers and
| | 02:13 | it's your call whether you use the underscore or not in the
future. But for right now, let's put an underscore there.
| | 02:19 | Type colon and then type the datatype.
I'm going to type string and then a semicolon.
| | 02:27 | So we created a variable on a custom
class called myVar and its a string.
| | 02:33 | So that's how to define public and private variables and methods.
| | 02:40 | In the next movie we'll make this whole
thing real by bringing it to the Stage.
| | Collapse this transcript |
| Bringing a class object to the timeline| 00:00 | In this movie I'm going to show you had it take an object on
the timeline and connect it with a custom class you created.
| | 00:07 | For this exercise it will be best if you open
up the Button.fla file and the FunButton.as file.
| | 00:15 | These files are both in the chapter
05 folder of the Exercise Files.
| | 00:19 | Button.fla is pretty simple. We just got a bunch of different
instances of the boarder that are modified slightly and
| | 00:25 | they don't have any instance names.
| | 00:28 | Let's take a look at FunButton.as.
| | 00:31 | Notice in the top right, we can set the target with this dropdown.
| | 00:37 | So we're connecting this ActionScript
file to our Button.fla file.
| | 00:42 | Now let's make a button
| | 00:44 | that you can rollover and rollout.
So a simple rollover or rollout effect.
| | 00:50 | So because it's a class, it will be a lot more powerful than
the normal rollover rollout effects that we've done before.
| | 00:57 | So what I'm going to do is in the public function FunButton,
| | 01:04 | I'm going to type this.
| | 01:08 | Now this is just a keyword
| | 01:10 | that means this object or this instance of this class, so
| | 01:16 | I can use that to refer to any instance of the FunButton class.
So I'm using the this keyword just once we connect the FunButton
| | 01:24 | to an object on the timeline, it'll be
referring to whatever instance we select.
| | 01:29 | this.addEvent with a capital E, Listener with a capital L,
| | 01:35 | and then open parenthesis.
| | 01:39 | And now we want to listen for the mouse event rollover. So I'm
going to type MouseEvent with a capital M, capital E for event
| | 01:49 | .ROLL with a capital R
| | 01:52 | and OVER with a capital O. Make sure you have an
underscore between them and everything is capitalized.
| | 01:59 | Then type a comma and a space,
| | 02:02 | and then I'm going to call the function
that runs when you roll over grow.
| | 02:09 | Let's do a close parenthesis and a semicolon,
and we also need to add a rollout event listeners
| | 02:15 | So what I'm going to do is just copy this line.
| | 02:19 | So select it, press Ctrl or Cmd+C on your keyword,
go to the next line. Paste it with Ctrl or Cmd+V.
| | 02:27 | Change ROLL_OVER to ROLL_OUT, all capital letters.
| | 02:33 | And then change grow to shrink.
| | 02:37 | So this so just get bigger when you roll over it and
then go back to the reduced size when you roll out.
| | 02:42 | There's one thing that's really, really important that you
have to do before this will work properly. Just like we had
| | 02:48 | import the movie clip so that we can use a movie clip in
our custom class, we have to import mouse event so we can
| | 02:54 | use a mouse event in our custom class. So after import flash.display.MovieClip,
| | 03:01 | on line 3 I'm going to press Enter on my keyboard and I'm
going to type import and space flash.events.MouseEvent,
| | 03:14 | with a capital M and a capital
E for event, and then a semicolon.
| | 03:20 | And that won't give us any errors when we do it.
| | 03:24 | Now we just need to define the grow and shrink methods.
| | 03:28 | And remember again a method is just a function, it's just
that because it's inside of a class we're calling it a method.
| | 03:34 | So after the close curly brace
on line 12, in our constructor function
| | 03:41 | let's press Enter a few times to go down
a few lines and now type private function,
| | 03:50 | make sure you separate them with a space. We're going to call
it private, because we're never going to call this outside
| | 03:56 | of the fun button.
| | 03:58 | So I'm not going to call the grow
or shrink from the main timeline.
| | 04:03 | It's just going to activate when
I rollover or rollout of our object.
| | 04:08 | So private function and then a space
and let's define grow, open parenthesis.
| | 04:12 | It's going to receive mouse event,
so let's type event all lower case, colon,
| | 04:17 | and then MouseEvent with a capital M and a
capital E for event, close parenthesis, colon, void.
| | 04:30 | Go down to the next line, open curly brace, Enter
again, close curly brace, up arrow, and then Enter.
| | 04:38 | Now to make it grow we'll just modify the scale x and
scale y property. So I'm going to type this.scaleX = 1.5;
| | 04:56 | This will make it grow 50% larger
than whatever size it is currently.
| | 05:03 | Enter to go to the next line. this.scaleY = 1.5;
| | 05:17 | So when we rollover
| | 05:19 | it'll scale horizontally and vertically 50% larger.
| | 05:25 | Now we'll copy this whole event handler.
| | 05:29 | Again an event handler is simply a
function that is triggered by an event.
| | 05:35 | Press Cmd or Ctrl+C on your keyboard to copy it.
| | 05:39 | After the curly brace of the event handler, press Enter a few times
to down a few lines and then paste the code using Cmd or Ctrl+V.
| | 05:48 | In the pasted code change the word grow to shrink.
| | 05:54 | It's still going to receive a mouse event, so we don't need to
change it there. All we need to do is change scale x and scale y.
| | 06:01 | Instead of 1.5, we'll just erase the .5 and
have it be 1. So it'll go back to its normal size.
| | 06:07 | The next step is to save this file.
| | 06:10 | You can't do anything until you save the file.
| | 06:15 | So just make sure that it's saved.
| | 06:17 | If there's an asterisk by your filename at the top of the screen
that means it's not saved, so make sure to save it real quick.
| | 06:23 | Now let's go to Button.fla. I'm just
clicking on the tab to go over there.
| | 06:28 | And I'm still not going to give any instance names to
these objects. Instead I'm going to go to my library.
| | 06:36 | I'm going to right click on the movie clip
that I want to associate it my new class.
| | 06:43 | And then I'm going to find linkage. Select linkage,
and then check the box called Export for ActionScript.
| | 06:53 | And here, if I change the class name
| | 06:58 | where it says mcBoarder. If I type in FunButton with a capital F
and a capital B for Button, just like I spell it in my as file,
| | 07:07 | and then I click OK,
| | 07:11 | and then I test the movie, I can roll
over the buttons and they work.
| | 07:23 | Notice that they all go back down to the
original size of the movie clip when I rollout?
| | 07:29 | If I want it to grow 50%
| | 07:32 | of it's regular or it's initial size, if I scale it
up or scale it down, I can go back to FunButton.as,
| | 07:40 | and then what we can do is capture the x and y scales in variables,
| | 07:45 | and then apply them later. Let me show
you how that works. Let's go to FunButton.as.
| | 07:51 | And after public class FunButton extends MovieClip
there is an open curly brace. Mine is on line 7.
| | 07:57 | Click after that open curly brace and press
Return or Enter a few times then go up one line.
| | 08:05 | Now let's define some variables.
I'm going to define a private space var space
| | 08:13 | and then let's start the first property with an underscore.
| | 08:20 | And so I'm going to say origX, capital X,
Scale capital S, colon, Number with a capital N.
| | 08:36 | So we're creating a variable called _originalXScale.
It's going to represent the original x scale
| | 08:42 | of our movie clip.
| | 08:45 | The datatype is a number.
| | 08:46 | Let's just copy this line and then change x to y.
Select it. Ctrl or Cmd+C. Next line. Paste the code.
| | 08:56 | Ctrl or Cmd+V. Change the capital X to a capital Y
| | 09:01 | and then inside of the constructor function we'll set
the values for the original x scale and the original y scale.
| | 09:08 | So click after the open curly brace of the
constructor function, that's the one called FunButton.
| | 09:14 | And press Enter.
| | 09:16 | Type _orig, capital X, capital S for scale,
| | 09:23 | space, equals, space, and then we type this.scaleX;
| | 09:35 | Copy that line of code.
| | 09:38 | Go to the next line of code, paste that code.
| | 09:42 | Change the Xs to Ys, make sure they're capitalized.
| | 09:45 | And now we'll scroll down
| | 09:51 | and instead of this.scaleX = 1.5 and this.scaleY = 1.5,
if I click right before the equal sign
| | 10:00 | and then type an asterix,
| | 10:02 | if I do that for scale x and scale why,
| | 10:06 | that's going to tell Flash to multiply the current
| | 10:11 | scale x and the current scale y by 1 and a half.
| | 10:16 | So that means it will scale 50% larger
no matter what scale it is currently.
| | 10:22 | In the shrink
| | 10:24 | function we just want to say this.scaleX instead equaling
1, we're just going to go back to the original x scale.
| | 10:31 | So I'm going to type _orig, capital X, capital S for Scale,
| | 10:39 | and in scaleY, we'll replace the 1 with
_orig, capital Y, capital S for Scale.
| | 10:47 | Save the file, return to Button.fla.
| | 10:51 | Test the movie.
| | 10:52 | Rollover, rollout.
| | 10:56 | And they increase size by 50% and go back
to the original scales they were at initially.
| | 11:06 | Now I'm going show you one more thing that
will demonstrate the power of classes.
| | 11:13 | I'm going to go to my Rectangle tool
| | 11:15 | and then I'm going to draw a rectangle
on the bottom left of my Stage.
| | 11:19 | It doesn't matter what color, what stroke, what fill,
what size, nothing matters. Just draw a rectange.
| | 11:26 | You can even draw something else if you want,
but for now let's just keep it at a rectangle.
| | 11:29 | Let's go to the Selection tool by selecting it on
the toolbar or it pressing V on your keyboard.
| | 11:35 | Draw a selection area around the rectangle.
| | 11:38 | Press F8 on your keyboard to convert it to a symbol.
| | 11:41 | Make sure movie clip is selected, and let's call this symbol
| | 11:46 | rectangle, all lowercase and then click OK.
| | 11:53 | Alright. Now let's associate this rectangle
| | 11:59 | with that same class. So right click it
in the library, select linkage,
| | 12:04 | select Export for ActionScript,
| | 12:08 | and for class I'm going to type Fun
and then Button with a capital B.
| | 12:12 | And then click OK.
| | 12:15 | And we get an error. It says Please enter a unique class
name that is not associated with other library symbols.
| | 12:23 | Hmmm, how do we work around this?
| | 12:25 | If you look at the Base class, flash.display.MovieClip
| | 12:31 | that is the Base class for this object. So each movie
clip in your library needs a distinct class name.
| | 12:38 | So the boarder has the class FunButton, but if we use
FunButton for the Base class then we can call this rectangle
| | 12:46 | whatever we want. So let's just
| | 12:47 | select flash.display.MovieClip and
type FunButton with a capital B.
| | 12:53 | Just like casing is in your FunButton.as file.
And then change the regular Class name to rectangle.
| | 13:02 | Then click OK.
| | 13:05 | Then you get a message that says A definition for this class
could not be found in the classpath, so one will automatically
| | 13:10 | be generated in the SWF file on export.
| | 13:13 | What that means is that there is no ActionScript file called
| | 13:20 | rectangle. There's no ActionScript class called rectangle so Flash
is just going to create one for you when you export the file.
| | 13:27 | Nice. Click OK.
| | 13:31 | Test the movie.
| | 13:33 | Roll over the rectangle and notice that it scales.
| | 13:36 | One thing though is that it's scaling from the top left.
| | 13:39 | That's only because the registration point is in the top left.
The registration point of the other symbols is in the middle.
| | 13:47 | So look at that little crosshair in the middle.
If we click on our rectangle it's in the top left.
| | 13:53 | So if we were to move the registration point or create another
object with a centered registration point it would scale from
| | 13:59 | the center as well.
| | 14:00 | And that's how you bring a class object to the timeline
| | 14:03 | and you could see how useful classes are
when we apply them to multiple objects.
| | 14:09 | In the next movie, I'll show you how to create an
ActionScript class that runs automatically in your fla file.
| | Collapse this transcript |
| Defining a document class| 00:01 | In this movie I'll explain how to set
up something called a document class.
| | 00:06 | In previous versions of to Flash the main timeline or
the main class of your Flash movie was a movie clip.
| | 00:14 | Now we can define our own custom class for our document.
| | 00:19 | And that'll make more sense as we actually build it, so I'm working
in Button.fla and I'm going to be working with ButtonClass.as.
| | 00:26 | These files can be found in the chapter
05 Exercise Files folder in 5-7.
| | 00:32 | The first thing I'm going to do in this fla files is
just delete these three instances off the Stage.
| | 00:36 | We'll bring them onto the Stage in our external ActionScript file.
| | 00:39 | So let's go to ButtonClass.as.
| | 00:42 | Now we'll write our document class. So let's type package, Enter,
open curly brace, Enter, close curly brace, up arrow, Enter.
| | 00:50 | Type public class space.
| | 00:54 | This needs to be called the same name as your file. So we'll
call it Button with a capital B, Class with a capital C,
| | 01:01 | space, extends, space, MovieClip.
| | 01:07 | Since we're extending the movie clip, we need
to import movie clip, so let's go up one line.
| | 01:11 | Press Enter twice, go up one more line
| | 01:14 | and we'll import, space, flash.display.MovieClip
with a capital M, capital C, and a semicolon.
| | 01:23 | After public class ButtonClass extends MovieClip, press Enter,
open curly brace, Enter, close curly brace, up arrow, Enter.
| | 01:31 | Now we'll create our constructor
function. So type public function
| | 01:38 | ButtonClass, with a capital B, capital C.
| | 01:42 | Open and close parentheses, Enter, open curly
brace, Enter, close curly brace, up arrow, Enter.
| | 01:49 | Alright, now we just want to check for right
now to make sure that this is working OK.
| | 01:54 | So I'm going to type trace("button class working");
| | 02:07 | And now let's save this file.
| | 02:10 | Return to Button.fla. In the Property Inspector,
you should see a Document class area.
| | 02:17 | If you do not see that click on the gray
space off of your Stage and it should show up.
| | 02:24 | Click in the Document class area,
| | 02:27 | And then type the name of our Document class.
It's going to be ButtonClass, capital B, capital C.
| | 02:36 | Let's just click away from that text area, and by click
away, I mean click off of the Stage in the gray area
| | 02:43 | and test the movie.
| | 02:46 | And in your Output window you should get
a message that says button class working.
| | 02:50 | Great.
| | 02:53 | Now, what I'm going to do is bring instances of the boarder
| | 03:00 | to the timeline and have them be our buttons.
| | 03:04 | Let's go back to mcBoarder in our library
and right-click and select Linkage.
| | 03:10 | Check Export for ActionScript.
| | 03:13 | We have mcBoarder for our Class and for the
Base class we have flash.display.MovieClip.
| | 03:20 | Let's change the Base class to be the
class we created in the last exercise,
| | 03:25 | which is Fun capital F, and then Button with a capital B.
| | 03:30 | That way if I want to make more objects buttons
| | 03:33 | I can create them and set the Base class to
FunButton and leave the Class name unique,
| | 03:38 | cause every movie clip needs a unique Class name.
| | 03:41 | The reason why we can just type FunButton is because
the ActionScript file is in the same file as our fla file.
| | 03:47 | If that ActionScript file were in a different folder,
you'd have to use a special technique to reference it.
| | 03:53 | And in the next movie I'll explain how to do that.
| | 03:57 | For right now just click OK.
| | 03:59 | And it gives you that message, just click OK.
| | 04:02 | Now nothing exciting happens yet.
Let's go back to ButtonClass.as
| | 04:07 | and we'll need to import mcBoarder, so I'm
going to click after flash.display.MovieClip.
| | 04:13 | Then press Enter and type import mcBoarder
with a capital B, and a semicolon.
| | 04:24 | Now we'll go to the next line and
we'll just import FunButton;
| | 04:32 | On line 8 after the open curly brace, that's after public class
ButtonClass extends MovieClip, go down a few lines and go up one line.
| | 04:42 | And we'll create a new variable. So
let's create a private var boarder;
| | 04:53 | and the datatype is going to be mcBoarder, with a capital B.
| | 04:59 | Then type a;
| | 05:01 | So this line of code creates a new variable called boarder
and the datatype is mcBoarder, which is that same symbol that's
| | 05:09 | inside of our library, which will also be a FunButton.
| | 05:13 | Now let's just erase this trace statement.
| | 05:20 | And we'll just replace that with some code
that will bring our boarder to the Stage.
| | 05:24 | So the first thing we need to do is type boarder, space,
equals, space, then type the word new, and a space.
| | 05:31 | Then type mcBoarder();
| | 05:37 | That means an new instance of the mcBoarder class.
| | 05:41 | So basically we're
| | 05:42 | dragging a new instance of this object
mcBoarder from our library to the timeline.
| | 05:49 | However we cannot see it yet. If we were to run this file right
now, we would not be able to see it. We need to do one more thing
| | 05:56 | and that's something called add the object to the display list.
| | 06:02 | Now the display list is something we're going to be
working with all throughout the rest of this title.
| | 06:08 | Basically, an object like a movie
clip can hold other objects,
| | 06:14 | other visual objects. When we're putting a visual object inside
of something else, we need to use a method called add child.
| | 06:23 | Let's go down to the next line and then type
adChild, with a capital C, open parenthesis,
| | 06:29 | and then boarder, just like we wrote it
above, close parenthesis, and a semicolon.
| | 06:36 | Now what this will do is it will add
| | 06:39 | our boarder, which is an instance of
our mcBoarder out of our library,
| | 06:44 | to the display list of our button class.
| | 06:48 | All that means it is we're going to see it. Without addChild you
wouldn't see it. So just take a note of it right now that you
| | 06:54 | need to do addChild if you want to see any
the object that you create in ActionScript.
| | 07:01 | So let's save this file by going to File, Save.
| | 07:06 | Go back to Button.fla. Test the movie.
| | 07:10 | And you get your boarder at the very top left.
If you roll over it you can see you get the effect.
| | 07:15 | That's kind of ridiculous. So let's just move his x and y
positions so it's a little bit easier. After addChild boarder, go
| | 07:21 | to the next line. Just set the x and
y properties. So boarder.x = 200.
| | 07:28 | That should get him far out enough out
to the right so we can see him okay.
| | 07:33 | Then go to the next line and do boarder.y = 200;
| | 07:40 | Save the file you can actually test the movie from right
inside of this ActionScript file. So you press Cmd+Return
| | 07:46 | or Ctrl+Enter here and we'll see it. There's our boarder.
| | 07:50 | Roll over, he gets big, roll out, he goes back down.
| | 07:56 | And that's how you define a document class. So a
document class again, is just like a regular class,
| | 08:02 | except we define it down here, in the
Document class area of the Property Inspector,
| | 08:07 | and that code will run automatically when we run our swf file.
| | 08:13 |
| | Collapse this transcript |
| Setting up a classpath| 00:01 | In this movie I'm going to explain an
amazing tool for organizing your classes.
| | 00:06 | Let's say
| | 00:07 | you have a whole bunch of different ActionScript classes that
you've written and you'd like to have a location on your hard
| | 00:12 | drive where you save them,
| | 00:14 | rather than copying and pasting them every single time
you want to use them in the same folder as your fla file.
| | 00:20 | In your fla file you can specify a folder where Flash
can look for classes so you can simply import them in
| | 00:28 | at runtime, instead of having to copy
and paste the ActionScript files over.
| | 00:32 | Let me show you how that works in this movie.
| | 00:35 | These exercise files can be found in the 5-8
folder inside of the chapter 05 Exercise Files folder.
| | 00:42 | What I did for this exercise is I'm moved
the FunButton.fla file to my desktop.
| | 00:49 | So inside of my desktop I have a folder called AS3
classes. Inside of there is a folder called Todd.
| | 00:57 | Inside of there is a folder called classes,
and in the classes folder is my FunButton.as folder.
| | 01:03 | So this folder on my desktop could
represent your ActionScript 3 classes folder
| | 01:09 | anywhere on your hard drive and you can have it
be organized in different folders anyway that you want.
| | 01:15 | Going back to Flash.
| | 01:16 | So because I moved my FunButton, all my
code's going to be a little bit out of whack.
| | 01:21 | So if I test the movie right now I'm
going to get all kinds of error messages.
| | 01:24 | Type was not found or was not a compile-type
instance. Call to possibly undefined method.
| | 01:28 | All this stuff has gone wrong.
| | 01:30 | So I'm going to close this.
| | 01:33 | So I need to do a few different things to access my classes.
The first I'm going to do is go into the Properties inspector.
| | 01:41 | If you do not see Publish Settings,
you can click in the gray area off the Stage.
| | 01:45 | Then select Publish Settings.
| | 01:47 | Then select Flash,
| | 01:49 | and then near ActionScript version, where it says
ActionScript 3.0, there's a button called Settings.
| | 01:55 | Click that button. At the bottom of this window,
| | 01:58 | you can see a classpath area. That's the path to where
Flash will look for all of your ActionScript files. So let's
| | 02:06 | click this target button so we can browse to a path.
| | 02:10 | I'm going to select the AS3 classes folder on my desktop.
| | 02:14 | Desktop, AS3 classes.
| | 02:17 | You can copy this AS3 classes folder anywhere
on your hard drive or you can even create a new one.
| | 02:22 | It'll all work the same. So choose OK and
click OK here. And then click OK one more time.
| | 02:30 | So now we have a classpath specified.
| | 02:33 | If I save the file and test the movie.
| | 02:37 | I'm still running into problems.
| | 02:39 | So let's go over all those problems.
| | 02:43 | The first thing is I'm going to have to
right-click on mcBoarder and select Linkage.
| | 02:48 | Select Export for ActionScript.
| | 02:51 | Now you don't need to do this every
time you publish a movie, but
| | 02:54 | if you were working along from the last movie, then you
wouldn't need to check Export for ActionScript again, but
| | 03:00 | in this one we have to do it. So if you're working in
this file should be able to check Export for ActionScript.
| | 03:04 | So let's leave Class mcBoarder the same.
| | 03:06 | So if we set our Base class to FunButton with a capital B for Button.
| | 03:12 | Click OK. We run into this error that says one automatically be
generated in the SWF file on export. I'm going to click Cancel,
| | 03:20 | then it says A definition for the base
class cannot be found in the classpath.
| | 03:24 | So something is wrong in my classpath.
In order to navigate to FunButton,
| | 03:29 | I need to go to todd, and that's inside of my AS3 classes folder
| | 03:34 | and then dot. And inside of that folder
I have a folder called classes.
| | 03:39 | And then dot and after there is my FunButton file.
So type Fun and then Button with a capital B.
| | 03:46 | Then click OK. I don't get any problems. Sweet.
| | 03:51 | Let's go to our ButtonClass.as file.
| | 03:53 | I'm going to need to change import
FunButton to import todd.classes.FunButton.
| | 04:01 | So let's click right before FunButton
and type todd.classes and then a dot.
| | 04:08 | Now test the movie.
| | 04:10 | Still something wrong.
| | 04:13 |
The symbol definition of base class FunButton was not
found, okay so there's some sort of problem there.
| | 04:18 | FunButton.as, we run into a problem. It must subclass MovieClip.
| | 04:25 | All these problems. Let me show you what the problem is.
| | 04:29 | I'm going to save this file, then I'm going to File - Open.
| | 04:33 | Then I'll navigate to my desktop,
AS3 Classes folder, todd, classes.
| | 04:40 | Then open up FunButton.
| | 04:42 | When you bury an ActionScript
file in a whole bunch of folders,
| | 04:47 | you need to specify in the package
area the path to this file.
| | 04:53 | So after the word package on line 1 of my
FunButton.as file, I'm going to type a space.
| | 04:58 | And then I'm going to type todd.classes
| | 05:03 | That means this file can be found in the
todd folder and in the classes folder.
| | 05:08 | This will enable us to communicate with this file
| | 05:11 | from anywhere our hard drive and it'll export all this
information when I run the file. So let's save this FunButton.as.
| | 05:19 | Go back to ButtonClass.as
| | 05:22 | verify that both files are saved, both the ActionScript
files, the fla file's okay. And then test the movie.
| | 05:29 | And you should get the boarder. Nice.
| | 05:35 | So that is how you use that extremely useful tool.
| | 05:38 | By putting my ActionScript files all in one folder somewhere,
I can recycle all of my content without having to copy
| | 05:46 | my ActionScript files.
| | 05:48 | Extremely useful.
| | 05:50 | When you're doing it, again, make sure
to set up the classpath in the Publish Settings.
| | 05:55 | Make sure to set up the classpath in any movie clips in
the Linkage area that you're going to use in that class.
| | 06:02 | Then you need to
| | 06:04 | make sure when you import the class that you use the
classpath, and then in the class file itself, makes sure you specify
| | 06:14 | the classpath this file is located in.
| | 06:16 | And that's how to set up a classpath.
| | Collapse this transcript |
| Creating useful classes| 00:01 | The key to ActionScript classes is making them useful.
| | 00:05 | You want to make your classes reusable.
| | 00:08 | That FunButton we made is reusable
cause we can apply it to anything we want.
| | 00:12 | We can make any object roll over and have
it get bigger and when we roll out it gets smaller.
| | 00:18 | That is a useful class. Another useful class would be a scrollbar.
| | 00:23 | You can use it to scroll a text field, to control volume of sound,
| | 00:27 | or to control the playback of a movie.
| | 00:30 | The idea is that instead of recreating
a class each time you need an object,
| | 00:38 | if you create one class you can recycle over and over again,
and style it differently so that it looks like a completely
| | 00:46 | new object, but we use the same code.
| | 00:49 | That's the main idea behind classes.
| | 00:52 | So keep in mind, as you create classes, before you create
them, ask yourself, Will I be able to recycle this class?
| | 01:01 | It might not be necessary to recycle the class,
| | 01:03 | but if you could ever see yourself using that type of function
again or the type of functionality that you create with a class,
| | 01:10 | find a way to make a recyclable and reuse them all a time.
| | 01:14 | Let me show you a great example of organized
ActionScript classes and useful ActionScript classes.
| | 01:20 | Open a web browser and navigate to senocular.com.
| | 01:30 | And here's a web site with a bunch of coding information
and a lot of cool stuff. It's a site done by a guy named
| | 01:36 | Trevor McCauley, and if we go to the right
side, if we find ActionScript under the Flash section.
| | 01:43 | Click that area then click ActionScript 3.0.
| | 01:47 | Then click com, then click senocular,
| | 01:49 | and then look this guy has posted all
of his ActionScript classes he's created.
| | 01:56 | This is a great way of organizing your
ActionScript and setting it up and actually
| | 02:01 | If you right-click, you can save
these files and use them yourself.
| | 02:07 | You might not understand what a lot of these do right now,
| | 02:09 | but in the future this is a great tool to learn ActionScript
and to see how well you can organize and recycle
| | 02:18 | ActionScript classes.
| | Collapse this transcript |
|
|
6. Decision-Making and RepetitionUnderstanding conditional statements| 00:00 | If you'd like to follow along in this file it's in Understanding.swf
and that's in the chapter 06 Exercise Files folder.
| | 00:07 | In this movie I'm going to explain what conditional statements
are. Now you already have a concept of conditional statements,
| | 00:13 | because I showed you how to use functions earlier with the
same movie, but let's take it now and look at it with a
| | 00:19 | different perspective.
| | 00:21 | Before the perspective was we
grabbed the boarder, rotate, and move,
| | 00:28 | run the function and we learn how to run a function.
Well let's look at it from the conditional perspective.
| | 00:34 | The first condition is if the boarder
movie clip is inside of the box,
| | 00:40 | then run a function. If it's not
inside of there then nothing will work.
| | 00:45 | That's a conditional statement.
It's basically an if then statement.
| | 00:49 | So, if the boarder is not inside and I have rotate
and move, and I click the button, nothing happens.
| | 00:58 | If I take out move and just put the boarder in,
| | 01:02 | then the conditional statement will check,
if the boarder is in then do something.
| | 01:07 | And if rotate is inside of the box then rotate.
| | 01:12 | Now, as I click run function over
and over again the boarder only rotates.
| | 01:17 | And I can also put in move, and the
boarder will only move and not rotate.
| | 01:25 | So there's a example of a conditional statement. It's just an
if then. If a certain condition is true, then do something.
| | 01:31 | In the next movie we'll learn how to write conditional statements.
| | Collapse this transcript |
| Writing a conditional statement| 00:00 | In this movie I'm going to explain
how to write a conditional statement.
| | 00:03 | If you'd like to follow along, I'm in Writing.fla in the chapter
06 folder of the Exercise Files. Let's take a look at the code
| | 00:09 | that we have so far.
| | 00:12 | And open up the Actions panel.
| | 00:14 | So all we have is our boarder_mc, that's the name of the border
instance on the Stage. We added an event listener called mouse
| | 00:20 | event.click, and the onClick
event handler will handle that event.
| | 00:25 | So, if inside of this event I type event.target, that'll be
referring to boarder_mc because that's what's listening for the event.
| | 00:35 | .y -= 100;
| | 00:42 | If I type that and I test the movie, every time I click
the boarder, it'll go up 100 pixels never coming back down.
| | 00:50 | What if we wanted to control that. If he's in the air click
him then he comes back down. If he's down then click him, he
| | 00:55 | goes up in the air. Let's control
that using a conditional statement.
| | 00:59 | I'm going to click before boarder_mc in line 1,
press Enter a few times to go down a few lines.
| | 01:04 | Let's go all the way up to line 1 and create a variable. Now why did
I push everything down instead of writing the variable underneath?
| | 01:10 | The reason being is because A) it's a pretty good practice
to create variables that you're going to be using
| | 01:16 | all throughout your code at the top of your code.
| | 01:18 | We also want to have our code organized and you want to be
consistent with the way you organize your code and I always have my
| | 01:23 | variables at the top, so I just like to stick with that.
| | 01:26 | So I have var and then a space, and then I'm going to call this
variable jumping and this is going to hold a true or false value
| | 01:33 | that will tell me if he's in the air or if he's on the ground.
So type a colon, and then type Boolean with a capital B,
| | 01:39 | space, equals, space and then we'll set this
with the initial value to false, and a semicolon,
| | 01:47 | because when we start the movie,
he's in the snow, he's not in the air.
| | 01:49 | Then we can modify the jumping
variable as we click on the snowboarder.
| | 01:53 | Let's go inside of our onClick event handler,
| | 01:55 | then just erase event.target.y, and type the word if,
open parenthesis, now type jumping, close parenthesis.
| | 02:04 | When you type a conditional statement you type the word if.
The thing that you put in the parentheses is the condition and
| | 02:10 | that needs to be true or false. Now when I say jumping and I'm
referring to my Boolean datatype variable, just the word jumping
| | 02:18 | means true.
| | 02:20 | So I don't need to say if jumping equals true. I just say if
jumping. So you put the condition inside of parentheses. After the
| | 02:26 | parentheses, go down to the next line. Type an open curly brace, then press
Return or Enter to go to the next line, close curly brace, up arrow, Enter.
| | 02:34 | Now we put what happens if the condition is true inside
of curly braces. So there I'll say event.target.y += 100;
| | 02:48 | And if he's in the air, he'll go back down when you click the button.
| | 02:52 | We also want to set jumping to false. So let's
go to the next line and type jumping = false;
| | 03:01 | But we never, ever set coming to true. So we need
a way to set jamming to true and have him jump up.
| | 03:06 | So we'll click after the close curly brace of the conditional statement,
mine is on line 11. Yours might be on a different line just make sure
| | 03:12 | it's under the if, then press Enter and then type else.
| | 03:17 | And we don't need to type the condition like we
did for the if statement because that just means
| | 03:22 | if this condition is not true.
| | 03:25 | So if he's not jumping, let's go to the next line. Open
curly brace, next line, close curly brace, up arrow, Enter.
| | 03:31 | Now we'll set his y positioning up 100 so that he'll
jump 100 pixels. So type event.target.y -= 100;
| | 03:44 | So if he's not jumping, make him jump, make him move up 100 pixels.
| | 03:47 | Now we need to set our jumping variable to true.
So go to the next line and then type jumping = true;
| | 03:54 | and then press Cmd+Return or Ctrl+Enter to test the movie.
| | 03:59 | Click on the boarder.
| | 04:00 | He goes up. Click on him again. He goes down.
Try it over and over and over again.
| | 04:09 | Oh that's great.
| | 04:10 | Okay, that's how to write a conditional statement and you
don't always have to have an else, you can just have an if.
| | 04:16 | But in this case, we do need an else statement.
| | 04:18 | Just remember when you write a
conditional statement to type the word if
| | 04:21 | and the condition goes in parentheses.
| | 04:23 | Then what happens if that condition is true
| | 04:25 | is inside of curly braces. And an else
statement does not require any parentheses.
| | 04:30 | In the next movie we'll go further into how to evaluate if a
condition is true by using something called conditional operators.
| | Collapse this transcript |
| Understanding conditional operators| 00:00 | In this movie I'm going to explain conditional operators.
If you'd like to follow along this file's called Operators.swf
| | 00:06 | It's inside of the chapter 06 folder of the Exercise Files.
The first question is probably what is a conditional
| | 00:12 | operator? A conditional operator is simply a mathematical
expression used to compare something to something else or to
| | 00:20 | determine whether something is true or not. Here is a list
of the most common operators. There are a lot more than this
| | 00:27 | but these are the ones you're mainly going to be using.
| | 00:29 | The first one is equal to, that is two equal signs. It's different than a
single equal sign. We use a single equal sign to set a value of something.
| | 00:38 | In the last movie we set jumping equal to true or equal to false
using one equal sign. When you use two equal signs you check if
| | 00:45 | something is equal to something else. So in conditional statements you
use two equal signs and not one equal sign. Then we have a less than sign
| | 00:54 | whether to check if something is less than another value. And we have a
greater than sign to determine if something greater than something else.
| | 00:59 | Then we use a greater than sign next to an equal sign
determines greater than or equal to, or less than or equal to.
| | 01:05 | Exclamation point means if something is not something else. So let's
say is not in this area where my mouse is. If X were a true or false
| | 01:15 | condition, like in the last movie we used jumping. So if we
said if!jumping that means if not jumping or if jumping is false.
| | 01:24 | Then we have exclamation point, equal sign. That's
to say if something is not equal to something else.
| | 01:30 | And these are the basic conditional operators that you'll
be using. In the next movie we'll learn how to write them.
| | 01:35 |
| | Collapse this transcript |
| Using conditional operators| 00:00 | In this movie I'm going to explain how to use the different
conditional operators. This file is called Using_Operators in
| | 00:06 | the chapter 6 folder.
| | 00:07 | Now what I'm going to do is compare this boarder
| | 00:10 | against this boarder. So the first thing you want to do
is go to the selection tool, press v on your keyboard.
| | 00:16 | Select the bottom right snowboarder and
let's give him an instance name of boarder2._mc.
| | 00:22 | Click on the boarder on the left and let's
give him an instance name of boarder1_mc.
| | 00:28 | Click on the first keyframe of the actions layer and open up
the Actions panel. I have a movie clip called check_mc, that's the
| | 00:34 | top left button
| | 00:35 | and it just basically has a really simple listener and it doesn't
do anything yet. So let's have it evaluate some conditions.
| | 00:41 | So I'm going to click on line 5 and press Tab on my
keyboard to go in a little bit and then I'm going to type
| | 00:49 | if(boarder1_mc.height
| | 00:55 | That means how tall it is not how high up it is. Not the
y positioning but the height of the object itself.
| | 01:02 | > boarder2_mc.height)
| | 01:11 | Enter, open curly brace, Enter again,
close curly brace, up arrow, Enter,
| | 01:16 | and then we'll just trace("boarder 1 is taller than boarder 2");
| | 01:35 | And I'm going to close out the Actions panel.
| | 01:37 | So we have the height of boarder 1 is 152 pixels.
I'm finding that it the Properties Inspector.
| | 01:43 | And the height of boarder 2
| | 01:45 | is 45.5 pixels. Let's test the movie and
just click the check condition buttons.
| | 01:50 | Boarder 1 is taller than boarder 2.
| | 01:58 | It's as easy as that.
| | 02:00 | Go back to the actions.
| | 02:02 | And let's set up an else statement.
So after the close curly brace of my if statement,
| | 02:07 | I'm going to press Enter on my keyboard and type the word else.
Go to the next line, open curly brace, next line, close curly brace,
| | 02:13 | up arrow, and then Enter to get between
the curly braces and then here let's trace
| | 02:20 | ("the condition is not true");
| | 02:29 | Make sure you put all of the condition
is not true inside of quotes.
| | 02:33 | So if we were to check if the boarder1_mc.height is less than, so
I'm just going to change that greater than sign to a less than sign.
| | 02:40 | I test the movie and it will say, when I
click the button, the condition is not true.
| | 02:48 | Now let's check a different property than height. Let's
just check the rotation, cause neither of them are rotated.
| | 02:52 | If we take a look at them, neither of them are rotated at all.
| | 02:55 | So going back to the actions, I'm
going to check if something 's equal.
| | 03:00 | I'm going to type boarder1_mc.rotation
| | 03:05 | and then replace the less than sign with two equal signs.
Remember not one because that would be setting a value.
| | 03:10 | Two equal signs is a comparison operator. And then
we'll change the .height after boarder2 to .rotation
| | 03:17 | and then we'll change the trace
message to say "the rotation is the same"
| | 03:25 | Test the movie. Click the button. Rotation is the same. Great.
| | 03:33 | Now what we can do is we can rotate it a little bit.
| | 03:39 | Just take boarder1 and rotate it upside down or something.
| | 03:43 | So he's doing a flip, something like that.
| | 03:46 | Let's go back to our actions keyframe and open up the Actions
panel. So if the rotation is true it'll trace rotation is the same.
| | 03:53 | If not, it will trace the condition is not true.
| | 03:56 | After that semicolon, let's press Enter and then type
| | 04:01 | boarder1_mc.rotation = boarder2_mc.rotation;
| | 04:17 | So if the rotation is the same we're
going to get the trace statement.
| | 04:20 | If it's not we'll get the statement
that says the condition is not true.
| | 04:24 | And then we'll fix the rotation by
making them equal in the next line.
| | 04:28 | So let's test the movie.
| | 04:31 | Click on the button.
| | 04:32 | The condition is not true. Let's close Output window.
| | 04:35 | And the boarder is rotated back to the same rotation and
obviously you don't have to just set two values to be the same.
| | 04:40 | We can do anything we want if the condition is true, or
if it's not true. There's a look at how to use the different
| | 04:45 | conditional operators.
| | Collapse this transcript |
| Setting up alternate conditions| 00:00 | In this movie I'm going to explain how
to set up alternate conditions. So you
| | 00:03 | can set up one condition to check,
see if that's true. If that's not true,
| | 00:07 | you can check condition 2. If that's not
true, you can check to do condition 3 and
| | 00:12 | so on down the chain as long as you
want. I'm in Alternate.fla in the chapter
| | 00:16 | 06 folder. Let's go to the first
keyframe of the actions and over to the
| | 00:19 | Actions panel. We're starting out with
basically the same thing we did in the
| | 00:23 | last movie. So what we do is we'll
write a basic conditional statement.
| | 00:27 | So let's type if, open parenthesis, and
then the condition. So let's use rotation.
| | 00:33 | boarder1_mc.rotation == boarder2_mc.
rotation). Next line, open curly brace,
| | 00:47 | Enter or Return, close curly brace,
up arrow, and then Enter. So if the
| | 00:51 | rotation is equal, then we can trace
"condition 1 is true." Make sure you put
| | 01:00 | condition 1 is true inside of quotes.
Let's close that out with a close
| | 01:04 | parenthesis and a semicolon. Now let's
check to see condition2. So go to the
| | 01:09 | next line, after the close curly brace
of the if statement Now we'll type else
| | 01:13 | and then if. So and if is condition 1.
So it's first going to check if
| | 01:17 | condition 1 is true. If that is not
true, it's going to do condition 2,
| | 01:22 | which is the else if. So if this is false,
then check to see if this next condition's
| | 01:28 | true. So I'm going to type an open
parenthesis and let's type boarder1_mc.alpha
| | 01:36 | == boarder2_mc.alpha, close parenthesis.
Enter, open curly brace, Enter again,
| | 01:47 | close curly brace, up arrow, Enter.
Then we can trace("condition 2 is true");
| | 01:57 | Make sure you put this all in quotes.
So the first thing that's going to happen
| | 02:02 | when we click the button it'll check to
see if the rotation is the same on both
| | 02:06 | the boarders, which it's not. So it
should go to the second condition. Else if
| | 02:12 | the alpha is the same, then trace
condition 2 is true. Close Actions panel.
| | 02:18 | Test the movie. Click the button.
Condition 2 is true. Let's mix it up and
| | 02:26 | write a condition 3. Go back into your
actions. Replace the first equal sign of
| | 02:35 | line 9, after we say the alpha, with
an exclamation point. This should read
| | 02:41 | else if(boarder1_mc.alpha != boarder2_
mc.alpha) trace condition 2 is true.
| | 02:50 | Let's do one more else if. Then I'll
say (boarder1_mc.y < boarder2_mc.y)
| | 02:58 | Now this will check to see if the y
positioning of boarder 1 is higher than boarder 2.
| | 03:16 | Remember we're using less than
because as we approach 0 we're getting higher
| | 03:21 | on the Stage and not lower. Next line,
open curly brace, Enter, close curly
| | 03:26 | brace, up arrow, Enter. Now type trace
("condition 3 is true"); Test the movie.
| | 03:40 | Check condition. Now we get condition 3
is true. When the code runs, it checks
| | 03:46 | to see if condition 1 is true. If not,
it checks to see if condition 2 is true.
| | 03:51 | And if not, it checks to see if
condition 3 is true. Then on line 13, I'm going
| | 03:56 | to switch that less than sign to the
greater than sign. If you'd like to only do
| | 04:01 | something if none of the conditions
are true you're going to use just an else
| | 04:05 | statement. So on line 16 after the
closed curly brace, I'm going to press
| | 04:09 | Enter, then type else, Enter again,
open curly brace, Enter, closed curly brace,
| | 04:14 | up arrow, Enter. Type trace
("no conditions are true"); Now we'll test the movie.
| | 04:29 | Click the button and no conditions
are true. And there's a look at how
| | 04:33 | to set up alternate conditions. In the
next movie, I'll explain how to set up
| | 04:37 | conditions to check if multiple conditions
are true or if one condition or another is true.
| | Collapse this transcript |
| Writing compound conditions| 00:00 | In this movie we'll take a look at how to write compound
conditional statements. If you're following along we're in
| | 00:05 | Compound.fla in the chapter 06 folder
with all the other exercise files.
| | 00:10 | To understand a compound conditional statement we first
have to look at the anatomy of a conditional statement. So
| | 00:15 | let's go to the first keyframe of the actions layer. Press
Option+F9 on the Mac, F9 on the PC to open up the Actions panel.
| | 00:21 | From line 5 to line line 8, we have a conditional statement.
| | 00:26 | Inside of the parentheses after the word if
| | 00:34 | We have the condition.
| | 00:36 | Something we evaluate by using a conditional
operator like two equal signs is called an expression.
| | 00:44 | So this is one expression. One condition can hold
multiple expressions. For example, what if you wanted to run
| | 00:54 | line 7 trace condition is true if the boarder's boarder1
rotation was equal to boarder2 rotation and boarder1's alpha
| | 01:04 | was equal to boarder2's alpha. That would
be placing two expressions inside of one condition.
| | 01:11 | So in this movie we'll take a look at using and operators
and the or operators to put multiple expressions into
| | 01:17 | one condition.
| | 01:18 | Go to line 5. Click after boarder2_mc government
.rotation and press Return or Enter on your keyboard.
| | 01:25 | You don't have to go to multiple lines, if you're going
to write compound conditional statements. I'm just doing this
| | 01:31 |
to make it easier to read. Now I'm going
to type the symbol for and, and that is two &&.
| | 01:36 | Type a space and then type boarder1_mc.alpha == boarder2_mc.alpha
| | 01:54 | So this condition is if the first expression is true,
or in other words, the boarders have the same rotation,
| | 02:04 | and the second expression is true, the alphas
are the same, then we'll get condition is true.
| | 02:12 | Let's click after the close curly brace of the condition and
write something that happens if the condition is not true.
| | 02:17 | Go to the next line. Type else.
| | 02:20 | Go to the next line, open curly brace, next line, close curly
brace, up arrow Enter or Return to go between to curly braces
| | 02:26 | and type trace("condition is false");
| | 02:37 | Now let's test the movie and see what we get. Press Cmd+
Return or Ctrl+Enter on your keyboard to test the movie.
| | 02:45 | Click the check condition button, and we get condition is false.
| | 02:51 | The reason we get condition is false is because the rotation is
not the same of the two boarders, and we can see that plainly
| | 02:58 | in our Flash movie, but the alpha is the same.
| | 03:00 | Let's close these Windows.
| | 03:03 | Let's go back to our code. So there's
one way to write a compound condition.
| | 03:06 | The other way is using the or operator.
| | 03:10 | Let's select the two ampersands or the
and symbol and create the or symbol.
| | 03:15 | That's made by creating two pipes.
| | 03:18 | To create the pipes hold Shift on your keyboard and
press backslash. Now the full condition will read
| | 03:23 | if the expression one, or in other words,
if the boarders have the same rotation or
| | 03:30 | expression 2, the boarders have the same alpha, then the
condition is true. So if the rotation is the same or if the alpha
| | 03:36 | is the same then the condition,
| | 03:41 | that means all of the expressions within
the parentheses, will give us a value of true.
| | 03:46 | Let's test the movie by pressing
Cmd+Return or Ctrl+Enter on your keyboard.
| | 03:54 | You might have to pull out the Flash player window.
| | 03:57 | Then click the check condition button then we get condition is true.
| | 04:04 | We're getting condition is true, because even though
the rotation is different, the alpha is the same.
| | 04:11 | So only one of these expressions has
to be true if you use the or symbol.
| | 04:18 | And there's a look at how to write compound conditions.
| | Collapse this transcript |
| Understanding loops| 00:00 | In this movie we're going to talk about loops. If you'd like to
follow along the file is called Understanding_Loops.swf and that's
| | 00:06 | in the chapter 6 folder. So let's take a look at this file. Let's
say you wanted to create this in design mode. You'd have to drag
| | 00:14 | an instance of this boarder onto the Stage, reduce
the alpha. Drag another instance on the Stage,
| | 00:20 | reduce the alpha. Rotate them or if you're smooth,
you'd probably copy the last one and rotate it a little bit.
| | 00:27 | Then you could do the steps over and over and over again,
| | 00:29 | and then you'd have to make sure that they're spaced out perfectly,
and that the rotation is incrementing the right amount every single time.
| | 00:36 | It wouldn't be that hard, but it would be
very tedious to create this in design mode.
| | 00:41 | In ActionScript you can create something called a loop
that will run over and over and over again however many times
| | 00:46 | you specify that can create the spacing and the rotation and the
alpha for you. What this loop is doing is it starts the boarder
| | 00:53 | off with a low alpha. No rotation. Then every time the loop
runs, it runs six times, it adds a little bit to the rotation.
| | 01:01 | It rotates 45 degrees and moves up and to the right so many pixels. It
runs the third time and does the same thing, rotates another 45 degrees,
| | 01:09 | moves up and to the right so many pixels. So we have perfectly even
spacing, even rotation and I can run it as many times as I want.
| | 01:17 | If I wanted to run this a hundred times, it would take half of a second
to change the code. So that's what a loop is. A loop is a function that
| | 01:23 | runs as many times as you specify. Let's
learn how to write them in the next movie.
| | Collapse this transcript |
| Creating a code loop| 00:00 | In this movie we'll talk about how to create your own code
loop. If you're following along I just created a new document and
| | 00:06 | named the first layer actions. Let's click on the first
keyframe of the actions layer and open up the Actions panel.
| | 00:11 | The first step in creating a loop is to type the word
for. It should turn blue. Then type (var i:Number = 0;
| | 00:25 | This probably looks really familiar because we've
done this before. We've created variables,
| | 00:30 | and set the datatype. That's all we're doing here. We're
creating new variable called i. It's a number equal to zero.
| | 00:35 | Now when you create a for loop, you don't have to use the
variable i. It's just a common practice that Flash developers do.
| | 00:43 | i stands for index. This is also known as an index loop.
| | 00:47 | After the semicolon, type a space, type i < 20;
| | 00:53 | This loop will run over and over and over
again until i is equal to 20 or greater than 20.
| | 01:00 | So this code will run over and over again until that
condition is false or until i is greater than or equal to 20.
| | 01:07 | After the code runs, and this code is
still true, what we specify here will happen.
| | 01:11 | Type i, then two + signs, then close parenthesis.
| | 01:15 | i++ means increment i by 1, or add 1 to the current
value of i. So the code will run once with i at 0.
| | 01:24 | When it runs the second time i will be 1. Then i will
be 2, and then all the way up to 19. It won't run at 20
| | 01:32 | because when i is 20, it'll no longer be less than 20. But
it will run 20 times because it will start at 0 instead of 1.
| | 01:41 | Now let's write the code that actually happens inside of
the loop. After the close parenthesis, go to the next line.
| | 01:51 | Open curly brace, next line, close curly brace, up
arrow, and then press enter to get in between curly braces.
| | 01:53 | Now all we'll do here is write a simple trace
statement that will trace the value of i. Type trace(i);
| | 02:00 | Make sure you don't put it in quotes.
| | 02:03 | So this code will run 20 times. Each time it will trace the value
of i. So the code between the curly braces, trace(i), will run
| | 02:13 | over and over and over again until this condition is no longer true.
| | 02:19 | Let's test the movie and see the results in the Output window.
| | 02:25 | I'm going to drag the Output window so we can look at our code.
| | 02:31 | So we see the code ran once at zero, then all the way up to 19.
| | 02:36 | And so that is how to create a for loop.
| | 02:39 | Now that you know how to write a loop, you can put anything you
want inside of your loop. You don't have to use a trace statement.
| | 02:44 | You can move x and y values, anything you want and it'll run over
and over again as many times as you specify, Now that we can do this
| | 02:51 | let's use a loop to drag instances out of our library at runtime.
| | 02:56 |
| | Collapse this transcript |
| Using a loop to generate instances of a class| 00:00 | Now we'll use a loop to drag instances of mcBaorder out of our
library at run time. Now there's a few steps that you have to do to set
| | 00:08 | up in order to drag something out of your library at run time
and by the way, if you're following along I'm in Generating_Instances
| | 00:14 | that's in the chapter 6 folder. Let's go to our library.
| | 00:17 | Let's right-click or Control-click
mcBoarder in the library and select Linkage.
| | 00:24 | Then we need to check Export for ActionScript.
| | 00:27 | If we don't check this then we can't access this object
with ActionScript, so make sure you check this box.
| | 00:33 | We have communicated to an object with ActionScript before, but
that's only after we gave it an instance name. Here we're going
| | 00:39 | to drag it out of the library at run time,
so we need to check export for ActionScript.
| | 00:43 | The text next to the word Class, mcBoarder,
| | 00:47 | that's the same as our instance name by default. That will be
the class name of your movie clip when you call it out of your
| | 00:51 | library at runtime. Click OK.
| | 00:54 | You get a little message from Flash saying that they'll
write the class file for you. Click OK. Say thanks.
| | 01:02 | Click on the first keyframe of the actions
layer and open up your Actions panel.
| | 01:06 | Now let's create the for loop but first I'm going to type the word var then a space and then I'm going to create a variable that's going to
| | 01:13 | hold my boarder. So type the word boarder and this will represent
our boarder, and type a colon. This time you're not going to type a
| | 01:21 | prebuilt datatype. You're going to type the symbol name that's
inside of your library. The same name that we looked at next to class
| | 01:27 | in that menu that just popped up when we selected Linkage.
So type mc then a capital B for Boarder, then type a semicolon.
| | 01:34 | Now go down a few lines and then type for(
| | 01:38 | Now we'll do the same thing we did in last movie
to create a loop. Type var i:Number = 0; i < 6;
| | 01:53 | That's how many times the code will loop.
| | 01:59 | Then I'll type i++) Go to the next line, open curly
brace, next line, close curly brace, up arrow, Enter.
| | 02:08 | And now we'll write the code that loops.
So now we need to type boarder =
| | 02:13 | and then I need to create a new instance of the
mcBoarder class. That's the class name of our movie clip.
| | 02:23 | That's what we selected when we chose Linkage and
it was written in that pop-up window under class.
| | 02:28 | Let's type new mcBoarder with a capital B, (); This will
create an new instance of the mcBoarder symbol that's inside
| | 02:41 | of our library. Let's go to the next line. In order to make
an object actually appear on the Stage we need to call something
| | 02:48 | called add child. So type add and then child with a capital C.
| | 02:53 | And this will make our boarder visible.
| | 02:55 | So type (boarder);
| | 03:02 | Now let's test the movie to see what happens.
| | 03:07 | If you look at the top left of the
Flash player, you'll see your boarder.
| | 03:11 | Let's go to Debug - List Objects.
| | 03:17 | Then you can verify that there are six instances of your class.
| | 03:21 | Then it tells you the instance name.
Flash creates an instance name for each one for you.
| | 03:25 | Instance1, Instance4, Instance6, etc.
| | 03:30 | Let's close the Output window and
then close the Flash player window.
| | 03:34 | So now that we know how to bring an instance out of our
library at runtime, in the next movie we'll learn how to place
| | 03:41 | those instances.
| | 03:42 |
| | Collapse this transcript |
| Placing loop-created instances| 00:00 | In this movie we'll talk about placing instances using
your loop. If you're following along we're using the same file
| | 00:06 | from the last movie.
| | 00:07 | If you're just coming in right now, you can find this file
inside of the 6-10 folder in the chapter 06 Exercise Files folder.
| | 00:15 | After addChild(boarder)
| | 00:17 | press Enter on your keyboard and then let's
set the boarder x position. So type boarder.x =
| | 00:26 | Then we'll have the x position equal i * 75;
| | 00:34 | This will enable us to place our instances dynamically.
| | 00:37 | i will be different
| | 00:38 | every time this loop runs. So it'll start at zero. So the x will
be 0 times 75, which is zero. The next time it will be 1 times 75
| | 00:47 | and then 150, and then 225, etc.etc.
| | 00:51 | So let's test the movie
| | 00:55 | and Flash has placed the instances for us.
| | 00:58 | Now what we'll do is make the boarder fly off
of the slope. So let's close out that window.
| | 01:03 | Close the Actions panel.
| | 01:05 | Now, how do you get the boarder starting position at the
top of the slope? The fastest and easiest way to do it
| | 01:11 | is just to drag the instance out of the
library and place him exactly where you want him.
| | 01:16 | I'm going to use the keyboard
| | 01:18 | down and right arrows to place him. That looks good. And then
just take a note of the x and y position. That'll be an x of
| | 01:25 | 127, right here. And then a y of 271. We'll just
truncate that number. We don't need the .1.
| | 01:34 | So at this point, you can take a second to write down those numbers.
| | 01:39 | And then just select your instance and delete
it off the Stage. We don't need it anymore.
| | 01:44 | Go back to your Actions panel.
| | 01:46 | Just make sure you're on the first keyframe of the actions
layer. Now instead of just defining the variables inside of the
| | 01:51 | loop, we need to create variables that hold the x and y
positions outside the loop or at least give them initial value.
| | 01:58 | So the first boarder will be placed in the exact
right spot and then we can increment however we want.
| | 02:03 | So after the first line of code I'm going to press Enter on my keyboard.
Then I'll type var and then a space and we'll create a variable to hold
| | 02:10 | the boarder's x position. So type boarder,
capital X, colon, Number with a capital N,
| | 02:17 | space equal space and then we'll set the initial x value of
our boarder and that was the same thing we wrote down earlier,
| | 02:23 | which was 127. Now let's just select this line of
code, press Ctrl or Cmd+C on the keyboard to copy it.
| | 02:31 | Go to the next line. Press Ctrl or Cmd+V to paste that code.
| | 02:35 | Change the capital X to a capital Y, and change
the number 127 to the y position we took down earlier,
| | 02:42 | which was 271. Now let's go inside of our loop. So
inside of our loop we'll set the boarder's x position to
| | 02:50 | the boarder x. So instead of i times 75,
I'm just going to type boarder, capital X;
| | 02:58 | Let's copy and paste that line of code. So select that line.
| | 03:01 | Cmd+C or Ctrl+C on your keyboard. Go to the
next line. Paste it using Cmd or Ctrl+V.
| | 03:07 | Change the x's to y's. Make sure the casing is the same.
| | 03:11 | Now if you test the movie, all instances are placed in the same spot.
| | 03:16 | So now all we need do is every time the loop runs, we need
to add something to the x and y values to space these out.
| | 03:25 | After we set the boarderY, let's go to
the next line and then type boarderY. -=
| | 03:33 | this will subtract something from its
current value, so I'm going to type here 100.
| | 03:40 | Let's do the same thing on the next
line for the boarderX. So type boarderX
| | 03:45 | instead of minus we're going to use plus because minus
will make him go up. We want to make him to go to the right
| | 03:50 | so we'll use += 100; Now test the movie and behold.
| | 04:02 | If you pull out of your movie, scale it up a little bit,
| | 04:07 | you can see all the boarders.
| | 04:11 | If you want them all on the screen same time,
| | 04:13 | you can use increment by a lower number.
| | 04:15 | Let's go for 75. So I'm to change both of those 100s to 75s.
| | 04:19 | And there we go.
| | 04:23 | Let's just close this window.
| | 04:24 | You can feel free to change the 75s to whatever you want
and this is kind of the process that you go through.
| | 04:29 | You can perfect your spacing in this way, so just change the
numbers to where ever you want, whatever makes you happy
| | 04:36 | Now let's make him do a back flip. So now we're going
to create a new variable to hold the rotation property.
| | 04:42 |
So after line 3 where we declare the boarder y variable, let's
go to the next line. Create a new variable and call it boarder,
| | 04:49 | capital R and that'll be for rotation. Type a colon, that's going
to be a number as well, with a capital N, space, equal, space, 0.
| | 04:58 | We don't want it to rotate at all at first because if he's flipping while
he's still in the snow that's actually a fall and not a flip. So let's start him
| | 05:04 | out with a rotation of zero, and then when
he's in the air, we'll start him rotating.
| | 05:07 | Let's go down to our for loop.
| | 05:08 | After we set the boarder y property on line
11, press Enter and type boarder.rotation =
| | 05:20 | boarder, then a capital R, then a semicolon. Now in order for the
rotation to change, we'll have to add to it each time this loop runs.
| | 05:28 | So after we add 75 to the boarderX inside of the code loop,
| | 05:32 | let's press Enter and type BoarderR -= I'm
typing minus so he does a backflip, then 45;
| | 05:42 | and then test the movie
| | 05:44 | and the border is doing a backflip. So if you wanted to
modify the alpha or any other property, this is how you'd do it.
| | 05:51 | Just create a variable to hold it and every time the loop runs,
| | 05:55 | set the value and increase or decrease the value however you want.
| | 06:00 | And that is how to place instances using code.
| | Collapse this transcript |
|
|
7. Using Math...and Loving It!Understanding the math class| 00:02 | In this chapter we'll learn a little bit about the math class. A
lot of people have sort of a bad taste in their mouth about math,
| | 00:08 | but in Flash math is actually pretty easy to use.
| | 00:12 | Consider this example, let's say we
want to create a new instance of a class.
| | 00:17 | We have to create a variable,
| | 00:20 | with an instance name, datatype it to whatever class,
| | 00:25 | make it equal to a new instance of that class name. Then after
that we're free to do whatever we want with that instance.
| | 00:33 | With the math class we don't even have to do that.
Because math never changes, we just type the word math
| | 00:39 | capital M, and then a dot and we can use
| | 00:43 | all kinds of methods of the math class.
| | 00:46 | So getting a random number is as easy as clicking on random
| | 00:50 | and that would give us a random number.
We'll cover that a few movies down the road.
| | 00:54 | Just know for now, that math is a little bit different than
other classes in that we don't have to create a new instance.
| | 01:00 | In the next movie, we'll start using math by doing some basic math.
| | Collapse this transcript |
| Using basic math operators| 00:00 | In this movie we'll learn how to perform some basic math
operations. If you want to follow along just open up a new document
| | 00:06 | and rename the first layer actions.
| | 00:09 | Let's click on the first keyframe of the
actions layer and open up the Actions panel.
| | 00:14 | To test out our math we'll just use trace
statements. So type trace (2 + 4);
| | 00:28 | and then test the movie.
| | 00:32 | Flash adds two and four and gives us six in the Output window.
| | 00:40 | Let's change the plus to an asterix. An asterix is the sign
for multiplication in Flash, so this'll trace 2 times 4.
| | 00:49 | Test the movie.
| | 00:51 | And you get 8.
| | 00:56 | A forward slash is what we use to show division,
so let's replace that asterix with a forward slash.
| | 01:03 | Test the movie.
| | 01:06 | You can divide 2 by 4.
| | 01:14 | Performing basic math operations is pretty simple and
if I were to do more math to happen after 2 divided by 4,
| | 01:20 | I could type a space and I could type plus space 1.
| | 01:25 | Now I'll test the movie.
| | 01:28 | Notice that Flash follows the typical math order of operations.
| | 01:32 | 2 is divided by 4
| | 01:35 | and then 1 is added to that result.
| | 01:37 | So math in Flash works just like math in math class.
| | 01:41 | And that's how to perform basic math operations.
| | Collapse this transcript |
| Generating random numbers| 00:00 | In this movie we'll learn how to generate random numbers
| | 00:03 | and again I'm just in a new blank document
| | 00:06 | with layer one renamed to actions. Let's click the first
keyframe of the actions layer and open up the Actions panel.
| | 00:12 | No we'll use a simple trace statement once again to check
out a random number. So type the word trace, open parenthesis,
| | 00:20 | and then type Math with a capital M,
| | 00:25 | .random,
| | 00:27 | give an open and close parentheses,
| | 00:29 | for the random and then one more close
parenthesis to end the trace statement,
| | 00:34 | and a semicolon. Test the movie
| | 00:38 | and you get in the Output window
| | 00:41 | a random number between 0 but not including 1
| | 00:46 | If we want to get more random numbers, just test
the movie again by pressing Ctrl+Enter or Cmd+Return.
| | 00:56 | And you're probably wanting to know how
you can get a whole number out of that.
| | 01:00 | There's a few techniques.
| | 01:04 | Let's close those Windows and after the
open and close parentheses of Math.random,
| | 01:08 | so not outside of the trace statement,
| | 01:12 | type a space
| | 01:13 | type an asterix, then type 10.
| | 01:17 | This will multiply our random number
| | 01:20 | by 10.
| | 01:21 | So instead of the giving us a number between 0 and
| | 01:24 | almost 1
| | 01:26 | it's going to give us a random number between 0 and
| | 01:30 | just before 10.
| | 01:34 | So now we've got 2.3.
| | 01:39 | Pressing Cmd+Return Ctrl+Enter to test it over and over again.
| | 01:43 | 7, 4, 8, 4, 6.
| | 01:46 | So you can get random numbers from 0 to 10 by
doing this. If your numbers don't match my numbers,
| | 01:52 | that's great,
| | 01:53 | because they're random numbers. They shouldn't match mine.
| | 01:56 | If they do,
| | 01:57 | Then take a picture of your screen and take a picture
of my screen because something amazing just happened.
| | 02:03 | So that is how to generate a random number.
We can multiply the random by anything we want to get
| | 02:07 | a random range. In the next movie, we'll talk about how to
round the numbers and to use different rounding techniques.
| | Collapse this transcript |
| Using different techniques to round numbers| 00:00 | In this movie, we're going to talk about
how to use different techniques to round numbers.
| | 00:05 | Now, you may be thinking why would you want to round numbers?
| | 00:09 | I have an example here of dice.
| | 00:12 | Let's say you wanted to get a number from 1 to 6.
| | 00:17 | You have to use a particular rounding technique
| | 00:19 | to get that
| | 00:20 | particular range. If you'd like to follow along
| | 00:23 | we're in Rounding.fla in the Chapter 07 Exercise Files folder.
| | 00:28 | On the Stage,
| | 00:29 | we have an instance of dice and our button called random
| | 00:34 | with an instance name of random_mc.
| | 00:38 | In our actions
| | 00:41 | the random_mc has an event
listener to listen for a mouse click
| | 00:45 | and the skeleton of an event handler.
| | 00:48 | So let's test the movie.
| | 00:52 | See the die roll and so for right now,
the random button doesn't do anything.
| | 00:59 | Let's close this and for now let's just click on that
| | 01:03 | die on the Stage and delete it. We'll bring it out when we
have a solution to how we can get a number between 1 and 6.
| | 01:10 | So let's click on the first keyframe of
the actions layer and open up the Actions panel.
| | 01:14 | And then inside of the onClick event
handler I'll type trace(Math.random() * 6);
| | 01:36 | This will give us a number
| | 01:38 | between 0 and not including 6 and it will have decimals
| | 01:44 | So let's just test the movie to verify that.
| | 01:47 | Click the random button.
| | 01:51 | Keep on clicking it.
| | 01:55 | Okay, so 0 isn't popping up in there.
| | 01:58 | One way that we can do this is add 1 onto the result.
| | 02:02 | So if it's going to give us a number between 0
and 5 we can add 1. But we also want a whole number
| | 02:06 | because what we're going to do is
| | 02:08 | tell the die to go to and stop
| | 02:12 | on the frame that corresponds with the number on the die.
| | 02:16 | So we cannot tell it go to and stop
| | 02:19 | on frame 5.319457.
| | 02:23 | That just won't work. So let's close the Output window.
| | 02:27 | Close the swf file.
| | 02:29 | Let's go back into our code.
| | 02:31 | The first technique of rounding is called math.round
| | 02:35 | and that will either round the number up or down.
| | 02:38 | Let's say you're working with 4.4 it will
round it down to 4. 4.6 will be rounded up to 5.
| | 02:43 | Right after the trace statement inside of my event handler
| | 02:47 | after the open parenthesis, I'm going to type Math with a capital M,
| | 02:52 | .round open parenthesis
| | 02:57 | and then put the close parenthesis after the 6 and
before the close parenthesis of the trace statement.
| | 03:05 | Let's test the movie.
| | 03:08 | Click the random button. We get a 4, great.
| | 03:11 | We now have whole numbers.
I'm going to move the Output window.
| | 03:16 | So I can click the random button and see the results.
| | 03:20 | Click it few times. Oh, there's a 0.
| | 03:23 | We're getting a 6 though.
| | 03:27 | But 0 is not going to work to roll dice.
| | 03:30 | We need to have a range between 1 and 6
| | 03:34 | So Math.round will round a number up or down.
| | 03:40 | The next technique to round numbers is called math.floor.
So let's replace the word round with floor.
| | 03:49 | An easy way to remember what math.floor does is to think
of the floor. Math.floor always rounds down to the floor.
| | 03:56 | Let's test the movie and look at the result.
| | 04:06 | I got a 0. I got 5. Let's see if I get a 6.
| | 04:10 | I don't get a 6.
| | 04:13 | So that will always round down to the
floor and give us a number between 0 and 5.
| | 04:19 | So it looks like we'll need a technique that always rounds up.
That should give us 1 to 6. What's the opposite of floor?
| | 04:26 | Ceiling.
| | 04:28 | So we're going use math.ceiling
| | 04:31 | to round up.
| | 04:33 | Except for in Flash they abbreviate
it so it's just called math. ceil.
| | 04:38 | So let's select the word floor
| | 04:41 | change it to ceil, c e i l.
| | 04:43 | Now test the movie.
| | 04:47 | Click the random button.
| | 04:51 | Move the Output window if you need to.
| | 04:54 | Let's see if we get any 0s. Oh we got a 6 and we got a 1.
| | 04:59 | No zeros. That looks like we found a winner
| | 05:06 | So let's close the Actions panel.
| | 05:09 | Go to our library,
| | 05:10 | click on the dice player
| | 05:14 | drag an instance of dice onto the Stage.
| | 05:18 | Let's give it an instance name of die1_mc.
| | 05:23 | And we'll click on the first keyframe of the actions
layer to open up the Actions panel. All we have to do
| | 05:29 | is take the trace statement.
| | 05:31 | So just select the word trace. And we'll replace that with
die1_mc.gotoAnd, with a capital A, Stop with a capital S.
| | 05:47 | And we don't need to put in the open and close parentheses
because we're going to use the ones from the trace statement.
| | 05:54 | The way that the die file is set up
| | 05:56 | is on the first frame it has a 1 on the die,
on the second frame it has a 2, and so on to 6.
| | 06:03 | When we test the movie, we'll get a random number
| | 06:07 | on the die.
| | 06:09 | Click random
| | 06:14 | and we get random die members.
| | 06:17 | Let's say you wanted to roll two at the same time.
| | 06:20 | Close out the Actions panel.
| | 06:23 | Drag an instance of dice onto the Stage.
| | 06:26 | Make sure that you're on the dice layer.
| | 06:32 | Give your die an instance name, die2_mc.
| | 06:39 | Go back to your Actions panel, in
the first keyframe of you actions layer
| | 06:44 | copy the line of code where we select the random number,
| | 06:48 | for die1 it's on line 5.
| | 06:51 | Press Cmd or Ctrl+C on your keyboard
to copy it. Go to the next line.
| | 06:55 | Paste the code.
| | 06:57 | Change die1 to die2.
| | 07:01 | So we'll get a random number for die1 and
we'll get a different random number for die2.
| | 07:07 | Because we're using Math.ceil the number will always
round up and give us 1 to 6. Let's test the movie.
| | 07:14 | Click random.
| | 07:15 | Two sixes, nice.
| | 07:20 | There we go.
| | 07:21 | It's amazing.
| | 07:23 | So if we keep on clicking the random
button and see your random numbers.
| | 07:27 | Let's close this out. So that's how to use
the different techniques of rounding numbers
| | 07:32 | and just remember that round will round up or down, floor will
round down to the floor, ceil will round up to the ceiling.
| | Collapse this transcript |
|
|
8. Using Text and ArraysCreating a text field| 00:01 | In this movie we will talk about
creating a text field using ActionScript.
| | 00:04 | Now you might be wondering why on earth would I want to create a text field
in ActionScript when I can just draw one out and write some text in it?
| | 00:11 | That's a very good question because you don't always
want to create a text field with ActionScript.
| | 00:15 | You want to create a text field with ActionScript when the
| | 00:18 | user might not necessarily ever want to see that text field.
| | 00:22 | For example, in the next chapter we'll be creating a game
| | 00:27 | and we'll make some text display if you win the game.
| | 00:30 | If the user never wins the game, we don't need to display
the text, so there's no point in taking up the space.
| | 00:37 | So the reason why you'd want create a text field with ActionScript
is to only have a text field take up space or exist when
| | 00:44 | the user needs to see it. If it's going to show all the time then
by all means, please create it in design mode. Now let me show
| | 00:50 | you how to create a text field. I'm in a new document
| | 00:53 | and I have layer one renamed to actions. Let's
click on that keyframe and open up the Actions panel.
| | 00:59 | Let's create a new variable
| | 01:01 | called myText with a capital T, type a colon. The datatype
will be TextField, capital T and a capital F for Field.
| | 01:11 | Then type space, equal, space, new, space, TextField();
| | 01:20 | We just created a variable with a text field datatype
equal to a new instance of the text field class.
| | 01:26 | In order to see this text field, we need to use addChild.
So go the next line and type addChild with a capital C,
| | 01:35 | (myText);
| | 01:41 | Now if we test the movie
| | 01:43 | we won't see anything because we don't
have any text in the text field.
| | 01:46 | So let's add some text in our text field.
| | 01:48 | Go to the next line, then type myText with a capital T, .text,
| | 01:55 | space, equal, space, and then put some kind of text in quotes.
| | 02:00 | The text property of a text field accepts a string.
| | 02:04 | So open quotes, type "Here's some
text in my brand new text field!!!";
| | 02:17 | Test the movie.
| | 02:21 | Notice that the text field
| | 02:25 | isn't wide enough to accommodate all the text.
| | 02:30 | To make it wider let's go to the next line.
| | 02:33 | Then type myText.width = and let's just choose
a big number like 250 pixels, then a semicolon.
| | 02:44 | Now test the movie, and there we go.
| | 02:56 | If you want to modify other properties
of your text field, select text field
| | 03:01 | and then press F1 on your keyboard, open up the Help
| | 03:05 | and look at the properties that you can modify.
| | 03:13 | And close the Help menu. So if you want to learn
more about text fields there's a good place to go.
| | 03:18 | But that is basically how to create a text field using ActionScript.
| | 03:22 | In the next movie we'll style our text field.
| | Collapse this transcript |
| Styling a text field| 00:03 | In this movie we'll learn how to style our text fields
by changing the font face, fun color and font size.
| | 00:09 | If you're following along I'm inside
Styling.fla in the chapter 08 folder.
| | 00:13 | Let's click on the first keyframe of our actions layer
| | 00:15 | and press Option+F9 on the Mac F9 on the PC
| | 00:19 | to open up the Actions panel.
| | 00:21 | Here we have the code we created in the last movie.
| | 00:23 | We created a new text field,
| | 00:25 | we put it on the Stage using addChild,
| | 00:28 | we added some text to it to the text
property, and we modified the width.
| | 00:32 | To style it we need to do three steps. The first step is to
create a text format object. To create that object I'm going to
| | 00:39 | click right before addChild on line 2
and press Enter few times then go up
| | 00:44 | to line 2 so that I have some space.
Now let's create a new variable
| | 00:47 | called my and then Format with a capital F.
You can call this whatever you want.
| | 00:52 | But since we're only going to have one text format, I'm just
going to call it myFormat:TextFormat = new TextFormat();
| | 01:13 | So that's step one. We create a new variable,
| | 01:19 | the datatype is text format and that is equal
to a new instance of the text format class.
| | 01:24 | The next step is to specify
what our text format will be like
| | 01:28 | or what the text will look like. Let's press
Enter a few times to go down a few lines
| | 01:33 | and then we'll type our format variable name.
So type my and then Format with a capital F.
| | 01:39 | Then type a dot, then type font,
| | 01:46 | space, equal, space, open quote.
| | 01:50 | We need to put the font in quotes because the font
property accepts a string. So type a capital H for Helvetica,
| | 01:59 | If you don't have that font just use something
else, starting with a capital letter.
| | 02:04 | Close quotes, and a semicolon.
| | 02:06 | So that's step 2. If you were to test the movie
right now, you would not see the text updated.
| | 02:11 | You have to do a third step to apply a styling or to apply
a text format to a text field. We have to associate the two.
| | 02:19 | So I'm going to go after
| | 02:21 | we set the width property of our text field on line 8.
| | 02:25 | Press Enter a few times to go down a few lines
| | 02:27 | and type in myText with a capital T, .setText with a capital T,
| | 02:36 | and then Format with a capital F.
| | 02:39 | Let's type an open parenthesis and inside of
the parentheses we need to pass in the format
| | 02:43 | that we want to format our text with. So type
myFormat with a capital F, close parenthesis
| | 02:49 | and type a semicolon.
| | 02:51 | Now test the movie.
| | 02:54 | And then your text should be styled in Helvetica
instead of the default font, which is Times.
| | 03:02 | Just take a note of this. When you're creating a text format,
| | 03:07 | A likely place to make an error is to forget
to associate the text format with the text field.
| | 03:13 | Let's modify a few more properties of our text format object.
| | 03:16 | On line 4 after thesemicolon, I'm going to press
Enter and type myFormat with a capital F, dot,
| | 03:23 | and we'll change the color, space, equal, space.
| | 03:29 | The color value is actually a number. It is a hexadecimal
value, which means a six digit value that is RGB.
| | 03:38 | The way that we type hexadecimal values
is we start with 0 and then an x,
| | 03:44 | and then we type in six digits.
| | 03:47 | The digits start at 0, go up to 9, after 9 they go from A to F.
| | 03:53 | So 0 is the lowest value,
| | 03:55 | and F is the highest value.
| | 03:58 | The first two digits deal with the red value,
| | 04:01 | the second two with the green,
| | 04:03 | and the third two with the blue.
| | 04:06 | RGB.
| | 04:07 | So if I type FF0000...
| | 04:13 | And they don't have me capitalized like mine, your Fs
can be lower case. It's okay. And then a semicolon
| | 04:18 | and test movie, I get red text. Let's make a special note here. I said
that there were three things that you had to get in line to set the
| | 04:26 | styling of text. The first one is to create the text format object.
| | 04:30 | The second one is to set properties.
| | 04:33 | And the third one is to associate it with a text field using
the set text format. Once you have that set up you can get as many
| | 04:39 | properties as you'd like. It doesn't matter.
| | 04:41 | That's how we added on the color without having to add
a new set text format. Now let's change the font size
| | 04:46 | Press Enter to go to the next line. After color
type myFormat with a capital F, dot size,
| | 04:53 | space, equal, space,
| | 04:55 | and I'm going to type 24 and a semicolon.
| | 04:58 | Let's test the movie now
| | 04:59 | and it looks like our text field's getting cut off.
| | 05:03 | If I click it and drag, I can scroll
| | 05:05 | and see that the text exists, but I need to scroll to the right
to see it. I don't really want my text field to work like that
| | 05:10 | so I'm going to close my window and then we have a few different
ways to fix this. We can modify the width and make it wider.
| | 05:16 | But the most effective way to do this would be
to set an auto-size property to the text field
| | 05:22 | so that the text field will size depending
on the text that's in it. So I'm going to
| | 05:26 | line 10 where I define the width of my text
field. I'm going to your erase dot width
| | 05:30 | and equals 250, and I'm going to replace that with dot
| | 05:37 | autoSize.
| | 05:39 | Now in the last version of Flash in ActionScript 2.0
| | 05:42 | you set auto size to true or false.
| | 05:44 | In ActionScript 3 it works a little bit different.
So type space, equal, space, then type text
| | 05:50 | with a capital T, Field with a capital F,
| | 05:53 | Auto with a capital A,
| | 05:57 | and then Size with a capital S,
| | 06:00 | then type a dot, and then let's select LEFT, all capital letters.
| | 06:07 | That means the text feel will auto size from the left
depending on how much text is inside of it. Type a semicolon.
| | 06:13 | Test the movie.
| | 06:15 | There we go.
| | 06:18 | So you can experiment with the text field auto size options if you'd
like. But that is how to style a text field using the ActionScript.
| | 06:25 |
| | Collapse this transcript |
| Capturing data from a text field| 00:00 | In this movie we'll talk about how to capture data
from a text field and display it somewhere else.
| | 00:06 | If you'd like to follow along, we're in Capturing.fla and that's
inside of the chapter 08 folder. Let's take a look at our Flash file
| | 00:12 | to see what we have set up already.
| | 00:14 | At the top of the screen we have an input text field
| | 00:18 | with the name name_txt.
| | 00:23 | The _txt suffix is similar to the _mc suffix. That will give
us code hinting when we type the instance name in our code.
| | 00:31 | Then we have a button with the name submit_btn
| | 00:37 | _btn is a similar naming convention to _mc and _txt. It has
that instance name because it gives us automatic code hinting.
| | 00:45 | At the bottom of the screen we have
a snowboard with some text on it.
| | 00:51 | The instance name is board_txt.
| | 00:54 | It is not selectable.
| | 00:58 | We can tell because this button is unchecked.
| | 01:02 | That would make the text selectable
and that makes it not selectable.
| | 01:06 | And it's a single line.
| | 01:08 | Let's look at the ActionScript that we have.
| | 01:11 | Go to the first key frame of your actions layer,
| | 01:13 | press Option+F9 on the Mac, F9 on
the PC, to open up the Actions panel.
| | 01:18 | In the first line of code, we have a variable named body_txt.
| | 01:25 | The datatype is text field
| | 01:27 | and it's equal to a new instance of the text field class.
| | 01:30 | So we're creating this text field dynamically.
| | 01:33 | Here are the x and y positions.
| | 01:38 | Set the auto size to TextFieldAutoSize.LEFT.
| | 01:41 | Because we have not yet put in addChild,
| | 01:44 | this object will not be visible until we tell it to be visible
| | 01:48 | a little bit later on.
| | 01:50 | The submit button has an event listener to listen for a mouse click
| | 01:55 | which will run the onClick event handler,
| | 01:58 | which is created down here, it's just in skeleton form.
| | 02:01 | The next step in capturing data from a text field
| | 02:05 | is to create a variable that will hold that data.
| | 02:08 | So let's go back to line 1, at the very end. Go to the next line
| | 02:12 | type var, then type your, and then Name with a capital N.
This will be the variable that holds the name of the person
| | 02:18 | when they type it in.
| | 02:19 | Then type colon, String with a capital S, and just a semicolon.
| | 02:24 | We don't need to give it a value yet. We'll
give it a value after they type in their name.
| | 02:30 | Now let's go to the event handler.
| | 02:32 | So right down here in onClick on line 13,
| | 02:38 | put your cursor in there.
| | 02:40 | And the first thing we want to do is
| | 02:42 | put the text field on the screen.
| | 02:45 | That text field being body_txt, that's the one we
created in code. So type addChild with a capital C,
| | 02:55 | (body_txt);
| | 03:01 | That'll make our text field visible
| | 03:03 | Let's go to the next line,
| | 03:05 | and let's give a value to your name.
So type yourName with a capital N,
| | 03:11 | space, equal, space.
| | 03:14 | Like I said earlier,
| | 03:16 | this is going to hold the name of the
person when they type it in the text field.
| | 03:22 | Up to this point we've put data in a text field but we haven't
| | 03:26 | brought it out of a text field.
| | 03:28 | It's actually exactly the same thing. The instance name of the
text field that the user will be typing their name into is called
| | 03:34 | name_txt.text;
| | 03:42 | So the variable yourName will be equal to whatever
the user has typed in, in the name_txt text field.
| | 03:53 | Now let's go to the next line.
| | 03:56 | The name of the board text field
| | 03:59 | is board_txt. So type board_txt.text, space, equal, space,
| | 04:09 | and then yourName with a capital N, and a semicolon.
| | 04:13 | So at the top of the screen, we created a variable called
yourName, that's a string. After the user fills out the text
| | 04:19 | field they click the submit button.
| | 04:22 | We give the value that's inside of that text field name_TXT.text,
that's going to be the text that's inside of the text field
| | 04:29 | to that variable.
| | 04:30 | So whatever they type in, it's being put inside of that variable
container. And then we're setting the board text property,
| | 04:36 | the text on the snowboard to
| | 04:40 | the yourName variable, which is
coming from the name_txt text field,
| | 04:46 | and that will give us their name
on the snowboard. Let's test the movie.
| | 04:50 | Take a look.
| | 04:54 | I'm going to type in my name in the text field
| | 04:57 | and then click submit
| | 05:01 | and it shows up in the snowboard. Great.
| | 05:03 | Let's close this movie.
| | 05:07 | And now let's populate the body_txt text field.
| | 05:12 | So go to the next line in the onClick
event handler and type body_txt.text,
| | 05:20 | space, equal, space. Now what we've done at this point is we put
some text in quotes, and that's what we're going to do here except
| | 05:27 | that we're going to do something else new along the way.
| | 05:31 | Type open quote, type Hi and then
a space, and then a close quote,
| | 05:35 | and then a space
| | 05:37 | a plus and then another space,
| | 05:40 | then type yourName with a capital N. Now this plus sign
| | 05:45 | is different than the plus sign in math.
| | 05:48 | The plus sign in math will add numbers together.
| | 05:53 | If we use the plus sign with strings it tacks on the
second string to the first string. So this will say Hi
| | 06:00 | then a space then whatever text value your name is equal to.
So your name will be a string that comes in from the name_txt
| | 06:08 | text field and then it will
be placed right here instead.
| | 06:12 | We have to close the quotes and use
a plus because this is a variable.
| | 06:18 | If we did not have a plus and we left yourName in quotes, it would say Hi
yourName. We don't want it to say yourName. We want it to say, whatever
| | 06:26 | text value they put in the text field. So that's how you do that.
| | 06:29 | After yourName, type space, plus, space, then open quote,
| | 06:35 | and this will add in more literal text
or exactly as we type text after the variable name.
| | 06:42 | So I'll type an exclamation point. So it'll say
| | 06:45 | Hi Todd or Jimmy or Frank or whatever! Then a space.
| | 06:51 | Here's your custom board.";
| | 07:00 | Test the movie.
| | 07:04 | I'll move this window out of the way.
| | 07:06 | Type in some text. I'm going to type my name.
| | 07:09 | Click this event button.
| | 07:11 | And it says Hi Todd exclamation point
and space. Here's your custom board.
| | 07:16 | So we successfully captured the data from this text field
| | 07:21 | and passed it in here and on the board.
| | 07:27 | So that is how to capture and use data from a text field. So
now let's take a look at loading texts from an external text file.
| | 07:34 | We'll do that in the next movie.
| | Collapse this transcript |
| Loading external text| 00:00 | In this movie we'll learn how to fill a text
field with text from an external text file.
| | 00:06 | If you'd like to follow along, we're
in External.fla in the chapter 08 folder.
| | 00:11 | Now you may be wondering,
| | 00:12 | why would I ever want to fill a text field with external text?
| | 00:16 | If you're a designer or if you've ever done any work in any kind
of design program at all, and you presented the work to your
| | 00:22 | client or your boss or whoever,
| | 00:25 | and they see it and they say, you now what it's great except for I
want you to change this little thing or this little thing or just make
| | 00:31 | some change in a word in a text field, and then you have to go
in your Flash file and hunt it down wherever that text field was.
| | 00:38 | It can be really tedious
| | 00:39 | and kind of frustrating. If you store your text in an external text
file you can have whoever is criticizing your file fix it themselves.
| | 00:46 | That makes life a lot easier. By using an external text file,
| | 00:50 | your work becomes a lot more efficient. So let's take a look at
what we have right now. Let's look at the first keyframe of our
| | 00:55 | Actions panel and open up the Actions
window by pressing Option+F9 on the Mac
| | 01:01 | or F9 on the PC.
| | 01:07 | So we have a variable called external_txt,
| | 01:11 | the datatype is a text field equal to
a new instance of the text field class.
| | 01:17 | The x is 175. The y is 100,
| | 01:21 | It has a border.
| | 01:22 | The width is 200, and the height is 200 and
| | 01:27 | we put it on the Stage with
addChild. So let's test the movie.
| | 01:33 | And we have a text field in the center
of the Stage. Now there are few steps
| | 01:37 | in order to get an external file.
| | 01:42 | So the first thing that we have to do
| | 01:44 | is create something called a URL request.
| | 01:50 | After the first line, let's click.
Go to the next line. Type var
| | 01:55 | and then a space,
| | 01:57 | and then I'm going to call this externalReq, for external
request. You might remember in the events chapter,
| | 02:07 | We talked about how to
| | 02:10 | link to a web site and we used the URL request.
| | 02:13 | That's what we're going to use here. So type a colon,
| | 02:16 | then type capital U, capital R, capital L, and then
| | 02:20 | R for request. Type space, equals, space, new, space,
| | 02:27 | URL, all capitals and capital R
and spell out Request, open parenthesis.
| | 02:35 | Now it's asking for a URL that's a string, so type open quote, and inside
of the same folder there's a file called external, so type that in
| | 02:44 | .txt, it's a plain text file. Type a close
quote, close parenthesis and a semicolon.
| | 02:52 | Let's go to the next line. Create a new variable
| | 02:54 | called externalLoad with a capital L.
| | 03:01 | So type a colon, and now we're going to create something
called the URL loader to load this URL. So type URL,
| | 03:10 | and then loader with a capital L,
| | 03:13 | and type space, equals, space, new, URLLoader with a capital L
| | 03:22 | ();
| | 03:26 | This creates a new instance of the URLLoader class and
our loader or URLLoader is going to load our URL request.
| | 03:34 | Let's go down a few lines
| | 03:36 | and then tell our loader to load our request. So type
| | 03:40 | externalLoad with a capital L,
| | 03:44 | .load, then type an open parenthesis,
and now you type in a request.
| | 03:52 | The name of our request object is externalReq.
| | 03:58 | So let's type in externalReq, capital R,
close parenthesis and a semicolon.
| | 04:06 | Now we want to do is add an event listener
| | 04:11 | so that when the load
| | 04:13 | is complete or when this text file is finished loading
and ready to use, thne we can put it inside of our text area.
| | 04:21 | So let's go down a few lines. Type
| | 04:24 | externalLoad with a capital L,
| | 04:30 | .addEventListener with a capital E
and a capital L, open parenthesis.
| | 04:35 | The event type is event with capital E,
.COMPLETE and that's all capital.
| | 04:43 | That means when this is URL, external.txt
| | 04:49 | has finished loading and is ready to use
| | 04:51 | then type a comma and a space.
| | 04:54 | Then we can call this event handler textReady
| | 04:57 | with a capital R. Close parenthesis and a semicolon. Let's
define the textReady event handler at the bottom of our code.
| | 05:06 | I'm going to click after the addChild on line 15.
| | 05:12 | Go down a few lines and type function and a
space, textReady with a capital R, open parenthesis.
| | 05:21 | This will receive an event, all lowercase, colon,
the datatype is Event with a capital E, close parenthesis.
| | 05:30 | When the load is complete, the information
will be sent to this event handler.
| | 05:36 | After the parenthesis,
| | 05:37 | type a colon then void. Go down to the next line, open
curly brace, next line, close curly brace, up arrow, Enter.
| | 05:45 | Now we're ready to put that text inside of the text field.
| | 05:49 | So now type external_txt.text,
| | 05:55 | space, equals, space.
| | 05:57 | Now we'll set the text property of the external text field
| | 06:01 | to event.target, that's the loader,
| | 06:06 | and then .data;
| | 06:12 | event is the complete.
| | 06:15 | event.target is referring to listener that
listens for that event, which would be external load
| | 06:21 | and the data property of external load is equal to
| | 06:26 | this external text file or the data
inside of that external text file.
| | 06:30 | Test the movie.
| | 06:38 | Might have to move the Actions panel a little bit.
| | 06:45 | Notice that there are a few things that are kind of annoying
about this. It scrolls but it only scrolls to the right,
| | 06:52 | and so each paragraph is on a single line,
| | 06:55 | which is kind of ridiculous.
| | 06:57 | We'll learn how to control the scroll in the next
movie, but for right now, let's just make it word wrap
| | 07:03 | so that the paragraphs will look right.
| | 07:05 | So close that window.
| | 07:08 | On line 13 after it says external_txt.height,
| | 07:12 | click after the; press Enter. Now we
just need to set the word wrap property
| | 07:17 | and this will cause the words to wrap around instead of
going infinitely to the right until there's a new paragraph.
| | 07:22 | So type external_txt.wordWrap. This will cause the words
to wrap around. Make sure the W in Wrap is capitalized.
| | 07:31 | space, equals, space, true;
| | 07:36 | Test the movie.
| | 07:38 | There we go. If you click inside the text field and drag down,
| | 07:42 | and it will scroll.
| | 07:45 | If you wanted to style this text field, you could easily do that.
You just apply to text format in the same way that we did it
| | 07:51 | earlier this chapter.
| | 07:53 | So that is how you load
| | 07:56 | data from an external text file.
| | 07:59 | Just remember to create the URL request.
| | 08:01 | That's going to hold the information about where
your text file is. You load it with a URL loader.
| | 08:08 | Then you to handle using event.complete,
| | 08:11 | and then you use event.target.data
| | 08:14 | to place the data inside of the text field.
| | 08:17 | Now that you know how to load text,
| | 08:19 | let's make the text scroll in the next movie.
| | Collapse this transcript |
| Scrolling a text field| 00:00 | In this movie we'll learn how to take a text field and scroll it
using some buttons. If you'd like to follow along we're in Scroll.fla
| | 00:08 | inside of the chapter 08 folder.
| | 00:10 | Let's see how this file is set up
| | 00:12 | There are two buttons on the Stage.
The top button has an instance name of up_btn
| | 00:17 | and the one on the bottom has an instance name of down_btn.
| | 00:20 | Let's take a look at our Actions panel.
| | 00:23 | Click on the first keyframe of the actions layer, open the
Actions panel by pressing Option+F9 on the Mac, F9 on the PC.
| | 00:31 | On this line we created the new text field.
| | 00:33 | In the last movie we created a URL request a URL loader.
| | 00:37 | We had the loader load the file.
| | 00:39 | We had the loader listen for when the
file was done loading and ready to use.
| | 00:43 | We created an event handler
| | 00:45 | that activated once the file was ready to use. We set
the text property of the external_txt text field
| | 00:52 | to the data property
| | 00:55 | of our URL loader.
| | 00:57 | The first thing we need to do is add some event listeners to
our buttons. So let's add the event listeners where we added the
| | 01:03 | other event listener for our loader. So on line 7,
| | 01:07 | right after the semicolon, let's press Enter.
| | 01:10 | Type up_btn.addEventListener, with a capital E, capital L.
| | 01:18 | Type an open parenthesis
| | 01:20 | and it will listen for MouseEvent.CLICK
| | 01:28 | then type a comma,
| | 01:29 | and then the event will be called scrollUp,
with a capital U, close parenthesis, semicolon.
| | 01:40 | Let's copy this line of code by pressing
| | 01:44 |
Cmd+C or Ctrl+C on the PC, after it's selected.
| | 01:47 | Let's go to the next line. Paste using Ctrl or Cmd+V.
| | 01:52 | Change up_btn to down_btn. Then change scrollUp
to scrollDown, make sure the D is capitalized.
| | 02:01 | Now let's write our scroll up and scroll down event handlers.
| | 02:07 | At the end of the close curly brace on line 23, I'm
going to press Enter a few times to go down a few lines.
| | 02:14 | Then I'll type function, space.
| | 02:16 | Then we'll first define scrollUp.
| | 02:21 | Make sure you give it a capital U, like you did up
here when we added the listener. After scrollUp on line 25,
| | 02:28 | type an open parenthesis
| | 02:30 | and then type event, colon, and then
MouseEvent with a capital M and a capital E.
| | 02:38 | Close out the parenthesis, colon, void, next line,
open curly brace, next line, close curly brace,
| | 02:46 | up arrow, Enter. Now I'm going to need to
move my Actions panel is just a little bit
| | 02:52 | so that I can see a little better.
| | 02:57 | I made it a little smaller, now I'll scroll to the bottom,
| | 03:01 | that looks good.
| | 03:02 | Now what we'll do is modify the
scroll property of our text field.
| | 03:05 | So type external_txt.scroll
| | 03:15 | Now in the code hinting, once you start typing scroll
| | 03:20 | after you get to scr, you should see
scrollH, and if you go down a little bit
| | 03:25 | you'll see scrollV.
| | 03:28 | ScrollH stands for scroll horizontal and scrollV stands for scroll
vertical. We want to scroll our text vertically, so we'll select
| | 03:34 | scrollV.
| | 03:35 | Now the scrollV and scrollH hold numbers and these numbers
| | 03:42 | indicate the current scroll position of the text field.
| | 03:47 | So all we need to do is add or subtract the scroll value
| | 03:52 | in these numbers when you click the button.
| | 03:55 | Let me show you.
| | 03:56 | After scrollV type a space, then
type two minus signs and a semicolon.
| | 04:04 | This will subtract 1, that's what the minus minus
does. It subtracts 1 from the current value
| | 04:09 | of scrollV.
| | 04:11 | Now all we do is copy this code, paste it,
| | 04:14 | change up to down and change the minuses to pluses.
| | 04:18 | So let's do that.
| | 04:19 | Select this whole event handler
| | 04:23 | from the word function to the close curly brace.
| | 04:26 | Press Ctrl or Cmd+C on your keyboard to copy it.
| | 04:30 | Go down a few lines, after the close curly
brace, paste the code using Ctrl or Cmd+V.
| | 04:36 | Change scrollUp to scrollDown with a capital D.
| | 04:41 | Change the minus minus to plus plus.
| | 04:46 | Now let's test the movie.
| | 04:50 | And test out your buttons.
| | 05:00 | There we go.
| | 05:02 | So if you want to scroll a text field, you just subtract
or you add to the scrollV the property of a text field, just
| | 05:09 | like we did in this movie.
| | 05:10 | And that's how to scroll a text field.
| | Collapse this transcript |
| Understanding arrays| 00:00 | In this movie we'll learn about something called an array. If you'd
like to follow along, I'm in Arays.fla in the chapter 08 folder.
| | 00:07 | An array is a variable that holds multiple variables.
| | 00:13 | To explain what an array is and how it
works and why you'd need to use one,
| | 00:17 | we have this example.
| | 00:18 | Let's say you have a web site and you have a bunch of different
users and they have a password or something, and when they Enter
| | 00:25 | their username you want to be able to check to
see if they're a registered user of your web site.
| | 00:30 | You can use an array to hold the list of all the users in
your web site, and when the user types in their name and you
| | 00:37 | click the button, you can check to see
if that user name is inside of your array.
| | 00:43 | So let me show you how to create an
array and then we'll solve this problem.
| | 00:48 | Click on the first keyframe of the actions
layer and open up the Actions panel.
| | 00:54 | Enter_btn is the name of the button on the Stage
| | 00:57 | and we have it listening for a click
and we have an event handler built.
| | 01:02 | For now let's click right before enter_btn and press Return
a bunch of times to kick it down the whole bunch of lines
| | 01:09 | and then go up to line 1.
| | 01:11 | Now type var and the space, users,
| | 01:16 | and this will be our array variable name.
This will hold all of the usernames of our site.
| | 01:22 | Type colon, and then Array with a capital A,
| | 01:27 | type space, equals, space.
| | 01:30 | Now there are a whole bunch of different ways to create a
new array. I could say new and then space and then Array();
| | 01:42 | And then I can add values to it.
| | 01:44 | The way that I'd add values to it is to go to the next line,
| | 01:48 | type the name of your array,
| | 01:50 | and then instead of typing a dot,
| | 01:53 | we'd use square brackets. So type an open square bracket,
| | 01:57 | and then a 0.
| | 01:58 | The array holds its data
| | 02:01 | in something called an index,
| | 02:03 | and that just means every piece of data
inside of the array has an assigned number.
| | 02:09 | The first assigned number is 0,
| | 02:11 | so we're defining the first index of our array or array index 0,
| | 02:16 | by first putting the 0 inside of square brackets
and then we type space, equals, space, and then we type
| | 02:23 | the first value.
| | 02:24 | The user is going to be a bunch of user names.
So let's just type in a name . So type open quote
| | 02:30 | and then I'm going to type Todd with
a capital T, close quote, semicolon.
| | 02:35 | Let's go to the next line then type users
open square bracket, 1, closed bracket = "Jimmy";
| | 02:51 | Let's go to the next line and let's trace our
array and see what we get. So type trace(users);
| | 03:03 | Now test the movie.
| | 03:05 | Now we get Todd, Jimmy.
| | 03:08 | So now we have an array,
| | 03:11 | which is an object that holds a whole bunch of different variables.
| | 03:15 | Great. Let me show you the shorthand way to create
an array and they we'll solve our username problem.
| | 03:21 | So it's erase these three lines of code that we
wrote. We'll leave the variable users = array intact.
| | 03:28 | So delete the three lines that we just wrote, the last three
| | 03:33 | and then let's erase new array in the open and close parentheses but leave
the equals sign there and now type open square bracket, closed square bracket,
| | 03:41 | Semi-colon. Move your cursor in between the two square brackets,
| | 03:45 | and now we can just type the items
in our array separated by commas.
| | 03:49 | So type an open quote, type your name, close quote,
| | 03:55 | type, space, open quote, going to
pick another name, Jimmy, close quote,
| | 04:04 | another comma, another space, another
open quote, another name, close quote.
| | 04:11 | And my array holds Todd, Jimmy and Susan.
| | 04:15 | I go to the next line and I trace my array.
| | 04:20 | trace(users);
| | 04:25 | Then I'm going to get Todd, Jimmy and
Susan, just like I typed it up here.
| | 04:34 | So there are the two ways of creating an array.
| | 04:37 | Let's erase trace(users);
| | 04:40 | And that is how to create an array.
Now let's solve our username problem.
| | 04:45 | All we want to do here is go inside of the onClick event handler
| | 04:49 | and we'll create a loop that will run.
| | 04:53 | And if the name that we specify inside of the text field
| | 05:00 | is inside of our array
| | 05:01 | then it will trace a message. So it'll do something
if the name is inside of the array. So type for
| | 05:08 | inside of the event handler, "var i:Number = 0;
| | 05:20 | Create a new variable called i, it's a number equal to zero
| | 05:26 | By the way if this for stuff doesn't look familiar,
we talked about all this in the last chapter.
| | 05:31 | Then type i < and now here we can type in a number
| | 05:39 | and this loop will run over and over again, until i is
| | 05:46 | equal to or more than this number.
| | 05:48 | So I can actually type in a number if I want or I can
reference the length property of my array which will give me
| | 05:57 | how many items are in my array.
| | 06:00 | So type users.length
| | 06:09 | and that is going to be equal to how many items are
inside of the array. So here we have one, two, three.
| | 06:17 | The reason why putting users.length is better than
putting the number 3 is because if I add to the array ever
| | 06:25 | for any reason, then I don't have to change users.length,
because it'll always be however long the user's array is.
| | 06:33 | After user.length, type a semicolon, a space, then type
| | 06:39 | i++) Let's go to the next line, open
curly brace, next line, close curly brace,
| | 06:44 | up arrow, Enter.
| | 06:49 | Inside of this loop, I'm going to write a conditional statement.
| | 06:54 | I'm going to type if(users,
open square bracket, i, closed square bracket
| | 07:08 | Now the way that a loop works is the runs first
| | 07:12 | this variable i at zero.
| | 07:18 | If this expression is still true,
| | 07:25 | it will run again, but the next time it runs, it'll add one
| | 07:29 | to the last value of i. So it will run once at i being 0
and then i being 1, then i being 2, until it gets up to
| | 07:37 | users.length, which is 3.
| | 07:40 | After the close square bracket of users and index i,
| | 07:43 | type space, equals, equals, space, which
means it is equal to, then type a space.
| | 07:50 | Then type user_txt.text
| | 07:56 | and that is, if we move our Actions panel out of the way,
| | 08:00 | that's the instance name of the username text field.
| | 08:05 | So if they type in a username and
the username is inside of our array,
| | 08:10 | then we'll do something.
| | 08:12 | Click on the first keyframe of the actions
layer, go back to the Actions panel.
| | 08:18 | After .text, type a close parenthesis.
| | 08:22 | Go to the next line, open curly brace,
next line, close curly brace, up arrow, Enter.
| | 08:29 | Inside of his conditional statement
we'll type trace("access granted");
| | 08:43 | So if the user name is on the list,
then we'll get the access granted message.
| | 08:47 | Let's test the movie.
| | 08:52 | Type in a username that is on the list.
I'm going to type Todd with a capital T.
| | 08:56 | Press Enter button.
| | 08:59 | On the list, great.
| | 09:01 | Type a user name that is not on the list.
| | 09:06 | Press Enter button and nothing happens.
| | 09:14 | So that is how to work with an array.
| | 09:16 | Create the array,
| | 09:20 | and we can use an array to hold all kinds of
data and we can use a loop to loops through that data
| | 09:25 | to give us values.
| | 09:28 | One situation where you'd want to use an
array is to hold usernames for your web site.
| | 09:32 | And you can use a loop.
| | 09:33 | When a user puts a name in and check to see
| | 09:37 | if they're on your username list or inside of your username array.
| | 09:42 | Now that we know how to do this,
| | 09:44 | let's make a game out of it.
| | 09:45 | We'll do that in the next movie.
| | 09:48 |
| | Collapse this transcript |
| Using text and arrays to create a game| 00:00 | In this movie we'll learn a little bit more
about text and arrays by creating a text game.
| | 00:06 | This file can be found in Text_Game in the
chapter 08 folder. Let's take a look at it.
| | 00:11 | We have a text field that
accepts a name, that's name_txt,
| | 00:17 | set to single line, with a border around the text.
| | 00:21 | A text field that accepts a verb, called verb_txt.
| | 00:26 | A text field that accepts a noun called noun_txt.
| | 00:31 | This button is called Generate_mc, it's a movie clip.
| | 00:36 | And this text field is called game_txt.
| | 00:39 | What we're going to do with this game is put
| | 00:43 | text values inside of these fields
and then Generate some text randomly
| | 00:49 | inside of the body text field. Let's go to our code.
| | 00:53 | Click on the first keyframe of the actions
layer and open up the Actions panel.
| | 00:57 | On the first line, we have a variable
called yourName that's a string
| | 01:02 | and we have not yet given that variable a value.
| | 01:06 | Then we have an event listener attached to Generate_mc
| | 01:11 | listening for click,
| | 01:14 | and then it will run the onClick event handler,
| | 01:17 | which is defined right here. This will just basically fill
| | 01:21 | game_text with some text.
| | 01:25 | Let's test the movie and take a look at it.
| | 01:29 | Click the Generate button,
| | 01:32 | and we have some text in the text field.
| | 01:34 | The first thing we'll do is replace the name with your name.
| | 01:41 | Close out that window.
| | 01:43 | After the open curly brace of the onClick event handler, press
Enter on your keyboard and type your and then Name with a capital N.
| | 01:51 | Then type space, equals, space
| | 01:53 | and then type your name in quotes.
| | 01:56 | Open quote, I'm going to type Todd, you can
type your own name, close quote and a semicolon.
| | 02:02 | Now I'm going to select the text
that says Jerry in the next line
| | 02:07 | and delete it. Now I'm going to
put my cursor before the open quote
| | 02:13 | and then I'm going to type in your
and then Name with a capital N,
| | 02:16 | which is the variable that we gave
the value to, in the line before.
| | 02:20 | After yourName on line 8
| | 02:23 | I'm going to type a space, then a plus and then a space.
| | 02:28 | So this will place that yourName
variable there, which mine will be Todd,
| | 02:33 | and a plus, which again is not math,
| | 02:35 | as I explained in the last movie. It is
called concatenation, which jujst means
| | 02:40 | pushing one value onto another value like instead of saying
| | 02:45 | Todd and then math plus flew down, we'll just say
Todd then continue on here, space, flew down.
| | 02:53 | We need to use the plus sign because we're using
a variable name here and not a literal string.
| | 02:59 | Or in other words, this is not in quotes. Test the movie,
| | 03:03 | click the Generate button, and we get a name in there.
| | 03:09 | Let's close that window.
| | 03:11 | Replace yourName on line 7
| | 03:15 | the text value there or the string
that we put in there in quotes
| | 03:20 | with name_txt.text. So now it will be
whatever write in the text field.
| | 03:27 | Now test the movie.
| | 03:30 | Type your name in the name text field,
| | 03:32 | click the Generate button and then it
shows up in the field on the right.
| | 03:36 | Now let's create an array to hold our verbs.
| | 03:42 | On line 1, let's click after the semicolon,
press Enter and create a new variable
| | 03:50 | by typing var and then a space.
| | 03:53 | Let's call this variable verbs:
| | 03:57 | This is going to be an array.
| | 04:00 | Then type space equal space,
| | 04:04 | open square bracket, closed square bracket, semi-colon.
| | 04:07 | Put your cursor inside of the square brackets,
| | 04:11 | and this is how we create an array.
| | 04:13 | And an array again is a variable or
container that holds multiple variables.
| | 04:19 | So type an open quote,
| | 04:22 | and now we're going to type some verbs in, but they need to
be past tense because they're going to replace the word flew.
| | 04:29 | So type any past tense verb you can think of, jumped
| | 04:35 | put it in quotes, then type a comma,
another quote, ran, close quote.
| | 04:41 | And that will suffice for now.
| | 04:43 | Let's go to the next line. Create
new variable. Let's call this nouns,
| | 04:50 | type a colon, the datatype is Array, space, equals, space,
| | 04:55 | open square bracket, closed square bracket,
semi-colon, cursor inside the square brackets,
| | 05:00 | and then put some nouns in quotes.
| | 05:02 | So type open quotes. I'm going to type "bear", "tree"
| | 05:16 | and that should be good for now.
| | 05:17 | Now what we need to do is replace the
verbs and nouns with items from our array
| | 05:22 | inside of our onClick event handler.
Let me show you how that works.
| | 05:26 | Let's go down to the word flew.
| | 05:29 | Select it, then type a close quote,
| | 05:33 | and type space, plus, space,
| | 05:35 | then type verbs, open square bracket, 0, closed square bracket, + "
| | 05:50 | Now what our text field is going to say is the name
| | 05:54 | that's in the name text field and then a space,
| | 05:58 | and then verbs, which is our array,
| | 06:02 | index zero, this is going be added
on with concatenation, not math.
| | 06:09 | That's going to grab that from our
verbs array, which is defined on line 2.
| | 06:13 | It's going to grab the first index of
the array because arrays start at 0,
| | 06:17 | and that value will be jumped.
| | 06:23 | And then there's a plus and then the quote
and the text will be literally as it is here.
| | 06:36 | Okay. Let's select the
| | 06:38 | nouns and do the same thing.
So the noun, the first one is mountain.
| | 06:42 | Select that, type a close quote, type a space, plus, space,
| | 06:50 | nouns, open square bracket, 0 closed square bracket, + "
| | 06:59 | Now we're doing the same thing with the nouns.
| | 07:02 | So what I'm going to do is just copy this.
| | 07:07 | So I'm going to select that open quote
then go back and select the close quote
| | 07:12 | right before the first plus of the nouns.
| | 07:15 | Press Cmd+C or Ctrl+C on your keyboard.
| | 07:18 | Select the word snowboard
| | 07:22 | and press Cmd or Ctrl+V on your keyboard to paste it.
| | 07:27 | Let's do the same thing with snowball.
| | 07:30 | So I'm going to select the word snowball and then paste
| | 07:35 | by pressing Cmd+V on my keyboard and that's Ctrl+V on the PC.
| | 07:39 | Test the movie.
| | 07:41 | Type in your name.
| | 07:45 | Click the button to Generate.
| | 07:47 | Todd jumped down the bear on his bear
hoping to escape the giant bear.
| | 07:50 | Alright.
| | 07:51 | So we've created a really basic
game. I'm going to close this window.
| | 07:56 | So that is how to put our array
inside of a text field, but what if
| | 08:02 | we wanted to add to the array in the text fields at run time?
| | 08:07 | And furthermore what if we want to
grab a random item out of the array
| | 08:13 | at runtime as well, when we click the Generate button?
| | 08:15 | I'll show you how to do that in the next movie.
| | 08:18 |
| | Collapse this transcript |
| Finishing the text game| 00:01 | In this movie we'll learn how to add to
our verb array and our nouns array at runtime,
| | 00:06 | and then how to grab a random index of the
array and then put it inside of a text field.
| | 00:12 | If you're following along I'm in Text_Game in
8-8 folder that's inside of the chapter 08 folder.
| | 00:18 | We're just continuing on from the last movie.
| | 00:20 | So let's go to our actions keyframe of the actions layer
| | 00:24 | and open up the Actions panel by
pressing Option+F9 or F9 on the PC.
| | 00:29 | First let's grab a random index of the array.
| | 00:33 | I'm going inside the event handler and I'm and looking at verbs,
| | 00:37 | index is 0.
| | 00:39 | That's the 0 inside of the closed square brackets. Mine is
on line 10. Yours could possibly be on a different line.
| | 00:47 | And I'm going to turn on Word Wrap
| | 00:49 | by clicking the top right of my Actions panel. There is
an arrow with three lines next to it. Click on that button
| | 00:56 | and select Word Wrap.
| | 01:00 | Now this is a little easier to see.
| | 01:02 | So select verbs, index 0, on line 10.
| | 01:07 | Now let's select the 0 and then we'll use some math to
| | 01:11 | generate a random index of this array.
| | 01:14 | Now if you didn't watch the math movie
| | 01:17 | then what we're going to do is use the math
class to generate a random index of this array.
| | 01:24 | So you can watch that movie, if you'd like to learn more
about that, but I'll explain it briefly as we do it right now.
| | 01:29 | Type the word Math with a capital M then type .floor.
| | 01:34 | What this is going to do is round the number down.
| | 01:38 | Type (Math.random() *
| | 01:52 | Then we're going to type a number to grab a random number from.
| | 01:57 | So I'm going to type verbs.length.
| | 02:03 | So we talked about it in the last movie.
| | 02:05 | The length property of an array object
| | 02:08 | will give us the number of items inside of the array.
| | 02:12 | There are two items in each array.
| | 02:17 | So because we're using Math.floor
| | 02:20 | we'll round down this number. So the verbs.length equals 2.
| | 02:25 | Math.random times verbs.length
| | 02:27 | will give us a random number between 0 but not including 2,
| | 02:32 | and if we use of math.floor, we'll round down,
| | 02:36 | so we'll get a number between 0
| | 02:39 | or 1. So we'll either get 0 or 1.
| | 02:41 | But if I use verbs.length instead of 2,
if we add to the array later on, which we will,
| | 02:46 | then it doesn't matter.
| | 02:48 | We won't have to change any of the code.
| | 02:51 | So we have that in there. Let's select
| | 02:54 | inside of those square brackets, so all
the math code we just wrote, so select there
| | 03:00 | and don't select the square brackets. Just select Math.floor
| | 03:03 | ending with length.
| | 03:04 | Press Cmd or Ctrl+C on your keyword to copy it.
| | 03:07 | Then let's paste the code where the numbers are
| | 03:11 | in nouns,open square bracket, 0, closed bracket.
| | 03:15 | So we'll just replace those zeros with
| | 03:18 | the code we just copied by pressing Cmd or Ctrl+V.
| | 03:21 | Then for the first one selecting the second 0, pasting the code.
| | 03:24 | Selecting the third zero now and pasting the code.
| | 03:27 | Now we'll need to substitute nouns for verbs
| | 03:30 | in the three times that we used the noun.
So here's the first time nouns appears.
| | 03:34 | We need to change this word to nouns.
| | 03:37 | Select the second time we say verbs.length. Change it to nouns.
| | 03:44 | Change the next verbs.length to nouns.length
| | 03:48 | and change the third verbs.length to nouns.length.
| | 03:53 | So all this code will give us a random
number or random index of our array.
| | 03:59 | Test the movie and we're running into an error.
| | 04:04 | Let's take a look at it.
| | 04:07 | Expecting rightparen before right bracket.
| | 04:12 | And that's because when we used math.floor we used
an open parenthesis and we never closed it out.
| | 04:17 | So right after verbs.length, nouns.length and then
nouns.length again and nouns.length a third time,
| | 04:23 | we need to have close parenthesis. So
I'm going to add those in right now.
| | 04:32 | Now let's test the movie.
| | 04:34 | Type in your name, click generate,
| | 04:40 | and we're grabbing random indices of the arrays.
| | 04:44 | Inside of the text field you see tree, tree, jumped, bear.
| | 04:53 | Excellent. Now let's add to the array.
| | 04:56 | Right after the open curly brace of
the onClick event handler, press Enter.
| | 05:02 | Type verbs.push, and this will add
| | 05:09 | a new index to our array
| | 05:11 | at the very top of the array.
| | 05:13 | So let's look at our verbs right at the very top of the screen.
We have jumped that going to be index zero, the first index,
| | 05:19 | then ran is the second index, or index one.
| | 05:23 | When we use push
| | 05:24 | it will create a new index, index two, and then
add on whatever we put inside of here. So type push(
| | 05:31 | and the value onto push is whatever
is in the verb's text field. So type
| | 05:36 | verb_txt.text.
| | 05:40 | And that's the name of our text field.
| | 05:43 | The verb text field, verb_txt, and then we have noun_txt.
| | 05:48 | Click back on your actions keyframe to go back to the Actions panel.
| | 05:52 | After .text on the line we were just writing, on
line 9, type a close parentheses and a semicolon.
| | 05:57 | Go to the next line and we'll do the same thing for nouns.
| | 06:00 | Nouns.push, this will add an index at the top of the array,
| | 06:04 | and type noun_txt.text);
| | 06:11 | Now test the movie.
| | 06:12 | Type in your name, type a past tense verb.
| | 06:18 | I'm going to type flipped.
| | 06:21 | Then type a noun and for the noun I'm going to type rock.
| | 06:27 | Click the generate button.
| | 06:28 | Todd flipped down the bear on his
bear hoping to escape the giant rock.
| | 06:35 | So now we can see that the game is adding this text to our array
| | 06:39 | and then grabbing a random index from the
| | 06:42 | and putting it inside of this text field.
| | 06:45 | And congratulations, you just created a game.
| | 06:49 | And so that is a look at how to use text and arrays,
| | 06:53 | and how to use them together.
| | Collapse this transcript |
|
|
9. Creating a Memory Game with What You Already KnowStoryboarding your application effectively| 00:00 | In this chapter we'll take everything we've learned so far,
| | 00:03 | and apply it to creating one big application.
| | 00:06 | In this movie we'll talk about what it takes
to plan your application or your game effectively.
| | 00:12 | If you'd like to follow along we're in Memory.fla
| | 00:15 | in the 9-start folder in the chapter
09 folder of the Exercise Files.
| | 00:20 | Our goal here is to create a memory card game.
| | 00:23 | The first step in creating the application
is to imagine the finished product.
| | 00:28 | Think about how a memory card game works.
| | 00:31 | Cards start out face down,
| | 00:33 | you flip one card over. you flip another card
over and you compare the cards if they match.
| | 00:38 | If they match you leave them up and search for another match.
| | 00:42 | If they don't match turn them back over.
| | 00:44 | So we need to create that interactivity.
| | 00:47 | When you planning an application
| | 00:49 | another good practice is to think about what assets
you can recycle. With a memory card game all the cards
| | 00:57 | start out face down, you click them, they flip over, if the
match is incorrect, the flip back over. If the match is
| | 01:03 | correct, they stay up.
| | 01:05 | They all have the same functionality.
| | 01:07 | We can recycle the cards, we just need to be able to put
| | 01:11 | different graphics inside the
cards so that they appear different
| | 01:14 | to the person playing the game.
| | 01:16 | To illustrate this let's look at the card symbol
| | 01:19 | in the library of this file. I'm going
to double-click the movie clip symbol
| | 01:23 | to enter its timeline.
| | 01:25 | The bottom layer is a shape tween of the card
animating flipping over and flipping back over.
| | 01:33 | The next layer is called symbol, and that holds a
| | 01:37 | movie clip symbol with the alpha set to 0%, called loader_mc.
| | 01:45 | This is the movie clip that we'll load all of our content in
| | 01:50 | so that each card will look different.
| | 01:52 | The symbol also animates, along with
the card so it looks like the symbols are
| | 02:01 | skewing and rotating along with the card.
| | 02:05 | Then we have the labels layer, it
simply has a label called flip back
| | 02:11 | and so the card will flip back over if the match is incorrect.
| | 02:15 | Then we have the actions layer.
| | 02:18 | I'll select the first keyframe of the actions layer
| | 02:20 | and press Option+F9 on my keyboard to open up the Actions panel,
| | 02:23 | that's F9 on the PC by the way.
| | 02:26 | The Actions panel is still open.
| | 02:28 | I'll click frame 20 of the actions layer,
| | 02:31 | and just verify that there's also a
stop function running on that frame as well.
| | 02:36 | Let's close the Actions panel and return to scene 1.
| | 02:40 | The different graphics for the cards are also in library.
| | 02:45 | The symbols are called BlueBoard, Boarder, and RedBoard.
| | 02:51 | We'll go over how to put those symbols inside of the card symbol
| | 02:56 | a little later on when we make the game.
| | 02:58 | What you take away from watching this movie is that when you're
planning an application you want to find what elements you
| | 03:04 | can recycle
| | 03:06 | and you want to kind of go through it in
your head and see how you would build it.
| | 03:10 | Now let's start making the game.
| | Collapse this transcript |
| Writing a memory card class| 00:00 | The first step in the creating the game
is to just create a simple memory card.
| | 00:05 | So let's go to File - New.
| | 00:09 | If you're following along you
should already have open Memory.fla
| | 00:13 | in the chapter 09 folder of the Exercise Files.
| | 00:16 | After you select File - New,
select ActionScript file, click OK.
| | 00:21 | Then go to File, Save,
| | 00:26 | go to the 9-2 folder where the Memory.fla file is,
| | 00:32 | change the name of this file to Card with a capital C
| | 00:35 | .as, and then click Save.
| | 00:40 | Now we're ready to write our card class.
| | 00:43 | Type package, go to the next line, open curly brace,
next line, close curly brace, up arrow, Enter.
| | 00:53 | Now type public class Card, with a capital C.
Remember that should be the same as the file
| | 01:02 | we're working with.
| | 01:03 | extends MovieClip, with a capital M and a capital C for Clip.
| | 01:11 | If we use any class
| | 01:14 | inside of an external ActionScript file we need
to import that class. So let's go up one line.
| | 01:19 | Press Enter a few times to go down a few lines and go back up one
| | 01:23 | and then type import flash.display.MovieClip with a capital M
| | 01:32 | and a capital C and a semicolon;
| | 01:37 | After the class declaration on line 5,
click and go to the next line,
| | 01:42 | open curly brace, Enter, close curly brace, up arrow, Enter.
| | 01:47 | Now we'll define the constructor function for our class. The
constructor function is a function that automatically runs when
| | 01:54 | an instance of this class is created.
| | 01:56 | Type public function Card with a capital C.
This should be exactly the same casing as
| | 02:08 | our class name and your filename.
| | 02:12 | Then type (). Go to the next line, open curly brace,
next line, close curly brace, up arrow, Enter.
| | 02:22 | If we were working with buttons
| | 02:25 | or if the card movie clip were a button instead
of a movie clip and we were to roll over it,
| | 02:30 | we'd see a hand cursor. If we want to get a hand cursor
| | 02:34 | on our movie clip, then we have to set the
button mode property of a movie clip to true.
| | 02:40 | So type this.buttonMode, Mode has a capital M,
| | 02:45 | space, equals, space, true, and then a semicolon.
| | 02:50 | Let's save this file.
| | 02:52 | So after buttonMode = true, press Enter.
Type this.addEvent with a capital E,
| | 03:00 | Listener with a capital L, open parenthesis.
| | 03:03 | Now we're going to listen for a MouseClick. So type
Mouse with a capital M, Event with a capital E.CLICK,
| | 03:12 | all capitals, type a comma,
| | 03:16 | and then the event handler that
will run when the user clicks on
| | 03:20 | the card will be on, and then Click with a capital C,
| | 03:24 | close parenthesis and a semicolon.
| | 03:27 | Since we're using mouse event,
we'll have to import that as well.
| | 03:31 | Right after it in the top of our code,
when we import it in movie clip,
| | 03:35 | press Enter and type import flash.events.Mouse
with a capital M, and a capital E for Event;
| | 03:52 | Now we'll do one more thing before we go back to our fla file.
| | 03:55 | We'll just write a simple
| | 03:57 | event for when we click on the card. So right after the
close curly brace of our constructor function on line 12,
| | 04:06 | press Enter twice to go down two lines
| | 04:09 | and type private function onClick(event:MouseEvent
with a capital M and a capital E for Event):void,
| | 04:27 | Enter, open curly brace, Enter,
close curly brace, up arrow, Enter.
| | 04:34 | Now we want to do is flip over the
card whenever you click the button.
| | 04:40 | Type this.play();
| | 04:48 | Save the file by going to File, Save.
| | 04:52 | Return to Memory.fla.
| | 04:54 | Now to associate the card in our library with the ActionScript
file that we just created, we need to go down to our library,
| | 05:02 | right-click or Control-click
the card symbol, select Linkage,
| | 05:10 | select Export for ActionScript.
| | 05:13 | Then for the Class, give it the same name
| | 05:17 | as your ActionScript file, the same name as your
class, the same name as your constructor function,
| | 05:21 | Card with a capital C.
| | 05:23 | Click OK.
| | 05:25 | Drag a few instances of Card onto
the Stage, doesn't matter how many.
| | 05:30 | Test the movie by pressing Command_Return
on the Mac or Ctrl+Enter on the PC.
| | 05:36 | Click the cards and they flip over.
| | 05:40 | Click them again and they flip back.
| | 05:44 | And so we have created the basic bones for our memory card.
| | 05:51 | In the next movie, we'll create these cards using ActionScript
| | 05:54 | and put the symbols inside of them.
| | 05:57 |
| | Collapse this transcript |
| Writing a memory game class| 00:00 | In this movie we'll create a document class
to hold our whole memory game and in that class
| | 00:07 | we'll bring out instances of our card from the
library and put images inside of those instances.
| | 00:15 | If you're following along I'm in Memory.fla in the 9-3 folder,
| | 00:21 | in the chapter 09 folder in the Exercise Files.
| | 00:25 | If you're working along from the last movie
| | 00:28 | you can just continue on, this is the same file.
| | 00:31 | To create the document class, let's go to File - New,
| | 00:36 | Choose ActionScript File, click OK.
| | 00:39 | Then go to File, Save, find 9-3
| | 00:48 | and we'll name the file MemoryGame with
a capital G, .as, and then click Save.
| | 00:58 | No we'll type package
| | 01:01 | Enter, open curly brace, Enter,
close curly brace, up arrow, Enter,
| | 01:08 | public class Memory with a capital M,
| | 01:16 | Game with a capital G, just like
we spelled in the name of our file,
| | 01:19 | extends MovieClip with a capital M a capital C.
| | 01:26 | Go to the next line, open curly brace,
Enter, close curly brace, up arrow, Enter.
| | 01:33 | And that will define our constructor function. Type
| | 01:36 | public function MemoryGame with a capital G, (),
| | 01:46 | Enter, open curly brace, Enter,
close curly brace, up arrow, Enter.
| | 01:53 | And because we're extending the movie clip
class we'll need to import movie clip.
| | 01:58 | Right after the open curly brace under the word package on line 2,
press Enter twice to go down two lines and the up arrow once
| | 02:05 | to go to line 3.
| | 02:07 | type import flash.display.MovieClip with a
capital M and a capital C, and a semicolon.
| | 02:17 | If we want to use the Card ActionScript file,
or we want to use instances of the card class
| | 02:23 | we'll have to import that as well. So go to the next line
and then type import Card with a capital C, then a semicolon.
| | 02:31 | Now let's click on line 7 after the open curly brace. It should
be right under public class MemoryGame extends movie clip.
| | 02:37 | Press Enter twice, up once.
| | 02:40 | Then we'll type private and we'll create a
private variable. Type space var space _card.
| | 02:50 | This variable will hold all of our card instances
| | 02:54 | or we'll just use it as a temporary
instance name for each of our cards.
| | 02:59 | I'll show you how that works a little bit later on.
| | 03:01 | Type a colon, and type Card with
a capital C, then a semicolon.
| | 03:07 | Go down to the constructor function, it should
be on line 12 inside of the two curly braces,
| | 03:13 | then type _card = new Card with a capital C, ();
| | 03:23 | So _card is equal to a new instance of the card class.
| | 03:29 | Let's go to the next line and then
addChild with a capital C, (_card);
| | 03:41 | This will put that card instance on the timeline.
| | 03:45 | Let's save this file.
| | 03:47 | In the next movie we'll put a graphic inside of our card.
| | 03:50 |
| | Collapse this transcript |
| Adding graphics to cards| 00:00 | In this movie we'll take the graphics that go
on our cards out of our library from our fla file
| | 00:06 | and place those graphics inside of our memory cards.
| | 00:10 | If you're following along we're in Memory.fla in the 9-4 folder.
| | 00:14 | That's inside of the chapter 09
folder along with the other Exercise Files.
| | 00:19 | The first step is to go over to the symbols
that you want to use inside of your library.
| | 00:24 | I'm going to right-click or Control-click
on Boarder and then select Linkage.
| | 00:30 | We need to tell Flash to export this symbol for ActionScript
so that we can reference it in our MemoryGame.as file.
| | 00:37 | Check the Export for ActionScript box.
| | 00:41 | You can leave the Class at Boarder and then click OK,
| | 00:45 | and then we get a message that says,
| | 00:48 | You haven't created a class file for
this boarder but you're exporting it,
| | 00:52 | but Flash will create one for you.
| | 00:54 | So we have this class called Boarder, we don't have to write
a class file for it because it just extends movie clip.
| | 01:00 | Flash is creating that class for us.
| | 01:02 | Thanks Flash. Click OK
| | 01:04 | Then we'll also use the BlueBoard. So right-click
or Control-click BlueBoard in your library
| | 01:10 | and select Linkage.
| | 01:12 | Follow the same process by checking Export for
ActionScript and then clicking OK and OK again.
| | 01:19 | Now let's go into MemoryGame.as.
| | 01:22 | This is in the same folder as your fla file,
| | 01:26 | find the create cards function, and
this is where we'll send the card type
| | 01:31 | or the card image to the Card.as file to display that image.
| | 01:37 | The first thing we need to do is go up to line 4
| | 01:40 | right after we declare that we'll import card,
| | 01:42 | press Enter and type import and then we're going to import
the two classes that we just exported for ActionScript.
| | 01:49 | The first one is Boarder, capital B,
semicolon, go to the next line.
| | 01:55 | import BlueBoard, with a capital B and
another capital B for Board and then a semicolon.
| | 02:04 | On line 10 after we declare the _card variable, press
Enter on your keyboard, create another private variable,
| | 02:14 | we'll call this one _boarder:Boarder,
just like you typed it above, and a semicolon.
| | 02:25 | This _Boarder variable will represent
the boarders when we create them
| | 02:30 | or the graphics on the boarder cards.
| | 02:33 | Go to the next line. Type private var _blueBoard
with a capital B, colon, Blue with a capital B,
| | 02:47 | Board with a capital B, and a semicolon.
| | 02:51 | Scroll down to the createCards function.
| | 02:55 | There are many ways to put these graphics inside of the card.
| | 02:59 | What we'll do is go to the card file and we'll
create a function that accepts these cards.
| | 03:07 | Let me show you how that works.
| | 03:08 | Go to Card.as after the onClick
event handler go down a few lines
| | 03:15 | And then type public function, the reason why this going be a public
function is because we'll need to use this function from MemoryGame.as
| | 03:26 | Then type a space and type setType with a capital T, (type
| | 03:36 | so type out the word type, then type a colon then type an asterix,
| | 03:41 | and that's a wild card and we're setting the datatype
there to wild card. So we can pass in any datatype we want.
| | 03:48 | This is very useful because sometimes we're going to want to
pass in a boarder, sometimes a blue board, and in the future
| | 03:54 | another class. Type a close parenthesis, type colon and then void.
| | 04:01 | Go to the next line, open curly brace, the next line,
close curly brace, up arrow, and then Enter.
| | 04:08 | Let's scroll down in our code and
talk about what this code will do.
| | 04:12 | When we create a card instance from our MemoryGame.as file
| | 04:16 | we'll pass in to this file the type
of graphic that's going to be on it.
| | 04:22 | We need to create a variable inside of
the Card.as file that will hold the type
| | 04:28 | that that card is.
| | 04:30 | So each instance of the card class will be unique, or at
least each instance of the card class will have a certain type
| | 04:39 | associated with it, whether it's
a blue board card or a snowboarder card.
| | 04:44 | So let's scroll up in our code.
| | 04:47 | After the open curly brace, after public class Card extends
MovieClip, I'm going to press Enter twice and the up arrow once.
| | 04:56 | Now type private var _type:*;
| | 05:07 | This variable will hold the type that this card is.
| | 05:12 | Scroll down. In the setType function, let's click
| | 05:20 | and then type _type = type;
| | 05:30 | This might seem a little confusing right now.
| | 05:33 | We create the _type variable outside of the function.
| | 05:37 | The reason why we create that variable is so we can
use it anywhere in our code inside of this card file.
| | 05:44 | Scroll down.
| | 05:46 | The type without an underscore is received from MemoryGame.as.
| | 05:51 | We cannot use type without an underscore outside of this function.
| | 05:56 | So the workaround is to create a variable we can use everywhere
and to set that variable to the value that's passed in from
| | 06:03 | the other file.
| | 06:05 | Let's go back to MemoryGame.as. In MemoryGame.as,
| | 06:09 | let's send the boarder to Card.as.
| | 06:14 | So in our createCards function after addChild_card,
| | 06:19 | go to the next line, type _boarder = new Boarder with a capital B,
(); This will create a new instance of the boarder class.
| | 06:36 | And now we can send this boarder inside of the card to
have it display on our card. So go to the next line.
| | 06:43 | Now type _card.setType with a capital T, (_boarder);
| | 06:58 | Now this will run the set type method
| | 07:01 | that's inside of Card.as and it will pass in the new instance
of the boarder class that we created. Now inside of Card.as
| | 07:10 | we'll make the boarder display on the card.
| | 07:12 | Let's go back to Card.as. Inside of our setType method,
| | 07:17 | after the semicolon of _type = type press Enter and then type
| | 07:24 | loader_mc.
| | 07:27 | That's the name of the movie clip instance
that's inside of the card symbol
| | 07:33 | that we're going to used to load in
our card content or our card graphics.
| | 07:39 | Then type .addChild with a capital C, (_type);
| | 07:54 | Let's go back to MemoryGame.as
to see how this is going to work.
| | 07:59 | After we addChild(_card)
| | 08:02 | so that means this card's going to show, we
create a new instance of the boarder class
| | 08:07 | and we call it card.setType.
| | 08:10 | And we send in that new instance of the boarder class
| | 08:14 |
In card.as it's received, or the_border
is received as something called type.
| | 08:23 | Then we set the _type property of Card.as,
| | 08:29 | or of our card class, to the type that we receive from setType.
| | 08:34 | Then the movie clip that's inside of the card of movie clip
| | 08:39 | will addChild, which means it'll put something on the Stage.
| | 08:44 | And that something will be _type,
which is received from MemoryCard.as.
| | 08:51 | So let's save this file by going to File, Save.
| | 08:54 | Also need to save MemoryGame.as, so
select that file, go to File and Save.
| | 09:01 | And test the movie by pressing Cmd+Return or Ctrl+Enter.
| | 09:05 | We have a card, it's face down and click on the card.
| | 09:10 | And there's our snowboarder.
| | 09:12 | So now we've successfully added graphics to our cards.
| | 09:15 | In the next movie we'll create more cards and place them.
| | Collapse this transcript |
| Placing cards| 00:00 | In this movie we'll create a few more cards and place the cards.
| | 00:05 | If you're following along we're in Memory.fla
| | 00:08 | in the 9-5 folder of the chapter 09 folder in the Exercise Files.
| | 00:15 | Let's go to MemoryGame.as that's located in the same folder.
| | 00:19 | Scroll down and find the createCards function.
| | 00:24 | To place our cards we'll simply need to create some loops
| | 00:28 | and then add in x and y properties to the cards.
| | 00:32 | Let's first create a loop
| | 00:34 | So click after the open curly brace of the createCards function.
| | 00:38 | Press Enter on your keyboard and type
for(var i;Number, capital N = 0; i < 2;
| | 00:58 | We'll run this code twice for each card type, so we'll
have a boarder card and then we'll have a snowboard card.
| | 01:07 | So we'll run it twice so we have a
match of cards or a set of two cards.
| | 01:16 | Type a space, i++)
| | 01:20 | Press Enter, and then go to the next
line, type an open curly brace
| | 01:24 | and after the setType method is called on line 26 press Enter
| | 01:29 | and type a close curly brace.
| | 01:31 | If we were to test the code now, the
cards would stack on top of each other.
| | 01:36 | We need to change the x and y values every time
the code runs so that the cards will be spread apart.
| | 01:42 | To do that we'll create variables
that will hold our x and y values.
| | 01:47 | Scroll up to the top of this code in the
section where we created all the variables,
| | 01:53 | right after we created the blue board variable, press Enter and type
private var _cardX, capital X, :Number, capital N, and a semicolon.
| | 02:11 | Let's just copy that line of code so select that line, press
Cmd or Ctrl+C on your keyboard to copy it. Go to the next line.
| | 02:19 | Press Cmd or Ctrl+V to paste the code,
Change the capital X to capital Y.
| | 02:25 | Let's scroll down to our createCards function.
| | 02:29 | And before our loop we'll set an initial x and
y values and we'll change them as the loop runs.
| | 02:35 | So click after the open curly brace of our createCards function
| | 02:40 | press Enter, press it again and then go up one line
| | 02:44 | and type _card, capital X, space, equals, space.
Here will be our initial x value for our card.
| | 02:52 | and type 45;
| | 02:55 | That will make our card 45 pixels
from the left side of the Stage.
| | 02:59 | Go to the next line. Type _cardY
capital Y, space, equals, space, 31;
| | 03:08 | That will place our card 31 pixels from the top of the Stage.
| | 03:12 | Scroll down. Inside of our for loop after _card,setType,
| | 03:19 | click after the semicolon, press Enter to go to the next line,
| | 03:23 | Type _card.x = _cardX; capital X.
| | 03:34 | Now we'll just set the card's x property to our card x variable,
| | 03:40 | which right now will be 45, as we set it above.
| | 03:45 | After this code runs we'll need to add to the card x value.
| | 03:49 | But first let's set the card y value. So
go to the next line and type _card.y = _cardY;
| | 04:03 | That will make the card's y position
equal to 31, just like we set it above.
| | 04:09 | Now on this line let's add a little bit to our card x value,
| | 04:14 | so that the next card that gets created
is shifted over some more pixels.
| | 04:19 | So it won't be laying right on top of the card before
it. So type _cardX, capital X, += _card.width + 50;
| | 04:42 | Now what this line of code is going to do is it's going to
| | 04:47 | take the current card x value the initial value
being 45, it'll add on the width of the card
| | 04:56 | So if we just had this in there, it would line
the cards up so that they were touching each other.
| | 05:01 | And then we add on 50 pixels, so
the cards will be 50 pixels apart.
| | 05:06 | Let's save this file by going to File, Save.
| | 05:10 | Test the movie by pressing Cmd+Return
or Ctrl+Enter on your keyboard
| | 05:14 | and the cards are spaced apart.
| | 05:18 | Now let's do the same thing for the blue board.
| | 05:22 | So what I'm going to do for the blue
board is copy this whole loop.
| | 05:28 | So from the word for, all the way down to
the close curly brace of the for loop.
| | 05:34 | Then I'm going to press Cmd or Ctrl+C on my keyboard,
| | 05:38 | click after the close curly brace,
press Enter to go to the next line,
| | 05:42 | press Enter again to give it a line of space
| | 05:45 | press Cmd or Ctrl+V to paste that code.
| | 05:48 | Now in our loop we'll need to change the i variable to something
else. I'm just going to change it to j since it's after i
| | 05:54 | or else we'll get an error.
| | 05:56 | So change the three i's to three j's, and then
| | 06:01 | now we'l;l just need to change everywhere where it says
boarder to blueboard. So select _boarder on line 41
| | 06:08 | where we create the new instance of the boarder class, and
let's change that to blueBoard. So_blue, capital B for Board,
| | 06:17 | = new BlueBoard with capital B's
and then under setType on line 42,
| | 06:27 | select _boarder and replace that with
_blue and then Board with a capital B.
| | 06:35 | What this block of code will do
is it will generate instances of
| | 06:39 | card and of the blue board and will put the blue board inside
of the new instances of the card and they will be spaced out
| | 06:47 | just like the other cards were spaced out.
| | 06:50 | Let's go to File, Save.
| | 06:53 | Test the movie by pressing Cmd+Return
or Ctrl+Enter on your keyboard.
| | 06:58 | Then we have four cards.
| | 06:59 | Click the cards on the right.
| | 07:01 | We have snowboards. And the one's on the left have snowboarders.
| | 07:07 | And there we have placed and spaced out our cards.
| | 07:11 | And I didn't mention earlier but the
numbers that I came up with, 50 pixels and
| | 07:16 | the x and y positioning are because I set them on
the Stage initially. I charted down the x and y values,
| | 07:23 | just like we did it with the snowboarder in the earlier chapter.
| | 07:26 | In the next movie we'll write the code to check
if the cards match when we flip them over.
| | 07:32 |
| | Collapse this transcript |
| Detecting matches| 00:00 | In this movie we'll learn how to determine whether two cards
are matching. If you're following along, I'm in Memory.fla,
| | 00:06 | Card.as, and MemoryGame.as and all those files are in
a folder called 9-6 in the chapter 09 folder of the
| | 00:13 | Exercise Files. Let's first go to MemoryGame.as. In order
to check if cards are matching, we're going to need to add
| | 00:20 | event listener to each card instance that we create.
| | 00:22 | And that event is going to be a mouse event, so we'll do
something when you click on a card. So we'll need to import the mouse
| | 00:27 | event class. So on line 6 after import BlueBoard press
Enter or Return on the Mac, type import space flash
| | 00:37 | .events.MouseEvent with a capital m and a capital E, then a semicolon,
and the next thing we'll do is we'll create a variable to hold the first
| | 00:45 | card, because when we compare two cards, we're going to flip over
one card. We need to compare the type of that card against the
| | 00:52 | type of the second card that we flip over.
So we need to hold the first one in a variable.
| | 00:56 | In the section where we created our variables,
after line 15 let's press Enter or Return
| | 01:05 | and type private var _firstCard with a capital C, type
a colon and then type an asterix and then a semicolon.
| | 01:12 | This firstCard datatype can be anything we want
| | 01:15 | ad that will just hold the value of the first card that gets clicked
on, or the first card that gets turned over. Let's scroll down.
| | 01:22 | The next step is to add event listeners to listen to mouse
clicks on all of our cards. So in the createCards method
| | 01:29 | find the first for loop, it starts
on line 28 and ends on line 37,
| | 01:34 | click after _cardX += _card.width + 50; Type Enter
on your keyboard than type _card.addEventListener,
| | 01:42 | Event with a capital E, Listener with a capital L, open
parenthesis. It'll listen for a mouse click so type Mouse
| | 01:50 | with a capital M Event with a capital E, dot CLICK.
| | 01:54 | All letters in CLICK should be capitalized.
| | 01:56 | Then type a comma, and then type
check and then Cards with a capital C.
| | 02:01 | Type a close parenthesis and a semicolon.
| | 02:04 | Let's copy that line of code. So select that whole line
and press Ctrl or Cmd+C on your keyboard scroll down to
| | 02:10 | the next for loop.
| | 02:12 | Find the line of code where the
cardX is being added to, on line 48.
| | 02:17 | click at the end of that line and press Enter or Return on the
keyboard, paste the code we just copied using Cmd or Ctrl+V.
| | 02:24 | And we don't need to change anything else, so let's
scroll down and fell to create the checkCards event handler.
| | 02:31 | On the next line that we just pasted that code there's a close
curly brace. That's the close curly brace of the for loop
| | 02:38 | that we created to create the
blue boards. After that curly brace
| | 02:43 | is the close curly brace of the createCards function.
| | 02:48 | So after the second curly brace press
Enter or Return on your keyboard and
| | 02:52 | I'm going to scroll to left a little bit,
| | 02:55 | press it one more time to go down to the next line,
| | 02:58 | and then type private function checkCards with a capital
C, (event:MouseEvent with a capital M and a capital E,
| | 03:09 | ):void. Go to the next line, open curly brace, next line, close curly
brace, up arrow, Enter or Return to go in between the two curly braces.
| | 03:22 | Now in here we'll type a conditional statement.
| | 03:25 | So type if, open parentheses. The first thing we want it to do is to check
if first card has been defined or not. So if no cards are flipped over
| | 03:34 | then we have no first card. So if that's true then we want to
define the first card as the first card that flips over. So type
| | 03:43 | _firstCard with a capital C, == undefined.
| | 03:46 | So the first card is equal to undefined or if it
hasn't been set yet or no cards have been flipped
| | 03:55 | over then we're going to do something. So type a close parenthesis, Enter
or Return to go the next line, open curly brace, next line, close curly brace,
| | 04:02 | up arrow, Enter or Return to go to the next line. If first card is
undefined then we'll set the value of first card to be whatever
| | 04:11 | card that was clicked on first. So type _firstCard
= event.current, and then Target with a capital T,
| | 04:11 | and then a semicolon. And that will
represent the card that they clicked on.
| | 04:27 | That's the current target. If we just put the word target
we could be capturing the data of the graphic on the target.
| | 04:34 | So by using current target we're making sure we're
capturing the event from _card and not a graphic.
| | 04:42 | After the close curly brace of
the conditional statement press Enter.
| | 04:45 | And now let's type out something that we'll do if the cards
are matching or if the type of the first card is the same as
| | 04:52 | the type of the second card. So type else if (
| | 04:56 | Now we're going to do something special here. Type capital
S for string(_firstCard with a capital C, ._type.i)
| | 05:11 | This block right here, this line, string(), that will
convert anything inside of the parentheses to a string.
| | 05:18 | That also works with all kinds of other datatypes. So we're
taking the firstCard.type which could be object boarder or
| | 05:26 | object board or whatever and converting it into a string.
| | 05:30 | If we used _firstCard.type that would give us an instance.
We're taking this instance or this symbol type and
| | 05:37 | converting it into a string.
| | 05:39 | That's what is going to make this code work. After that close parenthesis
for the string type, space, equals, equals, space, then we'll have to do the
| | 05:47 | same thing where we convert the second card's type to
a string. So type capital S for String(event.current
| | 05:57 | Target with a capital T ._type)) to end the if statement.
| | 06:07 | Press Enter or Return to go to the next line.
| | 06:09 | You might want to scroll down in your code a little bit
| | 06:12 | and scroll back.
| | 06:14 | Then type an open curly brace, Enter,
close curly brace, up arrow, and then Enter.
| | 06:19 | So if we have a match or if the type of the first card
| | 06:23 | is equal to the type of the second card,
| | 06:28 | we will trace, so type trace("match!");
| | 06:37 | So if the type is the same on the first card they flip over
as the second card, we're going to get a match. So it will
| | 06:43 | trace match,
| | 06:44 | If it's not the same we'll trace something else. So after the close
curly brace of the else if statement, press Enter and then type else,
| | 06:52 | press Enter again, type an open curly brace,
| | 06:55 | Enter or Return, close curly brace, up arrow,
Return to go in between the two curly braces.
| | 07:00 | Now we'll trace("wrong!"); Let's save the file, and we have to do
one more thing before this will work properly. When we're calling
| | 07:15 | firstCard._type,
| | 07:17 | the card class that we created has a property named _type.
Let's take a look at that property by checking out card.as
| | 07:27 | Here is the line where we created that variable.
| | 07:29 | Notice the word private,
| | 07:31 | that means this variable is only known inside of this class file,
| | 07:37 | which means we can't reference it or do anything with it outside
of the card class file. Now let's change the word to public and
| | 07:44 | resolve this issue. Type public, go to File, Save.
| | 07:50 | Press Cmd+Return or Ctrl+Enter on your keyboard to test the movie.
| | 07:56 | Click one card,
| | 07:58 | and then click another card.
| | 08:02 | Looks like it's working Okay.
| | 08:05 | Close the file. We'll test it again using the same keyboard shortcut.
| | 08:10 | Flip over one card and then flip over
another card that you know is not a match.
| | 08:15 | And it says wrong, sweet.
| | 08:18 | We can tell whether or not we have
a match. Let's click on a third card.
| | 08:23 | And now it's saying match. It looks like we have some problems.
We're going to have to fix some stuff in our code. The reason
| | 08:29 | why it's not working okay is because we
have never reset the first card variable
| | 08:33 | In the next movie we'll reset the first
card variable so that the code work properly.
| | 08:39 |
| | Collapse this transcript |
| Resetting cards| 00:00 | In this movie we'll talk about how to reset the first card
variable and how to disable interactivity when cards are face up.
| | 00:06 | If you'd like to follow along I'm in Memory.fla,
Card.as and MemoryGame.as. These files are all in the
| | 00:12 | 9-7 folder in the chapter 09 folder with the Exercise Files.
Frst, let's test the movies so we can see examples of the
| | 00:19 | problems with the code. I'm pressing Cmd+Return
or Ctrl+Enter on the PC to test the movie.
| | 00:23 | Flip over a card, and then flip over another card.
| | 00:27 | So you either get match or wrong. If we click on a third card,
| | 00:33 | I get wrong.
| | 00:34 | Notice that the variable first card never gets reset.
Also note that if I click on a card that's faceup,
| | 00:40 | it'll flip back over.
| | 00:41 | That's something that we don't want inside of
the Card.as file. So let's fix all of those.
| | 00:46 | Let's close that window.
| | 00:48 | Close the Output window and go to MemoryGame.as.
| | 00:51 | Let's reset the first card variable after the second card is flipped
over. So we'll need to write that under match and under wrong.
| | 00:58 | So after trace match, press Enter or Return to
go the next line and type _firstCard = undefined;
| | 01:10 | So we're intentionally setting the value of first card to undefined
because we found a match. We want that value to be reset so
| | 01:16 | then we can search for another match. Let's do the same
thing with the else statement. So select this line of code.
| | 01:23 | Press Cmd or Ctrl+C on your keyboard to copy that line.
Click after the trace statement where we trace wrong.
| | 01:28 | Press Enter or Return on your keyboard and then press Command or
Ctrl+V to paste that code. Let's save the file by going to File
| | 01:35 | and then Save, and then test the movie by
pressing Cmd+Return or Ctrl+Enter on the PC.
| | 01:41 | Click the card all the way to the left
and the card closest to the right of it,
| | 01:46 | and we get a match. Click the next card to the right.
| | 01:50 | We don't get anything. Then click
the card to the right of that card.
| | 01:53 | Then we get another match.
| | 01:57 | Right there. Beautiful.
| | 01:59 | So we're resetting the first card value.
| | 02:01 | But the cards still flip over, if we click on
them when they're face up. So let's close that out.
| | 02:07 | And now what we'll do when you click on any card and turn it face
up, we'll disable that card. Then we'll enable it if we don't
| | 02:13 | have a match.
| | 02:14 | So click after the open curly brace of the checkCards event
handler and press Enter twice and then an up arrow once. Now type
| | 02:24 | event.currentTarget with a capital T,
.removeEvent with a capital E, Listener capital L,
| | 02:35 | then open parenthesis, and then we can just copy and paste this
code above on line 49, MouseEvent.CLICK and then checkCards.
| | 02:43 | So let's select that code MouseEvent.CLICK and then
checkCards, press Cmd or Ctrl+C on your keyboard to copy it.
| | 02:51 | Click after the removeEventListener and the open parenthesis.
Press Ctrl or Cmd+V on your keyboard to paste that code.
| | 02:57 | And then when a card is face up, the event listener will be
removed so it will no longer be listening for a mouse click.
| | 03:04 | Let's save the file by going to File, Save.
| | 03:08 | And then test movie by pressing Cmd+Return or Ctrl+Enter.
| | 03:12 | Flip a card over, click it again.
| | 03:16 | It flips back over. Why is it flipping back cover? It's flipping
back over because in Card.as we told it to. So let's close out
| | 03:23 | this window and then go to card.as.
| | 03:27 | Scroll down to line 16, where we
define the onClick event handler
| | 03:32 | and we just said whenever you click on this object or whenever
you click on a card, it will play. We only want it to play
| | 03:40 | if it's on frame one. So click after
the open curly brace in that event handler
| | 03:44 | press Enter. Type if(this, which will be
referring to the card instance, .currentFrame,
| | 03:52 | make sure Frame has a capital F, it's referring to the
current frame of the movie clip, space, equals, equals, space 1)
| | 04:02 | So if the current frame is 1, then we'll make
it play. So go to the next line, open curly brace
| | 04:07 | After this.play press Enter or
Return and then a close curly brace.
| | 04:15 | Now let's go to File, Save.
| | 04:16 | Test the movie by pressing Cmd+Return
or Ctrl+Enter on your keyboard.
| | 04:19 | Click a card and then click it a second time.
| | 04:24 | Notice it doesn't flip back over, wonderful.
| | 04:26 | Now let's address one more problem. Let's say
I click another card that I know is not a match
| | 04:33 | and it gives me wrong.
| | 04:38 | If I click on the third or fourth card I get the same problem.
| | 04:45 | In the next movie
| | 04:46 | we'll fix that problem by flipping the
cards back over if we don't get a match.
| | Collapse this transcript |
| Handling incorrect matches| 00:00 | In this movie, we'll solve the problem that we had in the
last movie of incorrect matches. All the working files for this
| | 00:06 | movie can be found in the 9-8 folder in the chapter 09 folder
inside of the working files. Now I'm in Memory.fla. Let's
| | 00:14 | test the movie and analyze our problem. Flip over a card
| | 00:19 | flip over a card that you know is wrong or not a match
| | 00:23 | and they don't flip back over. So let's fix that.
| | 00:26 | Close out that window. Close out the Output window.
| | 00:29 | Go to MemoryGame.as. Now what we'll do is scroll
down until we find our checkCards event handler
| | 00:38 | in the area of the else statement where we
traced wrong and set first card undefined.
| | 00:43 | Let's make cards flip back over.
| | 00:46 | If you remember from the first movie in this chapter we took
a look at the card movie clip. Let's take a look at it again.
| | 00:51 | Going back to Memory.fla, opening up the library
and let's double-click the card symbol in the library.
| | 01:00 | Halfway through the animation of this symbol
there is a frame label called flipBack.
| | 01:05 | If we scrub the timeline from there,
we'll see that the card flips back over.
| | 01:09 | So all we need to is play this
animation if we have a wrong match.
| | 01:14 | Go back to scene 1.
| | 01:15 | Then return to MemoryGame.as.
| | 01:18 | Before we set _firstCard undefined, we need to flip over
_firstCard. So after _firstCard = undefined press up on your
| | 01:26 | keyboard and press Enter or Return
and type _firstCard with a capital C,
| | 01:33 | .gotoAnd with a capital A, Play with a capital P. ("flipBack");
| | 01:45 | Go to File, Save,
| | 01:48 | and then test the movie by pressing
Cmd+Return or Ctrl+Enter on your keyboard.
| | 01:54 | Flip over one card, flip over another
card that you know is not a match,
| | 02:00 | and then notice they don't flip over perfectly,
| | 02:05 | or only the first card flips over, and not the second card.
| | 02:11 | Close out all those windows.
| | 02:14 | Let's tell the second card to flip over as well. So let's go
to the next line and after we set the flip back and then type
| | 02:22 | event.currentTarget with a capital T,
.gotoAndPlay, capital A, capital P, ("flipBack");
| | 02:38 | Go to File, Save
| | 02:41 | and then test the movie by pressing
Cmd+Return or Ctrl+Enter on your keyboard.
| | 02:46 | Flip over a card, flip over another
card that you know is not a match
| | 02:51 | and you get wrong and they both flip over.
| | 02:54 | Let's try that again
| | 03:02 | Let's flip over the other cards.
| | 03:07 | So it looks like something is wrong here.
| | 03:09 | But that's okay. We'll fix this in
just a minute. So close this file.
| | 03:17 | Close the Output window. There are a few steps that we need to
take right here. The first one is that we need to add the event
| | 03:23 | listeners back to the first card and the second card.
So let's go to the next line. Type _firstCard capital C,
| | 03:32 | .addEvent with a capital E, Listener with a capital L,
| | 03:36 | (MouseEvent, capital M, capital E, .CLICK all caps, comma,
| | 03:44 | space, checkCards with a capital C );
| | 03:50 | Let's copy this whole line of code by selecting it
and pressing Cmd or Ctrl+C on your keyboard.
| | 03:55 | Go to the next line. Paste the
code by pressing Cmd or Ctrl+V.
| | 04:00 | Change _firstCard to event.currentTarget
with a capital T, .addEventListener, etc.
| | 04:09 | Save the file again, test it again. Flip over one card,
flip over another card that you know is not a match.
| | 04:17 | They're wrong and they flip back over.
| | 04:20 | Let's try to flip those same cards over again,
| | 04:26 | and they flip back over okay. The problem
is when you initially flip over cards,
| | 04:33 | and they flip back over, you need to reset the event handler.
| | 04:38 | So close out these windows.
| | 04:40 | We scroll up in our code a little bit
| | 04:42 | and take a look at this line of code on line 55 removeEventListener.
So every time you flip over a card it's no longer
| | 04:48 | listening for a mouse click.
| | 04:51 | We need to add it back on like we did in lines 71 and 72.
| | 04:56 | So if when a card flips over,
| | 04:59 | it becomes disabled. If it's a match we leave it disabled,
and if it's not a match we run the flipBack animation and then
| | 05:05 | re-enable the card.
| | 05:08 | And that's how to deal with an incorrect match.
| | Collapse this transcript |
| Determining a win| 00:00 | In this movie we'll take a look at
how to determine a win in your game.
| | 00:03 | If you're working along these files are all in the 9-9 folder
in the chapter 09 folder along with the other exercise
| | 00:10 | files. Let's go to MemoryGame.as.
| | 00:14 | In order to determine a win, we're going to need two things.
We'll need a variable that holds the number of total matches
| | 00:20 | and then we'll need another variable that holds the number of current
matches, and every time the person playing the game gets a match
| | 00:26 | we'll add to the current matches variable, and if that ever
equals the total matches variable, that counts as a win.
| | 00:32 | Let's create those variables right now.
Let's go to line 16 in our code
| | 00:36 | after the private var _firstCard line, press Enter or
Return on your keyboard. Create another private variable.
| | 00:43 | Call this one _totalMatches with a capital M,
| | 00:48 | type a colon, then type Number,
| | 00:51 | it's going to be a number, type
a semicolon, go to the next line.
| | 00:55 | Type private var _currentMatches
with a capital M, type a colon,
| | 01:03 | and that will also be a Number;
| | 01:06 | Inside of our constructor function, let's set the initial
values for these variables. Scroll down just a little bit.
| | 01:14 | Right after the open curly brace of our constructor function
| | 01:17 | type Enter on your keyboard or Return on the Mac and then type
| | 01:21 | _totalMatches with a capital M, = 2; We have two
total matches. We have 2 borders and then 2 blue boards.
| | 01:31 | So we have two sets of cards. Press
Enter or Return to go to the next line.
| | 01:38 | Type _currentMatches with a capital M, = 0;
| | 01:43 | When the game first starts no one has made any matches yet.
Now what we have to do is add 1 to the current matches every
| | 01:50 | time you get a match. Scroll down.
| | 01:54 | Find your checkCards event handler.
| | 01:57 | Find the else if statement where we traced match. After we set
first card equals undefined, press Enter or Return on your keyboard
| | 02:04 | then type _currentMatches with a capital M ++;
| | 02:13 | Now we'll add one to the current value of current matches.
| | 02:17 | So for the first match it'll be one, for the second match it'll add
one more to that and give you two. Then what we want to do is check
| | 02:23 | to see if current matches is equal
to the total matches. If so that's a win.
| | 02:28 | Press Enter to go to the next line. Inside of the else if
statement we're going to nest another if statement. Type the word
| | 02:37 | if(_currentMatches >= _totalMatches)
| | 02:46 | Now I mentioned that we would check to see
if the current matches was equal to total
| | 02:55 | matches. Why am I using > instead of == ? You'd probably be
fine if you use == but in some random event that the current
| | 03:02 | matches somehow goes over total matches, I'm using this just in case.
| | 03:07 | Click after the close parenthesis, press Enter or Return on your keyboard.
Type an open curly brace, Enter, close curly brace, up arrow, Enter again
| | 03:20 | and then we'll trace ("YOU WIN --make sure to put it
in all caps with a lot of exclamation points-- );
| | 03:25 | Let's save the file by going to File, Save.
| | 03:31 | Then test the movie by pressing Cmd+Return
or Ctrl+Enter on your keyboard
| | 03:35 | Get the first match.
| | 03:38 | We get match in the Output window
and then get the second match,
| | 03:44 | and we won! And that is how to detect a win.
| | Collapse this transcript |
| Adding additional cards| 00:00 | In this movie we'll learn to add more cards in a memory game.
I'm working in Memory.fla which is in the 9-10 folder
| | 00:07 | inside of the chapter 09 folder along with the rest of the
working files. We'll need one more asset for this movie. To grab
| | 00:13 | that asset, go to File - Import - Open External Library.
| | 00:19 | Select Snow.fla in the 9-10 folder and click Open.
| | 00:26 | When the Library window shows up,
click and drag Snow from that Library
| | 00:32 | into the Library of your fla file
and then close the external Library.
| | 00:36 | And now we have the asset that we need. Just like when we used the
boarder in the blue board for our Memory Game we'll need to export
| | 00:43 | our other card pictures for ActionScript.
| | 00:46 | So let's go to RedBoard in the Library and Right
or Control click, and then select Linkage.
| | 00:53 | Check Export for ActionScript, leave the Class name the same,
| | 00:58 | click OK, and then click OK to the other message.
| | 01:01 | Right-click or Control-click Snow
in the Library and do the same thing.
| | 01:05 | Choose linkage, check Export for ActionScript
and then click OK. CLick OK again
| | 01:11 | and we're ready to use those symbols with
ActionScript. Let's go to MemoryGame.as.
| | 01:17 | After import flash.events.MouseEvent we'll need to do
the same thing where we import those classes. So type
| | 01:23 | Return or Enter on your keyboard. Then type import Red
with a capital R, Board with a capital B and a semicolon.
| | 01:31 | Go to the next line and type import Snow with a capital S,
and then a semicolon. Now we'll need to create variables
| | 01:40 | that will hold that data. In the same area of our code where
we declared the other variables, after _currentMatches,
| | 01:46 | press Return or Enter on your keyboard,
create a new private variable
| | 01:51 | call this one _redBoard with a capital B, set the datatype to Red
with a capital R and then Boarder with a capital B, then a semicolon.
| | 02:00 | Go to the next line. We'll do the same thing for Snow.
| | 02:02 | Type private var _snow:Snow;
| | 02:07 | The next step is actually generate the card
instances. We'll do that by scrolling down
| | 02:17 | and finding our createCards function.
| | 02:21 | Since we'll need to run two more for loops
to generate the two new types of card that we have,
| | 02:27 | let's just select both for loops.
| | 02:31 | So from line 36 all the way down to line 58.
| | 02:35 | Press Cmd or Ctrl+C on your
keyboard copy that block of code.
| | 02:39 | Click after the close curly brace,
press Enter twice to go down two lines
| | 02:44 | and press Cmd or Ctrl+V on your keyboard and paste the code.
| | 02:47 | Scroll up a little bit to find var i on line 60.
| | 02:53 | select i and then change it to k. We're
just going in alphabetical order here i, j, k.
| | 03:00 | Change those three is to three ks,
and the three js below to three l's.
| | 03:12 | Now I'll just need to modify a little bit of code here.
| | 03:14 | Everywhere where it says boarder in the k loop,
let's replace that with _redBoard with a capital B.
| | 03:22 | Where it says new Boarder we'll replace with new
| | 03:26 | capital R for Red, and a capital B for Board.
| | 03:30 | I'm going to change it one more time.
| | 03:32 | After setType we need to replace _boarder with _redBoard
with a capital B. Now let's do the same thing for Snow.
| | 03:39 | Scroll down a little bit. Change _blueBoard to _snow
| | 03:46 | and then new BlueBoard to new Snow with a capital S.
| | 03:49 | And then card.setType, change that to _snow as well,
| | 03:54 | Let's save the file by going to File and then Save.
| | 03:57 | Test the movie by pressing Cmd+Return or Ctrl+Enter on
your keyboard and notice that we don't really see anything.
| | 04:03 | If you expand the size of your Flash
Player window you'll see the other cards.
| | 04:08 | So that's all fine and dandy but we want to create a new row
| | 04:13 | cause we'd have to make our Flash movie ridiculously wide to accommodate
that much space. Let's just put the next four cards on a new row.
| | 04:20 | Close this window out.
| | 04:22 | All we have to do is reset the x to the
original x position and then add to the y position.
| | 04:28 | So let's scroll up a little bit
| | 04:33 | until you find the original x and
the original y. The original x is 45.
| | 04:38 | Let's select that line of code. Copy it
by pressing Cmd or Ctrl+C. Scroll down
| | 04:44 | before the for loop where we have the k variable let's
click. We'll paste that code to reset the x to 45 and the
| | 04:52 | x position will be fine, except for they'll layer right over
the top of the last four cards. So we just need you adjust the
| | 04:58 | y position. Press Enter, then type
_card capital Y, += _card.height + 50;
| | 05:17 | We're spacing the cards out vertically with this code
ust as we spaced them out horizontally when we set the card
| | 05:24 | x property in a previous movie.
| | 05:27 | Go to File, Save.
| | 05:29 | Press Cmd+Return or Ctrl+Enter on
your keyboard to test the movie.
| | 05:33 | And there we have two rows,
| | 05:40 | and we can see our snow cards, and our red board cards.
| | 05:49 | And so that is how to create a new row of cards and add cards
to your movie. So if you want to add more cards you can add as
| | 05:56 | many as you want by doing the same steps. So everything
is great, but if you look in your Output window
| | 06:01 | it says YOU WIN!
| | 06:03 | And we only got two matches. All we need to do is update the
total matches variable and we'll be fine. Let's close out
| | 06:09 | the Output window, close out the Flash player window, scroll up
| | 06:14 | and we'll set the total matches on line 26, from two to four
| | 06:20 | Go to File, Save. Test the movie by pressing
Cmd+Return or Ctrl+Enter on your keyboard.
| | 06:26 | And let's get all the matches,
| | 06:37 | and then we win once we get all the matches. And that's that
how cards to your Memory Game. By following these same steps
| | 06:43 | you can add as many cards you want.
| | Collapse this transcript |
| Randomizing cards| 00:00 | In this movie we'll learn how to randomly place our cards. If you're
following along we're in Memory.fla, Card.as and MemoryGame.as.
| | 00:07 | All these files can be found in the 9-11 folder inside of
the chapter 09 folder along with the other exercise files.
| | 00:14 | Let's go to MemoryGame.as, scroll down
to the area where we created variables.
| | 00:19 | After we created the variable called _snow,
press Enter and type private var _cards.
| | 00:29 | The datatype of the cards will be an array so
type :Array, with a capital A, and a semicolon.
| | 00:36 | What we're going to do is use an array to hold all of our cards
and then use a loop to randomly place the cards in the array.
| | 00:45 | Scroll down a little bit to our constructor
function after the open curly brace,
| | 00:49 | press Return or Enter on your keyboard
and type _cards = new Array();
| | 01:01 | Se we've created a new array and now what we need to do is add to
the array every time we create a card. So scroll down in our code.
| | 01:09 | Find the createCcards method. Inside of that method find
the first for loop. The variable should be called i.
| | 01:16 | Scroll to the right of your code if you have to,
| | 01:19 | after the event listener we added,
and then press Enter on your keyboard.
| | 01:24 | You may want to scroll back a little bit, and then
type _cards.push(_card this one's not plural, );
| | 01:38 | This will add the card to the top of the array.
| | 01:40 | Let's copy this line of code
| | 01:42 | by selecting it and pressing Cmd
or Ctrl+C on your keyboard. Scroll down.
| | 01:47 | Let's paste this line of code for the j loop,
| | 01:52 | after the MouseEvent.CLICK, when we added
the event listener to card on line 61.
| | 01:58 | Scroll down to the k loop.
| | 02:00 | Click after add event listener on line 74, press Return or Enter
on your keyboard then press Cmd or Ctrl+V to paste the
| | 02:07 | code again and scroll down to the l for loop.
| | 02:11 | Click after the add event listener line and press Return
or Enter again and then paste by pressing Cmd or Ctrl+V
| | 02:17 | one more time.
| | 02:18 | So everyone of our cards will be inside of our array.
Now we'll write a function to randomly place these cards.
| | 02:24 | Scroll down to the very bottom of your code.
| | 02:31 | You'll see one close curly brace, and then to the
right of that there's another close curly brace.
| | 02:37 | To the right of that there's another close curly brace. So after the
third close curly brace from the left, press Enter on your keyboard twice.
| | 02:45 | So we'll write this code underneath
the checkCards event handler.
| | 02:50 | Type private function randomizeCards with a capital C.
| | 02:59 | Type (cards:Array with a capital A, this will receive
our cards array so we can randomize them, ):void
| | 03:16 | Go to the next line, open curly brace, next
line, close curly brace, up arrow, Enter
| | 03:19 | Now what we'll do is we'll create variables to hold two
random cards and the random x and y values of the first card.
| | 03:27 | Type var randomCard with a capital C, 1:Number;
| | 03:35 | What we're going to do is we're going to take two random cards and
then swap the x and y positions. We're going to put this in a loop and
| | 03:42 | do that multiple times and that will give us random placement of cards.
Press Enter or Return. Go to the next line. Create a new variable
| | 03:49 | called randomCard with a capital C, 2. That
will also be a Number, then type a semicolon.
| | 03:55 | Go to the next line. Create a new variable.
We'll call this card1X: it'll also be a number.
| | 04:04 | This will stand for the original x
position of card1. Then type a semicolon.
| | 04:10 | Now we'll create a variable to hold the
card1's y position, so type var card1Y:Number;
| | 04:19 | Press Enter or Return twice to go down two
lines. That'll give us some space, then type
| | 04:24 | for(var i:Number = 0; i <
| | 04:38 | We want this code to loop as many times as we want.
What it's going to do is swap the position of two cards,
| | 04:44 | however many times you think will randomize your cards enough.
| | 04:47 | I'm going to type 10. Then type a semicolon, then type a space
type i++) Go to the next line by pressing Return or Enter on
| | 04:55 | your keyboard. Open curly brace, next line, close curly brace,
up arrow, Enter or Return to get within the curly braces.
| | 05:03 | Now what we'll do is we'll generate a random card by getting a
random index inside of our array. So type randomCard with a
| | 05:11 | capital C, 1 = Math with a capital M, .floor.
Remember Math.floor rounds down to the floor.
| | 05:21 | (Math with a capital M, .random() * cards.length
| | 05:32 | And this will give us a random index of our array.
Type a close parenthesis then a semicolon.
| | 05:37 | Let's select this whole line of code,
| | 05:39 | press Cmd or Ctrl+C on your keyboard to copy it
| | 05:43 | After the semicolon, press Return or Enter to go to
the next line. Press Cmd or Ctrl+V to paste the code.
| | 05:49 | Change randomCard1 to randomCard2
| | 05:50 | There every time the loop runs we'll have
a new random card1 and a new random card2.
| | 05:57 | Now let's write the code to swap these cards.
| | 06:00 | After the semicolon on the randomCard2 line
press Return or Enter twice to go down two lines.
| | 06:05 | To swap them we'll get randomCard1's original x value
and original y value and swap it with randomCard2's
| | 06:13 | y values and x values. Now type card1X = cards[
| | 06:21 | Now we'll reference the randomCard1 index of the
array. So type randomCard with a capital C, 1].x;
| | 06:32 | Let's copy this line of code by selecting it and pressing
Cmd or Ctrl+C on your keyboard, clicking after the semicolon,
| | 06:39 | press Enter or Return to go to the next
line. Paste the code using Cmd or Ctrl+V.
| | 06:43 | Change card1X to card1Y, capital Y, and then the.x to .y.
| | 06:50 | So now we have the initial x and y values of the first card.
Now we'll go to the next line and set the randomCard1's x and y's
| | 06:59 | equal to the randomCard2's x and y's and set the
randomCard2 x and y coordinates equal to our card1 x
| | 07:06 | and our card1 y variables.
| | 07:08 | So now type cards[randomCard with a capital C, 1].x =
| | 07:17 | Let's just copy everything before the equals sign by
selecting it and pressing Ctrl+C or Cmd+C on the Mac.
| | 07:26 | We'll click after equal sign to paste
the code by pressing Cmd or Ctrl+V
| | 07:30 | and then we'll replace randomCard1 with randomCard2
| | 07:34 | and that will give the x position in randomCard1 to randomCard2.
| | 07:38 | After that type a semicolon, select the line of code,
press Cmd or Ctrl+C on your keyboard to copy it.
| | 07:46 | After the semicolon go to the next line.
Press Cmd or Ctrl+V to paste that code.
| | 07:51 | Change the x's to y's. Now I'll go to the next line.
| | 07:58 | Now we'll set the randomCard2 positioning.
So type cards[randomCard2].x = card1X;
| | 08:16 | That value is coming from the original x position,
| | 08:20 | like we said it above, the original
x position of the randomCard1 x.
| | 08:27 | Let's copy that line of code by pressing
the Cmd+C or Ctrl+C after we've selected it.
| | 08:32 | Click after the semicolon. Press Return or Enter to go
to the next line. Paste the code using Cmd or Ctrl+V.
| | 08:39 | Change the x's to y's, make sure card1Y is uppercase, and there
is our randomize cards function. All we have to do is call it.
| | 08:49 | Let's go up to our create cards method.
| | 08:57 | After the l for loop from line 78 to line
89, click after the close curly brace.
| | 09:03 | Press Return or Enter on your keyboard
and then call the randomized cards function.
| | 09:08 | Type randomizeCards with a capital C, open parenthesis.
| | 09:13 | Now all we need to do is pass in our card's array. So type _cards);
| | 09:23 | The array holding all of our cards will then be sent
| | 09:26 | in to the randomized cards method as the
array and the cards will come out random.
| | 09:33 | Go to File, Save and then test the movie
by pressing Cmd+Return or Ctrl+Enter on your keyboard.
| | 09:43 | Flip over a card and we have a blue board there.
| | 09:48 | Click the card to the right.
| | 09:52 | It was wrong but we didn't get to
see what card it was. Let's move the
| | 09:55 | Flash player with the left a little bit.
| | 09:57 | Click one card, there's the mountains.
| | 10:00 | And then click another card and there's the snowboarder.
| | 10:02 | All the cards have been randomized.
| | 10:09 | And that is how to randomize your cards and
that should give you a complete Memory Game.
| | 10:15 |
| | Collapse this transcript |
|
|
10. Using Advanced Graphic and Animation ToolsDrawing with code| 00:01 | In this chapter we'll take a look at creating shapes
| | 00:05 | applying filters and applying color changes using code.
| | 00:10 | We'll start out drawing basic shapes.
| | 00:13 | If you're following along I just created
a new document and renamed the layer 1 actions.
| | 00:19 | Let's click on the first keyframe of the actions layer and open
up the Actions panel by pressing Option+F9 or F9 on the PC on your
| | 00:26 | keyboard. Open up the Actions panel.
| | 00:32 | First we'll create a variable that will represent
our shape. So type var shape:Shape with a capital S,
| | 00:43 | the datatype will be a shape.
Then type space, equals, space,
| | 00:49 | new Shape with a capital S, ();
| | 00:56 | So our shape variable is a new instance of the shape class.
| | 01:02 | Now let's actually draw our shape.
| | 01:04 | Go down a few lines. Then type shape.graphics
| | 01:11 | that's the property of the shape class.
| | 01:14 | Then type a dot then type lineStyle with
a capital S, type an open parenthesis.
| | 01:22 | Now we can Enter a whole bunch of
parameters to create a line style.
| | 01:28 | We're only really concerned with two right now.
| | 01:30 | The first one is thickness, that's a number.
| | 01:34 | Let's set this at 1, that's going to be the stroke width.
| | 01:38 | Then type a comma. The next parameter
we're going to enter is the color.
| | 01:42 | The color is a hexadecimal value that will begin
just like we worked with text with 0x So type 0x.
| | 01:50 | And then six digits. I'm going to type 00FF00.
| | 01:57 | That will give me a green stroke on my shape.
| | 02:00 | Type a close parenthesis and then a semicolon.
| | 02:04 | so our shape has a line style of a one pixel width stroke
| | 02:09 | that is green. Let's go to the next line.
Let's define the fill for our shape.
| | 02:14 | So type shape.graphics.beginFill
with a capital F, open parenthesis.
| | 02:25 | Now all we need to put in here
| | 02:27 | is the color and we can optionally put in the alpha,
but for now let's just give our shape a black fill.
| | 02:34 | So type 0x. Because this is going be a
hexadecimal value then type 000000
| | 02:42 | All the digits set to zero will give us the color Black.
| | 02:46 | Type a close parenthesis and a semicolon.
| | 02:50 | Go to the next line then type shape.graphics
.drawCircle with a capital C, open parenthesis.
| | 03:05 | Now, this will draw a circle for us.
| | 03:08 | When we draw a circle we need to specify the
x and y positions, then the radius of the circle.
| | 03:14 | So type in 100, 100, that will
give us an x of 100 and a y of 100.
| | 03:24 | Type another comma and for the radius let's set it at 50);
| | 03:33 | The next step is to call end fill.
| | 03:37 | So go to the next line.
| | 03:39 | It's the best practice, you actually don't have to do this, but
it's the best practice to end a fill after you draw the shape.
| | 03:47 | So type shape.graphics.endFill with a capital F, ();
| | 03:59 | Now we're ready to add this object on the Stage
using addChild. So go to the next line. Type addChild
| | 04:08 | with a capital C, (shape);
| | 04:17 | Test the movie by pressing Cmd+Return
or Ctrl+Enter on your keyboard.
| | 04:24 | And we have a shape
| | 04:25 | with a green stroke and a black fill.
If the green stroke is hard to see
| | 04:30 | you can close out the window, find the line
where we set the line style of the shape.
| | 04:36 | Change the first number 1 to 5,
| | 04:40 | or some other number that's higher than
1 so the stroke is a little bit more obvious.
| | 04:44 | Now press Cmd+Return or Ctrl+Enter to test the movie.
| | 04:48 | And there is our circle.
| | 04:50 | Now you may be thinking,
| | 04:52 | that sure is a lot of work to just draw a
circle when I can just drag one out on the Stage.
| | 04:58 | And you've got a good point there.
| | 05:01 | You don't always want to draw
shapes with code. You don't need to.
| | 05:07 | This whole title is not to tell you to
always use code for every little task all the time.
| | 05:12 | It's not always the most efficient way to draw a circle.
| | 05:15 | Why would you want to draw a circle with code?
| | 05:17 | Let's say you wanted to create an interface
where your user can draw out their own shapes.
| | 05:25 | That is where you'd want to create it with code.
| | 05:27 | Or if you want to generate random colors or
random objects, then you can do that with code as well.
| | 05:34 | But for the everyday task of just drawing shapes,
| | 05:36 | it's a better practice to do it
the faster way by dragging out the circle.
| | 05:41 | Let's close this window.
| | 05:43 | This time we'll draw a rectangle.
| | 05:45 | So let's find shape.graphics.drawCircle on line 5.
| | 05:51 | Select everything up until the word graphics. So
don't select graphics but select the dot after graphics.
| | 05:58 | Press delete or backspace on your keyboard and type a dot
| | 06:01 | and then type drawRect with a capital R.
Rect is short for rectangle. Then open parenthesis.
| | 06:11 | And here we specify x and y values and a width and a height.
| | 06:16 | So we'll set the x and y values at 100, 100 yet again.
| | 06:24 | By the way the x and y values are
for the top left of your shape.
| | 06:28 | Then type a comma and now we'll type the
width. So let's make a width of 200
| | 06:35 | and then a comma, and then a height of 100);
| | 06:41 | Test movie by pressing Cmd+Return
or Ctrl+Enter on your keyboard.
| | 06:47 | And there is our rectangle.
| | 06:49 | If you like to learn how to draw more objects with code
| | 06:52 | look up the graphics class. That would be Graphics with a capital G.
| | 06:57 | If you want the shortcut way to do it, you
can just type out Graphics with a capital G.
| | 07:05 | Select that. Press F1 on your keyboard, scroll down.
| | 07:10 | Then you can find all the shapes
that you can draw and how to draw them.
| | 07:15 | Let's close out the Help window, delete Graphics.
| | 07:20 | I'll show you one more thing.
| | 07:22 | Any visible object, like a movie clip, can draw shapes.
| | 07:30 | Let's go to the top of our code
and change Shape to movie clip
| | 07:35 | just to verify that this works. So select the word Shape with
a capital S, on the left side of the equals sign and type
| | 07:42 | Movie with a capital M and Clip with a capital C.
| | 07:47 | After the equals sign where it says new Shape,
| | 07:50 | type in new MovieClip with a capital M and a capital C.
| | 07:55 | Test the movie by pressing Cmd+Return
or Ctrl+Enter on your keyboard.
| | 07:59 | We get the same effect.
| | 08:02 | So any visible object has a graphics
property and can draw a vector shape.
| | 08:08 | And there's a look at drawing shapes with code.
| | 08:12 |
| | Collapse this transcript |
| Creating a color change| 00:00 | In this movie we'll look at how to modify
the color of a movie clip using code.
| | 00:06 | If you're following along we're in
Color_Change.fla inside of the chapter 10 folder.
| | 00:12 | Let's look at how to create a color change first in design mode.
| | 00:17 | Click on the mountain on the Stage.
| | 00:19 | Then look in the Property Inspector.
| | 00:21 | Click on the color drop-down and choose Tint.
| | 00:26 | Their color might not be the same as mine, so click
on the color picker to the right of the Tint drop-down
| | 00:33 | and then roll your mouse over the different colors.
| | 00:36 | So this is what we'll be creating in this movie.
| | 00:39 | Now you may be wondering why do you ever
want to create a color transforming code?
| | 00:45 | That's a great question.
| | 00:47 | You don't always want to create one with code,
but let's say you wanted to grab a random color.
| | 00:52 | If you needed a random color then you'd have to do it with code.
| | 00:57 | So in this movie we'll take a look at how to create a color transform.
In the next movie we'll learn how to make a random color transform.
| | 01:05 | Click away from the color picker. Select the
Color drop-down and choose None for the color.
| | 01:13 | Click on the first keyframe of the actions layer and open up your
Actions panel by pressing Option+F9 on the Mac or F9 on the PC.
| | 01:21 | There are three steps in creating the color change.
| | 01:24 | First you have to create a color transform object.
| | 01:28 | Then you have to tell that object what changes it will apply
and then you have to apply the color transform to the object
| | 01:35 | you want to transform the color of.
| | 01:37 | So type var color, then a capital T for Transform, then a colon.
| | 01:45 | The datatype will be a color transform. So type Color
with a capital C then Transform with a capital T.
| | 01:50 | Type space, equals, space.
| | 01:53 | This will be equal to a new instance of
the color transform class. So type new Color with a
| | 01:58 | capital C, and Transform with a capital T, ();
| | 02:05 | So that's step one. Create the color transform
object or the instance of the color transform class.
| | 02:12 | After the semicolon press Enter or
Return a few times to go down a few lines.
| | 02:16 | And now we'll define what our color transform will
look like. So type color, capital T, and then a dot.
| | 02:25 | What we'll do is subtract a little bit of
the blue of our mountain and then add some red.
| | 02:33 | So type blueOffset with a capital O. This will offset the current
| | 02:41 | blue value of this color.
| | 02:44 | Type space, equals, space.
| | 02:47 | The values for this property are in range from -255 to +255.
| | 02:54 | Now type -100;
| | 03:00 | This will subtract from its current blue value. In the
next line we'll add to its red value. Go to the next line.
| | 03:07 | Type color, capital T.redOffset with a capital O, = 100;
| | 03:18 | So that's the second step.
| | 03:21 | Set properties for your color transform
object. Let's go down a few lines.
| | 03:27 | The third step is to apply that color transform.
| | 03:30 | So type the object first that you'd
like to apply the color transform to.
| | 03:35 | In this case we'll do mountain. So type mountain_mc.
| | 03:44 | Now the color transform is hidden within the transform
property. So type transform.colorTransform with a capital T.
| | 03:58 | Then type space, equals, space,
color and a capital T and a semicolon.
| | 04:05 | Test the movie by pressing
Cmd+Return or Ctrl+Enter on your keyboard.
| | 04:12 | And that is how to apply a color transform.
| | 04:15 | So if you're wanting to transform the boarder, then we could
just replace mountain_mc with boarder_mc. Close out the window.
| | 04:24 | Select mountain and replace it with the word boarder.
| | 04:28 | Test the movie by pressing Cmd+Return or Ctrl+Enter on your keyboard.
| | 04:34 | Notice the color is slightly different
on the boarder then on the mountain.
| | 04:38 | We're not setting the exact RGB values, but rather
offsetting the current blue and red properties.
| | 04:46 | If you like to learn more about what properties
you can modify with the color transform,
| | 04:53 | close this window, select colorTransform,
press F1 on your keyboard, scroll down.
| | 05:01 | Find the Public Properties area and there
you'll be able to find what you can modify
| | 05:08 | with the color transform and how you
can change the color of your object
| | 05:12 | Let's close out the window.
| | 05:14 | And there is how to create a color transform. In
the next movie we'll create a random color transform.
| | Collapse this transcript |
| Generating a random color change| 00:00 | In this movie we'll take a look at
how to generate a random color change.
| | 00:04 | If you're following along in Random_Color.fla
inside the Chapter 10 folder.
| | 00:10 | On the Stage we have a mountain with
an instance name of mountain_mc,
| | 00:18 | a snowboarder with an instance name of boarder_mc
| | 00:22 | and a button that says random with an instance name of random_mc.
| | 00:29 | Let's look at our code and see what we have already.
| | 00:32 | Click on the first keyframe of the actions layer and open up
the Actions panel by pressing Option+F9 on the Mac, F9 on the PC.
| | 00:38 | At the top of our code, we have all
the code we wrote in the last movie.
| | 00:43 | At the bottom we've added an event listener
to random_mc to listen for a mouse click
| | 00:49 | handled by the onClick event handler.
| | 00:54 | OnClick is just a skeleton of an event handler.
| | 00:59 | What we'll do is make it so when you click the button
| | 01:02 | we'll get a random color for the mountain
| | 01:06 | and a random color for the snowboarder.
| | 01:10 | What we'll do to create this is
we'll copy the three lines of code
| | 01:15 | where we set the blue and red offset of the color transform object
| | 01:19 | and then we'll reset the color transform of boarder_mc. To apply
this color transform when we click the button let's cut and paste
| | 01:28 | the code where we set the color transform
| | 01:30 | inside of the onClick event handler.
So click the three lines of code
| | 01:36 | from colorT.blueOffset down to the boarder_mc.transform
| | 01:42 | and then press Cmd or Ctrl+X on your keyboard to cut that code.
| | 01:47 | If you want to you can delete some extra space.
| | 01:52 | Click inside of the onClick event handler.
| | 01:54 | Press Cmd or Ctrl+V on your keyboard to paste the code.
| | 01:59 | If you do not like the formatting of this code, for example,
| | 02:04 | some of my lines are back too far
to the left. They're not line up
| | 02:08 | properly. It's kind of frustrating to look at. So I'm just
going to click before colorT.redOffset. Press Tab on my keyboard.
| | 02:15 | Click before boarder_mc,transform
and press Tab on my keyword as well.
| | 02:20 | Now all we'll do is change the offset
of properties to random numbers.
| | 02:27 | So let's first do the blue offset.
| | 02:30 | Select -100. Let's replace this with Math.round.
| | 02:38 | Round will round up or down, not always down
to the floor or always up to the ceiling.
| | 02:45 | (Math with a capital M, .random() *
| | 02:55 | Now we have a little bit of a problem. I can type in 255
here and that would give me a number between 0 and 255,
| | 03:04 | and that's great, except for one thing.
| | 03:07 | I want it to give me a number between -255 and +255.
| | 03:14 | So let's think for a second how we would do that.
| | 03:18 | If we multiply by a bigger number, let's
say we multiplied 255 by 2, or we take 510.
| | 03:31 | Then we get a random number between 0 and 510.
| | 03:35 | Then if we subtract 255 from the result of that number,
| | 03:42 | that will give us a random number between -255 and +255.
| | 03:49 | So type 510) That number will be rounded.
| | 03:56 | Then type a space, minus, space, 255.
| | 04:04 | So that will give us our range. Because the range is 510 numbers.
| | 04:10 | If we subtract 255, if this random number gives us
0, then we'll get -255 and at the max value of 510,
| | 04:19 | we'll get a +255.
| | 04:22 | Let's select Math.round math.random.
| | 04:26 | Press Cmd or Ctrl+C on your keyboard to copy the code.
| | 04:30 | Go to the next line. Select 100. Paste the code
by pressing Cmd or Ctrl+V on your keyboard.
| | 04:38 | While we're at it, we might as well apply a green offset as well. So
let's select this whole line on line 9, colorT.redOffset math.round.
| | 04:47 | Everything, Then press Cmd or
Ctrl+C on your keyboard to copy it.
| | 04:51 | Click after the semicolon. Press Enter or Return
to go to the next line. Paste the code by pressing
| | 04:58 | Cmd or Ctrl+V on your keyboard.
| | 05:01 | Change the word red to green and
| | 05:06 | test the movie by pressing Cmd+Return
or Ctrl+Enter on your keyboard.
| | 05:12 | Move this out of the way so we can look at our code.
| | 05:16 | Click the random button.
| | 05:19 | Look at the boarder on the Stage.
| | 05:21 | Every time we click the button we get a random color.
| | 05:27 | And that's how to generate a random color. But what if
we wanted to apply a different random color to the mountain?
| | 05:34 | If I went to the next line after boarder_mc
.transform. If I went to the next line and
| | 05:38 | I apply the same color transform to the
mountain then I would get the same colors.
| | 05:44 | Whatever random numbers are generated here would go inside of the
mountain. So the boarder and the mountain would get the same color
| | 05:49 | transform. If I wanted a unique color transform for the mountain,
| | 05:53 | I could simply select all of the
code inside of the onClick event handler,
| | 05:59 | press Cmd or Ctrl+C on my keyboard to copy it,
| | 06:03 | click after boarder_mc.transform
| | 06:06 | on line 12. Press Enter or Return twice
on your keyboard to go down two lines.
| | 06:11 | Paste the code by pressing Ctrl or Cmd+V on your keyboard.
| | 06:15 | And what this will do is reset all of the
color transform offset values to new random colors,
| | 06:24 | and then we could simply select boarder_mc
and replace the word boarder with mountain.
| | 06:31 | Test the movie by pressing Cmd+Return
or Ctrl+Enter on your keyboard.
| | 06:35 | Click the random button,
| | 06:42 | and we get different colors for everything.
| | 06:45 | And that is how to create a random color transform.
| | 06:48 | All we did was we created the range of numbers, and we
had math.random select a random number in that range.
| | 06:54 | Un the next movie we'll take a look at animating a color change.
| | Collapse this transcript |
| Animating a color change| 00:00 | In this movie we'll take a look
at how to animate a color change.
| | 00:04 | I'm in Animate_Color.fla inside of the chapter 10 folder.
| | 00:09 | On the Stage we have mountain_mc,
that's a giant mountain. Then we have a
| | 00:14 | movie clip called boarder_mc, and that's a snowboarder.
| | 00:20 | Let's take a look at our code.
| | 00:22 | Click on the first keyframe of the actions layer and open up
the Actions panel by pressing Option+F9 on the Mac and F9 on PC
| | 00:28 | We just have our new color transform created.
| | 00:32 | Let's go down a few lines. Now what we'll do is we'll
use an enterframe event to animate a color transform.
| | 00:39 | Type this.addEvent with a capital E, Listener with
a capital L, (Event with a capital E, .ENTER_FRAME
| | 00:58 | So ENTER in all caps, _ and then FRAME in all caps.
| | 01:01 | Type a comma then a space, then we'll
call animateColor with a capital C, );
| | 01:12 | Now let's write the animate color event handler.
| | 01:15 | Go down a few lines. Type function
animateColor with a capital C, (event:Event
| | 01:27 | with a capital E. It's receiving the enterframe event which is
| | 01:31 | the event type. Type a close parenthesis, :void.
| | 01:38 | Go to the next line, open curly brace, next line, close curly brace,
up arrow, Enter or Return to get in between the curly braces.
| | 01:47 | Now what we'll do is create initial color values for our color
transform object and modify them inside of the enter frame
| | 01:55 | event handler.
| | 01:57 | So after the end of line 1, after the semicolon, go
to the next line. Type color, capital T.redOffset
| | 02:07 | with a capital O, = -255;
| | 02:19 | Let's go inside of the event
handler animateColor on line 8,
| | 02:25 | and then type color, capital T.redOffset
with a capital O, ++;
| | 02:37 | This event handler will run along
with the framing of the movie.
| | 02:40 | The default frame rate is 12 frames per second the
| | 02:44 | so this code will run 12 times per second
| | 02:48 | What will happen is that red
offset value will increment by 1.
| | 02:54 | In other words it'll start at -255 as we set it on line 2.
| | 02:59 | This will run. It'll add one to
the current value of red offset.
| | 03:04 | So it'll be -254, -253, until it gets to +255.
| | 03:11 | Before we test the movie we need to apply
the color transform to some sort of object.
| | 03:16 | Let's apply it to the mountain first.
| | 03:18 | Let's go to the next line.
| | 03:20 | Type the mountain_mc.transform.colorTransform with a capital T,
| | 03:32 | = color and then a capital T, and then a ;
| | 03:39 | Press Cmd+Return or Ctrl+Enter to test the movie.
| | 03:43 | So watch the mountain.
| | 03:45 | The top of the mountain was white.
| | 03:47 | Taking away 255 for the red offset makes it a light blue color.
| | 03:51 | It's pretty hard to see this animation as it is,
so let's make it animate a little bit faster.
| | 03:57 | So you can see the mountain just turned
to white. Let's close this player window.
| | 04:01 | Change ++ to += 10; That's on line 8.
| | 04:08 | Now when we test the movie the color
change will be a little bit more obvious.
| | 04:12 | Press Cmd+Return or Ctrl+Enter
on your keyboard to test the movie.
| | 04:18 | And you can see the mountain change colors.
| | 04:24 | So there's a look at how to animate
a color transform. All you have to do is
| | 04:29 | do some sort of change
| | 04:31 | to an offset value, or some sort of change to the property of
the color transform object and animate that change. You can use
| | 04:38 | it using enter frame like we did in this movie,
| | 04:41 | Or you can animate the color change using
a timer like we did in a previous movie.
| | 04:46 | But there are the tools to animate a color change.
| | 04:50 |
| | Collapse this transcript |
| Using filters| 00:00 | In this movie we'll talk about how to create filters using code.
| | 00:03 | If you'd like to follow along we're in
Filters.fla in the chapter 10 folder.
| | 00:08 | It's important to address why you'd
want to create a filter with code.
| | 00:12 | Filters are intensive graphic elements that
take up a lot of space in your Flash files.
| | 00:20 | The more you can build them in dynamically the better. In other words,
| | 00:25 | if the user does not need to see a filter or if there
doesn't need to be a filter on something until a certain time,
| | 00:31 | then you can just do it with code and that way if they never
end up needing to see a filter, you don't have to take up
| | 00:36 | that file size.
| | 00:38 | That gives you a more effective
and more efficient Flash movie.
| | 00:42 | Reason number two.
| | 00:44 | Let's say I wanted to animate a
filter based on my mouse position
| | 00:48 | or if I made this snowboarder a
drag-and-drop object and I wanted
| | 00:53 | his shadow to change based on where I was dragging him.
| | 00:57 | You can animate a filter in design mode,
| | 01:00 | but you cannot animate dynamically in design mode or
based on where the boarder is or where your mouse is.
| | 01:07 | So you don't always need to create filters with code, but it's
good to know how to do because you can optimize your Flash movie.
| | 01:14 | I'm going to go to actions layer, the first keyframe and open
up the Actions panel by pressing Option+F9 or F9 on my keyboard.
| | 01:22 | To apply a filter is fairly simple.
| | 01:25 | The snowboarder on the Stage is called boarder_mc. So we'll type the name
boarder_mc.filters, equals open square bracket, closed bracket, semi-colon.
| | 01:45 | Move your cursor inside of the square brackets.
| | 01:48 | The filters property of a movie clip or other display objects,
or objects that you can see on the Stage, holds an array
| | 01:56 | of filters.
| | 01:57 | So you can apply multiple filters to the same object.
| | 02:00 | If you want to create your own custom filter and customize
all the properties, you can do that. And I'll show you how to
| | 02:07 | do that in the next movie. But for now let's
create some default filters and take a look at them.
| | 02:13 | Inside of the square brackets type new Drop
with a capital D, Shadow with a capital S
| | 02:23 | and Filter with a capital F, (), and you're done.
| | 02:31 | And that will create a new instance of the drop
shadow filter class with the default values.
| | 02:37 | Just like if you select your movie clip on the Stage and
apply a drop shadow in design mode. We'll get the same default
| | 02:42 | values here. Test the movie by pressing
Cmd+Return or Ctrl+Enter on your keyboard.
| | 02:49 | Notice the black area behind the snowboarder.
We've applied a drop shadow with code.
| | 02:56 | Let's apply a blur with code. Close this window.
| | 03:00 | In DropShadowFilter select DropShadow
then change that to Blur with capital B.
| | 03:09 | Test the movie by pressing
Cmd+Return or Ctrl+Enter on your keyboard.
| | 03:13 | And then we have a blurry snowboarder.
| | 03:17 | If I wanted to create a bevel filter I could change
BlurFilter to BevelFilter, GlowFilter, GradientGlowFilter.
| | 03:24 | All of it works the same.
| | 03:25 | In the next movie we'll take a look at modifying filter properties.
| | Collapse this transcript |
| Modifying filter properties| 00:00 | In this movie we'll take a look at modifying filter properties.
| | 00:03 | We're in Filter_Properties.fla in the chapter 10 folder.
| | 00:07 | On the Stage we have boarder and a mountain.
| | 00:10 | What we're going to do is have the
boarder cast a shadow on the mountain.
| | 00:15 | Let's go to the first keyframe of our actions layer and open
the Actions panel by pressing Option+F9 or just F9 on the PC.
| | 00:22 | And we'll type var boarderShadow with a capital S.
| | 00:28 | This will be the variable to hold the boarder's drop shadow.
| | 00:32 | Type a colon and then type DropShadow
with a capital D and a capital S,
| | 00:39 | and then Filter with a capital F.
| | 00:41 | Then type = new DropShadowFilter with the
same spelling and capitalization as before, ();
| | 00:55 | Let's go to the next line. Now we'll modify some
properties for our drop shadow. So type boarderShadow
| | 01:00 | capital S, dot. Then we get a list
of properties that we can select.
| | 01:06 | Let's first select color. Type space, equals, space.
| | 01:10 | This is again a hexadecimal value, so it must start with 0x,
| | 01:14 | and then six digits. For the digits, we'll type in 0B,
| | 01:20 | you don't have to type in a capital B like me, 77A9;
| | 01:28 | and this will give us a dark blue
color that I sampled from the mountain.
| | 01:33 | Let's go to the next line. Set the
boarderShadow with a capital S.blurX
| | 01:42 | capital X, space, equals, space. This
is the horizontal blur of the shadow.
| | 01:48 | Let's set the value to 10;
| | 01:52 | Go to the next line. Type boarderShadow
with a capital S, .blurY with a capital Y, = 10;
| | 02:07 | Modify a few more properties and then
we'll apply the shadow. Go to the next line.
| | 02:12 | Type boarderShadow with a capital S, .angle =
| | 02:21 | And angles in Flash work a little
bit differently than in school.
| | 02:25 | They go from -180 to +180. And we'll set the angle to 66;
| | 02:34 | Go to the next line
| | 02:35 | and for the last property we'll modify the distance
of the shadow so it will actually appear on the mountain.
| | 02:38 | So type boarderShadow with a capital S, .distance = 200;
| | 02:48 | Now all we have to do is apply the drop shadow filter
| | 02:52 | to our boarder. Let's go down a few lines.
| | 02:55 | Type boarder_mc.filters equals open
square bracket, closed bracket, semi-colon.
| | 03:04 | Put the cursor inside of the square brackets. Remember this is,
we're using square brackets because we're dealing with an
| | 03:10 | array here. Then type the boarderShadow
inside of the square brackets.
| | 03:15 | Make sure you give Shadow a capital S.
| | 03:19 | Test the movie by pressing Cmd+Return
or Ctrl+Enter on your keyboard.
| | 03:24 | And there we have the boarder casts a shadow on the mountain.
| | 03:28 | If by any chance you're not seeing the shadow,
| | 03:31 | it could be because the mountain
is in front of the snowboarder.
| | 03:35 | So if you close the window, close the Actions panel,
| | 03:39 | right or Control click the mountain,
find Arrange then select Send to Back.
| | 03:50 | Then test the movie by pressing Cmd+Return or
Ctrl+Enter and you should see the shadow on the mountain.
| | 03:57 | Just stretch out my Flash player window.
| | 04:00 | All the filter properties we just modified, I got in design mode,
| | 04:04 | then I wrote them down then we applied in here, so they're precise.
| | 04:08 | That is how to modify filter properties using code.
| | 04:12 |
| | Collapse this transcript |
| Animating filters| 00:00 | In this movie we'll talk about how to animate filters.
If you're following along I'm in Animating_Filters.fla
| | 00:07 | inside of the chapter 10 folder.
| | 00:09 | Again, we have a boarder and a mountain on the Stage.
| | 00:13 | Let's go to the first keyframe of the
actions layer and open up the Actions panel.
| | 00:18 | In this file, we already have a drop shadow set up for us,
| | 00:21 | we have the color properties set, the blur x and y set
to 0, the angle at 90 agrees and the distance at 100.
| | 00:29 | We have an event listener listening for enter frame
that we'll use to make our boarder animate.
| | 00:35 | The event handler is called moveShadow and it's
written right here below the add event listener line.
| | 00:41 | Move shadow moves the boarder up 5 pixels every
frame and to the right 5 pixels every frame.
| | 00:49 | Press Cmd+Return or Ctrl+Enter to test the movie.
| | 00:54 | Notice that we don't see a filter.
| | 00:57 | So let's apply the filter. Close out the movie.
| | 01:00 | After boarder_mc.x += 5; press Enter or
Return on your keyboard and then type
| | 01:07 | boarder_mc.filters = [boarderShadow with a capital S, ];
| | 01:22 | Test the movie by pressing Cmd+Return
or Ctrl+Enter on your keyboard.
| | 01:27 | And you can see that the shadow kind of
just goes along with him into the sky,
| | 01:31 | which doesn't look very realistic.
| | 01:33 | Close that window.
| | 01:35 | Click above the line of code we just wrote, so at and
of line 14 where we set the boarder_mc X property.
| | 01:42 | Press Enter or Return on your keyboard.
Now let's first modify the distance
| | 01:47 | property. So type boarderShadow
with a capital S, .distance += 5;
| | 02:03 | This number will keep the shadow
in the same place on the screen.
| | 02:06 | As the boarder's y property
| | 02:09 | decreases or as the boarder goes up 5 pixels every
frame, the shadow will go down 5 pixels every frame.
| | 02:17 | After the semicolon, let's go to the next line.
Type boarderShadow with a capital S,
| | 02:22 | .blurX ++;
| | 02:28 | This will cause the shadow to get more
blurry as the boarder gets higher.
| | 02:32 | Select this line of code, press Cmd or Ctrl+C to copy it.
| | 02:37 | Go to the next line. Paste the code using Cmd or Ctrl+V.
| | 02:41 | Change blurX to blurY, make sure the Y is capitalized.
| | 02:45 | We'll do the same thing to the blurY property.
| | 02:49 | Test the movie by pressing Cmd+Return or
Ctrl+Enter on your keyboard. Watch the shadow.
| | 02:54 | It stays on the mountain, and it gets
blurrier as the border goes up in the air.
| | 03:00 | Let's close this window,
| | 03:02 | and that how you can animate a filter using ActionScript, and
again you're not limited to using the enter frame event, you
| | 03:09 | can also use a timer.
| | 03:11 | All you need to do is create some event that happens
over and over again in a space of time and then modify
| | 03:19 | the values of properties of the filter.
| | 03:23 | And there's a look at how to use filters with ActionScript.
| | Collapse this transcript |
|
|
11. Working with MultimediaLoading external images and Flash movies| 00:00 | In this chapter we'll take a look at how
to load multimedia files into Flash.
| | 00:06 | We'll load in external images, swf files, sounds and video.
| | 00:12 | I'm in Loading_Images.fla that's inside of the 11-1
folder in the Chapter 11 folder of the Exercise Files.
| | 00:21 | In this fla file we have nothing
on the Stage and nothing in the Library.
| | 00:26 | Let's click on the first keyframe of our actions layer.
Open up the Actions panel by pressing Option+F9 on the Mac
| | 00:31 | F9 on the PC. First we'll create a
variable that will be a URL request.
| | 00:36 | That variable will hold the location of the filed
that we're going to load. So type var than a space,
| | 00:43 | imageRequest with a capital R, colon.
| | 00:48 | The datatype will be a URL request. URL is
all capitalized and Request has a capital R.
| | 00:55 | Type = new URLRequest just as you typed it earlier,
| | 01:03 | open parenthesis, and now we need to send in the string
| | 01:08 | which will give the location of the file we're going to load.
| | 01:10 | Type "snowboard.jpg");
| | 01:21 | The next step in loading an external file is to create
an image loader, something that will load our image.
| | 01:27 | Let's go to the next line and create a new variable.
| | 01:30 | We'll call this one imageLoader:
| | 01:33 | the datatype will be Loader with a capital L.
| | 01:39 | Type = new Loader with a capital L, ();
| | 01:46 | So we just created a new instance of the loader class.
| | 01:51 | The name of the instance is imageLoader.
| | 01:54 | Let's go to the next line. Then we'll have
our image loader load our URL request
| | 01:59 | Type imageLoader with a capital L, .load(
| | 02:05 | Then we just need to send in our URL request.
So type imageRequest with a capital R, );
| | 02:15 | Now the loader will load in our URL request,
which right now is snowboard.jpg.
| | 02:21 | We have one more step to be able to see snowboard.jpg.
| | 02:25 | We need to use addChild and put the image
loader on the Stage. After the semicolon
| | 02:31 | on the line where we called imageLoader.load, press
Enter or Return on your keyboard to go to the next line
| | 02:36 | and type addChild with a capital C,
(imageLoader with a capital L, );
| | 02:46 | Test the movie by pressing Cmd+Return
or Ctrl+Enter on your keyboard,
| | 02:52 | and there we have our loaded image. Close the window.
| | 02:58 | Now we'll load a few more files.
| | 03:00 | The image types we can load are jpg, png and gif.
| | 03:04 | In the same folder where snowboard.jpg is, we have
snowboard.gif and snowboard.png. Let's test those out.
| | 03:12 | Replace jpg with gif.
| | 03:15 | Test the movie by pressing Cmd+Return or Ctrl+Enter.
| | 03:19 | We get a snowboard. Close the window.
| | 03:21 | Replace gif with png. Test the movie
by pressing Cmd+Return or Ctrl+Enter.
| | 03:28 | There we have a png file loaded. Close that file.
| | 03:32 | You load a swf file in the same way.
| | 03:34 | Select snowboard.png and change it to movie.swf.
| | 03:43 | Test the movie by pressing Cmd+Return
or Ctrl+Enter on your keyboard.
| | 03:48 | And this loads a Flash movie.
| | 03:50 | So that is how to load external images and swf files.
| | 03:55 | In the next movie we'll communicate to a loaded swf file.
| | Collapse this transcript |
| Communicating to loaded movies| 00:01 | In this movie we'll take a look at how to modify
objects within a swf file that we load in.
| | 00:08 | I'm working in Communicating.fla and movie.fla and both of these
files are in the 11-2 folder inside of the Chapter 11 folder.
| | 00:18 | Let's look at our ActionScript in Communicating.fla.
So click on the first keyframe of the actions layer
| | 00:23 | and open up the Actions panel by pressing
Option+F9 on your keyboard or F9 on the PC.
| | 00:30 | In this code, we have all the code we wrote in the last movie
| | 00:34 | to load in an external swf file.
| | 00:36 | We created a URL request object. The URL is movie.swf.
| | 00:43 | We created a loader object. We
had the loader load the URL request
| | 00:50 | that we put our loaded content on the Stage.
| | 00:53 | Let's test the movie right now. So press Cmd+Return
or Ctrl+Enter on your keyboard to test movie.
| | 01:01 | What our objective is, is to communicate to this boarder
| | 01:05 | in the file that we're loading in and make him jump
| | 01:09 | or do anything. As long as we can communicate to the boarder,
| | 01:12 | we've broken that barrier. So let's close the window.
| | 01:17 | Go down a few lines. Now we'll create an event listener for when
| | 01:22 | the file is finished loading, the file being movie.swf.
| | 01:26 | So now type image.Loader with a capital L,
| | 01:32 | and now we're not going to type addEventListener. We're actually
going to add an event listener to something else. So type
| | 01:41 | .contentLoader with a capital L, then Info with a capital I.
| | 01:46 | The content loader info property of
loader class contains the information
| | 01:54 | about the content that is loaded into the loader.
| | 01:58 | We'll apply the event listener to the content loader info property.
| | 02:03 | Now type .addEvent with a capital E, Listener
with a capital L, (Event with a capital E,
| | 02:15 | .COMPLETE with a capital C.
| | 02:23 | This will execute when the content
is fully loaded and ready use.
| | 02:27 | Type a comma and then a space and then type onComplete
with a capital C, close parenthesis and a semicolon.
| | 02:35 | Let's go down a few lines and write the onComplete event handler.
| | 02:39 | Type function onComplete with a capital C, (event:Event):void
| | 02:54 | Go to the next line, open curly brace,
next line, close curly brace, up arrow, Enter.
| | 03:02 | Now there are a few steps that we
need to take in order to communicate
| | 03:07 | to the swf file that we're loading in.
| | 03:09 | Te first step is to go to the fla file
for that swf file and modify a few things.
| | 03:16 | Let's close the Actions panel here.
Go to movie.fla. In the Library,
| | 03:22 | we'll go to mcBoarder and right or Control-click
that symbol in the Library and then select Linkage.
| | 03:31 | If you want to communicate to any object using ActionScript
| | 03:35 | in the way that we're doing it here, uUsing an external
file in the same way that we created it when we made a class,
| | 03:41 | We need to select Export for ActionScript.
Check Export for ActionScript and then click OK.
| | 03:50 | Click OK again, save the file by going to File, Save.
| | 03:58 | Return to Communicating.fla. Click
on the first keyframe of the actions layer
| | 04:05 | and open up the Actions panel by
pressing Option+F9 on the Mac, F9 on the PC.
| | 04:11 | Now we're ready to communicate to the boarder.
| | 04:16 | The boarder's instance name is boarder_mc.
| | 04:20 | The communicate to the boarder I need to type event.target
| | 04:27 | which will give us the content loader info that contains
all the information about the file that's being loaded.
| | 04:34 | Then type .content. and then the boarder instance name.
| | 04:43 | So the content property is referring to the
content that's loaded into the loader object.
| | 04:49 | After the dot we'll type boarder_mc.y -= 100;
| | 05:05 | Let me go through this line again.
| | 05:07 | The event is event.complete, the target is the content
loader info, the content property of content loader info
| | 05:17 | is referring to movie.swf that we're loading in and
then we're communicating down the chain to boarder_mc.
| | 05:25 | We can communicate to that object because we've
exported it for ActionScript in the main fla file
| | 05:31 | or in the movie.fla file. The fla file that's
linked to this swf file that we're loading in.
| | 05:37 | We're modifying the y property by subtracting 100
which will make it look like the snowboarder's jumping
| | 05:43 | Press Cmd+Return or Ctrl+Enter to test the movie.
| | 05:47 | And we have the snowboarder in the air.
| | 05:50 | Let's close that window.
| | 05:52 | So if you want to communicate to loaded content,
| | 05:56 | make sure after you have your loader
| | 06:02 | load the URL request that has the
name of your file that you're loading in.
| | 06:07 | Type in the loader name.content loader info and
you add the event listener to content loader info
| | 06:13 | inside of the event to communicate to your
loaded content. Type event.target.content.
| | 06:21 | Anything you'd like to communicate to,
you need to export for ActionScript.
| | 06:26 | And there's a look at how to communicate to a loaded swf movie.
| | Collapse this transcript |
| Loading sound| 00:01 | Now we'll take a look at how to work with
sound. We'll start by simply loading a sound file.
| | 00:07 | If you're following along I'm in Sound.fla
in the Chapter 11 Exercise Files folder.
| | 00:13 | Let's go to the first keyframe of the actions layer and open
up the Actions panel by pressing Option+F9 or F9 on the PC.
| | 00:21 | We'll start out by first creating a URL request
| | 00:24 | that will hold the location of our sound file, or
the URL of our sound file. So type var soundReq
| | 00:33 | capital R for sound request, colon, capital U,
capital R, capital L, and then capital R for Request.
| | 00:43 | Then type = new URLRequest in the same way that you just typed it.
| | 00:53 | Then type (" and then the name of your sound file.
| | 00:59 | The name of our sound file is called free_fade.mp3
| | 01:06 | That's inside of the same folder
as our fla file. So let's type ");
| | 01:15 | The next step is to create our sound object.
Go to the next line. Create a new variable.
| | 01:20 | We'll call this variable sound. Then type a colon.
The datatype will be Sound with a capital S.
| | 01:29 | And this will hold our free_fade.mp3 file.
| | 01:33 | Type = new Sound with a capital S ();
| | 01:42 | We just created a new instance of the sound class called sound.
| | 01:49 | Let's go to the next line. Type sound.load(
| | 01:54 | then the name of our URL request
that has location of our sound file.
| | 02:01 | That would be sound, capital Req);
| | 02:09 | This will load the URL request into the sound object.
| | 02:13 | The next thing we want to do is play
the sound once the sound is fully loaded.
| | 02:19 | Let's go down two lines. Type sound.addEventListener
with a capital E and a capital L.
| | 02:26 | The type of event will be Event with a
capital E, .COMPLETE, all caps onComplete);
| | 02:38 | Now let's write the onComplete event handler.
| | 02:42 | Go down a few lines type function onComplete with
a capital C, (event:Event with a capital E,):void
| | 02:58 | Go to the next line, open curly brace, next line, close curly
brace, up arrow, Enter or Return to get between the curly braces.
| | 03:07 | Once the sound is fully loaded this event
handler will run then we'll have our sound play.
| | 03:13 | Simply type the sound.play();
| | 03:21 | Test the movie by pressing Cmd+Return
or Ctrl+Enter on your keyboard
| | 03:25 | And there's the sound. I'm going to
close this window real quick.
| | 03:32 | So we've successfully made a sound play.
| | 03:35 | Let's review the steps that we did
in this movie to make a sound load.
| | 03:39 | We created the URL request that holds the name
of the location of the file, it's a string.
| | 03:46 | Sound object. We have the sound object load the request.
| | 03:51 | We added an event listener to listen
for when the sound was done loading.
| | 03:57 | When the sound is done loading we played the sound.
| | 04:00 | Now that you know how to load the sound,
| | 04:01 | in the next movie we'll learn how to control the playback of a sound.
| | 04:06 |
| | Collapse this transcript |
| Starting and stopping sound| 00:00 | In this movie we'll look at how to
use buttons to play and stop sound.
| | 00:06 | If you're following along we're in
Starting_Stopping.fla in the 11-4 folder
| | 00:13 | inside of the Chapter 11 folder
along with the other Exercise Files.
| | 00:18 | On the Stage we have two buttons. A play
button with an instance name of play_btn,
| | 00:25 | and a stop button with an instance name of stop_btn.
| | 00:30 | Let's go to our Actions panel after clicking
on frame one of the actions layer and then pressing
| | 00:36 | Option+F9 or F9 on the PC to open it up.
| | 00:41 | Here we have the code that we wrote in the last movie.
| | 00:45 | We created a sound URL request that had
the location of our mp3 file and the name of it.
| | 00:53 | We created a new sound object. We had
our sound object load the URL request.
| | 00:59 | We added an event listener to listen
for when the sound was finished loading.
| | 01:06 | We had the sound play when it's finished loading,
| | 01:10 | Controlling the playback of sound is very,
very minimal just using the sound class.
| | 01:17 | The sound class pretty much just holds your sound file.
| | 01:20 | To control the playback of a sound, you need to
use another class called the sound channel class.
| | 01:28 | Let's click on line 2 after the semicolon,
press Enter or Return to go to the next line.
| | 01:34 | Type var soundControl with a capital C
:SoundChannel with a capital S, capital C for Channel
| | 01:47 | = new sound with a capital S, Channel with a capital C, ();
| | 01:57 | So we just created a new instance of the sound channel class,
| | 02:01 | and we named it soundControl. Okay.
| | 02:07 | Now, let's add a little bit of interactivity with some
buttons. So after the line 6 code of sound.addEventListener,
| | 02:14 | click after the semicolon, press Enter or
Return on your keyboard to go to the next line,
| | 02:21 | and then type play_btn.addEvent with a capital
E, Listener with a capital L, open parenthesis,
| | 02:29 | the type will be MouseEvent with a capital M and a capital E,
| | 02:35 | .CLICK all caps then a comma,
| | 02:41 | then we'll run the playSound function that's commented
out below. So type playSound with a capital S, );
| | 02:52 | Let's copy this line of code by selecting it,
pressing Cmd or Ctrl+C on your keyboard.
| | 02:58 | Go to the next line. Paste the code by
pressing Cmd or Ctrl+V on your keyboard.
| | 03:04 | Change play_btn to stop_btn and
change playSound to stopSound.
| | 03:13 | Now what we'll do is take the
comments away from our event handlers.
| | 03:17 | So select from line 23 to line 15, and
then click the remove comment button.
| | 03:27 | Now what we want to do is have the sound
play when you click the play button.
| | 03:39 | So let's cut sound.play by selecting it,
| | 03:43 | pressing Cmd+X or Ctrl+X in the
keyboard. Click inside of playSound,
| | 03:48 | press Cmd or Ctrl+V to paste the code.
| | 03:52 | Right before sound.play click,
put your cursor there and then type
| | 03:58 | soundControl with a capital C = sound.play.
| | 04:05 | Sound control is the name of our sound control
object that's an instance of the sound channel class.
| | 04:11 | This is what we'll use to control our sound.
| | 04:14 | When we set it equal to sound.play
on line 17, this will play our sound.
| | 04:21 | Another best practice is to put your add event
listeners inside of the onComplete event handler.
| | 04:29 | So let's cut these event listeners that we just
wrote, the play_btn, stop_btn on line 7 and 8.
| | 04:37 | Select them both, press Cmd or Ctrl+X on the keyboard to cut them,
| | 04:42 | find the onComplete event handler. Put your cursor between
the two curly braces. Paste the code by pressing Cmd or
| | 04:48 | Ctrl+V on your keyboard.
| | 04:51 | If you want to you can click on line 12 before stop_btn and
press Tab on your keyboard to line up the two lines of code.
| | 04:58 | Now the event listeners will be added
after the sound is finished loading.
| | 05:03 | So if by any chance the user clicked the play or stop button
before the sound finished loading, we wouldn't get any kind of error
| | 05:10 | or anything.
| | 05:11 | Now let's test the movie by pressing
Cmd+Return or Ctrl+Enter on your keyboard.
| | 05:15 | Click the play button.
| | 05:17 | Great.
| | 05:21 | Close the window
| | 05:23 | Now we'll add the control to make the sound
stop in the stop sound event handler.
| | 05:29 | Click between the two curly braces,
and now type soundControl.stop();
| | 05:45 | That will stop our sound from play
| | 05:48 | Test the movie by pressing Cmd+Return
or Ctrl+Enter on your keyboard.
| | 05:52 | Play the sound with the play button.
Stop the sound with the stop button.
| | 06:00 | What if we click the play button twice?
| | 06:03 | Click the play button once, click it again.
| | 06:11 | It starts playing over itself. So now that we know how to start and stop
sound, in the next movie we'll look at how to pause and resume sound.
| | Collapse this transcript |
| Pausing and resuming sound| 00:01 | In this movie we'll take a look at how to
pause and resume the playback of a sound.
| | 00:05 | If you're following along I'm in
Pause_Resume.fla inside of the 11-5 folder
| | 00:12 | in the Chapter 11 folder along with the other working files
| | 00:16 | On the Stage I have three buttons, a play
button, a pause button and a stop button.
| | 00:21 | The pause button is actually on top of the play
button if I click and drag the pause button
| | 00:26 | you can see that the play button is right underneath it.
| | 00:30 | Now I'm going to press Cmd or Ctrl+Z on my
keyboard, and put the pause button back on top.
| | 00:35 | What we'll do is when we start the movie
we'll make the pause button invisible.
| | 00:43 | Then when the user clicks the play button, they'll see the
pause button, because we'll make the play button invisible.
| | 00:49 | Let's go to the code and start that up.
| | 00:51 | Click on the first keyframe of the actions layer and open
up the Actions panel and pressing Option+F9 or F9 on the PC.
| | 00:59 | Go all the way down to line 23.
| | 01:02 | Press Enter or Return a few times to go down a few more lines,
| | 01:05 | and then type pause_btn.visible = false;
| | 01:15 | Now let's just test the movie to verify
that we cannot see that pause button.
| | 01:19 | Press Cmd+Return or Ctrl+Enter to test the movie.
| | 01:22 | And we just have the play button. Let's close that window.
| | 01:26 | Now let's write an event handler for pausing the sound.
| | 01:31 | The first thing we need to is capture where
the sound is when the user presses pause.
| | 01:40 | We'll hold that in a variable called resume time.
| | 01:45 | After the end of line 3 where you
create the new variable called sound channel,
| | 01:49 | let's press Enter or Return a few times
to down a few lines in then up one
| | 01:53 | Type var resumeTime with a capital T,
:Number with a capital N, = 0;
| | 02:08 | We'll use the resume time number to
determine how long the movie has been playing.
| | 02:13 | We'll capture it when the movie stops, so when
they press the pause button, and then we'll send it
| | 02:19 | when we play the movie again by pressing the play button.
| | 02:22 | Let me show you how that works. Find line 19
| | 02:26 | or close to it, where we have soundControl = sound.play.
| | 02:30 | Click inside of the parentheses of sound.play.
| | 02:33 | Inside of sound.play you can specify a start time of the sound
| | 02:42 | and that would be in milliseconds.
| | 02:46 | So if we type in here resume and then time with a capital T,
| | 02:53 | it will start off at 0. And now if we just
make a pause button, we can track or we can capture
| | 03:01 | the current position when we pause the movie,
| | 03:03 | then when we click the play button again,
it will start at that resume time.
| | 03:07 | To write the pause button event handler
let's copy from line 20 to line 17.
| | 03:13 | So make sure you get function and the
close curly brace of the function pay.sound.
| | 03:17 | Select it all, press Cmd or Ctrl+C on your keyboard to copy it.
| | 03:20 | Go down a few lines, press Cmd or Ctrl+V to paste it.
| | 03:25 | Change play.sound to pause.sound.
| | 03:30 | Then we'll erase the line of code
that says soundControl = sound.play.
| | 03:35 | And then we'll type resumeTime with
a capital T, = soundControl.position;
| | 03:52 | The position property of the sound control object gives
us information about how long the song has been playing.
| | 03:59 | We'll caption that information in the resume time
variable then when we click the play button again
| | 04:04 | the sound will play at the resume time.
| | 04:08 | Click on line 24 after we set the resumeTime
= soundControl.position and go to the next line.
| | 04:16 | Now we'll have to make the sound stop. Type
soundControl with a capital C, .stop();
| | 04:26 | Now we'll have to do a few more things. We kind
of wrote this pause sound a little bit backwards.
| | 04:31 | So let's add the event handler for the click on the pause button
| | 04:36 | inside the play.sound event handler. So click on
line 19 after soundControl = sound.play(resumeTime).
| | 04:42 | Press Enter or Return on your keyboard.
| | 04:44 | Now type pause_btn.visible = true;
| | 04:56 | We'll first make it visible. Then we'll add the event listener.
| | 05:01 | Go to the next line, type pause_btn.addEvent
eith a capital E, Listener with a capital L,
| | 05:13 | (Mouse with a capital M, Event with
a capital E, .CLICK all caps.
| | 05:21 | Comma. Then we'll run the pauseSound
event handler. Type ) and a;
| | 05:30 | Now we want to do two more things. We want to turn off the
visibility and turn off the interactivity of the play button.
| | 05:39 | So go to the next line. Type play_btn.visible = false;
| | 05:50 | That will make it not visible anymore. Go to
the next line I'm going to type play_btn.remove
| | 05:58 | Event with a capital E, Listener with a capital L. And Mouse
with a capital M, Event with a capital E, .CLICK all caps, comma,
| | 06:11 | and then playSound. So type play and
then Sound with a capital S, );
| | 06:22 | That will remove the visibility of the
play button and take away the interactivity.
| | 06:27 | So we need to add that back when we click the pause button.
| | 06:31 | Scroll down. Copy those four lines of code that we just wrote.
| | 06:37 | Select them all. Press Cmd or Ctrl+C
on your keyboard to copy them.
| | 06:42 | Click inside of the pauseSound event
handler after soundControl.stop,
| | 06:46 | press Enter or Return on your keyboard to go to the
next line. Press Cmd or Ctrl+V to paste the code.
| | 06:52 | Now all we need to do is swap out pause and play.
| | 06:58 | So when you click on the pause button
the pause button is no longer visible
| | 07:03 | and the play button becomes visible again.
| | 07:05 | So we deactivate the pause button, reactivate the play button.
| | 07:10 | So on lines 30 and 31 replace the word pause with play.
| | 07:15 | Play_btn.visible = true;
play_btn.addEventListener(MouseEvent.CLICK, playSound);
| | 07:24 | Then change the plays to pause on lines 32 and 33.
| | 07:28 | Pause_btn.visible = false;
pause_btn.removeEventListener.pauseSound
| | 07:39 | Now what this will do is when we click the play button,
| | 07:43 | the sound will play at the resume time
and the default value is 0, we set it in line 4.
| | 07:50 | The pause button will become
visible and listen for the click.
| | 07:55 | the play button will become
invisible and stop listening for clicks.
| | 07:59 | Then when we click the pause button we'll
capture the resume time, then stop the sound,
| | 08:05 | turn on the visibility and interactivity of the play button,
| | 08:09 | and then disable the pause button.
| | 08:11 | Test the movie by pressing
Cmd+Return or Ctrl+Enter on your keyboard.
| | 08:18 | Now we'll click the play button to let
the sound play and then pause it in the middle.
| | 08:23 | And then click the play button again to
verify that it plays from the pause position.
| | 08:37 | If you click stop the pause button is still
up if it happened to be on pause already.
| | 08:43 | So what we can do is when we click the stop button,
we can make the pause button go back to the play button.
| | 08:49 | So let's close that out. Copy the code inside of pauseSound.
| | 08:54 | play_btn.visible = true all the way down to line 33
where you remove event listener for the pause button.
| | 09:01 | Copy all that code by pressing Cmd or Ctrl+C on your keyboard.
| | 09:04 | Go into the stop sound event handler. Click
after soundControl.stop. Go to the next line.
| | 09:10 | Paste the code using Cmd or Ctrl+V. Now test the movie.
| | 09:16 | We'll play the sound and then stop the sound and
watch the pause button go back to the play button.
| | 09:25 | And now we have the control
| | 09:29 | to press the stop button and go all the way back
to the beginning or to press the pause button
| | 09:34 | and pause it right where it is and then we can resume it again.
| | 09:38 | And that's a look at how to manage the playback of your sound
| | 09:41 | In the next movie we'll learn how
to control the volume of our sound.
| | 09:45 |
| | Collapse this transcript |
| Managing the volume of sound| 00:01 | In this movie we'll learn how to control the volume of our sound.
| | 00:05 | If you're following along I'm in Volume_Control.fla
inside of the 11-6 folder along with the Chapter 11 files.
| | 00:14 | On the Stage we have the playback controls
that we created in the last movie
| | 00:19 | and then we have some new volume controls.
| | 00:22 | One button called up_btn and then a down button called down_btn.
| | 00:29 |
Let's take a look at our code.
| | 00:31 | Click the first keyframe of the actions layer and open up the
Actions panel by pressing Option+F9 on the Mac, F9 on the PC.
| | 00:39 | This is the code that we did in the
last movie, except I added a few things.
| | 00:44 | On line 9 and 10 you'll find the up and down
buttons have event listeners already added,
| | 00:50 | and they're listening for event handlers
called increaseVolume and decreaseVolume.
| | 00:55 | Scroll down to the bottom of your code
we'll find increaseVolume and decreaseVolume.
| | 01:01 | Now you might have already noticed
that we have a lot of code here.
| | 01:05 | Flash is a great tool for collapsing
code that we don't want to look at.
| | 01:09 | So click a right after the close curly brace on line 45
| | 01:14 | and drag your mouse all the way up to line 13,
| | 01:18 | so we get all the other event handlers
that we don't need to look at for this movie,
| | 01:23 | then will collapse the code by clicking on the
triangle to the left of where we stopped our selection
| | 01:31 | and we'll have that wrapped in one nice block.
| | 01:34 | That makes the code a lot easier to look at.
| | 01:37 | When you're dealing with the playback of
a sound you need to use a sound channel class.
| | 01:41 | When you're dealing with the volume of a sound you need
to use yet another class called the sound transform class.
| | 01:48 | Let's go to line 3. Click at the end of the line after
the semicolon. Press Enter or Return your keyboard,
| | 01:55 | create a new variable volumeControl
with a capital C, then a colon.
| | 02:02 | The datatype will be a sound
transform, so type capital S for Sound,
| | 02:06 | capital T for Transform, new SoundTransform with a capital T, ();
| | 02:20 | Now all we need to do is go down to
our increaseVolume event handler.
| | 02:25 | Click in between curly braces and type volumeControl
with a capital C, .volume, and then a space.
| | 02:37 | Now, we click, the increase volume button or the up
button, we want to increase the volume just a little bit.
| | 02:45 | Volume has a value of 0 to 1.
| | 02:49 | So when we increase the volume, let's just increase it by .1.
| | 02:54 | So type += .1;
| | 03:01 | Now we need to do one more thing. So go to the next line
| | 03:06 | and then type the sound channel name, which is
soundControl, make sure Control has a capital C,
| | 03:14 | .soundTransform with a capital T, space, equals, space.
| | 03:20 | Now this property holds a sound transform that we can use to transform
our sound. In this case we're just going to control the volume.
| | 03:27 | So if I type volumeControl with a capital C, and a semicolon,
| | 03:35 | that will successfully add to the volume of our sound.
| | 03:40 | So we set the volume control here, and we
associate it with our sound in the next line.
| | 03:46 | Let's copy these two lines of code by selecting them
and then pressing Cmd or Ctrl+C on your keyboard.
| | 03:52 | Click inside of the decrease volume event handler.
| | 03:56 | Paste the code by pressing Cmd or Ctrl+V on your keyboard.
| | 04:00 | I'm going to click right before volumeControl and press
Delete or Backspace on my keyboard to make sure that the two
| | 04:05 | lines of code are lined up.
| | 04:07 | Now I'll simply change the plus
in volumeControl.volume line, to minus.
| | 04:14 | Click the up button. The sound goes up a little bit.
| | 04:16 | Click the down button and the sound goes down a little bit.
| | 04:19 | Test the movie by pressing Cmd+Return
or Ctrl+Enter on your keyboard.
| | 04:23 | We'll play the sound, and then check the volume controls.
| | 04:35 |
Let's try that again. It's a pretty short
sound so I'm going to stop and then play again.
| | 04:50 | Let's make a little bit more of an obvious difference.
| | 04:52 | I'm going to change the .1 to a .5 when
we increase and decrease the volume.
| | 04:59 | Now let's test the movie. Play the sound
and click the volume control buttons.
| | 05:09 | Now it works a little bit better.
| | 05:11 | So just to recap, we control the volume
of the sound using a sound transform object.
| | 05:17 | If we want to increase the volume, we just
add to the sound transform object's volume property.
| | 05:24 | If we want to decrease the volume we subtract from that property.
| | 05:28 | Then we set the sound transform property of our sound
control object equal to the sound transform that we created.
| | 05:37 | And that's how to control the volume of sound.
| | 05:40 |
| | Collapse this transcript |
| Understanding Flash video connections| 00:01 | In this movie we'll talk about how to connect to Flash video.
| | 00:05 | If you'd like to follow along we're in Understanding_Video.swf
| | 00:09 | inside of the 11-7 folder in the
Chapter 11 folder of the exercise files.
| | 00:15 | At the top of this image we have FLV file.
| | 00:19 | That's our Flash video file.
| | 00:21 | The first step in order to view that file in the Flash player
| | 00:25 | is to use something called a Net connection.
| | 00:28 | The net connection connects to the FLV file.
| | 00:31 | The next step is to stream that connection.
| | 00:34 | That's what the net stream is for.
| | 00:36 | It streams a connection to an FLV file.
| | 00:39 | Once we have a stream and a connection,
then we can use the video class
| | 00:44 | to display the content.
| | 00:46 | So again we start with the FLV,
| | 00:48 | we make a connection,
| | 00:49 | we stream the connection,
| | 00:51 | connect that to a video, object
| | 00:54 | and then we can look at the video.
| | 00:56 | In the next movie we'll learn how to load video.
| | Collapse this transcript |
| Loading video| 00:01 | In this movie we'll load Flash video into our swf
file by using the steps outlined in the last movie.
| | 00:08 | If you'd like to follow along we're in
Loading_Video.fla inside of the 11-8 folder,
| | 00:15 | which is inside of the Chapter 11 folder
along with the other Exercise Files.
| | 00:20 | Click on the first keyframe of the actions layer and open
up the Actions panel are pressing Option+F9 on the Mac or
| | 00:26 | F9 on the PC.
| | 00:27 | Let's create a new video that will
represent our net connection. So type
| | 00:31 | var videoConnection with a capital C,
:NetConnection with a capital N and a capital C,
| | 00:44 | = new Net with a capital N, Connection with a capital C, ();
| | 00:54 | On the next line, type videoConnection with a capital C,
| | 00:59 | .connect( and here we pass in the connection name.
| | 01:06 | Flash is looking for a string. Type
in null and then a close parenthesis.
| | 01:13 | The reason why we're typing in null is
because we're not going to connect to a server,
| | 01:17 | we're going to run the video straight out of this folder.
| | 01:22 | If you'd like to learn more about how to connect to server
| | 01:26 | select NetConnection, then press F1 to keyboard
and then read about the connect method of that class.
| | 01:33 | After the close parenthesis, type a semicolon. Go to the next line.
| | 01:37 | Now we need to create a net string
object that will stream our connection.
| | 01:43 | So type var videoStream with a capital S,
:Net with a capital N, Stream with a capital S,
| | 01:56 | = new Net with a capital N, Stream with a capital S, (
| | 02:07 | When we create an instance of that stream
class we need to pass in a net connection.
| | 02:14 | So type videoConnection with a capital C, );
| | 02:23 | So now in this line of code, we create a
new instance of the net stream class called video stream.
| | 02:31 | We've connected it to our net connection, which is
called video connection. Let's go to the next line.
| | 02:36 | Type videoStream with a capital S, .play("
| | 02:44 | and the name of the Flash video file. So type short_jump.flv");
| | 02:58 | The net stream object connects using the
connection and then we play the video here.
| | 03:05 | However we cannot see the video yet, because we have one
more step and that is to connect the stream to a video object.
| | 03:13 | After the semicolon, go to the next line.
Type var video:Video with a capital V
| | 03:23 | = new Video with a capital V, ();
| | 03:33 | We've created a new variable on this line called video, it's
a video datatype equal to a new instance of the video class.
| | 03:40 | Let's go to the next line. Now we need
to attach the net stream to the video.
| | 03:45 | Type video.attachNetStream, Net has a
capital N and Stream has a capital S.
| | 03:54 | And then we need to pass in the net stream object.
| | 03:57 | Our net stream is called video stream.
| | 04:00 | Type (videoStream with a capital S);
| | 04:09 | The final part of our third step is to go to the next line
| | 04:12 | and put the video on the Stage using addChild.
So type addChild with a capital C, (video);
| | 04:24 | Press Cmd+Return or Ctrl+Enter to test
the movie and watch the video play.
| | 04:30 | It looks like the videos playing okay, but we're getting an error.
| | 04:33 | The error says unhandled async error event. What this means is
some event's happening but we're not doing anything to handle it.
| | 04:42 | That's not stopping the video from playing but we still
need to handle the event so we don't get an error message.
| | 04:49 | Close out these windows. We'll fix that error in the next movie.
| | 04:53 | For right now, this is how you load video.
| | 04:56 | Create the net connection. Set the net connection's connect
property to null unless you're connecting to a server.
| | 05:04 | Create the net stream. Pass in
the connection to the net stream.
| | 05:10 | Have the net stream play the Flash
video. Create a new video object.
| | 05:16 | Attach the net stream to the video.
And then put the video on the Stage.
| | 05:22 | And that's how to load video. And now that
you know how to load video, in the next movie
| | 05:27 | we'll learn how to control the playback of video and
how to handle the event that was giving us an error.
| | 05:32 |
| | Collapse this transcript |
| Controlling video playback| 00:01 | In this movie we'll take a look at controlling video playback.
| | 00:04 | If you're following along, I'm in Video_Playback.fla
in the 11--9 folder inside the Chapter 11 folder.
| | 00:12 |
Let's take a look at this fla file. On the Stage, we
have a play button with an instance name play_btn,
| | 00:20 | a stop button with an instance name of stop_btn, and we
have the ActionScript that we wrote in the last movie.
| | 00:27 | Click on the first keyframe of the actions layer and open
up the Actions panel by pressing Option+F9 on your keyboard
| | 00:33 | if you're on a Ma,c F9 if you're on a PC.
| | 00:36 | In the last movie we created a net
connection, attached it to a net stream,
| | 00:42 | attached the stream to a video and put the video on the Stage.
| | 00:46 | If you test the movie you'll see what the code does. Press
Cmd+Return or Ctrl+Enter on your keyboard to test the movie.
| | 00:53 | The video plays, but we get an error.
The error says unhandled event.
| | 01:01 | If you look down you'll find Property
onMetadata not found on flash.net.NetStream.
| | 01:10 | This is the key to this problem.
| | 01:13 | We need to set up this onMetadata property. Close the window.
| | 01:18 | Close the Flash player window. Now let's figure out
how to do this. The problem is with onMetadata.
| | 01:24 | Let's look up onMetadata. What
I'm going to do, at the bottom my code,
| | 01:30 | I'm going to go down one line then I'm going to
type onMetadata just as I saw it written earlier.
| | 01:38 | Let's select the text, press F1 on our keyboard,
and read what we see in the Help menu.
| | 01:48 | At the top it says Dispatched when the Flash Player receives
descriptive information embedded in the FLV file being played.
| | 01:54 | And if you scroll down you'll see you cannot use the
addEventListener method or any other event dispatcher methods
| | 02:02 | to listen for or process this event. You have two
things to apply it to. We'll use the first technique.
| | 02:10 | To apply it to the object that the client
property of a NetStream instance references.
| | 02:14 | That might not make a lot of sense but it'll be easier to
demonstrate than to explain, so let's just close this window,
| | 02:21 | and I'll show you how to do it
and I'll explain along the way.
| | 02:23 | What we're going to do is create something called the generic
object that's going to hold the onMetadata information.
| | 02:31 | And then we're going to associate that generic object
with all of its onMetadata, with our NetStream.
| | 02:39 | After line 4, videoStream.play, let's go to the next line.
| | 02:44 | Type var metaListener with a capital L.
| | 02:54 | Now we don't have to call this metaListener. I'm using this
name to make it obvious what this object will be doing.
| | 03:01 | Type :Object with a capital O. Any instance of
the object class or an object of the object class,
| | 03:09 | we can add properties and methods to whenever
we want. Other classes like the movie clip class
| | 03:17 | are locked or they're called static classes. We cannot make
up new properties for the movie clip unless we create a
| | 03:23 | new class. The object class is called a
dynamic class because we can make up properties
| | 03:29 | and add them on to our generic objects.
We'll need that to add the onMetadata here.
| | 03:34 | So type = new Object with a capital O, ();
| | 03:44 | Go to the next line. On this line
we'll associate our meta listener
| | 03:47 | with the onMetadata event. So type metaListener with a capital L,
| | 03:54 | .onMeta with a capital M, Data with a capital D, = onMetaData,
with a capital M and a capital D, just like we typed it earlier,
| | 04:12 | then a semicolon. Now we'll associate
our listener with our NetStream.
| | 04:17 | Go to the next line. Type videoStream with a capital S, .client,
| | 04:26 | and this will be the object that will listen for the
onMetaData event. So type = metaListener with a capital L,
| | 04:38 | and a semicolon. So we've created
a generic object called metaListener,
| | 04:43 | we've associated it with onMetadata, and now we're
associating that listener with our NetStream object.
| | 04:50 | Only step left to do is write the onMetadata event.
| | 04:56 | After line 10 the last line of our code,
press Enter a few times to go down a few lines.
| | 05:02 | Type function onMetaData with a capital M and D, (
| | 05:12 | Now this event is going to receive data,
so type data, all lowercase and a colon.
| | 05:20 | And then Object with a capital O, ):void
| | 05:27 | The datatype of the data received by the onMetadata event is object.
| | 05:32 | Let's go to the next line, open curly brace, next line, close
curly brace, up arrow, Enter or Return to go to the next line.
| | 05:41 | Now if we test the movie by pressing Cmd+Return or
Ctrl+Enter, we won't get the error that we got before.
| | 05:48 | Let's close that movie, close the Flash player window,
| | 05:55 | and now what we'll do is we'll add the event listeners
| | 05:58 | to our buttons on the Stage and then
we'll have them control the playback.
| | 06:02 | Type play_btn.addEvent with a capital E, Listener with a capital L.
| | 06:10 | This will listen for a MouseEvent with a capital M and E.
| | 06:14 | .CLICK all caps, playMovie, capital M, );
| | 06:23 | This button will play the movie. Select that line of code,
| | 06:29 | press Cmd or Ctrl+C to copy it. Go to
the next line. Paste it using Cmd or Ctrl+V.
| | 06:34 | Change play_btn to stop_btn. Change play movie to stop movie.
| | 06:44 | After that event let's go down a few lines.
| | 06:48 | The reason why we're putting these inside of the onMetadata is because
we'll have the buttons play when the information is ready to use
| | 06:55 | so we can access the data using buttons
if we ever want to do that later on.
| | 07:00 |
I'm going back to line 18. Type function playMovie with a capital
M (event:MouseEvent with a capital M and a capital E, ):void
| | 07:17 | Go to the next line, open curly brace, next line, close curly brace,
up arrow, Enter or Return to get in between the curly braces.
| | 07:25 | Now we make our movie play and pause by speaking to the
NetStream object. So not directly to the video object.
| | 07:32 | Now type videoStream with a capital S,
.play and then, just like we did above
| | 07:39 | we need to send in the name of our flv file.
So let's just select the name of the flv file.
| | 07:44 | Press Cmd+C or Ctrl+C on your
keyboard to copy it. Scroll down.
| | 07:50 | Click after videoStream.play.
Press Cmd or Ctrl+V to paste the code.
| | 07:55 | Now let's select this whole block of code
that we wrote, the whole function play movie
| | 08:00 | Press Cmd or Ctrl+C on your keyboard to copy it
| | 08:03 | Go down a few lines. Paste the code using Cmd or Ctrl+V.
| | 08:07 | Change playMovie to stopMovie. Change
videoStream.play to videoStream.pause. ();
| | 08:21 | Test the movie by pressing Cmd+Return
or Ctrl+Enter on your keyboard.
| | 08:26 | Press the stop button to stop.
| | 08:30 | Press the play button to play from the beginning.
| | 08:34 | And that's a look at how to control video playback.
| | 08:38 | If you'd like to learn more about controlling video playback,
| | 08:43 | select NetStream with a capital N,
capital S, press F1 on your keyboard,
| | 08:47 | and look up the properties and methods of the NetStream class.
| | 08:51 |
| | Collapse this transcript |
|
|
12. Adding Advanced InteractivityOverview of creating a drag-and-drop game| 00:00 | In this chapter we'll take everything
we've learned through this whole title
| | 00:04 | and apply it to build a drag and drop puzzle game.
| | 00:08 | If you'd like to follow along for this movie I'm in Drag_Class.swf
| | 00:13 | in the 12--1 folder inside of the chapter 12 folder.
| | 00:17 | Let's take a look at our finished application.
| | 00:19 | On the left side of the screen
we have drag-and-drop puzzle pieces.
| | 00:23 | On the right side of the screen we have
an area where we can place those puzzle pieces.
| | 00:26 | The puzzle pieces are placed
randomly every time you run the game.
| | 00:30 | If you click on a puzzle piece,
| | 00:32 | The puzzle piece comes to the front,
| | 00:34 | has a drop shadow.
| | 00:36 | If you release the puzzle piece in the right spot,
| | 00:39 | it snaps into place and then becomes disabled.
| | 00:44 | If you drag the puzzle piece over to the wrong spot,
| | 00:49 | the piece snaps to its original position.
| | 00:52 | Now let's make the game.
| | 00:54 | We'll start by adding the drag-and-drop interactivity.
| | Collapse this transcript |
| Creating drag-and-drop class| 00:00 | In this movie we'll create a drag and drop class and add the
drag-and-drop interactivity to the objects in that class.
| | 00:06 | If you're following along, we'll be in Drag_Class.fla,
| | 00:10 | DragGame.as, and DragDrop.as. All these files are in the 12-2
folder inside the chapter 12 folder of the Exercise Files.
| | 00:20 | First let's take an overview of how this is file setup already.
| | 00:24 | Each puzzle piece has a target. If you look on the right
side of the screen, there's a stroke or a rectangle.
| | 00:35 | If you take a look at our layers,
the very bottom layer is called stroke.
| | 00:38 | That's the rectangular shape. Above
that layer is the guide layer called original.
| | 00:43 | If I show visibility on that layer
you can see that mountain picture.
| | 00:47 | That's what the end puzzle will look like once we put it together.
| | 00:50 | I'm going to close the visibility.
| | 00:52 | The other layers, if I unlock them all, are identical
to the puzzle pieces that we'll be dropping.
| | 01:00 | Except for the alpha is set to zero.
Put the alpha up a little bit, you
| | 01:04 | can see that we have a puzzle piece there.
| | 01:06 | These are pieces of the puzzle that are copied, so they
are exactly the same in shape and size and placement
| | 01:14 | of where the puzzle pieces need to go. These will
represent our target areas or target pieces.
| | 01:20 | So that's how this fla file is set up. I'm going to
put the alpha back to 0 and lock all of those layers.
| | 01:26 | In my Library I named all my symbols according to their positions.
| | 01:32 | Look in the Library under Puzzle Pieces.
| | 01:34 | To expand the Puzzle Pieces folder
double-click the folder icon in the Library.
| | 01:39 | There are six movie clips inside of
this folder: BL, BM, BR, TL, TM and TR.
| | 01:46 | BL stands for bottom left, bottom middle for BM.
| | 01:51 | BR stands for bottom right, top left, top middle, top right.
| | 01:56 | So close that folder and look in the Target
Pieces folder by double-clicking the folder icon
| | 02:01 | to see the target movie clip names
that are the same as the puzzle pieces
| | 02:06 | except they have a T on the end
to specify that they aren't targets.
| | 02:10 | I'll close that folder. Now let's go
to DragGame.as and take a look at it.
| | 02:15 | This will be our document class. I've already set up
the skeleton for this class so we can just add the code in.
| | 02:22 | Before going to DragDrop.as, let's return to
Drag_Class.fla and set DragGame as its document class.
| | 02:32 | Click on the gray area off the Stage.
| | 02:34 | Go to the Document class text area in the Properties Inspector
and then type Drag with a capital D, Game with a capital G.
| | 02:42 | Click back into the gray area off the Stage.
| | 02:45 | Now let's go to DragDrop.as. This file is also
a skeleton of a class file, just like DragGame.as.
| | 02:53 | That will made it easier and faster for
us write the code that we need to write.
| | 02:57 | In this file we'll hold the drag and
drop information of our puzzle pieces.
| | 03:01 | So let's start writing then. At the end of
line 3, after movie clip and the semicolon,
| | 03:06 | press Enter or Return to go to the next line,
and then type import flash.events.MouseEvent
| | 03:15 | with a capital M and a capital E. We're going to need to use
mouse events to detect whether the mouse is down or up so we
| | 03:22 | can drag and drop our pieces. Let's go inside
of the constructor function on line 10 and type
| | 03:28 | this, that will refer to every
instance of the drag drop class
| | 03:32 | .addEvent with a capital E,
Listener with a capital L, (Mouse
| | 03:38 | with a capital M, Event with a capital E, .MOUSE_DOWN all caps.
| | 03:47 | Type a comma and then a space and
then type dragMovie with a capital M.
| | 03:53 | Type a close parenthesis and a semicolon.
| | 03:57 | Let's copy this line of code and add
an event listener for the mouse up.
| | 04:02 | Once it's selected, press Cmd or Ctrl+C on your keyboard.
| | 04:06 | Go to the next line. Press Cmd or Ctrl+V to paste the code.
| | 04:10 | This time we'll change MOUSE_DOWN to MOUSE_UP.
| | 04:14 | Make sure both U and P of up are
capitalized and dragMovie to dropMovie.
| | 04:22 | After the constructor function, click after the close curly
brace on line 12. Press Enter or Return twice to go down two lines.
| | 04:31 | Now we'll create dragMovie and dropMovie.
| | 04:34 | Type private function dragMovie with a
capital M, (event:MouseEvent with a capital E, ):void
| | 04:50 | Next line, open curly brace, next line, close curly brace,
up arrow, Enter or Return to get within curly braces.
| | 04:57 | Now type this.startDrag with a capital D, ();
| | 05:06 | When the mouse is down, we'll start dragging
this movie clip or this puzzle piece.
| | 05:13 | Let's copy this block of code we just wrote,
| | 05:15 | the dragMovie event handler, by selecting it
and pressing Cmd+C on your keyboard or Ctrl+C on the PC.
| | 05:22 | Go on down a few lines and paste the code
by pressing Cmd or Ctrl+V on your keyboard.
| | 05:28 | Change the event handler name to dropMovie
instead of dragMovie and on line 21
| | 05:33 | Change this.startDrag to this.stopDrag.
| | 05:37 | Go to File, Save to save this file
and then let's return to Drag_Class.fla.
| | 05:45 | Now in this file we need to associate our
puzzle pieces with the class file we just created.
| | 05:51 | To do this go into your Library, find the Puzzle
Pieces folder and double-click the folder icon.
| | 05:59 | Then you need to right or Control-click each movie clip symbol
| | 06:04 | in the Puzzle Pieces folder. Start with BL, select Linkage,
| | 06:10 | select Export for ActionScript, leave the
Class Name the same. We'll change the Base class
| | 06:16 | to Drag with a capital D, Drop with a capital D.
| | 06:19 | This will make this object a drag-and-drop object
but it will still have its unique class of BL.
| | 06:25 | Click OK, click OK again. Now I'll repeat
the step for the other five puzzle pieces.
| | 06:34 | And now you should have gone through each of those movie
clips and selected Linkage and Export for ActionScript and
| | 06:40 | associated each one of those movie close with the DragDrop.as file.
| | 06:44 | The next step is to drop those instances on
the Stage in DragGame.as. Let's go to DragGame.as.
| | 06:51 | After import flash.display.MovieClip, go to the next line.
Type import Drag with a capital D, and then Drop
| | 06:59 | with a capital D, and then a semicolon.
| | 07:02 | We need to import the drag-and-drop class
in order to use any of these puzzle pieces.
| | 07:08 | So go to the next line and type import, and then
we'll need to import each one of our puzzle pieces.
| | 07:14 | So type BL first and then a semicolon.
| | 07:18 | The next step is to create a variable that
will hold the instance of the puzzle piece.
| | 07:23 | So after line 8 after the open curly brace,
| | 07:27 | press Return or Enter twice to go down two
lines and the up arrow once to go up one line.
| | 07:32 | Now type private var bl lowercase, :BL all caps, and then a semicolon.
| | 07:46 | Now what we'll do is we'll create a function
| | 07:49 | that will create all of our objects because creating all
these puzzle pieces is going to take many lines of code.
| | 07:55 | So let's put in its own function.
| | 07:57 | After the end of the constructor function on line 14, click
after the curly brace and press Enter or Return twice to go
| | 08:03 | down two lines. Type private function
createPieces with a capital P, ():void
| | 08:18 | Go to the next line, open curly brace, next line, close
curly brace, up arrow, Enter to get in between the curly braces.
| | 08:27 | Now type bl = new BL();
| | 08:38 | So our BL variable that we created on line 9,
is equal to a new instance of the BL class.
| | 08:45 | In other words, it's the puzzle piece on the bottom left.
| | 08:48 | Go to the next line. Type addChild with a capital C, (bl);
| | 08:52 | This will put that BL puzzle piece on the Stage.
| | 09:00 | Now we'll click inside of our constructor function
and call the createPieces method that we just created.
| | 09:07 | Type createPieces with a capital P, ();
| | 09:15 | Now we'll repeat the last few steps that we did in
importing each puzzle piece, creating a variable for it,
| | 09:22 | creating a new instance of that class
and adding the child onto the Stage.
| | 09:28 | Go after line 5 when we type import BL. Let's import the next
puzzle piece, so type import, space, capital B, capital M,
| | 09:38 | and a semicolon. On line 10 after we credited the BL variable
press Enter or Return on your keyboard. Type private var bm:BM;
| | 09:53 | Scroll down to your createPieces method. After bl = new BL
and addChild(bl), go down to the next line and type
| | 10:03 | bm = new BM capital B, capital M, ();
| | 10:10 | Go to the next line and type addChild with a capital C, (bm);
| | 10:19 | Not just repeat this step for the rest of the puzzle pieces,
| | 10:25 | Now I'm just going to case my code in, then you can take your
code against mine to make sure all the code's written properly.
| | 10:32 | Now that you can see that I imported the rest of the puzzle pieces,
you can pause the movie and verify that your code looks the same.
| | 10:41 | I created variables to hold those instances, you can
pause the movie and verify that your code looks the same.
| | 10:50 | Then in the createPieces method, I created new
instance of each class for each puzzle piece
| | 10:57 | and added the child to the Stage. Pause
the movie and verify that that looks alright.
| | 11:05 | Now let's go to File, Save
| | 11:07 | to save the file. Then we'll test the movie by
pressing Cmd+Return or Ctrl+Enter on your keyboard.
| | 11:14 | All the pieces are piled in the corner. If you click
and drag them, you get some drag and drop interactivity.
| | 11:21 | Let's change one more thing. Notice that you don't get
a hand cursor when you roll over each of these clips.
| | 11:28 | Let's add that really quick. Go to DragDrop.as.
| | 11:34 | Click on line 9 after the open curly brace.
Press Enter or Return on your keyboard.
| | 11:39 | Type this.buttonMode with a capital M, = true;
Save the file by going to File, Save.
| | 11:49 | Test the movie by pressing Cmd+Return or Ctrl+Enter.
When you roll over any puzzle piece you get a hand cursor.
| | 11:58 | Now that you've created your drag-and-drop objects we'll learn
how to test to see if they're touching the target movie clip
| | 12:04 | when we drop the piece.
| | Collapse this transcript |
| Detecting collisions| 00:00 | In this movie we'll increase the interactivity
of our game by detecting whether or not
| | 00:05 | the piece we're dragging is touching the
target piece when we drop the piece.
| | 00:10 | If you're following along we're in
Drag_Class.fla, DragGame.as, and DragDrop.as.
| | 00:17 | All of these files are in the 12-3
folder inside of the chapter 12 folder.
| | 00:23 | First let's take a note of the target instance names on the Stage.
| | 00:28 | Click somewhere inside of the rectangular area.
| | 00:34 | trt_mc, that stands for top right target_mc.
| | 00:41 | All of these movie clips are named similarly.
| | 00:43 | These are the target movie clips that we're
looking to hit when we drop the puzzle piece.
| | 00:49 | Now let's go to DragDrop.as. What we'll do is create a property
that will hold the target of each one of our drag and drop objects.
| | 00:59 | Click after line 7 right after the open curly brace.
Press Enter or Return twice to go down two lines.
| | 01:06 | Press the up arrow to go up one line.
| | 01:09 | Now type public var _targetPiece with a capital P, :*;
| | 01:24 | We'll create a public variable. The reason why we need a
public variable is so we can modify and check this variable
| | 01:31 | outside of DragDrop.as. The datatype is *. That's just
in case the datatype comes in as a different datatype.
| | 01:39 | This will make our drag drop class reusable, just in case
we want to pass in different datatypes to targetPiece.
| | 01:48 | Save the file by going to File, Save.
| | 01:52 | Now let's go to DragGame.as. In here we'll
set the target keys for each puzzle piece.
| | 02:00 | Scroll down in your code. Find the createPieces method.
| | 02:06 | Locate the first addChild on line 29, click after the
semicolon, press Enter or Return to go to the next line.
| | 02:14 | Now we'll set the target piece for the BL object.
Type bl._targetPiece with a capital P, =
| | 02:28 | And this will be the target instance name on the Stage of
our fla file, which is BLT, for bottom left target, _mc;
| | 02:41 | We'll need to do this for all six of these puzzle pieces.
| | 02:44 | We'll also need to do something else.
We'll need lead to add an event listener
| | 02:48 | from when we release our mouse so we can check to see if
the puzzle piece is touching its target puzzle piece when we
| | 02:55 | release the mouse button. Go to the next line. Type
bl.addEvent with a capital E, Listener with a capital L
| | 03:07 | (Mouse with a capital M, Event with a capital E,
.MOUSE_UP, all caps, checkTarget with a capital T, );
| | 03:33 | Because we're using a mouse event
we'll need to import that class.
| | 03:36 | Scroll up to the top. You might have to scroll to the left.
| | 03:41 | After import flash.display.MovieClip, press Enter or Return
on your keyboard and then type import flash.events.MouseEvent
| | 03:50 | with a capital M and a capital E, then type a semicolon.
| | 03:56 | Let's go back inside of the createPieces method and
copy and paste the two lines of code we just wrote.
| | 04:03 | So let's select bl._targetPiece =
blt_mc and then bl.addEventListener.
| | 04:11 | Select both of those lines. Press Cmd
or Ctrl+C on your keyboard to copy it.
| | 04:15 | Then we'll paste this five times after every
addChild for the addChild for BR, go to the next line,
| | 04:23 | paste the code. addChild for BM, click after the semicolon, press
| | 04:30 | Enter or Return to go to the next line, paste the
code. Follow those same steps for TL,TR and TM.
| | 04:41 | Now I'll have to go through each of
these and change the instance names.
| | 04:50 | So on line 35, I'll change bl's to br's.
On lines 39 and 40 bl will be changed to bm.
| | 05:09 | On line 's 43 and 44, change the b's to t's.
| | 05:19 | On lines 47 and 48, change bl to tr. And
on lines 51 and 52 change bl to tm
| | 05:41 | Now we'll write the check target event handler. This will
detect whether the puzzle piece is touching the target piece.
| | 05:49 | Scroll down. Click after the close curly brace on line 53.
| | 05:55 | Press Enter or Return twice to go down two lines.
| | 05:58 | Type private function checkTarget with a capital T,
(event:Mouse with a capital M, Event with a capital E, ):void
| | 06:17 | Go to the next line, open curly brace, next line, close curly
brace, up arrow, Enter or Return to go between the curly braces.
| | 06:28 | Now we'll create a conditional statement,
| | 06:29 | when we release our mouse that's our mouse up, to see if the
two objects are touching, that's the puzzle piece and its target
| | 06:36 | puzzle piece. Type if(event.currentTarget with a capital T,
| | 06:47 | that's going to refer to whatever puzzle piece we drop,
| | 06:51 | .hitTest with a capital T, Object with a capital O, (
| | 07:00 | The hit test object property gives us a true or false
of whether to objects are touching. The first object
| | 07:08 | is the object it's calling the test object, that would be
event.currentTarget, whatever puzzle piece we're releasing.
| | 07:12 | Then what we put in the parentheses
is the target we're checking for.
| | 07:17 | Inside of the parentheses type event.currentTarget
with a capital T, ._targetPiece with a capital P.
| | 07:30 | This'll detect whether the puzzle piece is touching its target piece.
Type two close parentheses. One to close out the hit test object
| | 07:41 | and then one to close out the conditional statement.
| | 07:44 | Go to the next line, open curly brace, next line, close
curly brace, up arrow, Enter or Return to go to the next line
| | 07:54 | and go between the curly braces. Now
I'm scrolling to the left in my code.
| | 07:58 | Now we'll get a trace statement that will notify us that
we have a hit. So type trace" and then trace whoooooot!");
| | 08:18 | Save the file by going to File, Save and test the movie
by pressing Cmd+Return or Ctrl+Enter on your keyboard.
| | 08:27 | Click and drag your puzzle piece to the proper
area. And you get the whooooooot message.
| | 08:34 | So now we can detect collisions. In the next movie we'll
write the code that will determine what will happen
| | 08:40 | if the objects are touching or if they are not touching.
| | 08:44 |
| | Collapse this transcript |
| Responding to collisions| 00:00 | In this movie we'll learn how to control the placement of
our puzzle pieces whether or not they're touching the target
| | 00:06 | piece when we drop them.
| | 00:08 | If you're following along we're in
Drag_Class.fla, DragGame.as and DragDrop.as.
| | 00:16 | All of these files are in the 12-4 folder inside the
Chapter 12 folder along with the other Exercise Files.
| | 00:24 | Let's first go to DragDrop.as. Let's create two public
properties to hold the original x and original y position.
| | 00:33 | Click on line 8 after public var_targetPiece:*.
| | 00:39 | Go to the next line. Type public var_origX:Number with
a capital N, and a semicolon. Go to the next line.
| | 00:54 | Type public var _origY:Number
with a capital N, and a semicolon.
| | 01:06 | We'll set the original x and the original y values
to the original x position when the drag drop
| | 01:12 | object is first created. So click on
line 13 after the open curly brace.
| | 01:19 | Press Enter or Return to go to
the next line and type _origX = this.x;
| | 01:32 | That will set the original x variable to whatever the x position
is of the drag and drop the object when it's first created.
| | 01:40 | Go to the next line. Type _origY = this.y;
| | 01:50 | Go to File, Save to save the file.
| | 01:54 | Then let's go to DragGame.as. Scroll to the bottom
of your code. Find the checkTarget event handler.
| | 02:05 | Look at the conditional statement that starts on line 57,
if event.currentTarget that hit test object.
| | 02:12 | After trace whoooooot!, press Enter
or Return to go to the next line.
| | 02:17 | And this is the code that will execute if we get a proper hit.
| | 02:21 | So we need to line up the x and y values
of the puzzle piece with its target piece.
| | 02:28 | So type event.currentTarget with a capital T,
x = event.currentTarget with a capital T,
| | 02:44 | ._targetPiece with a capital P, .x;
| | 02:57 | So the x position of the puzzle piece will be
equal to the x position of the target puzzle piece.
| | 03:04 | Let's select that whole line of code. Copy it by pressing
Cmd or Ctrl+C on your keyboard and go to the next line.
| | 03:11 | Paste the code, change the x's to y's.
| | 03:18 | Now let's set the x and why values of the puzzle pieces
| | 03:24 | to the original x and y values, if
they are not touching the target piece.
| | 03:30 | You might have to scroll to the left of your code a little bit.
| | 03:33 | Click after the close curly brace on line 62. Press
Enter or Return to go to the next line, and then type else.
| | 03:41 | In other words, if the puzzle piece is not touching
its target puzzle piece we release the mouse button.
| | 03:49 | Next line, open curly brace, next line, close curly brace,
up arrow, Enter or Return to get within the curly braces
| | 03:54 | and typed event.currentTarget with a capital
T, .x = event.currentTarget._origX;
| | 04:17 | So if the puzzle piece is not touching the right
target, it will be set to its original x position.
| | 04:23 | Let's select this line of code.
| | 04:26 | Copy it by pressing Ctrl or Cmd+C on your keyboard. Go
to the next line. Press Ctrl or Cmd+V to paste the code.
| | 04:33 | Change the x's to y's. Make sure
_origX is replaced with a capital Y.
| | 04:41 | Go to File, Save, save the file.
| | 04:46 | Test the movie by pressing Cmd+Return
or Ctrl+Enter ohn your keyboard.
| | 04:52 | Drag your puzzle piece into the appropriate spot.
| | 04:56 | Get our whoot message. You might have
to drag the Output window out of the way.
| | 05:03 | Drag a puzzle piece to the wrong spot
and it snaps back into its original position.
| | 05:14 | We have one problem though, if the puzzle pieces are placed
| | 05:18 | and you click them and drag them
again, you can pull them out of place.
| | 05:22 | So let's lock them into place once they're correct.
| | 05:27 | Close these windows and back in the area where we traced
whooooot, where we got a hit, under the two lines of code
| | 05:38 | where we set the puzzle pieces x and y
values to their target pieces, go to the next line
| | 05:45 | and here we'll type event.currentTarget with a capital T,
| | 05:53 | in this line we'll disable the mouse up event.
| | 05:58 | So we'll use remove event listener. Before
we type that, let's go to line 52.
| | 06:03 | Just copy that line from addEventListener to the end
by selecting it and pressing Ctrl or Cmd+C on your keyboard.
| | 06:10 | Return to line 62. Paste the code by
pressing Cmd or Ctrl+V on your keyboard.
| | 06:17 | Change addEventListener to removeEventListener.
| | 06:23 | Now we'll also have to disable all of
the interactivity that's inside of DragDrop.as.
| | 06:29 | So let's go to DragDrop.as. Scroll down.
On line 29 after drop movie event handler,
| | 06:40 | select after the close curly brace and
press Enter twice to go down a few lines.
| | 06:44 | Let's create a public function in we'll
be able to call this from DragGame.as.
| | 06:53 | Type disable():void.
| | 07:01 | Go to the next line, open curly brace, next line, close curly
brace, up arrow, Enter or Return to get within curly braces.
| | 07:08 | Now for this to disable we'll just need to remove the
event listeners listening for the mouse up and mouse down
| | 07:16 | and set button mode to false. So let's scroll up in our code,
| | 07:19 | to where we did all of the opposite
of that, from line 16 to line 18.
| | 07:24 | Select those three lines of code, press
Ctrl or Cmd+C on your keyboard to copy it.
| | 07:31 | Scroll down. Find line 33. Paste the code by
pressing Cmd or Ctrl+V on your keyboard.
| | 07:39 | Change addEventListener to
removeEventListener on both lines 33 and 34.
| | 07:52 | Change the button mode to false.
| | 07:56 | Now all we need to do is call
this method from DragGame.as.
| | 08:02 | Go to File, Save. Go to DragGame.as.
Go all the way to the end of line 62,
| | 08:14 | on the last code that we wrote in this file. Go to
the next line. Type events.currentTarget with a capital T,
| | 08:23 | .disable();
| | 08:26 | That will run the disable method
that we just created in DragDrop.as
| | 08:34 | and disable all of the interactivity
for that particular puzzle piece.
| | 08:39 | Go to File, Save. Test the movie by pressing
Cmd+Return or Ctrl+Enter on your keyboard.
| | 08:47 |
Drag a puzzle piece into place. Try to
click and drag it away, and you can't do it.
| | 08:54 | Now that we've successfully managed the dragging and
dropping of our puzzle pieces, let's learn how to detect a win.
| | 09:00 |
| | Collapse this transcript |
| Detecting a win| 00:00 | In this movie we'll set up our puzzle so we can detect a
win once all the puzzle pieces are put in place properly.
| | 00:07 | If you're following along we're in Drag_Class.fla,
| | 00:10 | DragGame.as and DragDrop.as. All these files
are in the 12-5 folder inside of the chapter 12
| | 00:17 | folder along with the other Exercise Files.
| | 00:20 | Let's go to DragGame.as. Find the section
where we created all of our variables.
| | 00:26 | At the end of line 20 press
Enter or Return on your keyboard.
| | 00:31 | We'll create another private variable.
| | 00:35 | The first variable will hold the number of total matches or
total pieces of our puzzle. So type _total.pieces with a capital P,
| | 00:49 | type a :Number with a capital N
and a semicolon. Go to the next line.
| | 00:55 | Create a new private variable called _currentPieces with
a capital P, :Number with a capital N, and a semicolon.
| | 01:09 | Scroll down a little bit. Inside of our constructor function
we'll set initial values for total pieces and current pieces.
| | 01:17 | Click after the open curly brace of line 25.
| | 01:20 | Press Return or Enter on your keyboard
and type _totalPieces with a capital P, = 6;
| | 01:32 | We have six total pieces of our puzzle.
| | 01:37 | Go to the next line and type
_currentPieces with a capital P, = 0;
| | 01:47 | When the game starts, no pieces are in place.
| | 01:51 | All we have to do now is to add to the current pieces
variable, every time we drop a piece in the right place.
| | 01:57 | Scroll down to the bottom of your code on line 66 right after
event.currentTarget.disable, press Enter to go to the next line,
| | 02:11 | and then type_currentPieces with a capital P, ++;
| | 02:20 | This'll add one to whatever the current value
of current pieces is. Now all we have to do
| | 02:28 | is once the value is greater than or equal
to the number of total pieces, we have a win.
| | 02:34 | Go to the next line. Type if_currentPieces with a capital
P, >= _totalPieces with a capital P, close parenthesis.
| | 02:56 | If current pieces is greater than or equal to _totalPieces.
| | 03:01 | We could use two equal signs, but I is greater
than or equal to, just like we did in the memory game,
| | 03:06 | just in case for some random reason
current pieces goes over total pieces.
| | 03:10 | Go to the next line, open curly brace,
next line, close curly brace, up arrow,
| | 03:17 | Enter or Return to go between the two
curly braces. Now type trace("you win!");
| | 03:33 | Let's save the file by going to File, Save,
| | 03:37 | and then we'll test the movie
by pressing Cmd+Return or Ctrl+Enter.
| | 03:42 | Drag all of the pieces into place and
then look for the message that says you win.
| | 03:54 | And now we've successfully detected a win.
| | 03:57 | In the next movie we'll add shadows
to our pieces when we pick them up.
| | Collapse this transcript |
| Adding drop shadows| 00:00 | In this movie we'll add a drop shadow to our puzzle pieces
so it looks like we're picking them up over the other pieces.
| | 00:07 | If you're following along we're in
Drag_Class.fla, DragGame.as, and DragDrop.as.
| | 00:14 | All these files are in the 12-6 folder inside of
the Chapter 12 folder along with the other Exercise Files.
| | 00:21 | Let's go to DragDrop.as.
| | 00:25 | The first thing we'll need to do is import
the drop shadow filter, so we can use it.
| | 00:30 | On line 4 after we import the mouse event, let's go to
the next line and import flash.filters.DropShadowFilter,
| | 00:44 | capital D, capital S, and a capital F.
| | 00:48 | Now we'll scroll down in the drag movie event handler.
| | 00:56 | Right after this.startDrag, go to the next line and then type
this.filters equals, open square bracket, closed bracket, semi-colon.
| | 01:10 | Put your cursor in between the two square brackets,
| | 01:13 | and then type new Drop capital D, Shadow with
a capital S, and then Filter with a capital F, ()
| | 01:29 | Now this will apply a new drop shadow
filter with the default settings.
| | 01:33 | Now in drop movie we'll remove the drop
shadow filter when we drop the object.
| | 01:38 | After this.stopDrag, go to the next line and type this.filters =
| | 01:46 | Now to set the filter to nothing we just have to
type open square bracket, closed bracket, semi-colon.
| | 01:54 | Let's save the file by going to File, Save,
| | 01:58 | and then test the movie by pressing
Cmd+Return or Ctrl+Enter on your keyboard.
| | 02:03 | Click on a puzzle piece, get the drop shadow,
drag it into place, the drop shadow goes away.
| | 02:10 | Try to click on a puzzle piece that's below the
other puzzle pieces. Notice it has a drop shadow,
| | 02:18 | but it looks kind of weird because it looks like it has a drop
shadow but it's still behind the other one. So it looks like it
| | 02:23 | should be in front but it's not.
Let's fix that problem really quick.
| | 02:30 | Close this window. On line 25 after we set the filters
to be a new instance of the drop shadow filter class,
| | 02:39 | Go to the next line and then type this.parent.
| | 02:45 | That's referring to its parent object
or in other words, the DragGame.as.
| | 02:50 | .addChild();
| | 03:00 | This is basically like dragging a layer that's at the
bottom of your layer stack all the way to the top.
| | 03:06 | It adds the same drag-and-drop object
all the way at the top of everything else.
| | 03:11 | So when we see the drop shadow it'll
be at the top of everything else,
| | 03:14 | then every one we get will come all the
way to the top and apply the drop shadow.
| | 03:18 | Go to File, Save, and then test the movie by
pressing Cmd+Return or Ctrl+Enter on your keyboard.
| | 03:27 | Still have the drop shadow. Click
one of the pieces towards the bottom.
| | 03:32 | Notice it comes to the top and it
has a shadow over the other pieces.
| | 03:39 | So there's how to add a drop shadow
and bring the pieces to the front.
| | 03:42 |
| | Collapse this transcript |
| Randomly placing objects| 00:00 | In this movie we'll write the code that will randomly
place each puzzle piece every time you play the game.
| | 00:06 | If you're following along we're in
Drag_Class.fla, DragGame.as, and DragDrop.as.
| | 00:14 | All of these files are in the 12-7 folder inside of
the chapter 12 folder along with the other Exercise Files.
| | 00:22 | Let's first go to DragGame.as. Go
down towards the bottom of your code
| | 00:30 | and we'll create a function that will
put a piece in a random position.
| | 00:35 | After the close curly brace on line 78 press
Enter or Return twice on your keyboard. Now type
| | 00:43 | private function randomPosition
with a capital P, (piece:*):void
| | 01:03 | Every time we create a piece we'll
set it to the random piece method,
| | 01:08 | and we'll give that piece a random value inside of the function.
| | 01:12 | Go to the next line, open curly brace, next line, close curly
brace, up arrow, Enter or Return to go between the curly braces.
| | 01:20 | Now type piece.x = Math with a
capital M, .round(Math.random() *
| | 01:42 | Now we need a random number that won't overlap the
final puzzle piece area, or it won't overlap any targets.
| | 01:49 | Let's go to Drag_Class.fla. At the very
top of all the layers create a new layer.
| | 01:58 | Go to the rectangle tool, draw out a rectangle, almost
touching the rectangle that holds all the hit areas.
| | 02:07 | Now we'll just take a note of how wide that rectangle is.
| | 02:12 | Select it. It's about 216 pixels wide. There's a little bit more
space on the right so we'll just add to that value a little bit.
| | 02:22 | Let's delete that layer by selecting it and clicking the trash can.
| | 02:27 | Return to DragGame.as. So in there I'm going to type 225 but
now we need to subtract the width of the puzzle piece as well,
| | 02:39 | because if the x position is at 225,
then it will be overlapping the hit area.
| | 02:46 | So type - piece.width). Go before
the 225 and type an open parenthesis.
| | 03:02 | That way the render number will be between
0 and then 225 minus the piece.width.
| | 03:07 | After the close parenthesis type another close parenthesis.
We need one for these parentheses, 225 - piece.width,
| | 03:19 | and another close parenthesis for the Math.round.
| | 03:22 | After that close parenthesis, type
a semicolon. Select the whole line,
| | 03:27 | copy it by pressing Cmd or Ctrl+C on your keyboard.
| | 03:33 | Go to the next line. Paste the code by
pressing Cmd or Ctrl+V on your keyboard.
| | 03:38 | Replace piece.x with piece.y, then the
number 225 with 400, that's the height of our Stage.
| | 03:48 | And then piece.width, let's change that to piece.height.
| | 03:53 | The next step is to call this random position method.
So scroll up in your code, find the create pieces method,
| | 04:02 | starting on line 36 after the
addEventListener. Go to the next line.
| | 04:10 | And then type randomPosition with a capital P, (bl);
| | 04:20 | Select this line of code, and then we'll
copy and paste it for each of the puzzle pieces.
| | 04:25 | Press Cmd+C on your keyboard or Ctrl+C on the PC.
| | 04:29 | After each event listener let's
paste that code using Cmd or Ctrl+V.
| | 04:36 | Make sure after you paste the code you change the bl
to br, and then a bm, and then a tl, tr, and then a tm.
| | 05:09 | And that will call our random position
on every piece of the puzzle.
| | 05:13 | You might want to pause the movie and just check
my code to make sure your code looks the same.
| | 05:19 | Let's save the file by going to File, Save, then test the
movie by pressing Cmd+Return or Ctrl+Return on your keyboard.
| | 05:26 | The pieces are in a random position.
| | 05:30 | Close out the movie. Test it again
using the same keyboard shortcut.
| | 05:35 | They're in different positions.
| | 05:38 | What if you put it in the wrong place?
| | 05:41 | Then they snap to the top left of the screen.
| | 05:43 | That's because the original y value is set
in DragDrop.as as well as the original x value.
| | 05:49 | If we reset them from DragGame.as to
the random positions that we create
| | 05:55 | then they should snap right back to the
original position each time we run the movie.
| | 05:59 | Close that window, scroll down in your code, find line 89,
or round about there inside of the random position method.
| | 06:09 | Click after piece.y = Math.round. Go to the next
line. Type piece._origX with a capital X, = piece.x;
| | 06:29 | Let's select that line of code. Copy it
by pressing Cmd or Ctrl+C on your keyboard.
| | 06:35 | Go to the next line. Paste by pressing
Cmd or Ctrl+V on your keyboard.
| | 06:40 | Change the capital X to a capital Y,
and lowercase x to a lower case y.
| | 06:46 | Go to File, Save. Test the movie by
pressing Cmd+Return or Ctrl+Enter on your keyboard.
| | 06:55 | Drag the piece to a wrong place and
watch it snap back to its original random position.
| | 07:03 | Test the movie again using the same keyboard
shortcut to verify that it still works.
| | 07:11 | And it looks like it's working.
| | 07:12 | So there is how to randomize your puzzle pieces and
you successfully created a complete drag and drop came.
| | Collapse this transcript |
|
|
13. Wrapping It UpClosing| 00:01 | So congratulations to you.
| | 00:03 | You've made it through the whole title.
Hope you've learned a lot about ActionScript.
| | 00:08 | You learned about variables,
| | 00:10 | functions,
| | 00:11 | classes, conditional statements,
| | 00:14 | arrays,
| | 00:15 |
even how to create some games.
| | 00:17 | Hope you've had a lot of fun, because I sure have.
| | 00:20 | See you next time.
| | 00:23 |
| | Collapse this transcript |
|
|
