User:Sigalig/BellTutorial

= Recipe: Ringing Bell (Flex Edition) =

= Prerequisites =
 * 1) Setting up your programming environment

= Topics =
 * 1) embedded media
 * 2) networked events

Notes (might get rid of this or move it to Talk): This document has an mild *nix accent. The commands that you use to navigate to directories and copy files may vary. This recipe is also using SVG for the images and WAV for the sound. Many other image and sound formats can be used without changing much. See [LINK] for details about embedding resources. It is also possible to use an embedded SWF resource built with the Flash Authoring Tool and trigger the animations and sounds from it in response to the events used here. The exact commands for doing so are beyond the scope of this recipe, but details for doing so are [LINK]here/[LINK].

First, set up your development environment as described in Setting up your programming environment.

= Gathering Media =

Find or draw a bell image
If you want a custom bell image, a quick web search and some trimming work will get you one. If you want to get straight to coding, use these images: [BELL] [BASE]

The top is separate from the base so that we can make the bell part shake in the simple, cheesy animation that we'll add later. (Slick, fancy animation is beyond the scope of this recipe. You can trigger fancier animations using the same events used here, though.)

Find or create a ringing sound
Again, a quick web search should turn up plenty of ringing noises or you can record your own. Try searching for 'bell' on The Freesound Project to find some Creative Commons-licensed bell sounds. If you don't want to choose or create your own, you can use [LINK]http://freesound.iua.upf.edu/samplesViewSingle.php?id=24629 this one.

= Creating the Bell Project = Start a new project as described in [LINK]. We'll name it 'Bell'.

Embedding media: For the purposes of this simple project, we'll be keeping all of the source and media files in one directory. Move the media files that you downloaded earlier into the new 'ringingbell' directory.

Embed images and the sound. Open the main class file, RingingBell.as, in your editor of choice (see [LINK]this list[/LINK] for some options).

In the class variable section near the end of the file, add embedded data sections for the bells like so:

This will make the resources available to the program. In the class constructor, create instances of the resources:

We also need to add the classes that we're using to the import section up top. Some of these aren't used by the program yet, but we'll need them soon:

Adjust the stage size so that your bell will fit snugly inside:

Reacting to mouse events:

We want the bell to ring when someone clicks on it, so we add a mouse event listener to the constructor like so:

Sending item events
(A brief description of the nature of distributed instances.) An instance of the bell is running in the browser of each person in the room. When a user clicks on the bell in his browser, only his bell receives that click and only his bell's event listener is fired. We will need to ask Whirled to inform the bells in other users' browsers to that it is time to ring so that everyone in the room can hear it.

To do this, we'll need to uncomment the section that hooks into Whirled and lets us do furniture related things:

Now we can make the bell send a message to the other instances. First, though, we check to see whether the bell is connected at all. If we're running a test outside of Whirled, the bell should just ring since there are no other instances:

The bell also has to be listening for the "RING" message and must know what to do when it is received. This code will register a listener callback that will be called whenever a matching event occurs (MESSAGE_RECEIVED, in this case). The method (messageReceived) will be called with the triggering event as its argument. Register the listener in the contstructor like so:

See [LINK] for details on messages. ***When should messages be used versus events? This may be more of an event.***

Reacting to item messages
Now we need to define the messageReceived function. It checks the message received. If the message indicates thit it's ringing time, toll the bell:

Playing sounds
The statement that starts the sound returns a SoundChannel that can be used for stopping the sound before it finishes. Add a class variable to keep it in even though it won't be used in this example program:

Adding some animation
We'll give the bell a simple wiggle to indicate that it is ringing.

Create a constant with the number of steps that the animation will have:

Set up the timer in the class constructor:

Define what the animation should do each step:

= Complete Code Listing =