Make Flash Animations, Video, Slideshows, Text Effects, Buttons & Menus. Designer Templates, 250 Effects, plus Components & Video Controls

简体中文 繁體中文 Français Español Italiano 日本 Polski Deutsch SWiSHzone.com
SWiSHzone.com Banner
You are here: Home > Community > Tutorials
Community
FREE TOOLS!
Laboratory
Community Overview
Movies
Components
Effects
Screencast Tutorials
> Tutorials
Official Blog
Forums
Other Forums
Request help
Search Tutorials

 All words
 Any words

 Similar words
 Exact words

Number of Results:
Monthly Newsletter
Get our monthly newsletter for all the latest news
competitions, tutorials and tips > Sign Up Now

SWiSH Max: ASfunction - Blogging simplified
Creator: Mike Chrysler
Website: http://www.swishzone.com
Submitted: Sun Nov 26 2006
Description: How to create your own blog with Just Swishmax and Notepad no serverside scripting required.
Zip File: Download


Program

 

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.

My s

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.

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.











Search | Privacy policy | Contact us | Site Map | Copyright SWiSHzone.com Pty Ltd 1999-2010