Sample Application: Survey

Description
This sample demonstrates how you can create a client application for visiting a survey, voting and viewing results.

Key features
Multiple remote SharedObjects.

Instructions
You can vote in a survey and when you have gone through all of the questions (which you must answer to proceed) you can view the results of the survey.
At this point you can change surveys to go vote on something else.

Click sample_survey.fla to begin.

Sample Application: Survey Admin

Description
This sample demonstrates how you can create one or more surveys, enter your questions and answer choices.

Key features
Multiple remote SharedObjects.

Instructions
If you wish to create a new survey, type in a name (no spaces) and click ‘Make Survey’. Enter as many questions as you would like with as many choices you would like for each question (1 to 5 in number). Click ‘Submit’ to submit the question. When finished use the ‘Main’ button to return to the start and you can either: 1) make another new survey; or 2) edit an existing survey by selecting a survey title from the combo box and clicking on ‘Edit Survey’; or 3) view the results of an existing survey by selecting a survey title from the combo box and clicking on ‘View Results’

Click sample_survey_admin.swf to begin.

Sample Application: Broadcast Presentation

Description
This sample shows how to host a presentation with one speaker and many subscribers. There is a audio/visual piece for the Speaker, a questions and answers capability with it’s own audio/visual, and a slideshow, into which other swfs can be loaded.

Key features
SharedObjects, NetStreams

Instructions
One person must log in as the Speaker to get the presentation started. The movie that is loaded into the slideshow piece must have a slide on each frame, as the main broadcast app will navigate through the slideshow movie frame-by-frame.

To connect as the Speaker and host a presentation click sample_broadcast.swf

To connect as a presentation viewer click simple_preso.swfto begin.

sample_snapshot.swf

Sample Application: Lobby And Audio Conference

Description
The lobby sample application provides a demonstration of several key features, all implemented as Components. The connection Component lets you login by clicking Login to specify a username, this will then let you use all the other features of the application. A chat window lets all users logged in chat with each other and has basic features such as URL highlighting, and colored text for each user. A list of users is shown next to the chat that will display the username of any logged in user. The room list lets you create your own room, delete an empty room, and join an existing room; it also displays how many people are in each room. Clicking on Join Room will open a selected room in a new window. The sample_room you are taken to is an example of how to make a simple destination application that is linked to from the room list Component.

Key features
SimpleConnect Component for easy connection management to the Flash Media Server 2. Chat, PeopleList and RoomList Components that provide additional enhancements to this application without having to manually add any code. The sample_room application also makes use of the AudioConference Component.

Click sample_lobby.swfl to begin (note: Using the join room feature only works properly when the files are loaded via a web server as apposed to being launched from the local file system).

Description
This sample demonstrates how you can manage bandwidth in a multi-person meeting over connections with varying bandwidth.

Key features
SharedObjects, NetConnection, NetStream, setBandwidthLimit.

Instructions
The app does not manage separate rooms, so just run the swf to join the meeting in progress. To adjust your bandwidth settings you can do the following: Go to the bandwidth drop-down menu to the left of the connection light. Choose “Custom” within the bandwidth drop-down menu. A new dialog pops up in which latency can be decreased by lowering the up and/or down bandwidths by choosing one of the options within the “Up Limit” or “Down Limit” drop-down menus. Latency can be decreased by lowering the up and/or down bandwidths or by setting a less demanding video mode.

Click sample_videoconference.swf to begin.

Description
This is a simple extension of the text-only guestbook we all know. Using the features provided by the Macromedia Flash Media Server, this guestbook will enable visitors to leave audio/video messages, as well as regular text messages.

This sample is intended to be a sample, easy to understand application. The UI is pretty straightforward, and the code is easy to read.

Key features
The entries are stored in a Shared Object persistent on the server.
This sample is easy enough to be a starting point for learning how Shared Objects and server-side code work.

Click sample_guestbook.swf to begin.

Key features
SharedObjects, NetStreams

Instructions
There are three spots where anyone may click to publish their audio and video. Text slides can be prepared in advance or edited in real-time. People watch the presentation without being required to log in, but to participate in the chat or audio/video, they must supply a user name and log in.

To connect click sample_panel_presentation.swf to begin.

Viewing the application

Re-creating the application

The sharedball.flaa provides the ActionScript for creating a remote shared object that synchronizes and updates the ball position for each user.

