I’ll outline a quick-and-dirty method below. Look for the next ALPACA release to include a cleaner way to do this.

A little test I put together using Hype, a new app for creating animations entirely in CSS3 and Javascript. It was surprisingly quick and easy. The interface is still a little rough around the edges but there’s great potential here. Expect to see some more of this soon.

We’ve got our character, our environment, and our primary goal. Now we just need to add a simple puzzle and we’ll have a complete (albeit super bare-bones) game. The player needs to get a keycard in order to use the teleporter. We could just make a keycard and put it on the floor; this would be the same process as making the teleporter, except we’d have to give the keycard a “_G” tag in order to add it to the inventory (in other words, its instance name would be keycard_O_G, making it an obstacle and a Gettable object). But let’s make the first room a little more interactive instead. This will also give us an opportunity to create a Usable object.

Open up the room1 clip and [...]]]> Click here for part 1 of the Create your First ALPACA Tutorial

We’ve got our character, our environment, and our primary goal. Now we just need to add a simple puzzle and we’ll have a complete (albeit super bare-bones) game. The player needs to get a keycard in order to use the teleporter. We could just make a keycard and put it on the floor; this would be the same process as making the teleporter, except we’d have to give the keycard a “_G” tag in order to add it to the inventory (in other words, its instance name would be keycard_O_G, making it an obstacle and a Gettable object). But let’s make the first room a little more interactive instead. This will also give us an opportunity to create a Usable object.

Open up the room1 clip and add a new symbol to it. Design a keyframe dispenser within the symbol and give it the instance name dispenser_U within room1.

Up in the timeline, add two frames with the labels “closed” and “open.” Make sure to put the stop(); action on each frame as well. This will allow us to change the movie clip slightly once the player has used the dispenser. In my case I lit up on of the display lights on the dispenser to show that it had dispensed a keycard.

Add a usePoint at floor level in front of the dispenser. This is all you need to add, since the dispenser is not an obstacle.

Open up speechlines.js and add some lines about the dispenser so the player can interact with it.

Test your movie. Notice that, when you choose to use the dispenser, JaNET automatically moves to it and uses her grab animation. But nothing actually happens beyond this – and her “use’ line from the speechlines file doesn’t play. That’s because we need to add this special functionality within the Puzzle class. This will the be first real coding we have to do in our ALPACA project.

In your com/laserdragonuniversity/alpaca folder, open up Puzzle.as. Scroll down to the bottom of the main Puzzle function and add these two lines after allPuzzles = new Object;

allPuzzles.room1 = new Object;
allPuzzles.room1.usedDispenser = false;


This will give us a property we can use to tell ALPACA whether or not the player has used the dispenser. You’ll see how this plays out in a moment. Next, scroll down to the usedItem function. This will be called whenever the player uses any item with the _U tag in its instance name. In the switch statement, above the line that reads default:, add the following code:

case "DISPENSER":
var dispenser;
for (var i in Engine.usableItems){
if (Engine.usableItems[i].displayName == "DISPENSER")
dispenser = Engine.usableItems[i];
}
dispenser.gotoAndStop("open");
speech = new Speech(stageRef, dispenser, "use");
allPuzzles.room1.usedDispenser = true;
break;


What we’re doing here is locating the dispenser movie clip in order to control it (I was never able to find a more elegant way to do so than by scanning all the usable items for it, which is clunky, but it works). Then we’re switching it over to the “open” frame that we created earlier. After that, we set JaNET to speak the appropriate line, and we change the puzzle property we created earlier to reflect that the player has used the dispenser.

Test your movie. Now the dispenser changes when the player uses it, and we get the appropriate line.

EDIT: I totally forgot one thing – the keycard dispenser needs to become unusable once we get the keycard (since multiple keycards are of no use in this example). So add a couple lines of code to the block we’ve just edited, right before the break:

dispenser.usable = false;
dispenser.lookTag = "2";

The “lookTag” means that when we try to use the dispenser again, the engine will use the line “use2″ instead of “use” within speechlines.js. So add a line in the speechlines file under the “DISPENSER” block:

"use2":"I already got the keycard."

OK, there’s just one thing we’re missing – the keycard itself. First we have to make one.

