IntroductionWelcome| 00:04 | Hi, I am Paul Trani and welcome to Flash
Professional CS5: Building a Simple Game
| | 00:09 | for Android Devices.
| | 00:11 | In this course, we're going to be
creating a cool mobile game that's interactive
| | 00:15 | and fun and fairly easy to create.
| | 00:18 | This game will have all the
functionality of a basic game, including shooting
| | 00:22 | functionality and collision detection.
| | 00:25 | You'll be able to control the
player by tilting the device.
| | 00:28 | We'll keep track of the enemies you destroy
and show the results on a High Score screen.
| | 00:34 | Now, this is specifically for mobile
devices, so I'm also going to show you how to
| | 00:39 | use some of those mobile features, such
as gestures and how to use the hardware
| | 00:44 | keys to activate the submenu.
| | 00:46 | Finally, I'll show you how easy it is
to put the game on the Android market
| | 00:50 | for the world to play.
| | 00:52 | So let's start making a game with Flash
Professional CS5: Building a Simple Game
| | 00:57 | for Android Devices.
| | Collapse this transcript |
| Using the exercise files| 00:01 | If you are a Premium member of the
lynda.com Online Training Library, or if
| | 00:06 | you're watching this tutorial on a disc,
you have access to the exercise files
| | 00:11 | to use throughout this title.
| | 00:13 | Here are the exercise files.
| | 00:15 | They are in this folder. And again,
you can see that there is Begin and Final
| | 00:20 | files as well, and then there's an
Assets folder that includes Code Snippets and
| | 00:26 | some other graphics.
| | 00:27 | If you are a Monthly or Annual
subscriber to lynda.com, you actually don't
| | 00:32 | have access to these exercise files,
so it might be a little more tricky if
| | 00:36 | you're trying to follow along, but the
code snippets will be available to you
| | 00:40 | for free as a free download.
| | 00:43 | Now, let's dive into creating
an app for Android devices.
| | Collapse this transcript |
|
|
1. Introduction to Mobile Understanding the user| 00:00 | Before you actually start creating your
game, you need to understand mobile phone
| | 00:04 | users, which is pretty much everybody
these days. And as I go through each topic,
| | 00:09 | I want you to think about how you use
your mobile phone, within the context you
| | 00:15 | use it--so what were you doing, say,
before and what will you do after--
| | 00:19 | the environment you're using the phone,
how you're interacting with the phone--
| | 00:23 | which would be the input method--
| | 00:25 | how you're holding the device--which is
the orientation--and then other common
| | 00:30 | metaphors you're use to when
dealing with mobile phones and devices.
| | 00:34 | First off, the context. What are they doing?
| | 00:37 | Are they waiting in line for a lunch?
| | 00:40 | Are they, say for instance, kind of
watching a commercial but also kind of
| | 00:44 | playing with their phone?
| | 00:46 | Think about how you use your phone
and the context in which you use it, and
| | 00:50 | you need to create your game with this
in mind. So you need to be prepared for
| | 00:56 | the game to get interrupted because the
commercial is over with, or whatever the case may be,
| | 01:01 | and thus you also need to design for
short tasks, roughly about two minutes.
| | 01:07 | So maybe each level to the game might be
only two minutes long. Environment.
| | 01:12 | Well, where is the user?
| | 01:13 | Are the inside where they can see the
screen nice and clear, or are they outside
| | 01:18 | where there's lots of glare?
| | 01:19 | You never can really, tell so you need to
design with different environments in mind.
| | 01:25 | You need to make sure the graphics
have enough contrast, they're easy to see
| | 01:30 | and, of course, the text is easy to read,
so you need to make sure that font size
| | 01:35 | is large enough and that
font is pretty easy to read.
| | 01:39 | How is the user interacting with the content?
| | 01:42 | Oftentimes it's through a
touchscreen, so they are actually touching the
| | 01:45 | screen of the device.
| | 01:46 | They could be using the hardware
buttons to navigate, say, back or to hit the
| | 01:51 | Home button or using their keyboard--
if there's a keyboard on the device--or
| | 01:57 | are they using device-specific
capabilities to play the game, such as tilting
| | 02:02 | the device and making, say for
instance, the character move that way?
| | 02:07 | We need to keep these input methods in
mind and determine which one is going to
| | 02:10 | be best for us. But when it comes to
touch, which is most often how you would
| | 02:15 | interact with content, we need to make
sure those buttons are at least 36 pixels
| | 02:20 | wide and high, and that's at a minimum.
So we need to design for finger sizes,
| | 02:25 | and don't forget that the finger does
come with a whole hand that might get in
| | 02:30 | the way or cover up content. So you
need to make sure, say for instance,
| | 02:34 | important content is higher up on the screen.
| | 02:38 | But keep these things in mind, how the
user interacts, and that's really going
| | 02:42 | to help how you determine how you
develop the input method. The orientation,
| | 02:47 | well, how is the mobile device being held?
| | 02:50 | Are they holding it horizontally or
vertically when they're interacting with the
| | 02:55 | content, or is it both?
| | 02:56 | You to think about this
orientation and make sure you design your
| | 03:00 | content appropriately.
| | 03:03 | Also, you want to use common metaphors.
Say for instance if you need the user to
| | 03:08 | advance, you might have an arrow moving
or pointing to the right. Or if they need
| | 03:13 | to add something, you might have a Plus sign.
| | 03:15 | Also, use physical metaphors as well.
Use a physical look of a calendar if you
| | 03:21 | need to add a calendar, for instance.
| | 03:23 | I've also added this link, www.patternpat.com.
| | 03:26 | It has a ton of user an interface pattern that
you can check out, and that is a great resource.
| | 03:32 | The last and probably most important
thing you need to keep in mind is you need
| | 03:36 | to make the game fun, and it sounds
pretty straightforward, but you need to
| | 03:40 | continually ask yourself,
"Would you play your game?"
| | 03:43 | And are you having fun making the game?
| | 03:46 | Because if you're not having fun with it,
that might come across and, ultimately
| | 03:50 | if your game is fun it gives
the user a reason to play it.
| | 03:54 | So keep this in mind, as well as the user
in general, and it will really help make
| | 04:00 | your game a success.
| | Collapse this transcript |
| Flash content on Android devices| 00:00 | Now, I'd like to give you an overview
of what Android is and the basics of
| | 00:04 | creating apps for it.
| | 00:06 | Well, Android is a type of software
that actually was created by Google for
| | 00:11 | mobile devices that include an
operating system, or OS as it's known, OS,
| | 00:17 | middleware, as well as key applications such
as Google Maps, Gmail, things like that.
| | 00:23 | Android also has an SDK, a software
development kit that allows you to create
| | 00:31 | applications for the Android operating system.
| | 00:35 | The Android operating system can be
used on cell phones, netbooks and tablets,
| | 00:40 | so it can be used in a variety of devices.
| | 00:46 | And for a complete list, I'd like
to point you to the Wikipedia link.
| | 00:50 | There is a long list since, again,
it is constantly being updated.
| | 00:54 | It's kind of hard to keep up-- but know that
your content really will have a wide reach.
| | 01:00 | Air for Android allows you to
basically package up your SWF files--if you've
| | 01:07 | made them in Flash Professional you can
package up your SWF files into Adobe
| | 01:12 | AIR apps for Android
devices, which is pretty great.
| | 01:16 | You package them up.
| | 01:17 | They become an APK file,
which is basically an app.
| | 01:20 | Know that you can also take that same
SWF content and make an app for Blackberry
| | 01:27 | tablet operating systems, as
well as apps for Apple iOS devices.
| | 01:32 | So, again, your Flash content
can be pretty wide reaching.
| | 01:37 | You can make plenty of different
types of apps really from the same basic
| | 01:42 | content in Flash Professional.
| | 01:44 | Air for Android also has
mobile-specific features. Some of those include
| | 01:49 | multitouch, so, again, swiping with
your fingers, pinching and zooming,
| | 01:54 | an accelerometer, which means tilting your
device and having content move, screen
| | 01:58 | orientations--whether it's
landscape or portrait--microphone, keyboard,
| | 02:04 | geolocation is defining where you are,
camera roll which is accessing all the
| | 02:09 | photos on the phone for instance,
and then the GPU, which is the graphics
| | 02:15 | processor unit, which really
makes content move really fast.
| | 02:19 | Now, this is a majority of the
items available for Android.
| | 02:23 | There are more, but these are the
basics, and you need to keep all of these
| | 02:27 | features in mind as you
start to develop your game.
| | 02:30 | Once you've created your game, you
can go ahead and put that game on the
| | 02:34 | Android marketplace.
| | 02:36 | So, again, it allows Android developers
to freely distribute all of their mobile
| | 02:42 | apps to various mobile phones.
| | 02:45 | They can be free apps, or you could
even charge for them if you want to as
| | 02:49 | well and make some money,
but it's really pretty easy to do.
| | 02:52 | It takes minutes to set up and is
really powerful, the number of people you can
| | 02:58 | get your apps out to.
| | 02:59 | So the Android operating system has a
wide reach on many devices. That, along
| | 03:06 | with the marketplace, allows you to get your
content out there to many different devices.
| | 03:10 | But now let's dive into
actually making some of this content.
| | Collapse this transcript |
|
|
2. Mobile Game SetupReviewing the game| 00:00 | Let's start off by reviewing the final game.
| | 00:03 | So, this is what we're
going to make in this course.
| | 00:06 | It's called Doodle Galaxy Invaders,
and I am just going to go ahead and run
| | 00:09 | this file in Flash.
| | 00:14 | Here it is. We have a nice animated intro.
| | 00:16 | I can have whatever I want here, if I
need to any sort of rules or anything like
| | 00:20 | that, it would obviously go on this screen.
| | 00:22 | It is a space-invaders-type game.
| | 00:25 | I'm going to be controlling this
spaceship by moving my mouse if I'm viewing it
| | 00:29 | on the Desktop. Or if it's on the device,
as I tilt the device, this ship will
| | 00:35 | move in the direction of the tilt.
| | 00:37 | He will automatically fire at these
various spaceships that are going to
| | 00:41 | come down from the top.
| | 00:43 | Each time I hit one, it's going to be
added to my score, and I've got to make sure
| | 00:47 | three of these guys don't hit the
bottom or hit me because if three do, then
| | 00:52 | the game is over. And if I did well, I
get a chance to entering in my name as
| | 00:58 | the High Score Leader.
| | 00:59 | So that's what the game
play is going to look like.
| | 01:02 | I am juts going to click
Play and then play the game.
| | 01:03 | You can see, he follows my mouse,
| | 01:08 | automatically fires.
| | 01:11 | (gunshots)
| | 01:20 | All right, so three of them either
landed or hit me, and you can see that my
| | 01:25 | score of 15 does not beat the
previous score of 20 by Paul, okay.
| | 01:30 | So that's how the game works.
| | 01:32 | That's how it's set up.
| | 01:33 | It seems pretty fun.
| | 01:34 | It's easy to interact with.
The automatic firing is easy, and in general, I think
| | 01:39 | it's a pretty fun game, and it's
set up and structured nice and neat.
| | 01:43 | So let's go ahead and dive into how
this game was made, and really, how to make
| | 01:47 | a game like this.
| | Collapse this transcript |
| Creating a file in Device Central| 00:00 | Let's start off by creating
our very first Flash file.
| | 00:04 | Now, I am going to be going to be using
Adobe Flash CS5 throughout this course,
| | 00:08 | but I'm actually not going to start there.
| | 00:10 | I'm actually going to create a
file using Adobe Device Central CS5.
| | 00:17 | Okay, so with Device Central CS5, it
allows me to sort of create my very first
| | 00:22 | file, add content to it, and then I can
test that content to see how it looks and
| | 00:28 | interacts back in Device Central.
| | 00:31 | But again, I am going to use this as my
starting point, so I am just going to go
| | 00:34 | ahead and launch Device Central.
| | 00:37 | Now, the first thing I am going to do is
I am going to browse the various devices.
| | 00:42 | So, as you'll notice, this is a
great place to kind of peruse all the
| | 00:46 | various devices out there.
| | 00:48 | You can see the different display
sizes, the creator, Flash content.
| | 00:53 | This is Flash in the browser.
Or you can just view by name.
| | 00:57 | But what I want to do is I want to
search for all the Droid devices, so I am
| | 01:01 | just going to go ahead and type in Droid
and that brings up all of these Droid devices.
| | 01:06 | So I am going to just select by holding down
the Command key, or Ctrl key if you're on a PC.
| | 01:15 | I'm selecting these three, because
really these three devices--the Droid
| | 01:19 | Incredible, the Droid 2 and the Droid X--
are the three devices that I want to test on.
| | 01:26 | So I am going to take those three and
just click and drag them over into the
| | 01:30 | Test Devices folder off to the side.
| | 01:33 | Okay, just like that.
| | 01:35 | Notice I can check out any of the
specifics of each device just by selecting it,
| | 01:42 | and it gives me the color depth, all
sorts of things, right in here, or I can
| | 01:47 | select it on the side as well.
| | 01:49 | So if I go to the Droid 2, I can see
that its display size is 854 x 480, and I'm
| | 01:56 | given all the other details.
| | 01:57 | But as you'll notice, the display size
is pretty similar across these devices.
| | 02:04 | So I am just going to start by
selecting the Droid 2 and from this profile, I am
| | 02:10 | going to go ahead and create--that's
in the upper right-hand corner--a Flash
| | 02:16 | file based on the Droid 2 specs.
| | 02:19 | Before I click Create, I need to make
sure I set to full screen, okay, so that's
| | 02:25 | going to make sure my document is the
full screen of the device as well.
| | 02:30 | It's the same size, which is going to
be 854 x 480. I'll click Create.
| | 02:36 | So that ensures that your document
is the correct size. As I look in the
| | 02:42 | Properties panel, 854 x 480, I
can see the stage color as well.
| | 02:48 | Okay, so I am just going to ahead and
draw a quick rectangle with the Rectangle
| | 02:52 | tool, and this is basically just a
throwaway file, so don't worry about the color
| | 02:57 | or anything else, because all I want to
do is just draw a quick graphic, go to
| | 03:01 | Control, and then test it back in Device Central.
| | 03:06 | So, again, the creation of your
graphics, everything you need to do, and then
| | 03:09 | you can test it back in
Device Central, just like that.
| | 03:14 | You will get this gray bar sometimes,
and in order to get rid of that, go to
| | 03:19 | the Display panel and make sure this is
set to Fullscreen, because what's going
| | 03:25 | on here is Device Central thinks you
want to see this in a browser, so it's
| | 03:30 | accounting for the browser bar.
| | 03:32 | So it's set to Fullscreen.
| | 03:33 | There is my content. I can see how
that looks, and I actually can do more
| | 03:38 | interaction, which we'll cover later.
| | 03:40 | So that's a quick preview of how to
make a profile, as well as--based on that
| | 03:46 | profile--make a quick Flash file
and then test out your graphics.
| | 03:50 | Now if I go back into Flash, here's a
file that I already have created. So if you
| | 03:55 | could imagine I've created all of
these graphics, I want to test these actual
| | 03:59 | graphics out on the device. I can go
to Control > Test Movie, again in Device
| | 04:05 | Central. That's what I've been using. I
can go to Test, and there's the graphics.
| | 04:11 | So again, this one has some animation.
| | 04:14 | I can see the graphics.
Everything looks pretty good.
| | 04:17 | I can make sure this is set to
Fullscreen, but let's take this a step farther
| | 04:22 | because using the Display panel, I want
to change the Reflections to, say for
| | 04:26 | instance, Indoor to see how
the graphics hold up. Okay.
| | 04:31 | So, so far so good. We get a little bit
of a reflection. Outdoor. You can start
| | 04:36 | to stimulate these different environments.
| | 04:39 | And then what you want to do is
adjust your graphics accordingly, okay.
| | 04:44 | Same thing for, say for instance, Screen mode;
| | 04:47 | I can change it from landscape to
portrait and see what that looks like there.
| | 04:52 | Notice how the content shifts, but this
simulates how the content would look if
| | 04:57 | they change the Screen mode,
basically the orientation.
| | 05:01 | Not only that, I did say I wanted to
see how this looks on other devices.
| | 05:04 | Well, I can always select this Motorola
Droid X. I double-click on that.
| | 05:09 | I can see that, and I can also change
it to landscape and there's the Droid X
| | 05:15 | with the graphics, and I can
change the Reflections back to None.
| | 05:19 | So again, Device Central gives you the
ability to not only create your first
| | 05:22 | file, but it enables you to view
those graphics not only on the, say for
| | 05:27 | instance, the profile that you've
created the file on originally, but on
| | 05:32 | different devices as well.
| | 05:33 | So this is a great starting point
for making your first Flash file.
| | Collapse this transcript |
| Reviewing the game structure| 00:01 | Let's begin by reviewing the start
file that already has basic game structure
| | 00:06 | implemented, including graphics
as well as ActionScript code.
| | 00:11 | Let's start with the graphics, because
on this introScreen layer is this intro
| | 00:16 | screen, and I'll just double-click on it.
| | 00:18 | You can see it contains animation,
as well as a Play button right here.
| | 00:24 | So you click the Play button
and you'll get into the game.
| | 00:28 | Let's go back to Scene 1.
I'll turn off the introScreen.
| | 00:32 | There is an options menu, with
an Exit button that will be used--
| | 00:35 | I'll turn that off--
and an endScreen that will populate the results.
| | 00:40 | I'll turn that off. Then we have this
text layer which contains some various
| | 00:46 | text items. These happened to be
dynamic text fields that will show the
| | 00:50 | score, the lives, as well as the Level
the person is on, and lastly we just
| | 00:55 | have that background.
| | 00:57 | So those were all the game's screens
set up and various graphics, most of the
| | 01:02 | graphics we'll need.
| | 01:03 | And notice also in the Library panel there
are some various graphics that will be used.
| | 01:09 | So I am going to click
back on the Properties panel.
| | 01:11 | Now, let's take a look at the Actions
layer. It's right here, in that first
| | 01:16 | frame, is some ActionScript code.
| | 01:19 | So let's go to Window, open up the
Actions panel, and let's review some of this
| | 01:25 | code, this basic game
structure that's currently set up.
| | 01:28 | So right up here at the top are
going to be all of the variables.
| | 01:32 | Okay, so there are four variables
up here at the top, this INIT_GAME.
| | 01:38 | There's this START_PLAYER State.
There's the PLAY_GAME State and the END_GAME
| | 01:45 | State. So at any point in time, the
gameState is going to be equal to one of
| | 01:52 | these items up here. Okay.
| | 01:55 | We want to be aware of what
gameState we're in at all times.
| | 01:59 | We need to set up those variables first.
| | 02:01 | Next up is the setup, so right in here,
this is where we'd sort of turn on and
| | 02:06 | off any graphics that we'd want to
deal with, maybe adjust the screen size.
| | 02:10 | That's all done in the setup, so in
this case we're turning off the endScreen
| | 02:15 | and we're turning off the optionsmenu.
| | 02:16 | Okay let's scroll down, because next up
we have this introscreen, and for this
| | 02:22 | introScreen we have a Play button,
and when it gets clicked on it fires off this
| | 02:29 | clickAway function, which in turn moves
the introScreen off. That's when it
| | 02:35 | calls to this function right in here.
| | 02:37 | function moveScreenOff this first line.
| | 02:40 | I'll just do two forward
slashes to add a comment.
| | 02:43 | So basically "Move the screen off."
| | 02:47 | That's what this line does.
| | 02:50 | Right in here, this is where we
establish the gameState, STAY_INIT_GAME. Okay.
| | 02:59 | Not only that, but this trace
statement is going to give me, in the Output
| | 03:05 | panel, this word STAY_INIT_GAME.
| | 03:08 | Trace statement will appear in the Output panel.
| | 03:11 | And then, lastly for this, we are to go
ahead and fire off the gameLoop function
| | 03:21 | at the frame rate of the movie.
| | 03:25 | This is important because this is going to
keep track of what gameState we are in, okay.
| | 03:31 | At the frame rate of the movie, that
might be something interesting to check out,
| | 03:34 | so let's go ahead and take a look at it.
| | 03:36 | I'll minimize the Actions panel,
and I'll just click on the background, right
| | 03:40 | here for my stage, so my document is selected.
| | 03:44 | And notice in my Properties panel
frames per second, 24. So the gameLoop would
| | 03:49 | fire off 24 frames per second, okay.
| | 03:53 | That's quite a bit, and I am going to
seeing a lot of these trace statements,
| | 03:55 | so I really want to take that down to 1.
| | 03:58 | Okay, so just for testing purposes, I
want to change the frames per second to
| | 04:03 | 1 frame per second.
| | 04:05 | So at that rate, this function is
going to get called 1 frame per second.
| | 04:10 | So let's go ahead and scroll down a
little further and take a look at gameLoop.
| | 04:15 | Okay, for this gameLoop function, it's
basically going to keep track of all of
| | 04:21 | the games state the user is in, okay.
So if they're in the STATE_INIT_GAME, if
| | 04:28 | gameState is set to STATE_INIT_GAME,
fire off this function. If it's set to
| | 04:35 | START_PLAYER, fire off the
START_PLAYER player function.
| | 04:37 | PLAY_GAME, fire off that function. STATE_
END_GAME, then fire off the endGame function.
| | 04:44 | So it's constantly checking
to see what state you're in.
| | 04:48 | If I scroll down a little further, I
should see all of these functions down
| | 04:53 | below, so let's take a look at initGame.
| | 04:56 | So when they click the Start button, it fires
off this initGame, and right in here, this
| | 05:01 | is where we set up all
the graphics and everything.
| | 05:08 | Not only that, once they're all set up, we
can change the gameState to START_PLAYER.
| | 05:15 | Okay. Trace gameState, its going to just
show me these words in the Output panel.
| | 05:21 | But then next up, with that set to
START_PLAYER, it's going to fire off this
| | 05:26 | function startPlayer, so this is
where we basically create the player that
| | 05:31 | you're going to control.
| | 05:32 | Okay, that's going to go right in here.
| | 05:34 | Once he is set up, STATE_PLAY_GAME will
show up in the Output panel, and then it
| | 05:41 | will fire off this function called the playGame.
| | 05:45 | And right in here, this is
basically where you set up the enemies,
| | 05:53 | explosions, et cetera.
| | 05:56 | So there is a quite a few thing that
are going to go right in here, so there
| | 05:59 | might be multiple function calls in here.
| | 06:03 | As I scroll down, makeEnemies,
we should see this appear.
| | 06:07 | testForEnd right in here, this is
where basically "Check to see how many lives
| | 06:20 | the user has etc." some other
things. Check their level. All of that.
| | 06:26 | But again, you can check that and all
we're doing here is we are going to set
| | 06:30 | the gameState to STATE_INIT_GAME,
which in turn is going to go ahead and
| | 06:35 | initialize this function, which is
going to remove the game, which is going to
| | 06:39 | appear this trace statement.
| | 06:40 | It's going to turn on the endScreen
and then go ahead and show the results.
| | 06:47 | So if I scroll up, testForEnd fires
off of this and just basically puts
| | 06:54 | everything in place at the
closing screen, all of that good stuff.
| | 06:57 | All right, so that's the
basic structure for this game.
| | 07:01 | Notice right here everything is
really powered by this gameStates function,
| | 07:05 | which controls all of these other
functions that do various things.
| | 07:10 | And since I've dropped my frames per
second down to 1 frame per second, we
| | 07:14 | should see various statements in our
Output panel, so I am going to close
| | 07:18 | that Actions panel.
| | 07:20 | I am going to just go ahead and increase
the size of this panel because right in
| | 07:24 | here, in my Output panel, I am going
to see all of these trace statements.
| | 07:27 | So I am going to go to Control > Test Movie.
| | 07:29 | I am going to test it in Flash, and we'll
see this animation go slow because it's
| | 07:36 | only going 1 frame per second.
| | 07:38 | That's fine. But watch what happens if I
click on the Play button, and we'll just
| | 07:41 | keep an eye out for my Output panel.
| | 07:44 | Click Play. There we are.
| | 07:51 | So it initializes the game,
| | 07:52 | it starts the player, play the game
so it can set up all of the enemies, into
| | 07:57 | the game, and then remove the
various things and show the results.
| | 08:02 | So that's the basic game
structure that's set up.
| | 08:05 | I'd say it's looking pretty good.
| | 08:07 | It's really just a matter of
populating all of these functions with various
| | 08:11 | things, and one of the first things
is going to be to make sure we set up
| | 08:15 | our screen appropriately so our
content fits appropriate regardless of what
| | 08:21 | size your screen is.
| | Collapse this transcript |
| Adding code snippets| 00:01 | One thing that will really help in
development of any project in Flash will be
| | 00:05 | to use the Code Snippets panel.
| | 00:07 | If you go to Window, open up Code Snippets,
| | 00:10 | notice that there are already these
folders filled with all these great Action-
| | 00:15 | Script code snippets that you can use
in your project. And for this title and
| | 00:20 | this game, what I'm going to do is I am
going to go ahead and load in some code
| | 00:25 | snippets that I already have prepared.
| | 00:28 | And this Code Snippet file is
available for free on the lynda.com web site,
| | 00:34 | associated with this course.
| | 00:35 | So if you select the flyout menu,
go to Import Code Snippets XML.
| | 00:42 | And inside of the Assets folder,
there's a Code Snippets folder, and just
| | 00:47 | select MobileGame.xml.
| | 00:50 | So with that file selected, click Open, and
you can see that it loads in this new
| | 00:56 | folder called Mobile Game, and
it's filled with code snippets.
| | 01:01 | Very powerful, and I can add any one of
these easily, just by double-clicking on it.
| | 01:07 | As I do that, it adds that code
snippet to the Actions layer in my Timeline.
| | 01:14 | Okay, so I have just added
this ActionScript code snippet.
| | 01:17 | I'll just delete that because,
again, I don't need it right now.
| | 01:20 | But really using the Code Snippets panel
it's as simple as adding the code snippet
| | 01:25 | and customizing it specifically for your use.
| | 01:29 | But I'd say Flash Professional CS5 is
all set up, and I am actually to further
| | 01:34 | the development of this game.
| | Collapse this transcript |
|
|
3. Basic Game MovementAnimating the intro screen| 00:00 | Movement in animation and games is
often actually done with ActionScript
| | 00:05 | because ActionScript allows for
flexibility over the Timeline alone.
| | 00:11 | I'm going to show you exactly what I'm
talking about, because what I want to do
| | 00:14 | is I want to animate this intro screen out.
| | 00:18 | In fact, I want it to move over to the
left-hand side when you click on the Start button.
| | 00:24 | I also want to do the same
thing for this end screen.
| | 00:28 | So again, I want to create some
animation using ActionScript, and I want to
| | 00:32 | animate both of these things here.
| | 00:34 | So let's just go ahead and undo that
move. All right. And again, I'm going to
| | 00:40 | animate the intro screen, and I'm going
to start off by using some code snippets.
| | 00:46 | So in the previous movie, I talked
about how to add to this Mobile Game folder,
| | 00:52 | and I'm going to select Animate with
ActionScript. And when I double-click on it,
| | 00:57 | it will add that code to my Actions
panel on that first frame right there, so
| | 01:03 | I'll just double-click on
it and it adds that code.
| | 01:07 | Okay, so the first thing I have here are
the import statements, okay, so I need
| | 01:12 | these import statements in order for
this code to work down here, because this
| | 01:18 | code down here references these
various classes, and that's what these are,
| | 01:23 | classes and packages. So you can see TweenEvent.
| | 01:26 | Well, I'm using that tween event right here.
| | 01:30 | So I need these three lines, so I will
just take them three and I'll cut them
| | 01:34 | and I'll scroll up to the top,
because I want to make sure those import
| | 01:38 | statements are at the top and the code
is there before I start to actually use
| | 01:42 | it, because this Flash
ActionScript code executes from the top down.
| | 01:48 | So lets scroll down, and again down here
at the bottom, I want to take this code
| | 01:53 | and I want to cut it as well and put it
in the appropriate area. And I'm going to
| | 01:59 | scroll up. About line 18
you'll see this introScreen.
| | 02:03 | When you click on that Play button, it
fires off as clickAway, which then in turn
| | 02:09 | fires off this moveScreenOff
function, which is right here.
| | 02:13 | So what happens right now is it just
moves the screen's X position. It makes it
| | 02:20 | equal to the screen's width,
and it multiplies it minus one.
| | 02:25 | So what this does is it basically
figures out the screen width, takes the screen
| | 02:32 | width and makes it a negative number.
| | 02:38 | So that would mean if it's normally
say 800 pixels wide that number in
| | 02:43 | there will be minus, or a
negative, 800. That's what this does okay.
| | 02:49 | So that's the current
functionality, and this is pretty fancy.
| | 02:52 | I actually want to use that in a second, okay.
| | 02:54 | But again, below that right in here,
I'll just paste in that code snippet that I
| | 03:02 | added earlier, and I will
scroll down a little bit.
| | 03:05 | Again, right in here for this intro
tween I have this introTween variable, and it
| | 03:13 | creates this new tween. And the first
thing you needed to do is define what will
| | 03:18 | be animated, and in this case I
wanted to be the introScreen.
| | 03:23 | So the introScreen is actually a
variable that gets passed in, and inside of
| | 03:30 | this moveScreenOff, it's actually known
as screen, so whatever gets passed into
| | 03:34 | this function it references back to
that name. So all I really need right in
| | 03:39 | here is not introScreen.
| | 03:43 | I just need screen okay, because I'm going to
use this movieScreenOff function a couple of times.
| | 03:51 | So again screen refers to introScreen.
It's going to move its X position. That
| | 03:56 | could be Y position.
| | 03:57 | It could be its size.
| | 03:59 | It could be its alpha or its
transparency, if you will. But I want to move it
| | 04:04 | to the left and then right.
| | 04:05 | Okay, so that's the property I'm going to move.
| | 04:07 | This is how I'm going to move it, so
it's going to move it sort of in a strong
| | 04:11 | motion from the right to the left.
| | 04:14 | Okay, there's bounce.
| | 04:14 | There is also elastic that I can use.
| | 04:17 | Next step, right here this is its
starting position, its ending position, and then
| | 04:25 | numbers in seconds that that
transition will take place.
| | 04:29 | So that's how the tween class works, okay.
| | 04:33 | And for it's start position, well, I
don't want it to start at zero, because,
| | 04:37 | quite frankly, the screen isn't at zero.
| | 04:39 | I want it to start from wherever the
screen is, so I can type in screen.x, so
| | 04:46 | wherever it is, start there and then
move it to, not to a thousand, because
| | 04:50 | that's going to move it to the right, what I
want to do is I want to take this right here.
| | 04:55 | I want to take what is the equivalent
of minus 800, or whatever the size of that
| | 05:01 | item is, and that's where I want the ending
position to these. So I'll cut that and
| | 05:07 | paste that right in there.
| | 05:09 | In fact, I don't even need
this line right there anymore.
| | 05:14 | Okay, so its starting
position is wherever it is.
| | 05:17 | Its ending position is its width in a
negative number. So that's what this does.
| | 05:22 | It's going to happen over the course
of one second. True means you're setting
| | 05:26 | the interval to seconds okay, and what
this means is it doesn't matter what the
| | 05:32 | frames per second of the Timeline is.
| | 05:35 | It doesn't matter. It's going to play and
get it from point A to point B over the
| | 05:40 | course of one second,
regardless of the frames per second.
| | 05:43 | But again, what I want to do--and I'm
just going to pin this code, so that code
| | 05:48 | doesn't moves because I want to keep it
up--but I do want to change the frames
| | 05:51 | per second to 24, okay.
| | 05:55 | So that's what I want to happen.
Everything on the timeline is going to play 24
| | 05:59 | frames per second. This is just going
to get there in one second. And after
| | 06:04 | that's done, when that motion has finished,
then go ahead and fire off this tweenFinish.
| | 06:16 | Okay, so for the introTween right here, on
motion_finish go ahead ahead fire off this function.
| | 06:23 | Well, what do I want to
happen during that time?
| | 06:25 | Let me scroll down, because that's when
I want to initialize the game, throw in a
| | 06:30 | trace statement and add that intro frame.
| | 06:33 | So I'll cut all of that code and move
that right into that function right there.
| | 06:39 | All right, so far so good.
| | 06:41 | In fact, the last thing I'm going to
do is I'm going hit this Auto Format
| | 06:44 | button, just so it formats and indents
all my code. I can see that this function
| | 06:49 | is nice and neat now, and
I'd say this is ready to go.
| | 06:53 | Okay, so again I've cleaned up this
moveScreenOff function. So whether it's the
| | 06:59 | introScreen or something else, it's
going to animates it using this Tween class.
| | 07:05 | But I'm using this
moveScreenOff in another place.
| | 07:08 | In fact, clear down at the bottom,
right here, line 132, I'm calling that same
| | 07:18 | moveScreenOff. And in this case it's
going to move off the endScreen. And that's
| | 07:25 | the power of ActionScript animation is
here I'm able to also move the endScreen
| | 07:30 | as well as the introScreen, all from
within one function using the Tween class.
| | 07:36 | All right, so let just do a test movie.
| | 07:42 | There it is. We see that Timeline
animation. I'm going to click Play. We'll see
| | 07:46 | it slide off to the left, and again it
goes through the game, and then we have
| | 07:53 | this high score screen.
| | 07:55 | If I click Play Again, it's going to animate
this off the screen as well, just like that.
| | 08:00 | So two animations done pretty easily by
using the Tween class as well as the on-
| | 08:07 | motion finish. It really gives me a
nice effect, and it also makes it reusable.
| | Collapse this transcript |
| Moving the player| 00:00 | The foundation of pretty much any game
is going to be how the player moves, and
| | 00:06 | in this case, what I want to do is I
want the player to move from left to right,
| | 00:11 | the X position, based on the mouse position.
| | 00:15 | So again, I'm going to go ahead and
move this player spaceship to the left and
| | 00:19 | right based on the mouse position.
But the first thing I need to do is I'm going
| | 00:23 | to dynamically add this player to the
stage when it's time to play the game,
| | 00:29 | okay, and I'm going to use
code snippets to do this.
| | 00:33 | So with the Code Snippets panel
opened, I'm going to go down to Add from
| | 00:38 | Library, because I want to add that
player from the library, and I'll just
| | 00:42 | double-click that code snippet and it
adds it into my Actions frame1 is where it
| | 00:50 | puts it. And let's go ahead and take a
look at this code, because currently it
| | 00:54 | defines a variable, because I need to
give this a variable name and make sure
| | 01:00 | Flash knows that it's a MovieClip.
| | 01:02 | Okay, so right up here, I'm
just going to call this player.
| | 01:05 | And where do all my variables go?
| | 01:08 | Well, they go near at the top, so I'm
going to cut out that variable, scroll up
| | 01:12 | to the top. It goes to the top of
my Actions panel, right here.
| | 01:18 | So this player variable is a MovieClip,
so I'm telling Flash that's what it is,
| | 01:25 | and that's how it's going to treat it.
| | 01:27 | Next up, it says in the library set a
movieclip linkage property to Player, okay.
| | 01:31 | So I'm just going to go ahead and pin
this code--again, make sure that code is
| | 01:35 | pinned so it doesn't move--and I'm
going to go over to my Properties panel, and
| | 01:40 | I'm going to select the Library tab, and
you can see that the player MovieClip is
| | 01:45 | selected and its linkage property is
Player, okay capital P. So that's what I'm
| | 01:50 | referencing is that name right there, okay?
| | 01:53 | So again, back in my code it says,
new Player, capital P, those names will
| | 01:58 | match up and create the
instance based on that library item.
| | 02:05 | It's the equivalent of just taking that
MovieClip and dragging it onto the stage.
| | 02:10 | So player = new Player().
| | 02:12 | Well, let's go ahead and move this into
place, because when do we want this to happen?
| | 02:16 | Well, we want that to happen
when the game first starts.
| | 02:20 | So I'm going to cut this line of code,
and I'm going to scroll up, and within
| | 02:29 | initialize game, the initGame, I'm
just going to hit Enter, hit Tab, and paste
| | 02:34 | in that right there.
| | 02:35 | So right here, that's what's happening:
'Pulling in the Player from the library'.
| | 02:46 | So that gets initialized. The player is
going to appear on the stage, but right
| | 02:51 | in here, this is what we need to
create the various player properties, and
| | 02:56 | various things that the player can do.
| | 02:58 | Okay, so start player.
| | 02:59 | We want to really start its movement.
| | 03:02 | So let's scroll down.
| | 03:03 | That's where I'm going to add these two lines.
| | 03:06 | I'm going to cut them.
| | 03:08 | I'll just delete those lines as well.
But again, those last two lines are going
| | 03:14 | to go right in here.
| | 03:16 | So create the player and the
properties is what's going on right in here.
| | 03:20 | I'll paste those lines in, hit Tab,
and let's go ahead and review this code.
| | 03:26 | I'll expand it out a little more.
| | 03:28 | Okay, we're creating the player, so the
instance name here, well, that's player.
| | 03:32 | Okay, so again, it was created right
here, and then I'm setting the player's Y
| | 03:38 | position, so up and down where it is
vertically. It's going to make it equal to
| | 03:44 | the stage height, so if I make it equal
to the stage height, it's actually going
| | 03:48 | to push it off the stage, so I need to
make it equal to the stage's height minus
| | 03:53 | the player's height.
| | 03:56 | So again, if you take a look at the
Library panel, this dot right here, I need to
| | 04:03 | take in account of the height of this
graphic. So I need to subtract to that
| | 04:08 | from the player height, and it basically
pushes it up into view. So that's perfect.
| | 04:13 | It dynamically gets added, and sure enough,
addChild, what do we want to add? The player.
| | 04:20 | So this is technically where the player appears.
| | 04:23 | You can set various properties before
you actually see the player, but this is
| | 04:28 | where the player actually appears.
| | 04:29 | Okay, so the next thing we need to
do is we want this player to move,
| | 04:33 | so let's go ahead and add some
motion based on the mouse position.
| | 04:39 | So under the Mobile Game folder in my
Code Snippets panel, Move using the Mouse.
| | 04:44 | That's exactly what I want to do.
| | 04:45 | I'll double-click on that.
| | 04:48 | It adds this Enter_Frame right here, okay.
| | 04:54 | So I'm just going to go ahead and cut
this, and I'm going to move it up to into
| | 04:58 | position, right underneath Start_Player
right in here. Okay, so at about line 88,
| | 05:05 | I'm going to paste that in, okay.
| | 05:07 | But I don't want this to just start
firing off immediately, because this player
| | 05:12 | hasn't been added yet using addChild.
| | 05:15 | So I actually want to take this Enter_
Frame EventLlistener and I need to move it
| | 05:19 | up into here, because this is where I
define the properties, and this is where it
| | 05:24 | gets added to the stage, and then
he's going to start moving using this
| | 05:29 | movePlayer function.
| | 05:31 | So right down here, for this instance
name here, again, we're using the player,
| | 05:37 | move its X Position based on the stage's
mouseX position, so as I move back and
| | 05:43 | forth, the player is going to drop into place.
| | 05:46 | Now I am talking about of course a
mobile game, and again, if the user touches
| | 05:51 | the screen, that's considered a mouse position.
| | 05:54 | So as you can hear that mouse X,
again it'll work on mobile devices.
| | 06:00 | Next up, we set up a couple boundaries,
so we need to make sure that it doesn't
| | 06:06 | go off the right or left side, and sure
enough, right in here, if the player's X
| | 06:14 | position is less than zero--
and I'll just copy this name--
| | 06:20 | then make its X position equal to zero.
So keep it from going off the left-hand
| | 06:24 | side. Otherwise, if the player's X
position is greater than the stageWidth minus
| | 06:32 | the player.width--so again, it's off to
the right-hand side--make sure you stop
| | 06:39 | it accordingly as well.
| | 06:41 | Make this player's X position equal to
the stageWidth minus the player.width.
| | 06:47 | So oftentimes these two will be the
same. You're doing a check to see if it's
| | 06:51 | going beyond a certain point and then
you're making sure you stop it at that point.
| | 06:56 | All right, with that in place, we'll just
do one more quick change, and we'll go
| | 07:03 | ahead and see this player move,
and that last change is basically going to be
| | 07:07 | commenting out some code.
| | 07:09 | So I'm going to scroll down, this gameState,
STATE_END_GAME, well, I don't want to
| | 07:17 | game to end, so I'm just going to
comment that out by putting two forward
| | 07:20 | slashes in front of it, okay.
| | 07:22 | So now we're going to get the
opportunity to move around that player, so let's
| | 07:26 | go to Control > Test Movie > Test.
| | 07:28 | There is our animation.
| | 07:32 | We'll click Play, and there is our player.
| | 07:36 | We can see it move with the mouse.
As the mouse moves around, we can see that player move.
| | 07:42 | I'm going to try to go off the left-hand side,
and you can see it stop. It stops right there.
| | 07:48 | Let's try to go off the right-hand side.
| | 07:50 | You can see it stopped right there as well.
| | 07:52 | A little bit of overlap, but again, I can
just adjust this graphic, and it will be fine.
| | 07:56 | This is how basic game movement can be
done. Based on the mouse position, it's
| | 08:01 | really just a matter of defining or
getting that Mouse X position in this case,
| | 08:06 | and making sure your player is
equal to that Mouse X position.
| | Collapse this transcript |
| Adding enemies| 00:00 | The next step in this game is what I
want to do is I want to add multiple
| | 00:04 | enemies to the stage.
| | 00:06 | This enemy movie clip happens to
be this flying saucer right here.
| | 00:11 | So I want to add it to
the stage many times, okay.
| | 00:14 | So again, that's what I want to add,
and I am going to add them using the
| | 00:18 | Code Snippets panel.
| | 00:20 | And again, I've added this Mobile Game
folder earlier. That's in the code snippets
| | 00:25 | movie is when I added it.
| | 00:27 | And in order to add a code snippets,
I'll just double-click on it. Create many
| | 00:31 | enemies is what I want to do which
normally, fundamentally I am against, but in
| | 00:37 | this case, I think it's okay.
| | 00:39 | All right, so the first thing that I am
going to do is create an enemies array okay.
| | 00:46 | So an array is basically a big
box that can hold many things.
| | 00:54 | That's what an array is. Unlike a
variable that just holds one thing, an array
| | 00:58 | can hold plenty of things.
That's why it's called enemies.
| | 01:02 | Okay, well what do we do with those variables?
| | 01:05 | Well, we take them and I'll cut this
variable, and all I need to do is just
| | 01:11 | move it up near the top,
| | 01:13 | okay, because I want to make sure
all of my variables are together.
| | 01:16 | So I'm telling Flash, "Hey, you know what, enemies
is an Array. Treat it as such." Scroll back down.
| | 01:24 | Well, where do we create this array?
| | 01:26 | Well, I wanted to happen
when the game initializes.
| | 01:30 | So I'll cut those two lines, including
the comment, and I want to find out where
| | 01:35 | the game initializes.
| | 01:37 | Scroll up. There we are. Starting at
around line 67, this is our initGame where the
| | 01:44 | players created. Just below that is
where I'll paste it, and here is where the
| | 01:52 | enemies array is created.
| | 01:55 | So that array is created, and then I
want to go ahead and start adding all of
| | 01:59 | those enemies to that array
when the game starts to play.
| | 02:05 | Okay, so right down in here, this
makeEnemies is what I want to get rid of
| | 02:11 | because, again, I've added that
function down at the bottom.
| | 02:14 | So right down here, I want to take
this function, I want to cut it scroll up.
| | 02:21 | This is basically a skeleton of
function. Nothing's really in it, other than that
| | 02:24 | trace statement, and I'll
paste it right in there.
| | 02:28 | Now surprisingly, it's actually got to go
okay, but let's just kind of review it.
| | 02:32 | Again, when the playGame function is
being called makeEnemies, that function is
| | 02:38 | being called and all of these
various tempEnemies are created, okay.
| | 02:43 | So I'm creating this variable called
tempEnemy. It's a MovieClip. And what it does
| | 02:48 | is it grabs the Enemy from the library.
| | 02:51 | So right over here if I look in my
library, Linkage, capital E for Enemy, grabs
| | 02:58 | that movie clip, and it
creates this tempEnemy from it.
| | 03:03 | And what it does is it gives it a
speed = 3, because I actually might want to
| | 03:08 | control this later on. Maybe as the
levels go on, as you get further in the game,
| | 03:12 | maybe the enemies get faster.
| | 03:15 | The tempEnemies x position is = 400 and then go
ahead and add that enemy to the stage okay.
| | 03:24 | Not only that, but go ahead and push
that enemy into that array as well.
| | 03:29 | So take all those enemies, as you add
them to the stage, you know what, put them
| | 03:33 | inside of that big box
known as the enemies array.
| | 03:36 | So that's what's going on.
Okay, now I can run this.
| | 03:39 | In fact, what I can do is I can go
ahead and add a trace statement, and right in
| | 03:46 | here, I can just go ahead and
put in, in quotes tempEnemy.
| | 03:52 | So we'll just see this print out, and we
will see one enemy appear, but they're
| | 03:56 | all going to start being stacked one on
top of the next at the X position = 400.
| | 04:02 | So let's just see what this looks like.
As I test this out, it's not going to be
| | 04:06 | anything too exciting, because as I hit
Play, so I didn't change the Y position,
| | 04:12 | but it starts stacking them up right here, okay.
| | 04:16 | And you could see right in here it
says tempEnemy many different times.
| | 04:20 | Well, it's created all of those various enemies.
It's just it's puts them all in one position.
| | 04:25 | So let's control that a little more, okay?
| | 04:27 | Because I'd like to do is I would like
to say, for instance, move those enemies so
| | 04:32 | they appear at a random point along the
X axis, so from the left to the right.
| | 04:39 | So instead of 400, let's go
ahead and enter in Math.random.
| | 04:44 | As I type in rand, I can see that
selected ,I can hit Enter, have the closing
| | 04:51 | parentheses, and what that will do is that
will get a random number between zero and one.
| | 04:59 | Okay, so that's what Math.random does.
| | 05:01 | Okay, so I'll just copy this and add
that as a note, a random from 0 to 1,
| | 05:13 | which isn't a very big number, okay. So it's
going to be on the 0 pixel or the 1 pixel.
| | 05:18 | So what I do is I want to
multiply that by, say for instance, 800.
| | 05:23 | All right, now what's going to happen
is it's going to get a random number
| | 05:29 | between 0 and 800 is what that will do.
| | 05:33 | That great, because it's going to
spread them all out, okay, but this random
| | 05:38 | number actually gets
anything from 0.0 to 1.0.
| | 05:43 | So you could end up with something like
0.235, and those numbers I don't really
| | 05:50 | want. I want to round them, so Math.round.
I want to round the number either up or
| | 05:58 | down depending on whichever is closest.
| | 06:02 | Okay, so I want these
tempEnemies to appear on whole pixels.
| | 06:07 | So it's going to get a random number,
and in this case it just rounds it to the
| | 06:11 | highest whole number is what that does.
| | 06:13 | All right, this is more like it.
I think this is going to work out pretty well.
| | 06:17 | Again, it's still going to put it across
the X axis. The Y position isn't going to
| | 06:22 | change, and that's fine.
| | 06:24 | Let's test this out, and let's just
see what we're up against. Click Play.
| | 06:30 | You could see them all
being added right up there.
| | 06:33 | So it gets kind of intimidating for
our player as we see all these spaceships
| | 06:37 | stack up. But obviously you can see
that it's working, and again, the next step
| | 06:42 | would be to actually start moving all
of these various enemies down the screen.
| | Collapse this transcript |
| Adding movement| 00:00 | So let's take a look to see
where this project is at currently.
| | 00:04 | I want to go ahead and test this file.
We have our intro, and when I click Play,
| | 00:12 | you'll see lots of alien ships start
to gather at the top of the screen, which
| | 00:17 | does look intimidating. But at this
point, you know what, I want them to basically
| | 00:22 | attack, so I want these
ships to start moving downward.
| | 00:26 | And I'm going to do that by adding a code snippet.
| | 00:30 | So in the Code Snippets panel,
right down in here, Move Enemies.
| | 00:35 | Again, I want to move many different
things. I'm just kind of go ahead and
| | 00:38 | double-click on move enemies,
and it adds this code right here.
| | 00:43 | Now that is plural, so it's going to
move a lot of things, but let's take a look
| | 00:48 | at this specifics, okay.
| | 00:50 | Now, this is a complete sort of code
chunk, so you can use this in many different
| | 00:54 | projects, because quite frankly,
there is this reference to this array.
| | 00:58 | Well, I already have an enemies array,
but basically you need to make sure you
| | 01:03 | have an enemies array if you don't
already have one. You need to create it in
| | 01:08 | this case. I've already created that.
Did that in the previous movie.
| | 01:12 | Also, you want to create a
tempEnemy from the Enemy library as well.
| | 01:16 | So right over here, there is my enemy,
and that's been done already as well, so
| | 01:21 | I'll just remove it.
| | 01:22 | So it's basically two references to it
just tell you not to forget to do that,
| | 01:27 | because that's what's
being referenced right in here.
| | 01:31 | So for that enemies array, for however
many are in that box, if you will, go ahead
| | 01:37 | and loop through this for
loop that number of times.
| | 01:41 | This tempEnemy is going to be equal
to the enemies and whatever time it's
| | 01:47 | through, so it's going to loop
through this whole box each time.
| | 01:50 | TempEnemy just refers to each and every
item that comes through, but right here,
| | 01:54 | this is where most of the action
happens. It says "Move the tempEnemy down," so
| | 02:03 | that'd be its Y position "from its
current position" and then add to it plus,
| | 02:13 | basically, its speed.
| | 02:16 | Where does this speed come from?
| | 02:17 | Well, let's a take a look. As I
scroll up, right up in here, here is
| | 02:23 | this tempEnemy.speed.
| | 02:26 | And that's what I want to do.
I want to a reference this speed number,
| | 02:28 | which happens to be 3.
| | 02:30 | This will change sort of throughout
the game, but I do want to move up
| | 02:34 | this function now, okay.
| | 02:35 | So I am going to take this moveEnemies
function and the various comments, and I
| | 02:40 | am going to cut it, and I'll scroll up.
Right underneath makeEnemies, moveEnemies.
| | 02:49 | This is going to loop through the
contents of that enemies array and start
| | 02:54 | moving all of those items
down, based on the speed.
| | 02:58 | Okay, well how often is this being called?
| | 03:00 | Well, let's take a look.
| | 03:01 | For one, before I just wrap this up, I do
want to make sure that this has :void, okay.
| | 03:07 | So I don't want it to return
anything or anything like that. It's just a common
| | 03:11 | practice to add void there.
| | 03:13 | And right up here makeEnemies, once
they're made, I want to go ahead and
| | 03:19 | moveEnemies like that.
| | 03:22 | Okay, so that's when it's being called
is right in here within playGame, which
| | 03:26 | gets called plenty of times, okay.
| | 03:29 | So let's go ahead to see this in
action. This is actually pretty exciting.
| | 03:33 | So let's go to Control >
Test Movie. Let's test it out.
| | 03:37 | If I click Play, well, you should see
all of those enemies start to march down,
| | 03:43 | and here they come. Quite intimidating.
| | 03:46 | In fact, there is not much I can
do, especially since I can't fire.
| | 03:49 | So that works pretty darn good.
I really like how all of those enemies kind of
| | 03:53 | come down. But really my next step with
this is I want these enemies to sort
| | 03:58 | of move at, sort of a random pace
and kind of move from the left to the
| | 04:02 | right and even tilt a little bit as if they're
actually sort of coming through the atmosphere.
| | 04:07 | So that's the next step, but I'd say
this is a great place to start, and now I
| | 04:12 | can add individual movement
to each one of these as well.
| | Collapse this transcript |
| Adding chance and randomness| 00:01 | Let's take a look at where the game is at now.
| | 00:02 | I'm going to do that by just going
to do a test movie. I'll click Play.
| | 00:09 | Notice that really my spaceship doesn't
stand a chance against all of these UFOs.
| | 00:14 | There's absolutely no way.
| | 00:16 | So what I want to do is I want
to create an element of chance,
| | 00:20 | so maybe only a couple come down.
Maybe a little more. Maybe a little less.
| | 00:24 | It all just kind of depends.
| | 00:26 | Another thing I want to do is for the
little spaceships that come down, I want
| | 00:31 | them to come down kind of wobbly and a
little more random than they do now, as
| | 00:35 | opposed to just straight down.
| | 00:37 | Okay, so that's the goal, and what I'm
going to do in order to do this is I'm
| | 00:42 | going to go ahead and use this Mobile
Game folder, these code snippets, and I'm
| | 00:49 | going to select Random Chance
is the one I'm going to use.
| | 00:52 | Let's just double-click on that.
| | 00:55 | It adds it to my Actions frame and
right in here, notice that it establishes a
| | 01:01 | variable called level, which is a number.
| | 01:04 | All my variables need to go to at the
top, so I'll just cut that out and scroll
| | 01:10 | up to the top and paste that variable
in there, because depending on the level
| | 01:16 | will determine how many of
those little spaceships appear.
| | 01:20 | Okay, so level 1, where would I put this?
Well, I would want to put this where
| | 01:25 | the game initializes.
| | 01:27 | So, let's just go ahead and take a look
at that. So, I'll cut that and scroll up
| | 01:37 | right where I initialize the game.
| | 01:39 | Here we are, initialize the game
between lines 60 and 70.
| | 01:45 | It's where I create my players.
| | 01:48 | And sure enough, right in here--
| | 01:50 | in fact, I'll just put it right
above those other items, level 1.
| | 01:56 | Okay, so we're initially going to set it
to level 1, and it's going to create the
| | 02:00 | player, and it's going to create the
enemies. And when I create the enemies, I
| | 02:04 | want to drop this in, okay.
| | 02:07 | I'm going to drop in this code where my
enemies are created, so I'll cut that,
| | 02:11 | scroll on up, and right in here
where I create my enemies, that's actually
| | 02:19 | where I want to add a little
bit of an element of chance, okay.
| | 02:23 | So I'm just going to paste that in.
| | 02:26 | Okay, so I'm going to create this
new variable, and it's called Chance.
| | 02:29 | It is a number, and it's going to be
a random number between zero and 60.
| | 02:35 | That's my chance number.
| | 02:37 | And for that chance number, if it's
less than or equal to one plus the level,
| | 02:46 | then go ahead and do something.
| | 02:48 | In this case, what I want to happen, that
do something happens to be create an Enemy.
| | 02:55 | There we are.
| | 02:56 | So again, open curly brace encapsulates
creating an enemy and then that closing
| | 03:04 | curly brace, closes it.
| | 03:05 | So, I'm going to click this Auto Format button.
| | 03:08 | We can see how it nests everything together.
| | 03:10 | All right, so again, right in here,
pick a number between zero and 60, and then
| | 03:21 | right in here, if the number is less
than or equal to one plus the level, so
| | 03:35 | that could be two on up, okay.
| | 03:38 | So it's the equivalent, at least in this
first case, of typing in 2 right there.
| | 03:44 | It may seem like a pretty small number,
but keep in mind that this make enemies
| | 03:48 | function gets fired off 24
times every second, okay.
| | 03:53 | So sure, it might be a small chance that
this happens, but that's going to mean
| | 03:58 | less enemies that are generated, and
also keep in mind that it's going to still
| | 04:03 | fire off 24 times every second.
| | 04:08 | Okay, so that's all I need to do.
| | 04:09 | Just if you meet these requirements,
go ahead and create an enemy, so let's
| | 04:13 | run this. Click Play.
| | 04:19 | That's more like it.
| | 04:21 | This is manageable;
I can probably shoot them down a lot easier.
| | 04:25 | But now that they are less of them, I
noticed they're pretty straightforward.
| | 04:28 | They're coming straight down, and really
I want to make them wobble a little bit.
| | 04:32 | So let's go ahead and add some
additional functionality to them.
| | 04:36 | For the move enemies, I want to add a
little bit more randomness than what I
| | 04:40 | have right in here, okay.
| | 04:43 | So let's go ahead and take a look at
the Code Snippets panel, because I want to
| | 04:50 | have some random rotation X and even Y movement.
| | 04:54 | So I'm going to double-click on that.
| | 04:57 | It adds that code down at the bottom,
and I'm going to go ahead and move this
| | 05:04 | code right into place. So I'll cut
it and then move it right into move
| | 05:12 | Enemies right here, so just paste it on in
there, and then I'll click the Auto Format button.
| | 05:21 | All right, let's go ahead and take a
look at this now, because first off, what
| | 05:24 | happens is it's automatically going
to rotate the enemy between 10 and 5
| | 05:33 | degrees. Technically those are
just going to be the numbers.
| | 05:39 | Okay, but it's just going to go ahead
and rotate it, and what is it rotating?
| | 05:42 | It's rotating the tempEnemy,
so I'll copy that and paste it in.
| | 05:45 | So go ahead and rotate it any random
number between 10 and 5. Rotate it that
| | 05:52 | direction. Make sure you round it,
so we land on a whole number.
| | 05:55 | Next up, find the rotation and move
the X position in that direction, okay.
| | 06:00 | So right in here, notice this looks
pretty complex, and let's face it, it
| | 06:04 | does look complex.
| | 06:05 | Let me just paste in tempEnemy, right
in here, for these instance names, and it
| | 06:10 | looks a little bit daunting.
| | 06:12 | But know that all that's really
going on here is this is a degree, so
| | 06:16 | it's getting this degree, whatever angle it's
at, and then it's converting that to radians.
| | 06:23 | Okay, so Flash uses radians, so
that's why I need to have math sign.
| | 06:27 | But this chunk of code right here, all
it does is return the angle in which I
| | 06:32 | want this enemy to travel, okay.
| | 06:35 | So let's not get too hung up on the
fact that there is some math in there.
| | 06:38 | That's what it's going to do.
| | 06:40 | It's going to start moving that
direction based on the rotation, and not only
| | 06:45 | that, it's going to move it that
tempEnemy speed, which is right up here as
| | 06:51 | well as within this area where
we actually make the enemy, okay.
| | 06:57 | So that's where that comes from.
| | 06:59 | We're going to go ahead and move its X
position based on the rotation. Not only
| | 07:03 | that, we're going to move its Y
position based on that rotation as well, and
| | 07:08 | I'll just paste in where it says
instance name here for all of those.
| | 07:13 | Okay, keep in mind that I still have
this tempEnemy Y, and I want to go ahead
| | 07:17 | and remove that line as well. So remove that.
| | 07:21 | This is my new movement, and that's
exactly what's going to take place.
| | 07:26 | In fact, the last thing I need to do is
just to make sure that it stays within bounds.
| | 07:33 | Okay, so if it's off the stage, move it
back onto the stage, whether it's on the
| | 07:38 | left or the right side,
and this would be the right side.
| | 07:43 | Just remove some of
these empty spaces like that.
| | 07:47 | I would say we're looking pretty good here.
| | 07:49 | In fact, I'll just click the Auto Format button.
| | 07:53 | It doesn't throw me any errors.
| | 07:55 | So let's go ahead and test this out.
Click Play, and there he is coming down.
| | 08:03 | There are all kind of
wobbliness, exactly what I want.
| | 08:06 | It kind of seems like they're attacking me.
| | 08:08 | I don't want to have any higher of a
number because they could start traveling
| | 08:12 | upwards if that's the case.
| | 08:14 | You can see some more are to kind of
traveling like upwards, which is fine, but
| | 08:18 | again, they're trying to attack.
| | 08:20 | So that's why I have that
number between 5 and 10;
| | 08:22 | that is the random number.
| | 08:24 | But this is manageable. It seems pretty fun.
| | 08:27 | I can always adjust the levels if I
want maybe less of these enemies to come
| | 08:31 | down, but it looks pretty good.
| | 08:33 | You can see how adding this element
of chance and the randomness can really
| | 08:38 | create some excitement for your game.
| | Collapse this transcript |
|
|
4. Advanced InteractivityAdding lasers| 00:00 | So let's go ahead and see
where this file's at currently.
| | 00:03 | I am just going to do a
test movie. We have our intro.
| | 00:07 | I'll click Play.
| | 00:09 | And as I get into the game, you can
see that I can move my character,
| | 00:13 | but I really can't destroy
any of these UFOs coming down.
| | 00:17 | So I want to go ahead and add some
lasers to my ship, and I want to have
| | 00:21 | those lasers animate up.
| | 00:23 | So those lasers are, of course, ultimately
going to destroy these UFOs coming down.
| | 00:28 | All right! So I am going to do
that by using code snippets.
| | 00:33 | So I do have this Mobile Game
folder in my Code Snippets panel.
| | 00:38 | And just reference the Code
Snippets movie, if you don't have this.
| | 00:42 | And I am going to add the Add
Timer because that's what I want to do;
| | 00:46 | I want to shoot this laser right
over here at a certain interval.
| | 00:50 | So I am going to add a timer.
| | 00:51 | So I am just going to double-click on that.
| | 00:54 | It adds that code to my Actions
panel, right at the bottom actually.
| | 01:00 | And let's take a look at this
because there's an array that's created
| | 01:04 | that's really going to hold all of the lasers.
| | 01:06 | Well, this first variable,
| | 01:08 | I want to put it where
all my other variables are.
| | 01:10 | So I am going to cut it, and I am going to
move it clear up to the top. Ok, right up here.
| | 01:16 | This is where I want to put my Lasers:Array.
| | 01:20 | So I am telling Flash that that
lasers is an array and treat it accordingly.
| | 01:27 | Right here, this Lasers equals new Array,
| | 01:29 | well, that's actually
where the array gets created.
| | 01:33 | So I am going to cut that, including
the comment, and I am going to move that
| | 01:37 | into where the game is initialized. All right!
| | 01:40 | So let's move this on up right
in here, this initGame function
| | 01:47 | right in here. We can see the
player's created, enemies are created,
| | 01:50 | and right in there I can just go ahead
and paste in lasers, and I'll just hit the
| | 01:55 | Tab key to move that in.
| | 01:57 | So amongst these other
items being created, this Lasers:
| | 02:00 | Array will be created as well.
| | 02:02 | Now, let's take a look at the timer.
| | 02:03 | So here's the timer.
| | 02:05 | And since this timer is going to be dealing
with these lasers that come from our player,
| | 02:11 | well, I want to go ahead and take that and
I want to move it up into place as well.
| | 02:15 | So I am going to cut this,
all the rest of that code,
| | 02:18 | and I am going to move it up above the
enemies, above that playGame, right in here.
| | 02:24 | So you have moved player right in here.
| | 02:26 | Well just below that, about
line 113, and I'll paste that in.
| | 02:31 | Some now let's take a look at this
code, because I do have this laserTimer
| | 02:36 | timer that is created.
| | 02:37 | So this is its specific name, and note
that it's going to ahead and execute a
| | 02:41 | function every half a second.
| | 02:44 | And that's what this 500 is.
| | 02:45 | It's actually milliseconds.
| | 02:47 | So, say for instance, if I wanted it
to fire every second, then that would
| | 02:52 | be 1,000 milliseconds.
| | 02:54 | But right now I'll just keep that as 500.
| | 02:56 | So every half a second it's going to go
ahead and add this timer, and it's going
| | 03:02 | to fire off this function
called the timerListener right here.
| | 03:06 | And this timerListener really
does all of the work. It says, you know what?
| | 03:10 | Let's go ahead and make a new movie
clip called tempLaser from our Laser
| | 03:16 | that's in our library.
| | 03:17 | So let's just make sure it's in there.
| | 03:20 | Move that off to the side. And sure
enough, in my library you can see Laser is the
| | 03:25 | linkage name of this item
right here, capital L.
| | 03:28 | That looks good.
| | 03:29 | So, it creates it from the library, and
it gives it an x and y position based on
| | 03:36 | the player's position.
| | 03:37 | So I am going to go ahead and pin my code--
press that pushpin--
| | 03:41 | so I can select this player.
| | 03:43 | OK, now let's review this, because
basically it's saying, you know what,
| | 03:47 | basically place the laser at the
tip of the player's ship. All right!
| | 03:54 | So it says it's going to place
it at the player's x-position.
| | 03:57 | If I just had that, it would put that
laser right at this crosshair right here.
| | 04:02 | I not only want it to get into that
position, but I want to take in account the
| | 04:06 | player's width, and I want to cut that in half.
| | 04:09 | And that will give me this point
right in the center right here.
| | 04:13 | So that's what this is.
| | 04:15 | Take the players width, cut it in half, and
make sure it gets added to this x-position.
| | 04:20 | Ultimately it ends up at right
there in the middle, which is perfect.
| | 04:23 | Place its y-position, so vertically
place it right on the tip right where
| | 04:28 | that ship is as well.
| | 04:29 | Give it a speed of 10, which we could
always change that later, and then also
| | 04:34 | go ahead and put it into
this lasers array as well.
| | 04:37 | So, just load up to that box full of lasers.
| | 04:40 | We'll need it later anyway.
| | 04:41 | But do add it to the stage,
and that's what addChild is.
| | 04:45 | So that creates the timer.
| | 04:47 | Well, in order to activate the
timer, I need this laserTimer start.
| | 04:52 | If I wanted to stop it, it
would be, you guessed it, stop.
| | 04:54 | I'll just undo that.
| | 04:57 | So when do I want to start this laser?
| | 04:59 | Well, I am going to cut this, and I
am going to move it up into where the
| | 05:05 | player is created. So right in here,
about line 88 it says startPlayer and
| | 05:10 | right in here addChild.
| | 05:11 | That's when the player gets added to the stage,
| | 05:13 | so right after it gets added to
the stage, start firing the laser.
| | 05:18 | So immediately after it's added,
start shooting that laser. All right! Great!
| | 05:21 | Let's go ahead and run this.
| | 05:25 | I'll do a test movie. Click Play.
Now they are just going to get attached,
| | 05:31 | so you can see them being attached
right next to the ship in their correct
| | 05:34 | position right at the tip.
| | 05:36 | That's perfect, okay so far, for what I am doing.
| | 05:39 | But now I need all of
these lasers to travel upwards.
| | 05:42 | Okay, so as they get attached to the stage,
I want them to move upwards. All right!
| | 05:47 | So let's go ahead and see some of that action.
| | 05:49 | And in order to do that, I am going to
go to my Code Snippets panel and I am
| | 05:54 | going to add Move Laser.
| | 05:55 | So I am going to double-click on Move Laser.
| | 05:58 | And it really is just a function.
| | 06:00 | It does say that there is a Lasers
array that is required, which I just
| | 06:04 | added that earlier.
| | 06:06 | And if there is a Lasers array,
basically there is going to be this function, and
| | 06:11 | it's going to go ahead and loop
through that array, and for each laser in the
| | 06:16 | array, which is known as i, it's
going to go ahead and move it up.
| | 06:20 | So that's what this says right here.
| | 06:22 | Okay. Move the laser up based
on the speed defined earlier,
| | 06:30 | the tempLaser speed.
| | 06:33 | So we go ahead and move
its y-position minus equals.
| | 06:36 | So whereever it currently is, go ahead
and start moving it up every time this
| | 06:41 | function is being called.
| | 06:42 | And then if the laser, say hits
the top, then I can go ahead and add in a
| | 06:47 | trace statement right in here,
within quotes, laser just hits the top.
| | 06:55 | So I'll deal with sort of removing it later.
| | 06:57 | But that's what I want to do.
| | 06:58 | In fact, I am going to ahead and take
this whole moveLaser function and I am
| | 07:02 | going to move it back up into position,
because I want it to be within the
| | 07:06 | context of the code that it's dealing
with, which is just beneath the laserTimer,
| | 07:11 | so about line 130.
| | 07:12 | Paste it in, and I would say
that's look pretty darn good.
| | 07:16 | The only thing I have left to do
is call this function moveLaser.
| | 07:21 | So I am just going to go ahead and select
that function name, and I am going to copy it.
| | 07:25 | And I am going to move down
right in here the playGame function.
| | 07:30 | While I am making the
enemies and moving the enemies,
| | 07:33 | well, let's just go ahead and paste that in,
move that laser as well, just like that.
| | 07:38 | So as long as that we are in this
playGame state, the laser is going to be
| | 07:43 | firing, or actually moving in this case, as
well as firing if you will with that timer.
| | 07:48 | So let's go ahead and test it. Click Play.
| | 07:52 | Sure enough, we can see them coming out of the
tip, going upwards, traveling off the stage.
| | 07:58 | Everything looks pretty good.
| | 07:59 | You could see laser hits the top and again
it's sort of displaying that over and over again.
| | 08:04 | So I would say that looks pretty darn good.
| | 08:06 | The next step now is to really
have more interaction between these
| | 08:11 | lasers and the UFOs.
| | Collapse this transcript |
| Detecting collisions| 00:00 | Essential to almost any game is going
to be collision detection, so determining
| | 00:05 | when items hit each other or if they go
off the screen--some sort of detection
| | 00:11 | to see where items are at
and then giving a result there.
| | 00:15 | In this case, I need to determine when
these UFOs hit the bottom, when they
| | 00:21 | hit my player, and then also when my lasers
hit the UFOs, otherwise known as tempEnemy.
| | 00:29 | So those are the different sort of
collision detections that I need to do.
| | 00:33 | All right, and what I am going to do
is I am going to go ahead and just have
| | 00:38 | some trace statements anytime some
thing gets hit. You can see I already have
| | 00:42 | some laser hits the top, so that's
a sort of collision detection that's
| | 00:46 | currently going on.
| | 00:47 | So let's just go into my Actions panel,
and as I scroll down, let's jump into my
| | 00:59 | player, the movePlayer.
| | 01:01 | We can see that. And in moveLaser, you
can see this trace("laser hits top").
| | 01:06 | Well, I really don't need this.
| | 01:08 | In fact, that's probably going to get in
the way, so I'm just going to delete it.
| | 01:10 | I already know it works; everything is fine.
| | 01:13 | Let's scroll down a little further. We can
see makeEnemies, then moveEnemies, and
| | 01:19 | there is already a little bit of
detection going on in here because I check
| | 01:23 | to see when the tempEnemy is sort of
on the sides and it sort of moves them
| | 01:27 | back into the playable area.
| | 01:30 | Well, I need to check to see if the
tempEnemy hits the bottom as well.
| | 01:37 | So if the tempEnemy is sort of beyond
the stage, so if its y-position is greater
| | 01:43 | than the stages stageHeight, just
like that, closing parentheses, two curly
| | 01:50 | braces, and anything within these
curly braces will go ahead and execute.
| | 01:55 | Here's where I can put a trace
statement. It says enemy scores.
| | 01:59 | So the enemy hits the bottom, then the enemy
scores, and that's what this statement does.
| | 02:05 | So I check for the bottom.
| | 02:07 | But I also need to check to see when
the enemy hits the player, and that's going
| | 02:12 | to be determined basically by
performing a Hit Test Object.
| | 02:18 | So right down here in the Mobile Game
folder, in my Code Snippets panel, Hit
| | 02:23 | Test Object is what I want to add, so I'll
double-click on that, and it adds this if statement.
| | 02:29 | So if the tempEnemy hits the player,
then do whatever you need to in here.
| | 02:35 | So I'm going to just take this, and I'm
going to cut it and move it back up to
| | 02:39 | where I was, which was right in here.
| | 02:42 | Now, I could add it right at about
line 207, like that, but really, I want to
| | 02:52 | condense this code a little better.
| | 02:54 | In fact, what I can do is within this
if statement right here, I can add two
| | 03:01 | pipes, two of these bars.
Again, this basically means "or."
| | 03:06 | So if the tempEnemy hits the bottom or
the tempEnemy hits the player, and I'll
| | 03:12 | just click and drag that with it selected,
| | 03:15 | I can drag that on in there.
| | 03:18 | If the tempEnemy hits the player,
then also give the enemy a score as well.
| | 03:22 | So that's basically combining two if
statements. And in fact, I can just remove
| | 03:26 | this if statement,
including those comments. Great!
| | 03:30 | That is actually going to work out just fine.
| | 03:33 | In fact, let's go ahead and
do a test movie. Click Play.
| | 03:40 | So it is sort of printing out in the
Output panel, STATE_PLAY_GAME and it's kind
| | 03:45 | of hard to see, but I actually can go
ahead and close that SWF file and check
| | 03:52 | out my Output panel and see where that's at.
| | 03:55 | In fact, what I am going to do is I am
just going to go ahead and click and drag
| | 03:58 | this Output panel over
here to the Library panel.
| | 04:02 | Now, I can scroll through this much easier.
| | 04:05 | You can see it says enemy scores.
| | 04:07 | So I did actually implement that correctly.
| | 04:10 | Everything looks good, but the enemy is
scoring plenty, and quite frankly, I need
| | 04:15 | to score as the player.
| | 04:16 | So that's the next step, but it gets
a little more tricky because I need to
| | 04:21 | determine when a laser hits the enemy, and
both of these are basically an array of items.
| | 04:28 | So I need to determine when one item
in an array hits another item in another
| | 04:33 | array, and I am going to do this by adding a
code snippet and adding Array Item Collisions.
| | 04:41 | So it gets a little more advanced,
but the concepts are still there, as you'll see.
| | 04:46 | So I've double-clicked on that.
| | 04:48 | We can see we have this function called
testCollisions, and it does check for the
| | 04:53 | collisions between items in an enemy's
array and a laser's array, and again those
| | 04:59 | are already created.
| | 05:01 | It is just with this function,
it actually checks for them.
| | 05:05 | So in here, in this function, it
creates two variables called tempEnemy and
| | 05:10 | tempLaser, and right in here, if I hit
Tab, I basically loop through the
| | 05:18 | enemies array, and every item in
that enemy's array becomes tempEnemy.
| | 05:25 | So it checks for all those items
in there, and now they are known as
| | 05:27 | tempEnemy, and it says hey!
| | 05:30 | Loop through that and with these
lasers, right in here, loop through the
| | 05:37 | laser's array like that, and for every
item in the laser's array, it is now
| | 05:43 | known as tempLaser.
| | 05:44 | So these are like the temporary names
of each one of those. And then from there,
| | 05:48 | I can determine when the
tempEnemy hits the tempLaser.
| | 05:54 | So I need to check for all the items in
the enemy's array and all the items in
| | 05:58 | the laser's array to determine when
the enemy hits the laser, and sure enough,
| | 06:04 | here's the trace statement, Laser hit tempEnemy.
| | 06:08 | And lastly, we have this break statement,
which just stops this whole loop from happening.
| | 06:14 | So these two words match up. Just
go ahead and stop this for loop.
| | 06:18 | So that's how you loop through two
arrays, and then you check to see when one
| | 06:23 | item hits another item.
| | 06:25 | Last thing I need to do is just move this up.
| | 06:27 | So I'll select all this code, and
I'll cut it and move it on up. Under
| | 06:33 | moveEnemies, again where I have that
hitTestObject, about line 210, I can paste that in.
| | 06:42 | All right, so that's in the right location.
testCollisions is in the right location.
| | 06:47 | I will copy this name because I need to
make sure this function gets called, and
| | 06:52 | I want this to get called with
everything else during the playGame function.
| | 06:57 | So as you're moving those lasers, just go
ahead and test for those collisions as well.
| | 07:02 | All right, so there it is.
| | 07:06 | Everything seems to be in place.
| | 07:08 | Let's just do a test movie, and again
we're just going to see some things
| | 07:12 | happened in the Output panel.
| | 07:14 | So I'll click Play.
| | 07:15 | We can see STATE_PLAY_GAME, and as I
start hitting those tempEnemies, the laser
| | 07:22 | hits them, then you see those trace statements.
| | 07:25 | Let me go ahead and close that
and take a look at the Output panel.
| | 07:29 | You can see the enemy scores plenty
as they hit the bottom, but you can see
| | 07:33 | right up in here, Laser hit tempEnemy.
| | 07:36 | So it is all actually working.
| | 07:38 | I performed a couple different hit tests,
not only with the position of items as
| | 07:42 | the UFOs come down when they collide
with the player, as well as when the laser
| | 07:47 | collides with the UFO,
which happened to be in arrays.
| | 07:51 | So the next step is to go ahead
and add some explosions when these
| | 07:55 | items collide.
| | Collapse this transcript |
| Adding explosions| 00:00 | Let's go ahead and take a look
at where this game currently is in
| | 00:04 | its development stage.
| | 00:06 | I'm going to click Play, and if I move
this SWF over a little bit, notice that
| | 00:11 | there is a couple of collisions going
on here, these lasers with these UFOs, and
| | 00:16 | we should see these trace statements appearing.
| | 00:19 | So I need to actually have an explosion
when these lasers hit the UFOs and when
| | 00:23 | these UFOs hit the bottom or hit my player.
| | 00:28 | So I need to attach this explosion
from the library in a particular position.
| | 00:34 | So let's go ahead and go to the Library
panel, because in the Library is
| | 00:39 | going to be this explosion movie clip.
| | 00:41 | I'll just double-click on it.
| | 00:43 | Notice it contains a couple
of frames of this explosion.
| | 00:47 | So this is what I want to attach to the
stage and then play, and then this last
| | 00:52 | frame is just a stop action so it
doesn't continually loop, but that's
| | 00:56 | basically what my explosion movie clip is.
| | 00:59 | I am going to go back to Scene 1, and in
this first frame of this Actions layer
| | 01:04 | is where I want to add a code snippet.
| | 01:05 | So I am going to open up my Code
Snippets panel. In the Mobile Game folder, right
| | 01:10 | down here is Make Explosion.
| | 01:12 | Please refer to the Code Snippets
movie if you don't have this. But all I am
| | 01:15 | going to do is just double-click on
Make Explosion, and it adds this code here.
| | 01:21 | So what happens is it
creates an array called explosions.
| | 01:25 | So here's the explosions array, and
then there's that function that's going to
| | 01:30 | deal with this array.
| | 01:31 | But the first thing I'm going to do
is I'm going to go ahead and take this
| | 01:34 | variable and I'm going to cut it, and
I'm going to move it up to the top of my
| | 01:39 | Actions panel. Right in here, just
beneath Lasers, I am going to go ahead and
| | 01:45 | paste in this variable explosions.
| | 01:47 | So now Flash knows that explosions is an array.
| | 01:51 | Next up, I want to go ahead and create
the array, and that's what this line does.
| | 01:56 | I am going to take that in the comment.
| | 01:57 | I am going to cut it, and I want to
create the array when the game starts.
| | 02:03 | So I'm going to scroll up toward the
top, and right in here, when the game
| | 02:11 | initializes, these other items are
created, and sure enough, just beneath Lasers,
| | 02:16 | that's where I want to
paste in my explosions array.
| | 02:19 | So I will hit Tab just to even those out.
| | 02:23 | So the explosions array is created.
| | 02:26 | Now, let's scroll back down, and let's take this.
| | 02:30 | So this Make Explosion, I'm actually
going to take this and move this up as
| | 02:34 | well. I am going to cut it, and I
am going to move it up just beneath my
| | 02:40 | testCollisions, about line 237 and I'll paste
it on in, and let's take a closer look at this.
| | 02:47 | It says add an instance of explosion
from the library to the stage, and it's
| | 02:52 | putting it at 400 pixels in by 300 pixels down.
| | 02:57 | That's the X and Y.
| | 03:00 | So let's go ahead and make sure that
there is an explosion in my Library. Sure
| | 03:06 | enough, its linkage name is Explosion,
capital E. So here is my makeExplosion
| | 03:13 | function call, and it's going to go
ahead and pass in these two numbers, which is
| | 03:17 | just the position of this explosion.
| | 03:19 | But this makeExplosion actually
creates this tempExplosion. That's the name of
| | 03:24 | this new movie clip.
| | 03:25 | So it basically grabs this
Explosion symbol, puts it on the stage--
| | 03:30 | that's what this does--and it puts it
on the stage, its x position being ex,
| | 03:36 | which is right here.
| | 03:38 | So it's pretty much whatever
property that gets passed in.
| | 03:42 | If this is 400, well ex actually equals 400.
| | 03:45 | So it's the equivalent of having
the position be 400 right there.
| | 03:50 | I'll just undo that.
| | 03:52 | Same thing for the y; whatever number
gets passed in to this function right
| | 03:55 | here again becomes the y position, and
then it adds it to the stage depending on
| | 04:01 | those two positions, and then it puts
it inside of this Explosions array.
| | 04:06 | So that's what it does.
| | 04:07 | It pulls an item from the Library,
places it on the stage at this
| | 04:11 | particular location is how this works.
| | 04:14 | All right, I'm going to go ahead and
just remove this comment, and quite frankly,
| | 04:19 | I don't want to just call this
function as it is right here.
| | 04:23 | What I want to do is I want to
determine when the--say for instance the laser
| | 04:28 | hits the enemy, then make that explosion.
| | 04:31 | Sure enough, that's right here.
| | 04:33 | So I'm going to go ahead and take this
line and I'm going to cut it, and right in
| | 04:38 | here where the laser hits the enemy,
well, I'm going to go ahead and replace
| | 04:43 | that trace statement with this makeExplosion.
| | 04:47 | That's all well and good, and that will
work when it gets hit, but I need to be
| | 04:51 | concerned about the position now
because I want to position it at the same
| | 04:55 | location as the tempEnemy.
| | 04:57 | So I am going to copy that word and
paste it right in here where it did say 400.
| | 05:02 | Remember, that's the x position, so the
tempEnemy's x position, and the second
| | 05:09 | parameter right here is
going to be the y position.
| | 05:12 | So make an explosion exactly where that
tempEnemy is and attach it to the stage
| | 05:18 | and actually put in the array.
| | 05:19 | All right, that looks good, and again
that's just when the laser hits the enemy.
| | 05:24 | Well, I'm going to copy this line
because I also need to determine when the
| | 05:30 | enemy hits the bottom or when the enemy
hits the player, I want that enemy to blow up.
| | 05:39 | So that's right here, trace("enemy scores").
| | 05:42 | Well, I am going to go ahead and replace
that with that Make Explosion now as well.
| | 05:47 | All right! So we should see all of these
various explosions appear on the screen.
| | 05:52 | Notice that nothing is being removed
from the stage or anything like that just
| | 05:56 | yet, but we should see lots of
explosions, which is always cool.
| | 05:59 | Let's click Play, and again, as I come
down, I'll go ahead and shoot this guy.
| | 06:04 | You can see all of those explosions as
I hit him, and then watch him. As he hits
| | 06:09 | the bottom, it'll go ahead, and
explode or has they hit my player,
| | 06:13 | you can see all of these explosions
all over the place. So that's great.
| | 06:16 | It's all working very nice.
| | 06:18 | The only issue is is that these UFOs are
invincible, and the next step will be to
| | 06:23 | actually remove items from the stage.
| | Collapse this transcript |
| Removing assets from the stage| 00:00 | The next step in the development of
this game is I need to go ahead and remove
| | 00:04 | the various elements from the stage,
because as you can see how this game works,
| | 00:09 | as these lasers hit these tempEnemies,
well, the enemies should be disappearing, and
| | 00:15 | so should the lasers.
| | 00:17 | Not only that, the enemies should be
disappearing when they go off the stage, and
| | 00:22 | these lasers should also be
disappearing as they go off the top.
| | 00:26 | And lastly, even these explosions, even
though you don't see them anymore after
| | 00:30 | they blow up, they still exist on the stage.
| | 00:33 | So we need to remove those.
| | 00:34 | There is just an awful lot of
cleanup that we need to do now.
| | 00:37 | I'll go ahead and close that file.
And just to review where this file is at, all
| | 00:43 | of these items are actually in arrays.
| | 00:46 | So there is this laser array.
| | 00:49 | There is this enemy array and then
there's an explosion array, so I'm basically
| | 00:53 | going to remove elements
from these various arrays.
| | 00:57 | So I am going to go ahead and open up
the Code Snippets panel right down here,
| | 01:01 | and in the bottom, Remove Elements from Array,
| | 01:05 | that's what I want to add.
| | 01:06 | So I'll just double-click on it, and it
will add it to my Actions panel and let's
| | 01:11 | just start here at the top. And a lot
of these are similar, but let's go
| | 01:14 | ahead and take a look.
| | 01:15 | This one says Remove enemy
1 from the enemies array.
| | 01:20 | Well, I already have an enemies
array created, so that's fine, but this
| | 01:25 | is what's happening.
| | 01:26 | It's going to go ahead and
remove enemy number 1 from that array.
| | 01:30 | So this number gets
passed into this function.
| | 01:33 | So idx becomes 1, and in here it says
removeChild, so remove from the stage
| | 01:40 | enemies in that array number 1.
| | 01:42 | That's what that is.
I'll just undo that.
| | 01:45 | But remove it from the stage. Not only
that, remove it from the array as well.
| | 01:51 | So this again passes in 1, and this
second number here just says to remove only
| | 01:57 | that one item and that's it. So I'll undo that.
| | 02:00 | So that's the basic structure of this function.
| | 02:03 | But when and where does this function call go?
| | 02:07 | What is it called. Where does it go in my code?
| | 02:10 | So let's go ahead and take it, and let's
cut it, because I actually want to call
| | 02:14 | that function when there is that explosion.
| | 02:16 | So let's just scroll up, and what I want
to do is I want to go ahead and right in
| | 02:24 | here for this moveEnemies function, as
I scroll down, I want to go ahead and
| | 02:29 | remove that tempEnemy. When it goes
off the stage or if it hits the player,
| | 02:34 | that's when I want to
remove that enemy. So, line 210.
| | 02:39 | I'll paste it in there.
| | 02:40 | Hit the Tab key a couple of times.
| | 02:43 | So removeEnemy, that's when I want
to call that function right in here,
| | 02:46 | after that explosion.
| | 02:48 | But I don't want this equal to 1.
| | 02:49 | In fact, what I want to do is I
need to reference this for loop.
| | 02:53 | So here is the for loop.
| | 02:55 | So whatever tempEnemy you're on,
that's actually referred to as i, so
| | 03:00 | that's what that is.
| | 03:00 | I am just going to copy that, so right in here,
| | 03:04 | I am just going to paste i. So whatever
tempEnemy that is, it's actually known
| | 03:07 | as i. I can go ahead and change that
comment to that, and that looks more
| | 03:13 | appropriate, removeEnemy(i).
| | 03:16 | I'll go ahead and copy those two lines
because I need to remove the enemy, not
| | 03:19 | only when it goes off the bottom of
the stage or hits the player, but also
| | 03:23 | when the laser hits it.
| | 03:25 | So, I'll scroll down. Right in here,
| | 03:28 | there is this Make Explosion as well.
Just beneath it, I'll paste in those two lines.
| | 03:35 | There we are, removeEnemy.
Well, is it known as i still?
| | 03:39 | Well, let's take a look.
| | 03:41 | The for loop for the enemy, sure
enough, is i. I just want you to be aware
| | 03:45 | of that. Make sure that says i, and it will
get removed when the laser hits the enemy.
| | 03:52 | So far so good.
| | 03:53 | Let's scroll back down.
| | 03:54 | So we have done the removeEnemy.
| | 03:58 | Let's take a look at removeLaser.
| | 04:00 | It works the same way, so
there's this removeLaser function.
| | 04:04 | It removes whatever number I'm referring to.
| | 04:07 | It removes it from the stage and
takes it out of the laser's array.
| | 04:10 | So it works the same way.
| | 04:11 | Well, where is it going to go?
| | 04:13 | Let's first take this and let's cut it
and scroll up to where we were a second ago.
| | 04:22 | Test for collisions, right in here.
| | 04:25 | Again, where the laser hits the enemy,
right underneath this removeEnemy, I can
| | 04:29 | paste in that removeLaser. Tab that in.
| | 04:34 | Remove that reference to 1. And for removeLaser,
what number of my referencing, or what variable?
| | 04:41 | Let's take a look.
| | 04:42 | It's not i because that refers to the enemy.
| | 04:44 | I need to go ahead and take a look at the laser.
| | 04:48 | So the laser is actually j, so
that's what I need is j right here.
| | 04:52 | So I'll just type in j, and again when the
laser hits the enemy, go ahead and remove it.
| | 05:00 | Not only that, but when the laser goes
off the stage or off the top, I also need
| | 05:04 | to remove it there as well.
| | 05:07 | So let's scroll up.
| | 05:09 | That's where we make enemies.
| | 05:10 | Let's go a little further up, right here, 134.
| | 05:14 | There is this moveLaser function
and right in here, there is this if
| | 05:17 | statement says, you know what, if
it's off the top of the screen, then go
| | 05:21 | ahead and do something.
| | 05:23 | In this case, what I wanted to do is
I will just paste in this function
| | 05:27 | call, right in there.
| | 05:29 | And again, let's take a look. For that
variable i, in this case it is i, I
| | 05:34 | can type in i, go ahead and basically remove
that laser when it's off the top of screen.
| | 05:40 | So that takes care of the laser
when it goes off the top as well.
| | 05:43 | So we have taken care of the enemy--
let me scroll back down to the bottom--the
| | 05:48 | enemy as well as the
laser we are removing those.
| | 05:51 | Now what about the explosion?
| | 05:53 | The explosion is pretty interesting
because you see this explosion and then you
| | 05:58 | don't see it anymore,
but it's actually still on the stage.
| | 06:01 | So we just need to remedy that.
| | 06:03 | So we're not going to treat it the same way.
| | 06:05 | So we don't even need to call this
function at all. I'll just delete that.
| | 06:09 | I do need this function.
| | 06:11 | But how I am going to treat it is, as
I scroll down here, is I am going to go
| | 06:15 | ahead and check all of the items in
this explosions array, all of those
| | 06:21 | various explosions.
| | 06:22 | If at anytime that explosion, if its
current frame is greater than or equal to
| | 06:29 | the total frames, so what that means
is if the explosion has already played,
| | 06:34 | then go ahead and remove that explosion.
| | 06:38 | So this is just a for loop.
| | 06:40 | That does all of that work, okay.
| | 06:42 | So loop through everything, see
where the current frame right is.
| | 06:45 | If it's basically at the end,
then go ahead and remove that item.
| | 06:48 | So I need to take this and I am going
to cut it, and I'm actually going to just
| | 06:53 | put it in another function.
| | 06:55 | I am going to put it in the
moveLaser function. I'll scroll up.
| | 07:02 | There it is, moveLaser, where we just
were, not within this for loop. All I am
| | 07:07 | going to do is just after that closing
curly brace, but still leaving one below
| | 07:14 | as well, and I am going to
paste in that chunk of code, okay.
| | 07:18 | So if I scroll up, just keep in mind
I'm in moveLaser. It really doesn't matter
| | 07:21 | what function I am in in particular
because I just know that this function gets
| | 07:25 | fired off at the frame rate of the movie.
| | 07:27 | So it's constantly checking.
| | 07:28 | It's always checking these various
explosions, and as soon as one has already
| | 07:33 | played, it's just going
to go ahead and remove it.
| | 07:36 | All right, I'd say we're looking pretty good.
| | 07:38 | Let's scroll back down and just do a
little bit of cleanup with this code,
| | 07:41 | because these functions, well, I
don't want to leave them at the bottom.
| | 07:45 | In fact, I am going to cut them, and I
want to move them into sort of the game
| | 07:50 | area, where I have all my game code.
| | 07:53 | So I have this Make Explosion function,
this testForEnd, and then just right down
| | 07:58 | below testForEnd, that's where
I'll just paste in those functions.
| | 08:02 | These are game functions.
| | 08:04 | That's where I want them.
| | 08:05 | All right, let's just go
ahead and test this movie now.
| | 08:11 | I'm going to click Play, and as we see
those collisions happen, we'll see some
| | 08:16 | explosions, but those elements will
be removed, such as the UFO, known as the
| | 08:22 | tempEnemy, the lasers will disappear
when they collide, and even as they go off
| | 08:27 | the bottom of the screen,
they'll be removed as well.
| | 08:30 | In fact, if I expand out the size of
the stage, you can see that the lasers do
| | 08:35 | disappear once they reach the top.
| | 08:38 | So again, that's just a little
bit of cleanup that we've done.
| | 08:40 | The game is much better this way.
| | 08:42 | I'm actually able to destroy these enemies.
| | 08:44 | So the next thing is actually going to
be implementing some explosion sounds
| | 08:48 | to this game.
| | Collapse this transcript |
| Adding audio| 00:00 | The next step in the development of
this game is I really want to bring it
| | 00:04 | to life with some audio, and the
perfect place for some audio is just when
| | 00:08 | these explosions happen.
| | 00:10 | Other than that, I don't want to add a
lot of audio, because we have to remember
| | 00:14 | this is a mobile game and with all of
this audio playing, they could be again
| | 00:19 | in line to get sandwich out in the
public or something like that, and they might
| | 00:23 | would not want all of the this audio
coming from their phone. Or they could be
| | 00:26 | even listening to music
through their phone as well.
| | 00:29 | So use your audio sparingly.
| | 00:32 | In this case, it's just going
to be for these explosions.
| | 00:35 | All right, I'll close that file, and let's
go into the Library panel because notice
| | 00:41 | there are a couple audio files.
| | 00:43 | There is this explode.wav, for instance,
and this is the file that I want to use.
| | 00:48 | In fact, with this selected, what I can
do is I can hit this little Play button
| | 00:51 | right up here, and that's what I want
to play when that explosion happens.
| | 00:57 | Notice its linkage name is Explode,
so I want to reference that, and let's
| | 01:04 | just go ahead and go into our Actions panel
for that first frame in the Actions layer.
| | 01:10 | And when I am going to add this
explosion sound is going to be in this
| | 01:14 | function on line 255.
| | 01:16 | When I make that explosion, that's when
I want to go ahead, and right in here, I
| | 01:21 | want to sort of play an explosion sound.
| | 01:27 | Let's go ahead and take a look at our
Library, because I am going to be pulling
| | 01:31 | this item from the Library.
| | 01:32 | So I am going to say variable.
| | 01:34 | I am creating a new variable, and
I am just going to call it sound:
| | 01:38 | and it's of Sound type, so that's the type it is.
| | 01:42 | It's a sound file is what I am using.
| | 01:44 | But I am creating a new explode
instance from this item in my library.
| | 01:52 | Now it's known as sound, that
particular one, so I can go ahead and the next
| | 01:57 | line, I can type in sound.play.
| | 02:00 | Now there is many other things you
could do with the sound class and various
| | 02:03 | sound items, but again, what you want to
do with the sound is you want to use it
| | 02:07 | really sparingly, and
that's what I am doing here.
| | 02:10 | I am just going to use it here.
| | 02:11 | Notice there is also this shoot.wav
file in here, and I could use that for the
| | 02:17 | laser, but that laser is being fired
off every half of a second so it gets a
| | 02:21 | little annoying, to be honest with you.
| | 02:23 | But with this implemented, I
can go ahead and do a test movie.
| | 02:30 | And now, let's check that out.
| | 02:32 | I am going to click Play and try to shoot
the UFOs, and we should hear that explosion.
| | 02:39 | (explosions)
| | 02:51 | So sound is that simple, as simple as
writing two lines of code and making sure
| | 02:56 | it's in your library.
| | 02:57 | Just use it sparingly, but you can see
how it really brings your game to life.
| | Collapse this transcript |
|
|
5. ScoringAdding scoring and levels| 00:00 | This game is coming along nicely,
but what it's really missing is it's missing
| | 00:04 | scoring and various levels.
| | 00:06 | So if I click Play, as I destroy these
UFOs, the score, nor the level will add up.
| | 00:13 | There will be nothing in here.
| | 00:21 | So my goal is to go ahead and
populate those two text fields.
| | 00:24 | So let's take a look at them.
| | 00:26 | I am going to turn off these three layers: the
introScreen, options menu, and the endScreen.
| | 00:31 | There is right in here for this text layer,
| | 00:34 | if I just select the Zoom tool, I am
just going to zoom in on that text here,
| | 00:39 | just use my Selection tool
to select these text fields.
| | 00:43 | Let's take a look at them. If I select this
score text field, I'll go to the Properties panel.
| | 00:49 | Now notice that this text field,
its instance name is score_txt.
| | 00:55 | It's set to Classic Text and
it is a Dynamic Text field.
| | 00:59 | So I want to dynamically update the score
as I sort of destroy those various enemies.
| | 01:05 | Also notice that the Font Family is just _sans.
| | 01:09 | So it's going to use the default
sans serif fonts regardless of the device.
| | 01:13 | Not only that, the size is about 24
point, which seems large normally, but
| | 01:19 | it's going to look great on the phone.
| | 01:21 | Same thing for my Level text field.
| | 01:23 | If I select it, its instance name is
level_txt, it's a Classic Text field set to
| | 01:30 | Dynamic Text, and has the same
Character properties as well.
| | 01:35 | So I am going to start
basically with the score right here.
| | 01:39 | So I am going select it.
| | 01:40 | The score_txt is what I am going to
keep in mind, and I am going to select that
| | 01:44 | first frame in the Actions
layer and open up the Actions panel.
| | 01:49 | So at the top what I have is I have
this variable called level currently, and
| | 01:54 | it is a number, because I am already
actually using that and I'll show where that is.
| | 01:58 | But what I want to do is I want to add
another variable called score, and it's
| | 02:03 | also going to be a number, just like that.
| | 02:05 | All right, let's see where level is being used.
| | 02:09 | So I'll just scroll down, because when
the game gets initialized, the level
| | 02:16 | starts out equal to 1.
| | 02:19 | Well, what I want to do with that
variable is I want to put that number
| | 02:24 | actually in the text field.
| | 02:26 | So level_txt, its Text Property is
going to be equal to the level number.
| | 02:36 | I wrapped that in String because what it
does is it takes this, which is normally
| | 02:40 | known as a number, and it converts it to
a string, so it just treats it as text,
| | 02:45 | since it's going in a text field.
| | 02:47 | Again, I want to work on the scoring,
so score is going to be equal to 0.
| | 02:53 | So start out at zero, and then for the
Score text field, its instance name is
| | 02:57 | score_txt. Its text property, same thing.
| | 03:03 | All right, so they both start out when
it initializes, Level is going to be 1,
| | 03:08 | the Score is going to be 0. And for the
score, each time the laser hits one of
| | 03:14 | the enemies, I want to add to the score.
| | 03:17 | So let's go ahead and take a
look at that. As I scroll down,
| | 03:21 | for moveEnemies, I can see them move
test for collisions. Right down in here for
| | 03:27 | test for collisions I have is this.
| | 03:30 | So when the laser hits the enemy, not
only does it make an explosion, does the
| | 03:35 | enemy get removed, the laser gets
removed, but right in here, add to the score.
| | 03:41 | That's what I want to do. And I do that
just by typing in score++, and what that
| | 03:48 | means is is it takes whatever the
score is and it just adds one to it.
| | 03:53 | So that's just adding one to the score.
| | 03:55 | The next thing I need to do is for the
score_txt, for that text field, go ahead
| | 04:01 | and update it with that score variable.
| | 04:07 | So it adds to the score and then it
gets put in the appropriate place.
| | 04:11 | So the score is all squared away.
| | 04:14 | What about the levels?
| | 04:15 | Where is that being used?
| | 04:17 | Well, let's take a look.
| | 04:17 | Let's scroll up, because when the enemies are
created, this is where the level is being used.
| | 04:24 | So remember, this is initially set to 1,
and I will just undo that. But know that
| | 04:31 | each time basically the enemies are
being made, there is a chance that maybe,
| | 04:37 | what, two enemies will be made, each
time this function is called, so that's how
| | 04:42 | that works, and that's just for the
first level, there's maybe only two enemies
| | 04:46 | that are going to come down.
| | 04:47 | But as the levels go on, I actually
want more enemies to be created, and that's
| | 04:53 | why if I undo that, it's going to add
say level at--let's say it's going to
| | 04:57 | had 2 to it level two, so there is a chance
that three enemies will come down as well.
| | 05:03 | So that's the number of enemies as the
game progresses, as you advance in levels.
| | 05:09 | Well, how do you advance the levels?
| | 05:11 | So I will just undo that because what
I want to do is I want to go ahead and
| | 05:15 | right down here in the check for end,
testForEnd, right here in line 276,
| | 05:24 | testForEnd, right in here, this is
what I want to do is want to go ahead and
| | 05:27 | advance the level if they reach a certain score.
| | 05:30 | So right in here, I am going to go
ahead and type in if the score, if it's
| | 05:35 | greater than 10 for instance, then I
can go ahead and advance the level.
| | 05:41 | So if the score is greater
than 10, advance the level.
| | 05:45 | So that will be equal to 2 the first
go round, and then also update the text
| | 05:50 | field whichever level you are at.
| | 05:56 | Okay, so that's if the score is
greater than 10, then advance the level. But I
| | 06:01 | always want this to be
greater and greater as well.
| | 06:03 | So the first go around for level
one, you only have to kill 10 guys.
| | 06:08 | For level two, you have to kill 20 guys.
| | 06:11 | So what I need to do right in
here is just--I'm going to type in
| | 06:14 | level*10. Multiply it by 10.
| | 06:19 | Okay, so this makes each level a little
bit harder, and it's going to be 10 the
| | 06:24 | first level, 20 the second level, 30
the third level, and also more of the
| | 06:29 | enemies come down as well, and of
course that's updated in the text field.
| | 06:33 | So that's how we deal with multiple levels.
| | 06:36 | It gets a little bit more advanced
because more of the enemies are generated, and
| | 06:40 | also I'm also adding to the score.
| | 06:42 | So let's go ahead and test this.
| | 06:50 | I'll click Play, and let's
watch the score and the levels.
| | 07:13 | So I've just right-clicked on this SWF
file, just to pause it. So you can see,
| | 07:17 | I have a score of 23.
| | 07:18 | I am now actually up to level 3, which
is great. That's exactly what I want.
| | 07:25 | So the thing I need to do next is I
actually need to give my guy a number
| | 07:30 | of lives, and they get subtracted as
these UFOs reach at the bottom, because
| | 07:34 | as it stands right now, I can just
play all day racking up my score with no
| | 07:39 | consequences.
| | Collapse this transcript |
| Subtracting lives and ending the game| 00:00 | At this point in the development of the
game, I have scoring hooked up, I have the
| | 00:04 | various levels, but I
don't have the number of lives.
| | 00:07 | So what I want to do is I want to add
a certain number of lives to the player,
| | 00:12 | and when the lives are
at zero the game will end.
| | 00:16 | The lives will be subtracted when one
of those UFOs reaches the very bottom, or
| | 00:22 | if a UFO actually hits the player.
| | 00:24 | So that's how you lose lives, and I think
we'll start out with 2 lives initially.
| | 00:30 | Okay, so let's take a look at this
text field right here. It's on this
| | 00:34 | text layer. I just have
those other layers turned off.
| | 00:37 | I have it selected, and you can see
that its instance name is lives_txt.
| | 00:43 | Okay, so I want to initially give it
some lives--two lives to begin with.
| | 00:48 | So let's go into the Actions panel with
that first frame selected in the actions
| | 00:53 | layer, and let's scroll up to the top.
| | 00:56 | Just right up here at the top, this is
where I'll set all my variables, and I want
| | 01:00 | to set another variable called
lives, and it is going to be a number.
| | 01:06 | And with this variable created, what I
want to do is I actually want to make it
| | 01:12 | equal to two when the game starts.
| | 01:15 | So right down here on line 74, within
this initialize game function, right down
| | 01:22 | in here, this is where I want to give it a
number of lives. Lives is going to be equal to 2.
| | 01:28 | So that's where we'll start out and put
in that text field the number of lives.
| | 01:37 | Okay, so it's set 2 initially, and like
I was explaining, when any one of those
| | 01:44 | temp enemies hit the bottom or hit my player,
I want to subtract from the number of lives.
| | 01:49 | So let's scroll down into the
moveEnemies area, right down here near the bottom.
| | 01:56 | I have this makeExplosion, I have this
removeEnemy, and I am going to go ahead
| | 02:01 | and write a comment: Subtract a life, basically.
| | 02:07 | So let's go ahead and make lives,
subtract one from it, and that's just two
| | 02:13 | subtraction symbols right there, and that's
going to subtract from the current number.
| | 02:18 | So that will subtract it one clear down to zero.
| | 02:21 | I still need to update that text field
with the lives the new number there, so
| | 02:30 | that's how I do that.
| | 02:32 | And I'd say that looks good.
So it's going to continually subtract,
| | 02:36 | so I need to check to see when the lives
equal zero and then show the end screen
| | 02:42 | when there it happens.
| | 02:43 | So I am going to scroll down a little
further. In this testForEnd, I am checking
| | 02:49 | the levels various things like the score.
| | 02:51 | Well, right in here check to see
how many lives that the user has.
| | 02:55 | That's what I want to do.
| | 02:56 | So, if (lives == 0) then go ahead and do
this, whatever is between these two curly braces.
| | 03:06 | And in this case, what I want to do is I
actually want to change the gameState, so
| | 03:11 | right here I am going to
just take these two lines.
| | 03:14 | I am going to cut them, and I am
going to move them on up in here.
| | 03:18 | In fact, I am going to uncomment
this one, because at this point when the
| | 03:23 | lives = 0, then we need to change the
gameState to STATE_END_GAME, which is
| | 03:29 | then going to fire off that particular
function to end the game, which honestly
| | 03:34 | just shows the endScreen.
| | 03:36 | So that's what's going to
happen when the lives equal zero.
| | 03:40 | So let's just go ahead and test this,
and I'm just going to have two of the UFOs
| | 03:50 | hit the bottom, or hit my player,
so we could see the end screen.
| | 04:02 | There we are. Great!
That worked pretty darn well.
| | 04:06 | I'd say that went exactly as expected.
| | 04:08 | Now at this point, since I'm showing
the results screen, what I want to do is I
| | 04:12 | need to do a little bit of cleanup.
| | 04:14 | That's really my next step, and my
character is still moving, but you can see
| | 04:18 | that the lives work, the game ends, it
shows me this final screen, and then I just
| | 04:23 | need to do a little bit of cleanup.
| | Collapse this transcript |
| Creating a results screen| 00:00 | Creating game play is one thing,
but just as important is removing this game play
| | 00:06 | and showing the end screen.
| | 00:08 | So let's start off and I'm just
going to go ahead die immediately.
| | 00:14 | Wait for those guys to reach the bottom.
| | 00:15 | All right, so this is the Results screen.
| | 00:20 | As you can tell, there are some UFOs
that just are frozen in time are right here
| | 00:25 | on the screen, and not only that, my
spaceship is actually moving around, and it's
| | 00:31 | still generating these lasers
even though they're not moving.
| | 00:33 | So just as important as creating this gameplay,
I need to actually remove all of these elements.
| | 00:38 | And most of these elements are
actually dynamically created, so I need to go
| | 00:43 | through and dynamically
remove all of those items.
| | 00:47 | And I am going to do this by looping
through these arrays, so I need to remove
| | 00:52 | the explosions, the enemies, and the lasers.
| | 00:56 | So in the Mobile Game folder in our
Code Snippets panel right down here, Loop
| | 01:01 | through Items in an Array.
| | 01:02 | That's what I want to add.
| | 01:04 | It adds this code right here.
| | 01:08 | All right, so I'll just
hit Return to bring that up.
| | 01:12 | So it loops through an enemies array, and it
will do something to each one of those items.
| | 01:18 | Well, I actually want this to
happen when the game is over with.
| | 01:22 | So I am going to go ahead and move this code.
| | 01:24 | I am going to move it
into the removeGame function.
| | 01:27 | So I am going to cut it.
| | 01:29 | I am going to scroll up right here at
line 325, here is my removeGame function,
| | 01:35 | and I am going to paste it right in there.
| | 01:37 | And I'll just click that Format
button, so everything indents appropriately.
| | 01:42 | And now it says for the enemies array, loop
through it and then do something for each item.
| | 01:48 | Now if you do recall what we're doing
for each one of these items is we already
| | 01:53 | have these removeEnemy functions,
removeLasers, and removeExplosion functions.
| | 01:58 | So I want to use these same
functions for removing all of those elements.
| | 02:03 | So I'm just going to go ahead and copy
this function name or removeEnemy. I am
| | 02:06 | going to come down in here and
paste it right over that comment.
| | 02:11 | And I am going to go ahead and call
that function, and I am going to pass
| | 02:15 | the variable i into it.
| | 02:17 | So I'll copy that and paste that right in there.
| | 02:19 | So it will loop through the entire
length of the array, everything in that array,
| | 02:24 | and it will remove all of those enemies.
| | 02:27 | All right, I need to do the
same thing for the lasers,
| | 02:31 | so next step is going to be Remove lasers.
Take all of this for loop, paste it below.
| | 02:40 | And for this array it is actually
called Lasers. Not only that, I don't want to
| | 02:46 | establish another variable with the
same name. I actually need to change that
| | 02:51 | variable name. I'll just change it to j.
So wherever I see i I'll just change
| | 02:56 | to j, just like that. And removeEnemy,
| | 02:57 | well, no I don't want to remove the
enemy; I just want to remove the Laser and
| | 03:02 | type j right in there.
| | 03:03 | All right, so far so good.
| | 03:06 | I'll copy this for loop again, because
again I need to do the same thing for the
| | 03:10 | Explosions. Paste that in.
| | 03:12 | And again, for the explosions, I'll just
type in k for the variable. The array,
| | 03:19 | again, is going to be explosions.
| | 03:21 | K for that variable name, just like that,
removeExplosion, just like that, type
| | 03:31 | in k, and there we are.
| | 03:34 | So that will loop through all those
arrays and remove all of those elements.
| | 03:38 | That's great. That's exactly what I want.
| | 03:40 | I just need to do a couple more things
in here. I need to go ahead and remove the
| | 03:44 | player, and that's as simple as
typing in removeChild(player).
| | 03:51 | There is only one. I can call it directly
by its name. And then to stop that laser
| | 03:56 | timer, I'll just type in laserTimer.
| | 04:00 | Again, that's what actually makes all
of those various lasers, and all I need to
| | 04:06 | do is stop it, just like that.
| | 04:07 | All right, I'd say that
it looks pretty darn good.
| | 04:11 | Again, this is in the removeGame function.
| | 04:14 | And again, when that endGame gets called,
it's going to remove basically all the
| | 04:19 | game elements like its shown in here,
and then of course it shows the endScreen
| | 04:24 | and does some other things.
| | 04:26 | So let's go ahead and run
this: Control > Test Movie.
| | 04:31 | And I am going to quickly die in here,
so you can see the results screen.
| | 04:46 | There we are, a nice clean results screen.
I don't have any of the UFOs frozen or
| | 04:52 | any lasers frozen or explosions,
and I'm not controlling the player anymore
| | 04:56 | because the player doesn't exist.
| | 04:58 | That looks great. I have
ended the game correctly.
| | 05:02 | Now, really the next step is to
start to add some various scoring on this
| | 05:06 | final screen.
| | Collapse this transcript |
| Displaying the score| 00:00 | Once the player has completed the game,
you want to go ahead and display the results--
| | 00:04 | so, how well the player did. And if
they've done really well, you want to give
| | 00:08 | them the opportunity to enter their
name to be added as the highest scorer.
| | 00:13 | This is all going to be done in this
endScreen layer. If I turn that on, you can
| | 00:17 | see this endScreen movie
clip. There is its instance name.
| | 00:21 | I'll just double-click it, and in here
we have a couple of different elements.
| | 00:25 | First off, we have this high score
text field. This is a dynamic text field.
| | 00:31 | So again, this is selected, and what
will be populated in here is how well
| | 00:35 | they've done, their score, what
level they got to, information like that.
| | 00:40 | If they've done pretty well, what's
going to happen is they're going to have
| | 00:43 | the opportunity to enter in their name
in this input text field, and it's known
| | 00:47 | as High-score name.
| | 00:48 | When they click Enter, it's
again known as enter_btn.
| | 00:53 | It will actually populate this same
dynamic text field with, again, confirmation
| | 00:58 | of how well they did with their name,
and then the player can go ahead and play again.
| | 01:03 | So that's what I want to do, and I'm
going to do this all using ActionScript.
| | 01:06 | So, I'm going to go back to scene 1 and I'm
going to this Actions layer, that first
| | 01:10 | frame, because right there that's
why I'm going to add a code snippet.
| | 01:14 | I encourage you to check out the Code
Snippets video if you do not have these
| | 01:18 | code snippets, but what I want to
add is this Show Results code snippet.
| | 01:23 | So I'll just double-click on it and
it adds that code snippet right here.
| | 01:27 | So I want to move it, but first off, I want
to go ahead and review where it's going to go.
| | 01:32 | Okay, so I have this Show Results
function, and right in here, there is a couple
| | 01:37 | of things that happen, and I do want
to display the high score, but I want to
| | 01:42 | have these first two lines, what they
do is they basically hides the text field
| | 01:48 | and the Enter button, so
that's what goes on right here.
| | 01:52 | Go ahead and turn off the enter button
and turn off the high-score name. Just by
| | 01:56 | default go ahead and do that.
| | 01:59 | Next step, what this line does is we
need to basically enable the play button,
| | 02:04 | so enables the play button.
| | 02:09 | That's what happens right here.
Go ahead and make sure the play button works.
| | 02:13 | And what that play button does is if
they click on it--and again regardless of
| | 02:18 | how well they do, we want to
make sure this play button works--
| | 02:21 | but when they click on it, it's going
to fire off this function called Move
| | 02:24 | Screen Off, which is going
to move off the endScreen.
| | 02:28 | So if you do recall up at the top, this
is actually being used for a couple of
| | 02:33 | different things, so I'll just scroll up.
| | 02:35 | moveScreenOff is used for the intro
screen as well, but I just want to point
| | 02:38 | out then it's going to go ahead and
slide its X position off. And quite frankly,
| | 02:44 | I need to just make sure that it does
get reset back to zero, so if you play
| | 02:50 | the game a couple of times, I want to
make sure that endScreen always starts in
| | 02:56 | the correct position.
| | 02:57 | So in this endGame function, that line
323 endScreen X position is equal to zero.
| | 03:06 | If they've played the game a couple
of times, you want to make sure that the
| | 03:10 | game always starts out at zero
and doesn't appear off to the side, because
| | 03:14 | again, if you play it a second time, you wanted
to make sure that it is in the right position.
| | 03:18 | Okay, so again, that's the code currently
in here, and what I want to do is I want
| | 03:23 | to go ahead and add the results, so
Show Results, and that's where this code
| | 03:28 | snippet comes in right here.
| | 03:30 | I'll just go ahead and take this code
snippet, and I'll cut it and paste it right
| | 03:35 | in here at about line 359.
| | 03:39 | Paste it on there. Right here Show Results,
| | 03:43 | if the score is greater than zero, which
is what this says, then go ahead and in
| | 03:48 | that high score text field it says, "Hey
you know you made it to whatever level you
| | 03:54 | made it to, with a high score of
whatever your high score is that's greater than
| | 03:58 | zero," and this \n just gives it a line
break because on the next line it says
| | 04:03 | enter your name below.
| | 04:04 | All right, so right here, come back over here.
| | 04:09 | I'll just add another comment:
turns on the enter button and the input
| | 04:15 | text field.
| | 04:17 | Again, what I turned off up here, I
need to go ahead and turn on if they did an
| | 04:22 | okay job, if they've killed the at
least one guy, then they get the chance to
| | 04:25 | enter in their name and I make
sure the enter button works as well.
| | 04:31 | All right, moving on down, quite frankly,
if they did a terrible job, your score
| | 04:35 | of zero is what this really says and
does not be zero, so here's where you can
| | 04:40 | add whatever sarcastic comment you want,
but know that this is your 'do better
| | 04:44 | next time' line right here
within this Else statement right here.
| | 04:49 | And of course the Enter button, as soon
as they click on the Enter button after
| | 04:53 | it gets turned on here, after they
click on it, it's going to go ahead and
| | 04:57 | display their results.
| | 04:59 | So it says, "Hey, great job," just
confirming how well they did, their name that
| | 05:03 | they've entered in, that text field, what
level they made it to, and what their score is.
| | 05:09 | So again, if I can just show you that,
after they enter their name, they're going
| | 05:12 | to click Enter that's going to
display that information back up in here.
| | 05:16 | And I need to turn those two items
off when they do hit the Enter button.
| | 05:21 | So again, right in here, I'll just add a
comment if I could about line 376: hides
| | 05:29 | the enter button just
selected and the input text field.
| | 05:38 | That's what happens there. It hides those
two, but they can still click on that
| | 05:42 | play button and they will
and play the game again.
| | 05:45 | All right, everything seems to look
pretty good, but again, I want to go ahead and
| | 05:50 | test this out by playing the game, so
let's just test this out real fast.
| | 05:55 | Click play, and again I just need to
destroy at least one of the enemies.
| | 05:59 | Okay, I've destroyed one.
| | 06:07 | All right, so you made it to level 1 with
a high score of five. Enter your name below.
| | 06:21 | So again, I can just jump in here,
enter in my name in this input text field.
| | 06:26 | This Enter button, when I click on it, it
will display my results, as well as my name,
| | 06:30 | and these two items will disappear.
Sure enough, that happens "Great job, Paul!
| | 06:35 | You made it level 1 with a high score of 5.
| | 06:36 | All right, so I have this working out
great. You can see that it's populating
| | 06:41 | the high score screen, but what I want
to do next is I want to go ahead and save
| | 06:46 | these results as my current high score.
| | 06:48 | And each time I play the game, I want
to go ahead and try to beat the previous
| | 06:53 | high score, but again that's
going to happen in the next lesson.
| | Collapse this transcript |
| Saving and loading game results| 00:00 | This game currently does a good job
of just keeping track of the level the
| | 00:04 | person was on and their score when
they finish the game basically, by the time
| | 00:09 | all of their players die.
| | 00:11 | In fact, they can even enter in their name.
| | 00:13 | But none of this data is being stored,
and what I want to do is I want to store
| | 00:18 | the highest score, known as
sort of the all-time high score.
| | 00:22 | So that's what I want to store, and
each time you play it's going to compare
| | 00:26 | your score against the all-time high score.
| | 00:30 | So that's what I am going to do.
| | 00:31 | I am going to go into my File, this
first frame here, and open up the Actions
| | 00:37 | panel. And right down here, near the
bottom, is this Show Results function, and
| | 00:43 | there's a couple if else statements.
| | 00:45 | But what I want to do is just after sort
of turning off a couple this button and
| | 00:51 | the high score name,
| | 00:52 | I want to go ahead and
basically create a shared object.
| | 00:56 | It will store the all-time high score.
| | 01:04 | That's what I am going to create.
So I am going to say var so, for SharedObject.
| | 01:11 | SharedObject. Again, as I type that it's
highlighted and I could hit Enter to select it.
| | 01:17 | SharedObject = SharedObject.getLocal.
So I am going to get the local shared object.
| | 01:26 | This is going to be the local
shared object on their phone.
| | 01:29 | And then I need to give it a name, so
I can say "alltimeHighScore" and that's
| | 01:36 | the shared object that's going to be stored.
| | 01:39 | So I have created this shared object,
and within this first if statement what I
| | 01:43 | need to do is I need to go ahead and
see if there is a current score in there.
| | 01:51 | So for the shared object, s-o, for that
shared object, the data property, score, for
| | 01:59 | that score, which I'm just going to
define, says for this shared objects data
| | 02:04 | score property is it equal to anything?
| | 02:07 | Or is it undefined. Because if it's
undefined, that's when I want to go ahead and
| | 02:15 | show them this message.
| | 02:16 | It says, "You made it to level whatever,
and go ahead and enter in your name."
| | 02:20 | So again, if this is undefined, so
go ahead and display this message.
| | 02:25 | Now the other reason I want to display this
information is if they have the highest score.
| | 02:30 | So again, two of those vertical bars,
those pipes as they are known, and I am
| | 02:36 | going to basically say if it's
undefined or if the score is greater than the
| | 02:43 | data in that shared object, known as score.
| | 02:47 | So if you basically got the highest
score or if it's undefined, then go
| | 02:52 | ahead and display this message saying
congratulations, go ahead and enter in your name.
| | 02:58 | So that's what this does.
| | 02:59 | We want this to happen, and it
will happen the first time through.
| | 03:03 | So that's we are going to do.
| | 03:04 | I am going to scroll down a little
more. And else if the player didn't get the
| | 03:12 | highest score, then display another message.
| | 03:16 | It says your score of whatever doesn't
beat 0. Well, your score of whatever you
| | 03:21 | had does not beat--just outside of that string.
| | 03:25 | I am going to add a Plus sign--so.data.score.
| | 03:31 | In fact, what I also want to do is I want
to go ahead and add the person's name as well.
| | 03:37 | So let me just scroll down here a little more.
| | 03:39 | Your score of whatever doesn't beat
this other score "by" so.data.name.
| | 03:48 | And then we will even.
| | 03:49 | I do have to put a Plus sign right in here,
but down here at the end, we will go
| | 03:53 | ahead and put a period at
the end of that sentence.
| | 03:56 | So if your score of say 3 doesn't
beat the high score of 5 by whoever.
| | 04:01 | So basically that's what that says.
| | 04:02 | So that looks pretty good, but I need
to go ahead and save the score and even
| | 04:08 | save the person's name if they
happen to get the high score.
| | 04:11 | So remember, we turn on the high
score name and the Enter button.
| | 04:15 | Let's take a look at that right down
here. Again we are basically turning
| | 04:19 | on and making that the enter button
"work" if you will. So here it is.
| | 04:27 | Here is my Enter button.
| | 04:28 | It does say, "Great job," yada yada yada.
| | 04:31 | It drops in their name and all that good stuff.
| | 04:34 | But what I want to do in here, because
this is only displayed if they haven't
| | 04:39 | entered in their name yet or
if they have the highest score,
| | 04:42 | so in here what I need to do is I
need to define all of the elements within
| | 04:48 | that shared object.
| | 04:50 | So define all of the properties
of the shared object, known as s-o.
| | 04:58 | So right in here I can go ahead in
so.data.score = whatever score they had.
| | 05:09 | I can even save the level that they were on,
so.data.level = level and so.data.name.
| | 05:22 | What about that name?
| | 05:23 | I can't just type in name. What the
name is is it actually has to equal to
| | 05:27 | whatever they entered in
within this highscore name.
| | 05:31 | So I need to actually take this and
copy it and paste it right in here.
| | 05:38 | So for that endScreen that
highScoreName text field, well, whatever is in that
| | 05:43 | text field needs to be saved in
the name for that shared object.
| | 05:49 | The last thing I need to do is I can go
ahead and say, for that shared object, I
| | 05:55 | am going to actually go ahead and
flush it, which is basically push that data
| | 06:01 | into that shared object.
| | 06:02 | That's all that does.
| | 06:04 | Now if you do quit out of the game, it
will automatically perform a flush, but
| | 06:07 | you can always add that right in
there, just to be on the safe side.
| | 06:11 | All right, with all that working,
I am going to go ahead and run this
| | 06:14 | project, do a test movie.
| | 06:20 | So the first thing I need to do
is establish a score to begin with.
| | 06:34 | All right, you make it to
level 1 with a high score of 8.
| | 06:37 | Enter your name below.
| | 06:40 | Paul. I will click Enter, Great job, Paul!
| | 06:43 | You made it to level 1 with score of 8!
| | 06:46 | This is inside of Invaders.swf, so if
you could imagine this on my phone, the
| | 06:50 | great thing is this also works on the desktop.
| | 06:54 | So what I'm going to do is I am just
going to close this file out and I am going
| | 06:57 | to open it back up again.
| | 06:58 | I am not going to republish it.
| | 06:59 | I am just going to go
ahead and go to my desktop.
| | 07:03 | Here is the SWF that was just created,
and again as if I was going back to this
| | 07:09 | game and playing it again,
that's essentially what I'm doing.
| | 07:12 | But again, it stores that data.
Whether you're on the desktop or the phone,
| | 07:16 | it works either way.
| | 07:17 | So I am going to try to beat,
say for instance, the score of 8.
| | 07:36 | All right, you made it to
level 2 with a high score of 14.
| | 07:40 | Enter your name below. Paul number 2. Enter it.
| | 07:45 | So it works just as expected, just like before.
| | 07:47 | Now when I play this game one more
time, what's going to happen is I am
| | 07:50 | not going to hit 14. I am going to get something
lower so it's not going to display either one, this
| | 07:55 | text field or that button.
| | 07:56 | Okay, so I will close this
down, go back out to the SWF.
| | 08:00 | I am going to launch this SWF, and this
time I am just going to die immediately.
| | 08:08 | All right, there we are. As you can see,
your score of 1 doesn't beat 14 by Paul 2.
| | 08:24 | So that was my second time through the game.
| | 08:26 | So as you can tell, it is
actually storing that data.
| | 08:30 | It's storing that shared object data,
also known as the Flash cookie, which is
| | 08:34 | another slang term, and it works quite well.
| | 08:38 | Now, there's other uses for this as well.
| | 08:40 | You can not only store say the
highest score, but you can also store the
| | 08:44 | various levels. The person can come
back and play that same game at the level
| | 08:49 | they left off at, or what you could
even do is you can extend it further by
| | 08:54 | adding a SQLite database.
| | 08:56 | But for the purposes of this game,
this is really all I needed to do.
| | Collapse this transcript |
|
|
6. Mobile-Specific FunctionalityDetecting movement with the Accelerometer| 00:00 | Currently this game works great as a
desktop game or any browser because all of
| | 00:06 | the interaction just moves
based on the mouse position.
| | 00:10 | So it will work fine on a mobile device,
| | 00:12 | but what I want to do is I want to
tap into mobile-specific technology, such
| | 00:17 | as the accelerometer.
| | 00:19 | So what that means is I want my spaceship
player to move. As I tilt the device to the left,
| | 00:26 | I want that player to slide to the left;
as I tilt it to the right, he is going
| | 00:30 | to slide to the right.
| | 00:31 | So that's the interactivity that I
want to introduce for this game, and I am
| | 00:37 | going to do that by using
the Code Snippets panel.
| | 00:40 | So in the Code Snippets panel, there is
this Mobile Game folder, and just refer
| | 00:45 | to the Code Snippets movie if you don't
have this. Right down at the bottom
| | 00:50 | is this Move with Accelerometer code snippet.
| | 00:53 | So I am just going to go ahead and
double-click on that to add that code.
| | 00:57 | All right, here is the code.
| | 01:00 | I'd say that looks pretty good.
It seems like a lots going on, but I am just
| | 01:05 | going to break this down for you,
because it is this pretty straightforward.
| | 01:09 | So just like anything else that needs
to be added, there is, first off, a variable
| | 01:14 | that's created var accel.
| | 01:16 | So I am just going to go ahead and take
this, and I am going to cut it and I am
| | 01:19 | going to move it up into position,
| | 01:20 | up near the top, right in here. And I
am basically telling Flash that accel is
| | 01:26 | from the accelerometer class,
so treat it as an accelerometer.
| | 01:31 | Right here, this is where a
new accelerometer is created.
| | 01:35 | It's called accel. And next up right here,
if the phone has accelerometer support,
| | 01:48 | then do what you need to.
| | 01:50 | In this case, there is an event listener.
| | 01:53 | Basically, as the user tilts their
device, it's going to fire off this
| | 02:00 | function called accelMove.
| | 02:03 | If the user does not have
accelerometer support, we need to provide something
| | 02:09 | else, or some other way for the user to
interact with that content, and then right
| | 02:13 | down here, here's the
accelMove function right here.
| | 02:18 | So let's move some of this into place.
| | 02:20 | In fact, let's go ahead and take
this code and I am going to cut it--the
| | 02:25 | accelerometer, the if and the else statement--
| | 02:27 | I am going to cut it and I am going to
move it up into position, right up here,
| | 02:33 | right in here for START_PLAYER.
| | 02:36 | Notice here is my START_PLAYER function, and
right in here this is what makes the player move.
| | 02:42 | There is this Enter frame event that
fires off this movePlayer function.
| | 02:46 | So that's sort of the typical
functionality that we've been dealing with.
| | 02:50 | But what I want to do is I want to go
ahead and right in here I just want to
| | 02:53 | paste in that code, just
about that event listener.
| | 02:56 | I am going to go ahead and hit this
Auto Format button, so that the code
| | 03:00 | formats appropriately.
| | 03:02 | All right, a new accelerometer is made.
| | 03:04 | It checks for support, and if there is support,
then it's going to fire off that accel move.
| | 03:10 | Otherwise, if it does not have
accelerometer support, well, I want to include
| | 03:14 | this event listener.
| | 03:15 | So I am going to cut this
and paste it right in here.
| | 03:21 | So it will work just as usual if
they don't have accelerometer support;
| | 03:25 | otherwise, if they do, just go ahead
and call this Excel move function.
| | 03:28 | I am going to move that function up
as well, so I am going to take this,
| | 03:31 | I am going to cut it, and
| | 03:33 | I am going to move it up
near the top right in here.
| | 03:37 | Here we are, just beneath that START_
PLAYER function but before that move
| | 03:43 | player function, I'm pasting in the accelMove.
| | 03:46 | Okay, all of this red I need to replace,
and what I am going to reference is the
| | 03:51 | player, so I am going to type in player.
| | 03:53 | So for the player, move its x position,
move it to the left and right, take
| | 03:58 | its x position -= so it's going to move in
that direction based on the accelerationX.
| | 04:04 | So right in here this is going to
basically say that the accelerationX is a
| | 04:10 | property of the accelerometer.
| | 04:12 | So that's moving it to the left and right.
| | 04:14 | This actually returns a number between 0 and 1.
| | 04:24 | So it's not a very big number,
and that's why we multiply it.
| | 04:28 | Okay. The higher number, the faster
it will move as you tilt the device.
| | 04:34 | But there are other properties as well.
| | 04:37 | There are properties such as a Y
position and even the Z position as well.
| | 04:42 | So you can really have a player move
around in many different directions, but for
| | 04:46 | our needs, we are just going to
go ahead and use accelerationX.
| | 04:50 | So this does all the work.
| | 04:51 | It moves the character. If the player
is off to the left, then make sure you
| | 04:58 | stop the player. There we are, and I will
just copy this name; otherwise if it's
| | 05:02 | off to the right, so the stage width
minus the width of the player, then move
| | 05:09 | that player back into position.
| | 05:12 | So that's what's going on here.
| | 05:13 | It's pretty much the same thing that's
going on down here with the move player.
| | 05:18 | So they both move the player.
| | 05:20 | And I would say this is pretty much good to go.
| | 05:22 | So I can go ahead and run this, but I
can't run this in Flash and expect to be
| | 05:28 | able to test out the accelerometer.
| | 05:30 | What I need to do is I need go
ahead and test this in Device Central.
| | 05:34 | So I am going to go ahead
and select Device Central.
| | 05:38 | It will launch Device Central.
| | 05:40 | If you don't have it selected, just go
ahead and select Motorola Droid 2, which
| | 05:44 | was added earlier when I was browsing devices.
| | 05:47 | But here it is. And what I want to do
is I want to go ahead and open up this
| | 05:51 | Accelerometer panel.
| | 05:53 | So here's a virtual device, and as I
tilt it, that's actually going to change the
| | 05:59 | x property as I tilt it to
the left and to the right.
| | 06:03 | Okay, so that's what I am going to use
to control my player. If I click play,
| | 06:07 | there is my player, and I play it by of
course tilting the device and you can
| | 06:12 | see the player move.
| | 06:14 | It's tapping into the
accelerometer, and it works quite well.
| | 06:17 | So I am just going to go ahead and
play this for a little bit. There we are.
| | 06:24 | So again, it's tapping into the
accelerometer. Device Central does a great job of
| | 06:29 | simulating the accelerometer, and
obviously you can see how you can actually
| | 06:34 | control your player using
this device-specific technology.
| | Collapse this transcript |
| Using the swipe gesture| 00:00 | One of the great things about creating games
for mobile devices is also the touch screen.
| | 00:05 | Now, with touch screens you can have gestures.
| | 00:08 | And what I meant by gestures is you can,
for instance, use two fingers to rotate
| | 00:13 | an object or the same two fingers to
maybe magnify an image--things like that.
| | 00:19 | And you can add that into your game.
| | 00:21 | And I am just going to go ahead and
integrate that into this IntroScreen right here.
| | 00:27 | So if they're playing this game on a
device, they're going to be able to just
| | 00:30 | take one finger and swipe with it.
| | 00:34 | So they don't have to hit the Play button.
The whole screen is basically the Play button.
| | 00:39 | And when they swipe with one finger, this
screen is going to slide off. All right!
| | 00:43 | And I am going to do this by using the Code
Snippets panel in that Mobile Game folder.
| | 00:49 | I am going to add a gesture swipe.
| | 00:52 | So I am just going to double-click on
that, and it's going to add that code to my
| | 00:57 | Actions Frame in the
Actions layer down at the bottom.
| | 01:01 | So it says Gesture Swipe.
| | 01:03 | I am first defining the
input mode as being GESTURE.
| | 01:08 | Because I can also include various
touch points, but gestures are basically a
| | 01:13 | subset of a multi-touch touch points.
| | 01:16 | So this basically is going to be
really easy to use because in this case I am
| | 01:21 | going to use Gesture Swipe.
| | 01:23 | Also, what's available is zoom,
Gesture rotate, and Gesture pan.
| | 01:30 | All right, in this case I am
just going to use the Swipe.
| | 01:34 | So that's defined in right in here
instance_name_here.
| | 01:37 | Well, what do I want to swipe?
| | 01:39 | I want to swipe the intro screens.
| | 01:41 | Let's go ahead and take all of this
code and I am going to cut it, and I am
| | 01:44 | going to move it up to the top of the
Actions panel, where I see this intro
| | 01:49 | screen. Right here, notice this is the
EventListener and the function for the Play button.
| | 01:57 | So just beneath that, I am just going
to go ahead and paste in that gesture
| | 02:03 | swipe, right in here.
| | 02:04 | And so what I want to do is I am going
to go ahead and move the introScreen.
| | 02:08 | In fact, the whole thing
is going to be the button.
| | 02:10 | So I am just going to copy that word
"introScreen" and I am going to paste it right in here.
| | 02:15 | So when there is a Gesture Swipe that's
performed on the introScreen, go ahead
| | 02:20 | and fire off this function called swipeAway.
| | 02:23 | Within this function, I can go
ahead and tap into a couple of
| | 02:26 | different properties.
| | 02:28 | Say for instance, if there is the
Swipe Left, which is the offsetX, okay.
| | 02:33 | So if the offsetX is equal to negative one,
| | 02:37 | it's going to move to the left.
| | 02:39 | So Swipe Left is going to be minus one,
and then if you want to go to the right,
| | 02:44 | it's going to be one.
| | 02:47 | If you want to go up, then the
offsetY is going to be minus one.
| | 02:55 | And the offsetY, if you want to move
it down, then it's going to be one.
| | 03:01 | And that will move it down. All right!
| | 03:04 | So these are the different swipes you can do.
| | 03:07 | You can basically swipe
any sort of object you want.
| | 03:10 | But really in here in this if statement
is where I can go ahead and do something.
| | 03:16 | In this case, the thing I want to do is I
just want to go ahead and move that screen off.
| | 03:21 | So if they swipe to the left,
go ahead and call this function
| | 03:26 | called moveScreenOff.
| | 03:27 | So I am just going to copy that and
paste it right in here, moveScreenOff.
| | 03:31 | Well, what do I want to move off?
| | 03:33 | I want to move off the introScreen.
| | 03:37 | So again, if they swipe the left,
| | 03:38 | just go ahead and call this
function, pass in that screen name,
| | 03:42 | and what this tween does is this
actually moves it off to the left-hand side.
| | 03:47 | It's really that simple. And again it's
just a simple gesture swipe is what's
| | 03:53 | going to happen here on the introScreen.
| | 03:56 | So normally, I would test it in Device Central.
| | 03:59 | Device Central actually does have,
if I do a Device Central test,
| | 04:03 | it does actually have a Multi-Touch panel.
| | 04:07 | But quite frankly, not all of the
Multi-Touch features work in it.
| | 04:11 | So the Gesture zoom, the
Gesture rotate will work in here.
| | 04:15 | But in this case, what I want to do is
I want to test this out on an actual
| | 04:19 | device to show you that this is working.
| | 04:22 | So here's the game on an actual device.
| | 04:25 | And what I want to do is I am just
going to go ahead and swipe with one
| | 04:28 | finger to the left.
| | 04:30 | And you can see I am actually right
into the game, and I can start playing it.
| | 04:34 | Again, gesture swipe is really easy to
use, and it adds additional functionality
| | 04:39 | that you can use in your game.
| | Collapse this transcript |
| Using hardware keys| 00:00 | The great thing about Android devices is
that they have physical buttons that you
| | 00:04 | can use to add additional
functionality to your game.
| | 00:08 | Those buttons include the Options menu,
the Search button, as well as the Back button.
| | 00:14 | And probably the most common used
is going to be that Options button, or
| | 00:18 | Options menu, because again, you can
use it to add, for instance, this Options
| | 00:23 | menu that I have right here.
| | 00:25 | So just turn off the introScreen,
and you will see it right there.
| | 00:28 | It's called Options menu.
| | 00:30 | And that's what I want to toggle on and
off when you click on that Options key
| | 00:35 | on the actual device.
| | 00:37 | And I am going to add some
functionality by using code snippets.
| | 00:41 | So refer to the Code Snippets video if
you don't have this Mobile Game folder.
| | 00:46 | And if I scroll down, Mobile
menu key, that's what I want to use.
| | 00:51 | I will just double-click on
it to add that functionality.
| | 00:55 | And now I can put
everything in its proper place.
| | 00:58 | So all variables actually are going to be
at the top, so I will take this first line,
| | 01:02 | I'll cut it, scroll up to the
top, and paste it about line 22.
| | 01:08 | Paste it right in there.
| | 01:10 | So, this is a Boolean,
| | 01:11 | so it's a true/false statement,
and it's set to true by default.
| | 01:15 | So it is hidden by default.
| | 01:18 | In fact, the optionsmenu, you can
see its visibility is set to false.
| | 01:23 | So, hiddenOptions is set to true by default,
| | 01:26 | so let's keep that in mind.
| | 01:28 | Scroll back down and again I am just
going to go ahead and move up all of this
| | 01:33 | code, because sure enough, I want it
to start right here after line 440.
| | 01:37 | In fact, I'll add my first comment right in
here: When any hardware key is pressed...
| | 01:47 | Well then, go ahead and fire off this function.
| | 01:49 | So again, KEY_UP for anything, then go
ahead and do this optionsKey function. Okay.
| | 01:56 | So right in here, you can see Options menu.
| | 01:58 | You can use this keyCode,
16777234, or a keyboard menu.
| | 02:05 | Now if you use keyboard menu, it
actually will throw you an error in Flash,
| | 02:10 | so that's why I am going to use 16777234. Okay.
| | 02:15 | But I want to add to this as well
because I don't have an options key on
| | 02:19 | my desktop computer.
| | 02:20 | So I want to go ahead and add two
vertical pipes, those vertical slashes, and
| | 02:24 | what I want to do is this adds an Or statement,
| | 02:27 | so I can say, if this is pressed, or,
and I'll just copy this line right here. 13.
| | 02:35 | And what 13 is is the Enter
key on the keyboard. All right!
| | 02:43 | So again, for development purposes,
that's why I want to add this in.
| | 02:50 | So when I test it on my desktop, I just want
to make sure everything is working just fine.
| | 02:55 | Okay. So if I hit the Enter key or hit the
Options button right here, show the optionsmenu.
| | 03:01 | That's its instance name and by default,
go ahead and show it.
| | 03:07 | So if it's equal to true, then place the
optionsmenu on top of everything else.
| | 03:18 | That's what this setChildIndex does.
| | 03:20 | Because remember, all of
those graphics for the game--
| | 03:24 | the enemies, the lasers, even my players--
they are all pulled from the library
| | 03:28 | and added directly to this stage.
| | 03:31 | And they're added on top of one another.
| | 03:33 | So I want to make sure this menu is on top of
all of that stuff by adding a setChildIndex,
| | 03:39 | making sure it's at the very top.
| | 03:41 | But again, right here, I am going to
copy this optionsmenu instance name and
| | 03:44 | paste it over instance name here.
| | 03:47 | I'll do the same thing here.
| | 03:49 | So again, turn it on,
| | 03:50 | put it on top, turn it on,
give it an EventListener.
| | 03:54 | This EventListener fires off this
exitApp function right down here.
| | 03:58 | And again, this is commented out as well.
| | 04:00 | This is using NativeApplication functionality.
| | 04:04 | This is going to go ahead and exit out
of the application when they go ahead
| | 04:09 | and click on the menu.
| | 04:10 | Now, of course, while I am testing this
out, what I want to do is I want to add
| | 04:14 | a trace statement that says exitApp,
| | 04:17 | just so I know it's working on the desktop.
| | 04:19 | So I've added that trace statement in.
| | 04:21 | It's looking good so far. I can move on.
| | 04:24 | Within this else statement, I can go
ahead and say "If the optionsmenu is
| | 04:31 | visible, then hide it..."
| | 04:34 | And that's what this does. I'll copy this optionsmenu
name and paste it right in there. It turns it off,
| | 04:39 | removes that EventListener.
| | 04:41 | And then lastly this is just the toggle.
| | 04:45 | It turns it on and off. The hiddenOptions
makes it true or false each time around.
| | 04:49 | So that's how we have our Toggle
button created, which is our optionsmenu.
| | 04:53 | And I am just going to go ahead
and test this out on my device.
| | 04:57 | I am going to press the Enter key.
| | 04:59 | So I'll just do a Control > Test Movie.
| | 05:00 | I am going to test it in
Flash. Here is my game.
| | 05:05 | Click Play. You saw it work.
You saw the menu up here on my desktop.
| | 05:17 | So the next step is to go ahead
and test this out on my device.
| | 05:21 | So I am just going to go
ahead and put this on a Droid 2.
| | 05:25 | Here is with the game on a Droid 2.
| | 05:27 | I am going to go ahead and click Play.
| | 05:29 | So I am able to play the game.
| | 05:33 | Then I can hit the Options button.
| | 05:36 | It shows the Options menu.
| | 05:39 | I can press the Options button again
| | 05:42 | and the Options menu is hidden.
| | 05:44 | So again, that's how you can tap into
the actual hardware keys of the device to
| | 05:50 | extend the functionality of your game.
| | Collapse this transcript |
|
|
7. Optimizing for Mobile DevicesHandling exits and idle mode| 00:00 | As you're developing your game, you
need to keep in mind how this is going to
| | 00:04 | play on an actual device.
| | 00:06 | In the case of this game, since
we're controlling the player based on the
| | 00:10 | accelerometer by tilting the device,
we're not touching the screen at all,
| | 00:14 | so, there is a chance that the screen
could actually dim while we're playing game.
| | 00:19 | So I actually want to keep the screen
awake, is a mobile- specific thing I want
| | 00:23 | to do, as well as I want to
make sure this Exit button works.
| | 00:27 | So let's go ahead and take a look at that.
| | 00:28 | I am going to use a code
snippet in order to do that,
| | 00:31 | and just refer to the Code Snippets movie
if you don't have this Mobile Game folder.
| | 00:37 | I am going to scroll down,
right down here, Keep Screen Awake.
| | 00:42 | So I am going to double-click on that,
| | 00:44 | and that's going to add
these two lines. All right!
| | 00:48 | So this looks good, and this is really
going to be mobile-specific technology
| | 00:53 | that we're dealing with.
| | 00:54 | Let me just hit Enter a couple times.
| | 00:57 | So keep the screen awake if you're
using the accelerometer or whatever else.
| | 01:01 | Notice as I uncomment this line, it's
using this SystemIdlemode.KEEP_AWAKE.
| | 01:09 | So this will keep the screen active
while the user plays the game. Okay.
| | 01:14 | So, and this might be great if you have,
say for instance, a lot of text or any
| | 01:18 | time that the user will not be
interacting with the screen but is probably
| | 01:22 | using the app or playing the game. All right!
| | 01:24 | So that's in place, and
I've just uncommented that.
| | 01:27 | It should be just fine.
| | 01:28 | Also right in here, and this was added earlier,
| | 01:31 | it's the same thing.
| | 01:33 | So I am still using this
NativeApplication and then exit.
| | 01:37 | This will exit out of the app, okay.
| | 01:40 | And these are specific to AIR,
| | 01:43 | so this is AIR for
Android devices functionality.
| | 01:49 | And this is also AIR functionality as well.
| | 01:55 | And I make that distinction because
this is what's going to happen when
| | 01:58 | you test this in Flash.
| | 02:00 | So I am going to do a test movie,
| | 02:04 | and you'll notice immediately that it
already throws a couple of errors. Okay.
| | 02:09 | It says line 471 and line 476 says,
undefined property NativeApplication,
| | 02:16 | and that's because
NativeApplication is specific to AIR.
| | 02:20 | Okay, so it has to be an app in
order to use that functionality, and not a
| | 02:25 | SWF, like I have here.
| | 02:27 | So it actually is working.
| | 02:29 | I don't want that error to concern you at all.
| | 02:31 | But for right now all I need to do is
just comment those two lines out and make
| | 02:37 | sure I ACTIVATE or, let's say,
UNCOMMENT ON PUBLISH. All right!
| | 02:46 | That's what I want to do for both of these.
| | 02:48 | So I am just adding these notes in
here, and when I get in to the publish
| | 02:51 | settings, I am going to go
ahead and uncomment these.
| | 02:54 | There is something else I need to do down here.
| | 02:56 | So I need to uncomment this line on
PUBLISH, but I also need to set the
| | 03:02 | necessary permissions as well.
| | 03:08 | Okay, so there is going to be a certain
file, and I just need to basically tell
| | 03:12 | Android that it's going to keep the
screen awake, and just to make sure that
| | 03:16 | permission is in there.
| | 03:17 | So that's one thing I need to do as well.
| | 03:19 | But this is actually set up,
and it will work just fine.
| | 03:22 | So again, when I get to the point where I
publish out this AIR app and play it on the phone,
| | 03:26 | I will test for this functionality
and everything will work out fine.
| | Collapse this transcript |
| Handling activation and deactivation| 00:00 | Since this is a game for mobile devices,
what we need to do is figure out how to
| | 00:05 | handle the game, say for instance, when
the user gets a phone call, or when the
| | 00:10 | user launches another app.
| | 00:12 | So we need to handle this activation and
deactivation of this game, and I'm going
| | 00:18 | to do that by using the Code
Snippets panel. Down here there is App
| | 00:24 | Activate/Deactivate.
| | 00:25 | So I'm going to go ahead and that to
that frame on my Actions layer where all my
| | 00:33 | other code is, right in here.
| | 00:36 | So there's a couple of EventListeners
right in here. So the first one is going
| | 00:40 | to listen for the deactivate, so anytime
you know, say for instance, when the user
| | 00:47 | gets a phone call or launches another
app, and this app is actually basically in
| | 00:57 | background mode. What we do with everything?
| | 00:59 | Well, what we do with that information
is we're going to go ahead and pause the
| | 01:03 | game anytime the game is
deactivated or running in the background.
| | 01:08 | We want to pause it because not only do
we not want the game to continue to play
| | 01:12 | and watch our players die without us
knowing it, but we also don't want to tax
| | 01:17 | the battery by having various
functions run in the background.
| | 01:21 | Next up, when the user comes back to
the game, what happens? All right and
| | 01:28 | that's when this resume game function
fires off, and both of these functions
| | 01:33 | are right down here.
| | 01:34 | So I need to determine what listener
events are running, timers, whatever is
| | 01:39 | running, and then pause those elements.
And once the user comes back to the game, I
| | 01:45 | need to resume those elements as well.
| | 01:47 | So let's go ahead and take a look, and
quite frankly, I really only need to pause
| | 01:53 | the game when the game is in one state
okay, because if they are on the intro
| | 01:58 | screen or on the results screen
I don't need to pause anything.
| | 02:01 | But if the gameState is equal to STATE_
PLAY_GAME, then go ahead and pause the
| | 02:17 | necessary elements or stop them from running.
| | 02:20 | Same thing. I am going to just copy that
if statement and paste it right down in
| | 02:24 | here for the resume game as well.
| | 02:27 | So let's go ahead and populate this,
so let's take a look at the game state.
| | 02:31 | First off, I just scroll up near the
top, and where I want to start is there is
| | 02:38 | going to be this game loop that runs
continuously okay, and I want to stop this
| | 02:44 | Enter frame. And this is the big thing
you need to look out for is intro frames
| | 02:48 | can be expensive, as far as the
processor goes, because its executing at the
| | 02:52 | frame rate of the movie.
| | 02:54 | So I want to copy this ENTER_FRAME
addEventListener, scroll down, paste it right
| | 03:03 | in here within this if conditional
statement, and change add to remove.
| | 03:08 | Now that event listener will be removed,
and when the game is resumed I need to
| | 03:13 | make sure that that event listener continues.
| | 03:16 | All right, next up, I need to go ahead
and take a look at some of the game play.
| | 03:20 | Say for instance, I know the player
starts moving around and all that good stuff
| | 03:25 | when we get back into the game, so
start player, we have this laserTimer start,
| | 03:32 | so that laser is constantly
firing every half a second.
| | 03:35 | Well, I need to stop that laser as
well, so I'm going to take that line right
| | 03:39 | there on 120, line 120 here.
| | 03:43 | Also, if you notice there's also this
accelerometer that's being executed as well.
| | 03:48 | But first, let's paste in this
laserTimer start and change it to stop.
| | 03:55 | Okay, so that will stop the laser, and
I need to resume it, of course, when they
| | 04:00 | go back into the game. Let's go back up to where we
were, right in here, and again since they're on a
| | 04:06 | mobile device it's calling this
accelMove basically every time the user tilts
| | 04:14 | the device, so I need to
stop this from happening.
| | 04:17 | So I'm going to take this EventListener
and put it down in here as well, change
| | 04:22 | add to remove, and also
paste it right down in here.
| | 04:28 | That's actually going to work out pretty well.
| | 04:31 | In fact, both of the deactivate and
activate are going to fire off and work
| | 04:36 | appropriately, but I want to pause
the game in another place as well.
| | 04:40 | Okay, so I'm just going to copy this
pause game, because if you recall, I also
| | 04:45 | have that Options menu right, okay.
| | 04:49 | So if they click on that Options menu
button, it's going to go ahead and enable
| | 04:56 | the Options menu. Well, at that point,
again, I also need to pause the game, and then
| | 05:03 | when they press it again when the menu
goes away, then I need to resume the game,
| | 05:08 | just like that. So again, call
that function, and now we are set.
| | 05:15 | So both of those in place, I can go
ahead and test this out in Flash to
| | 05:20 | make sure it's working. Let's run this.
| | 05:24 | So I'm going to play the game. I'm going to then
hit the Enter key and that's going to
| | 05:29 | show the Options menu, and then I'm going
to hit the Enter key again and then the
| | 05:34 | gameplay will resume. There we are.
| | 05:41 | You can see how it's paused the game.
| | 05:43 | I can see my lasers have stopped, this
interframe has stopped as well, everything
| | 05:47 | has stopped moving and that works great.
| | 05:49 | If I hit the Enter key again, it will continue.
| | 05:55 | So again, this is one of the things that
you're going to have to do is deal with
| | 05:58 | activation and deactivation of your
application, because it's really going to
| | 06:02 | help your user's battery life and also
it's going to enable better game play
| | 06:08 | because it's going to pause and
resume the game at the appropriate times.
| | Collapse this transcript |
| Optimizing graphics| 00:00 | One thing you are going to want to do
with your game is you are going to want to
| | 00:03 | optimize all of the graphics so it plays well.
| | 00:07 | This is particularly important on mobile
devices, because, again, they just have
| | 00:12 | smaller processors. They are running on
about a 1-GHz processor, and in general,
| | 00:18 | I need to make sure these graphics perform well.
| | 00:21 | What's interesting is that on mobile
devices, vector graphics don't perform as well
| | 00:26 | because these small phones have to do
all these calculations of all of these
| | 00:31 | various curves for vector drawings.
| | 00:35 | So what I want to do is I want to
take my important vector graphics and
| | 00:40 | convert them into a bitmap.
| | 00:43 | Flash actually allows me to do that.
| | 00:45 | For instance, if I just come to this
text layer right here and I'll just zoom in,
| | 00:51 | for instance, on some of this text here,
| | 00:53 | well, this is actually quite
frankly, this is some text here that is
| | 00:58 | vector information.
| | 01:00 | Okay, so what I want to do with this is
I am just going to drag this text into
| | 01:04 | the library, and I am going to call it text.
| | 01:06 | Okay, so this could be anything on the
stage. In this case, it's just some text.
| | 01:11 | But I want to take this vector
information and in the Properties panel, I want
| | 01:16 | to cache this as a bitmap.
| | 01:20 | So under display, cache this text as a bitmap.
| | 01:24 | This happens at runtime.
| | 01:26 | So this is exactly what I want to do
and this is going to work out quite well.
| | 01:30 | Well, for most of my game play
all of the graphics are actually
| | 01:35 | dynamically created.
| | 01:37 | They are pulled from the library, if
you will, and what I need to do is I need
| | 01:42 | to go ahead and cache these as bitmap as well.
But again, they're added using ActionScript,
| | 01:48 | so I need to use a code snippet to be able
to make sure those are all cached as bitmaps.
| | 01:56 | So right down here, there is Optimize Graphics.
| | 01:59 | That's the code snippet I want to use.
Just double-click on that, and it's going
| | 02:04 | to add basically these two
code snippets right in here.
| | 02:07 | Okay, so this first comment says, this
is great for graphics that move along the
| | 02:12 | x and y position or not at all, okay.
| | 02:15 | So this is a perfect case, for
instance, for my lasers and my player.
| | 02:23 | So that's what I'd want to use
this for, cacheAsBitmap = true.
| | 02:27 | The second one down here--and I'll
just hit Return a couple of times--
| | 02:31 | this is great for graphics that scale,
rotate, or even maybe change their alpha
| | 02:35 | or their transparency.
| | 02:37 | So for this one, I actually
want to use this for my enemies.
| | 02:40 | Okay, just like that.
| | 02:44 | All right, so let's start
with this first one right here.
| | 02:46 | I am going to take this line, I am
going to copy it, and I am going to go up to
| | 02:51 | where my player is created.
| | 02:53 | I should have, actually, a
start player right up here.
| | 02:57 | Scroll up a little more, right in here.
| | 02:59 | Here's my start player, and I'm going
to look to where these properties are
| | 03:04 | added, because the CacheAsBitmap is
basically a property, so that's what I
| | 03:08 | want to add, and I am going to add it before
the addChild, before I get to put onto the stage.
| | 03:13 | I am going to paste in that line.
| | 03:16 | So for instance name here,
that's going to be player, all right.
| | 03:20 | So my player is going to be
cached as a bitmap. Let's take a look.
| | 03:25 | We have this LaserTimer.start ().
| | 03:27 | That's referring to the
laser timer timer class.
| | 03:31 | So I'll scroll down, and that's right here.
| | 03:34 | This function, line 171, right in here
after the x and y, I want to go ahead
| | 03:40 | and paste in that line, and for all the
tempLasers, go ahead and cache them as bitmaps as well.
| | 03:47 | Okay, so those two are set up.
| | 03:48 | Let's scroll down a little further, and
I don't need these lines, so I am just
| | 03:53 | going to delete those lines
of code, and right in here
| | 03:56 | I am going to go ahead and use this
cacheAsBitmap matrix, and that's going to
| | 04:01 | enable me to cache all the different
instances of these enemy spaceships.
| | 04:06 | So as they rotate, it's actually
going to cache all of those rotations as a
| | 04:10 | separate bitmap is what this does right here.
| | 04:13 | But I still also need to
include the cacheAsBitmap as well.
| | 04:16 | So I am going to take these two lines,
I am going to cut them, and I'll just
| | 04:21 | delete those comments down there at the bottom.
| | 04:23 | Now let's scroll up where
we have the makeEnemies.
| | 04:28 | Here we are, makeEnemies, about line 229.
| | 04:31 | Here is this function,
right in here, sure enough.
| | 04:36 | Here is that property for moving its
x position, and I'll paste those two
| | 04:40 | lines right in here.
| | 04:42 | So again, I'm dealing with tempEnemies,
so I am just going to copy that instance
| | 04:47 | name and paste that in where it says
instance_name_here, just like that.
| | 04:52 | Okay, there we are, so even the tempEnemy as
it rotates, because it will rotate as well,
| | 04:58 | well, I want to go ahead and
cache each one of those as a bitmap.
| | 05:02 | You might be asking, what do
you do with animated graphics?
| | 05:05 | Well, let's take a look, because
there is that explosion as well.
| | 05:09 | So here's this explosion, and I'll just
double-click on it, and I'll zoom in on this explosion.
| | 05:15 | You can see that this is
vector data right here, okay.
| | 05:19 | So this is just a vector line that I
created in Flash, and I want to replace
| | 05:23 | these actually with bitmaps.
| | 05:25 | So the cacheAsBitmap or cacheAsBitmap
matrix does not work on animated movie
| | 05:31 | clips like these, because there's one
frame, two frame, and then three frames.
| | 05:36 | So in this case what I want to do is I
am going to create a new layer and I'm
| | 05:39 | just going to import some
bitmaps of that same explosion.
| | 05:43 | So I am going to import to stage. In the
graphics folder, I am going to select this
| | 05:47 | Explode_1, and since these are all
numbered, it's going to bring in all three of
| | 05:55 | these, and that's exactly what I want.
| | 05:57 | So this is PNG file that was created
actually from this original vector.
| | 06:01 | I just took a screenshot, cropped it
down, and saved it as a PNG file with
| | 06:06 | transparency, and I'm going to select Open, and
it's going to bring in this entire sequence.
| | 06:13 | So those three images, I'll
select yes, and there they are.
| | 06:18 | I can first kind of space these out,
each keyframe, so these explosions
| | 06:25 | appear at the appropriate time.
And not only that, I can get rid of these two
| | 06:30 | layers below just by deleting them, clicking
that trashcan, and deleting those two layers.
| | 06:35 | The last thing I am going to do is I am
just going to go ahead and like center
| | 06:39 | those graphics kind of like that.
| | 06:41 | All right, there we are,
and I'd say we're good to go.
| | 06:46 | Lastly, here are my PNG files.
| | 06:48 | I can go ahead and move those into the
assets folder, just to do a little bit of cleanup.
| | 06:52 | But again, for animated graphics you
might consider using bitmaps by importing them;
| | 06:57 | otherwise, you can use cacheAsBitmap
or cacheAsBitmap matrix, just as long as
| | 07:03 | you are basically taking most of your
vector content that's moving around a lot
| | 07:07 | and converting it to bitmap.
| | 07:09 | It really is going to
help performance on a device.
| | Collapse this transcript |
| Optimizing ActionScript| 00:00 | Optimizing your ActionScript code is just
as important as optimizing your graphics.
| | 00:06 | That's what I want to do now.
| | 00:07 | I am going to go into my
ActionScript code. Here it is, and quite frankly,
| | 00:13 | there's a lot going on.
| | 00:15 | I need to optimize this, and what
that means is I need to go ahead and look
| | 00:19 | at ways that I can condense down some
of this functionality, whether there's
| | 00:24 | enter frames that can be condensed down
maybe into one enter frame, or if there are
| | 00:29 | for loops that can be condensed down as well.
| | 00:32 | I also need to take a look at
expensive processes, and when I say expensive
| | 00:37 | processes, I mean, more than
anything, enter frame events. Okay.
| | 00:42 | So I am going to go ahead and take a
look at my enter frame events, and I want to
| | 00:47 | make sure there are not a
lot of them, for one, okay.
| | 00:49 | So as I scroll down, about line 62
there's this Enter_Frame game loop, and this
| | 00:55 | constantly checks the game state we are
in. And that's fine, but what I am going
| | 01:00 | to do is I am going to select this
word and I am going to do a Command+F, or
| | 01:04 | Ctrl+F if you're on a PC, and I
am just going to do a Find Next.
| | 01:09 | All right, here is another one.
| | 01:11 | Here is the enter frame for moving the player.
| | 01:14 | Well, I need to do that as well, so
that one is okay to keep in as well.
| | 01:19 | Find Next, and again, this
is a remove event listener.
| | 01:23 | I, in general, only have two enter frame
events: one for the game loop and then
| | 01:30 | one to move the player.
| | 01:32 | So that looks pretty good.
| | 01:33 | But I want to go beyond an enter frame
event, just looking at how many there
| | 01:38 | are, because I need to be aware of how
often this enter frame event is firing
| | 01:43 | off, and it does so at
the frame rate of the movie.
| | 01:46 | So I am going to pin my code, and I
am going to take a look over here in
| | 01:50 | my Properties panel.
| | 01:51 | The Frames Per Second for this document is 24.
| | 01:55 | I might consider dropping that down to,
say for instance, 20 frames per second.
| | 01:59 | Okay, it should still play smooth and
look pretty good while not being that
| | 02:05 | taxing on the mobile device.
| | 02:07 | If I drop it down to say 15, it's going
to get a little more choppy, so I think
| | 02:11 | 20 is pretty good for this project.
| | 02:13 | Okay, so the enter frame looks good.
| | 02:16 | I am going to go ahead and just take a quick
glance at some of the other code as I scroll down.
| | 02:23 | Let's go ahead and take a look at,
let's say for instance this timer event.
| | 02:27 | This works out pretty well, and these
are really good to use because I get to
| | 02:30 | determine, independently for each timer
that is, how often it executes, and that
| | 02:35 | one executes every half a
second, so that's pretty good.
| | 02:38 | I might want to take a look at maybe
moving my enemies or even, like, testing the
| | 02:42 | collisions for instance.
| | 02:43 | Let's take a look at these testing collisions.
| | 02:46 | 284, that's where the function is, and I am
noticing that this loops through the enemies array.
| | 02:53 | Okay, it loops through the enemies array,
because it checks to see when an enemy
| | 02:58 | and a laser collide.
| | 03:00 | So that's what this test
for collisions does, okay.
| | 03:03 | But I might consider
combining this with something else.
| | 03:06 | In fact, if I scroll up, I can see that with
this moveEnemies there is this same for loop.
| | 03:15 | So I want to go ahead and combine these two.
| | 03:17 | In fact, I want to get rid of
this test collisions altogether.
| | 03:21 | All right, so in order to combine this,
first thing I am going to do, since I am
| | 03:25 | not going to need this anymore, I am
going to remove that enemy for loop.
| | 03:28 | Anytime you remove an opening curly
brace, you need to remove the closing curly
| | 03:34 | brace as well. Same thing
for this function as a whole.
| | 03:37 | I can remove it, remove that closing
curly brace, and I don't need this tempEnemy
| | 03:46 | anymore either, because it's
going to be up above. There we are.
| | 03:50 | So this is what I have it condensed down to.
| | 03:53 | So this is a lot better.
| | 03:54 | I have eliminated that for loop.
| | 03:56 | I can go ahead and take this code, and in
fact, I did notice one more thing right
| | 04:01 | down here for this break enemy.
| | 04:03 | Well, that doesn't exist anymore.
| | 04:05 | It's not in that for loop,
so I can remove that as well.
| | 04:07 | So again, I am going to take this
chunk of code and I am going to cut it, and
| | 04:13 | right up here within this for loop,
right in here, after this closing curly
| | 04:21 | brace right here, hit Enter, and this is
for the Make Explosion, and paste that in.
| | 04:32 | Lastly, I will go ahead and click my
Auto Format button, just to make sure
| | 04:36 | everything nests in nice and neat,
and I'd say that looks pretty good.
| | 04:40 | But keep in mind that I did go
ahead and I removed that test for
| | 04:45 | collision basically.
| | 04:47 | So right up here in this playGame,
since that testCollisions function no longer
| | 04:52 | exist, I need to remove it as well.
| | 04:55 | And anytime you're removing a function,
it's always good just to select it and
| | 04:58 | again just find it, so Command+F or
Ctrl+F and just click Find Next, just to make
| | 05:04 | sure it's not anywhere else,
if you're removing things.
| | 05:07 | So this Find and Replace is going
to be really helpful when you start
| | 05:10 | condensing down your code.
| | 05:12 | All right, so that's fine.
| | 05:13 | I can remove that, and again, I
am just simplifying this code.
| | 05:17 | And again, I can go in and kind of
clean it up and make sure everything is
| | 05:22 | pretty squared away.
| | 05:23 | A lot is going on here, and I'd say
this is pretty powerful. Know that it
| | 05:27 | actually does not execute
any of these commented lines,
| | 05:31 | so I don't need to worry about that.
| | 05:33 | Trace statements, I am not
going to worry about those either.
| | 05:36 | In general, I think this game is good to go.
| | 05:38 | I will do a quick test movie in Flash,
| | 05:42 | just to make sure everything plays correctly.
| | 05:44 | (explosions)
| | 05:56 | All right, so everything was playing well.
| | 05:58 | It seemed pretty smooth.
| | 05:59 | I liked how it was working, but the next
step is to really try this out on a device.
| | 06:03 | Now, you are not going to get ideal
performance compared to a Desktop, but again,
| | 06:07 | you want to make sure you optimize all
your graphics and your ActionScript code
| | 06:12 | before you release it or publish
it into the Android marketplace.
| | Collapse this transcript |
|
|
8. PublishingCreating the application files| 00:00 | Now that the game is optimized and
complete, I want to go ahead and publish the
| | 00:05 | necessary files that are needed create my app.
| | 00:09 | Now, one of those files is going to be
the SWF file of the actual game.
| | 00:14 | Then there is going to be a signed
certificate that I am going to generate that shows
| | 00:19 | the user who actually created the game.
| | 00:22 | There is going to be an XML descriptor
file, which describes the application,
| | 00:28 | sets the necessary permissions, all
of that stuff, as well as some icons.
| | 00:33 | So those are all the elements I need,
and I am going to start with the SWF file.
| | 00:37 | So by going to File > Publish Settings,
well, I don't want to output an HTML file,
| | 00:43 | so I'll just uncheck that.
| | 00:45 | In fact, I just want to publish out an SWF file.
| | 00:49 | So I am just going to click on this
folder icon, and I'm just going to output
| | 00:51 | everything to the Desktop.
| | 00:53 | So I am going to output Invaders.swf,
okay. Click Save and I'll click Publish.
| | 01:01 | All right, with that done, what I
want to produce next is going to the
| | 01:06 | signed certificate.
| | 01:08 | Okay, so in order to do that, I am going
to go to the Flash tab, and I am going to
| | 01:13 | change this to Adobe AIR 2, because
every Adobe AIR app gives you the option to
| | 01:20 | create a signed certificate.
| | 01:22 | So change that to Adobe AIR 2, click on
Settings, and don't worry about filling
| | 01:28 | any of this in; just go to the Signature tab.
| | 01:31 | So from here, a signed certificate is
needed for every app that's going to go
| | 01:37 | in the Android market.
| | 01:38 | It's going to be a p12 file, and I am
going to go ahead and create a new one.
| | 01:42 | So I am select New. Publisher name.
| | 01:45 | Just start filling in the blank.
| | 01:53 | I am going to give it a password,
and then I want to make sure it's a 1024-RSA
| | 02:02 | file. That's the type it is so
it will work for Android apps.
| | 02:07 | I can go ahead and save it out, so
we'll just call this lyndaMobileGame, and
| | 02:15 | I'll click this folder. And again, I
am going to save it to the Desktop.
| | 02:19 | Select Open, OK, and a
self-signed certificate has been created.
| | 02:27 | I'll click OK, and I'll cancel out of this.
| | 02:29 | All right, so I have those two files created.
| | 02:33 | Now, I am going to go to my Desktop.
| | 02:36 | This is an XML file that was created from AIR,
| | 02:39 | so it created in AIR 2 file.
| | 02:41 | I don't need this file at all.
| | 02:43 | In fact, I am just going to
right-click and move it to the trash.
| | 02:46 | I want to use one that's
specific for mobile devices, okay.
| | 02:50 | So I have my SWF, here is my signed
certificate, and now I need to go ahead and
| | 02:55 | get my Invaders-app.xml file.
| | 03:00 | Okay, so this is an XML descriptor file
that describes how to treat this SWF, and
| | 03:06 | really what it contains
and defines the permissions.
| | 03:09 | So I am just going to take this and
I'll copy it, and I'll close that, and I am
| | 03:15 | just going to paste it
onto my Desktop right there.
| | 03:17 | Another thing I am going to do is I am
going to go in to the Assets folder, into
| | 03:21 | the Graphics folder, because I am going
to need these icons as well, the 36x36-
| | 03:27 | pixel png file, a 48x48 and a 72x72.
| | 03:33 | These are the various icon
buttons that are required for my apps.
| | 03:37 | I am going to take all three of those.
| | 03:38 | I am going to copy them and
place them on my Desktop as well.
| | 03:44 | So everything is looking good so far.
| | 03:46 | I have my icons down here, these two
files as well, and I need to go ahead and
| | 03:53 | define the elements and basic
information in this xml file.
| | 03:59 | So I am going to go ahead
and open it up in Dreamweaver.
| | 04:03 | Now, you can use any text editor that
you want, but I am going to go ahead and
| | 04:06 | use Dreamweaver to define the
various elements of this file.
| | 04:10 | All right, right at the top, notice
that it does say this is an application
| | 04:15 | that's using Adobe AIR 2.5,
| | 04:18 | so there is additional functionality in this.
| | 04:20 | AIR 2.5 is for mobile devices--
| | 04:23 | not that you have to worry about that,
because you don't even need to touch that.
| | 04:26 | I do need to first give it an ID.
| | 04:28 | This is going to be a reverse
domain format is what's commonly done.
| | 04:32 | So I am just going to do com.lynda.Invaders.
| | 04:38 | So this last word right here
is going to be at the end, which
| | 04:42 | describes, basically, the game.
| | 04:44 | This is the version number, okay, so you
can actually continually add to it, and
| | 04:49 | then you're going to have the file name.
| | 04:52 | In this case the file name is Invaders.
| | 04:57 | Next up is going to be the
description, so "This is a Space Invaders
| | 05:04 | style game, but better." How about that?
| | 05:07 | All right, so you type in the description.
Right in here if you want to localize
| | 05:11 | it based on the language, you can go ahead
and define what that is. That's grayed out.
| | 05:16 | I don't even need to worry about that at all.
| | 05:19 | I do need to give it an actual name
for this game as well, so Doodle Galaxy
| | 05:27 | Invaders is its actual name, and we can
localize the name as well by language.
| | 05:35 | Down here for the
copyright, put in your copyright.
| | 05:40 | Add the content right in here.
| | 05:42 | Well, it's not Invaders_Final.
| | 05:43 | This is whatever the name of your swf file is.
| | 05:47 | Visibility is set to true,
fullScreen, of course, is going to be true.
| | 05:50 | It's going to go full
screen by default, actually.
| | 05:53 | We want to define whether it autoorients,
so this might be false or it might be true.
| | 05:58 | Well, I don't want this to autoOrient.
| | 06:00 | In fact, I want its aspect ratio to be landscape,
| | 06:05 | so I am just going to remove that or portrait.
| | 06:09 | Next up, the rendermode,
it's going to be CPU or GPU.
| | 06:15 | GPU is the Graphics Processor Unit,
so this going to help me basically
| | 06:21 | optimize the graphics and use the
actual hardware of the device to move all
| | 06:26 | the graphics around.
| | 06:27 | So I want to change this to GPU, and
you want to use GPU if you used any
| | 06:33 | cacheAsBitmap calls, which I
did earlier. customUpdateUI,
| | 06:38 | well, it could be false or true.
| | 06:40 | I am not going to worry
about that updating UI at all.
| | 06:42 | This isn't necessarily some
rich Internet application;
| | 06:45 | it's just going to be set to false.
| | 06:47 | BrowserInvocation, false.
| | 06:50 | Basically if you don't know what it is,
you can set it to false, and right in
| | 06:53 | here, here's where I define my icons,
| | 06:56 | so that's why I moved them to the Desktop.
| | 06:58 | They are all in place.
| | 06:59 | Know that these are the three sizes
required, and they are in the appropriate
| | 07:04 | location. And right down in here, this is
where we get to the meat of this file, if you will.
| | 07:10 | This is where I define all of my permissions.
| | 07:13 | So when the user downloads this app,
it's actually going to give them just a
| | 07:17 | little pop-up that says, hey, you
know what, this is going to access the
| | 07:21 | Internet, for instance.
| | 07:22 | So again, if my app needs to access the
Internet, then I'd make sure this is in here.
| | 07:28 | But it doesn't, so I can remove it.
| | 07:31 | Okay, right to the external storage, I
don't need most of these, but I did keep
| | 07:35 | them in here in case you were
curious about using any one of these.
| | 07:38 | You can read the PHONE_STATES, use the
camera, record audio, all sorts of things.
| | 07:43 | But specifically for this game, I want
to just remove all of these, except for
| | 07:49 | the WAKE_LOCK. So the WAKE_LOCK I
want to keep, because again, it's using
| | 07:55 | accelerometer, and I want to make
sure that screen doesn't go to sleep.
| | 07:59 | All right, with that all done, all I
need to do is just save this file, and it's
| | 08:06 | all set up, so I'll just minimize that.
| | 08:09 | All these files are ready.
| | 08:11 | Now, the next step with these files is
to take them all and package them up into
| | 08:17 | an APK file, the actual app
file that will go on a device.
| | Collapse this transcript |
| Creating the app (Mac)| 00:00 | Once you have all of your files that
you need for your app, the next step is
| | 00:04 | going to be taking all of these files
and packaging them up into an APK file,
| | 00:11 | which is the format of a mobile
application for Android devices.
| | 00:15 | And in order to do that, what
I'm going to use is the AIR SDK.
| | 00:20 | So if you go to adobe.com/products/error/sdk,
you can go ahead and download it.
| | 00:30 | Now the key tool I am going to use
here is this Adobe AIR Developer tool.
| | 00:35 | From the command line, I am going
to go ahead and use this Adobe AIR
| | 00:38 | Developer tool, ADT.
| | 00:40 | So, just go ahead and download it.
| | 00:42 | I've actually already downloaded it.
| | 00:44 | You can see it right here.
| | 00:45 | And I'll just unzip this file,
and here's the Adobe AIR SDK.
| | 00:54 | I am going to go ahead and drag this
onto my Desktop, and I am going to place it
| | 00:58 | right there, and I am
going to close this folder.
| | 01:01 | So, what I want to do is with this
AIR SDK, inside of this bin folder is
| | 01:08 | where this ADT file is.
| | 01:11 | This is actually an executable.
| | 01:13 | And I want to run this adt executable
and use it to basically package up all
| | 01:19 | these elements into an APK.
| | 01:21 | And I am going to do
that using the command line.
| | 01:23 | So, on a Mac, just go ahead and hit the
Search button and search for Terminal.
| | 01:29 | As soon as it's selected,
you can go ahead and hit Enter.
| | 01:33 | It is in your Applications folder. And I
am just going to go ahead and increase
| | 01:37 | this font just by hitting Command+Plus,
because I am going to go ahead and use this
| | 01:44 | to target that ADT file, as well as these files.
| | 01:50 | So, the first thing I need
to do is point to my Desktop.
| | 01:52 | So I need to say the current directory,
cd desktop, and I want to point inside of
| | 01:59 | that AdobeAIRSDK folder/bin into this
folder right here, because I want to
| | 02:10 | really get to this ADT file.
| | 02:12 | And really, to make this even
easier on me, what I can do,
| | 02:15 | and I encourage you to just take
all of these files, the icons, xml,
| | 02:20 | certification, and just drag
them into that same bin folder.
| | 02:23 | That's just going to mean
that I have less to type in here.
| | 02:26 | All right, so that's the folder I am targeting.
| | 02:28 | That's going to be the current directory.
| | 02:30 | That's what it is known as, the cd.
| | 02:32 | Now, I want to go ahead and use
adt to package up those files.
| | 02:37 | So I'm going to say ./adt,
which is in that folder.
| | 02:43 | I want to package and target an APK file.
| | 02:49 | The storetype is going to be pkcs12,
and keystore is also what I need, because
| | 03:02 | I need to go ahead and use that mycert.p12,
and notice how it is right here in mycertp12.
| | 03:11 | Okay, so I'm not including that
certification file, which I need. The next thing I am
| | 03:16 | going to do is I am going to go ahead
and give this APK file a name, and I am
| | 03:20 | just going to call Invaders.apk.
| | 03:25 | And within that Invaders.apk, this
assigned Invaders.apk file, it's going to
| | 03:31 | have the Invaders-app.xml, this xml file.
| | 03:38 | You can see right here.
| | 03:40 | And then it's also going to
have the Invaders-swf file.
| | 03:47 | Now, if you remember, this XML file
actually does point to these PNG files.
| | 03:53 | So, if there's any reference to any
external graphic, you need to make sure you
| | 03:57 | include that in here as well.
And that's the case with these icons, so icon48,
| | 04:05 | icon72, and icon36.png.
| | 04:14 | All right, so this needs to be exact,
so go through and make sure there are no
| | 04:19 | spaces. Make sure the
capitalizations are appropriate.
| | 04:23 | And if everything is set up correctly,
all you need to do is you hit Enter, and
| | 04:27 | it will ask you for the password
when you first created this p12 file.
| | 04:32 | So I will enter that in, and then it
goes through and creates an APK file.
| | 04:41 | So, as I scroll down, you can
see here's the Invaders.apk file.
| | 04:47 | So again, as long as you have the
Adobe AIR SDK, you can access this ADT
| | 04:52 | file, which you can use using the command line
to package up all these files to make an APK.
| | 05:00 | So really, the next step is to take
this APK and put it on an actual device.
| | Collapse this transcript |
| Creating the app (PC)| 00:00 | So, I am going to show you how you
can go ahead and package up all of these
| | 00:03 | files into an actual app
file that can be distributed.
| | 00:08 | So, I want to make an APK file.
| | 00:11 | I'm going to use a couple of different things.
| | 00:14 | I am going to use JAVA, I am going to
use the Adobe AIR SDK, and I'm going to
| | 00:17 | package everything up using the command line.
| | 00:20 | Now, it sounds pretty complex,
but it is fairly straightforward.
| | 00:23 | But the first thing we need is we need
to go ahead and get the Adobe AIR SDK.
| | 00:29 | So go to Adobe.com, and you can just do
a search for Adobe AIR SDK if you want,
| | 00:34 | or the actual URL is adobe.com/products/air/sdk.
| | 00:42 | And notice it does list out what it
contains, and really what I want to use is I
| | 00:47 | want to use the command line, this
ADT tool, the Adobe AIR Developer tool.
| | 00:52 | So, I am going to use ADT to package
up those elements, all of those files.
| | 00:57 | Okay, so, of course, I'm on a
Windows machine, so just go ahead and click
| | 01:01 | Download now for Windows.
| | 01:03 | I've actually already done that.
| | 01:03 | So, again, right here, this is
what I have downloaded is this folder.
| | 01:09 | Again, you will download a zip file and
just unzip it, and this is what you get.
| | 01:13 | Luckily, you only need to be concerned
about one file in here, and it happens to
| | 01:17 | be in this bin folder.
| | 01:19 | I will double-click on that,
and that adt is what I need.
| | 01:23 | In fact, what I am going to do is I am
just going to go ahead and drag all of
| | 01:27 | these files into this folder, because
again, I am going to use this batch file to
| | 01:34 | package up all of these files into one APK file.
| | 01:39 | Now, I am going to do this using
the command line as well as Java.
| | 01:44 | So, I first need to make sure Java is installed.
| | 01:47 | So, I am just going to go to Computer,
and I'll go into Local Disk, into your
| | 01:53 | Program Files, and you should see Java in there.
| | 01:57 | In fact, if I open that up, here is my jre6.
| | 02:01 | And again, in this bin folder,
you can see it's java right here.
| | 02:06 | Or what you could do is you could
just go ahead and search for java.exe.
| | 02:10 | But again, I just want to be aware
that it is there, and I want to be aware of
| | 02:14 | the path to it exactly as well.
| | 02:17 | If you don't have Java installed for
some reason, you can actually download the
| | 02:21 | latest version from the Internet.
| | 02:24 | But again, I can see that it's installed.
| | 02:26 | I just want to be aware of where it is,
because I need to do something with this path.
| | 02:30 | I need to add it to my system file,
so I am going to go ahead and just copy
| | 02:37 | this path right here.
| | 02:39 | And what I need to do is I need to
go ahead and do a search for Advanced
| | 02:47 | System Setting.
| | 02:49 | All right, so just do a search
just by clicking the Windows icon,
| | 02:54 | Advanced System Settings.
| | 02:56 | So, that's what I need.
| | 02:57 | It is in the Control panel.
| | 02:59 | But this is just a quick way to get to it.
| | 03:01 | You want to open up your
Advanced System Settings.
| | 03:03 | And I need to add that path
to my Environment Variables.
| | 03:08 | So, when I use the command line, my command
line needs to know where that java.exe is.
| | 03:15 | So I am going to select Environment
Variables, and again, I want to be aware
| | 03:20 | of that path and I quite frankly need to add it
to the path, not PATHEXT, the path right here.
| | 03:27 | So, just select Path,
double-click, and I need to add it,
| | 03:31 | so I don't want to remove anything,
please don't, but right down here at the end,
| | 03:35 | just do a semicolon and then paste in that line.
| | 03:40 | Again, it's pointing to that
java.exe. Just paste in that line.
| | 03:43 | You can see it right here,
;c clear down to that file.
| | 03:49 | Once that's done, I will
click OK. Click OK again.
| | 03:53 | And again, there might be a chance
that you already have that path added, so
| | 03:56 | please review those various paths
in there, just to make sure you don't.
| | 04:00 | But nonetheless, it is added now.
| | 04:02 | I will go ahead and click
OK, and now that's set up.
| | 04:05 | So I can go ahead and close that window.
| | 04:07 | And let's just move this off to the side,
because what I want to do now is I am going
| | 04:11 | to go ahead use the command
line to package up everything.
| | 04:15 | So again, click on the Start menu,
and just do a search for 'cmd' for commandline.
| | 04:20 | There is my executable.
| | 04:22 | I'll go ahead and select it, and that
will open up this command line window.
| | 04:27 | So this is where we are going
to get all of our work done.
| | 04:29 | So, I what I want to do is I
first need to target this folder.
| | 04:33 | So, I am going to change the current
directory, so I am going to cd for current
| | 04:36 | directory, desktop. What is on the desktop?
| | 04:41 | Well, this folder is.
| | 04:42 | I need to type in AdobeAIRSDK.
| | 04:45 | I'm typing it exactly as it's listed
here, caps and all, and then the bin folder,
| | 04:52 | forward slash, just like that.
| | 04:55 | Hit Enter and now I'm targeting this folder.
| | 04:59 | Now, with all of those various files,
especially the ADT batch file, I want to say adt,
| | 05:05 | with that batch file, I need to
package up and target an APK file.
| | 05:13 | So that's what I am going to make.
| | 05:15 | The storetype, again, I am going to add
the storetype because it is going to be
| | 05:19 | a secure APK file I am going to make.
| | 05:21 | Storetype is going to be pkcs12.
That's the security for mycert.p12.
| | 05:31 | Storetype is pkcs12 keystore mycerts.p12,
again, that's the certification file.
| | 05:42 | Everything is typed correctly, space,
Invaders.apk is what I am going to make.
| | 05:49 | And now I can start listing out all of
these files right in here that I want
| | 05:53 | to package up with it.
| | 05:54 | All right, so Invaders.app.xml Invaders.
| | 06:02 | Again, I've got to be aware of
my capitalizations in here.
| | 06:05 | swf icon36.png icon48.png,
and then there is icon72.png.
| | 06:19 | All right, so keep in mind there is no
spaces before these dashes and the word,
| | 06:24 | and I'm just reviewing everything.
| | 06:26 | Everything looks pretty good.
| | 06:28 | There is just a single space in
between all of these file names.
| | 06:31 | Everything looks good.
| | 06:33 | So all I need to do is hit Return,
and what it asks me for is the password.
| | 06:38 | And again, that's a password that I used
when I created this mycert file, so in
| | 06:43 | this case it's Johnson.
| | 06:47 | I've typed it in. Even though
it doesn't show it in there,
| | 06:49 | know that I did type it in. I will hit Enter.
| | 06:54 | And then sure enough, what does it do?
| | 06:56 | It creates that APK file, almost
like magic. But this is great!
| | 07:02 | So this is actually my packaged-up
application, my app file for Android devices.
| | 07:07 | So I can go ahead and take this.
| | 07:09 | I could quite frankly upload it to the
Android market if I want to, but what I
| | 07:13 | want to do with this now is go ahead
and test it out on an actual Droid device.
| | Collapse this transcript |
| Publishing to an Android device (Mac)| 00:00 | Now that I have an APK file created,
what I want to do with this file, which is
| | 00:05 | really my game, is I want to go
ahead and put it on my Droid device.
| | 00:09 | So, I happen to have a Motorola Droid
2 that I want to put this APK file on,
| | 00:13 | but there is one thing I need
to do on my Droid device first.
| | 00:19 | So here's my Motorola Droid 2.
| | 00:21 | I am going to go ahead and hit that
Options button down in the lower-left, and I
| | 00:25 | am going to go into the Settings.
| | 00:28 | Now, some of these buttons might not
be exactly the same depending on your
| | 00:32 | Droid device, but it will be in
Settings, and if you go into Applications, there
| | 00:38 | should be Development.
| | 00:40 | So, select Development to
set Development options.
| | 00:45 | And right within this list,
notice it says USB debugging.
| | 00:50 | So, debug mode when USB is
connected, go ahead and check that.
| | 00:56 | You can also allow for mock locations if
you are doing any location-based gaming
| | 01:00 | or anything like that, but again,
that's the only box you need to check.
| | 01:04 | And when you're done with that, you
can just go ahead and hit on that Home
| | 01:08 | button, and now the device
is ready and good to go.
| | 01:11 | So, from here, I can go ahead and connect
this device to the computer through a USB cable.
| | 01:21 | Now, with my device connected by USB,
what I want to do is I want to transfer
| | 01:25 | this APK file to the device.
| | 01:28 | But what I need to do in order to do
that is I need to go ahead and get the SDK
| | 01:33 | from Android, the Android SDK.
| | 01:36 | If you go to developer.android.com,
it's that second tab right here, so select
| | 01:42 | SDK, and then right in here, if you're
on the Mac or Windows, you just select
| | 01:47 | the appropriate one.
| | 01:48 | I am going to go ahead and
download this Android-sdk release 8.
| | 01:53 | It will download it.
| | 01:56 | Now, I can go ahead and double-click on
that file, and notice here are all of the
| | 02:02 | assets that I had just downloaded.
| | 02:04 | So, I am going to go ahead and take
this entire folder and I am going to just
| | 02:08 | put it on my Desktop.
| | 02:09 | I am going to make it easy to get to.
| | 02:12 | So, I will take this entire folder and
put it right on my desktop, close that,
| | 02:17 | and I'm going to rename this
because I just want to reference it as
| | 02:22 | AndroidSDK, just like that. All right.
| | 02:26 | Now, if you recall, all of my files are in here,
but really all I need is this Invaders.apk.
| | 02:35 | So, again, I want to package that up.
| | 02:37 | I am going to use this AndroidSDK to do that.
| | 02:40 | I am going to go into tools, and the
first thing you are going to need to do is
| | 02:45 | launch this android SDK right here.
| | 02:47 | This is an executable. Click Open.
| | 02:50 | It will launch. And you need
to go to Available packages.
| | 02:55 | And if you check the Android Repository, it
will go ahead and install all of these items.
| | 03:03 | So, that's exactly what I want to do.
| | 03:04 | I want to install everything.
| | 03:06 | I am really only going to use one file
out of here, but let's just go ahead and
| | 03:09 | install all of these items.
| | 03:12 | It might say there might be
some dependencies. Either way,
| | 03:16 | I am just going to select Accept
All and then install everything.
| | 03:24 | Everything is installed.
| | 03:26 | It says, well, do you want to restart ADB now?
| | 03:28 | I will say sure and restart it.
| | 03:32 | Ten packages are installed.
| | 03:33 | I will go ahead and click Close.
| | 03:35 | Its going to do quite a few things, by
the way, but really what I want to do is I
| | 03:40 | want to go ahead and take a look at
one tool in particular that I have
| | 03:44 | downloaded, because it did install all
of these various folders right in here.
| | 03:50 | But again, I am going to go
ahead and open this folder, and within
| | 03:54 | platform-tools, you'll find this ADB file.
| | 03:59 | This is the Android Debug Bridge.
| | 04:03 | So, that's actually what I am going to use
to take this APK and install on my device.
| | 04:09 | But to make this even easier on me, I am
going to go ahead and take this APK and
| | 04:14 | drag it right into this folder here.
| | 04:16 | All right. Okay, so let's set this up.
| | 04:21 | Again, I am just going to use this
APK file and that adb tool right there.
| | 04:27 | So, I am going to go ahead and use my search
tool to search for the terminal and launch it.
| | 04:33 | Here's my new terminal window.
| | 04:34 | I will just do Command+Plus to increase that
font size, and now I can go ahead and install.
| | 04:40 | This file is using the adb executable.
| | 04:44 | But what I need to do is I actually need
to target the directory that they're in.
| | 04:48 | So, I am going to say cd for current directory,
| | 04:51 | there on the Desktop, forward slash.
| | 04:55 | They are inside that Android SDK folder,
SDK/platform-tools, just like that.
| | 05:06 | So, I am targeting that
folder. I will hit Enter.
| | 05:10 | Now, with that folder targeted, I can
go ahead and use that adb, that Android
| | 05:16 | Debug Bridge to install the Invaders.apk file.
| | 05:22 | Just like that, I will hit Enter.
| | 05:25 | It goes through and installs it.
| | 05:27 | As you can see, success, and it
tells me exactly where it installs it.
| | 05:32 | So, works out great. Now I can go
ahead and check it out on the device.
| | 05:38 | Here's my Motorola Droid 2.
| | 05:39 | I am going to go ahead and go where
all my applications are, and I'm going to
| | 05:45 | scroll to where that
Doodle Galaxy Invaders app is.
| | 05:49 | As you can see, it does have the icon.
| | 05:52 | You can see it right there.
| | 05:53 | Again, there's no transparency on it,
but again, I can just go ahead and select
| | 05:57 | it and the game will start.
| | 06:04 | Here's the intro screen.
| | 06:05 | I'll go ahead and select Play to play the game.
(explosions)
| | 06:25 | So, I am able to tilt the device and
play the game, and depending on how well I
| | 06:30 | do will determine what I
get for the high score screen.
| | 06:34 | Whether I enter in my name or maybe--
especially if it's my first time, I get the
| | 06:39 | opportunity to inter in my name. And if
I do select that input text field, I can
| | 06:45 | go ahead and type in my name.
| | 06:46 | It actually activates the keyboard.
| | 06:50 | I can type in my name, click Done, click Enter.
| | 06:56 | It says, "Great job."
| | 06:59 | Now, I will go ahead and play again.
| | 07:00 | So, I can play the game again, but you
can see that it's working, and I was able
| | 07:03 | to publish out to the device pretty easily.
| | Collapse this transcript |
| Publishing to an Android device (PC)| 00:00 | Now that I have an APK file created,
what I want to do with this file, which is
| | 00:05 | really my game, is I want to go
ahead and put it on my Droid device.
| | 00:09 | So I happened to have a Motorola Droid
2 that I want to put this APK file on,
| | 00:13 | but there is one thing I need
to do on my droid device first.
| | 00:19 | So here's my Motorola Droid 2.
| | 00:21 | I'm going to go ahead and hit that
Options button down in the lower-left, and I
| | 00:26 | am going to go into the Settings.
| | 00:28 | Now some of these buttons might not
be exactly the same depending on your
| | 00:32 | droid device, but it will be in
Settings, and if you go into Applications there
| | 00:38 | should be Development.
| | 00:40 | So select Development to set
Development options, and right within this list
| | 00:47 | notice it says USB debugging.
| | 00:50 | So debug mode when USB is
connected, go ahead and check that.
| | 00:56 | You can also allow for mock locations
if you do any location-based gaming or
| | 01:00 | anything like that, but again, that's
the only box you need to check, and when
| | 01:05 | you're done with that you can just go
ahead and hit on that Home button and now
| | 01:09 | the device is ready and good to go.
| | 01:11 | So from here I can go ahead and connect this
device to the computer through a USB cable.
| | 01:21 | Now, we're really getting down to the
fun part where we actually get to take our
| | 01:24 | game and put it on an
actual device and play with it.
| | 01:28 | So again, here's my game right here.
It's an APK file. And I want to take that and
| | 01:33 | push it out to this Motorola Droid
that I have connected via USB already, so
| | 01:39 | it's already connected, and that's how I
choose to push it out to the device and
| | 01:43 | know that I can also take this APK and
I can email it to the device, or I can
| | 01:48 | put it on a URL and go to
that URL on the device as well.
| | 01:52 | So there are many different ways,
but I find connecting it through USB just
| | 01:56 | makes development much faster.
| | 01:58 | So really, what I need to make
this happen is the AndroidSDK.
| | 02:03 | So I'm going to go ahead and go to
developer.android.com, and right there on the
| | 02:10 | Home page you'll see Download, and
this is where you'll download the SDK.
| | 02:14 | I will click Learn More, and again,
this is constantly being updated, but you
| | 02:19 | can see right here in this main area,
here's my Windows link for that SDK, and
| | 02:26 | I can select it and download it.
| | 02:29 | It is a zip file, so again
just download it, unzip it.
| | 02:32 | I've actually already done that, so
it's right here, so I'm going to click
| | 02:35 | Cancel, and I'll just open up that folder.
| | 02:38 | As you can see, these are all of the
items that I've already downloaded, but
| | 02:43 | before I get into that information, I
would like to point out a couple resources
| | 02:46 | on this page, because everything from
the blog to the forums is really helpful,
| | 02:50 | but know that since I'm connecting this
device through USB, I need to make sure
| | 02:55 | my USB drivers are up to date.
| | 02:57 | So if yours aren't for some reason, you
might consider going out here and just
| | 03:01 | updating your drivers, okay.
| | 03:03 | My drivers are doing fine on this droid
device, so I don't need to do that and
| | 03:06 | you might not need to either.
| | 03:08 | But nonetheless, just go ahead
and download that SDK. Here it is.
| | 03:13 | I'll open this up, and the first thing you
would want to do is run this SDK manager.
| | 03:19 | This is really going to
install everything that you need.
| | 03:23 | So I'll run this, and as you can see,
I pretty much have everything already
| | 03:27 | installed. So again your list may vary,
but again, I have one item on my list that
| | 03:32 | I can go ahead and install. But again,
just make sure they're all checked and
| | 03:36 | then select Accept All, just to install
everything, just to make sure you have
| | 03:41 | everything you need. Click Install.
In this case, I'm fully up to date, so I can
| | 03:46 | just click Close, and that could take up
to 10 minutes, by the way, but notice it
| | 03:51 | does install quite a few things and a
lot of tools you might end up needing.
| | 03:56 | But again when it comes to just pushing
out an APK to a device, I am really only
| | 04:02 | need the Android Debug Bridge, so
let's take a look at where is that at.
| | 04:05 | Now that everything is installed, if I
go back out here to this folder, notice
| | 04:10 | that there's this Platform tools folder, and
this gets installed when you run the SDK manager.
| | 04:17 | So I'll open this up, and
nonetheless here is the ADB, our Android Debug
| | 04:22 | Bridge that I want to run.
| | 04:23 | Now I'm going to use this to
push out this APK to my device.
| | 04:29 | So I'm going to takes this APK and I'm
just going to drag it into that same folder.
| | 04:33 | Okay this is just going to make
development a little quicker for me.
| | 04:36 | I'll move this off to the side, and
again I'm going to use this to package up
| | 04:40 | this APK, and I'm going to do
that through the command line.
| | 04:43 | So I'm to go ahead and select the Start
menu, and I'll just type CMD. There is my
| | 04:49 | executable so I can hit Enter,
select it, and here we are.
| | 04:54 | So the first thing I need to do is I
need to target that specific folder.
| | 04:58 | So I'm going to say CD for Current
Desktop and type in Desktop and point to that
| | 05:04 | specific folder, so AndroidSDK.
So whatever that folder is called, again, I have
| | 05:10 | just renamed it and to make it a little
shorter and easier to type, and I want to
| | 05:15 | make sure that everything is
capitalized appropriately. AndroidSDK/platform dash
| | 05:22 | tools right in that folder.
| | 05:25 | I'll just do a forward slash, hit
Enter, and now I'm targeting this folder.
| | 05:29 | Now the next thing I need to do is I
need to go ahead and use the ADB, so just
| | 05:33 | type in ADB install and then Invaders.apk.
| | 05:39 | Since it's in that same folder, this
is really easy to type. I would say it's
| | 05:42 | pretty darn straightforward,
and that's all I need to do.
| | 05:46 | So again, I'm going to make sure
my device is connected by USB.
| | 05:49 | I'm going to make sure my drivers are
up to date, and if they are, all you need to do is hit Enter.
| | 05:53 | It will go ahead and take that APK.
Sure enough, success is what it says here, and
| | 06:00 | it pushes it out to my device.
And here's my Droid 2, so all I need to do is go
| | 06:07 | to my Applications area, where all my
applications are at. Notice how it says
| | 06:13 | Doodle Galaxy Invaders.
| | 06:15 | I can go ahead and select that app to launch it.
| | 06:23 | Here's the intro screen. I can go
ahead and click Play to play the game.
| | 06:28 | So using only really one of the features
of the Android SDK, I can easily take any
| | 06:42 | APK and push it out to a connected device.
| | Collapse this transcript |
|
|
9. Uploading to the Android MarketUploading to the Android market| 00:00 | Now comes the exciting part,
| | 00:02 | taking your application, your APK file,
and uploading it to the Android Market.
| | 00:08 | And it's quite easy, to be
honest. All you have to do is go to
| | 00:11 | developer.android.com. Off to the side,
you'll see this Publish where we're actually
| | 00:17 | going to publish to the Android Market,
and it's an open service, so it's actually
| | 00:21 | free to upload as many apps as you want.
| | 00:24 | Okay, so it's free to upload them.
| | 00:26 | Now, there is one thing I need to warn
you about, because as I click on that
| | 00:31 | link, I can see various apps, but right
down here at the bottom, this is where you become a developer.
| | 00:37 | So you click here and then you fill out a form.
| | 00:41 | I have already done that, but the one
thing you'll need to know about becoming
| | 00:44 | an Android developer is
that it will cost $25, okay.
| | 00:50 | Its 25 bucks for a year, and again,
that means unlimited applications you can
| | 00:56 | upload. And with such a market growing,
all these various Android devices being
| | 01:01 | released almost weekly, it
makes it a really good investment.
| | 01:05 | So again, once you pay that, you can go
ahead and upload as many apps as you want.
| | 01:10 | I already have a couple in here, okay.
| | 01:12 | And not only is it doing some tracking,
but notice that they are free as well.
| | 01:18 | So I get some stats. But what I want to
do is I want to go ahead and upload the
| | 01:22 | application I have made.
| | 01:23 | So I am going to select Upload Application.
| | 01:27 | Now right in here, it's
basically fill-in-the-blank.
| | 01:31 | So again, I want to take that
APK file and I want to upload it.
| | 01:34 | So I want to select Choose File. I'm going
to go to my Desktop. I'm going to go into the
| | 01:41 | AndroidSDK, and the last place I had it
was in the platform-tools folder, and here
| | 01:49 | is my Invaders.apk file.
| | 01:52 | So I'll click Choose, and then I'll click Upload.
| | 01:55 | All right, there it is.
| | 01:59 | Notice that it does have an icon.
There is actually a couple different icons, the
| | 02:03 | VersionName, different things.
| | 02:05 | There is 1 permission that we warn
the user about, which means that there is
| | 02:09 | that wake lock call, so the screen is
not going to go to sleep so they could
| | 02:13 | still play the game.
| | 02:14 | All right, so it will give you any sort
of warnings just for you to be aware of,
| | 02:17 | just to make sure you
have those in there as well.
| | 02:20 | All right, next steps are the screenshots.
| | 02:23 | Okay, so you can upload screenshots that
appear when you see the description of your game.
| | 02:29 | So I'm going to go ahead and choose a
couple of those. In my Assets folder, in
| | 02:34 | Graphics, I'm going to go ahead and
choose those particular files.
| | 02:41 | These screenshots for my
app are these 480 x 854 images.
| | 02:46 | So they're JPEGs--they could also
be PNG files--but they're just quick
| | 02:50 | representations of the
game play and the first screens.
| | 02:54 | So I'll choose that one.
| | 02:56 | I'll upload it. There it is.
| | 03:00 | I'll go ahead and add another. Choose
File and add that second screen as well.
| | 03:06 | All right, so there are my screenshots.
| | 03:12 | Next step the high-resolution
application icon, and again, this is a 512 x 512
| | 03:19 | image. It could be a PNG or JPEG, so I
just go ahead and create those files.
| | 03:22 | Again, they're already created.
Here it is, this 512 image. That's what it looks like.
| | 03:28 | Choose that. Click Upload.
| | 03:30 | The promotional graphic which
will be used, say for instance, on that
| | 03:36 | previous page I have shown,
| | 03:38 | I want to probably make that as well
and upload it, so that's 180 x 120 image.
| | 03:44 | And notice that a lot of these images
are pretty similar, just in different sizes
| | 03:48 | and different crops.
| | 03:50 | Click Upload and this feature graphic
is also optional, but again I have made
| | 03:58 | one, so I'll just go ahead
and upload that large image.
| | 04:01 | It's actually 1024 x 500.
Choose it. Click Upload.
| | 04:06 | All right, so I have all my graphics uploaded.
| | 04:09 | I can have a promotional video.
| | 04:11 | I want to opt out promoting the
application, say for instance, if it's for
| | 04:15 | select group of people, I might consider
checking that box, but really want this
| | 04:19 | to be free for everybody.
| | 04:21 | And now I can jump in
here to the Listing details.
| | 04:24 | So again, I'm supplying to the
Android Market the various details of this
| | 04:28 | application, Doodle Galaxy Invaders description.
| | 04:36 | All right, a little description.
Pretty much they just need to know that it's like
| | 04:42 | a space-invaders-type game, but I'd
want to talk it up as much as possible in
| | 04:46 | here in this description, just
not too much text is all.
| | 04:50 | Any recent changes, again, if this is
the 2.0 version and I've added, say for
| | 04:54 | instance, more aliens, I might want to
describe that, and then promotional text.
| | 05:01 | There is my promotional text.
| | 05:03 | Application Type, it could be an
application, but of course this is a game, so
| | 05:06 | I am selecting Game.
| | 05:08 | Category, well, again, I got plenty in
here. This is just a casual game. That was
| | 05:13 | the purpose of it, for a user just to
play while they standing in line waiting
| | 05:17 | at the bank, or whatever the case may be.
| | 05:19 | Price is going to be free.
| | 05:20 | Now I can set up a merchant account,
and I would go ahead and do that and
| | 05:25 | Google Checkout would be used. But what
I need there is I would need a text ID
| | 05:29 | and some other technical information.
But in this case, since I want everybody
| | 05:33 | have this game, I want to go
ahead and keep it as free.
| | 05:35 | Now, a good idea is to have potentially
like a lite version of a game L-I-T-E and
| | 05:41 | then the full version that
you'd actually charge for.
| | 05:43 | So you can do both with one game, but in
this case this one's just going to be free.
| | 05:49 | Okay, Copy Protection is going to be off, so
anybody can copy it as many times as they want.
| | 05:55 | The content, well, this is pretty much
for everybody, and locations, there is no
| | 06:00 | location issue, because there is
really not a whole lot of text in it.
| | 06:03 | I think anybody, regardless of where you
live or what language you speak, should
| | 06:08 | be able to play this game.
| | 06:10 | Lastly, we have the contact information,
web site, email, as well as phone number.
| | 06:15 | You can enter in, and this came from my
profile, so when you first sign up as a
| | 06:19 | developer, that's where this information
will come from, and you can always change it.
| | 06:22 | All right, so Android Content
Guidelines, those are additional guidelines just
| | 06:28 | saying you adhere to all the basic
rules and suggestions as far as the graphics
| | 06:33 | go and the content as well.
| | 06:35 | So again, this is a free market, so
these are just guidelines. Overall you're not
| | 06:40 | going to have a problem at all
submitting your app, but it does meet the Android
| | 06:45 | content guidelines, and I want to
check this last check box as well.
| | 06:50 | I'll click Publish, and there
it is, Doodle Galaxy Invaders.
| | 06:57 | Currently is not rated, nor has been
downloaded. So as you can see, it's really easy
| | 07:02 | to upload a game, or pretty much
any mobile app, to the Android Market.
| | Collapse this transcript |
| Downloading from the Android market| 00:00 | Now, comes the fun part.
| | 00:02 | Now I get the opportunity to go out to
the Android Market on an Android phone
| | 00:07 | and then download my game app.
| | 00:09 | So I am going to launch the Android
Market, and I'm just going to do a quick
| | 00:13 | search on "doodle galaxy," and I'll just hit go.
| | 00:26 | There it is, Doodle Galaxy
Invaders. It is a free app.
| | 00:31 | I'll just select it.
| | 00:34 | It does give me a little bit of a
description. I can see the images that I
| | 00:38 | uploaded. It all looks good.
| | 00:41 | I can see comments and similar, but what I
really want to do is I just want to click Install.
| | 00:48 | And it does say this application has
access to the following: the system tools,
| | 00:53 | which is going to prevent the phone from
sleeping, which is what I want it to do. Select OK.
| | 01:01 | It downloads my app, and now if I go
where all my applications are, there it is,
| | 01:13 | Doodle Galaxy Invaders.
| | 01:15 | I'll just select it. Sure enough, there
it is. I can go ahead and play the game.
| | 01:25 | Now, I'm playing the game. You can see me shoot.
| | 01:30 | So again, it's all
available in the Android Market.
| | 01:34 | Mere minutes after you upload an
app, it actually will be available.
| | 01:38 | And again, so I encourage you to go
ahead and try that with your own app, just go
| | 01:42 | ahead and create one, upload it, and
then check it out in the Android Market.
| | Collapse this transcript |
|
|
ConclusionNext steps| 00:01 | Thank you so much for watching.
| | 00:02 | I hope you enjoyed not only the game,
but the development process as well.
| | 00:07 | In my opinion, I think Flash makes it
really fun and easy to create games,
| | 00:11 | so I encourage you, if you have
access to the code, go ahead and take the
| | 00:15 | code, modify it, swap out the graphics, and
make your own game. Extend the code as well.
| | 00:20 | I want to go ahead and point you into
a couple different resources other than
| | 00:24 | lynda.com that you can use.
| | 00:26 | In fact, one is Adobe.com. Select
Learning. There is something called Adobe
| | 00:32 | Developer Connection.
| | 00:33 | So go in there, and you'll notice
there are two areas right down here for
| | 00:38 | mobile, as well as gaming.
| | 00:40 | So, great resources. There is going to be
code snippets, tutorials, various things
| | 00:44 | for gaming and mobile. Use those
resources to, again, enhance your game.
| | 00:49 | The other resource is developer.android.com.
| | 00:53 | So again, the Android SDK is there.
That's where you're going to go ahead and
| | 00:57 | upload your app as well, but on both
these sites, there are forums. You can always
| | 01:02 | post questions there, and usually the
community is pretty good at answering them.
| | 01:06 | But again, lastly, when you
do finish it and upload it,
| | 01:10 | I really look forward to seeing it. In
fact, you can feel free to send me an
| | 01:13 | email once it's up.
My email is paul@paultrani.com.
| | 01:20 | Thank you so much for watching!
| | Collapse this transcript |
|
|
