The
Basics
FlashNow
makes it possible to create Flash movies that communicate instantly with other
Flash movies over the Internet. This means that you can use Flash to develop all
kinds of synchronized multimedia and multiuser applications, from chats to games
to virtual classrooms and collaborative environments. To
enable live interaction with FlashNow, your Flash movie must do three things:
- It must
set up the XML socket and connect to the computer running the FlashNow server.
This could be the localhost, or it could be a remote computer.
-
The movie must be assigned a channel. This is a unique identifier (it can be a
number or alphanumeric string) that allows you to establish multiple FlashNOW
sessions on the same port.
-
Finally, the movie must pass a name to the server to identify this instance of
the client.1
Simple
Dynamic Flash Example (Echo)
Echo.fla contains a simple Flash movie, with
the bare minimum of functionality: it makes a connection with the NowServer2,
takes input, and then sends it back to the user.
The
first symbol of interest is the LiveCode movie clip. This movie clip contains
the standard initialization routines for any NowEnabled3
movie. It creates a new XML socket and opens a connection to the server. There
is also an init() function, although there is nothing to initialize in
this movie.
Next,
there is newConnection(), which is called as soon as the program connects
to the server. It simply displays an appropriate message in outputText.
Finally the function
newXML() is called by the server whenever any XML event is sent by any
program on the same channel. It parses the XML data character by character, and
sends it on to parseMessage().
There
are two textfields, inputText and outputText. There is also a "send text"
button, placed just offstage. The button is there to trigger events when receiving
keystrokes, in this case the <Enter> key.
The
first frame of the main movie is the parseMessage() function. This function
traverses the XML tree looking for a message node. The top-level XML node in this
case is the <LiveEvents> node so it moves on to the first child node. This
first child node is a <message> node, so it looks to see if there is a command
parameter with the value of "CHAT". If there is, it places the value
of the data parameter into outputText.
The
"send text" button code should be fairly straightforward to understand.
Whenever the <enter> key is pressed, it checks to make sure that there really
is something in the inputText to send. If there is, it constructs an XML
message containing the data, and sends it to the FlashNow server. Then it erases
the inputText field.
This
program contains all of the basic functionality of the FlashNow server.
Building
a Basic Chat Room
From here it is fairly simple to expand echo.fla
into an actual chat room.
The
most important new feature to add is the user list. basicChat.fla
has a list of users, and automatically generates a random username.
The
first thing that the movie does, after loading and connecting with the server,
is to call init(). Every time a new user joins, a current user changes
names or a current user disconnects, a USERLIST message is generated and sent
to every movie on the channel. The XML sent by the server looks like this.
<USERLIST>
<USER
name='Guest87'/>
<USER name='Guest66'/>
<USER name='Guest95'/>
</USERLIST>
The
parseMessage() function has some added checks to see if the message received
was a USERLIST or USER.
- If
the nodeName= USERLIST, it clears the user list in expectation of a new set of
USER name values.
-
If the nodeName=USER, it adds the value of the name parameter to the userList
text variable.
For
this example, users can change or input their name on the same page, using the
"submit" button. The code on the submit button sets the local username
variable to the text entered, and sends a <SERVER NAME4=''nameOfServer"/>
message to the server, just as it did after first connecting to the server.
Note: Instead
of requiring the user to change their name on the same page, as in this example,
you could construct a login page, with a little code (using PERL or PHP, for example)
that passes the user name to Flash. You could also validate a registered user
in the login process.
In
the example, you will also see a button called USERLIST. When clicked, this button
sends another special SERVER XML command <SERVER CHANNELLIST=''theChannelOfThisMovie"/>.
Since
a new user list is automatically sent each time a change occurs in the status
of the connected users, this command may seem extraneous, and in fact when you
click the button you will probably not see a change in the user list. But notice
that the name of the channel that the client joined is sent as the CHANNELIST
parameter. By using this function, you can request a user list for a foreign channel.
You can also turn off the server's automatic user list feature (see the configuration
section) and handle the user list using your own custom code, or you can eliminate
the user list altogether. (Note that this method of getting a server-generated
user list will work even when automatic user list is turned off.)
basicChat.fla
adds one more script, attached to a symbol (a movie clip this time), that checks
to see if the entered text is still visible. When the user enters more lines of
text than will fit in the outputText window, scrollCheck sets the .scroll
property to .maxscroll, which keeps the text in the window.
Pushing
Events
It is important to note that although most of the XML commands
in the first two examples have been of the "CHAT" variety, there
is no limit to the type of command that can be sent. This assumes that there is
code somewhere to tell the client program what to do with each type of command.
complexChat.fla
contains a similar chat program, except that it scans each input line for the
characters *LOL*, the old IRC abbreviation for "Laugh out Loud".
If it sees these characters, it sends the "CHAT" command as normal,
but it also sends a "PLAY" command. This message uses the data
parameter to pass a string that is the name of a sound object declared in init().
The
"SEND TEXT" button that scans for the <enter> key has a bit more
complex code this time. It starts out as before, checking that there really is
data in the inputText field.
Then
it starts an XML message, but does not include the </LiveEvents> tag to
close it. It converts the input string to upper case, and then searches it for
"*LOL*". If the text is found (note that the indexOf()
method returns -1 if it is not found), then a second message tag is added. This
is what tells Flash to play the "laugh" sound.
This
example also uses the escape() function to deal with characters such as
the double-quote. The parseMessage() function is modified to unescape()
the data that it receives. Try typing "I can't live without FlashNOW"
in basicChat.fla, and then in complexChat.fla.
In
this release of FlashNow, we have added a Private Message feature. First
note that when we build the user list the userList dynamic text field now has
the HTML checkbox marked. In parseMessage() we build a HTML document, with
each name a href link. The strange format of the URL in the href tag <A HREF="asfunction:_root.PrivateMessage,Guest99">
makes use of an undocumented Flash feature, asfunction:. The "asfunction:"
feature works much like the "javascript:" URL syntax, but rather than
calling a javascript function included in the movie's parent HTML page, the "asfunction:"
URL calls an ActionScript defined inside the Flash movie itself. In this case
we call the PrivateMessage() function and pass it the name of the user
we just clicked on.
The
PrivateMessage() function is also included on frame 1 of our Flash movie.
Examining this function, we see that it looks almost exactly like the ActionScript
used on the "send text" button. The important difference is the addition
of a targetuser parameter in the message being sent:
-
When using the suggested <MESSAGE /> syntax the server will look for a targetuser
in the sent XML.
-
If none is included, then the message is sent to all clients on the channel.
- If
there is a targetuser, the message is sent only to those clients whose names match
the value sent for targetuser.
There
are many other useful commands that could be implemented in addition to those
just described ("SERVER NAME", "SERVER CHANNEL",
"SERVER CHANNELLIST", "CHAT" and "PLAY").
Anything that Flash 5 can do, can be communicated from one Flash application to
another through an XML message.
This
example also includes basic scrollbars to view previous lines of text. There are
four new variables for each scrollbar: percent, start, location,
and max.
- Percent
keeps track of the percentage of the scrollbar that the handle has covered.
- Start
is the pixel coordinate of the top of the scrollbar (where the handle starts).
-
Max is the bottom of the bar (where the handle ends).
- Location
is the current location of the text being scrolled.
Thirty
times a second - onClipEvent(enterFrame) - location is computed, based
on the text's .maxscroll, and .scroll is set.