Draw a keycard in a new symbol. Name it keycardProper and make sure to export it for Actionscript. Next, create a new blank symbol, call it keycardInv, and place keycardProper in it. This second symbol is the one that will appear in the player’s inventory – it’s a separate symbol in case you want to change the appearance of something after the player picks it up.

Now go back to Puzzle.as and add these lines to the switch statement we just edited, between the lines allPuzzles.room1.usedDispenser = true; and break;

var keycard = new keycardInv;
keycard.displayName = "KEYCARD";
inv.addInvItem(keycard.displayName);

This will create a new instance of the keycard and place it in the inventory when the player uses the dispenser. Test your movie. Now it works!

You’ll get errors if you try to use or look at the keycard in your inventory, because we haven’t set up any speechlines for it. Open up speechlines.js and add some.

Note the lines “useDISPENSER” and “useWINDOW” – those will tell ALPACA what to have JaNET say when we try to use the keycard with the dispenser and window, respectively. Right now you can’t use inventory items with each other, but it wouldn’t be too hard to add that functionality.

You’ll also note that if you leave the room and come back, the keycard dispenser goes back to its default (“closed”) state. We can fix this by adding the following code within Puzzle.as, in the newBackground function:

switch (thisBack){

case "room1":
if(allPuzzles.room1.usedDispenser){
var dispenser;
for (var i in Engine.usableItems){
if (Engine.usableItems[i].displayName == "DISPENSER")
dispenser = Engine.usableItems[i];
}
dispenser.gotoAndStop("open");
dispenser.usable = false;
dispenser.lookTag = "2";

}
break;


This method gets called whenever the player enters a new room. We’re making use of the usedDispenser property to maintain the change to the dispenser. You’ll want to do this for anything you change in a background as a result of player actions.

OK, now for the final step: creating a custom movie clip for when JaNET uses the keycard on the teleporter. Right now, nothing will happen if you try this. When you try to use an item on another item, ALPACA will check to see if there is a movie clip in the library pertaining to that action. Once we create it and name it properly, it will show up automatically when we play the game.

Create a new movie clip and name it action_KEYCARD_TELEPORTER (export for Actionscript, you know the drill).

Drag teleporterProper from the library into the clip. Now here’s the important thing: ALPACA will remove the player and the teleporter from the stage when this clip is activated, and replace it with the movie clip for the clip’s duration. That means that you need to make sure that the items in the movie clip are properly lined up, so the user doesn’t see a sudden jump when the movie clip starts.  To do this, open up teleporter (the version with the obstacle nodes in room2) and check the properties of theproper movie clip. Note its x and y value. Open up action_KEYCARD_TELEPORTER, select the teleporterProper instance, and set its x and y to those same values. This will keep it properly lined up with the teleporter in room2.

Test your movie. Now you can use the keycard, but JaNET just disappears and nothing happens.

That’s because ALPACA is replacing JaNET and the obstacle with our new movie clip, which only contains the teleporter. ALPACA is waiting for the movie clip to report back that the clip is finished with the ”clipFinished” event, and since the movie clip never sends that message, it will stay on the stage indefinitely. Let’s fix that.

First, let’s put JaNET in the clip. In teleporter, make note of the x and y values of the usePoint. Drag Player from the library into our new clip and set it to those x and y values. You’ll also need to apply a flip horizontal transform so she faces the right way. Put JaNET on a separate layer within the movie clip and use Modify->Break Apart to turn it from a symbol into a graphic (this is important – otherwise there will be more than one Player object in the scene and that will create a conflict). JaNET’s shadow will still be a movie clip, which is fine – place that on another layer behind her.

Break Apart the teleporter as well. Add a keyframe at frame 30 (two seconds, since the project is set to 15fps by default). Change the gradient in the middle to something brighter and glowy. Select the space on the layer between the keyframes and add a Shape Tween, so we get a nice fade from gray to glow.

On a new layer, add a glowy rectangle. Use shape tweens to make it expand outward and upward over the course of a few seconds.

Create a keyframe for JaNET in which she has floated up and rotated a bit into the glowy portal, then apply a Classic Tween in between the keyframes.

On the frame where she reaches the portal, make a big flash. Use shape tweens to make it start small and expand quickly, like an explosion. Play round with this animation (press Enter to preview it) until it looks like JaNET being drawn into the portal to your standards.

Now we need to add an actionPlayerspot instance from the library. Name the instance playerspot. This indicates where the player will be placed after the movie clip has ended. Since we’re ending the game after this clip, it doesn’t matter where we put it, but you should get in the habit of using it.

Our final step is to create an action layer, add a keyframe on the final frame, and then add the following lines of code on that keyframe:

stop();
dispatchEvent(new Event("clipFinished"));


Test your movie. It works, but JaNET just reappears at the position of our playerspot. We still need to add the code that ends the game here; back to Puzzle.as! In the performedAction functon, add the following within the switch statement:

case "[object action_KEYCARD_TELEPORTER]":
stageRef.dispatchEvent(new Event("endGame"));
break;

Once again, test your movie and solve the puzzle. Now we get a generic ending! Woohoo!

All you have to do now is spice up your opening and closing titles and you know have a (barely) functional game!

Play our sample game here. (The whole thing breaks mysteriously when I try to embed it here in WordPress. Something to look into, no doubt).

Download the full project files here.

All right, this concludes the basic ALPACA tutorial. At some point soon I’ll post some supplementary tutorials dealing with the other aspects of the engine, like the conversation system, and using audio for the speech lines.

Now that we’ve created our first room, let’s add a second one. Really, this will be the other side of the same room, but since ALPACA doesn’t allow for scrolling backgrounds yet, this is our best way to make the environment feel a bit more expansive.

Since this is an extension of the first room and will share a lot of the same details, like the floor, we’ll just duplicate the room1 symbol to save time. Select it in the library, Duplicate it, and name the new version room2. Remember to export it for Actionscript.

Now play around a bit with the details – we can remove the left wall and the window, extend the detail on the walls, and add a new curved wall [...]]]> Click here for part 1 of the Create your First ALPACA Tutorial

