Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
In Flash Professional CS5: Creating a Simple Game for Android Devices, author Paul Trani shows how to translate existing Flash skills from the web to mobile devices while designing a game in Flash and publishing it as an AIR for Android app. The finished application includes collision detection, random enemy creation and movement, shooting capabilities, multiple levels, and even a high score screen. This course also goes beyond game functionality and shows how to use mobile capabilities such as the accelerometer and gestures to control graphics, use the hardware keys to activate menus, and also how to optimize content so it plays well on mobile devices. Also included are instructions for distributing an app through the Android Market. Exercise files are included with the course.
The foundation of pretty much any game is going to be how the player moves, and in this case, what I want to do is I want the player to move from left to right, the X position, based on the mouse position. So again, I'm going to go ahead and move this player spaceship to the left and right based on the mouse position. But the first thing I need to do is I'm going to dynamically add this player to the stage when it's time to play the game, okay, and I'm going to use code snippets to do this.
So with the Code Snippets panel opened, I'm going to go down to Add from Library, because I want to add that player from the library, and I'll just double-click that code snippet and it adds it into my Actions frame1 is where it puts it. And let's go ahead and take a look at this code, because currently it defines a variable, because I need to give this a variable name and make sure Flash knows that it's a MovieClip. Okay, so right up here, I'm just going to call this player.
And where do all my variables go? Well, they go near at the top, so I'm going to cut out that variable, scroll up to the top. It goes to the top of my Actions panel, right here. So this player variable is a MovieClip, so I'm telling Flash that's what it is, and that's how it's going to treat it. Next up, it says in the library set a movieclip linkage property to Player, okay. So I'm just going to go ahead and pin this code--again, make sure that code is pinned so it doesn't move--and I'm going to go over to my Properties panel, and I'm going to select the Library tab, and you can see that the player MovieClip is selected and its linkage property is Player, okay capital P. So that's what I'm referencing is that name right there, okay? So again, back in my code it says, new Player, capital P, those names will match up and create the instance based on that library item.
It's the equivalent of just taking that MovieClip and dragging it onto the stage. So player = new Player(). Well, let's go ahead and move this into place, because when do we want this to happen? Well, we want that to happen when the game first starts. So I'm going to cut this line of code, and I'm going to scroll up, and within initialize game, the initGame, I'm just going to hit Enter, hit Tab, and paste in that right there.
So right here, that's what's happening: 'Pulling in the Player from the library'. So that gets initialized. The player is going to appear on the stage, but right in here, this is what we need to create the various player properties, and various things that the player can do. Okay, so start player. We want to really start its movement. So let's scroll down. That's where I'm going to add these two lines.
I'm going to cut them. I'll just delete those lines as well. But again, those last two lines are going to go right in here. So create the player and the properties is what's going on right in here. I'll paste those lines in, hit Tab, and let's go ahead and review this code. I'll expand it out a little more. Okay, we're creating the player, so the instance name here, well, that's player. Okay, so again, it was created right here, and then I'm setting the player's Y position, so up and down where it is vertically. It's going to make it equal to the stage height, so if I make it equal to the stage height, it's actually going to push it off the stage, so I need to make it equal to the stage's height minus the player's height.
So again, if you take a look at the Library panel, this dot right here, I need to take in account of the height of this graphic. So I need to subtract to that from the player height, and it basically pushes it up into view. So that's perfect. It dynamically gets added, and sure enough, addChild, what do we want to add? The player. So this is technically where the player appears. You can set various properties before you actually see the player, but this is where the player actually appears.
Okay, so the next thing we need to do is we want this player to move, so let's go ahead and add some motion based on the mouse position. So under the Mobile Game folder in my Code Snippets panel, Move using the Mouse. That's exactly what I want to do. I'll double-click on that. It adds this Enter_Frame right here, okay. So I'm just going to go ahead and cut this, and I'm going to move it up to into position, right underneath Start_Player right in here. Okay, so at about line 88, I'm going to paste that in, okay.
But I don't want this to just start firing off immediately, because this player hasn't been added yet using addChild. So I actually want to take this Enter_ Frame EventLlistener and I need to move it up into here, because this is where I define the properties, and this is where it gets added to the stage, and then he's going to start moving using this movePlayer function. So right down here, for this instance name here, again, we're using the player, move its X Position based on the stage's mouseX position, so as I move back and forth, the player is going to drop into place.
Now I am talking about of course a mobile game, and again, if the user touches the screen, that's considered a mouse position. So as you can hear that mouse X, again it'll work on mobile devices. Next up, we set up a couple boundaries, so we need to make sure that it doesn't go off the right or left side, and sure enough, right in here, if the player's X position is less than zero-- and I'll just copy this name-- then make its X position equal to zero. So keep it from going off the left-hand side. Otherwise, if the player's X position is greater than the stageWidth minus the player.width--so again, it's off to the right-hand side--make sure you stop it accordingly as well.
Make this player's X position equal to the stageWidth minus the player.width. So oftentimes these two will be the same. You're doing a check to see if it's going beyond a certain point and then you're making sure you stop it at that point. All right, with that in place, we'll just do one more quick change, and we'll go ahead and see this player move, and that last change is basically going to be commenting out some code. So I'm going to scroll down, this gameState, STATE_END_GAME, well, I don't want to game to end, so I'm just going to comment that out by putting two forward slashes in front of it, okay.
So now we're going to get the opportunity to move around that player, so let's go to Control > Test Movie > Test. There is our animation. We'll click Play, and there is our player. We can see it move with the mouse. As the mouse moves around, we can see that player move. I'm going to try to go off the left-hand side, and you can see it stop. It stops right there. Let's try to go off the right-hand side. You can see it stopped right there as well.
A little bit of overlap, but again, I can just adjust this graphic, and it will be fine. This is how basic game movement can be done. Based on the mouse position, it's really just a matter of defining or getting that Mouse X position in this case, and making sure your player is equal to that Mouse X position.
There are currently no FAQs about Flash Professional CS5: Creating a Simple Game for Android Devices.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.