Networked toy (Flash tutorial)

From Whirled Club Wiki
Jump to: navigation, search
Flash Tutorial
Create an interactive button toy or doorway item.
Difficulty Level
Beginner
Requirements
Icon-Flash.png Adobe Flash CS3, Whirled SDK
Other Information
Example file: Networked Toy zip

Previous tutorials: Create furniture, Create toys

Icon-highlighted-toy.png

Learn how to add code to a furniture item to make an interactive, networked toy. Users may click on the toy to interact with it, and everyone else in the room will see the same thing at the same time. Also learn how to make an interactive, networked doorway item that will react to a player mousing over it before clicking it to walk through.


Before You Begin

Download the Whirled SDK

If you have already downloaded the SDK, check to see if a new version has come out. If you have never downloaded the SDK, do so now.

  1. Download the Whirled SDK. "SDK" stands for Software Development Kit, and it contains handy tools for Whirled creators.
  2. Configure your Flash CS3 to use the Whirled SDK

Create a New Flash File

Set up ActionScript 3.0, classpaths and framerate in Flash CS3.

This is a basic file that will allow you to add code that will work with the Whirled servers.

  1. Create a new ActionScript 3.0 file in Flash CS3.
  2. Press CTRL+F3 (Window → Property → Properties) to open the Properties toolbar if it is not already visible.
  3. Double check to make sure you set your classpath (source path) when you configured Flash to use the Whirled SDK (above).
  4. Set your framerate to 30 frames per second. Whirled furniture and toys cannot run at any other speed.

Plan Your Project

Decide at the beginning how you would like your toy to interact with the mouse. This makes it easier to set things up.

  • This tutorial shows the creation of a fountain that has the following actions (see it in the Whirled Shop):
    • Plays the “Ready?” animation when a user moves their mouse over the fountain.
    • Plays the “Set?” animation when a user presses down on the left mouse button over the fountain.
    • Plays the “Go!” animation when a user lets go of the left mouse button over the fountain.
    • Plays the default animation when a user moves their mouse off of the fountain.

If you’re planning on using your item as game furniture, a doorway or a url link to another web site, it’s important to know that the regular mouse events are used by Whirled and will not work on your furniture. Instead, you can use control events to make your item react to a user’s mouse.

  • The second part of this tutorial shows the creation of a fountain that has the following actions (see it in the Whirled Shop):
    • Plays the “Leaving?” animation when a user moves their mouse over the fountain, even if it is being used as a doorway.
    • Plays the “Bye!” animation when a user moves their mouse off of the fountain, even if it is being used as a doorway.

Create

Draw, paint, layer, animate and design the visible portions of your furniture or toy item.

Add Layers to your Scene

Set up layers and create the outline of a movieClip in Flash CS3.

Layers help you organize your work. Putting movieClips and shapes on their own layers make it easier to use tweens in animation.

  1. Use the “Insert Layer” button below the timeline to add layers to your scene until you have three.
  2. Name your layers as follows:
  • Script(); -- This is where your code will go.
  • HitBox – This is where your hit box will go.
  • Furniture or Toy (you may replace this with the name of your item) – This is for a movieClip with all the visible parts of your item.

Draw Your Basic Graphics

Check the list of useful programs if you need a graphics editor, or draw things in Flash.

  1. Draw an outline of the first frame or the default resting state of your item on the Furniture or Toy layer.
  2. Select the entire layer by clicking on the grey frame next to the layer name in the timeline.
  3. Press F8 (Modify → Convert to symbol) to make it into a movieClip. Name the movieClip (the example clip is named Fountain) and press ok.
  4. Click on your new movieClip on the stage. It should be outlined by a blue rectangle.
  5. In the properties toolbar, replace '<instance name>' with 'fountainClip' (or another name of your choice). Make sure that you are not changing the Frame Label.
  6. Save your file (see below).

Make movieClip Animations

Make animations and label keyframes within a movieClip in Flash CS3.