Now that we’ve created our first room, let’s add a second one. Really, this will be the other side of the same room, but since ALPACA doesn’t allow for scrolling backgrounds yet, this is our best way to make the environment feel a bit more expansive.

Since this is an extension of the first room and will share a lot of the same details, like the floor, we’ll just duplicate the room1 symbol to save time. Select it in the library, Duplicate it, and name the new version room2. Remember to export it for Actionscript.

Now play around a bit with the details – we can remove the left wall and the window, extend the detail on the walls, and add a new curved wall on the far side (don’t forget to make that wall a symbol so the player can’t walk past it).

Move the startPoint over to the left, where the player will be entering the room, and change its instance name to startPoint_room1. Now ALPACA will know to place the player here when they’ve entered from room1.

In the userInterface folder in the library you’ll find a symbol called exitArrow. Drag that onto the stage, rotate it so it points left and scale it up a bit. Give it an instance name of EXIT_room1 and place it over startPoint_room1.

We’ve almost connected our two rooms now; we just need to add the connection points to our original room. Open up room1 again and place another startPoint and an exitArrow on the right side. Name these startPoint_room2 and EXIT_room2, respectively.

Go ahead and test the project, and you should be able to move from room to room. That’s all there is to it! You can add as many rooms as you like in this fashion, as long as you have exits and startpoints on either side.

We still don’t have much of anything in either room, of course. Let’s add our “door,” the one the player will need to find a “key” for. Since we have a sci-fi theme going, we’ll make it a teleporter instead of a standard door. Open up room2 again and create a new layer. On this layer, draw a circle with a metallic radial gradient. Make it large enough to fit JaNET on top, but not so big that she can’t maneuver around it.

Convert this drawing to a movieclip and name it teleporter. Go ahead and add some details to it to spice it up, and let’s add a button next to it for good measure. Once you’re done drawing, select everything and convert it to a movieclip within this movieclip. Name it teleporterProper in the library, and give it an instance name of proper. This will distinguish the actual visible part of the teleporter from all the other stuff we’re about to add to it.

If you run the project now, JaNET will be able to roll directly over the teleporter, since we haven’t set it up as an obstacle yet. To tell ALPACA this is an obstacle, simply open up the room2 movieclip, select the teleporter and change its instance name to teleporter_O. Go ahead and test the movie…

Oops, the game breaks. This is because we haven’t laid down the symbols we need in order for ALPACA to define the boundaries of the obstacle. We’re going to need to add four corner nodes, a depthSplit line, and a usePoint. If you get this error message in the future, it might be because you forgot to add one or more of these things to your obstacles.

