This site is now just an archive over the rise and fall of Flash. The domain flashmagazine.com is available for sale
Login | Register

Breadcrumbs: Linking to Flash Frames

In this week's breadcrumbs, you'll learn how to use HTML anchor tags to call ActionScript functions. To complete this tutorial, basic knowledge of Flash MX and ActionScripting is recommended.

This week, I will showcase a powerful Flash feature: Calling ActionScript functions with HTML anchor tags. This feature allows blocks of text formatted in HTML to not only format text but to impact the flow of a Flash application. This article will explain the ends and outs of using this feature and develop a quick Flash application that uses it to build a glossary.



In the example, specific terms such as "Pascal" are hotspots. When a web user selects one of these terms the Flash application dynamically displays the terms definition. This is an excellent solution for providing embedded non-linear information about complex products.

Using asfunction

NOTE: The asfunction is available in both flash 5 and Flash MX.

Macromedia allows developers to pass one parameter to a function using the href attribute of the HTML anchor tag. Any additional parameters will be used as additional calls to the function.

<a href="asfunction:functionName,parameter">Link name</a>



The above HTML snippet is an example of the asfunction. This same logic can be applied to built in Flash methods such as gotoAndStop. The following snippet shows code that calls a method:

<a href="asfunction:gotoAndStop,5">Move to Frame 5</a>



When the above link is clicked Flash will move to frame 5. Substituting 5 with another parameter with move to a different frame.

<a href="asfunction:printNumFunction,5,10,15,20">Output parameters</a>

Example Output:
Parameter is 5<
Parameter is 10
Parameter is 15
Parameter is 20



As mentioned earlier, the asfunction only allows one parameter to be passed to a function so adding additional parameters would cause multiple calls to this function. The above example shows the printNumFunction will pass only one parameter until all four have been passed.

Building the Glossary Application
To develop the Flash glossary application open Flash MX and create a new Flash file. NOTE: The glossary example is built in Flash MX but asfunction works with both Flash MX and Flash 5.

The first step is to develop a block of sample text to embed our dictionary words. This copy can be applied to our text box object in many ways but in this example use the text box variable name to send the copy to the text box instance. That said create a text box object in the 1st frame named txtEducation. Make the width 136 and the height 40. Make sure you set the textbox's properties to multi-lined and give it the ability to display HTML.

txtEducation.htmlText = "Most of the first programming languages, such as Fortran, Pascal, or C, are considered procedural languages.";



Now we can add a line of ActionScript in the 1st frame of our Flash application to initiate the html text. To allow use of basic HTML tags you must use the htmlText property instead of the text property.

Next build a text block to display definitions and additional information on our selected text named txtDefinition. Make sure you set the textbox's properties to multi-lined and give it the ability to display HTML. To programmatically update our txtDefinition text box create a function for our asfunction feature to call. This function will update the contents of our txtDefinition text box based on the specific criteria passed to the function. Place this ActionScript in the 1st frame of the Flash document.

function showDefinition(term) {
	switch (term.toLowerCase()) {
		case "fortran" :
			txtDefinition.htmlText = "Fortran - The earliest high-level computer programming language.";
			break;
		case "pascal" :
			txtDefinition.htmlText = "Pascal - A high-level general-purpose computer language designed to encourage structured programming.";
			break;
		case "c" :
			txtDefinition.htmlText = "C - A high-level computer programming language.";
			break;
		default :
			txtDefinition.htmlText = "Invalid term selected.";
			break;
	}
}



The above function uses a switch case statement to display the proper definition text. The default statement in the switch is called if a matching case is not found. The above code also converts the term string to lower case. This insures a match regardless of how and where the term is written.

To finish the glossary application implement the asfunction feature within our educational copy. To do this open the ActionScript window on frame 1 and adjust the copy to include anchor tags that point to our showDefintiion function.

txtEducation.htmlText = "Most of the first programming languages, such as <a href='asfunction:showDefinition,fortran'>Fortran</a>, <a href='asfunction:showDefinition,Pascal'>Pascal</a>, or <a href='asfunction:showDefinition,c'>C</a>, are considered procedural languages.";



Save your file and test it. If you have problems running the application I suggest you download the example Flash application and comparing your Action Script.

The source to the example Flash file can be downloaded at http://www.jasonmperry.com/downloads/LinkFlashFrames.zip.

Conclusion
As Macromedia continues to grow, its Flash product family the list of possibilities grows tremendously. For the 1st time an application exists that can combine video, text, animation, graphics, chat, and several sophisticated systems into one streaming or portable application. This feature only ups the ante.

The source to the example Flash file can be downloaded at www.jasonmperry.com/downloads/LinkFlashFrames.zip.

Jason Michael Perry is writer of the bi-weekly column breadcrumbs. View more of Jason's articles and the Breadcrumbs archive at his personal web site www.jasonmperry.com. You can also contact Jason about Macromedia training or with any questions at Jason@jasonmperry.com.

 

About Jason Michael Perry

Jason Michael Perry is a freelance instructor, developer, and writer. Please check out his new book Breadcrumbs: ActionScript 3 by Smart Ameba Publishing. If you have questions, a topic you would like covered, or more feel free to email him at jason@smartameba.com.

Get new stories first

Click to follow us on Twitter!

 

Comments

No comments for this page.

Submit a comment

Only registered members can comment. Click here to login or here to register