I want to start of by explaining why I have made this an Intermediate
- Advanced tutorial. For the Intermediate user, you can download
my simpleForm.liv file in our Library Items section. This is a
complete form, containing all of the scripts needed. The only
script you need is the ASP script to make it work. An Intermediate
user could skip right to Part III and just setup the ASP script
and be done. I would suggest that EVERYONE read this tutorial
completely as I cover some basic information on how to setup a
form, validate the fields and give some logical interaction to
your forms, making the experience for your visitors a little more
pleasant in trying to contact you. I would also like to say that
I welcome ANY comments on this tutorial and LIV file, please use
the working form below to contact me.
Support Languages: ASP - CFML - PHP
LiveMotion Forms - Part I
Adobe LiveMotion 2.0 enables you to communicate with server side
scripts using ActionScript. One of these methods are called loadVariables.
If you read my tutorials on Dynamic Text, you will remember how
we loaded a text file from the server, with a variable name called
myText. The text fields in LiveMotion allow you to name them or
assign a variable. We will use these variable names in our server
side script to interact with the Text Fields in our SWF Form,
as well as emailing the submitted information to you.
Setting up our Form Objects.
In the first part of this tutorial we will be making our form.
There are two ways we can do this, One you can download the the
simpleForm Library Item from LiveMotionCentral.com or you can
make your own.
The simpleForm Library Item is what we will be using in this tutorial,
but if you decide to use your own, follow the simple instructions
below for setting up your form. If you are using the simpleForm.liv
Library Item from LiveMotionCentral.com, simply skip to Part III
unless you want to read on.
You will need 4 Single Line Text Fields, and 1 Multi Lined
Text Field.
You will need the following field names, the comments field
will be our multi lined text field. Next to each name below is
the variable name we will be using.
A. Name = txtName
B. Email = txtEmail
C. URL = txtURL
D. Comments = txtComments
E. Status = txtStatus
Make sure that Fields A, B, C, and D are set to allow user
input. Do not check "Export as HTML" if you do,
the email you will get will have html code in it. If you decide
to setup a script that sends your email as HTML, you would
use this option. We are going to use a plain text email in
this example so DO NOT CHECK this field.
Our comments field is going to allow the user to scroll the
text field if they input large amounts of text. To setup a
scrolling text box, you can either download my Text Scroller
Library Item, or you can review my tutorial on Dynamic Text
Part II
Finally, we need a submit and reset button. Your buttons
will need to have at least two states for each button. A Normal
state, and a Down state.
Now, we are going to make each field required, we will go
over this in part two, but for now, add a little red arrow
to the right of each field.
When some one tries to submit the form, and a required field
is not completed, we want a sound to play, so pick a nice
error sound to use. I just used one of the sounds that came
with LiveMotion. When you have added the sound file, convert
it to a Movie Clip Group, and we need to do some things to
the timeline and make sure it only plays when we want it to.
A. Frame 00 Add a label and name it "a".
B. Frame 00 Add a script, and in the script add the following
code. this.stop();
C. Frame 01 Add a label and name it "b"
D. Frame 01 Add a script, and in the script add the following
code. this.play();
E. At the end of your sound, Add a new script, and add
the following code. this.gotoAndStop('a');
F. Finally, make sure that your sound file starts on Frame
01 and not Frame 00.
Now that you have made all the elements needed for your form,
we want to select EVERY OBJECT and convert it to a Movie Clip
Group or MCG. To do this, select all of the objects click
on Object -> Make Movie Clip Group. Now name the MCG to
form.
Your composition and timeline should look like this.
LiveMotionCentral.com
is in no way affiliated with Adobe Systems Incorporated
Adobe, After Effects, AlterCast, Atmosphere, Design Team,
GoLive, Illustrator, LiveMotion, Photoshop and SVG Viewer
are either registered trademarks or trademarks of Adobe
Systems Incorporated in the United States and/or other
countries. Visit Adobe
Systems Incorporated to learn more.