Let’s open up teleporter again (not teleporterProper, mind you). Drag the depthSplit from the library and place it about halfway up the height of the drawing. Give it the instance name of “depthSplit.” This line is used to determine when the player should appear in front of the obstacle and when they should appear behind it. You might need to tweak its location if it doesn’t look right during gameplay.

Next, drag one of the black nodes from the library and duplicate it until you have four. Arrange them into a rough box shape around the teleporter. Try to take perspective into account here, but don’t worry about being too exact. Name their instances, clockwise from the upper left, nodeUL, nodeUR, nodeLR, and nodeLL (you probably noticed that’s Upper Left, Upper Right, Lower Right, and Lower Left).

Finally, drag the red usePoint out of the library and place it in front of the button. Give a little space, because JaNET is going to center her shadow over this, so it shouldn’t be too close to the obstacle itself.

Test your movie again. Not only should you no longer get an error message, but JaNET will maneuver around the obstacle on her way across the room and back. If the movement looks weird, try changing the location of the nodes or the depthSplit until it suits you.

So we’ve created an obstacle, but we can’t do anything with it yet. Change its instance name to teleporter_O_L. Just like with the window, adding the _L to the name will make it interactive. Before you test this, open up speechlines.js and add some lines about the teleporter.

Go ahead and run your game again, and you should be able to look at the teleporter and attempt to use it. Of course, you can’t use the door until you have the key, so in the next part of this tutorial I’ll cover how to add an inventory item and make a very basic puzzle.

OK, we’ve created a new player character, so a big chunk of our work is already done. Now we need an appropriate environment for the game, something a little nicer than the default orange plain of nothingness. How about a futuristic-looking space station? We’ll go with the clean white THX-1138 look, because it’s cool, and more importantly, it’s easy to draw.

First, go to Insert->New Symbol (or hit Cmd/Ctrl+F8) and create a new movieclip called “room1.” Make sure to expand the advanced settings and check “export for Actionscript.” This will allow ALPACA to find this background in the library. You may get a warning message saying that Flash will automatically create a class definition upon export, but you can ignore this.

Now we have a [...]]]> Click here for part 1 of the Create your First ALPACA Tutorial

OK, we’ve created a new player character, so a big chunk of our work is already done. Now we need an appropriate environment for the game, something a little nicer than the default orange plain of nothingness. How about a futuristic-looking space station? We’ll go with the clean white THX-1138 look, because it’s cool, and more importantly, it’s easy to draw.

First, go to Insert->New Symbol (or hit Cmd/Ctrl+F8) and create a new movieclip called “room1.” Make sure to expand the advanced settings and check “export for Actionscript.” This will allow ALPACA to find this background in the library. You may get a warning message saying that Flash will automatically create a class definition upon export, but you can ignore this.

Now we have a movieclip that will contain our new background, the first room of a two-room space station. Let’s start by bringing in some outside graphics to use for our space view background. You can actually do all of your graphics this way, and avoid doing any drawing in Flash at all, if you prefer. It’ll generally make your game file larger (depending on your image compression settings), but it gives you more freedom in terms of your look. It also lets you save time by grabbing public domain images off the web, which is where I got this space scene. Download that image and grab it with File->Import->Import to Stage. This should place the image with the top left corner at 0,0 (right where the little crosshair is). If not, set its X and Y values to 0 in the properties window so it will line up properly with the screen. This image is 700×450 pixels, which is the same as the screen size of our project, so while you can place things outside the image area if you want, they won’t show up when you run the game.

Let’s create the walls and floor next. Draw a big rectangle over the top of the image like so, and give it a very light gray-white gradient and a dark gray stroke. You might want to put this on a new layer; splitting your composition across multiple layers makes it a lot easier to edit later.

Next, set the rectangle tool’s color to black and give it some rounded edges. Draw a black rounded rectangle over the wall (make sure this is on the same layer as the wall rectangle).

Select the rectangle and delete it, and now we have a window! Let’s make it look a little nicer by selecting the stroke around it and setting it to something around 4 pixels. Then make a new layer behind the wall layer and draw some dark gray rectangles to make a frame – this will give the window some appearance of depth.

Our last step on the window will be to give it some shine so it doesn’t just look like a hole in the wall. Put another rounded rectangle over most of the window’s surface.

