PDA

View Full Version : [AS3] move a direction +picture change


whitebabylon
08-21-2008, 05:41 AM
Hi, I'm new here, and to flash/actionscript itself, and I was just wondering, when I use the Key.isdown to move my 'character' on the screen, how can I change pictures so that when I go Right my guys 'Symbol' changes to him facing that direction, so he's not always facing towards me, if I have other bitmaps of him facing other directions.
So far [CS3]:

onClipEvent(enterFrame) {
if (Key.isDown(Key.LEFT)) {
_x--;
}
if (Key.isDown(Key.RIGHT)) {
_x++;
}
if (Key.isDown(Key.UP)) {
_y--;
}
if (Key.isDown(Key.DOWN)) {
_y++;
}
}



And any suggestions on a book that could teach me how to do 'everything' per-se, maybe not the easiest or best solutions, but the basics, you know?

rawmantick
08-21-2008, 06:09 AM
Essential ActionScript 3.0 (http://oreilly.com/catalog/9780596526948/)
Avoid puting code in frames. Use code only in classes. It is a good practise.

Jawnee
08-21-2008, 08:46 AM
I'm still a newbie myself but from my understanding one way to do this is to have your "character" be a movieclip with a series of labeled animation sections. For example in your character movieclip frame one is an image of the character facing left and you label that frame "faceLeft", frame two is an image of him facing right with a frame label of "faceRight", etc etc. You can even have a series of frames that denote certain animations and label the series as well.

Then on your main stage you would do something like this:

onClipEvent(enterFrame) {
if (Key.isDown(Key.LEFT)) {
characterInstance.gotoAndPlay("faceLeft");
_x--;
}
if (Key.isDown(Key.RIGHT)) {
_x++;
characterInstance.gotoAndPlay("faceRight");
}
if (Key.isDown(Key.UP)) {
characterInstance.gotoAndPlay("faceUp");
_y--;
}
if (Key.isDown(Key.DOWN)) {
characterInstance.gotoAndPlay("faceDown");
_y++;
}
}

That's the basic idea and I'm no expert on this yet but I'll try to find an example of this for you to look over if I get some time within the next day or so. Right now I'm buried in my own AS3.0 issues :D

Essential ActionScript 3.0 (http://oreilly.com/catalog/9780596526948/)
Avoid puting code in frames. Use code only in classes. It is a good practise.

You can put code in frames BUT if you do ONLY put code in a single frame of a specific layer named "actionscript, action, or script" This way all of your code in the FLA is easily accessible and you don't have to sift through your entire project to find it. romantique is correct though, try to put as much of your code as you can into logical classes. This also helps organize your code into easily digestible / reusable chunks.

whitebabylon
08-21-2008, 08:28 PM
I'm so confused. I have a layer named 'Guy' and in this layer is a frame of my guy at default position, when I click on the picture of my guy in the box where he is at, I choose action and place the code, is this the wrong spot? Now what happens is he moves when I press arrow keys, but when I add another keyframe, in the layer Guy, of his 2nd picture of animation for when you press down, I click test movie,a nd all it does is play the 2 frammed animation and nothing else happens?
I want to make him stand still when you launch the app, and when you press a key, for him to move and also play the 'takeing a step in that direction animation' and to change position graphics. I fail. Do i put all his positions in one layer? different frames? are they key frames? do I combine objects? are they suppose to all be movie clips or just one? and how should I name them, beucase if I name one frame FrameRight, but I want two frames in his right animation what do I name the 2nd frame? 'cuz when I name them both the same thing I get duplicate entry, should I be combing objects? :[

Jawnee
08-21-2008, 09:06 PM
I'll try to do a better job of explaining what I mean.

EDIT: In rereading your last post whitebabylon I know this solution doesn't get you exactly where you need to be. I know you want to have a "moving left" animation (as well as other animations for the other directions) For now I just wanted to get you to the point where your "guy" at least faces the way he is moving. Then I can help you take the next step.

Ok let's go to frame 1 of your main timeline in the Guy layer:

Ok so your character or "guy" as you call him. Is he a movie clip? If he isn't select him and hit F8 to convert him into one. Call the movieclip guy. Ok so now on the stage on the Guy layer you have an instance of the guy movieclip. Click this movieclip once and go to the properties panel. Set the instance name to myCharacter.

You can now reference this character as a movieclip in actionscript (which we will need to do). He isn't ready yet though! Ok now look in your library, you should see a movieclip called guy which you just created. Double click the icon next to guy to open up the movie clip in the symbol editor. (this looks exactly the same as the editor for the main timeline) The way you'll know that you are editing a symbol can be seen in this screenshot of my current project. See where the cursor is and how it says Scene1 -> ButtonTravelLog. In this screenshot I am editing a movieclip symbol named ButtonTravelLog. Each movieclip you create in your library can have it's own timeline and animations independent of the main timeline... but to avoid confusing you and to keep it simple just know that to edit a movie clip you double click it's icon in the library and to get back to the main stage click Scene 1 (as show in the screenshot)

http://www.ethereal-imagery.com/images/symboleditor.jpg

So in your case when you double click the movieclip named guy in the library your flash screen should say Scene 1 -> guy where the cursor is in my screenshot. Take a look at the screenshot again, see how I have an actions layer and notice how in the timeline there are the tiny words "in" and "out". These are frame labels. They allow you to reference specific animations within your movieclip from actionscript. So what you could do is have two layers. One called actions, one called guyAnimations. See this screenshot:

http://www.ethereal-imagery.com/images/guyanimations.jpg

What you would do is create 4 keyframes for the actions layer and 4 keyframes for the guyAnimations layer. Once you have done that, in the actions layer click each new keyframe you created and then, as shown in the screenshot give each frame a meaningful label in the properties panel. I labeled the first one right, the second left, the third up, and the fourth down. Then in the guyAnimations layer you'll place a copy of the image that represents that direction. (Frame 1 = image of the guy facing right, Frame 2 = image of the guy facing left, etc) Once you've done that, save your project and click Scene 1 to go back to the main stage. Open up your actions panel where you have placed your actionscript code and do the following:

onClipEvent(enterFrame) {
if (Key.isDown(Key.LEFT)) {
_x--;
myCharacter.gotoAndStop("left"); }
if (Key.isDown(Key.RIGHT)) {
_x++;
myCharacter.gotoAndStop("right"); }
if (Key.isDown(Key.UP)) {
_y--;
myCharacter.gotoAndStop("up"); }
if (Key.isDown(Key.DOWN)) {
_y++;
myCharacter.gotoAndStop("down"); }
}

What this says is, when I press the left key, take the instance of my guy class on the stage which is called myCharacter and within that movieclip go to the frame labeled "left" and play JUST that frame. Since the guyAnimations layer within that movieclip AT that location shows the character facing left, that is the image that will be displayed. Does that make more sense?

NOTE: There is no actionscript code inside your guy movieclip just frame labels!
NOTE: In your main timeline for your fla be sure to ONLY put actionscript code in the first frame of a specific layer named actions, scripts, or something of that nature. Otherwise finding your code will be a real pain later!

whitebabylon
08-22-2008, 07:46 AM
first off I'd just like to say, thanks man I really do appreciate you taking the time to help me, I'm about to go buy flash/actionscript for dummies, and see what I can do



basic run down:
in scene 1 I have layers animation, script, and Guy.
Guy contains the movieclip guy which is a picture of my 'guy', turned into a movie clip.
now the instance name is myCharacter in the properties tag. So i go over to movie clip guy, and I open the window you told me, where I placed 2 layers, guyAnimation and actions, inside guyAnimation I placed all images of my guy, and under each 'actions' I labled the instance name in the properties tag 'up down left right'. Then I placed the code
in your post, into the Scene 1, layer script, frame 1, which is the frame where my guy is, just in layer Guy. the animations layer is .. just there, i dont know why I made it yet. And I get the following error msg

1087: Syntax error: extra characters found after end of program.

my guy is shown, and it plays all the left up down right frames, I press to move a direction, it moves it but then resets his position after .5 seconds
But I dont know..
all images are GIFs imputed through the 'Bitmap - import thing.'
any ideas?
maybe I could email you the fla, or if you know what the problem is

Jawnee
08-22-2008, 07:55 AM
Yeah zip up your .fla file and post the zip file as an attachment here in this thread. I'll gladly download it and take a look! :D

whitebabylon
08-22-2008, 08:21 AM
here he is :o

Jawnee
08-22-2008, 11:19 AM
Quick question for clarity, you want to do this in actionscript 3.0 right? I'll have to get the updated code posted tomorrow but I'm working on it ;)

whitebabylon
08-22-2008, 10:18 PM
yes actionscript 3.0 please :)

