flash interactivity_more_effects

We have not yet used the function clickMenu subscribed to the MouseEvent.CLICK event on each button. By associating a link with each button we can open a browser window for each one.

To start with we will store each link; to do that we need to create a second specific array:

// the links
var links:Array = new Array ("http://www.oreilly.com",
"http://www.bytearray.org", "http://www.flickr.com",
"http://www.linkdup.com", "http://www.myspace.com");

Each button contains an associated link in it’s link property:

function createMenu ()
{
var lng:int = captions.length;
var myButton:Button;
var angle:int = 360 / lng;
for ( var i:int = 0; i< lng; i++ )
{
// creation instances of the button symbol
myButton = new Button();
// activation of the button behavior
myButton.buttonMode = true;
// deactivation of child objects
myButton.mouseChildren = false;
// modification of content
myButton.myCaption.text = captions[i];
// each button stores its associated link
myButton.link = links[i];
// arrangement of instances
myButton.tween = new Tween ( myButton, "rotation", Elastic.easeOut,
0, i * angle, 3, true );
// a Tween object is created for the rollover effects
myButton.tweenRollover = new Tween ( myButton.backgroundButton, "scaleX",
Elastic.easeOut, 1, 1, 2, true );
container.addChild ( myButton );
}
}

When the clickMenu function is triggered we open a new browser window:

function clickMenu ( pEvt:MouseEvent ):void
{
// opens a new browser window for the clicked link
navigateToURL ( new URLRequest ( pEvt.target.link ) );
}

We get the link of the clicked button, references by the target property of the event object. The navigateToURL function stored in the flash.net package allows us to open a new browser window and to get the specified link. In ActionScript 3, all HTTP links have to contained in a URLRequest object.

For more information concerning the external exchanges please see the chapter entitled External Communication.

It is worth noting that it is possible to create a link property as the MovieClip class is dynamic. The creation of such a property in a SimpleButton instance is impossible.

Our code could be improved by using an associated array, combining the two arrays currently used. We could regroup our two links and captions arrays in a single array:

// sections and links
var data:Array = new Array ();
// adding sections and associated links
data.push ( { section : "Homepage", link : "http://www.oreilly.com" } );
data.push ( { section : "Latest", link : "http://www.bytearray.org" }
);
data.push ( { section : "Photos", link : "http://www.flickr.com" } );
data.push ( { section : "Links", link : "http://www.linkdup.com" } );
data.push ( { section : "Contact", link : "http://www.myspace.com" } );

By using an associated array we can better organise our data and simplify access to it.

We modify the createMenu function in order to target the information in the associated array:

function createMenu ()
{
var lng:int = data.length;
var myButton:Button;
var angle:int = 360 / lng;
for ( var i:int = 0; i< lng; i++ )
{
// creation instances of the button symbol
myButton = new Button();
// activation of the button behavior
myButton.buttonMode = true;
// deactivation of child objects
myButton.mouseChildren = false;
// modification of content
myButton.myCaption.text = data[i].section;
// each button stores its associated link
myButton.link = data[i].link;
// arrangement of instances
myButton.tween = new Tween ( myButton, "rotation", Elastic.easeOut,
0, i * angle, 3, true );
// a Tween object is created for the rollover effects
myButton.tweenRollover = new Tween ( myButton.backgroundButton, "scaleX",
Elastic.easeOut, 1, 1, 2, true );
container.addChild ( myButton );
}
}

Our menu is now finished. We will now look at coordinates.

Worth remembering

• It is better to use the associated array rather than an indexed array. The organisation of the data access is then simpler and better optimized.