Now set it to a gradient from white, alpha 100%, to white, alpha 0%. There – a nice glassy shine.

Go ahead and add some more graphical details to the wall as you see fit. Creating a wall on the left is a good idea, too, since it will make it clear that there’s nothing to explore in that direction.

Next comes the important part: the floor, which the user will actually interact with. Make a new layer just above the space image and draw a simple rectangle across it. Then select it and convert it to a movieclip called room1Ground. You don’t need to export this for Actionscript…

…but you do need to select it and make sure its instance name is “ground.” That’s how ALPACA knows that the user can move across it.

We just have a couple more steps before we’re ready to test out our new background. Create a new layer called “startPoint.” Then go to the Library, expand the userInterface folder, and drag the blue startPoint symbol to the stage. Put it somewhere in the middle of the room. Then set its instance name to “startPoint.”

Now we’ll need to duck out of Flash for a second to change the starting location to our new room. Open up the data folder within the blank_project folder and open up config.js. Locate the line that reads:

"firstLocation":"default",

and replace it with:

"firstLocation":"room1",

Now return to Flash, Test your Movie, and voila! JaNET is now freely wandering our new room!

While our game is now technically functional, we’ve got a couple of problems to deal with. The first one you may have noticed was this error message in your Output window:

What’s that mean? Well, ALPACA is looking for something that’s not there; in this case, it’s the UseBox, that little two-option window that appears when you click on an interactive item. The UseBox isn’t there because we don’t have any interactive items. So let’s remedy that by making the window a Look-at-able item.

Select the shiny effect we put over the window and convert it to a movieclip called room1Window. Now comes the critical ALPACAfied part: give it the instance name of “window_L.” That underscore-L means that this is a Look-at-able item, and the “window” part will be its name onscreen.

Since it’s Look-at-able, ALPACA expects there to be a line for when the player looks at the window, and all those lines are stored in the speechlines.js file in our data folder. Open that up and place the following right after the line "observations":{


"WINDOW":{
"look": "Space, the glowy frontier!"
},

Now test the movie again, and not only should you be error-free, you can look at the window.

If you try to use the window, you’ll get the default “I can’t use that” line:

In order to get around this, you’ll need to put another line in the speechlines file:


"WINDOW":{
"look":"Space, the glowy frontier!",
"use":"I don't think opening the window is a good idea."
},

Awesome, our room is part of the game! Go ahead and add other things to the background if you want the player to interact with them. Just make sure they’re movie clips with the proper ALAPCA-style instance names, and make sure you create dialog lines in the speechlines file to go along with them. Now we just have one more problem to deal with:

If you click too far to the left, JaNET can wheel right past the edge of the wall. This is a quick fix – we just need to make the back wall into a movie clip, so we can’t click on the floor through it. This won’t be perfect – JaNET can still wheel a little too far toward it and overlap the wall – but it’s better than it was before.

And just like that, we have our first room and our first bit of interactivity. You can go ahead and delete the default room now if you want to keep your library clean*.

Next, in Part 3, we’ll build a second room and link them together, and lay the groundwork for our first puzzle. Stay tuned!

*If you saved your game while running the original blank project, and then deleted the default background, you may get an error called “ReferenceError: Error #1065″, and your save/restore menu will not appear when you click on the icon. This is because ALPACA is trying to create a fake screenshot from a movieclip that no longer exists. In order to get around this problem, open SaveRestore.as in your com/laserdragonuniversity/alpaca folder. Scroll down to line 46 and uncomment the code that clears the save data:

// Un-comment this if you want save data to be cleared each time the SWF is opened
// Probably only necessary for testing purposes
shared = SharedObject.getLocal("alpaca");
shared.clear();

Test your movie once, and you should no longer get the error message. Then comment these lines out again. Any time you need to clear your local memory, this will do the trick.

We’ll base this game around that adventure game puzzle you may remember as “basically every adventure game puzzle ever” – finding a key and using it to open a door.

To follow this tutorial you’ll need the latest (2.0) version of ALPACA, available here. Download and extract the ZIP file, then navigate to source->blank_project and open up alpaca_blank_2-0.fla.

This is a barebones project that contains just enough code and graphic elements to make an ALPACA game that actually loads. Go ahead and hit [...]]]> Since my wall-o’-text documentation for ALPACA is probably not the friendliest introduction to the engine, I figured I would do a quick tutorial series showing how you can make a simple one-puzzle game using the engine. I’ll try to incorporate as many of ALPACA’s features as I can while still keeping things easy and accessible.

