Flash includes a function getURL that will link to any http address. This can be linked to a button, as shown below. The buttons do not need to be rectangular so it is possible to embed them in almost any configuration on a web page. The following example is quite simple.
Create the star graphics one at a time, add the text, group the elements in each one and press F8 to make them into buttons. Add the names of the buttons to the Instance name box in the properties panel.
Add a new layer for the script and then add this code to frame 1 of the Timeline:
star_btn.onPress = function() {
getURL("http://www.amazon.co.uk");
}
google_btn.onPress = function() {
getURL("http://www.google.co.uk");
}
bbc_btn.onRelease = function() {
getURL("http://www.bbc.co.uk, _blank");
}
This code turns the 'buttons' into hyperlinks when they are pressed.
The last of the three buttons has been given the 'onRelease' event rather than 'onPress' and it has also been given a new blank window rather than opening in the same window as the current page.
If you add the code to the buttons themselves you can write this:
on (Press) {
getURL("http://www.amazon.co.uk");
}
Rather than writing the code from memory Flash provides a 'Behaviours' design panel that develops the code for you. Choose Window/Development Panels/Behaviors to open this now.
To create the script for a button delete the code for one of the three buttons in your example (or create a new one from scratch and add a new button).
In the Behaviors panel click the Add button (plus symbol) and choose Web/Go to Web Page. This opens the following dialogue box:
You can add any valid address to the URL line and choose from four destinations for the page to open (choose '_blank'). Click OK and the code will be generated as follows:
The Behavior attaches ActionScript code to the button like this:
on (release) {
//Goto Webpage Behavior
getURL("http://www.amazon.co.uk","_self");
//End Behavior
}
A button could be transparent and so invisible but still there when the mouse rolls over it. This can be used to construct web pages that are the equivalent of the older-style image map but more reactive and easier to construct.
Further sophistication can be added to buttons by using their four states - Up, Over, Down and Hit.
Double click any button on the stage in Flash to open it for editing. The Timeline changes to the format for a button, showing the four states:
The properties of a button can be changed for each of the four states.
Press F6 to add a keyframe to the Over state. Click on the Over keyframe and change the button's properties so that they respond to the movement of the mouse over the button. To change the colour of a star select it and choose Modify/Ungroup. Select the background and change its colour. Select the components of the button again and press Ctrl-G to group them again. Save and Publish the movie and it will now show a response to a mouseover event (in this example the BBC button changes colour).
You could change the colour for the Down state, or add any other effect that you choose, such as changing the font properties.
The Hit state is rather different to the other three because its properties are not made visible when the button is used. The Hit state is used to define the area of the button that is available when the button is active. This is significant where a button consists only of text because only the font strokes are part of the button, the gaps between them are not.
Create a new Flash document and add a piece of text to serve as a button. Convert the text to a symbol of type Button.
Double click the text to edit it and set the properties of the Up, Over and Down states as before.
Notice that the button is detected by the mouse in an erratic way, flickering between the Over and unrecognised states between the letters.
Select the text as usual and double-click it for editing if you have not already done so. Press F6 to add a keyframe to the Hit state. Draw a rectangle of any colour over the area of the text.
It looks like you might have obliterated your button but content from the Hit state does not appear when the button movie is used. Instead the Hit state of the text button is expanded to include all of the area defined by the rectangle so there are no longer any gaps between the letters.
The aim in this project is to create a sequence of buttons with identical properties but which can be used to trigger different events such as lining to different web pages. The principle is to create a button of a particular design, copy a number of these to the stage and minimise the amount of customisation.
Start a new Flash document, set the Height to 200 pixels and draw a rectangle in the upper left corner.
Convert the rectangle to a symbol of type Button and edit the Over and Down states to what you require.
Add one or two extra copies of the button by dragging them from the Library (or select the button in the Library and use Alt-drag).
Align the buttons manually and visually or use the Align panel (Ctrl/K).
Add custom features such as text and behaviour. Select each button in turn and add a behaviour from the panel, as described previously.
Each button in your sequence will have different text, which you add as new instances of the button are placed on the stage.
The Timeline may be used with buttons to create different content depending on which button is pressed.
Start a new Flash document and add some buttons as before.
Add a new layer and call it 'screens'. Add another layer, call it 'scripts' and make sure it is at the top of the layer stack.
Select frame 40 in all 4 layers and press F5 to add frames.
Click on frame 1 in the screens layer and enter the word 'home' in the Frame name box in the Properties panel.
Click on the list under the name and choose Anchor.
Click on frame 10 in the screens layer, press F6 to add a keyframe and enter another name for this section of the Timeline. Make this an anchor too.
Repeat the last section for as many sections as you have buttons.
Click on each of the keyframes in the screens layer and add content that you want to activate at that point.
In the Actions layer click on frame 1 and add this code:
stop();
Now click on each button in turn and add script to direct the playhead of the Timeline to the appropriate point in the movie.
amazon.onRelease=function(){
gotoAndStop("amazon");
getURL("http://www.amazon.co.uk");
}
google.onRelease=function(){
gotoAndStop("google");
}
bbc.onRelease=function(){
gotoAndStop("bbc");
}
Only the Amazon button here has been given a URL to show this is an optional feature of this design.
Instead of hand-coding the buttons they could be programmed through the Behaviors panel.
TO do this delete the code for one or more of the buttons and open the Behaviors panel. Click the Add button and choose Movie Clip/Goto and Stop at Frame or Label.
Accept the settings apart from the frame number/label box where you can enter one of the labels you set up earlier in the Timeline. THis produces the script:
on (release) {
//Movieclip GotoAndStop Behavior
this.gotoAndStop("google");
//End Behavior
}
You could add a getURL function to complete this behaviour yourself.
There are many ways to animate buttons, here is just one.
Start a new Flash file and create a series of text areas where you want buttons to operate.
Create a row of text items that you want to serve as buttons. Add vertical separators. Turn on the screen rulers and drag lines to the vertical separators and a horizontal line under the text.
Add a new layer, call it buttons and drag it to the bottom of the layer stack.
Press Ctrl-F8 to create a new symbol, call it btn_rollover1 and choose Movie Clip as the type.
Draw a light grey rectangle with no stroke. Position the rectangle at (0,0) and set the size to match the area covered by the first word. In this case it was (70,20); to measure the size of the button click on Scene 1 in the title bar and measure the size of the area with the rulers.
Click on frame 5 for the movie clip and press F6 to add a keyframe. At frame 1 select the rectangle and set its height to 1 and its position to (0,10).
Add a Shape tween to frames 1-5 of btn_rollover1.
Add a new layer to the timeline, name it actions, press F9 and enter 'stop()';.
Play the movie clip - the button expands. We now want to trigger this behaviour in response to a mouse rollover.
Still in edit mode for the btn_rollover press Ctrl/F8 again to create a new symbol. Call this 'btn' and set it to type Button.
Click in the Over frame for the button and press F6 to add a keyframe.
For the Over state drag the btn_rollover movie clip to the stage and position it at (0,0).
Return to scene 1 by clicking in the title bar. Drag an instance of btn to the stage and position it over the first word. Scale the btn to fit the width of the word (its height is 1, corresponding to frame 1 of the movie clip). Place the button in the vertical middle of the word (if the height of the word is 20 this will be 10, etc.)
Double click the button to edit it and enter a keyframe in its Hit state. Draw a grey rectangle to cover the first word.
When the mouse rolls over the button the 'hit' area is triggered because the 'up' state is empty.
Drag more buttons onto the stage and position and size them to cover the other words.
The buttons were given instance names and linked to sites with code:
btn1.onRelease = function(){
getURL("http://www.picasso.com");
}
btn2.onRelease = function(){
getURL("http://www.artcyclopedia.com/artists/mondrian_piet.html")
}
btn3.onRelease = function(){
getURL("http://www.artcyclopedia.com/artists/miro_joan.html");
}
btn4.onRelease = function(){
getURL("http://www.mystudios.com/gallery/modigliani/gallery_wall.html");
}