Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
Join Lee Brimelow in this project-style course that teaches how to build a Flash-based game with Flash Builder 4.6, Flash Player 11, and the Starling framework. Starling, a pure ActionScript 3.0 library for advanced graphics, extends Flash Player 11's support for the modern GPU (graphic processing unit) to enable visual presentations and games in the browser or as a mobile app.
Starting with installation and configuration of Starling and creation of a Flash Builder project, the course shows how to prepare and import graphical assets, create MovieClip classes from sprite sheets, manage various gaming objects, detect collisions, and add both particle and sound effects. The finished game can be deployed to any browser or mobile device that integrates Flash Player 11, which was released in September 2011.
So now that we have our scrolling background in our play state, the next thing we're going to create is our actual hero, and this is the fighter that's actually going to be firing bullets at all of the aliens. So what we're going to do is in our objects package, we're going to create a new ActionScript Class, and we're going to call it Hero, and this for a Superclass is going to be starling.display.Sprite. And what we're going to need to do is when we create this hero, we're going to pass in a reference to our play state here, so that we can actually call back to it.
So I'm going to put in a argument here called play, and this is going to be of type Play, so it's in from our states. And now I'm going to create an instance variable to hold that, so I'm going to say this.play = play; and we'll create that as an instance variable. Okay, so now for the visual representation of our hero, we're going to be using a texture which is actually in our texture atlas.
So I'm going to come down here, I'm going to create a new variable. I'm just going to call it img for image, and it's going to be of type starling.display.image = new Image, and now we're going to grab a texture from our texture atlas, so it's going to be Assets.ta.getTexture, and the texture name is hero. Now we're going to set the pivotX and the pivotY. For all of the objects that are in our game, we're going to set its pivot point directly in the center of the visual representation, and that's going to make it a lot easier for us as we're doing this like collision detection.
So I'm going to say img.pivotX = img.width * 0.5, and now we'll do the same thing for the pivotY = img.height * 0.5. And lastly let's go ahead and add that to the display list here. So now when we're actually moving our hero around, we're going to be doing it with the mouse, based on the mouse position.
Now the Starling framework does not have mouse events built in, it was actually first designed with mobile in mind, so it actually uses touch events. Now that's good if your game or your application is taking advantage of things like multitouch, but if you're not taking advantage of multitouch, it's better to reach out to your main Flash stage and get the mouse position that way. So I prefer to use mouse events, unless I have to use the touch events which are in Starling, because there is more overhead associated with those.
So for updating my hero's position, I'm going to create a public function called update, and you'll notice the theme here that all of the game objects are going to have an update function with which can be called to obviously update its position or any other characteristics of the object. So inside of this update method, what I'm going to do is I'm going to ease the position of my hero to the current mouse position, and I'm going to do it using typical Flash easing code.
So I'm going to increment a certain amount to the X position of my hero, and what I need to do is to first get the mouse position. So here's where I'm going to need to reach out to the native Flash stage, and to do that I'm going to go the Starling method, you'll need to import that, it's in starling.core. Then you want to go to current.nativeStage, and now that gives you a reference to the native Flash stage, so you've now reached out back into the regular Flash display list world, and from there, I can retrieve the mouseX property.
In order to ease to that, I'm going to subtract the current X position from that, and that's going to give me the distance that needs to be traveled towards the target, but I'm going to multiply that by 0.3, so then it's essentially going to ease to that position. Now I'm going to duplicate that line, because this is going to be same thing for the Y position. I'm obviously going to be using the mouseY property, and I want to ease to the Y property there. So this is the update function again, and we're going to be calling that on every frame from the play state.
So let's go back to our play state, and let's create our hero now. So I'm going to come under here under the background, create a new variable called hero, and I'm going to instantiate a new hero object. And remember, we're passing in a reference to this play state, so I'm going to pass in this, create this as an instance variable, and now we want to add that hero to our display list. And now lastly in the update method of our play state, after we call an update on the background, let's call an update on our hero, because again we created that public update method.
Let me save that now and let's go ahead and test it. So we have our main menu state, I'm going to click on the PLAY GAME button. We now have our ship, and it's easing towards the mouse position. So you can see if I move my mouse really quickly it's not just sticking to the mouse cursor, it actually has a nice subtle easing effect, which just makes everything feel a little bit smoother. When we get later on in this course, we're actually going to add a smoke particle effect so it looks like there is exhaust coming out of this plane, but we're going to do that later on.
So that's all it took to create our hero. Again, the main theme is that for any game objects we're going to have a public update function that you're going to be able to call from your state to update its position, to check for collisions, and different types of things that happened in our game.
There are currently no FAQs about Building Flash Games with Starling.
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.