Advanced Search
Keywords

The BoxedArt Guide to Using Website Templates



How to Add or Change Links in a Flash Template using Adobe Flash

Launch Flash and go to File > Open from the top toolbar. Navigate to the "fla" folder in your template package and select the .fla file you want to open.

When the fla file opens in Flash, locate the button(s) that you wish to change. To do this, drag the Playhead (the small pink rectangle) at the top of the Timeline until you see the buttons on the stage. Select the button on the stage by clicking once on it with the black arrow tool from the Tools bar.

change link

Note: The Flash movies in these templates (not Full Flash sites) are using a .txt file to display words on the buttons, you will not actually see the text in the .fla screen, as shown above. The text areas are defined by dotted borders. Also, in most cases, the actual button (the clickable area in your Flash movie) is not the text box, but an invisible button - denoted in the picture above by the light blue rectangle. Invisible buttons appear this color in the .fla screen, but are not visible at all in the .swf movie displayed in your web pages.

properties


Tip: Make sure the symbol's Layer is not locked.

If a Layer is locked, click once on its padlock icon to unlock it.

A thin blue border appears around the object when it is selected, and Properties panel will display what type of symbol it is:

changelink

If the Properties panel appears as pictured above, then you are ready to edit the button. If, however, the Properties Panel displays something other than the word Button, such as Movie Clip, then you must go further inside the symbol to edit the button.

To do so, double-click on the object on the stage with the black arrow tool. Flash will display the Movie Clip's timeline instead of the main timeline. Click once on the object on the screen with the black arrow tool to select it - if the Properties panel still displays Movie Clip as the symbol type, double-click on it on the stage again - some symbols are Movie Clips within Movie Clips and you need to keep double-clicking to get to the correct timeline.

Once you have reached the timeline with the actual Button symbol you will have a screen similar to this:

change link

In the sample above the Layer holding the button (the clickable area) is named 'invis' for invisible button. Unlock the Layer if necessary. Click once on one of the light blue rectangles on the stage and the Properties panel should read Button as the selected symbol's type.

You may now assign a new link to your button using Actionscript:

With the Button still selected, open the Actions panel if it isn't already open (the F9 key on your keyboard, or from the top menu, Window>Actions.)

Make sure the Actions panel says Actions - Button at the top. The scripting for the button may have a single script, on(release) { getURL... , or it may read similar to this below (includes any roll-over effects that have also been assigned to this button):

on (release) {
getURL(/:url1);

}
on (rollOver) {
gotoAndPlay(2);

}
on (rollOut) {
gotoAndPlay("sec");

}

The getURL script is what you will modify for your link. The remaining code should most likely be left alone, in order to keep roll-over effects intact.

In the Action panel's scripting select the getURL line of code and replace the /:url1 with a URL of your own. Your modified link scripting could read like this:

on (release) {
getURL("http://yoursite.com/yourpage.html");
}

Important: Be sure the entire URL is enclosed in quotation marks " " as well as parentheses ( ) or your link will not function.

MORE LINKING OPTIONS

The getURL function accepts more than a link's URL. You may also specify Window type and Variables send method.

changelink

With Window: you may direct where the new URL will be opened. If the field is left empty (as pictured above) the new URL will open in the same browser window, replacing what came before.

You can click on the blue dropdown arrow, toward the right, to get further options. If you want your new URL to open in a new, second browser window, use _blank . Your button's script will read:

getURL("http://yoursite.com/yourpage.html", "_blank");

If you would like a button in your Flash movie to open a pop-up browser window you can assign the following ActionScript to the button:

on (release) {
getURL("javascript:window.open('page2.html','','menubar=no,resizable=no,toolbar=no,directories=no,
location=no,scrollbars=no,width=500,height=400,left = 200,top = 20'); void(0);");
}

(Note: for spacing reasons the above script is in multiple lines - when you type or paste it into Flash's Actions panel, all text between the { and } must be one uninterrupted line or it will not function correctly.)

You may customize the .html page name and the width and height in the above script; the centering of the pop-up window can be adjusted as well - just enter different numbers in the script where it says left = 200,top = 20 until you get the position you want.

If your website uses html frames, you may want your Flash .swf movie in one frame and new URLs to open in a different frame. To do this, in the Window field, type in the frame name you assigned in the html of your frameset. For example if you named the destination frame "mainFrame" in your html frameset, type mainFrame into Flash's Window field. Your script would look like this:

getURL("http://yoursite.com/yourpage.html", "mainFrame");

Variables send method can be used if you are parsing variables through a string. Available options are GET and POST. For example if you wish to call a products page to open in the same browser window, with "item" as variable and "2" as value, using the GET method, your script would read similar to this:

on (release) {

getURL("http://yoursite.com/products.php?item=2", "_self", "GET");

}

For more information on how to set up Flash actionscripts to process data commonly found in html forms check out the Actionscipt.org website. A good example is Converting Basic HTML Forms to Flash

If you are modifying links in a Flash intro template, there will most likely be a link at the end to automatically take your viewers to your website after the Flash intro movie has finished playing. This type of link is not a Button action, it is a Frame action - meaning that no clicking-on-a-button is needed; with frame actions, the script performs its action automatically when the movie reaches that frame.

Frame actions are denoted in the Timeline with a small 'a'.

timeline

To change the scripting for this frame action, click once on the keyframe where the 'a' is to select it. Press the F9 key on your keyboard to open the Actions panel. Make sure the Actions panel says Actions - Frame at the top.

The scripting for this frame action may read similar to this:

stop();
stopAllSounds();
getURL(/:finurl);

Just as with a Button link, you can modify a frame's getURL script to go to your own website's page, so it reads:

getURL("http://yoursite.com/yourpage.html");

You may also change the font, color or size of the text for your buttons, even though the actual words that will display in your .swf movie are coming from an external .txt file.

change link

In the picture above, the text is in the layer beneath the "invis" button and a locked layer, named "txt"
Unlock this "txt" layer, and lock the "invis" layer that's above it.
Then, click once on the dotted text box on the stage to select it. The Properties panel will change to display the options for changing the font, color and size of the text that will display in your .swf movie (even though it remains invisible in the .fla screen.)

To change or add links in a Full Flash site (one that does not use an external .txt file), the process is very much the same as described above - except that you will see any actual text on the screen, not just a dotted text box. You will still need to go inside Movie Clip symbols to reach the Button symbols in many cases, but once the Properties panel indicates that you are selecting a Button symbol, then you may open the Actions panel and add or change the Actionscript the same way as described above.

See also:
How to Change the Text in a Flash Template Using Adobe Flash
How to Change Text and Links in a Flash Template Using the .txt File


Back to Design Tutorial