IntroductionWelcome| 00:03 | Hi! I am Todd Perkins.
| | 00:05 | Welcome to Flash Professional CS5:
Creating a Simple Game for iOS Devices.
| | 00:11 | If you're familiar with Flash and
ActionScript and watched develop iOS games
| | 00:15 | using what you already know,
this course is right for you.
| | 00:18 | We will start by looking at the
finished version of the game, which you can
| | 00:22 | download from the App Store.
| | 00:24 | You will see how the game's source files
are organized and get a top-level view of
| | 00:28 | developing iOS games using Flash.
| | 00:31 | From there, we will begin creating the game.
| | 00:33 | We will animate the skateboarder and
add support to control him using the
| | 00:37 | device's accelerometer.
| | 00:39 | After that we'll look at how to detect
swipe gestures and add sound effects.
| | 00:43 | We will finish the game by adding
parallax scrolling to the background,
| | 00:48 | collision detection, and scoring.
| | 00:50 | We will even look at how to
save high scores to the device.
| | 00:54 | By the time we are finished with this
course you will have seen just about
| | 00:58 | everything Flash has to help you create
iOS applications and will have built a
| | 01:02 | real world game as well.
| | Collapse this transcript |
| Using the exercise files| 00:00 | If you are a Premium subscriber to
lynda.com or have purchased this title on a disc,
| | 00:05 | then you have access to
the exercise files for this course.
| | 00:09 | Exercise files are organized by chapters.
| | 00:13 | Each chapter contains folders with
all the files that we'll be using
| | 00:17 | throughout that chapter.
| | 00:20 | Whenever we edit a file in a movie, I save
the final version inside of the Final folder.
| | 00:27 | For example, in Chapter 2 there
is a folder called character_move.
| | 00:32 | In there, you'll find the start version
and the final version of the files.
| | 00:37 | The final versions are the versions
that I saved out after recording the movie.
| | 00:43 | So if you have any problems, you can
check the code in the final versions
| | 00:46 | to confirm everything.
| | 00:48 | The only place in the scores where
I didn't include all the Exercise Files I
| | 00:56 | used is inside of the
Submitting folder in Chapter 5.
| | 01:01 | I didn't include the finished version
of the application, because that is an
| | 01:05 | application only I can submit to Apple.
| | 01:08 | You can test this application on your
devices, but I don't want you to send
| | 01:12 | this game to Apple.
| | 01:14 | So that's why I didn't include the final
files that I sent to Apple inside of that folder.
| | 01:20 | Other than that you'll have every file
I worked with throughout the entire course.
| | 01:25 | If you don't have access to
the Exercise Files, don't worry.
| | 01:28 | You could still follow along.
| | 01:29 | I'll show you how my FLA file is set up,
how my classes are organized, and all
| | 01:36 | the code that you'll need to write to
create the same kind of application.
| | 01:40 | Now that you have an idea of how
the Exercise Files for this course are
| | 01:44 | organized we will start making the game.
| | Collapse this transcript |
|
|
1. Planning and Preparing the GameReviewing the finished game| 00:00 | Before starting your game it's good
to have an idea of what the finished
| | 00:04 | product should look like.
| | 00:05 | To see the finished version of the
game that we are going to build in this course,
| | 00:09 | go to the App Store and
search for SK8Bit, all one word.
| | 00:17 | You can download this on your iOS
device and play the game to see how it works.
| | 00:22 | If you don't have an iOS device to test on,
you can actually even test this in Flash.
| | 00:27 | I have the FLA file open here and I
could test the movie to preview the game.
| | 00:33 | (Music playing)
| | 00:35 | So here's the title screen.
| | 00:37 | You can click the bottom-right icon to
view controls for the game, and you can
| | 00:46 | click anywhere else to start playing the game.
| | 00:49 | When you're playing the game you could
swipe up to jump and you can move the
| | 00:52 | mouse back-and-forth to move the skateboarder.
| | 00:57 | The goal of the game is to
jump over the trash cans.
| | 01:00 | If you're testing this on iOS device,
you can actually move him by tilting the
| | 01:05 | device like you're driving a car.
| | 01:08 | Notice we have a score and a high
score and that data gets saved to the
| | 01:12 | computer if you're playing on a computer or to
your device if you're playing on an iOS device.
| | 01:19 | If you jump over 10 trash cans,
the game speeds up a little bit.
| | 01:24 | And when you fall, you see the
falling animation and the game starts over.
| | 01:29 | One thing to note is if you've updated
Flash to the latest version, it might not
| | 01:34 | test properly in Landscape mode.
| | 01:37 | You can fix that through the Properties panel.
| | 01:39 | You may notice that my panels are
organized somewhat differently because I'm
| | 01:43 | working on a lower resolution screen
than I normally work on, so you can
| | 01:47 | obviously expand or contract
the panels however you want.
| | 01:51 | But here's my Properties panel right here
and I'll click the iPhone OS Settings
| | 01:56 | Edit button and then there you
could check Auto orientation.
| | 02:00 | Now, you don't want this checked when
you publish your app or else when you tilt
| | 02:05 | your device it'll auto orient and
change from Portrait to Landscape and you
| | 02:09 | definitely don't want that to happen.
| | 02:11 | So just for testing in Flash, if you're
having trouble, you can check the Auto
| | 02:16 | orientation box and then click OK.
| | 02:21 | And when you test the movie, click
on another application like Finder for
| | 02:30 | example and then click the ADL
app, which is the iOS emulator.
| | 02:37 | And then in there you can go to Device
and rotate left and rotate right, and you
| | 02:42 | could see that it auto orients.
| | 02:46 | So again that's only if you're having problems.
| | 02:51 | In here I am just going to
uncheck that and I'll click OK.
| | 02:56 | So if you're having problems with the
orientation of the app, follow those steps
| | 03:02 | and while you're testing you
could auto orient in the Emulator.
| | 03:06 | When you finally publish your app, and
obviously you don't want to publish my
| | 03:10 | game here, SK8Bit. You publish your own game.
| | 03:13 | You want to uncheck Auto orient if
you don't want the device orientation to
| | 03:17 | rotate as you rotate the device.
| | 03:20 | Let's look at the finished version of our game.
| | 03:23 | So now as you organize the art and
write the code for this game, you'll have a
| | 03:28 | better understanding of
where the application is going.
| | Collapse this transcript |
| Optimizing assets| 00:00 | It would be wonderful if it were possible
to make high-end iOS games through Flash.
| | 00:05 | However, in creating this game,
I learned that Flash has some limitations when
| | 00:10 | publishing content for iOS.
| | 00:12 | I also learned a lot of optimization
techniques that helped me develop the game
| | 00:17 | and improve its performance.
| | 00:19 | The official FAQ for the Flash
Packager for iPhone can be found on the
| | 00:24 | Adobe Labs web site.
| | 00:26 | The URL is labs.adobe.com/wiki/index.php
/applications_for_iPhone:developer_FAQ.
| | 00:40 | It's probably easiest to find this if
you just go to labs.adobe.com and do a
| | 00:46 | search for iPhone FAQ.
| | 00:48 | Here you can find information about
how to set up your apps to get the best
| | 00:54 | performance out of Flash.
| | 00:56 | I'm not going to go over all of these
tips right now, but there are few things
| | 01:00 | that you should know.
| | 01:01 | SK8Bit really pushes the limits of
iOS applications created by Flash.
| | 01:08 | I tested it on an iPhone 3GS and an iPhone
4 and their performance was pretty solid.
| | 01:14 | However, after I released the game I
heard from people that had older devices
| | 01:20 | that said the performance was lacking.
| | 01:22 | So ideally if you're going to create
an iOS game with Flash you would create
| | 01:27 | more of a puzzle type of
game than an action game.
| | 01:31 | So something that requires less animation.
| | 01:33 | Through this FAQ and other FAQs from
people that work at Adobe I learned that
| | 01:40 | the best way to set up my artwork was to use
bitmap graphics rather than vector graphics.
| | 01:46 | So I chose bitmaps in my app.
| | 01:49 | You'll also find that using things like
alpha and blend modes and filters will
| | 01:55 | decrease the performance of your applications.
| | 01:57 | So I suggest reading through this FAQ to
become familiar with all the nuances of
| | 02:03 | publishing iOS applications through Flash.
| | 02:06 | So for the most part, Flash works best
for creating iOS games with small amounts
| | 02:11 | of animation and other activity.
| | 02:14 | In general, you are going to get better
performance when you use bitmap graphics
| | 02:18 | rather than vector graphics.
| | Collapse this transcript |
| Planning gameplay and viewing class structure| 00:00 | Typically, it is a bad practice to
start building an app without a proper plan
| | 00:05 | regarding how the code will be organized.
| | 00:07 | Because this code is already written,
I can show you how it's organized and you
| | 00:13 | can have a good top-level understanding
of how the application is going to work.
| | 00:19 | This application is organized
using object-oriented programming.
| | 00:24 | If you're unfamiliar with object-
oriented programming, check out my course on it
| | 00:29 | in the Online Training Library.
| | 00:31 | In the main folder that contains my
FLA file I have a folder called com.
| | 00:37 | If I expand the com folder you will see
that I have a folder called toddperkins
| | 00:42 | and a folder called sk8bit
inside of the toddperkins folder.
| | 00:46 | This is the package for my classes.
| | 00:50 | If you're unfamiliar with package,
please watch the object-oriented course.
| | 00:54 | So I have the Boarder class, the Game
class, the Mover class, the Obstacle
| | 00:58 | class, and the Sk8bit class.
| | 01:01 | Let's take a look at these classes
and see what code is written and we will
| | 01:05 | discuss how they're going to work together.
| | 01:09 | In the FLA file you could see in the
Properties panel that my class is set to
| | 01:14 | com.toddperkins.sk8bit.Sk8bit.
| | 01:19 | So that is the Document class.
| | 01:21 | Let's look at the code in that class.
| | 01:23 | Now it looks like there is a lot of
code here, but what's happening is
| | 01:29 | actually relatively simple.
| | 01:31 | So I have my package declaration,
which I'm going to have in all my classes,
| | 01:35 | and my import statements and I'm
extending the MovieClip class. I have some
| | 01:41 | properties like the Game object, which
is an instance of the Game class which
| | 01:46 | is going to be the main game
functionality for the application, and some
| | 01:52 | properties to control sound.
| | 01:56 | In the constructor, I play the
sound, wait for a mouse click.
| | 02:01 | The great thing about Flash to iOS
applications is that you don't have to
| | 02:05 | listen for touch events. You can actually just
listen for mouse events and they work just fine.
| | 02:10 | So Flash translates them for you and
you don't have to do any of that work.
| | 02:14 | This makes it very easy for testing
the application directly in Flash.
| | 02:18 | So then I have the startGame method.
| | 02:22 | The first thing we do is check to
see if the object touch was now at
| | 02:26 | the Controls button.
| | 02:27 | That's a little button on the bottom-right
that shows how the controls of the game work.
| | 02:33 | If it's not that button, then we remove
the MouseEvent.CLICK EventListener, stop
| | 02:39 | the sounds, and play the background music.
| | 02:42 | You'll see that this code is commented
out and that's because I'm doing a lot
| | 02:46 | of talking while the game is playing
and I don't want to have to compete with
| | 02:52 | the background music while I'm talking.
| | 02:54 | So I'll uncomment this when we publish the game.
| | 02:58 | So I create a new instance of the
game class and add it to the Stage.
| | 03:03 | If the Controls button was touched,
then I add it to the stage in front of
| | 03:08 | everything else, set its visible
property to true, and play the movie clip.
| | 03:13 | We will talk more about
controls_mc in another movie.
| | 03:18 | Then I have the gameOver method.
| | 03:20 | That's a public method that runs when the
game is over, so after the player bails.
| | 03:28 | Let's go to Game.as.
| | 03:30 | Now here I don't really have any
code other than my import statements.
| | 03:34 | So just a generic class definition.
| | 03:38 | The Boarder class is pretty much the
same thing except for in the constructor I
| | 03:42 | add in an event listener to check for
the ADDED_TO_STAGE event, and then I run
| | 03:46 | the allLoaded method.
| | 03:48 | Now, when we write the code for this
we're actually going to write it inside of
| | 03:51 | the allLoaded method
rather than in the constructor.
| | 03:53 | Now the reason that I did this is
because sometimes when you're working with
| | 03:58 | timeline code and timeline objects and
object-oriented code, sometimes the class
| | 04:04 | file starts running before
the objects are on the stage.
| | 04:07 | So you can't communicate with them.
| | 04:09 | This way I make sure that all of the
objects I need to communicate with are
| | 04:13 | already on the stage
before I start running my code.
| | 04:16 | So it's good practice.
| | 04:19 | Mover.as is just a basic skeleton of a
class that extends the MovieClip class
| | 04:25 | and Obstacle class follows the same
convention that I followed for the Boarder
| | 04:29 | class with the ADDED_TO_STAGE event
and then I have a method called Update.
| | 04:33 | Obstacle class is obviously going to
apply to the obstacles in the application,
| | 04:38 | the Mover class is going to apply to the
background parallax scrolling elements,
| | 04:44 | and the border class is going
to apply to the skateboarder.
| | 04:47 | Now, when I organize this application
I wanted to have all the code in classes,
| | 04:52 | but there are some cases where it's
better to have the code in the Timeline.
| | 04:56 | In particular, things like stop actions
and actions that need to happen after an
| | 05:02 | animation is occurred need to be inside
of a timeline and will not work the same
| | 05:07 | inside of a class file.
| | 05:09 | Again, we'll look at the FLA
in detail in another movie.
| | 05:12 | But I just want you to know that ideally
object-oriented code is the best way to
| | 05:17 | organize your applications, but
sometimes it's necessary to put certain actions
| | 05:24 | inside of Timelines.
| | 05:26 | Now that you have a better idea of how
the application is set up and how the
| | 05:29 | different classes are going to work
together, it'll make more sense as we're
| | 05:33 | writing the code for the application
and will be easier to understand how the
| | 05:37 | code works together.
| | Collapse this transcript |
| Viewing the FLA file| 00:00 | In the same way that organized code is
important, organized structure of your
| | 00:05 | FLA can make your app
easier to manage down the road.
| | 00:09 | So let's take a look at how
this FLA file is organized.
| | 00:13 | On the main Timeline I have three
layers. There is controls_btn which is the
| | 00:20 | button that you click to open up the
controls movie clip or to bring it to the
| | 00:24 | front and display it.
| | 00:26 | And there is the bg, which is the main
background graphic, and that's not really
| | 00:32 | anything special. It's a movie
clip that has a bitmap inside of it.
| | 00:37 | And then if you hide that you can see
controls, which is an instance of controls_mc.
| | 00:45 | Let's double-click that
movie clip to enter its Timeline.
| | 00:49 | In the Timeline of the controls
movie clip, you can see that there is
| | 00:52 | ActionScript on the first
frame of the actions layer.
| | 00:56 | If I select that it open up the Actions
panel using Option+F9 on the Mac or F9
| | 01:01 | on the PC, you can see that I have
a stop action and a visible = false.
| | 01:07 | Now since this code is on the first
frame I could have written it inside of a
| | 01:13 | class file, but there are only two
lines of code and I want these two lines to
| | 01:18 | run again after the movie
clip plays in its entirety.
| | 01:21 | So in this case it's better to
have the code on the Timeline.
| | 01:26 | So this is just a simple
animation of the controls of the game.
| | 01:31 | Now I made a point not to use any
alpha or blend modes or filters here. That way
| | 01:39 | the game has better performance.
| | 01:42 | So let's go back to the main Timeline
and then we'll go into the game movie clip.
| | 01:47 | I go to the Library and I'll
double-click Game. Note that it's already
| | 01:53 | exported for ActionScript.
| | 01:56 | The class is com.toddperkins.sk8bit.game
class that we looked at in a previous movie.
| | 02:05 | So I'll double-click Game to enter its Timeline.
| | 02:08 | Now here we have a lot of layers so
I'll expand the Timeline a little bit so we
| | 02:13 | could see them all and pan around a little bit.
| | 02:18 | At the top there is a movie clip
called updateSpeed. This movie clip is
| | 02:24 | actually hidden right now.
| | 02:26 | So if I double-click it's really hard
to see, but the easiest way would be to
| | 02:32 | just lock the score layer and then do
a Command+A or Ctrl+A to select all and
| | 02:37 | in the Properties panel you can see
that it's called speedUp. So you could
| | 02:40 | double-click it to enter it's
Timeline or you can just double-click the
| | 02:43 | transformation point on the stage.
| | 02:46 | Now here I used a motion tween to have
the movie clip play and move upwards.
| | 02:55 | On the first keyframe of the actions
layer there is a simple stop action.
| | 03:00 | Notice there is no art on the first
frame, so it's invisible until we play the
| | 03:05 | movie clip and it just simply plays the
animation, loops back to frame one and
| | 03:10 | stops where there is no art on stage.
| | 03:12 | Back to the Game movie clip.
| | 03:16 | The score layer has text fields
for the score and high score objects.
| | 03:23 | If you select the number text that
says 0 right after the word score,
| | 03:28 | you can see that its instance name is score_txt
and the number next to high score is high_txt.
| | 03:39 | On the stage I have a mask that masks
out everything except for the part of the
| | 03:45 | stage that is on the Timeline.
| | 03:49 | So if I hide the mask you can see there
is much more content, so the background
| | 03:54 | extends a little bit.
| | 03:57 | If I unlock the Boarder layer you can see
that's an instance of a movie clip called
| | 04:01 | Boarder and the instance name is boarder_mc.
| | 04:06 | Let's double-click that to enter it's Timeline.
| | 04:08 | Now here I have a motion tween of the
skateboarder falling down and on the first
| | 04:14 | keyframe of the actions layer
I have a simple stop action.
| | 04:17 | And you can drag the playhead to see
the animation and at the end of the
| | 04:25 | animation I have another action. I am
stopping the Timeline and then I make
| | 04:32 | a call to this.parent.parent, which is going
to be the document class, or sk8bit.gameOver.
| | 04:38 | So it's going to call that gameOver method.
| | 04:45 | Go back to the Game movie clip,
lock Boarder, and unlock Trash Can.
| | 04:52 | You could see that there are some trashcans
at the bottom right of the stage right there.
| | 04:57 | Two trashcans. If you double-click the
trashcan you can enter its Timeline and
| | 05:02 | at the top you'll see the can, which
is just a bitmap graphic, and underneath
| | 05:06 | the can is a hit area movie clip.
| | 05:09 | I made a custom hit area for the
trashcan to make the game a little bit easier
| | 05:13 | and that's called hit_mc.
| | 05:16 | Back to the Game movie clip. And then
the other significant things are the
| | 05:23 | background in the far back layers.
| | 05:25 | So unlock them and I will just click
on this building here and that's selects
| | 05:30 | the background, which is called
bg_mc. This is just a bitmap graphic
| | 05:35 | encapsulated in a movie clip.
| | 05:37 | And then I have a buffer movie clip next to it
which is just a copy and I named that bg2_mc.
| | 05:44 | And then in the far background where
the building silhouettes are, I have a
| | 05:51 | movie clip called farback_mc and then
another one called farback2_mc, which is
| | 05:57 | also going to serve as a buffer so
we can have an infinite loop of the
| | 06:00 | background elements.
| | 06:01 | Now these are all of the elements
that we're going to be working with.
| | 06:06 | I know that there are other layers
inside of here, but they are just cosmetic
| | 06:11 | things and don't really hold too
much relevance in what we're doing.
| | 06:14 | So we have like these things like the Sign
layer, which you can find if you scroll around.
| | 06:22 | And this is just an unused object and
then we have the all the way back layer,
| | 06:33 | which is just a gray background.
| | 06:34 | So really nothing super impressive there.
| | 06:39 | So those are all the movie clips that
we're going to be working with and if
| | 06:43 | you look in the Library you'll see a
few more things. I embedded the Arial font.
| | 06:47 | So you'll see that those high score
and score text fields have an embedded
| | 06:51 | font so I made that.
| | 06:53 | And I've imported the sounds and
bitmaps I'm using for the application.
| | 06:57 | So there is the BailSound,
the BGLoop, and the JumpSound.
| | 07:02 | So that is how the FLA is organized.
| | 07:05 | There is the main Timeline that has the
main menu of the game and then the game
| | 07:10 | movie clip which contains
all of the gameplay assets.
| | 07:16 | Now for those of you who don't have
the exercise files, you can create a new
| | 07:20 | Flash iOS document by going to
File > New and choosing iPhone OS.
| | 07:28 | You could also change your
publishing target in your publish settings.
| | 07:32 | Your document size should be 480x320 and
other than that it's going to work just
| | 07:39 | like any other application and the
code is going to be the same as the
| | 07:42 | code we write for rest of this course.
| | 07:44 | So to recap, your FLA file should
be organized in a logical structure,
| | 07:49 | primarily using movie clips.
| | Collapse this transcript |
|
|
2. Controlling Character MovementMaking the character move| 00:00 | We'll start the game by
controlling the characters movement.
| | 00:03 | I'm going to add all that
functionality inside of the boarder class.
| | 00:07 | So before I write the code I'm going to
connect the skateboarder to that class.
| | 00:12 | So let's go to the Library and then
right-click the Boarder movie clip
| | 00:17 | and choose Properties.
| | 00:18 | Check the box that says Export for
ActionScript. You might have to click the
| | 00:22 | Advanced button to expand
that area so that you can see it.
| | 00:26 | And right before Boarder in the Class
field I'm going to type the full package name.
| | 00:31 | So com.toddperkins.sk8bit.
Boarder and then click OK.
| | 00:40 | And you shouldn't see any warning
messages and if you do you should check your
| | 00:43 | folder structure and the way that
you spell the package name when you're
| | 00:48 | exporting the class for ActionScript.
| | 00:51 | So I'll close that window and jump
over to Boarder.as. In here I'm going to add
| | 00:57 | a couple properties.
| | 00:58 | I'll create one public property called
speed, datatype it to a Number, and set it equal to 0.
| | 01:06 | This is going to represent
the speed of the skateboarder.
| | 01:09 | Create another property called movePower.
| | 01:12 | movePower is also going to be a
Number and we'll give it a value of 20.
| | 01:17 | This is going to apply to the
sensitivity of the accelerometer or the mouse
| | 01:22 | when the player moves left and right.
| | 01:23 | So you can change this if you
want it to be more or less sensitive.
| | 01:28 | Scroll down to the allLoaded method.
| | 01:30 | In here type addEventListener, capital
E capital L, and the events going to be
| | 01:36 | Event.ENTER_FRAME. Event has a E and
ENTER_FRAME is all caps with an underscore
| | 01:43 | in-between, and we'll run a method called update.
| | 01:46 | Now you want to make sure that you've
imported the right Event class, so that
| | 01:50 | you won't get an error when your code runs.
| | 01:52 | You can see that I've
imported it at the top of my code.
| | 01:55 | So let's create an update
method. I'll make it private.
| | 01:59 | Make sure to receive that event object with
the datatype of Event. :void for no return data.
| | 02:07 | And inhere we're going to update the X
position of the skateboarder based on
| | 02:12 | the speed property.
| | 02:14 | So type x += speed.
| | 02:18 | Now we set speed =0 on line 12 here, so
the character is not going to move just yet.
| | 02:24 | We'll go to the next line and we'll write
the code to move the character based
| | 02:29 | on the mouse position.
| | 02:31 | Now when our game is published
we want the character to move based on
| | 02:34 | the accelerometer data.
| | 02:36 | However, we're going to be doing all
the testing of our application or at
| | 02:40 | least most of it on a computer with Flash so
we won't have access to our device's accelerometer.
| | 02:47 | So for now we're going to set the speed
of the player based on the mouse position.
| | 02:52 | It's going to get the data based on the
distance of the mouse from the center of the stage.
| | 02:57 | So type speed = and then in
the parentheses type stage.mouseX
| | 03:06 | - stage.stageWidth/2.
| | 03:12 | So the distance of the mouse
from the center of the stage.
| | 03:18 | We're going to divide that
by the movePower property.
| | 03:23 | Again you can adjust the value of
movePower if you want to control the
| | 03:26 | sensitivity of the mouse here.
| | 03:29 | So let's save the file and test out the game.
| | 03:32 | (Music playing)
| | 03:38 | So you can move the mouse left and right
and the player moves forward and backward.
| | 03:46 | Nice! Now one thing we're going to add is a
buffer area so the player can go off the screen.
| | 03:52 | So let's look at how to do that.
| | 03:54 | Create a public property.
We'll call this bufferDistance.
| | 04:00 | So bufferDistance with the capital D set
that to a Number and we'll set it = 30.
| | 04:08 | And this will be the distance of the
player can be from the edge of the stage.
| | 04:11 | So 30 pixels from the left or
the right edge of the stage.
| | 04:15 | Now let's write the code to
update the player's movement accordingly.
| | 04:19 | So right below that last line of code
that we wrote inside of the Update method
| | 04:23 | I'll go down a couple lines
and create an if statement.
| | 04:28 | We'll check to see if x is
less than bufferDistance.
| | 04:34 | If so we'll set x = bufferDistance.
| | 04:37 | And so it's the left edge of the
stage based on the buffer value.
| | 04:42 | So to align the left edge since there
is top left alignment for the character.
| | 04:47 | We'll align that with that
bufferDistance property setting a 30 pixels from the
| | 04:52 | left edge of the stage.
| | 04:54 | Go right below that if statement we
create another if statement and in there
| | 04:59 | we're going to check to see if x
is greater than stage.stageWidth.
| | 05:04 | It's the whole width of the stage, minus width,
that's the width of the player, minus bufferDistance.
| | 05:13 | So if the player is more than 30
pixels from the right edge of the stage and
| | 05:19 | we're just set his position equal to that.
| | 05:22 | So copy and paste all the code inside of
that if statement at a semicolon at the
| | 05:27 | end and change the greater
than sign to an equal sign.
| | 05:32 | Now we'll save the file and
then test the movie again.
| | 05:38 | This time the player should stop at
the left and right edges of the stage.
| | 05:43 | Now just like the movePower property
you can adjust the value of bufferDistance
| | 05:50 | to control the distance of the
player from the edge of the stage.
| | 05:52 | So now we've setup some of the
basic functionality for our game and the
| | 05:57 | player moves left and right based
on the distance of the mouse from the
| | 06:01 | center of the stage.
| | Collapse this transcript |
| Adding accelerometer support | 00:00 | One of the great things about using
Flash for iOS games is that you get easy
| | 00:05 | access to some hardware
features like accelerometer data.
| | 00:09 | To access the accelerometer, make
sure you first import the Accelerometer class,
| | 00:13 | which is in the flash.sensors
package, and then create a property to
| | 00:18 | hold the accelerometer.
| | 00:19 | So I am going to create a public
property called acc, short for accelerometer,
| | 00:24 | data type it to Accelerometer.
| | 00:27 | In the constructor method I'll create a new
accelerometer by typing acc = new Accelerometer.
| | 00:38 | Note that you type this just like
creating a new instance of any object.
| | 00:42 | In the allLoaded function, right above
addEventListener(Event.ENTER_FRAME, type
| | 00:48 | acc.addEventListener and the event is
going to be AccelerometerEvent.UPDATE.
| | 00:55 | Keep in mind you are following a
standard naming conventions here. Accelerometer
| | 00:59 | has a capital A, Event has a
capital E, and UPDATE is in all caps.
| | 01:03 | The method that will run is called updateSpeed.
| | 01:08 | Right below the Update method,
we will define updateSpeed.
| | 01:12 | So private function updateSpeed.
| | 01:18 | And in the parenthesis we will receive
that event object, which is going to be
| | 01:22 | an AccelerometerEvent, :void for no
return data, and some curly braces.
| | 01:29 | So in updateSpeed, I'm going to
set the value of speed based on
| | 01:34 | the accelerometer data.
| | 01:35 | So speed = movePower * event.accelerationX.
| | 01:48 | That's the horizontal
acceleration of the device.
| | 01:53 | That's going to be like you are
steering a car steering wheel.
| | 01:57 | So if we are holding the device in
landscape orientation, imagine it being a
| | 02:01 | steering wheel and that's accelerationX.
| | 02:03 | If you want more information about the
Accelerometer class, you can always look
| | 02:08 | up Accelerometer in Flash Help, but
for now just note that this functionality
| | 02:14 | is going to be pretty much the same as our
speed is right now in the Update function.
| | 02:20 | So it's going to be a positive or
negative value based on the tilt of the device.
| | 02:25 | And again, you can always adjust that
movePower property if you find that is too sensitive.
| | 02:30 | Now we don't want to have these
two speed settings conflicting.
| | 02:35 | So we are setting the speed on
the ENTER_FRAME event and in the
| | 02:39 | Accelerometer event.
| | 02:40 | So what we want to do is make sure that
speed is only set in the Update method
| | 02:45 | if the accelerometer is enabled.
| | 02:47 | So to check that right above speed =
stage.mouseX in the update function
| | 02:54 | create an if statement.
| | 02:55 | In the parentheses, check to see if the
accelerometer is enabled by typing acc.muted.
| | 03:04 | The muted property checks to see
if the accelerometer is disabled.
| | 03:09 | So since my computer doesn't have
an accelerometer, it's going to get speed from here.
| | 03:14 | Of course, I first have to wrap this in
some curly braces like so, and now I'm
| | 03:20 | only going to set the speed in the
Update method when I am testing the
| | 03:24 | application on my computer.
| | 03:26 | When I test it on an actual device,
however, the speed will come from the
| | 03:30 | updateSpeed method, which is set
through the Accelerometer data.
| | 03:36 | So if we save the file and test the movie
now, it should still work just the same.
| | 03:40 | So I can move the mouse and the player moves.
| | 03:49 | Now I'm not going to test this on a
device just yet, but rest assured if you did
| | 03:53 | test it on a device right now,
it would work just the same except for the
| | 03:57 | accelerometer data would control the
player's movement, and not the mouse.
| | 04:01 | You will be able to see that in an
action later on in this course when we put
| | 04:05 | this app on a device and test it.
| | 04:08 | But for now, just to remember that you
can access the accelerometer data to do
| | 04:13 | things like set the speed of a
player through one simple line of code.
| | Collapse this transcript |
| Making the character jump| 00:00 | The next step in creating the
character is making him jump.
| | 00:04 | Again, we will add all that
functionality to the Boarder class.
| | 00:08 | We'll start by creating a few properties.
| | 00:10 | Right below where you create the
Accelerometer property, create another property
| | 00:15 | called speedY, data type that to a
Number, and set the value equal to zero.
| | 00:21 | Create another property
called groundY:Number, also = 0.
| | 00:29 | Create another property called gravity.
| | 00:32 | That'll be a Number and we'll set it = 1.5.
| | 00:37 | This is going to represent well gravity,
and speedY is going to represent the
| | 00:42 | vertical speed and groundY is going to
represent the position of the ground.
| | 00:47 | So we can detect that when the character jumps.
| | 00:49 | On the next line we are going to
create an object so we can dispatch an event
| | 00:54 | when the character lands.
| | 00:55 | So public static const.
| | 01:01 | This is a value that can't change and
it's static, so it's actually attached to
| | 01:05 | the class and not the instance.
| | 01:10 | So we access it by class
name.property and not instance name.property.
| | 01:16 | So here we are going to type LANDED,
all caps, datay type it to a String and we
| | 01:22 | will set it = landed, all lowercase.
| | 01:26 | We can use this value to dispatch
an event later on if we want to.
| | 01:29 | Finally, we will create one more
property also public and we will call this
| | 01:35 | jumpPower, data type it to a
Number, and set the value equal to 20.
| | 01:40 | Now this represents the force being
applied to the character when he jumps.
| | 01:45 | So if you change the number, you can
make him have a higher jump or a lower jump.
| | 01:50 | Now scroll down to the allLoaded method.
| | 01:54 | Right above acc.addEventListener,
I'm going to say groundY = y. So we are
| | 02:03 | setting the groundY property's value
to the current position of the player.
| | 02:06 | So that represents the ground.
| | 02:08 | Keep in mind you don't want to put this
in the constructor because it's possible
| | 02:12 | that the code may run before the
object gets added to the stage and then you
| | 02:16 | have the problem that you're trying to
modify a property that doesn't yet exist.
| | 02:20 | So it's best to have it inside
of the added to stage handler.
| | 02:24 | So go to the next line and type
stage.addEventListener and the event is going to
| | 02:30 | be MouseEvent.MOUSE_DOWN and this is
what we are going to do to handle the jump.
| | 02:37 | So we will create a method, so type
Comma and then space, and type touchStarted.
| | 02:45 | Now notice event is MOUSE_DOWN but
I'm calling the function touchStarted.
| | 02:51 | Flash actually converts mouse events to
touch events when you export the device to iOS.
| | 02:57 | So you actually don't have to add
any additional code to support touches.
| | 03:03 | So let's define the touchStarted
method. Scroll down below updateSpeed and
| | 03:09 | create a private method called touchStarted.
| | 03:13 | Make sure to make it receive an
event object with the data type of
| | 03:17 | MouseEvent, :void for no
return data, and some curly braces.
| | 03:23 | In here we will run a method called jump.
| | 03:26 | So just type jump and some
parentheses and Semicolon.
| | 03:30 | Right below touchStarted we
will define the jump method.
| | 03:33 | No parameters, no return data.
| | 03:36 | In the jump method we want to make the
player jump; however, we do not want to
| | 03:41 | make the player jump all the time.
| | 03:44 | We only want the player to
jump, if he is on the ground.
| | 03:47 | So the first thing we are going to do is
check to see if the player is on the ground.
| | 03:51 | Let's type an if statement and inside
of the parentheses check to see if the
| | 03:57 | player's Y position is equal to,
that's two equal signs, groundY.
| | 04:03 | If so, then we can make the player
jump by setting speedy, make sure you
| | 04:09 | capitalize the Y, = -jumpPower.
| | 04:13 | Remember the value is negative
because we want the player to move upward.
| | 04:18 | So negative values in Flash move things
up and positive values move them down.
| | 04:22 | So we set the speedY property, and
then we are going to need to change the
| | 04:27 | update method to support the vertical movement.
| | 04:30 | So scroll up to the update method.
| | 04:33 | Right below where you set the x value
in there, create a new line and set the Y
| | 04:38 | value by typing Y += speedY.
| | 04:44 | Let's save the file and test
the movie to see what we have so far.
| | 04:48 | (Music Playing)
| | 04:52 | So you should be able to
click and see the character jump.
| | 04:54 | Notice that he just flies off the string.
| | 04:57 | That's because we haven't yet applied gravity.
| | 05:00 | So, let's take a look at how to do that.
| | 05:02 | Right below the code where I check to
see if the accelerometer is muted, I'm going
| | 05:07 | to add a line of code that applies gravity.
| | 05:10 | So I am going to type speedY += gravity.
| | 05:17 | So we are going to apply
gravity to the character now.
| | 05:21 | Save the file, and test the application
again to watch gravity be applied.
| | 05:26 | (Music Playing)
| | 05:28 | Notice that the character
just falls straight down.
| | 05:31 | So we need to control it so that the
character does not go below the ground.
| | 05:36 | To do that, right below the line
of code we just wrote, create a
| | 05:40 | conditional statement.
| | 05:41 | So type if, some
parentheses, and some curly braces.
| | 05:44 | There we are going to check to see if the
character's Y position is greater than groundY.
| | 05:51 | So if y > groundY.
| | 05:57 | So if the player is below where it
should be on the ground, then what we are
| | 06:01 | going to do is set y = groundY.
| | 06:04 | So the player can't go below the ground.
| | 06:06 | So now let's save the file again,
and test it in the Flash Player.
| | 06:11 | (Music Playing)
| | 06:15 | So I can click to jump and he
doesn't go below the ground.
| | 06:21 | If I click a whole bunch of times, you'll
notice that he doesn't jump when I click.
| | 06:25 | He just only jumps when he is on the ground.
| | 06:29 | And here you can actually dispatch
an event for when the player lands.
| | 06:33 | I am not going to write that code
right now, but I'll just make a mental note of
| | 06:37 | that if you ever wanted to
track that for something else.
| | 06:41 | So remember, to make the character jump
you apply a gravitational force and you
| | 06:46 | update the character's Y velocity.
| | 06:48 | To keep him on the ground, you store
the ground position in a property and set
| | 06:53 | the character at that
position if he goes below it.
| | Collapse this transcript |
| Simulating a finger swipe| 00:00 | When you publish your game to iOS, Flash
will translate the mouse data to touches.
| | 00:05 | This makes it easy to create
support for gestures in your apps.
| | 00:08 | So now what we will do is finish the
jump animation by adding support for
| | 00:13 | a swipe up gesture.
| | 00:15 | We'll also complete all the rest of
the code to make the jump work perfectly.
| | 00:20 | So we'll scroll down and right below
jumpPower, we'll create a few properties.
| | 00:26 | First we will create one called
currentTouchY, capital T, capital Y.
| | 00:32 | That's going to be a number which
will initialize to 0 right here.
| | 00:35 | That's going to hold wherever the person
touches their finger or mouse down when
| | 00:41 | they start to do the swipe motion.
| | 00:42 | So create another public property, we'll
call this one isJumping, with a capital
| | 00:48 | J. Datatype it to a Boolean and that's it.
| | 00:52 | isJumping will represent
whether the player is jumping.
| | 00:56 | So it will be true while the player is
doing the jump motion and once the player
| | 01:00 | lands, it will be false again.
| | 01:02 | So let's scroll down in our code
and find the touchStarted method.
| | 01:08 | Here we are going to delete the call
to the Jump method, because we don't
| | 01:12 | want to call that method until the
swipe is complete, which is going to be
| | 01:16 | when the touch has ended.
| | 01:17 | So let's just copy this method right
here and paste it a few lines below and
| | 01:23 | change touchStarted to touchEnded.
| | 01:27 | In touchStarted, we will set currentTouchY
equal to the position of the mouse or touch.
| | 01:34 | So currentTouchY =.
| | 01:38 | We can access the Y position with
the touch through our eventObject.
| | 01:41 | The mouse event has a property called stageY.
| | 01:45 | So type event.stageY and that's it.
| | 01:49 | So we are capturing that value right
there and we can compare it against
| | 01:53 | where the touch ends.
| | 01:55 | The next step is to remove this event
listener for the touchStarted event.
| | 01:59 | So scroll up in your code and find the
line where we add that event listener.
| | 02:04 | It's inside of the allLoaded method.
| | 02:06 | So stage.addEventListener MouseEvent.MOUSE_DOWN.
| | 02:10 | So copy that line of code with
Ctrl+C or Command+C and scroll down to
| | 02:16 | touchStarted and paste the code right
under the currentTouchY line of code.
| | 02:21 | In the pasted code, change
addEventListener to removeEventListener.
| | 02:25 | Go to the next line and
paste the same code again.
| | 02:29 | In the pasted code, change MOUSE_DOWN
to MOUSE_UP, make sure it's all caps, and
| | 02:36 | change touchStarted to touchEnded.
| | 02:38 | So we are going to add the event listener for
the MOUSE_UP event only after touch starts.
| | 02:46 | So select the line of code you just wrote,
copy that and we will paste it inside
| | 02:51 | of touchEnded in just a second.
| | 02:53 | First we are going to
create a conditional statement.
| | 02:55 | So type if, some
parenthesis, and some curly braces.
| | 03:00 | Paste the code inside if the curly braces.
| | 03:03 | In the pasted code, change
addEventListener to removeEventListener.
| | 03:08 | So should say stage.
removeEventListener(MouseEvent.MOUSE_UP, touchEnded).
| | 03:13 | In the parentheses for the if
statement, we are going to check to see if
| | 03:17 | event.stageY < currentTouchY.
| | 03:23 | So if the mouse or finger is above the
location that it was at when it started
| | 03:31 | the touch, then we are going
to make the character jump.
| | 03:35 | So the first thing we will do is remove
this event listener and right below the
| | 03:38 | line where you've removed the
event listener, we'll call the jump method.
| | 03:42 | Now we will scroll down
and edit the jump method.
| | 03:46 | The first thing you are going to do is
check to see if the character is on the ground.
| | 03:50 | So we already have that code
written here, if(y == groundY).
| | 03:54 | After that, type a space and two ampersands.
| | 03:58 | Then we want to make sure that the
character is not already jumping.
| | 04:01 | So type in exclamation point for
the Not operator, then type isJumping.
| | 04:06 | So we are going to leave speedY =
-jumpPower and then on the next line, we will
| | 04:11 | set isJumping = true.
| | 04:15 | Now before we test the movie, let's add a
little bit more code to the Update method.
| | 04:21 | Find the Update method and then find
the section that says if(y > groundY).
| | 04:28 | Inside of that conditional statement,
right below y = groundY, go down a few
| | 04:33 | lines and we will check to
see if the player is jumping.
| | 04:36 | So type if, some parentheses and some
curly braces, and in the parentheses type
| | 04:42 | isJumping, capital J.
| | 04:45 | Inside of the curly braces for
the if statement, we will add the
| | 04:49 | EventListener for the touchStarted
event and just to make sure I typed it
| | 04:53 | exactly as I did earlier, I'm going to
select it on line 33 in my code, which
| | 04:58 | is inside the allLoaded method.
| | 05:00 | It's the stage.addEventListener
MouseEvent.MOUSE_DOWN line of code.
| | 05:04 | I'll copy that and paste it inside of
the if isJumping conditional statement
| | 05:11 | in the Update method.
| | 05:13 | So I'll add that event listener again
so the player can jump again, and then
| | 05:17 | we'll set isJumping = false.
| | 05:21 | Remember this block of code only runs
after the player lands back on the ground.
| | 05:27 | So, we check to see if the player
went passed the ground and then we set the
| | 05:30 | Y position at the ground, and then and only
then do we allow the player to jump again.
| | 05:38 | So test the movie after saving
this file and we will check it out.
| | 05:43 | (Video Playing)
| | 05:46 | So the player no longer jumps after we click;
you actually have to swipe up. There you have it.
| | 05:59 | So remember, to detect the finger
swipe upward, check the Y position when the
| | 06:04 | mouse goes down, capture that in a
variable, and then compare it to the value of
| | 06:09 | the Y position when the mouse is released.
| | Collapse this transcript |
| Adding sound effects| 00:00 | Sound effects add an element or fun to
your games you can't get any other way.
| | 00:05 | So let's add sound effects to the
jumping animation for the character.
| | 00:09 | To start out we're going to look for some sounds
in the Library to export them for ActionScript.
| | 00:14 | So open up the Library and find
BailSound.mp3. Right-click it and choose
| | 00:21 | Properties, check the Export for
ActionScript box, and then change BailSound.mp3
| | 00:27 | for the class name to just Bail.
| | 00:30 | Click OK and then click OK again to
close the warning window that says Flash is
| | 00:35 | going to create the Bail class for you.
| | 00:38 | Remember, it's a subclass of the Sound
class so it has all the properties and
| | 00:42 | methods that the Sound class has.
| | 00:43 | So we'll go to JumpSound.mp3 and we'll
do the same thing. Right-click, choose
| | 00:49 | Properties, check Export for
ActionScript, you may have to click the Advanced
| | 00:54 | button to reveal that, change the Class to Jump.
| | 00:58 | Click OK and OK again and jump over
to Boarder.as, and here we'll create a
| | 01:06 | couple of new properties.
| | 01:08 | Create a public property called
bailSound, data type it to Bail, that's
| | 01:15 | the exported class.
| | 01:17 | Create another public property called
jumpSound, data type it to Jump, and
| | 01:21 | finally create another public property
called soundControl. Data type it to SoundChannel.
| | 01:30 | This is going to be the object that
controls all the sounds that play.
| | 01:34 | In the constructor, we'll create new
instances of Jump and Bail using our properties.
| | 01:41 | So right below where we create the
Accelerometer in the constructor,
| | 01:46 | type bailSound = new Bail and
the same thing for jumpSound.
| | 01:52 | So jumpSound = new Jump.
| | 01:56 | Scroll down to the bottom of your code
and below the jump method create another
| | 02:01 | private method called controlAudio.
| | 02:05 | In the parentheses type (and:Sound),
:void for no return data, and some curly braces.
| | 02:15 | So when we run controlAudio,
we're going to pass in a sound object.
| | 02:19 | So it's going to be either the
jumpSound or the bailSound and this method is
| | 02:23 | going to make this sound play,
and it's going to set its volume.
| | 02:26 | So the first thing you're going to do
is create a variable to hold the
| | 02:30 | SoundTransform object that we
can use to control volume.
| | 02:34 | So create a variable called trans,
data type it to SoundTransform.
| | 02:38 | We'll set to a new SoundTransform,
and in the parentheses type 0.5.
| | 02:47 | That's the volume of the sounds.
| | 02:48 | So it goes between zero and one. Anything
above zero or below one is going to get distorted.
| | 02:55 | So go to the next line and
type soundControl = snd.play.
| | 03:05 | That's the sound that was passed
in, and we'll start at the beginning.
| | 03:09 | So the first parameter startTime,
which is a number. We'll set it to zero.
| | 03:13 | Second is loop, so we don't it want
to loop, so we'll put zero and third is
| | 03:17 | a SoundTransform. We'll type in trans and
close up the parentheses and type a semicolon.
| | 03:22 | Now when you test the movie when you
have it like this, you might find that the
| | 03:26 | sounds overlap, because every time
you run the controlAudio method, you're
| | 03:30 | creating a new SoundChannel
object with your sound property.
| | 03:35 | So to make sure we've better control
over that, above var trans, create an if
| | 03:40 | statement to see if the
SoundChannel object already exists.
| | 03:44 | If so, we'll destroy it so we're not
overlapping creating a new sound object every time.
| | 03:51 | So in here we'll check to see if
soundControl exists, then we'll type
| | 03:56 | soundControl.stop, so we'll stop
the playing sound and then we'll set
| | 04:01 | soundControl = null.
| | 04:03 | Now the last thing we want to do is run
the controlAudio method. We'll do that
| | 04:09 | right under isJumping = true in the jump method.
| | 04:12 | So type controlAudio and the
parentheses pass in jumpSound.
| | 04:20 | Save the file and test the movie
to hear the jump sound when you make
| | 04:24 | the character jump.
| | 04:25 | (Music Playing)
| | 04:28 | There we go.
| | 04:29 | (Zoop, zoop!)
| | 04:33 | See how much more fun it is now?
| | 04:36 | So to add sound, you just simply
create a SoundChannel object and you set it
| | 04:41 | equal to the playing sound.
| | 04:44 | If you want to apply volume to it,
you can add that in the play method by
| | 04:49 | passing in an instance of the SoundTransform class.
| | Collapse this transcript |
|
|
3. Creating Animated Background ElementsCreating a reusable Mover class| 00:00 | Since many objects in the game will
be moving, it make sense to write a
| | 00:04 | reusable class file to manage all of them
rather than writing the same code multiple times.
| | 00:10 | Before we start writing the code,
I want to show you what elements we are
| | 00:13 | going to be moving.
| | 00:15 | In the Library, open up the Game movie
clip. Inside of there, you'll see some
| | 00:21 | various background elements.
| | 00:23 | There is the FarBack movie clip,
which consists of the sky and silhouetted
| | 00:28 | buildings, and then the closer
background, which is the front buildings and the
| | 00:33 | lights and the trees and everything.
| | 00:35 | So these are the two main movie clips
we're going to start with, connecting
| | 00:39 | them to the Mover class.
| | 00:40 | In this movie, we're just going to
write a few lines of code in the Mover class
| | 00:43 | to build the scaffolding
for our parallax scrolling.
| | 00:47 | So let's go to Mover.as and we're going
to create one public property called speed.
| | 00:54 | This is going to be a Number and
we'll set equal to zero to initialize it.
| | 01:00 | In the constructor, I'll add
an ENTER_FRAME event listener.
| | 01:03 | So addEventListener and the event
is going to be Event.ENTER_FRAME.
| | 01:12 | And when the ENTER_FRAME event occurs
we're going to run the update method.
| | 01:17 | So let's define the update
method as a private method.
| | 01:20 | It will receive an event with the data
type of event, :void for no return data,
| | 01:28 | and in here we're simply going to update the
x position based on the speed. So x += speed.
| | 01:36 | That's it.
| | 01:37 | Make sure to save the file and now we
have everything set up, so we can start
| | 01:42 | adding parallax scrolling to our game.
| | Collapse this transcript |
| Linking the Mover class to the parallax elements| 00:01 | Parallax scrolling will give the
background of the game some more depth, which
| | 00:04 | is really important when the artwork
is relatively flat like in our game.
| | 00:08 | Before you can make objects have
Parallax Scrolling we will need to connect
| | 00:12 | them to the Mover class.
| | 00:14 | So I'll go to the FLA file and
then open up the Game movie clip.
| | 00:19 | In there, you'll see a few background elements.
| | 00:22 | We have the silhouetted buildings and
then the more foreground and background art,
| | 00:28 | which is the lights and
trees and the foreground buildings.
| | 00:32 | So let's connect these to the Mover
class. Right-click BG in the Library
| | 00:38 | and choose Properties.
| | 00:40 | Check to Export for ActionScript
box and change the Base Class to
| | 00:45 | com.toddperkins.sk8bit.Mover.
| | 00:53 | This way Flash will use that Mover
class as the base class and connect and
| | 01:00 | create a custom class for the background.
| | 01:02 | Remember, you can't use the same
class from multiple movie clips, so if you
| | 01:07 | want to connect the same class to
multiple movie clips, you need to use the
| | 01:12 | base class instead of the regular class and
have Flash generate the regular class for you.
| | 01:18 | So click OK and you should see that
warning message that says Flash is going to
| | 01:22 | create a class for you.
| | 01:23 | So you can click OK and then
we'll do the same thing for FarBack.
| | 01:29 | So right-click the FarBack movie clip,
choose Properties, check Export for
| | 01:34 | ActionScript, and change the base class
to com.toddperkins.sk8bit.Mover, click OK,
| | 01:43 | and click OK for the warning message,
and now we just want to confirm the
| | 01:47 | instance names of these objects on the stage.
| | 01:50 | So if I expand the Timeline panel, I could
scroll down and unlock the background layer.
| | 01:59 | Now when I unlock the background
layer you'll see that mask shows now,
| | 02:03 | so I don't want to see that mask.
| | 02:04 | So I'm going to hide the mask and I
can select the background and in the
| | 02:09 | Properties panel I can see that it's
called bg_mc, and then I want to select the
| | 02:14 | far background now to confirm its instance name.
| | 02:18 | So I'll select it and confirm that its
instance name is farback_mc, all lowercase.
| | 02:24 | So I'll lock those layers and then show
the mask again and go to our Game class.
| | 02:31 | Now I'll hide the Timeline panel so
I've some more space to write code and
| | 02:36 | I'll create a property in here, right
above the constructor, and I'll call the
| | 02:41 | property moveSpeed.
| | 02:43 | So it will be private.
| | 02:44 | It's private var moveSpeed, data type
it a Number, and I'll set it equal to 5.
| | 02:51 | This going to refer to the amount of
pixels per frame that the objects move.
| | 02:57 | So in the Game method, which is the
constructor method, I'm going to call a
| | 03:02 | method that I'll create in
just a second called updateSpeed.
| | 03:07 | Now below the constructor I'll define
the updateSpeed method. public function
| | 03:12 | updateSpeed, so ():void for no return data.
| | 03:17 | So we'll type bg_mc.speed.
| | 03:21 | Remember it has that property and so
it is far back, because they're both
| | 03:24 | subclasses of the Mover class, so
they inherit the speed property.
| | 03:28 | We'll set that = -moveSpeed.
| | 03:32 | So that will move the objects to
the left, making it look like the
| | 03:35 | skateboarder's moving forward.
| | 03:37 | Now we'll set
farback_mc.speed = bg_mc.speed / 5.
| | 03:47 | Now I deliberately did not use the moveSpeed
variable when setting the speed of farback_mc.
| | 03:52 | I want this speed to be exactly
1/5th the speed of the background.
| | 03:57 | So if I ever change moveSpeed then
the speed is proportional to bg_mc.
| | 04:04 | That will keep our parallax scrolling
looking accurate no matter how fast the
| | 04:10 | movie clips are moving.
| | 04:11 | So let's save the file and preview
the parallax scrolling in the Flash Player.
| | 04:15 | (Music playing)
| | 04:21 | It looks like he is just riding
along. I can jump and move back and forth.
| | 04:28 | So notice that the background kind of ran out
and that's something that we will fix later on.
| | 04:33 | But for now our parallax
scrolling is working properly.
| | 04:36 | So now that these movie clips are
connected to the Mover class, you can make any
| | 04:41 | of these objects animate using minimal code.
| | 04:43 | To add parallax scrolling to your game,
simply set the object scrolling speeds
| | 04:48 | to different values.
| | 04:49 | Remember the closer an object is to the
camera, the faster it should scroll, and
| | 04:53 | using proportions like we have here,
you can make sure all the animations are
| | 04:58 | proportional to each other
regardless of how fast they are moving.
| | Collapse this transcript |
| Looping background animations| 00:00 | Now that we have scrolling
backgrounds the next step is to make the
| | 00:04 | backgrounds loop indefinitely.
| | 00:06 | To do that I'm going to use a copy of
the scrolling movie clips that's going
| | 00:10 | to act as a buffer.
| | 00:13 | If you go inside of the game movie
clip and you hide the mask layer and you
| | 00:21 | unlock the Far Back and BG layers you
can scroll to the right and see that I've
| | 00:29 | made copies of the background movie
clip and the far background movie clip.
| | 00:34 | Now if you look in the Properties
panel you can see that I called them
| | 00:38 | bg2_mc and farback2_mc.
| | 00:44 | So in order to add that functionality
you're going to need to clone your movie
| | 00:47 | clips and just give them
different instance names.
| | 00:51 | So let's go over to Mover.as, and again
I'll hide the Timeline panel so I have
| | 00:56 | some more space to write my code.
| | 00:58 | And here I'll create a new property.
This will be Public, and I'll call it
| | 01:03 | Buffer, data type it to a movie clip.
| | 01:06 | Then I'll scroll down to the update
method. Right below where I set the speed
| | 01:11 | value, I'm going to check to see the
position of the object. I want to see if
| | 01:17 | it's gone off the stage.
| | 01:19 | So in here I'll type an If statement
and in the parentheses of the If statement
| | 01:25 | I'm first going to check
to see if there is a stage.
| | 01:28 | So if the object has a stage property
and it can reference it, then what I'm
| | 01:32 | going to do is type two ampersands as to and
operator, so both of these have to be true.
| | 01:38 | And I'm going to see if x position is
less than or equal to negative width.
| | 01:44 | So that means that the right edge of the
object is aligned with the right edge of the stage.
| | 01:50 | If that's the case first we're going to
check to see if there was a buffer, so
| | 01:53 | in parentheses, so type an If statement
and in the parentheses type buffer.
| | 01:59 | You want to see if that value is set,
and if so we'll set the x equal to the
| | 02:04 | buffer's x position.
| | 02:06 | So the buffer is actually going to be
moving along with the main movie clip, so
| | 02:11 | bg_mc and bg2_mc are going to be moving
the same speed right next to each other,
| | 02:18 | so it's going to have
this seamless feeling to it.
| | 02:22 | So there is a buffer and the main
object has gone off the stage. We're going to
| | 02:26 | swap positions, we're going to put the
main object at the position of the buffer
| | 02:31 | and then move the buffer back to the
right of the main object. So we set the x
| | 02:37 | position of the buffer and then we'll
create an else statement. Type x = width - 10.
| | 02:49 | So if there is no buffer we're simply
going to have the main object loop around
| | 02:54 | to align its left edge with
the right edge of the stage.
| | 02:58 | So it'll be all the way back at the
right edge of the stage and totally off the
| | 03:02 | stage, so it'll come all the way from
outside of the left edge of the stage.
| | 03:06 | So under this big If statement where we
check to see if there's a stage and x is
| | 03:11 | less that equals to negative width,
| | 03:13 | I'm going to create another If
statement and check to see if there is a buffer.
| | 03:16 | So If and then buffer inside of
parentheses we're going to set the x position of
| | 03:21 | the buffer here, so buffer.x = x + width - 10.
| | 03:23 | Now you may be wondering why I'm
putting this -10 here and here.
| | 03:37 | It just so happens at the way
that my movie clips are set up,
| | 03:41 | how the artwork works, is that in order
to make them overlap more seamlessly I
| | 03:46 | need to have them overlapping by 10
pixels rather than just flush with the side.
| | 03:51 | So that's just something to do
with this particular artwork.
| | 03:54 | So let's save this file and then jump
on over to Game.as and we'll set the
| | 03:59 | buffer properties here.
| | 04:01 | So scroll down to updateSpeed and
below the rest of the code that you've
| | 04:05 | already written. Set the
buffer for bg_mc and farback_mc.
| | 04:10 | So type bg_mc.buffer = bg2_mc.
| | 04:13 | I'll do the same thing for farback.
So farback_mc.buffer = farback2_mc.
| | 04:22 | Now we've set the buffer for the background
and the buffer for farback_mc. Now we can
| | 04:32 | save and test the application.
| | 04:38 | (Music Playing)
| | 04:40 | Now we should see that the
game scrolls indefinitely.
| | 04:43 | Now we have a seamless transition
between the buffer and the main movie clip.
| | 04:48 | It looks good. So remember, to make
background's loop, create a buffer clone and
| | 05:06 | connect it to the main movie
clip using a buffer property.
| | Collapse this transcript |
|
|
4. Adding Obstacles and ScoringCreating a reusable Obstacle class| 00:00 | Even though this version of the game
only has one obstacle, it's always a good
| | 00:04 | practice to make your game scalable
so you can add more features later on.
| | 00:08 | In this movie we'll add some code to
our Obstacle class, so you can make any
| | 00:13 | object into an obstacle.
| | 00:15 | Before we do that let's connect the
TrashCan movie clip to the Obstacle class.
| | 00:20 | So open up the Library and right-click
to TrashCan movie clip, choose Properties,
| | 00:25 | and then check the Export for ActionScript box.
| | 00:28 | Remember, you want to connect the base
class to the Obstacle class, not the main
| | 00:33 | class, because you can only do
that for one movie clip per FLA file.
| | 00:37 | So we want to make this reusable, so
again we'll apply to the base class.
| | 00:42 | So in there type com.toddperkins.sk8bit.
Obstacle. I'll click OK and Flash will
| | 00:52 | create the TrashCan class for us,
then we'll jump over to Obstacle.as.
| | 00:57 | Right above the constructor I'll create
a public property called leadingMover.
| | 01:03 | data type it to a mover and we
won't give it a value just yet.
| | 01:07 | This is going to represent the
background movie clip, so the trashcans will go
| | 01:13 | the same speed as the background.
| | 01:16 | Let's write the code to see how that works.
| | 01:19 | Scroll down into the allLoaded method.
In there add an EventListener to listen
| | 01:23 | for the inter-frame event. So
addEventListener and the event's going to be
| | 01:28 | event.enter_frame. We'll run a method
called Update which is already defined.
| | 01:34 | And inside of the Update method the
first thing we're going to do is to check to
| | 01:38 | see if leadingMover is already defined.
| | 01:41 | So we create an If statement and
inside of the parentheses type leadingMover.
| | 01:47 | So if it's already defined then
here is what we're going to do.
| | 01:50 | Inside the curly braces for the If
statement, type x += leadingMover.speed.
| | 01:59 | Notice that speed is
highlighted in the code hinting window.
| | 02:02 | It's a new feature of Flash CS5.
| | 02:05 | So we're going to move the x position
of the obstacle at the same speed as the
| | 02:10 | leadingMover speed, which in
this case is going to be bg_mc.
| | 02:15 | If leadingMover is not
defined then we'll define it.
| | 02:19 | So right below the close curly brace of
the If statement create an else statement.
| | 02:24 | In the else statement type
leadingMover = and then we're going to type
| | 02:31 | parent.getChildByName and in quotes
inside of the parentheses, type bg_mc.
| | 02:41 | Note that if we just typed parent.bg_
mc we get an error because parent is a
| | 02:47 | display object container, which
doesn't have a property called bg_mc. Further,
| | 02:52 | getChildByName returns a display object,
so what we want to do is tell Flash to
| | 03:01 | data type this information as a Mover.
| | 03:04 | So I'll wrap (parent.getChildByName
("bg_mc")) in parentheses, so you should have
| | 03:11 | two parentheses at the end.
| | 03:13 | Right before the open parenthesis,
before parent, I'm going to type Mover with
| | 03:17 | a capital M. So Flash will take all this
data and data type it to a Mover before
| | 03:22 | setting the leadingMover property.
| | 03:24 | So save the file and go back to your FLA
file. In your FLA go to the Game movie clip.
| | 03:33 | In the Game movie clip you'll see some
trashcans at the bottom of the stage.
| | 03:39 | These are on the TrashCan layer,
so I can show and hide them there.
| | 03:48 | Click-and-drag the trashcans
onto the background, like so.
| | 03:55 | Now at this point you should be able to
test the movie and see the trashcans moving.
| | 04:00 | (Music Playing)
| | 04:04 | And there they are.
| | 04:05 | So I'm just going to undo those changes
and put the trashcans back to where they
| | 04:13 | were to clean up the stage.
| | 04:15 | So as you've seen the Obstacle class
is now working and connected to the
| | 04:19 | TrashCan movie clip.
| | 04:20 | If you wanted to create other obstacles
all you'd have to do is to connect any
| | 04:25 | movie clip you want to the Obstacle class.
| | Collapse this transcript |
| Detecting collisions with the player| 00:00 | Nearly every game needs a way to
handle collisions between objects and this
| | 00:05 | game is no exception.
| | 00:06 | In the Obstacle class, let's
add some code so we can support
| | 00:10 | collision detection.
| | 00:11 | Let's start by creating
two more public properties.
| | 00:16 | So public var mainCollider,
and that will be a Boarder.
| | 00:21 | This is going to represent the object that's
going to cause a collision or the game's hero.
| | 00:27 | Let's go to the next line and create
another public property called hit.
| | 00:32 | And this is going to represent
the hit area of the movie clip.
| | 00:36 | So let's type MovieClip for the datatype.
| | 00:39 | Now, you don't have to have a
customized hit area for your application, but for
| | 00:44 | this one I wanted to make
the game a little bit easier.
| | 00:46 | So I created a custom hit area.
| | 00:49 | If you want to see that, you can go to
the FLA file, go to the Library, and open
| | 00:54 | up the TrashCan movie clip.
| | 00:56 | In there, you'll see a small blue
rectangle that is smaller than size of the
| | 01:00 | trashcan, and I named it hit_mc.
| | 01:04 | So you can see if you expand the
Timeline that the trashcan is hidden and when
| | 01:10 | I show it, you can see
it's bigger than the hit area.
| | 01:12 | So it's your call how to handle that.
| | 01:13 | Let's jump back to Obstacle.as, and
then in the allLoaded method right above
| | 01:20 | addEventListener(Event.ENTER_
FRAME) I'll type hit = hit_mc.
| | 01:25 | Now, we'll write the collision
detection code in the update method.
| | 01:30 | Below everything else that's previously
written inside this method, I am going
| | 01:34 | to create another if statement.
| | 01:36 | I am also going to create an else statement.
| | 01:38 | So I'll just create the skeleton of
that statement while we are at it.
| | 01:41 | So I have if and else and for the
condition of if, we want to check to see that
| | 01:45 | mainCollider is defined and hit is defined.
| | 01:50 | If so, then we go into check for the collision.
| | 01:53 | So create an if statement in here
with some parentheses and curly braces.
| | 01:57 | The way that we detect a collision is
by calling the hit test object method.
| | 02:01 | So type hit. This would just be this if
you were not using a special hit area,
| | 02:06 | .hitTestObject, and in
parentheses pass in mainCollider.
| | 02:12 | Make sure you have two parentheses at
the end of that if statement, one to close
| | 02:17 | out hitTestObject and one for the if statement.
| | 02:19 | We are seeing if the objects are touching.
| | 02:22 | If so, then we'll run a method on the Boarder.
| | 02:25 | So we'll create that later in this movie.
| | 02:28 | But it's going to be called
collidedWith and it's going to accept one parameter,
| | 02:32 | which is an Obstacle.
| | 02:33 | So type mainCollider.collidedWith,
and in the parentheses pass in this.
| | 02:42 | This will allow the Boarder class to have
information about the object that it collided with.
| | 02:46 | Go to the next line and
we'll set mainCollider = null.
| | 02:50 | That way we don't have any extra
references to the Boarder in another class, so
| | 02:54 | it can successfully be garbage collected.
| | 02:56 | Go to the next line.
| | 02:57 | We'll set hit equal to null as well and we'll
remove the EventListener for the update method.
| | 03:04 | To do that, I'm going to copy the
AddEventListener line of code inside of the
| | 03:08 | allLoaded method, Ctrl or Command+C, and
I'll paste it in that if statement that
| | 03:14 | we are working in, right below hit = null.
| | 03:17 | In the pasted code change add to remove.
| | 03:21 | So this is going to be what
happens if mainCollider is defined.
| | 03:25 | But we actually haven't defined it yet.
| | 03:27 | We'll do that in the else statement.
| | 03:30 | So scroll down in that empty else
statement that you created earlier in this movie--
| | 03:34 | let's close the
Timeline here to get some more space--
| | 03:37 | type mainCollider, and we are going to
set its value in the same way that we set
| | 03:42 | the leadingMover value on line 32 in my code.
| | 03:45 | See how we datatyped
parent.getChildByName to a Mover?
| | 03:48 | We're going to do the same
thing there but for the Boarder.
| | 03:51 | So, after the equals sign after
mainCollider type Border, capital B, and then
| | 03:55 | type some parentheses and a semicolon.
| | 03:58 | And inside of the parentheses,
we'll type parent.getChildByName.
| | 04:04 | In the parentheses for getChildByName
type some quotes and then type the name of
| | 04:10 | the skateboarder, which
is boarder_mc. All right!
| | 04:15 | Save this file and then remember that
we have to define the collidedWith method
| | 04:20 | inside of the Boarder class.
| | 04:22 | That's going to happen
when the collision happens.
| | 04:25 | So go to Boarder.as, scroll all the way
down to the bottom, create a new public
| | 04:32 | method, because we are going to need to
be able to call this from other classes.
| | 04:36 | So public function and then
collidedWith, capital W. In the parentheses we'll
| | 04:43 | receive a parameter, we'll call it obj,
short for object, and datatype it to an
| | 04:49 | Obstacle, :void for no return data.
| | 04:53 | Inside of the method, we'll type
gotoAndPlay and we'll pass in 2.
| | 05:01 | The animation of the Boarder
falling is on the second frame.
| | 05:05 | Now if we had more animations inside
of the Boarder movie clip, it would make
| | 05:09 | sense to use frame labels.
| | 05:10 | But since it's always going to be on
frame 2 and frame 1 is always going to be
| | 05:13 | a static image of the boarder standing on the
skateboard, I decided to just use a number here.
| | 05:18 | Go down to the next line and
run a method called controlAudio.
| | 05:23 | In the controlAudio method
we'll pass in the bailSound.
| | 05:25 | Then we'll remove the event listeners
from the stage for MouseEvent.MOUSE_DOWN
| | 05:30 | and MouseEvent.MOUSE_UP.
| | 05:32 | To do that, I am going to scroll
up in my code and I am going to find
| | 05:36 | the touchEnded method.
| | 05:37 | In there, I'll select the line of code
that says stage.removeEventListener, copy
| | 05:41 | it and scroll down, and I'll
paste it right below controlAudio.
| | 05:44 | So we want to disable the mouse
interactivity after the collision happens.
| | 05:49 | So scroll up and we'll find the line where
you removed the event listener in touchStarted.
| | 05:53 | So find touchStarted and in there select
| | 05:56 | stage.removeEventListener(MouseEvent.
MOUSE_DOWN, touchStarted), copy it, scroll
| | 06:02 | down to collidedWith, paste it
at the bottom of that method.
| | 06:05 | Now in here, we want to have a
property that stores whether the skateboarder
| | 06:10 | bailed and here we want to set it to true.
| | 06:13 | We also want to send out an event
that the boarder bailed so that we could
| | 06:17 | check that from other classes in the future.
| | 06:20 | That way we can handle the gameplay.
| | 06:22 | So let's scroll up and go up to the section of
your code where you define the properties.
| | 06:28 | In here, we'll create
two properties, both public.
| | 06:32 | One called didBail, capital B, datatype
it to Boolean, and then the next one is
| | 06:39 | going to be a static constant,
just like we did for landed earlier.
| | 06:45 | So this is going to be BAILED and
we can dispatch an event with it.
| | 06:48 | So BAILED is a string and we'll set it
equal to bailed as a String. So it's in quotes.
| | 06:54 | So now scroll all the way back down to
the collidedWith method and we'll set
| | 06:59 | didBail = true and then
we'll dispatch the BAILED event.
| | 07:03 | So dispatchEvent, capital E, and in
the parentheses type new Event with
| | 07:10 | a capital E, and some more
parentheses, and in those parentheses type
| | 07:15 | Boarder.BAILED all caps.
| | 07:17 | So we are setting out this event and
we can listen for it in another class
| | 07:22 | and react accordingly.
| | 07:24 | We'll do that in another movie.
| | 07:25 | I want to make one more
change before we test the movie.
| | 07:29 | Scroll up to the update method and in
here when we check to see if(isJumping)--
| | 07:35 | that's in the conditional statement
where we check to see if y is greater than
| | 07:39 | groundY where the character lands.
| | 07:42 | We want to make sure that he
is jumping and did not bail.
| | 07:46 | So after isJumping type two
ampersands and an exclamation point for the Not
| | 07:51 | operator and then didBail with a capital B.
| | 07:54 | So if the character is jumping and
didn't bail and hits the ground, then we're
| | 07:59 | going to set isJumping to false and
add that event listener. Again, because if
| | 08:03 | the character did fall over, then we
don't want to re-add this event listener,
| | 08:08 | because that will add mouse interactivity again.
| | 08:11 | We don't want that to happen.
| | 08:13 | Below that if statement,
create another if statement.
| | 08:17 | We're going to check to
see if the boarder bailed.
| | 08:21 | If he did, we're going to remove
the event listener for update so the
| | 08:25 | skateboarder stops updating.
| | 08:27 | So the mouse or touch interactivity
will be disabled and the accelerometer
| | 08:32 | interactivity will be disabled as well.
| | 08:34 | So in the if statement type didBail,
capital B, and then we can type the
| | 08:39 | removeEventListener line of code
by scrolling up and copying the
| | 08:42 | addEventListener line of code,
which in my code is on line 42.
| | 08:47 | Go to the allLoaded method and select
| | 08:49 | addEventListener(Event.ENTER_FRAME, update).
| | 08:52 | Copy the code, paste it in the
if(didBail) statement you just wrote, and change
| | 08:58 | addEventListener to removeEventListener.
| | 09:01 | The last thing we want to do is
just put a trashcan on the stage.
| | 09:04 | So go to your FLA file and open up the
Library and head over to the Game movie clip.
| | 09:12 | In there, find the trashcans at the
bottom-right of the stage and just drag one
| | 09:19 | of them onto the background.
| | 09:21 | Now let's test the movie and
confirm that everything works.
| | 09:24 | (Music playing)
| | 09:28 | He can jump and then he hits
the trashcan and falls over.
| | 09:32 | So the interactivity for the boarder is
disabled but the background is still moving.
| | 09:37 | That's something that
we'll fix in another movie.
| | 09:39 | But for now, you can see that the
collision detection is set up and when the
| | 09:44 | skateboarder hits the trash can,
he falls over, the sound plays, and all the
| | 09:49 | interactivity for the skateboarder is disabled.
| | 09:52 | Remember that whenever you want
to add collision detection, use the
| | 09:57 | hitTestObject method and pass in
the object that you want to test the collision with.
| | Collapse this transcript |
| Ending the game when the player bails| 00:00 | Now that you have collision detection in
your game, we will add some code to end
| | 00:04 | the game when a collision occurs.
| | 00:06 | Before we start writing code, I want
to show you the Boarder movie clip.
| | 00:10 | So let's open up the Library and
double-click Boarder to enter its Timeline.
| | 00:14 | So on the first frame we have a stop
action, but on the last frame after the
| | 00:19 | falling animation is complete, let's take a
look at the code by opening Actions panel.
| | 00:24 | See how it says Object(this
.parent.parent).gameOver?
| | 00:27 | That's the code that ends the game.
| | 00:30 | So we are taking this.parent, which is
the game, .parent, which is Sk8bit or the
| | 00:36 | main timeline, data typing it to an Object
so we can apply whatever properties or
| | 00:41 | methods we want without getting an
error and calling its gameOver method.
| | 00:46 | So the gameOver method happens
after the animation is complete.
| | 00:49 | So let's define what
happens in that method right now.
| | 00:52 | Jump over to Sk8bit.as and find the
gameOver method at the bottom of the code.
| | 00:58 | I am going to double-click the
Timeline panel to minimize it so I have more
| | 01:01 | room for writing my code.
| | 01:03 | In here we are basically
going to reset the game.
| | 01:06 | So we will type SoundMixer.stopAll.
| | 01:13 | That's going to stop all the playing
sounds that are controlled with ActionScript.
| | 01:17 | Then we are going to set the sound
transform object's volume equal to 1.
| | 01:23 | If you look in the properties, you
will see that we have some properties
| | 01:26 | to control the sound.
| | 01:27 | So we have bgSound, bgChannel, and bgTransform.
| | 01:28 | So we will set the transforms volume to 1.
| | 01:34 | So bgTransform.volume = 1.
| | 01:37 | So we will set it to full volume, because we
minimized the volume inside of the start game.
| | 01:44 | Now I have this code commented out, but
remember that's only because I'm going
| | 01:48 | to be talking over while we are
playing the game and I don't want that to
| | 01:52 | conflict with my talking.
| | 01:53 | So we will uncomment that later on.
| | 01:56 | But see how the code set to
volume of point 3, so the volume is
| | 01:59 | quieter when game plays.
| | 02:01 | When it goes back to the titles screen,
we are going to make the volume equal to 1.
| | 02:05 | So let's go the next line
and we will play this sound.
| | 02:08 | So bgChannel = bgSound.play and in
the play method we will pass in 0.
| | 02:19 | That's the starting time. 999.
| | 02:20 | That's the number of loops,
which is essentially infinite.
| | 02:25 | Then bgTransform to pass in the sound
transform object and apply the volume.
| | 02:30 | Then we will take the game off the stage.
| | 02:32 | So removeChild(game).
| | 02:36 | This will put us back on the title screen,
and we will set game = null so it can
| | 02:40 | be garbage collected, and then we'll
add the event listener to start the game.
| | 02:44 | Instead of typing that out I
am going to copy and paste it.
| | 02:47 | So I am going to go to the
constructor method, select
| | 02:49 | Stage.addEventListener, copy with
Command+C or Ctrl+C and paste it right
| | 02:54 | under game = null in the gameOver method.
| | 02:56 | Now you may be wondering why I always
copy and paste these methods instead
| | 03:02 | of writing them out.
| | 03:03 | For one it saves time, but the more
important reason is that I don't want to
| | 03:08 | accidentally write the wrong method name or
the wrong event and cause an error or anything.
| | 03:13 | So when I'm recording movies or when
I'm programming on my own, I actually
| | 03:18 | always copy and paste the add and
removeEventListener lines of code to avoid
| | 03:22 | those types of errors.
| | 03:24 | So let's save the file.
| | 03:28 | Now before we test the movie, I want
to make a change to the Game class.
| | 03:32 | Remember that in the Boarder class,
we set it to fire off the BAILED event
| | 03:37 | when the boarder falls.
| | 03:39 | So let's listen for that event and hear and
define what happens when that event occurs.
| | 03:44 | Go to your constructor and right
above updateSpeed, we are going to add an
| | 03:49 | event listener to the boarders.
| | 03:50 | So boarder_mc.addEventListener,
capital E, capital. It should be all blue if
| | 03:58 | you typed it correctly.
| | 03:59 | Then the event is going to be Boarder.
BAILED, all caps, comma and a space, and we
| | 04:07 | are going to run a method called finishGame.
| | 04:11 | The whole purpose of this method for now is
to stop the background elements from moving.
| | 04:16 | So we are going to wait until the
boarder falls and then we are going to stop
| | 04:19 | scrolling the background elements.
| | 04:21 | So go down a few lines below the
constructor and create a private function
| | 04:27 | called finishGame that will receive an
event object with the data type of Event,
| | 04:32 | because that's the datatype we used
when we fired off the event in the boarder
| | 04:35 | class, :void for no return data.
| | 04:39 | In the curly braces we will set a
speed of bg_mc and farback_mc = 0.
| | 04:47 | So bg_mc.speed. Remember that's the
property that controls how it moves, set it
| | 04:53 | equal to 0, go to the next line and
type farback_mc.speed = 0, and we will save
| | 05:03 | the file and test it out in the
Flash player to see that when you hit a
| | 05:07 | Trashcan, the background stops moving
and the game resets after the animation of
| | 05:14 | the skateboarder following is complete.
| | 05:16 | So let's test the movie. Check it out!
| | 05:18 | (Music Playing)
| | 05:20 | So I can jump, then I hit the Trashcan.
| | 05:26 | After the animation is complete, it
starts over and you can play it again.
| | 05:29 | So now we have successfully made it
so the game ends whenever you hit an obstacle.
| | Collapse this transcript |
| Using a timer to create trash cans| 00:00 | The next step in creating our game is
to add functionality to create obstacles
| | 00:04 | automatically, which we will
do by using the Timer class.
| | 00:07 | Before we create those obstacles though,
I want to go inside of the Game movie clip
| | 00:12 | by double-clicking it in the
Library and I will just delete that trash
| | 00:16 | can off of the stage.
| | 00:18 | So you see the trashcan that we've been
using to do our testing with, I am just
| | 00:22 | going to select it and delete it.
| | 00:24 | And will from now on create all the
trashcans dynamically using ActionScript.
| | 00:29 | So jump over to Game.as
and we will write the code.
| | 00:33 | Start by minimizing the timeline.
| | 00:35 | Then we will create some properties.
| | 00:39 | So scroll up to the top and
right below movesSpeed = 5,
| | 00:42 | we will create a private property
called canY, datatype it to a Number, and
| | 00:50 | initialize it to 240.
| | 00:52 | Now I didn't just make this number up,
I put the can on the stage and just
| | 00:58 | tested where I wanted its Y position to
be in and then I wrote that number down
| | 01:01 | and put that in here.
| | 01:02 | Next, create another private
property called closeTrashCans.
| | 01:10 | So it will be a uint, a
positive integer equal to zero.
| | 01:14 | Whenever we create a trashcan we are going
to have close trashcans and far trashcans.
| | 01:20 | But we want to have a limit to the
number of close trashcans that can exist.
| | 01:24 | So this property is going to hold the number
of close trashcans that there are on the stage.
| | 01:31 | Create another private property.
| | 01:32 | This is one's going to be
called allowedCloseTrashCans.
| | 01:42 | This is also going to be a positive
integer and we will set it to the value of 4.
| | 01:47 | So if you increase this or decrease it,
you can alter the number of trashcans
| | 01:52 | that are allowed to be close together.
| | 01:53 | So create another private property
called isFirstCan and we wanted to check to see
| | 01:59 | if the trashcan is the first trashcan.
| | 02:01 | So type isFirstCan.
| | 02:06 | That's going to be Boolean and
we will initialize that to True.
| | 02:11 | So before anything else happens we are
going to set the trashcan to be the first
| | 02:15 | trashcan and then we will
create all the trashcans dynamically.
| | 02:20 | So scroll down, go to the next line, and
we will create a final private property,
| | 02:26 | and this is called obstacleTimer.
| | 02:28 | Datatype it to a Timer, and we will
initialize it right here to a new timer and
| | 02:34 | then we will pass in the parentheses 5,000.
| | 02:37 | That's 5,000 milliseconds.
| | 02:40 | So if the timer is going to go off
every five seconds, unless we change it.
| | 02:45 | At the bottom of the constructor method
add an event listener to obstacleTimer.
| | 02:50 | obstacleTimer.addEventListener and the
event is going to be TimerEvent.TIMER and
| | 02:58 | we will run a function called makeObstacle.
| | 02:59 | We will define that method in just a moment.
| | 03:03 | On the next slide we will
make sure to start the timer.
| | 03:05 | So obstacleTimer.start and
then we'll define,makeObstacle.
| | 03:12 | So this will be a private method, so
right below the constructor Private
| | 03:16 | function makeObstacle.
| | 03:17 | And the parentheses we will receive
an event object with the datatype of
| | 03:22 | TimerEvent, :void for no return data,
and here we will make the trashcans.
| | 03:28 | Now we've already exported the
trashcan for ActionScript and there in its
| | 03:33 | class called TrashCan.
| | 03:35 | So we will create one by typing
var can, datatype it to a TrashCan, and we will
| | 03:41 | set it equal to a new
instance of the TrashCan class.
| | 03:45 | Then we are going to set the speed.
| | 03:47 | So go to the next line and we
will put the can on the stage.
| | 03:50 | So addChild and in parentheses can.
| | 03:54 | Now if we were to do this right now
and test the movie, you see that the can
| | 03:57 | would be in front of the skateboarder.
| | 04:01 | We don't want that to happen.
| | 04:02 | We want the can to be behind the skateboarder.
| | 04:04 | So we will add the
boarder to the stage again here.
| | 04:07 | So addChild and then boarder_mc right in there.
| | 04:12 | So make sure that the skateboarder is
in the front and now we want to set the
| | 04:16 | can's X and Y positions.
| | 04:18 | So can.x = stage.stageWidth.
| | 04:24 | So it will be aligned with
the right edge of the stage.
| | 04:26 | So it will just come from off of the stage
and then we will set can's Y position = canY.
| | 04:34 | Let's save the file and test the movie.
| | 04:37 | So File > Save and we will test it out.
| | 04:40 | (Music playing)
| | 04:45 | So after five seconds there should be a
trashcan and see if you can jump over it
| | 04:51 | and see the next trashcan. There you go!
| | 04:58 | So every five seconds there should
be a new trashcan on the stage. Nice!
| | 05:08 | Now what we will do is make it a little bit
more interesting by randomizing the timer.
| | 05:15 | So each time a trashcan is created,
the difference between the time that a
| | 05:21 | trashcan is created will be random.
| | 05:24 | So a trashcan can be created after
half a second or after 5 or 10 seconds
| | 05:29 | or whatever we want.
| | 05:30 | So let's go down a few lines
and we will stop the timer.
| | 05:34 | So obstacleTimer.stop, create a
variable called newDelay, datatype it to uint,
| | 05:43 | and then we will create some
conditional statements to make the newDelay.
| | 05:48 | So go down a few lines and I will
type if, some parentheses, and some curly
| | 05:54 | braces and here what we are going
to do is check to see if Math.random.
| | 06:00 | So we are going to generate a random
number between 0 and 1. We'll try to see if
| | 06:05 | it's greater than .5. So if so, Or.
So two pipes. closeTrashCans is greater than or
| | 06:15 | equal to allowedClosedTrashCans
Or, two more pipes, isFirstCan.
| | 06:25 | So if any of those things is true,
then we are going to have a greater delay
| | 06:30 | between the trashcan.
| | 06:31 | So in that if statement type
newDelay = Math.random() * 3000.
| | 06:42 | That's three seconds. + 3000.
| | 06:46 | So it will have three second
randomness, but a minimum of three seconds.
| | 06:52 | So somewhere between 3 and 6 seconds,
that's going to be the new delay.
| | 06:56 | Let's go down to the next line and
type closeTrashCans = 0 and then we'll
| | 07:04 | set isFirstCan = false.
| | 07:08 | Now if this if statement is not
evaluated as true, then we will create a closer
| | 07:14 | trashcan with a lower delay.
| | 07:15 | So right below that if
statement, create an else statement.
| | 07:19 | Inside of the curly braces of the else
statement, we will check to see the delay
| | 07:24 | of the obstacleTimer.
| | 07:26 | So if statement in there, and
inside of that if statement type
| | 07:31 | obstacleTimer.delay is less than
or equal to 500, so half a second.
| | 07:39 | Then we are going to add two close trashcans.
| | 07:41 | So closeTrashCans ++.
| | 07:42 | So we've got to see every time we
create a trashcan, we see how many close
| | 07:50 | trashcans there are, and we can
increment that if it's a close trashcan.
| | 07:55 | Then right below that we will set a
value for newDelay and we will set equal to
| | 07:59 | Math.random() * 500.
| | 08:03 | So anywhere between zero and
half a second will be the new delay.
| | 08:08 | Now under the else
statement we will apply that change.
| | 08:12 | So obstacleTimer.delay = newDelay.
| | 08:20 | Then we will start the timer again.
| | 08:22 | So obstacleTimer.start.
| | 08:26 | So now instead of creating new trashcan
every five seconds, it'll be randomized.
| | 08:31 | It will either be a far trashcan,
which is between 3 and 6 seconds, or a close
| | 08:36 | trashcan, which will be
between zero and half a second.
| | 08:39 | So now before we test the movie,
we need to disable the timer in the
| | 08:45 | finished game method.
| | 08:46 | So find the finished game method.
| | 08:48 | You should be able to scroll down a
little bit to see it, and right below
| | 08:51 | farback_mc.speed = 0, type this.
| | 08:55 | ObstacleTimer.stop, so we will stop
the timer and then we are going to remove
| | 09:02 | that event listener for the timer
event and you can copy and paste that code
| | 09:07 | from the constructor.
| | 09:08 | So find obstacleTimer.
addEventListener and select it, copy with Command+C,
| | 09:13 | Ctrl+C, scroll to the bottom of your code,
in the finished game, paste it right below
| | 09:18 | obstacleTimer.stop, and then change
addEventListener to removeEventListener
| | 09:23 | in the pasted code.
| | 09:24 | So we will save the file and you should
at this point be able to test the movie
| | 09:29 | and see the cans appear at
random intervals after the first can.
| | 09:33 | (Music playing)
| | 09:34 | So now the game is going to be
a little bit more challenging.
| | 09:36 | So we wait for five seconds and the first
can comes and then we see the second can.
| | 09:50 | Then there are two cans next to each other.
| | 09:53 | So this is going to be
different every time you play the game.
| | 09:55 | So now we have a little bit of a challenge.
| | 10:04 | (Music playing)
| | 10:05 | Then the game restarts if you hit
a trashcan and you can play again.
| | 10:08 | So you really have all the
basic functionality for the game.
| | 10:13 | We just need to add stuff like scoring and
the rest of the features and then we are all done.
| | 10:17 | So now that we've added the
randomized timer, the game is a lot more
| | 10:25 | interesting and you can
jump over the trashcans.
| | 10:27 | It goes on indefinitely.
Trashcans are created at random intervals.
| | Collapse this transcript |
| Calculating points and deleting unused objects| 00:00 | Adding scoring will add more fun to the game.
| | 00:03 | Let's look at how to add points each
time a player jumps over a trashcan.
| | 00:07 | The first thing we will do is
create a property called score.
| | 00:11 | I'll create that at the bottom of our
properties in the game class, private var score,
| | 00:15 | data type it to
uint and set it equal to 0.
| | 00:20 | Next, scroll down to makeObstacle
method and right below can.y = canY,
| | 00:27 | type can.addEventLister, capital E,
capital L and in the parenthesis type
| | 00:32 | Event.ENTER_FRAME and we will
call a method called removeCan.
| | 00:38 | Now we haven't defined that yet
and we'll do that right now.
| | 00:41 | Before we define it, I want to
select this line of code and copy it.
| | 00:45 | So Command or Ctrl+C because
we will use it in just a second.
| | 00:48 | Right below make obstacle,
let's create the removeCan methods.
| | 00:54 | So private function, removeCan,
capital C, receives an event object, with a
| | 01:00 | data type of Event, :void for no
return data and some curly braces.
| | 01:05 | In here we'll create a variable called
can that is going to be a TrashCan and we
| | 01:13 | will set it equal to event.currentTarget.
| | 01:17 | That was the object that
added the event listener.
| | 01:19 | However, this isn't going to return a
TrashCan so we are going to need to typecast it
| | 01:23 | and tell Flash to
treat this data as a trashcan.
| | 01:28 | So wrap event.currentTraget in parentheses
and right before the parentheses type Trash with
| | 01:33 | capital T, Can with a capital C.
| | 01:36 | Here what we want to do is check to see
if the trashcan is off the stage, because
| | 01:40 | we don't want to add to the player
score just when the player jumps over the
| | 01:44 | trashcan because the player could
backup into the trashcan, so we want to make
| | 01:47 | sure that the score is not incremented
until the trashcan is off the stage
| | 01:52 | and the player can no longer hit it.
| | 01:54 | At that point we also want to delete
the trashcan so we are not wasting memory.
| | 01:58 | So go to the next line of code and check
to see if the Can is moved off the stage.
| | 02:03 | So create an if statement and in
there check the can's X position.
| | 02:08 | So if can.x < -can.width.
| | 02:14 | So that's going to be where the can's right
edge is aligned with the left edge of the stage.
| | 02:18 | So it's completely off the stage.
| | 02:21 | So if that's the case, it's time to
give the player a point and delete the can.
| | 02:26 | So here we will paste the
code that we copied a minute ago.
| | 02:29 | Command+V or Ctrl+V to paste. That's
the can.addEventListener line of code.
| | 02:33 | If you don't have it in the pasteboard you
can get it from the makeObstacle method.
| | 02:39 | So in the pasted code, change
addEventListener to removeEventListener. That will
| | 02:43 | stop the trashcan from running that
ENTER_FRAME event which is going to take up
| | 02:47 | so much memory, and then we are
going to take the can off of the stage.
| | 02:52 | I am going to do that by calling
can.parent.removeChild and in parenthesis
| | 02:58 | I will pass in the can.
| | 03:00 | So I have the can's parent remove
it from the stage and then we will
| | 03:04 | increment the scores.
| | 03:05 | Score ++ and the last thing we want to
do is put the score inside of the score
| | 03:12 | text field, which is called score_txt.
| | 03:15 | So go to the next line and
type score_txt.text = score.
| | 03:23 | Now remember score is an integer
so this might give us an error.
| | 03:26 | So I am going to tell Flash to treat this
as a string, so we don't have any problems.
| | 03:31 | Wrap score in parenthesis and
right before the open parenthesis type
| | 03:35 | String with a capital S.
| | 03:37 | Now if you want to confirm an instance
name of the score text field, you can
| | 03:40 | go inside of the game movie clip and check
that, but I am not going to do that right now.
| | 03:45 | Save the file and let's
check it out in the Flash Player.
| | 03:49 | Remember what you're looking for. You
want to see that when you jump over a
| | 03:52 | trashcan and the trashcan goes all the
way up to the stage, the score increments
| | 03:56 | and shows it in the score text field.
| | 04:00 | (Music Playing)
| | 04:06 | All right! I am just going to
make it over this first trashcan.
| | 04:11 | The trick is that you slide
your mouse as you slide up.
| | 04:15 | So you can move in the air.
| | 04:18 | So you can see my score is
incrementing here. Great!
| | 04:23 | Looks like everything is working.
| | 04:25 | So now each time the player jumps
over the trashcan, the score is increased by one.
| | Collapse this transcript |
| Using a shared object to save a high score| 00:00 | Saving data to a person's computer
or iOS device may seem like a complex
| | 00:04 | process, but Flash has some built-in
tools to make it surprisingly simple.
| | 00:09 | Let's take a look at how it works to
save a person's high score to their
| | 00:13 | computer or iOS device.
| | 00:15 | In the Sk8bit class right above the
private var where we create the game, I am
| | 00:20 | going to create a public static
constant called HIGH_SCORE, in all caps.
| | 00:28 | Set its data type to a string and we
will set its value equal to highScore, with
| | 00:36 | the capital S, SK8Bit.
| | 00:44 | If you're creating this for another game,
you can really call it anything you want.
| | 00:48 | So we'll save the file
and head over to Game.as.
| | 00:53 | Right below the score property, I am
going to create another private property
| | 00:58 | called high, short for highScore.
| | 01:01 | This will also be a positive
integer and we will initialize it to 0.
| | 01:05 | On the next line, we will create the
object that will store our high score.
| | 01:11 | The class is called SharedObject
and it's in a package called Flash.net.
| | 01:17 | So create a private property called
score_so, short for shared object.
| | 01:25 | Data type it to a
SharedObject and we will set it equal to
| | 01:30 | SharedObject.getLocal and in the
parenthesis we will pass in Sk8bit, so the
| | 01:43 | class name, Sk8bit.High_Score.
| | 01:48 | So what this is doing is it's grabbing
any data that may exist for this object.
| | 01:54 | So if there is already a high score, say
it is going to grab it. If not, we will
| | 01:58 | check to see and control
how that's going to work.
| | 02:01 | So scroll down and we will write the code
for that at the bottom of the constructor.
| | 02:05 | So right below obstacleTimer.start,
we will create a conditional statement to
| | 02:10 | see if there is a high score property.
| | 02:13 | So type if and some
parenthesis, some curly braces.
| | 02:17 | We are going to check to see if
there is a high score already.
| | 02:20 | So if (score_so.data.
| | 02:25 | Now this is how we define our custom properties.
| | 02:28 | We have this data object and you can
save your data as a high score or any
| | 02:33 | other data you want provided it follows
the SharedObject specifications inside
| | 02:38 | of this data object.
| | 02:39 | If you want to read more about
that, you can see it on Flash Help.
| | 02:43 | So the property is highScore with a
capital S. So if there is a high score, then
| | 02:51 | we will set the high property =
score_so.data.highScore, capital S.
| | 03:02 | If high score is not defined
then we will define it here.
| | 03:05 | score_so.data.highScore = 0.
| | 03:13 | Now we will put the high score
inside of the highScore text field.
| | 03:17 | So right below that else statement,
type high_txt, which is the name of the
| | 03:24 | highScore text field, .text = high and
remember that this is an integer so we will
| | 03:32 | need to data type it to a string.
| | 03:34 | So wrap high in parenthesis and type the
word String with a capital S right before it.
| | 03:40 | Now we will add some code
to update the high score.
| | 03:43 | Scroll down and find the removeCan method.
| | 03:47 | Right below where we reset the
score text field, go down a few lines.
| | 03:52 | We'll create an if statements that
checks to see if the score is greater
| | 03:56 | than the highScore.
| | 03:58 | So if some parenthesis, some curly
braces and an if statement. We type score > high.
| | 04:07 | So if the score is greater than the
high score, then we are going to set high =
| | 04:12 | score and then we are going to
set the data for the shared object.
| | 04:17 | So score_so.data.highScore = high.
| | 04:25 | And the last thing we will do is put
the new high score in the text field.
| | 04:31 | So right below that line, high_txt.
text=String with capital S and some
| | 04:38 | parenthesis. Inside of the
parenthesis pass in high.
| | 04:43 | So if the person playing the game
happens to get the high score, we hold
| | 04:47 | it in that higher property put it
inside of the shared object and then set it
| | 04:51 | in the text field, and that is literally all
you have to do to save data to a user's device.
| | 04:57 | So let's check this out by saving the
file and we will test it in the Flash
| | 05:01 | Player and watch the high score
update as we score points.
| | 05:08 | (Music playing)
| | 05:13 | Okay, so I just go to make it over this
first trashcan and you should see high
| | 05:17 | score update to one.
| | 05:20 | There we go. So now I run into this next one.
| | 05:24 | (Music playing)
| | 05:27 | Now when I play the game again, as we
see high score is one and then so you
| | 05:33 | can tell it's saved. And then if I go
higher than that, you will see that it updates.
| | 05:42 | Now for the real test. Close the
application and then test the movie again.
| | 05:49 | (Music Playing)
| | 05:52 | When you start the game, note
that your high score is saved.
| | 05:55 | The data is actually saved on your
computer so even if you delete the SWF file
| | 06:01 | and you test the movie again, your high
score will still be there, and the same
| | 06:05 | code that works on your computer and
the Flash Player, works on the iOS device.
| | 06:10 | So that's all you have to
do to create a high score.
| | 06:13 | Simply create the shared object and
store whatever data you want inside of that object.
| | Collapse this transcript |
| Increasing scrolling speed as gameplay progresses| 00:00 | To make the game more difficult as time
goes on, we'll make the scroll speed go
| | 00:05 | faster and faster each time the
player jumps over 10 trashcans.
| | 00:09 | We'll add the code toward the
bottom in the removeCan method.
| | 00:15 | So find that method in
your code. Mine is on line 70.
| | 00:17 | We're going to write the code as the
last block of code within the if(can.x <
| | 00:26 | -can.width) if statement.
| | 00:28 | So go right below if(score >
high), and we'll add some code.
| | 00:33 | What we want to do is check to
see if the score is a multiple of 10.
| | 00:41 | Now there is actually a mathematical
operator that makes it really easy to find
| | 00:45 | if something is a multiple of another number.
| | 00:47 | Let's type an If statement, so if and
some parentheses and some curly braces and
| | 00:52 | in the parenthesis check
to see if(score % 10 == 0).
| | 01:00 | Now the % sign operator divides
the value and returns the remainder.
| | 01:07 | So it takes score, divides it
by 10, and returns the remainder.
| | 01:13 | So if the remainder of score divided
by 10 is equal to 0, then we can run the
| | 01:19 | block of code in the quotes.
| | 01:21 | So that's when we want to speed up.
| | 01:23 | So I'm going to increase move speed by 10%.
| | 01:27 | To do that, type moveSpeed, capital S,
space, asterisk, equals, space, we're
| | 01:34 | going to multiply by its current
value, and the value is going to be 1.1.
| | 01:41 | We're going to multiply 1.1 times
the current value of moveSpeed to
| | 01:46 | increase moveSpeed by 10%.
| | 01:49 | Go to the next line and then we'll
run update speed to update the speed of
| | 01:54 | background and far back.
| | 01:55 | We already wrote that code earlier.
| | 01:57 | So type updateSpeed with capital S.
Remember, background and farback are going
| | 02:02 | to update based on moveSpeed.
You can see here in the updateSpeed method.
| | 02:10 | Below calling updateSpeed we'll add
the SpeedUp movie clip to the stage.
| | 02:15 | That's inside of the Game movie clip,
and that's just a simple animation that
| | 02:20 | says speed up and it scrolls up on the screen.
| | 02:23 | If you want to see what it looks like
you can go to the FLA file and in the
| | 02:27 | Library just double-click SpeedUp the
movie clip, and then I'll just expand the
| | 02:33 | Timeline and just click-and-
drag to preview the animation.
| | 02:37 | So it basically just slides up and that's it.
| | 02:43 | It's off on the first frame where there
is a stop action and then the animation
| | 02:47 | just comes in and goes up.
| | 02:48 | After it gets to the last frame, it goes
back to the first frame where it's invisible.
| | 02:53 | So we'll go back to Game.as and
we'll show the SpeedUp movie clip.
| | 02:58 | So type addChild and in parentheses
pass-in speedUp_mc, because we want this
| | 03:07 | to be in front of everything else, and
then we're going to have the movie clip play.
| | 03:13 | So speedUp_mc.play and some
parentheses and a semicolon and that's it.
| | 03:23 | So, you could save the file and test
it, and in order to see the speed up
| | 03:28 | happen, you'll need to get at least
10 trashcans that you jumped over.
| | 03:33 | So to make things easier for the
example in this movie I'm going to change the
| | 03:39 | 10 to a 2, so we'll only have to jump
over 2 trashcans just to make sure this works
| | 03:44 | and if it works we'll
just change it back to 10.
| | 03:47 | All I do that because it may take me
a few tries to jump over 10 trashcans
| | 03:52 | in the Flash Player.
| | 03:53 | So let's save the file and test the movie.
| | 03:57 | (Music playing)
| | 04:02 | Now you've got to jump over at least 2
trashcans to see it speed up. So here we go.
| | 04:09 | There is one and then here we go!
| | 04:14 | All right, see there is the speed up movie clip.
| | 04:18 | So if I jump over one more, it should
happen again and should get a little bit faster.
| | 04:26 | Looks great!
| | 04:27 | So if you want to change that, you can
change the number and you can have it
| | 04:31 | speed up based on whether the
score is in multiple of 2, 3, etcetera.
| | 04:35 | I'll change it back to 10 and save the file.
| | 04:41 | Another thing to note is that if
moveSpeed is increasing by too much or too
| | 04:45 | little every time the game speeds up, you
can simply modify this number right here.
| | 04:50 | So you multiply moveSpeed by whatever you want.
| | 04:53 | 1.2 to increase it by 20%, or
1.05 to increase it by 5% each time.
| | 05:00 | Since the updateSpeed method sets all
the movement to be proportional, updating
| | 05:05 | the speed is simply a matter of changing
the moveSpeed property's value and then
| | 05:10 | calling the updateSpeed method.
| | Collapse this transcript |
|
|
5. Testing, Debugging, and Publishing Your GameAcquiring testing certificates and provisioning profiles| 00:00 | Before you can play your game on
an actual device, you'll need the
| | 00:03 | appropriate credentials.
| | 00:05 | On a Mac, this is a pretty
straightforward process that you can do using one of
| | 00:09 | the built-in applications on your computer.
| | 00:11 | If you have a Windows computer you can
still do this, but just know you'll have
| | 00:15 | to enter some command line code.
| | 00:18 | I explained how to do all of that in
my Flash CS5 Essential Training title in
| | 00:24 | the Online Training Library.
| | 00:26 | So for now, let's look at
the Mac side of how to do it.
| | 00:29 | First you'll need to open up Keychain Access.
| | 00:32 | Keychain Access can be found in the
Utilities folder within your Applications
| | 00:37 | folder on your computer.
| | 00:38 | So once you're in Keychain Access,
you'll need to have downloaded and installed
| | 00:43 | your certificates from Apple.
| | 00:45 | This is talked about in Bill Weinman's
course about publishing iOS applications.
| | 00:53 | So you'll need to get a
provisioning profile and a developer
| | 00:57 | distribution certificate.
| | 00:59 | Here I am working with a developer certificate.
| | 01:02 | When you're in Keychain, you want to
select the login keychain and then click on
| | 01:07 | My Certificates at the bottom.
| | 01:09 | When you click on My Certificates, you
can find your development certificate and
| | 01:14 | click the arrow to expand it.
| | 01:16 | In there you'll see a key and you can
right-click that key and choose Export.
| | 01:22 | When you export the key,
you can choose a file format.
| | 01:26 | In this case Flash requires a
p12 file. So save that file.
| | 01:31 | You can call it anything you want.
| | 01:33 | Just remember where you saved
it and the name and everything.
| | 01:37 | Click Save, create a password.
| | 01:39 | You'll have to remember this password
because Flash is going to ask you for it
| | 01:43 | later on, and then just click OK.
| | 01:46 | Your computer may then ask
for an administrator password.
| | 01:49 | So put that in and now I have my key.
| | 01:54 | So in Flash asks for the p12 file
I'll just simply link to that file.
| | 01:58 | So once you have the development
certificate and a provisioning profile, you're
| | 02:03 | ready to prepare to test
your game on an iOS device.
| | Collapse this transcript |
| Troubleshooting performance issues| 00:00 | The Adobe web site has a document
about optimizing iOS applications that
| | 00:05 | you create in Flash.
| | 00:07 | In this movie I'd like to point out
two of those performance optimization
| | 00:10 | techniques that you can use to
increase the performance of your apps.
| | 00:14 | The first one is to not use Alpha.
| | 00:17 | When you're creating an application for
iOS, don't use the Alpha slider in Flash.
| | 00:23 | If something must be partially
transparent, then make sure it's saved as a .PNG file
| | 00:29 | with that partial transparency,
then use it as a bitmap graphic in Flash.
| | 00:35 | I've noticed a significant decrease in
performance when I try to do things like
| | 00:40 | fade an object in or out.
| | 00:41 | So just make sure that you're doing that
as bitmap images and not through Flash.
| | 00:46 | The second thing is that you can
actually cache a vector object as a bitmap.
| | 00:52 | You may have heard of the cache's
bitmap property that you can use to optimize
| | 00:57 | fast-moving vector graphics.
| | 00:59 | You can do the same in your iOS games
but the code is a little bit different.
| | 01:03 | Because my application here is using all
bitmap graphics, I am not going to save
| | 01:09 | it into the application, but I am just
going to show you how to write the code.
| | 01:12 | You're going to use the Matrix class, so
make sure you import that into your application.
| | 01:17 | Right below my score SharedObject, I'll
create a new private property and I am
| | 01:23 | going to call this mat, short for
Matrix, data type it to a Matrix, set it
| | 01:30 | equal to a new Matrix.
| | 01:32 | Now actually for this exercise you don't
really need to know anything about the Matrix class.
| | 01:39 | If you want to find information about it,
you can look it up in Flash Help or
| | 01:42 | look up caching objects as bitmaps
in Adobe's iOS Application document.
| | 01:48 | So I'll scroll down to the
constructor and at the top of the constructor,
| | 01:53 | I'll write some code.
| | 01:55 | I'll type boarder_mc.cacheAsBitmapMatrix.
I'll set that equal to the matrix that
| | 02:08 | we created as the property, so mat.
| | 02:11 | And on the next line I'll type
boarder_mc.cacheAsBitmap = true.
| | 02:21 | Now if this were a vector graphic and
if there were not more than one frame
| | 02:27 | in the Timeline of boarder_mc, this could
greatly enhance the performance of my applications.
| | 02:33 | But from testing that I did initially I
found that these graphics worked better
| | 02:37 | as bitmap images, so I use them as bitmap.
| | 02:39 | So this code actually doesn't really do
anything to increase the performance in my game.
| | 02:43 | So just keep that in mind if you want to
increase the performance of your vector
| | 02:48 | graphics, create a matrix and apply it
to the cacheAsBitmapMatrix property of
| | 02:53 | your object, and then set the
cacheAsBitmap property to true.
| | 02:57 | Again this does not work well if you
have a movie clip with multiple frames.
| | 03:01 | So a single frame movie clip that's
completely vector, you can use this code to
| | 03:07 | optimize your games.
| | 03:08 | I am going to delete this
code now and save the file.
| | 03:15 | And what I want you to take out of
this again, is that when you create a game
| | 03:18 | target for iOS in Flash, make sure
you're not using the Alpha sliders in Flash
| | 03:24 | on any objects, and you can increase
the performance of single frame vector
| | 03:29 | movie clips by caching them as bitmaps.
| | Collapse this transcript |
| Finalizing code, adding an icon graphic, and setting a loading graphic| 00:00 | Now we'll finish our game by
finalizing the rest of the code, adding the icon
| | 00:06 | images, and the default loading graphic.
| | 00:09 | To finalize the code I am simply going
to uncomment the comments where the code
| | 00:15 | is disabling the volume
while you're playing the game.
| | 00:20 | So I am going to uncomment those two lines
in the startGame method of the Sk8bit class.
| | 00:25 | I'll save the
file, and do a test.
| | 00:30 | (Music Playing)
| | 00:38 | And I can confirm that the volume is
quieter when you're playing the game and
| | 00:43 | now it plays while you're
actually playing the game.
| | 00:45 | So let's go to the FLA file
and now we'll set the icons.
| | 00:50 | Remember your app needs to have a few
icons assigned to it so that it doesn't
| | 00:54 | have a white icon on your
device or in the App Store.
| | 00:58 | Assigning the icons is a pretty simple process.
| | 01:01 | Go to the main Timeline of your
FLA and open up the Properties panel.
| | 01:05 | In the Properties panel,
click iPhone OS Settings.
| | 01:10 | In there click the Icons tab. So you
need three icon files that are PNG files,
| | 01:16 | one that's 29x29 pixels, one
that's 57x57, and one that's 512x512.
| | 01:22 | You can create these icons in Photoshop
or any graphic application of your choice.
| | 01:27 | I actually created these in Flash.
| | 01:30 | So just move around the artwork and
export it as a PNG file if you want.
| | 01:35 | So select the icon file that you want to
set and then click the folder icon and
| | 01:41 | go to the 29 image and do
the same thing for 57 and 512.
| | 01:46 | So I can click the icons
in Flash and that's it.
| | 01:55 | That's all you have to do to set the icons.
| | 01:57 | Now what we do is set the default PNG file
to show while the application is loading.
| | 02:04 | Now that image is a slightly different story.
| | 02:07 | I am going to go to the Finder on
my computer. Now I am going to select
| | 02:12 | Default.png and press the
Spacebar to see a preview of it.
| | 02:16 | Notice that it's in portrait
orientation, or in other words I made it in
| | 02:21 | landscape and I've
rotated it 90 degrees clockwise.
| | 02:25 | That's what you need to do
for your loading graphic.
| | 02:28 | Make sure the pixel dimensions are
480x320 Landscape and then rotate them so
| | 02:33 | that they're Portrait.
| | 02:34 | Of course if your game is Portrait
then you just want to have a 320x480
| | 02:39 | rectangle for your graphic.
| | 02:41 | Name it Default.png. Back to Flash.
| | 02:47 | Once you've created your default image,
make sure it's in the same directory as
| | 02:51 | your FLA file and then in the
Included files section under the General tab,
| | 02:56 | click the Plus button and select
that file and click Open. So we have
| | 03:07 | Default.png as our Included file.
| | 03:10 | If you forget that then you won't have
your default image show up because it
| | 03:14 | won't be included when you
finally publish your application.
| | 03:18 | Another thing to note is that you
want to include any other files that
| | 03:22 | are loaded dynamically.
| | 03:23 | So if you're loading audio while
your movie is playing or you're loading
| | 03:28 | graphics or anything,
they need to be included here.
| | 03:31 | So I'll just click OK and that's it.
| | 03:34 | So we finished the game essentially.
| | 03:36 | We've finalized the code, we've added the
app icons, and set the default loading graphic.
| | 03:42 | Remember that if you load any files in
your app dynamically, you need to make
| | 03:47 | sure to include those objects
in the iPhone Settings window.
| | Collapse this transcript |
| Publishing the final version of the app| 00:01 | Now we'll publish the app so that
could test it on an actual device.
| | 00:05 | I'll also show you the final way to
publish your application for submission to Apple.
| | 00:12 | In Flash open up the Properties
panel and then click the Edit button next
| | 00:16 | to iPhone Settings.
| | 00:17 | Here you can choose the output file, and
the app name, and the version of your app.
| | 00:23 | Click the Deployment tab to tell
Flash your certificate and your
| | 00:28 | provisioning profile.
| | 00:30 | So I have my certificate on the desktop.
| | 00:32 | I am not including it with the exercise
files for this course, because it won't
| | 00:38 | work with your computer.
| | 00:39 | You'll need your own certificate for that.
| | 00:41 | So I'll check Remember password for
this session, so I don't have to retype it
| | 00:45 | if I ever come back to this menu.
| | 00:47 | Then for a provisioning profile I'll
click the folder icon and then choose the
| | 00:52 | profile on my desktop.
| | 00:54 | Again, this file will not work for you.
| | 00:56 | So I am not going to include it in
the exercise files for this course.
| | 01:00 | Once you have all that set up, you
can choose Quick publishing for device
| | 01:04 | testing and click the Publish button.
| | 01:07 | After you click the Publish button,
Flash will begin publishing your app.
| | 01:11 | This takes a few minutes with the
testing version and a little bit more time if
| | 01:16 | you're going to create your deployment version.
| | 01:18 | Now before we test the app out, I want
to point out the difference between this
| | 01:24 | and the final version of publishing your app.
| | 01:27 | So let's say your app is ready
for submission to the App Store.
| | 01:30 | You'll need to set everything up in
iTunes Connect as you learned from
| | 01:34 | Bill Weinman course.
| | 01:36 | Also, you'll need to use a
distribution certificate instead of the
| | 01:41 | development certificate.
| | 01:43 | You'll also need a distribution
profile that's connected to your
| | 01:48 | distribution certificate.
| | 01:50 | This is all stuff that's covered in Bill
Weinman's course about publishing iOS applications.
| | 01:56 | When you set those here you also just
want to click Deployment - Apple App Store.
| | 02:02 | So if you make those changes and you
click Publish, then you'll get the final
| | 02:06 | version of your app which
you can then submit to Apple.
| | 02:08 | We'll look at the intricacies
of doing that in another movie.
| | 02:12 | But for now we have a version of
our app that we can test on a device.
| | 02:15 | So I'll just click OK and close that
window and then I'll jump over to Finder.
| | 02:21 | In Finder you'll see the
Flash created an ipa file format.
| | 02:25 | You're going to need to drag this into iTunes.
| | 02:27 | You'll also need to drag your
provisioning profile into iTunes as well.
| | 02:31 | So let's tab over to iTunes
and then tab back to Finder.
| | 02:36 | Then I am going to first drag my
provisioning profile into iTunes.
| | 02:42 | Once you've done that, click-
and-drag the ipa file into iTunes.
| | 02:47 | So there you'll see the icon
for the game and everything.
| | 02:50 | Then select your connected
device and click the Sync button.
| | 02:53 | What you're looking for after you
click the Sync button is no errors.
| | 02:57 | You should see a message that iTunes is
installing Sk8bit on your device and you
| | 03:01 | shouldn't get an error.
| | 03:02 | From there you can check to confirm that
the application is indeed on your device.
| | 03:09 | And that's it.
| | 03:11 | So remember before publishing your app,
you need to have the proper certificates
| | 03:15 | and provisioning profile.
| | 03:17 | For testing on your own device you can
use a development certificate and profile.
| | 03:21 | For publishing the app to the App
Store you need to have a special App Store
| | 03:26 | publishing certificate and profile.
| | 03:30 | When you want to test your app on
your device, you can drag the ipa and the
| | 03:34 | provisioning profile into iTunes
and simply sync your device.
| | 03:38 | If you have any errors doing this
process, go through all these steps and make
| | 03:42 | sure you followed them exactly and
that you have the proper certificate and
| | 03:46 | provisioning profiles.
| | 03:47 | that you're dragging the right files
to the right place at the right time and
| | 03:52 | everything should work.
| | Collapse this transcript |
| Testing on your iOS device | 00:00 | Let's see what the game
looks like on an actual device.
| | 00:04 | I'll find the icon for Sk8bit.
| | 00:07 | Notice it's the same icon
that we set in our FLA file.
| | 00:11 | So I'll tap the icon to launch the application.
| | 00:14 | Notice the loading screen while the
application loads and then you'll see the
| | 00:18 | intro screen and hear the background music.
| | 00:21 | You can tap the icon in the lower right
corner to see the controls animation for the game.
| | 00:27 | So that's a movie clip
that's playing on an iOS device.
| | 00:31 | Click the Start button to play the game.
| | 00:34 | Note you can tilt back and forth to have the
skateboarder move and you can swipe up and jump.
| | 00:41 | Notice the sound that happens
when you jump over an obstacle.
| | 00:45 | You'll also see that you can have a
high score for the game and it's all
| | 00:49 | saved on your device.
| | 00:51 | Notice that the score
updates as you jump over trashcans.
| | 00:56 | Notice that when you hit an obstacle,
the animation plays, the sound fires off,
| | 01:01 | and the game is over.
| | 01:03 | So there is our game fully
functioning on an iOS device.
| | Collapse this transcript |
| Submitting the app to Apple for release in the App Store| 00:00 | The final step in creating an iOS game in
Flash is submitting the game to the App Store.
| | 00:06 | It may seem simple, but this step can
be tricky if you don't follow it exactly.
| | 00:11 | If you do anything wrong, then
Apple will likely not accept your app.
| | 00:15 | Before you start you're
going to need two things.
| | 00:18 | First you'll need an ipa file
that's published from Flash using your
| | 00:22 | distribution certificate
and distribution profile.
| | 00:25 | I am not going to include Sk8bit.ipa
with the exercise files for this course,
| | 00:30 | because I do not want you
to submit this game to Apple.
| | 00:34 | So you need to make your own game
that's not Sk8bit and publish the game using
| | 00:40 | your distribution credentials.
| | 00:41 | So you should have an ipa file.
| | 00:43 | The second thing that you need is
an app called Application Loader.
| | 00:48 | This is a Mac only application.
| | 00:50 | So for this step you can't use a PC.
| | 00:53 | You'll need to find a Mac to
use to submit your game to Apple.
| | 00:57 | You can download Application
Loader through iTunes Connect.
| | 01:01 | Of course, you need to make sure
that Apple knows that your game is ready
| | 01:05 | to submit the binary.
| | 01:07 | So it needs to be in a state in iTunes
Connect that says waiting for upload.
| | 01:11 | Once you have all of those things
prepared, select your ipa file and rename it
| | 01:17 | so that the extension is .zip.
| | 01:21 | Your computer will ask you if you're
sure you want to rename the extension and
| | 01:24 | I am going to choose Yes.
| | 01:26 | Make sure it's a .zip file.
| | 01:28 | Then I am going to unzip the file.
| | 01:30 | Now this is very important.
| | 01:32 | This will not work with a third-
party un-archiving application.
| | 01:37 | You need to use the OS X un-archiving app.
| | 01:40 | So right-click and choose
Open with Archive Utility.
| | 01:46 | When the app is un-archived
you'll see a folder called Payload.
| | 01:50 | Expand that folder.
| | 01:52 | Inside there you'll see your application.
| | 01:55 | Right-click that and then choose
Compress in the menu that pops up.
| | 02:01 | So the zip file that I've just created
is the file that I need to send to Apple.
| | 02:07 | Now let's open Application Loader.
| | 02:09 | So I'll go to my hard drive,
go to the Developer folder.
| | 02:13 | In there find the Applications folder.
| | 02:16 | In the Applications folder, open up
the Utilities folder and in there
| | 02:21 | launch Application Loader.
| | 02:25 | You maybe asked to login with your iTunes
Connect credentials and I've already done that.
| | 02:29 | So it's just asking me to choose an application.
| | 02:31 | So I am going to choose Sk8bit 2.0,
which is what I set up in iTunes Connect,
| | 02:38 | and I'll click Next.
| | 02:39 | I'll confirm that I've tested this on iOS 4.
| | 02:44 | Then I'll click Choose to
choose the file to upload.
| | 02:48 | In the Payload folder, I'll
select Sk8bit.zip and then click Open.
| | 02:55 | Then I'll click Send to send the file to Apple.
| | 02:57 | So usually if you get to the point
that it says it's Authenticating with the
| | 03:03 | iTunes Store, you're in good
shape and it's going to upload.
| | 03:07 | You may see an error like
unauthorized code sign or something.
| | 03:12 | That means that you didn't use the
correct distribution certificate or profile.
| | 03:17 | So you make sure that you're using a
distribution certificate and profile.
| | 03:22 | If you've done everything correctly you
should see at the end Uploaded package
| | 03:25 | to the iTunes Store.
| | 03:27 | Again, please do not upload Sk8bit.
| | 03:30 | Upload your own game to the iTunes Store.
And you can click Next and then you'll
| | 03:35 | get a notification that you've
successfully sent your application to Apple and
| | 03:40 | then you'll hear back from Apple through
email once the application is approved.
| | 03:44 | So I'll click Done and the game
is now in Apple's hands for review.
| | 03:48 | So again, if your app has the proper
credentials and you follow these steps
| | 03:53 | precisely, you should have no
problem submitting your game to Apple.
| | Collapse this transcript |
|
|
ConclusionGoodbye| 00:00 | Well you've now reached
the end of this course.
| | 00:03 | I hope you had a good time building
that application and that you learned a lot
| | 00:07 | about developing iOS games with Flash CS5.
| | 00:12 | If you have questions about publishing
content to iOS or find that you're having
| | 00:16 | problems publishing your applications,
be sure to check Adobe's FAQ and forums
| | 00:22 | about the Flash Packager for iPhone.
| | 00:24 | If you make a game using what you learn in
this course, I would love to check it out.
| | 00:28 | You can contact me through Twitter at asktodd.
| | 00:31 | I'll see you next time!
| | Collapse this transcript |
|
|