Make a named movieClip instance with multiple keyframes, one for each desired option. Add a stop command to each keyframe to prevent it from playing automatically.

  1. Double click on the movieClip on the stage to open it for editing. The bar at the top of the stage will tell you that you are editing Scene 1 Fountain. A new timeline with new layers will appear. This is the timeline for the Fountain movieClip.
  2. Add in more layers where the rest of your animations and graphics will go. Put an empty layer on top and name it Actions.
  3. Create a new keyframe on the Action layer at frame 3. In the properties panel, change the <Frame Label> to splash. This is the name of the animation that starts at this keyframe.
  4. Add keyframes at frames 8 and 10. Now name frame 1 default, frame 8 ready and frame 10 spout.
  5. Make your animations at each of these keyframes. Now that they have frame labels, you can slide the keyframes left or right to make your animations longer or shorter. Remember to use layers for each animated item and each tween.
  6. Use Control &rarr Play to look at your animations. Edit and change things until they look the way you like.
  7. Save your file (see below).

Add code to your movieClip

Once you’re satisified with your animations, it’s time to add code that will stop the flash playhead at the end of each of your animations.

  1. On the Actions layer, add a new keyframe before each of your labeled frames, and at the end of your last animation.
  2. Select one of the keyframes you just added and press F9 (Window &rarr; Actions) to bring up the actions for that keyframe.
  3. Type stop(); next to the number 1, and then repeat this for each of the new keyframes.
  4. Doubleclick outside the movieclip area to return to editing the main scene.
  5. Save your file (see below).

Add a HitBox

Make an invisible, named movieClip that will listen for mouse events in Flash CS3.

The HitBox defines the area where players can click to interact with your item. It can be larger than the item to make it easier to click on or it can be smaller than the item if you want players to only be able to click on part of the item.

  1. Lock your Furniture or Toy layer by clicking under the Lock column next to the layer name.
  2. Click the keyframe next to the HitBox layer name to begin editing that layer.
  3. Draw a shape that covers everything you want to be clickable. Eventually, this will be invisible, so use any color you like.
  4. Click on the shape you just made to select it.
  5. Press F8 to make it into a movieClip and name it HitBox.
  6. Click on your new movieClip on the stage. It should be highlighted with a blue box around it.
  7. Change the instance name in the properties box to hitBox.
  8. Change the Color: Alpha property to 0. Your hitBox is now invisible, but can still be clicked on.
  9. Lock the HitBox layer. All of the graphics and movieClips are now in place.
  10. Save your file (see below).

Add Code to Your File

This is the code you will need to make your item listen to mouse clicks and then react by playing one of the animations you made earlier.

  1. Make sure you’re editing the main scene (scene 1) of your file.
  2. Click on the first frame of the Script(); layer and press F9 (Window &rarr; Actions) to open the Actions toolbar.
  3. Paste the following code segments into the open white box next to the number 1, one after another:
  • First are the import lines. These tell the furniture what pieces of the Whirled SDK it needs to use:

<actionscript>import com.whirled.FurniControl; import com.whirled.ControlEvent; </actionscript>

  • Next is the furniture code. This tells Whirled that you’re making a new piece of furniture. It also sets the furniture hotspot:

<actionscript>var _ctrl :FurniControl = new FurniControl(this); _ctrl.setHotSpot(153,477); </actionscript>

  • Now add code to tell the furniture what mouse actions it should listen for. Changing the hitBox buttonMode to true will make the cursor turn into a hand when a player moves their mouse over it. The MOUSE_OVER event happens when a player moves their mouse over the hitBox. MOUSE_DOWN happens when they press the left button down on the hitBox. MOUSE_UP happens when they release the left mouse button. MOUSE_OUT happens when the player moves their mouse off of the hitbox.

<actionscript>hitBox.buttonMode = true; hitBox.addEventListener(MouseEvent.MOUSE_OVER, hitBox_mouseOverHandler); hitBox.addEventListener(MouseEvent.MOUSE_DOWN, hitBox_mouseDownHandler); hitBox.addEventListener(MouseEvent.MOUSE_UP, hitBox_mouseUpHandler); hitBox.addEventListener(MouseEvent.MOUSE_OUT, hitBox_mouseOutHandler); </actionscript>

  • In the above code, the mouse events will execute the function named in parenthesis. The code below defines these functions, so the furniture knows exactly what to do. In this case, the functions tell the control copy of this furniture item to send a message to every copy of this furniture instance so that everyone in the room will see the same thing at the same time. The message listener code names a function that should be called when a copy of this furniture gets the message. Finally, that function is defined. The furniture will play the named frame in the fountainClip movieClip when it gets a message with a certain name. All together, this makes a networked piece of furniture.

