How do I change character color?

I was thinking of making multiple colors for my main character, because I love games that have customization, and color change seems easy to do. I thought of two ways to do this, but only know how to program the first way.

One way I could do it is to take the picture and recolor it myself, then make a new movie clip, and then have an if statement that will load up one of the movie clips dipending on which one a person picks. This seems long and repetitive, and I’m sure there is a better way to do it.

The second way I thought of is to have the program change the color by itself, like if someone picks green, it will change the original color to green, or fill it in with green. The only problem here is, I don’t know how to code that.
I know it’s possible, because PR2 does it with like 100 colors for each piece, and I doubt they made a new movie clip like a million times for each combination possible. I’m not doing the whole color spectrum like they did though, just about 10 diffrent colors.

Is there like a code that lets you enter RGB numbers, or maybe HSV numbers?
Is there code that will change a color you pick on a movie clip to a new color?
Is there anyway to do it for a range of colors at once, so it will change all shades of a color to a new color and keep the shade diffrences?
If it doesn’t let you pick a certain color to change, and instead will color the whole movie clip one color, can you choose which part or parts of the movie clip will change, like a highlight feature or something?

I can do it the first way, but it just seems like putting basically the same code a bunch of times is a waste of space, code, and memory, especially if I do decide to add more color choices.

If you’re talking about hand-colored recolors, it’s pretty much impossible unless you make the entire sprite using only the drawing API, and use variable references for the colors used.

Otherwise, if the sprite doesn’t change shape or use frame-by-frame animation or stuff like that, I’d suggest doing hand recolors.

Instead of making separate movieclips, though, you can put the recolors on different frames of a “sprite” movieclip and use gotoAndStop to select the color you want.

So in the Ship movieclip, instead of the sprite, you can place a shipSprite movieclip containing several recolors/minor edits of the original sprite on different keyframes. You can do this for different pieces of an image by putting them in separate movieclips, so if you have separate arm and hand recolors for a human image you can just have 10 hand images and 10 arm images, each in their own movieclips that are arranged to fit in the human movieclip, and have 100 different combinations.

Unless the sprite is huge to the point of Flash slowing down when you try to drag and place it somewhere, having a few extra copies will have next to no impact on the filesize of the .swf

To save up on lines of code, just assign the color choices to numbers and then use those same numbers in the code, like gotoAndStop(color);

Even better, you can just let the player cycle through the choices and cut down on code:

Just have a static number that keeps track of the number of frames in your sprite (the number of recolors) and call it, say, maxColor. Then have a color variable to keep track of the selected color, and be sure to initialize it to 1.

So you can have a left/right button on the menu to cycle through the colors, that merely do

if(root.color == 1)

     _root.color = _root.maxColor;

else

     _root.color—;

_root.ship.shipSprite.gotoAndStop(root.color);

and

if(_root.color == _root.maxColor)
     _root.color = 1;
else
     _root.color++;
_root.ship.shipSprite.gotoAndStop(_root.color);

That’s next to no code, and you won’t need any more, whether you have 2 colors or 20,000. (At 100+ you may want to start thinking about making a pseudo-grid of color choices, also light on code and stuff, but I won’t go into that.)
If you want, say, bullet colors to change according to ship color, just do the same nesting trick with the bullet movie clip, and in the constructor put “gotoAndStop(color);”

Oh, phew! I though I was going to have to do something like if player picks 1 use first color, if player picks 2 use second color, if player picks 3 use third color, etc. If flash has for loops then I could have done if player picks n use nth color, but I don’t know if it does.

And I’m not sure what you meant by frames for movieclips. Are you talking about that timeline at the top? I though that was for the game itself, and the shootorial says that flash games only use the first slide. Does each movie clip you make have it’s own timeline? And in order to change different pieces of the movieclip, I have to actually cut them out of the movieclip and paste them in a new movieclip, exactly where they were cut out so they fill back in?

You should have probably put some notes next to that code, so I know what it means. I’m obviously new to Flash, but I know Java, so some of this is the same. Let me try and interpret it and explain it back to you.

first box of code:
If the color is the first color, set it to the last color. Otherwise set it to the previous color. Then change the color.
The – means minus 1 right? In java we use – -, and I see you used ++, so I’m guessing that’s what it means, or you forgot to put a second -. And what does the _ mean? I see it not being used sometimes, so I’m not sure if it was planned, or you just forgot to put it. It’s missing in two places in the first box: in the if statement on the first line, and in the parenthesies on the last line. I think their typos, since they are both there in the second box.

second box of code:
If the color is the last color, set it to the first color. Otherwise set it to the next color. Then change the color.
What does root mean? I’ll probably find that out in the shootorial, but it’s nice if you told me here. :)

You’re correct about the --, and the missing _s are because of a formatting problem with the forum. _ has no particular meaning but certain default instances and some methods have them prepended, seemingly at random: _root, _x, _y, _scalex, _scaley, etc.