We’ll base this game around that adventure game puzzle you may remember as “basically every adventure game puzzle ever” – finding a key and using it to open a door.

To follow this tutorial you’ll need the latest (2.0) version of ALPACA, available here. Download and extract the ZIP file, then navigate to source->blank_project and open up alpaca_blank_2-0.fla.

This is a barebones project that contains just enough code and graphic elements to make an ALPACA game that actually loads. Go ahead and hit Cmd/Ctrl + Enter to Test Movie. You’ll find a not-very-exciting game with a bouncing ball for a main character and a single obstacle that you can pick up. But it works!

So let’s take this project and make it our own. First, go ahead and save it as an alternate filename, my_first_alpaca.fla or whatever you like.

Let’s start by creating a new, more interesting player character. Since animating a walk cycle is a lot of work, we’ll make our character a robot with wheels instead of legs. And since the Internet never gets tired of Portal references, let’s call her JaNET and base her off those wonderful turret designs from Valve’s magnum opus.

In the library, expand the playerElements folder and open up Player. The four required frames for the Player movieclip, labeled default, walk, talk, and grab, are already here, so we’ll just edit the movie clips contained in each frame. Right now we’re in the default frame, which contains the movie clip called “playerSide.” This is just a non-animated clip of the player character. Right now each frame contains a nested movie clip, which is a good way to embed more complex animations, but since we’re trying to keep things simple we can just build our whole player character right here.

Go ahead and delete the “player” layer and create a new one called “head.” Select the Oval tool from the tools menu and set the fill to white and the stroke to black. Put the stroke width value at about 2.00, and create a simple egg shape.

Click the middle of the egg shape once to select the fill. Then, in the Color window, change the setting from “solid color” to “linear gradient.” We’re going to give it a slightly more three-dimensional look. The default gradient should come up as black to white, so change the black to a slightly off-white gray value. Then use the Gradient Transform Tool to rotate the gradient so we have white at the top and off-white on the bottom, scaled to the size of the egg.

Next, use the line tool to draw a gray line down the length of the egg. Use the Free Transform Tool to drag the line into a curve, like so.

Now create a new layer above “head” and name it “mouth.” This is going to look more like an eye, but since it will glow when the player speaks, it’s a mouth as far as we’re concerned. Make a small circle in the middle of the egg, and set its fill to a dull blue gradient.

If you run Test Movie again, you’ll find that the demo is still functional. Now you play as a weird floating egg thing that doesn’t actually animate, but all the movement still works, and since you retained the “hitspot” shadow underneath the new design, you can still maneuver around the box. The only thing that doesn’t work is picking up the box, because the engine is listening for a sign that the “grab” animation is finished, and we don’t have that animation any more. We’ll add that shortly, but first let’s get the walking and talking animations looking prettier.

Navigate to the talk (third) frame and create a keyframe on the “mouth” layer. Make sure to create a keyframe on the last frame (grab) too, so the mouth change is restricted to this one action. Next, select the mouth’s fill and change the gradient colors to something brighter. You can add some glow around it as well if you’re feeling fancy.

Test your movie again and when you look at the box, JaNET’s eye/mouth will glow as she speaks. It’s not much, but a little visual cue that someone is speaking is always helpful, and this saves us from having to do lip sync.

Let’s add the wheels and their movement. Add a new layer between “mouth” and “labels” and name it “wheels.”

Next, draw an ellipse with a nice radial gradient. Add as many details as you want, but make sure you add something small along the rims that we can move around later to give the illusion of rotation, like these little circles.

You’ll have to cheat a bit to add the second wheel, since given this perspective it should really be behind the head – but that would require doing a second layer, and we’re trying to keep things simple. Just arrange it so that the incorrect stacking isn’t noticeable.

OK, now we need to make the wheels appear to spin. In order to do this we’re going to nest a movie clip within our timeline. Any animation we put within that clip will continue to loop automatically as long as the walk frame is active. Create a keyframe on the “wheels” layer at the walk frame (and don’t forget to put another one right after it on the talk frame). Click on the keyframe to select everything on the layer, then hit F8 and convert the wheels to a movie clip with the name playerWheelsMoving.