Jawnee
08-23-2008, 11:58 PM
I got it working. Attached you will find a zip with the updated .fla file inside. I used the following thread as a reference to get this working:

http://www.actionscript.org/forums/showthread.php3?t=178300&highlight=keydown

The code you were using wasn't actionscript 3.0 code as far as I can tell but again take that with a grain of salt cause I'm a newbie as well. Basically I made the following changes.

1) In your guy movieclip, in frame one I added one line of actionscript code in the actions layer that says stop(); This is to keep the guy from sitting there spinning when the swf starts up.

2) I reused a lot of code from the link I pasted above. As I mentioned, I don't think the code you were originally trying to use is as3 code but you were on the right track. What this new code does is essentially the same.

3) You have a listener that fires every time you enter a frame

addEventListener(Event.ENTER_FRAME,EnterFrame);

What this says is, when we enter a frame call the EnterFrame function.

4) You have two other listeners which check for keyboard events

stage.addEventListener(KeyboardEvent.KEY_DOWN, KeyPressed);
stage.addEventListener (KeyboardEvent.KEY_UP, stopMoving);

Each listener calls a specific function when activated. If a KEY_DOWN event is detected the KeyPressed function is called which captures the specific key in a variable and sets the moving variable to true. If a KEY_UP event is detected the stopMoving function is called which sets the moving variable to false. Here are the two functions.

