|
Loading Dynamic Text
LiveMotion's support for text in 2.0 is far better then 1.0. One
of the benefits to the new text options in LiveMotion is the Text
Field Tool. The new Text Field Tool allows you to create form
like fields that users can interact with. Either by copying text
or entering text. You can also use server side languages such
as ASP, CGI, PHP to communicate to the SWF's Text Fields, providing
dynamic content for your visitors.
One of the greatest and easiest features of the Text Field Tool
is to pull text from a text file on your web server. This allows
you to update the text file when ever needed and not have to export
to SWF again. Text Fields also support basic HTML text features
such as; <B>, <I>, <U>, <FONT SIZE, FACE,
COLOR>, <A HREF>, <P>, and <BR>. Using these
basic HTML features, you can style your text using a standard
system font on the user's computer like Arial, Helvetica, Times
Roman and many more.
Part I
Let's get started by creating a new composition. Click on File
-> New, and set the composition size to 200x200 at 30fps, and
save the new composition as "textLoader.liv"
Now you will need to select the Text Field Tool and try to draw
a 180x180 box, your composition should now look something like
this.
Now that we have our text field drawn, let's set it to the exact
size and position we want it at. To do this, simply open the Transform
Palette by clicking on Window -> Transform or by hitting the
F9 key. Now in your tools palette, select the Selection Tool (V).
If you do not have your text field selected, select it now and
you will see that the Transform Palette updates its information
to the Text Boxes position and size.
NOTE: When you resize a Text Field, depending on the tool several
things can happen. The font size can change, or the font will
appear squished and distorted. To prevent this from happening,
always draw your text field to the closest size you want. When
you change the Text Fields size, the font size will change. The
less we have to change, the less chance we have of the text being
resized or distorted.
Now we are going to change the size of the text field by using
the transform palette. Change the width and the height of the
text field to 180x180. To see how changing the size of your text
field is affecting the size of your text, click on the Properties
palette or hit the F8 key on your keyboard. Make sure the font
is Arial or Helvetica with a size of 12. Here is what your Transform
& Properties Palette should look like, as well as your composition.
Notice in the Properties Palette we have some boxes checked and
a name in the Var field, the Export Text Field as HTML and Make
Text Selectable are both checked. This will allow you to use the
basic HTML text features we spoke of above, as well as allowing
your visitors to select the text to copy it. The Var myText gives
the text field a name which we will use in LiveMotion and our
Text file on the server to reference the text field.
The last thing we need to do to our text field is to make sure
the following are checked. Border and Background, Anti-Alias None,
and Multi-Line. To do this, click on the arrow at the top right
of the properties palette.
Part II
Now we will need to open the Timeline window to view our Text Field,
to do so, click on Window -> Timeline or click on CTRL + T
for PC or Command + T for MAC. We should have one object in our
timeline as seen below.
Now we want to convert our text object to a Movie Clip Group, or
MCG. You can do this in several different ways, for now, we will
use the simple menu command, click on Object -> Make Movie
Clip Group. You will see that the name has been changed, we will
need to change it to another name. To do so, simply select the
object or Group of 1 objects and hit the enter key on your keyboard.
You will be presented with a window where you can rename the object.
The new name that we will use is "textMCG" and your
timeline should resemble the below capture.
Now double click on the textMCG object to open it. After the MCG
has opened, select the textMCG object at the top as seen below.
Now we want to open the script editor, to do so click on Scripts
-> Script Editor. With the Script Editor open, make sure that
the Movie Clip Navigator, or MCN is selected, as seen below.
In the script editor you will see an event drop list, the current
event that is listed should be onLoad this is the even that we
want to use. Each MCG has its own onLoad event, as well as many
other events like onEnterFrame. In the script editor text area,
enter the following code.
loadVariables("myText.txt", "");
Your script editor window should now look something like this.
Now close your script editor, save the document and export to your
desktop or a folder.
Part III
The last thing we need to do now is to setup a text file that will
contain your text. With your files exported you should have two
html files and one SWF file. You will notice that one of your
HTML files has a large R in the name textLoaderR.html. This is
your export report file, we will not be needing it, but keep it
around to review your export later.
Now we need to make a new text file, and we will be naming the
text file "myText.txt". In the first line of the text
field type in the following line.
myText=
Notice how we are using the variable name we entered for the text
field, also we call this name in the loadVariables command. Everything
after this line of text will be pulled into the text box. As well,
we can use basic HTML code to format our text. Copy and paste
the text below, and put it into your new text document after the
myText=
<font size="10" face="Helvetica, Arial">This
is a simple text test using <b>Adobe LiveMotion 2.0</b>.
You can download this tutorial at <font color="#000ff"><u><a
href="http://www.livemotioncentral.com" target="_new">LiveMotionCentral</a></u></font>.
I hope you enjoyed this tutorial!</font>
Now save the text file, and open your textLoader.html file in any
browser and your done! See how the text loads, and is also set
to the format we defined using the BASIC html. A final capture
below to show everything we have created.
You can also download a Library Item I have created that contains
the LIV and text file needed to make your own dynamic text field.
The Library Item also contains scroll buttons which we will cover
in my next tutorial "Scroll Buttons for Text Fields"
| 
