|
Program: SWiSHmax
Introduction
*note due to the interactive nature of all the components you will need
to download and unzip to see the demonstration.
When we first learn in swishmax we
understand Events and Actions Events be they Timeline or Object based
l lead to actions
on (Event) {
Action > do
this("to that" or "there");
}
|
This works great when everything we need to
do is internal. If we load a movie into a sprite or mc we can
expand our flow of control. However there are times when we need our
actions separated from our events so we only have either multiple
events
calling the same action or one event extending multiple actions. A
truly reusable system is where by not only are your events and actions
separated but you can change arguments and there by change results.
Arguments or parameters (depending on what camp you come from) are the
this or that in the above code concept. Just as you now understand
Events hold actions and Variables hold expressions.
What is a Function?
Functions are "Objects" like sprites but
only contain Events. The uniqueness of this is that you can call a
function
(which performs the action) and send the argument to the function. How
do we call to a function well we can use either call function( I know
sounds silly) or asfunction. The difference between the two is...
when
you simply call the function. the function must already contain the
parameters. when you use asfunction. you send the parameters to the
function. ie: sake of argument your dogs name is
What is asfunction
Asfunction is a means of calling a function
and sending parameters to complete the function (or change the
outcome). Imagine you have a dog who knows one trick. "Ralf
get" Ralf knows get something get something but what?. asfunction is
like telling Ralf get something specific as opposed to hard wiring him
only to get the same thing Ralf (function) Get ("Milk") (parameter)
bring Milk (parameter) to (location)
A movie by default has no background
color. In web (swf) format a given movie displays
the background color established by the html document
information,
We need a basic layout outline that defines the boundaries of our
app. This can be a shape, or image If the image has transparency.
The Goal
If asfunction is still not making
sense. Lets try a real swishmax example. You want to build
a blog. You want to build it in swishmax you don't have want or need
server-side scripting (asp php perl)
The Text Files
If your unfamiliar with load variables you
may
wish to brush up before proceeding. Here
is a good place to start.
Your Post.txt can have as many variables as you like you can use these
different variables for Title Content and Date. For the sake of
simplicity ours will operate on Title and Content only.
Post1.text
&MyTitle=My First Blog
&MyContent= So I got tired of fighting with a million controls and
a thousand features I never use and wanted to get back to basics Write
my post add it to the menu upload and done.,,,story continues...
|
Each time you write a new post.txt remember
to name it something unique you can reference later on. Post1.txt,
Post2.txt etc
Menu.txt
&list_txt = <a href='asfunction:MyPost,Post1.txt'>My First Blog</a><br>&
|
Take a long slow look at Menu.txt as even
though it only lists one item, there is much to need to know about it's
formatting.
later on the text will be created via a script rather then by applying
a text object to the stage vy conventional means.
The text needs to be rendered as html in order to pass the asfunction
(or function instructions if you will) and the parameter to the movie.
The first thing you see is a link. You'll notice a single quote
(')as opposed to double quotes(") . SWF is very unforgiving when it
comes to quotes in quotes. If you've ever tried to to contain a
string(text) expression with double quotes inside a variable you are
well aware of how hard it is to get the proper values.
-
&list_txt: Our Variable name
-
<a href=': Our reference to
-
asfuntion: : Tells movie call a function
-
MyPost,: Name of the function
-
Post1.txt: Name of the parameter
-
>My First Blog< : Text that is displayed
-
/a><br>& : Close reference, Break close variable.
Each time you add a new post you need to add
a new instruction to your expression
&list_txt = <a href='asfunction:MyPost,Post2.txt'>My Second Post</a><br> <a href='asfunction:MyPost,Post1.txt'>My First Post Blog</a><br>&
|
Because it is a blog we want our last entry
created to be placed at the top. Now that we understand what is
required in our .txt documents we can move on to
building our Swishmax Movie
Swishmax
On Load()
As mentioned earlier one can not fully
escape Event Action. On load means as soon as the movie begins to load
store this. If the function isn't loaded it wont work.
onLoad () {
_global.MyPost =function (arg) {
MyFile=arg;
loadVariablesNum(MyFile,0);
} |
_global is a prefix like _root. This
information can be accessed from any target universally. While
not required in most circumstances _global means it's shared by all/
-
_global: This is a prefix like _root. This information can be accessed from any target universally. While not required in most circumstances _global means it's shared by all
-
MyPost: Is the name of our function
-
(arg): : The parameter
-
MyFile=arg;: assigns a variable name to the arg
-
loadVariablesNum(MyFile,0) : Loads the variables from the variable name.
Lets recap here. The menu.txt
calls the function and supplies the argument. The Onload action stores
the function. Our functionhas a name an arguemnt and actions. When the
function is call it sends the argument to the function The function
converts the arguement into an expression assinged by assigning it to a
variable. LoadvariablesNum instructs our movie to load the exression by
it's variable name.
Stop, think breathe the knowledge needs to
be digested
Creating your Text Objects
We need three dynamic text objects to pull
this all together. Title, Content and Menu
Text Panel Text.

Our Title text has a name and is a target.
When ever a dynamic text object is a target you have to assign a
variable to it. The variable name can not be the same as the text name.
The variable name in our external post.txt file tells us the name we
want to associate with the text. The same holds true for our Content
text.

The Menu text is much the same as the
Content render as html assign a list_txt as your variable.
Loading menu.txt
onFrame (3) {
loadVariablesNum("Menu.txt",0);
}
|
Other considerations
You may feel the need for scrollers with
your dynamic text you can use dynamic scrollers for both your Content
text and your Menu Text
Brian
Ayers Tutorial is perfect for this. You also may wish to accompany
your posts with images. Don't forget you can always add mor
variables
to your Post.txt then reference those variables in actions such as
spritename.loadmovie(MyImage) using the variable to call the expression
which is your url
Extending your text content with
CreateTextField and CSS
Via CSS and createtextfield method it is
possible to include images and swf within the body of your content as
well as format text properties beyond the scope of "render as html"
To avoid any confusion with the previous methods for dynamic text fied
you should save your previous version as version1.swi.
Once done delete the "Content" text object so you only have to
concentrate on createtextfield from here out.
External CSS
External css as it applies to dynamic text
does have limitations Some of those limitations include:
- javascript actions such as On rollover events in js.
- Borders
- divs and tables
- text is always set to wrap which can cause formatting
issues when dealing with images linked to in the content.
An easy way to overcome text wrap
surrounding images is by usage of multiple <br.> tags <p>
while it can be deployed via CreateTextfield + css does not handle in
the same manner as it would standard css/html markup. All these things
taken into account the gains of applying css to a Created textfield
still offers more then can be achieved via conventional dynamic text
methods.
Your .css file should be limited to the css
which is pertainent to your text. Here is a typical example of a
css file.
p {
color: #000000;
font-family: Arial,Helvetica,sans-serif;
font-size: 12px;
display: inline;
}
a:link {
color: #00008B;
text-decoration: underline;
}
a:hover{
color: #FF8C00;
text-decoration: none;
}
.headline {
color: #0000FF;
font-family: Arial,Helvetica,sans-serif;
font-size: 18px;
font-weight: bold;
display: block;
color: #FF6600;
}
.byline {
color: #708090;
font-style: italic;
font-weight: bold;
display: inline;
}
|
A .css file can be created in any flat
file editor such as notepad and needs to be saved with the .css
extenion it provides external information on how
the text is to be formated. Tags in your html content refer back to the
css element which defines the properties od the text to be presented.
Createtextfield
CreateTextfield is a method first used in
swf6 that has been enhanced in 7 and 8 originally one could only use
internal css with createtextfield. the internal css was not as
practical as external
it had several limitiations. swf 7 was the first time loadcss() became
fully implimented. It simplfied css for those whom had familairity with
conventional css as well as before we delve to far into loadcss
llets explore createtextfield a little more fully.
onFrame (2) {
createTextField("myText", 1, 250, 110, 360, 400);
myText.type =
"dynamic";
myText.autoSize = "left";
myText.multiline = true;
myText.wordWrap = true;
myText.html =
true;
myText.selectable = true;
myText wordWrap = true;
myText.condenseWhite = false
//Hard code some HTML text to display (for example
purposes)
MyContent ="Click on This is Cool";
//Create a new style sheet object
var myCSS = new TextField.StyleSheet();
//Specify the location of the CSS file that you
created earlier
var cssURL = "example.css";
//Load CSS file
myCSS.load(cssURL);
//define onLoad handler
myCSS.onLoad = function(success) {
if (success) {
/* If the style
sheet loaded without error,
assign it to the text object, and assign the HTML text to the
text field*/
myText.styleSheet = myCSS
myText.text = MyContent;
//this should be ".htmlText",
// but Flash seems to recognise that the textbox needs to display html
anyway
;
};
}
}
|
This is a lot of code to eat up on one sitting lets break it up into
three areas. Creating the textfield, .Creating a css object
Calling an onload function
createtextfield
nFrame (2) {
createTextField("myText", 1, 250, 110, 360, 400);
myText.type =
"dynamic";
myText.autoSize = "left";
myText.multiline = true;
myText.wordWrap = true;
myText.html =
true;
myText.selectable = true;
myText wordWrap = true;
myText.condenseWhite = true;
//Hard code some HTML text to display (for example
purposes)
MyContent ="Click on This is Cool"; |
for a complete rundown on all the properties available see actionscript
library
remember that availabilty of features is inherant on swf export values
all examples have been tested thoroughy in swf7 and 8 .
As you will notice the first thing we do is establish the name of our
text object so it can be targeted for content. ("myText") This is followed by the
a number number referring to the depth of the object because it is
created via script as opposed to on the stage this is important we
don't what it hidden by other objects at a higher z plane.
The four numbers following refer to x, y, width and hieght. It is
a paint by numbers which may take some adjustment for many who are only
familiar with placing objects on the stage as opposed to creating by
script.. While many of the properties are easiy accessed via text panel
options condenseWhile is an extremely practical solution to carrage
return issues when using external text.
var myCSS = new
TextField.StyleSheet();
//Specify the location of the CSS file that you
created earlier
var cssURL = "example.css";
//Load CSS file
myCSS.load(cssURL);
//define onLoad handler |
We define myCSS as a variable object as you will notice it has no
"stage properties" eg non visible its an empty object until we load
something into it..
We create another varialbe with the location of our .css then instruct
my.CSS to load the url. Similar to what we did before with our
asfunction though in this instance
the variable doesn't change so we don't need to extend the function via
the previous method.
myCSS.onLoad
= function(success) {
if (success) {
/* If the style
sheet loaded without error, assign it to the text object, and assign
the HTML text to the text field*/
myText.styleSheet = myCSS
myText.text = MyContent;
//this should be ".htmlText",
// but the swf seems to recognise that the textbox needs to display
html
anyway as we have defined it elsewhere
|
With the advent of Load(object) we need a function which operates as a
check sum (make sure the object is actually loaded) and execute. The
success function does both via the onload. via the If qualifier.
If the css is loaded into the object. myText.styleSheet = myCSS (use
myCSS as a stylesheet for myText) then myText.text = MyContent take the
text content in MyContent and display it in myText.
Final considerations.
htmltext is not all wine and roses. Expressions as strings (text)
are always encapulated by double quotation marks ("). When you use
hyperlinks in your content you can't use double quotes. as it closes
the string. the most common alternative is using single quote( ' ) or a
slash ( \ ) as an escape.
Either:
<a href='http;//yoursite.tld/page.html'>Link</a>
or
<a href=\"http;//yoursite.tld/page.html\">Link</a>
But Not
<a
href="http;//yoursite.tld/page.html">Link</a>
|
Also to note Align and wrap. Images and text wrap do not fair
well when the image is presented first. you may need to test often and
add breaks to escape the text wrapping around the image.
About the attached files. You will notice that the formating does
demonstrate some of the formatting issues. This is done
purposefully to demonstrate what can go wrong. another thing to note
asfunction1.swi utilizes the first example where by the text field was
manually created on the stage as such it also shows the standard
limitations of that approach (no images displayed.)
asfunction2.swi demonstrates createTextField and the power of using
external text field.
|