This tutorial uses a graphic shared object and the onSync event handler.

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 authoring environment, select File > New to open a new file.

2

From the toolbox, select the Circle tool and draw a circle.

3

Double-click the circle to select it, then choose Insert > Convert to Symbol.

4

In the Convert to Symbol dialog, name the symbol ball and click OK.

5

With the ball symbol selected on the Stage, in the Property inspector (Window > Properties), give it the instance name SharedBall_mc.

6

Save the file as tutorial_sharedball.fla.

7

To register your application with the server, create a directory with the same name as your application, tutorial_sharedball, in your /applications directory in the Flash Media Server directory.

To write the Client-Side Communication 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 network connection to connect to the server and handle any status messages with the onStatus function.

// Create a connection
client_nc = new NetConnection();
// Show connection status in output window

client_nc.onStatus = function(info) {
trace(“Level: ” + info.level + ” Code: ” + info.code);
};

// Connect to the application
client_nc.connect(“rtmp:/tutorial_sharedball/room_01″);

4

Create a remote shared object to hold the x/y coordinates of the ball.

// Create a remote shared object
ball_so = SharedObject.getRemote(“position”, client_nc.uri, false);

// Update ball position when another participant moves the ball
ball_so.onSync = function(list) {
SharedBall_mc._x = ball_so.data.x;
SharedBall_mc._y = ball_so.data.y;
};

5

When you get a shared object, make sure you connect it to the NetConnection object.

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

6

Create the function that updates the shared object data with the position of the ball.