Now double-click on the new movie clip and we can start animating. Copy the dots, or whatever details you’re going to be animating, to their own layer on the top (you might need to fill in some gaps in the drawings that they leave behind). Create at least two more keyframes for the dots layer and move the dots in each keyframe as though they’re rotating around the edge of the wheel. Since this is going to be a quick animation loop, you don’t have to be too exact. Watch the animation in action by Testing Movie and moving your new character around the screen. You may have to play with it a bit before it looks right.

Once you’re satisfied with your spinning wheel loop, head back to the Player movie clip and we’ll add our final action, grab. Since JaNET is a robot, we can avoid having to do any complicated arm animations by giving her a robotic alternative; say, a tractor beam. Add a new layer above “wheels” and name it “beam.” Create a keyframe on the final frame.

Let’s give this action a distinct color so it doesn’t look too much like our “talk” non-animation. Change the color of the eye/mouth to a bright orange (there should already be a keyframe on this frame). Then, on the beam layer, make a rectangle with a gradient of roughly the same color, going from 75% to 0% opacity.

Using the Free Transform tool, adjust the vertices of the rectangle and curve the small end so it looks like it’s being projected from the eye.

Now we just need a nice sound effect to really sell this. I’ve created one you can use here, or just find/create your own if you prefer. Since we also need to nest a movie clip here in order to tell ALPACA when the grabbing motion is finished, we can solve both problems at once by selecting this frame of the “beam” layer and converting it to a movie clip called playerGrabBeam.

Open the clip and create a new layer called “audio.” Import the audio clip you’re using to your library, and then with the audio layer selected, drag it onto the stage. You’ll see a small piece of the waveform appear on your first frame. We’ll need to extend the clip in order to accomodate the audio’s length, so if you’re using the sample clip, set a frame on the audio layer and the beam layer at frame 9. Otherwise, play with the length until you find the point where your own audio clip ends.

Now for the important bit: create a new layer called “actions” and place a keyframe on your final frame. With that frame selected, open the Actions panel and place the following line of code:

parent.dispatchEvent(new Event("clipFinished"));

This is how we alert ALPACA that the grab animation is finished. You’ll need to do this in any custom animations you create.

One last thing: in the Properties window, you’ll note a line that says “Profile: Default.” Click on the Edit button next to it, and next to “Audio Event,” click “Set.” Change the compression to “Speech” and hit OK. This is going to make your audio higher quality; at the default quality, my custom sound effect becomes a static mess.

Now go ahead and Test Movie. You should be able to move JaNET around the screen and pick up the obstacle with all our new animations. Success! We’ve created our own player character. You can now delete all the original player elements from the library if you’d like; just make sure not to delete Player and playerHitSpot, which are the only movie clips we’re still using.

So we’ve got our new character, now we need to create an environment worthy of our little robot friend!

Next, in Part 2: creating a new room.

Feel free to leave any questions or issues in the comments.

If the Flintstones designed a boat...

I’ve already built my first underwater reverse-fishbowl, but this is much too small to host an entire tree farm, so it’ll have to be expanded. I’ve learned that there’s no real easy way to do this; you basically have to build your whole structure out of dirt , coat the oustide in glass, and then dig out the dirt piece by piece.

The best [...]]]> As I explained in my last Minecraft diary entry, trying to keep a day-by-day account of my adventures in blockyland didn’t really pan out. Now I’ve spent so much time in my game world that I’ve started thinking of it more as a series of projects than as a simulated day-to-day existence. My latest project is a Rapture-style underwater arboretum that I’ve cleverly named “Atlantis Arboretum.”

If the Flintstones designed a boat...

I’ve already built my first underwater reverse-fishbowl, but this is much too small to host an entire tree farm, so it’ll have to be expanded. I’ve learned that there’s no real easy way to do this; you basically have to build your whole structure out of dirt , coat the oustide in glass, and then dig out the dirt piece by piece.

The best part is using jack-o-lanterns for underwater light sources. Just like in real life!