<actionscript>function hitBox_mouseOverHandler(event:MouseEvent):void{ _ctrl.sendMessage("OverNetworked"); } function hitBox_mouseDownHandler(event:MouseEvent):void{ _ctrl.sendMessage("DownNetworked"); } function hitBox_mouseUpHandler(event:MouseEvent):void{ _ctrl.sendMessage("UpNetworked"); } function hitBox_mouseOutHandler(event:MouseEvent):void{ _ctrl.sendMessage("OutNetworked"); } _ctrl.addEventListener(ControlEvent.MESSAGE_RECEIVED, messageHandler);

function messageHandler(event:ControlEvent):void{ if(event.name == "OverNetworked"){ fountainClip.gotoAndPlay("splash"); } if(event.name == "DownNetworked"){ fountainClip.gotoAndPlay("ready"); } if(event.name == "UpNetworked"){ fountainClip.gotoAndPlay("spout"); } if(event.name == "OutNetworked"){ fountainClip.gotoAndPlay("default"); } } </actionscript>

  1. Save and Publish your file (see below) . You now have an interactive, networked Toy.

Listening to the Mouse with Doorways and Game Furniture

You’ll notice that if you take an interactive piece of furniture and try to use it as a doorway item or a link, it’s no longer possible to click on it. Whirled is using the mouse event to redirect the player to another room, a link or a game. Instead of mouse events, you can use control events to tell your furniture what to do.

Create

Create all your artwork and animations as described above. In this part of the example, we only have 3 animations, named default, ready and spout. You can also omit the HitBox, but leaving it in will not hurt.

Add Code

Again, the format of the code is very similar to what we worked through above. The difference is that instead of having a hitBox listening for the user to move their mouse, the entire furniture item is listening for the mouse to move over it (HOVER_OVER) or move off of it (HOVER_OUT). If the furniture item changes shape, the shape someone can interact with will change as well.

  1. Make sure you’re editing the main scene (scene 1) of your file.
  2. Click on the first frame of the Script(); layer and press F9 (Window &rarr; Actions) to open the Actions toolbar.
  3. Paste the following code segments into the open white box next to the number 1. For details about what each part does, see above. The key difference is that a control event listener is added to _ctrl, instead of the mouse event listener that was added to the hitBox.

<actionscript>import com.whirled.FurniControl; import com.whirled.ControlEvent;

var _ctrl :FurniControl = new FurniControl(this); _ctrl.setHotSpot(153,477);

_ctrl.addEventListener(ControlEvent.HOVER_OVER, mouseHOverHandler); _ctrl.addEventListener(ControlEvent.HOVER_OUT, mouseHOutHandler);

function mouseHOverHandler(event:ControlEvent):void{ _ctrl.sendMessage("DownNetworked"); } function mouseHOutHandler(event:ControlEvent):void{ _ctrl.sendMessage("UpNetworked"); }

_ctrl.addEventListener(ControlEvent.MESSAGE_RECEIVED, messageHandler);

function messageHandler(event:ControlEvent):void{ if(event.name == "DownNetworked"){ fountainClip.gotoAndPlay("ready"); } if(event.name == "UpNetworked"){ fountainClip.gotoAndPlay("spout"); } } </actionscript>

Save

Save your Flash .fla file on your computer anywhere you like.

Publish and Upload to Whirled

Once you have your Flash file ready, you can publish your Flash file to an .swf and upload it to Whirled. Test it with a friend to make sure it works the way you want, and then list it in the shop.

Publish the Flash File

  • Press Shift and F12 (File &rarr; Publish) to publish your creation as a .swf file. It will appear in the directory where you saved your flash .fla file.

Upload, Test and Sell

  1. Upload your .zip file to Whirled just as you would upload a regular furniture item.
  2. Name your item. You may also add a thumbnail and a description. Affirm that you own the copyrights, and save.
  3. Test your item to see if it is working the way you want it to. For a networked furniture item, you’ll want to get a friend to help you and make sure that they see the same thing as you at the same time.
  4. List your item in the shop.
  5. Profit!

Ready for the next step? Try adding additional actions to your toy or add remixable options to your furniture.

More Information

Retrieved from "https://wiki.whirled.club/index.php?title=Networked_toy_(Flash_tutorial)&oldid=2571"