Tutorials > Tutorial 6: Record a List

  

Tutorial 6: Record a List

This tutorial lets users record an audio stream, which then shows up in a playlist. Users can then choose from a playback list which recorded stream they want to play back.

 
Viewing the application

In a Web browser, open an instance of tutorial_list.html. Type a name for your stream, and click Record. The name of your recording shows up in the listbox. Select from the listbox to play back your recording.

 
Re-creating the application

The tutorial_list.fla file provides the ActionScript to create an audio playback list. By expanding upon this application, you can create playback lists of video sessions, text sessions, drawing sessions, presentations, and more.

This tutorial uses shared objects, the SharedObject.onSync event handler, and the List Box component.

Before you start to re-create the application, see "Creating your working environment" in Developing Communication Applications.

 
To create the user interface:

1

In the Macromedia Flash MX authoring environment, select File > New to open a new file.

2

From the toolbox, select the Text tool and draw a text box. In the Property inspector (Window > Properties), select Input Text for the type of text box, give it the instance name ListItem, and select the Show Border Around Text option.

3

To create a place for the playlist to be displayed, open the Component panel (Windows > Components), drag the List Box component onto the Stage, and give it the instance name Play_list.

4

To add the button for recording, drag a push button onto the Stage. In the Property inspector, give it the instance name Record_btn, the label Record, and the click handler doRecord.

5

To add the button for recording, drag a push button onto the Stage. In the Property inspector, give it the instance name Play_btn, the label Play, and the click handler doPlay.

6

From the toolbox, select the Text tool and draw a text box. In the Property inspector (Window > Properties), select Dynamic Text for the text box type, give it the instance name Status_msg, and select the Show Border Around Text option.

7

To add the privacy message, select the Text tool and draw a text box. In the Property inspector, select Static Text for the text box type. Type (or copy and paste) text such as the following text into the text box: Your image will be recorded or broadcasted and could be published at a later date. If you don't approve, please exit this application.

Note: Please note that this text is provided merely as an example, and the precise wording of the text that you use will be dictated by the nature of your application and/or service and any privacy, legal, or other issues raised by your application and/or service.

8

To register your application with the server, create a directory named tutorial_list in your /applications directory.

9

Save the file as tutorial_list.fla in this directory, if you wish.

 
To write the client-side ActionScript:

1

Select the keyframe in the Timeline and open the Actions panel (Window > Actions).

2

In the Actions panel, stop the progress of the movie.

 
stop();

3

Create a new connection to the server, handle the status messages, and connect to the server.

 
// Create a connection
client_nc = new NetConnection();

// Handle status message
client_nc.onStatus = function(info) {
	trace("Level: " + info.level + "   Code: " +  info.code);
}

// Connect to the application
client_nc.connect("rtmp:/tutorial_list/room_01");

4

Create a remote shared object to hold the recordings that the user will make.

 
// Create a remote shared object
rec_so = SharedObject.getRemote("recordings", client_nc.uri, false);

5

As new recordings are added to the shared object, update the play list.

 
// Update the list of recordings as new items are added
rec_so.onSync = function(list) {

	_root.Play_list.removeAll();

	// Fill list box with recordings
	for (var i in _root.rec_so.data) {
		_root.Play_list.addItem(i);
	}
}

6

Remember to connect the shared object to the NetConnection object.

 
// Connect to the shared object
rec_so.connect(client_nc);

7

Create the doRecord method that's called when the user clicks Record. This method publishes the new recordings and updates the shared object.

 
function doRecord() {

	if (ListItem.text == undefined || ListItem.text == "") {
		Status_msg.text="Please enter a title.";
	} else if (Record_btn.getLabel() == "Record") {
		Status_msg.text="Recording...";
		
		// Stop any currently playing stream
		if (Play_btn.getLabel() == "Stop")
		doPlay();
	
		// Don't allow the user to play while recording
		Play_btn.setEnabled(false);

		// Create output stream
		out_ns = new NetStream(client_nc);

		// Start publishing the audio output as a recorded stream
		out_ns.attachAudio(Microphone.get());
	
		// Publish the stream
		out_ns.publish(ListItem.text, "record");

		// This allows the entering of single-word list items
		_root.rec_so.data[ListItem.text] = ListItem.text;
		_root.rec_so.flush();
		
		// Change the button label
		Record_btn.setLabel("Stop");

8

In the same doRecord method, if the button label is Stop, close the output stream and allow the user to play from the list.

 
	} else if (Record_btn.getLabel() == "Stop") {

		// Close output stream
		out_ns.close();

		// Now that you're finished recording, allow the user to play
		Play_btn.setEnabled(true);

		// Change the button label
		Record_btn.setLabel("Record");
		
		// Clear the ListItem.text
		ListItem.text="";
		
		Status_msg.text="...";
	}
} // End doRecord method

9

Create the doPlay method that's called when the user clicks the Play button. This method updates the button label, creates an input stream, and plays the selected recording.

 
// Do Play
function doPlay ()
{
	if (Play_btn.getLabel() == "Play") {
		
		Status_msg.text="Playing...";
		
		Play_btn.setLabel("Stop");

		// Get the selected recording
		var playFileName = Play_list.getSelectedItem().label;

		// Create input stream and play the recording
		in_ns = new NetStream(_root.client_nc);
		in_ns.play(playFileName);
		in_ns.onStatus = function(info)
		{
			// Handle errors and stream stopping
			if (info.level == "error" || info.code == "NetStream.Play.Stop") {
				Status_msg.text="Stopped sending data...";
				Play_btn.setLabel("Play");
			}
		}

10

In the same doPlay method, if the user selects the Play button when the label is set to Stop, close the input stream and update the button label.

 
	} else if (Play_btn.getLabel() == "Stop") {

		Status_msg.text="...";
		//Close the stream
		in_ns.onStatus = null;
		in_ns.close();
		Play_btn.setLabel("Play");
	}

}

 
To test your application:

1

In the Flash MX authoring environment, after you have saved your work, publish it by selecting File > Publish.

2

Open two instances of the SWF file.

3

Add recordings to the playlist and play them back.

Note: In this sample application, recordings whose names contain more than one word are not supported.