Minepedia tells me that I need at least 8 empty spaces above a planted sapling to ensure that my trees can grow to full height. Surveying the bay in which I’m building, I decide on a plot of around 20 by 10 blocks. I’ll stack maybe 5 layers of glass at the top and then just dig out the rest to save some time. But that’s still 1000 blocks of dirt I have to place in order to create a base. I try to figure out if there’s some clever way to avoid this, but in Minecraft there’s no way to actually drain water from a structure – water blocks will just stay where they are forever unless you fill the space with something solid, or carry it away in a bucket (and I’m definitely not trying to do that with 1000 blocks). So my only option is to gather up a mighty dirt supply, hold my breath, and get to work.

I start out by building four posts to mark the borders of the structure (now scaled down a bit), and also to give me something to stand on, since you sink unless you hold down on the spacebar constantly. The water here is pretty deep and it doesn’t take long to figure out that diving down, placing a couple of dirt blocks, and then having to swim right back to the surface is not exactly a very efficient method. I don’t know if Notch is planning to add scuba gear to the game (although he’s a PADI certified diver, so I wouldn’t put it past him). So I try to think of an alternate method. Then I remember that sand and gravel don’t have the antigravity properties that effect things like dirt and cobblestone in this world; if you place them without a supporting block below them, they’ll fall until they hit one, right through air, lava or water. Now I have a new plan.

I use the posts I built to create an entire frame around my planned base. Then, I walk along it and place gravel and sand blocks against it, which keep falling until they’ve filled all the space below. It’s a lot quicker and I get to stay in the sweet, sweet air while I do it. But when I experimentally start chipping away at the parts of the frame I’ve already used, I end up punching a hole in the ocean.

That's a sheep swimming in there.

Minecraft’s water physics are mysterious to me, so it takes a lot of placing dirt, removing dirt, placing water in buckets, and praying for rain before I’m able to fix this craziness. In the process I do manage to fill up my entire arboretum frame, but so much of that involves just diving down and placing blocks manually that I’m forced to declare my brilliant gravity-assisted plan a failure.

Finally.

So now I just need about a million blocks of glass to coat this thing with. There’s an island nearby that I don’t care about very much, so I head over and plunder it of its precious sand until all my shovels break. Take that, natural resources!

Placing the glass is slow going. I end up working well into the night. Monsters don’t seem to spawn on the ice, which is helpful, but I need a way to get into my underwater passage without having to swim to shore and risk arrows and creepers on the way to an entrance. So I build this little underwater airlock. Or waterlock. Or something. Whatever it is, it’s cool and useful.

A few in-game days pass as I place glass blocks as fast as my furnaces can produce them from the sand. Eventually I have a nice, solid glass coating and a whole bunch of dirt to dig back out. Plus some water blocks here and there that I somehow missed, which put out all my torches a few times. Fighting a current in pitch blackness really makes you regret a rush job.

Once I’ve dealt with those few surprise floods, though, I’m able to cruise through the digging and I finally have something that looks like a greenhouse!

Woohoo!

I do wish that Minecraft’s engine did a slightly better job with underwater glass. For some reason the water is constantly running down the glass, even if the blocks around it are stationary, so you always have the sound of a flowing stream when you’re down here. Also, it just doesn’t look like you’re underwater; the whole blurry blue look that you get when you swim underwater doesn’t affect a view through glass, and the shoreline appears so clearly that it might as well just be raining outside. Oh well, it looks cool from the surface.

Hovercow!

I finish my digging and start planting. I don’t need wood that desperately, so I don’t plant in a fully efficient pattern. I figure I’ll be using this arboretum as much for the coolness of a stroll through an underwater forest as I will for the actual wood blocks.

And it doesn’t take very long for the trees to start growing. A few of them spring up literally while my back is turned. Just like in real life!

I quickly discover that the trees grow so densely that a stroll isn’t as easy as it sounds. But I’m pleased with my work and I decide it’s time to declare Atlantis Arboretum officially open for business. I celebrate by hacking down all the trees and replanting the saplings they drop. I end up with tons of wood – getting wood blocks, especially if I need them at night, should no longer be a problem.

So where do I go from here? Intoxicated by success, I briefly consider expanding Atlantis into a full underwater city (or a big underwater house, at least), but then I remember how annoying it is to place all those dirt blocks. I decide to approach a more practical issue: Atlantis is located in a bay about halfway between Castle Quinn and my mountaintop villa. It’s connected to the castle through a long series of tunnels, but not the villa. If I want to get here from the villa quickly – and you should always have a plan for emergency midnight arboretum visits – I’ll need to build the route. Next time: I start laying down some rails.