SiteGround Tutorials

---

Actionscript Tutorial

 

Actionscript Software

In this part of our Actionscript tutorial we will list the most popular applications, which use Actionscript.

• Flash

Adobe Flash is probably the most popular software for creating interactive websites. Adobe Flash offers a rich functionality for creating Flash movies and complicated web sites. The latest supported version of the Actionscript language in the Adobe Flash product is Actionscript 3.0.  You can find more details in the official Actionscript 3.0 language reference. 

• SWiSH

SWiSH Max3 software is used for the creation of flash animations, movies, presentations and interactive web sites. It has most of the Adobe Flash features, but it is less complicated and more affordable. SWiSH is using a scripting language called SWiSH script. It is a variation of Actionscript and contains most of the Actionscript 2.0 functions including support for Actionscript 2.0 classes in SWiSH Max3. Find more about this software on the official web site.

• Others

Sothink SWF Easy is a good Flash maker software. Using it you can easy create Flash buttons, banners, greeting cards, animated texts and presentations. It fully supports Actionscript 2.0. You can find more details and download the shareware version from the official web site.

FlashDevelop is an open-source Actionscript project and a web development environment. It integrates with Adobe Flash IDE, Adobe Flex SDK, Mtasc, Haxe and Swfmill. More information can be found on the home page.

SE|PY is a free Actionscript editor for Flash files. Detailed list of its features can be found on the following web page.

Actionscript Basic Syntax

In this part of our Actionscript tutorial we will introduce some of the basic programming code elements. Knowing the basic Actionscript syntax will allow you to build and understand simple code structures and ease your learning process.

First the programmer must know that the Actionscript programming language is case sensitive (for example gotoAndPlay is a valid movie clip method, while gotoandplay will not work).

Actionscript is an object oriented language. There are classes and variables, constants and methods defined for them. Variables and constants get values while the methods are functions, which apply a defined behaviour for the objects of the class. An object which is defined by a class can use all the methods set for this class.

An example of a class declaration is:

public class myClass
    {
        //variables
        var x;
        var y;    

        //methods
        public function myfunc()
        {
            //some code

        }
        //additional methods
        }

Then in your code you can create a new object of the above class: 

var myObj:myClass = new myClass();

One of the Actionscript's default classes is Array. A new object of this class can be created as follows:

var names:Array = new Array("John", "Tom", "Jane");

We will list some of the special characters from the Actionscript code:

• The semicollon ;  defines the end of the statements.
• Parentheses () group arguments that apply to a statement.
• The curly braces {} group all related statements.
• The // slashes sequence is used to include comments in the code.
• The colon : sign is used to define the variable type. In the current example it defines that myObj is an object of the myClass class.

In the next part of our Flash Actionscript tutorial we will provide several Actionscript web elements examples and a detailed explanation of every line of their code.

Actionscript Elements

In the current page from our Actionscript tutorial we will provide solutions on the creation of web elements like button and menu.

We will learn how to insert Actionscript code and test it functionality in Adobe Flash.

Open the Adobe Flash software and pick the Flash File (Actionscript 2.0) option. Navigate to Window->Actions. Open the Actions-Frame window and enter the Actionscript code.

How to create a dynamic button with Actionscript?

A dynamic button can be created directly through the Actionscript code:

var C:Array = [[0, 0], [70, 0], [70, 30], [0, 30], [0, 0]];

//sets an array named C with the coordinates of the button

this.createEmptyMovieClip("button",0);

//creates an empty movie clip dynamically; button is the instance name of the new movie clip and 0 is its depth

function drawbutton (buttoncolor)

//defines a function called drawbutton with one parameter buttoncolor

{

 button.beginFill(buttoncolor,100);

// begins a new drawing path, the first attribute is for the color and the second defines the fill, 100 means solid, the minimum is 0 and the maximum is 100

button.moveTo(C[0][0], C[0][1]);

//starting point of the button rectangle

for (i=1; i<C.length; i++) {
 button.lineTo(C[i][0], C[i][1]);
}

//draw the rectangle lines using a for loop

button.endFill();

//applies the fill to the object

}

drawbutton (0x000000);

//invokes the drawbutton() function, which draws a black colored rectangle, 0x000000 is the hexagonal number for the black color

button.onRollOver = function ()
{
drawbutton (0xff0033);
}

//calls the onRollOver method for the button, which invokes the drawbutton() function and draws a red colored rectangle over the black one, 0xff0033 is the hexagonal number for the red color

button.onRollOut = function ()
{
drawbutton (0x000000);
}

//calls the onRollOut method for the button, which invokes the drawbutton() function and draws again a black colored rectangle

button._x = (Stage.width/2)-button._width/2;
button._y = (Stage.height/2)-button._height/2;

// defines the button position based on x and y coordinates

button.onRelease = function() {
getURL("http://siteground.com", "_blank");
};

//calls the onRelease method for the button,when it is pressed and released, a new web browser window with the defined URL opens.

Once the code is entered you can test your script through the Adobe Flash software -> Control -> Test Movie.

 

How to create a dynamic menu with Actionscript?

In the last part of our Flash Actionscript tutorial we will show how to create a dynamic sliding menu using Actionscript 3.0.

First you should open a new Flash File (Actionscript 3.0).

Then you need to draw a rectangle, which will represent the menu background. Once you are ready, you should insert a new layer and name it buttons.

Add three text objects using the corresponding tool on the right panel. Label them. Covert the objects to symbols from Modify->Convert to Symbol or by pressing the F8 key. Name them and pick the Button option from the corresponding drop-down menu. In the Properties tab enter the following names: home_button, about_button, contacts_button.

Move them over the menu background

Insert a new layer and name it follow.

Pick the preferred color and using the PolyStar Tool draw a polygon. Select and convert it to a symbol. Put a name for it and set Movie Clip as its type. Put follower as the Instance name in the Properties tab.

Put the polygon besides the Home text object.

Insert one more layer and name it actions.

Click with the right mouse button on the first frame in the Timeline and open the Actions section. The same can be completed by pressing of the F9 key.

Enter the Actionscript 3.0 code.

Test the movie through Control->Test Movie or by clicking on the Ctrl+Enter keyboard combination.

Now you have a working Flash sliding menu.

The Actionscript 3.0 code, which should be entered is as follows:

import fl.transitions.Tween;
import fl.transitions.easing.*;
 
// Imports fl.transitions classes which allow the usage of ActionScript to create animation effects like the movement of the polygon

var buttonsArr:Array=new Array(home_button,about_button,contacts_button);

//defines the buttons array
 
function moveFollow(event:MouseEvent):void 
 
{
new Tween(follower,"y",Strong.easeOut,follower.y,event.currentTarget.y, 1,true); 
}

//The moveFollow function creates a new tween and goes to the corresponding menu item when the mouse points over the object.
 
for (var i:uint = 0; i < buttonsArr.length; i++) 
{ 
buttonsArr[i].addEventListener(MouseEvent.ROLL_OVER, moveFollow);
}

// A for loop which goes through all the buttons in the array and adds an event listener with a mouse roll event and the moveFollow function

function callLink(event:MouseEvent):void
{
  var url:String = "http://siteground.com";
  var request:URLRequest = new URLRequest(url);
  try {
    navigateToURL(request, '_blank');
  } catch (e:Error) {
    trace("Error occurred!");
  }
}

//The callLink function opens the defined URL in a new web browser window and checks whether there is a problem with the command execution.

buttonsArr[0].addEventListener(MouseEvent.CLICK, callLink);

//The first button of the array (home_button) listens for the mouse click event and calls the callLink function.

Check the following video tutorial for more details on how to create a dynamic sliding menu.