// Manipulate the ball
SharedBall_mc.onPress = function() {
this.onMouseMove = function() {
ball_so.data.x = this._x = _root._xmouse;
ball_so.data.y = this._y = _root._ymouse;

// Constrain the ball to the stage
if (SharedBall_mc._x>=Stage.width) {
SharedBall_mc._x = Stage.width – 50;
}
if (SharedBall_mc._x=Stage.height) {
SharedBall_mc._y = Stage.height – 50;
}
if (SharedBall_mc._y Publish.

2

Open two instances of the SWF file.

3

Move the ball in one instance to see the other immediately updated.

Re-creating the application

The tutorial_text.fla file provides the ActionScript for letting multiple users share text in real time.

In a chat room, you want to view current users dynamically. When users log in to a room, the list should be updated; when users log off, they should be removed from the list. It’s best to do this processing work on the server, because keeping data centrally on the server means that any client can come and go, and the data will always be accurate and available.

In addition, in this tutorial, the server doesn’t simply hand off the text from one client to another—it actually makes changes to the message by adding the name of the user who typed it. Because you expect the server to provide this functionality, you need to write some Server-Side Communication ActionScript to handle this work.

Finally, this tutorial also illustrates how to dynamically add an instance name to a NetConnection.connect command based on data entered by the user.

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 authoring environment, select File > New to open a new file.

2

To add a text box to enter a user name, select the Text tool and draw a text box on the Stage. In the Property inspector (Window > Properties), select Input Text for the type of text box, give it the instance name User, and select the Show Border Around Text option.

3

To add a text box to enter the name of a chat room to join, draw another text box below the User text box. In the Property inspector (Window > Properties), select Input Text for the type of text box, give it the instance name Room, and select the Show Border Around Text option.

4

To add a text box to type messages, draw another text box below the Room text box. In the Property inspector, select Input Text for the type of text box, give it the instance name Message, and select the Show Border Around Text option.

5

To display the chat history, draw a fourth text box below the Message text box. In the Property inspector, select Dynamic Text for the type of text box, give it the instance name History, and select the Show Border Around Text option.

6

To add a place where users are listed, open the Components panel (Windows > Components), drag the List Box component onto the Stage, and give it the instance name People.

7

To add the button to connect to the server, drag a push button from the Components panel and place it on the Stage next to the User and Room text boxes. In the Property inspector, give it the instance name Connect_btn, the label Connect, and the click handler doConnect.

8

To add the button to send messages, drag a push button from the Components panel and place it on the Stage next to the Message text box. In the Property inspector, give it the instance name Send_btn, the label Send, and the click handler doSend.

9

Save the file as tutorial_textchat.fla.

10

To register the application with the server, create a directory with the same name as your application, tutorial_textchat, in your /applications directory in the Flash Media Server directory.

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

Provide a value for the maximum scrolling of the History text box component.

// Set maximum scroll
History.maxscroll = 1000;

4

Prevent the user from sending until after the user has connected to the server.

// Don’t allow the user to send until after connection
_root.Send_btn.setEnabled(false);

5

Create a new connection object.

// Open a connection to the server
client_nc = new NetConnection();

6

Provide an onStatus for the connection object function to handle any connection status messages. If the connection has been closed, the History text box and the People list box are cleared of all content.

// If connection is closed, clear the History and the list
client_nc.onStatus = function(info) {

trace(“Level: ” + info.level + ” Code: ” + info.code);

if (info.description == “NetConnection.Connect.Closed”) {
History.text = “”;
_root.People.removeAll();
}
}

7

Create the event handler for the Connect button. If the user clicked the button when the label was Connect, then connect to the server and update the buttons.

function doConnect() {

if (Connect_btn.getLabel() == “Connect”) {

// Connect to the chat application.
// The second parameter, _root.Room.text,
// is the application instance.
_root.client_nc.connect(“rtmp:/tutorial_textchat/” + _root.Room.text,
_root.User.text);

// Update button label
Connect_btn.setLabel(“Disconnect”);

// Enable send button
_root.Send_btn.setEnabled(true);

8

In the same doConnect function, create a remote shared object and connect to it.

// Create a remote shared object to keep track
// of the users. The value client_nc.uri is the URI of the
// NetConnection the shared object will use to connect to the
// server. I.e., the one just created.
users_so = SharedObject.getRemote(“users_so”, _root.client_nc.uri,
false);

// Attach the shared object to client_nc
users_so.connect(_root.client_nc);

9

In the same doConnect function, create the onSync method to handle the change in users.

// When the list of users_so is updated, refresh the
// People list box.
users_so.onSync = function(userList) {

_root.People.removeAll();

for ( var i in users_so.data) {
if (users_so.data[i] != null) {
_root.People.addItem(users_so.data[i]);
}
}

// Sort alphabetically, because order returned
// is not guaranteed to be consistent.
_root.People.sortItemsBy(“label”, “ASC”);
}

10

In the same doConnect function, provide a callback function to be called by the server.

// Update the shared object with the message.
users_so.msgFromSrvr = function(msg) {

_root.History.text += msg;
_root.History.scroll = _root.History.maxscroll;
historyScroll.setScrollTarget(history);
historyScroll.setScrollPosition(_root.History.maxscroll);
}
}

11

Lastly, in the same doConnect function, if the label on the Connect button is Disconnect, then close the connection and reset the buttons.

else if (Connect_btn.getLabel() == “Disconnect”) {

// Close connection
_root.client_nc.close();

// Don’t allow the user to send when not connected
_root.Send_btn.setEnabled(false);

// Rest button label
Connect_btn.setLabel(“Connect”);

}
} // doConnect function ends here

12

Create an event handler for when the user selects Send. In this function, if there’s any text in the Message input text box, call the server function, msgFromClient, and pass it the Message.text text.

// Send the message text by calling the server message function
function doSend() {

// If there’s message text, pass it to the server function msgFromClient
if (length(_root.Message.text) > 0) {
_root.client_nc.call(“msgFromClient”, null, _root.Message.text);
}

// Clear the message text
_root.Message.text = “”;

}

13

Create the setHistory function that the server calls to update the text in the History dynamic text box.

// Update the History on the server with the message
client_nc.setHistory = function(msg) {
_root.History.text = msg;
}

To write the server-side ActionScript:

1

Create a new file using your server-side ActionScript editor or text editor, and write the event handler onAppStart for initializing the application variables.

application.onAppStart = function()
{
trace(“Begin sharing text”);

// Get the server shared object users_so
application.users_so = SharedObject.get(“users_so”, false);

// Initialize the history of the text share
application.history = “”;

// Initialize the unique user ID
application.nextId = 0;
}

2

Write the event handler onConnect for managing users and sending the history to all clients.

application.onConnect = function(newClient, name)
{
// Make this new client’s name the user’s name
newClient.name = name;

// Create a unique ID for this user while incrementing the
// application.nextID.
newClient.id = “u” + application.nextId++;

// Update the users_so shared object with the user’s name
application.users_so.setProperty(newClient.name, name);

// Accept the client’s connection
application.acceptConnection(newClient);

// Call the client function setHistory, and pass
// the initial history
newClient.call(“setHistory”, null, application.history);

// The client will call this function to get the server
// to accept the message, add the user’s name to it, and
// send it back out to all connected clients.
newClient.msgFromClient = function(msg) {
msg = this.name + “: ” + msg + “\n”;
application.history += msg;
application.users_so.send(“msgFromSrvr”, msg);
}
}

3

Write the event handler onDisconnect to clean up.

application.onDisconnect = function(client)
{
trace(“disconnect: ” + client.name);
application.users_so.setProperty(client.name, null);
}

4

Save the file as main.asc in the tutorial_textchat directory you previously created under the /applications directory in the Flash Media Server directory.

Note: Save this main.asc file in the registered client application directory in the location you’ve chosen to store your server-side application files.

To test your application:

1

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

2

Open two instances of the SWF file.

3

In each instance, type a user name and room name, and click Connect. (Make sure to choose different user names but the same room name in both instances.) Each user name you enter appears in the People list box. Type a message in the Message text box and click Send to see the message appear in both instances of the SWF.

Re-creating the application

This tutorial is the first to use Server-Side Communication ActionScript. In it, you write your client-side ActionScript in Macromedia Flash. Then, you write a corresponding function in server-side ActionScript that you store in a file called main.asc. The tutorial_hello.fla file provides the ActionScript for sending information from the server to the client.

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 Flash 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, select the Show Borders Around Text option, and give it the instance name User.

This is where you’ll type your login name.

3

Add a dynamic text box for a debug window by selecting the Text tool and drawing another text box. In the Property inspector, select Dynamic Text for the type of text box, select the Show Borders Around Text option, and give it the instance name Message.

There is where the message from the server will be displayed.

4

To add the button for connecting to the server, open the Components panel (Window > Components) and drag a push button onto the Stage. In the Property inspector, give it the instance name Connect_btn, the label Connect, and the click handler doConnect.

5

Save the file as tutorial_hello.fla.

6

To register your application with the server, create a directory with the same name as your application, tutorial_hello, in your /applications directory in the Flash Media Server directory.

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

Open a connection and handle any status messages.

// Open connection to the server
client_nc = new NetConnection();

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

4

Create the event handler for the Connect button. If the user selected the button when the label was Connect, then connect to the server. If the button label is Disconnect, close the connection.

// Event handler for Connect_Btn
function doConnect() {

// If user wants to connect…
if (Connect_btn.getLabel() == “Connect”) {

// Connect to the chat application
client_nc.connect(“rtmp:/tutorial_hello/room_01″, User.text);

// Update button label
Connect_btn.setLabel(“Disconnect”);

// If user wants to disconnect…
} else if (Connect_btn.getLabel() == “Disconnect”) {

// Close connection
client_nc.close();

// Reset button label
Connect_btn.setLabel(“Connect”);

// Reset the text fields
user.text = “”;
message.text = “”;
}
}

5

Write the function the server will call to return the message to the client.

// Callback function server calls to send message back to
// this client.
client_nc.msgFromSrvr = function(msg) {

var msg;
_root.Message.text = msg;

}

To write the server-side ActionScript:

1

Create a new file using your server-side ActionScript editor, and write an event handler for when the user connects. In it, you’ll receive the name passed in by the client, accept the client connection, create a message that uses the client’s name, and call the client msgFromSrvr function to return the message.

application.onConnect = function(newClient, name) {

// Give this new client the same name as the user name
newClient.name=name;

// Accept the new client’s connection
application.acceptConnection(newClient);

// Create a customized “Hello [client]” message
// that the server will send to the client
var msg = “Hello! You are connected as: ” + newClient.name;

// Print out status message in the application console
trace(“Sending this message: ” + msg);

// Call the client function, message, and pass it the msg
newClient.call(“msgFromSrvr”, false, msg);
}

2

Save the file as main.asc in the registered application directory, the /applications/tutorial_hello directory in the Flash Media Server directory.

Note: If you have chosen to store your server-side application files in a location other than the default, you should save this main.asc file in that directory and register your applications there as well. For example, the default location is in the /applications directory in the Flash Media Server directory. The tag in the Vhost.xml server configuration file contains the location of your /applications directory. For more information see Chapter 1 in Developing Communication Applications.

To test your application:

1

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

2

Open the SWF file.

3

Type your name in the input text box and click Connect. You’ll see a message like this one in the Message text box:

Hello! You are connected as: [your name]