Hotspots Trigger Flash Buttons Tutorial

Jun 21, 2004

Please note that this movie is broken if you have Quicktime 7.3 or later installed.

In this third and final tutorial in the series on integrating Quicktime and Flash, you will discover how hotpots in a Quicktime panorama can be used to trigger events in the Flash layer. The hotspots in the above panorama trigger the appearance of textboxes containing information about the associated feature in the scene. This is made possible by the use of a Quicktime wiring call which can activate the events of buttons contained in the Flash track - 'FlashTrackDoButtonActions'. You can use the button in Flash to control navigation in the Flash track - display an animation, play a sound, execute an actionscript.

This tutorial will describe the parameters required to use the FlashTrackDoButtonActions command and how to determine the correct values for those parameters. One of these parameters is the ButtonID of eack Flash button. Within the Flash authoring application itself there is no mechanism by which the value of a ButtonID can be retrieved, set or altered. This is because the ID numbers are generated on the fly when the swf file is compiled. Therefore to determine what the ID numbers are you need one of two things. One is a software application which is capable of reading these values from the swf file. Although I am using VRHotwires to accomplish the wiring in this tutorial, I am quick to point out that another Quicktime wiring application, LiveStage Pro, does have this capability, no doubt making the technique somewhat simpler than that presented here. If using VRHotwires, the IDs must first be retrieved using some sort of decompiler to unpack the swf files' information. I have used 'flasm', which is more of a disassembler - it runs in the terminal window under OS X but is very simple for these purposes. There is not a great shortage of these kinds of things, however, so how you do it is up to you. All that matters is getting those ButtonIDs.

Step 1: The Flash Track

In previous tutorials the wiring has been placed first, but since we don't yet know the Flash ButtonIDs, there is not much point. In the Flash track, the main timeline contains a movie clip which holds our three buttons. If you look at the buttons themselves, all the frames are empty except for the hit area frame, which means they are invisible. The buttons are not meant to be seen - we don't need to see them because they are going to triggered from Quicktime, not from a mouse event on the button itself.

An invisible Flash button - the equivalent of a panorama hotspot

Here is an example of the actionscript used on the buttons (and remember, this is all Flash 4 (when this was made Quicktime only supported Flash 4, but when Quicktime 6 was released that was no longer the case));


on (press) {
gotoAndPlay (5);
setProperty ("/button_mc/carpentariahs", _x, qtloch);
setProperty ("/button_mc/carpentariahs", _y, qtlocv);
}
on (release) {
gotoAndStop (1);
}


This tells the required animation to play and positions it where we want it on the screen. You could just as easily have a stationary mc whichs displays different information, highlight a feature on a map, or play a sound effect or voice over.

Step 2: FlashTrackDoButtonActions Parameters

Here is an example of FlashTrackDoButtonActions;


FlashTrackDoButtonActions "button_mc/lighthousehs" 3 2 TrackType=Flash


The first parameter is the path to the timeline in Flash where the button resides. Fairly simple so far.

After the path is a number and this refers to the Flash button ID number. To find this out I opened my terminal window and moved to the directory containing flasm. By entering the command ./flasm -d pathtoswf the terminal window fills with lines of text. Here is a sample;


defineButton 3
on overUpToOverDown
gotoFrame 4
push '/button_mc/lighthousehs'
push X_PROPERTY
push 'qtloch'
getVariable
setProperty
push '/button_mc/lighthousehs'
push Y_PROPERTY
push 'qtlocv'
getVariable
setProperty
end
on overDownToOverUp
gotoFrame 0
end
end // of defineButton 3


This code is , incidentally, exactly the same as the actionscript on the previous page, except now it is swf format code, not actionscript. But by looking at it we can see that it is a button definition for a button which refers to an mc at '/button_mc/lighthousehs', so now we know that when the lighthouse hotspot is clicked or moused over, we want to trigger button #3.

The second number is the code for the mouse event which is going to activate the trigger. That is, a mouse press on the hotspot or click for example. This table contains all the codes for the various mouse events.

The above example uses the value 2, which means we are executing a mouse press on the Flash button. The mouse events are refered to explicitly in this way because the button needs to accomodate different actions for different states. So make sure, if you are having difficulties, that you apply the correct actions to the buttons. Refering to the 'press' action means that if a call is made with the value for a rollover, nothing will happen. This bears no relation at all to the event occuring on the hotspot - which in our example is actually a rollover.

Now that we have the parameters we need, it's time to wire the movie.


Step 3: Wiring

Here is the wiring for our lighthouse hotspot;


On MouseEnter Hotspot 130
FlashTrackDoButtonActions "button_mc/lighthousehs" 3 2 TrackType=Flash
FlashTrackSetFlashVariable "button_mc/lighthousehs" "qtloch" theMouseLocalHLoc false TrackType=Flash
FlashTrackSetFlashVariable "button_mc/lighthousehs" "qtlocv" theMouseLocalVLoc false TrackType=Flash
end
On MouseExit Hotspot 130
FlashTrackDoButtonActions "button_mc/lighthousehs" 3 3 TrackType=Flash
end


Simple enough - when the mouse enters the hotspot, the press action of the related button is activated. On mouse out, the release action fires which removes the mc from the screen.

Once the movie is wired, import it into Flash and export the final panorama with the Flash embedded. You can also import the swf file into Quicktime and embed it manually if preferred. If you're using Quicktime 6, be sure to disable Flash mouse capture. With Flash mouse capture enabled, all mouse events in the movie are passed straight to the Flash track, rendering any hotspots inactive. To disable mouse capture, open your movie in Quicktime Pro and select 'Get Movie Properties' from the Movie menu. Select the Flash track in the drop down menu on the left of the Properties box. Then select Properties on the right. Uncheck 'Mouse Capture Enabled'.

Comment On This Post

Comments are moderated by the site admin. It's nothing personal - just trying to keep out the spam. Any reasonably relevant comment will probably be published.