btw as added yippee, you can for example in the hero mc, make a mc for say their shirt, and then use the tint command to change the colors.

Sorry, the code gets butchered by the formatting Kong forums uses. I thought <"pre"> tags were supposed to fix that :<

Yes, each movieclip has its own timeline, which progresses at the same rate as the main timeline for each instance of the movieclip.

Here’s an example .fla that has everything I was talking about, hopefully it’ll answer all your questions.
example.fla

I’m not too fond of stuff like tint because it offers much less flexibility – this model can be used for hats, changes in shape, etc. I’d say tint’s and filters are better suited for AS-based effects, like the hero flashing red after being damaged.

I’m looking at your examle.fla, and I’m confused. I’m trying to select the ShipSprite movie clip, but it won’t let me. I can select the ship movie clip, but I don’t see where the shipSprite movie clip is.

Okay, I couldn’t find it on the stage, but I found it by using edit symbols button. I have some questions about it’s timeline, about the symbols in each box.

1. What do two dots mean?
2. What is the diffrence between a black dot and a white dot?
3. What does it mean when the box is shaded, like all the ones in the bottom layer?
4. What does that little box in the last frame mean?

The shipSprite is inside the Ship movieclip.
Yes, you can have movieclips inside movieclips. Inside movieclips.
Like matrioska dolls, except you can see what’s inside.

It’s referred to as “nesting,” and it’ll come in handy a lot.

So, on to the timeframe. I assume you understand how layers work.

The “boxes” in the timeline are frames. They are the denominations of the progression of your movie.

The frames in Flash function just like the frames in a film strip – Flash plays through them at your game/movie’s FPS.
Except they loop when they reach the end, and you can play and stop them at will.

A keyframe is one you can edit manually, non-key frames are generated automatically based on the last keyframe and any tweens you have before the next keyframe. (There’s no tweens here, so don’t worry about that.)

The lower dot shows that the frame is a keyframe. If there’s no dot, it’s a normal frame.

That alpha symbol (small “a” above the aforementioned dot) in a frame means I put Actionscript in the keyframe.
Actionscript in a keyframe is run each time the movieclip enters that frame.

In this case, I simply put “stop();” in the first frame so that the shipSprite wouldn’t just start playing through each frame, since it’s not an animation that I want here.

The black dot and shaded background on a frame means there’s an object in that layer of the frame, while the white dot/clear background on a frame means there’s no object in that layer of the frame. So if I draw something or nest another movieclip in a keyframe, that keyframe will shade itself so I can see there’s something in the movieclip on that frame.

The little box in the last frame just means that it’s the last “normal” frame after the previous keyframe.

that was an a above the dot?! Hmm, didn’t look like it, just looked like another dot. How do you put AS code in a keyframe?

Hit F9 while highlighting the keyframe to bring up the AS box for it.
I strongly suggest using .as files for all code, though. I honestly can’t name any situation when putting AS in the timeline would be of any advantage, and it’s much easier to find and fix bugs/make changes when your AS isn’t stuck inside a keyframe. Even the above example could be replaced by a class for shipSprite that would simply have “stop();” in its onLoad/constructor.

Like:
class shipSprite extends MovieClip { function onLoad() { stop(); } }

lol if you shouldn’t put code in it then why did you? XD

Okay, here’s the big question that is the most imprtant of all! How can I do this… just using ActionScript? I know how to make movie clips and nest them, but how do you make frames/keyframes for them?

Timeline organization (setting up frames) is done beforehand in Flash.
Highlight the frame(s) in the timeline where you want your new frame to be, and hit F5 for normal frames or F6 for keyframes. If there’s space between your new frames/keyframes and the last frame/keyframe, the previous one will be automatically extended with normal frames to fill in the gap.

Use the right click options to delete frames.

That didn’t help. :( I said just actionscript. I don’t have CS3, btw. I was able to look at example.fla before because my school has it, and I’m not there anymore.

It’s not possible to modify keyframes and such in the code itself.

Well then how am I suppost to put movie clips on frames if I can’t use code?

You can add instances of movieclips that you already set up to the stage or in instances of other movieclips with actionscript, I think the Shootorials cover that. What I wanted to say is that you can’t add/remove frames and the like, or arbitrarily include preset drawings and such. You have to do that in Flash or an alternative program.

You are wrong (wow :O). You can make different frames with code. They are called levels in code. You use loadMovieNum() instead of loadMovie() and you can put a new picture on any level you want. Then to reference to it, you use _levelN, where N is the level number.

You are wrong (wow :O)

Hey, I’m new to this, too. XD

But…

Looking at livedocs, I don’t get how loadMovieNum would function the way you explained.
That, and variables like _currentframe, _framesloaded, _totalframes, and methods like nextFrame() and prevFrame() would make no sense if they called the frames “levels” in any version of Actionscript. From my understanding, levels are like layers.