ActionScript - Part II

Creating a Link

Suppose you want to create a link to http://www.gmu.edu First create a button symbol and then place an instance of the button symbol on the Stage and name it gmu_btn. Then add the following ActionScript. The variable name goURL_req and the function name goURL are arbitrary.

var goURL_req:URLRequest = new URLRequest("http://www.gmu.edu");
function goURL(event:MouseEvent):void {navigateToURL(goURL_req, "_blank");}
gmu_btn.addEventListener(MouseEvent.CLICK, goURL);

Creating a Slide Show (Going to Next and Previous Frames in ActionScript)

One can create a slide show as follows:

1) Import pictures into Flash - name this layer suitably, e.g. pictures. You can use your own, or use those at www.billpegram.com/gmu10/davidgmu/classphotos/

If there are n pictures, one wants to import these n pictures into n frames, one picture per frame. When the pictures are imported, if the first one imported is part of a numbered sequence of pictures in the same folder, Flash will ask you whether you want to import all of them, and will import them in the order of their numbering within the file names.

2) Insert a layer and name it buttons and create a previous and next button and place an instance of these buttons into frame 1 of the button layer. Select a button instance and then in the Property Inspector name the instance appropriately, e.g. prev_btn.

3) Insert a layer and name it actions and add ActionScript in frame 1 of this layer.

Add an eventListener for the instance of the previous button which will execute a previous function. Similarly for the next button. The functions will utilize the following methods:.

prevFrame(); -- this moves the timeline back one frame and stops
nextFrame(); - this moves the timeline forward one frame and stops

Thus the code would be something like the following:

function forward(event:MouseEvent):void {nextFrame();}
next_btn.addEventListener(MouseEvent.CLICK, forward);

function backward(event:MouseEvent):void {prevFrame();}
prev_btn.addEventListener(MouseEvent.CLICK, backward);

Enhancing the Slide Show (Use of Conditionals and Going to a Specified Frame in ActionScript)

Using the above methods, if one is at the last frame, the nextFrame() will result in no change. If one wants instead to go to the first frame, one would instead change the body of the forward function to use a conditional statement:

if (currentFrame == totalFrames) gotoAndStop(1);
else nextFrame();

If one is at the first frame, and one clicks the back button, the prevFrame() will result in no change. If one wants instead to go to the last frame, one would instead change the body of the backward function to use a conditional statement:

if (currentFrame == 1) gotoAndStop(totalFrames);
else prevFrame();

Note that currentFrame and totalFrames are variables that refer to the number of the current frame and the total number of frames in the movie, respectively.

Creating "Multipage" Content with a Navigational Bar within a Flash Movie

Consider a simple multi-page website, i.e. with several html pages. Now we will create a Flash movie which has the content from these html pages We will put the content of each html page into a frame in the Flash movie and then create button symbols which when the instance is clicked, the movie will go to and stop at the frame which has the specified content.

1) Create a labels layer - To label a frame, make sure there is a keyframe in that frame and then click on the frame -- in the Properties panel, one can give the frame a name. In this exercise, each label should correspond to a page in the original site. Remember to create a blank keyframe in any frame that you want to name. For the label to be visible, there have to be enough frames for you to see the label; if not, press F5 to add frames until the entire label is visible.

2) Create a content layer - Put each "page" of content into the content layer in frames that correspond to the frames that are labelled. Again there will have to be keyframes in each frame containing content (use F7 to add a blank keyframe)

3) Create a buttons layer - Create a separate button symbol corresponding to each content frame and then place an instance of the button symbol in the button layer. Since the artwork on these buttons will differ, one must create separate symbols for each button, but it may be easier to duplicate an existing button and then modify the content. Name each button instance appropriately in the Property Inspector.

4) Create an actions layer - Add a stop(); command to stop the main timeline. Suppose the layers and frames are both named bkgd and aboutus. Then the code would be:

function buttonClick1(event:MouseEvent):void {gotoAndStop("bkgd"); }
function buttonClick2(event:MouseEvent):void {gotoAndStop("aboutus"); }

bkgd.addEventListener(MouseEvent.CLICK, buttonClick1);
aboutus.addEventListener(MouseEvent.CLICK, buttonClick2);

-----------------------------------------------------

Enhancing the Buttons for "Multipage" Content with a Navigational Bar within a Flash Movie

In the above example, the button corresponding to the "current page" still functions like a button. Often in website, one prefers to disable a link that goes to one's current location, so as to give the user a better sense of where they are. There are at least two ways to accomplish this in Flash:

1) ActionScript solution - Instead of the above code, one would add additional statements that would enable all buttons other than the current button and disable the current button. It is necessary to enable other buttons since they might have been disabled by a previous mouse click on that button.

function buttonClick1(event:MouseEvent):void {gotoAndStop("bkgd");
aboutus.enabled = true;
bkgd.enabled = false; }

function buttonClick2(event:MouseEvent):void {gotoAndStop("aboutus");
aboutus.enabled = false;
bkgd.enabled = true; }

bkgd.addEventListener(MouseEvent.CLICK, buttonClick1);
aboutus.addEventListener(MouseEvent.CLICK, buttonClick2);

2) Turning button symbols into graphic symbols

In the previous solution, one places an instance of each button in the initial frame and adds frames to the button layer so that these button instances are visible in the subsequent frames that hold the content for the other "pages" in the site.

Another approach requires one to place an instance of each button in the buttons layer for each frame that is labelled (in the frames layer). Select the button instance referring to the current frame and in the Properties Panel, change the button symbol to a graphic symbol. It will no longer function as a link.

Streamlining the ActionScript Where Multiple Buttons are Involved

In the initial solution, there is a separate function corresponding to each button. One can instead use a single function if one names the frames and button instances to match. When one clicks on the button, this triggers an event and this event has properties, one of which is target -- this property stores the name of the object that initiates the event (in this case, the name of the button instance)

function buttonClick(event:MouseEvent):void {
gotoAndStop(event.target.name);
aboutus.enabled = true;
bkgd.enabled = true;
event.target.enabled = false; }
}

bkgd.addEventListener(MouseEvent.CLICK, buttonClick);
aboutus.addEventListener(MouseEvent.CLICK, buttonClick);

-----------

Thus, because we are able to get the name of the button when we click it, we are able to write a single buttonClick function to go to the desired frame, enable all buttons, and then disable the button that initiated the event.

Revised: November 28, 2011. Comments to William Pegram, bill@billpegram.com