function stopMoving(event:KeyboardEvent):void
{
moving = false;
}

function KeyPressed(event:KeyboardEvent) {
KeyDown = event.keyCode;
moving = true;
}

5) The final element that ties everything together is the EnterFrame function I mentioned in number 3 above. This is fired every time Flash enters a frame and what it essentially does is looks to see if any of the arrow keys have been pressed and if moving is set to true. If moving is true, and one of the arrow keys are pressed move the character accordingly and set the appropriate character image by using the myCharacter.gotoAndStop() function.

function EnterFrame(event:Event) {
if (KeyDown == 38 && moving == true) {
myCharacter.y-=speed;
myCharacter.gotoAndStop("up");
}
if (KeyDown == 40 && moving == true) {
myCharacter.y+=speed;
myCharacter.gotoAndStop("down");
}
if (KeyDown == 39 && moving == true) {
myCharacter.x+=speed;
myCharacter.gotoAndStop("right");
}
if (KeyDown == 37 && moving == true) {
myCharacter.x-=speed;
myCharacter.gotoAndStop("left");
}
}

drumn4life0789
09-01-2008, 07:17 AM
one other thing to add. You should be using else if() on the 2nd 3rd and 4th if statements.

and Ill show you why.

The way you have it is like this

onClipEvent(enterFrame) {
if (Key.isDown(Key.LEFT)) {
_x--;
myCharacter.gotoAndStop("left");
} if (Key.isDown(Key.RIGHT)) {
_x++;
myCharacter.gotoAndStop("right");
} if (Key.isDown(Key.UP)) {
_y--;
myCharacter.gotoAndStop("up");
} if (Key.isDown(Key.DOWN)) {
_y++;
myCharacter.gotoAndStop("down"); } }


like this the user is able to push left and down at the same time. This will allow them to move in a 45 degree angle to the bottom left of the screen. While the character is facing down or left depending on the button that was pressed last.


onClipEvent(enterFrame) {
if (Key.isDown(Key.LEFT)) {
_x--;
myCharacter.gotoAndStop("left");
} else if (Key.isDown(Key.RIGHT)) {
_x++;
myCharacter.gotoAndStop("right");
} else if (Key.isDown(Key.UP)) {
_y--;
myCharacter.gotoAndStop("up");
} else if (Key.isDown(Key.DOWN)) {
_y++;
myCharacter.gotoAndStop("down"); } }


Now with it set up this way you are allowing the user to only push one button at a time. allowing them to only go in 90 degree angles.

Jawnee
09-01-2008, 12:31 PM
Good addition drumn4life, thanks for catching that.

drumn4life0789
09-01-2008, 09:01 PM
also when using different frames it can cause problems. you could also just do _rotation = whatever

simPlot
09-03-2008, 08:43 AM
A simple way to change the direction of your character is to use the scaleX property. Simply setting the scaleX of your movie clip to -1 will rotate it so that it's facing left, setting it to 1 will scale it so that it's facing right.

Jawnee
09-03-2008, 09:46 AM
A simple way to change the direction of your character is to use the scaleX property. Simply setting the scaleX of your movie clip to -1 will rotate it so that it's facing left, setting it to 1 will scale it so that it's facing right.

True... but I assume this wouldn't work when the sprite to display for facing left is actually different than the one used for facing down. In this particular example the facing left sprite shows a side view of the character, the facing up sprite shows a back view of the character, and the facing down shows the front view. If I'm understanding your suggestion a simple rotation would always show the front view, even when you were moving the character up... which I'm not sure is what the original poster intended.

drumn4life0789
09-04-2008, 12:19 AM
oh well if your doing it that way with 4 different images front back right and left. You could just have those as different movie clips. Then when you press down

down.onPress = function () [
y--;
removeclip(whatever clip it was);
loadclip down_mc;
]

something like that should work. One problem you will run into is how often the computer checks the keyboard for button presses. as an example hold down any letter key on here. You will notice that the first press brings up the letter then after like 2 seconds it will repeat the letter really quickly.

You would have to put this in an onEnterFrame to make it not have that lil pause in it.

Jawnee
09-04-2008, 12:31 AM
oh well if your doing it that way with 4 different images front back right and left. You could just have those as different movie clips. Then when you press down

down.onPress = function () [
y--;
removeclip(whatever clip it was);
loadclip down_mc;
]

something like that should work. One problem you will run into is how often the computer checks the keyboard for button presses. as an example hold down any letter key on here. You will notice that the first press brings up the letter then after like 2 seconds it will repeat the letter really quickly.

You would have to put this in an onEnterFrame to make it not have that lil pause in it.

Certainly! It's merely a matter of personal preference. For me I like to use the frame labels method with all my various images in a single movie clip just for organizational purposes. Six of one, half-dozen of the other. It's just a matter of what you like.