In this tutorial, we'll delve into Flash game character customization. The result can be used to provide players with the ability to create a unique character, beyond the basic dress-up options of most games.
Final result preview
We found this awesome author thanks to FlashGame. We'll learn how to let the user add custom colors to different parts of our character, how to add hand-drawn des to the character's clothing, and how to modify a basic walking animation that uses the player's changes. Fill the areas of the character's clothing with solid colors, add detail with the pencil, then hit "play" and press left and right to see him walk!
Create a new AS3 Flash Document. Go into the properties panel and make sure that all of the settings are the same as the image below:. Next create a new.
This will be our main class. Make sure that your CustomCharacter class is as below. Check out this quick introduction to the document class if you're not sure what we're doing in this step. Now we will begin by drawing our main character. In this tutorial, it is character creation flash games that we make sure we have every body part in a separate MovieClip. By doing this, we can base our walking animation on Tweens which will speed up the animation process.
Our character will be made up of the following objects: a head, hair, a shirt, two legs, and two arms. You can find the main character used in this tutorial in the source FLA download link is at the top of the tutorial. For now, to encourage the player to customize the character, we'll limit the colors of the body parts of the character to grey with black outlines.
Select the entire body, push F8 to turn it into a single MovieClip and call it Player. Make sure that you set the registration point of each body part to the upper left corner. Now click on the new Player movieclip on the stage and set the instance name to player.
To begin, we need to add the ColorPicker component to our library. Find the ColorPicker class and drag it into the library panel.
Character creation · flash · free online games
Next we need to do all of the ActionScript work. Here is what our CustomCharacter class will look like after our new changes. Let's go through this step by step, starting with the constructor function. First, we are creating a new var called myColorPicker. Next we are telling our ColorPicker to be changeable and invisible, so we can make it show up when we click on the player. Then, we add the ColorPicker class to the stage, although it isn't visible. We also add two event listeners.
One for when you click on the player, which toggles the visibility of the ColorPicker and moves it to the mouse location upon click, and the second one to check to see when the user has selected a new color, so that we can make the ColorPicker invisible again! Unfortunately, we can't just use the ColorPicker and make it change an object's color. First, we need for the ColorPicker to distinguish which object you are clicking on, so that it can determine which object to change.
This requires using one of AS3's powerful MouseEvent features. Inside the showPicker function, we can just use e. We can bring the alpha of the clicked object down to confirm which object we are dealing with. Just add the code below to the showPicker function.
We're almost ready to color our objects. Before we start, we need to make sure that we can keep the outlines on our body parts. To do this, we need to identify the area that needs a color change. We are going to have to go inside the MovieClip for every body part, and select the gray fill area inside the outline. Now every body part should have a color MovieClip inside it. We are finally adding coloring to our application. Here is what your project should look like at the end of this step:. Let's go through this step by step. To begin with, we are creating a new MovieClip variable, myChangedObjectto be accessed by our program.
This is so our showPicker function can character creation flash games our colorChanged function which MovieClip was last clicked on. Seeing as that's out of the way, let's look at our showPicker function. As you can see, we added a little checker to see if the clicked on object's name is "color". This is just a check to see whether the user has actually clicked on the player's outline, shoes, or anything else that isn't meant to be changed. Next we are changing our new myChangedObject variable to be equal to the clicked-on object, e. Finally, we are telling our ColorPicker myColorPicker to have the ly selected color preselected.
If there is none, then it will default to black. Lets analyze this little bit of code.
First of all, it is important to know that to have a preselected color, the ColorPicker class has a. In the second part, we are converting the data in the parentheses to a uint to be passed onto the ColorPicker. Here's the key, we are essentially going inside our selected MovieClip myChangedObjectgoing into its transform section where our data is storedgoing into the colorTransform data of the transform data, and pulling out the color variable which holds our RGB code which we then pass as the selected color of the color picker.
Think about it like a directory:.
We have reduced support for legacy browsers.
We're still not done yet! Next let's look at our colorChanged function. Here, we are creating a new instance of the ColorTransform class.
We are then setting the color variable inside the ColorTransform class to the color that the user has selected with the color picker. However, we need to add a "0x" to the ColorPicker's chosen color e. Like before, we are converting all of the added data to a new uint that the ColorTransform can recognize.
Character creation · flash · free online games
Whew, that was confusing but now that that part is over, we can start adding new features to our program. Next, we are going to try to make the program draw directly onto the player's body parts, so that the user can draw some cool des for his character. As you can see above, I've put together a panel with two tools. Firstly, we have a drawing pencil and next we a paint bucket tool. You can dissect the graphics if you want to learn how they were made. Also, this is sort of an extension from this tutorial by Carlos Yanezwhich does a great job of explaining how to create a drawing application.
Just as in that tutorial, I have a interface that consists of two paint bucket and two pencil images.
One is gray and the other is in color. The gray one will make the colorful image visible to show that the tool has been activated. Once one tool is activated, the other will be disabled. In this step, we are only working on switching between the tools. During the following steps, we will cover how to get the pencil tool to work.
Here is what our code should look like:. First, you can see that we have taken out the showPicker and colorChanged event listeners, and they are now only to be added when we choose the paint bucket options.
Character creator flash game
Instead, we have added two event listeners for each button, which link to two functions that activate the tool we have clicked on. The functions add their own event listeners and remove the event listeners from the other tool. They also make the right interface items visible and invisible.