Actionscript explained
I'm not going to explain every singe line of actionscript,
beause a lot of it speaks for itself. Instead, I'm going to
focus on the main functionality of the guestbook, namely the
XML.sendAndLoad() function which has the
following usage (taken from the Flash Actionscript
dictionary):
myXML.sendAndLoad(url,targetXMLobject)
This method encodes the specified XML
object into a XML document, sends it to the specified URL
using the POST method, downloads the server's response and
then loads it into the targetXMLobject specified in the
parameters. The server response is loaded in the same manner
used by the load method.
Now what does this mean exactly? Obviously
it means that we need two XML objects in our script: the
object that is sent to the specified URL - which in our case
is a PHP script - and a target object that receives data
back from this PHP script. The following lines create those
two XML objects:
- myXML
= new
XML();
- myXML.ignoreWhite
= true;
- receiverXML
= new
XML();
Our guestbook.xml file initially is
loaded into the myXML object. After it has been successfully
loaded the showXML() prototype is called:
- if
(success){
- this.showXML();
- }
This prototype fills our main textfield with
the data from the XML file, starting with the last entry
that has been added to the guestbook. It only shows the
number of entries that are defined in the variable
showAmount, defined in line 2, which in our case equals
10:
- var
showAmount
= 10;
We also want to keep track of the number of
pages we need for all of our guestbook entries. Let's say we
have 12 entries and only want to show 10 per page. Obviously
our entries should then be divided over 2 pages. The
currPage variable is used for this, together with the
firstItem and lastItem variables. The
first item we'd like to see is entry #12, the entry that was
last added to the guestbook. So:
- var
firstItem
=
numItems -
(currPage*showAmount);
and because currPage initially
equals 0 (the first page) this gives us:
- var
firstItem
= 12
- (0*10);
// equals 12
the last item shown on this page should then
ofcourse be 12 minus 10 = 2 which is done by:
- var
lastItem
= firstItem
-
showAmount ;
Further, we don't want the previous button
to be visible when we're already viewing the first page so
therefore:
- if
(currPage
== 0)
previous._visible
= false;
Now, if we press the next button,
the currPage variable is increased by 1. After
this, the showXML() function is called again. Now
firstItem will equal 2:
- var
firstItem
= 12
- (1*10);
// equals 2
Subsequently, lastItem will equal 2
- 10 = -8. Obviously, in such a case where the last page
would not contain the amount of entries as defined in the
showAmount variable, if we would only write:
- var
lastItem
= firstItem
-
showAmount ;
we'll end up with a negative value for
lastItem which would mess up the for-loop that fills
our textfield. Therefore we also need the following, which
sets lastItem to 0 and also hides the 'next' button
when viewing the last page.
- if
(lastItem<=0)
{
- lastItem
= 0;
- next._visible
=
false;
- }
Having said all this, I think it will be
quite clear what the previous.onRelease and
next.onRelease event handlers do.
Intermezzo: the XML file
So how exactly is the XML file setup? We start out with an
'empty' file, meaning that there are no guestbook entries
yet. The file looks like this:
<?xml version="1.0"?>
<guestbook>
</guestbook>
Actionscript continued
Now that we know how the XML file is setup and how the
showXML() function works we come to the part where we
want to add a message to our guestbook. By clicking the "add
a message" button, the createMessage movieclip
becomes visible. After filling out the name and
message fields and clicking the send button,
the following happens:
- The values from the two input textfields are assigned
to the variables myName and myMessage:
- var
myName
= this._parent.nameField.text;
- var
myMessage
= this._parent.messageField.text;
- The code checks if both textfields are actually filled
out. If one of them is left blank an errormessage is shown
in the errorField and the cursor is placed inside
the empty textfield.
- if
(myName
== ""){
- this._parent.errorField.text
=
"please fill out your name";
- Selection.setFocus(this._parent.nameField);
- }
- else
if (myMessage
== ""){
- this._parent.errorField.text
=
"please leave a message";
- Selection.setFocus(this._parent.messageField);
- }
- If both fields are filled out (the else statement), a
new <entry> node is added to the myXML object.
Note that this node is added to myXML's firstchild, which
is the <guestbook> node:
- myXML.firstChild.appendChild(myXML.createElement("entry"));
The myXML object now looks like this:
<?xml version="1.0"?>
<guestbook>
<entry>
</entry>
</guestbook>
- After that, a myName attribute is added to
this new <entry> node and assigned the value of
the myName input textfield:
- myXML.firstChild.lastChild.attributes.myName
=
myName;
Resulting in:
<?xml version="1.0"?>
<guestbook>
<entry myName="Flashmatazz">
</entry>
</guestbook>
- Then a new <myText> node is created as a
childnode of the newly created <entry> node:
- myXML.firstChild.lastChild.appendChild(myXML.createElement("myText"));
Giving us the following:
<?xml version="1.0"?>
<guestbook>
<entry myName="Flashmatazz">
<myText> </myText>
</entry>
</guestbook>
- A new text node, containing the value of the
myMessage input textfield is added to this newly
created <myText> node:
- myXML.firstChild.lastChild.appendChild(myXML.createElement("myText"));
which finally gives us:
<?xml version="1.0"?>
<guestbook>
<entry myName="Flashmatazz">
<myText>Here goes the text that the user wrote in the
message textfield </myText>
</entry>
</guestbook>
- And now, finally, this updated myXML object is sent to
the PHP script which resides on the server:
- myXML.sendAndLoad("processXML.php",
receiverXML);
Curious about how this PHP script looks
like? Read about it on the last page.