flashpanoramas.com blog

Hotspots example review

I received a lot of questions about Hotspot plugin usage. Believe this tutorial will help to understand main principles and provides good templates to use in your own applications. I’m going to repeat the creation of this example: http://flashpanoramas.com/player/test/hotspots_window.html step by step.

All files I used in the example:

There are two panorama sets: wood.swf and snow.swf with images.
ie7.png, ff.png, opera.png, flash.png, logo2.png, wood.png, snow.png are pictures for hotspots. PNG format is preferable, because it supports full-range transparency channel.
but.swf is a simple Flash button from the Flash standard buttons library with a source file (but.fla).
fullbut.swf is a button to switch panorama fullscreen (with source fullbut.fla). If you do not work with Flash, change these items to any pictures.
controller.swf is an example of control application (optional).
wood.xml is an XML file with additional parameters for panorama (I need only one param file so both wood.swf and snow.swf will use the same imaging parameters).
hot_spots.swf and fps2.swf are panorama plugins (stored in plugins folder of your Flash Panorama Player package). hot_spots.swf is exactly Hotspots plugin. fps2.swf is simple tool to create frame-per-second counter and memory usage indicator.
spots.xml is a file with hotspots description.

The code for wood.xml file (use your own panorama name, for example, if you have myPano.swf, create myPano.xml param file):

<?xml version = '1.0'?>
<params>
	<param name="segments" value="10" />
	<param name="layer_2" value="hot_spots.swf" />
</params>

segments=10 to set segmentation quality to minimum (I need maximum speed of rotation here) and layer_2=hot_spots.swf to load Hotspot plugin (layer number is of no importance, use any unique number).

Let’s create now the first hotspot. Open or create file spots.xml and write:

<?xml version = '1.0'?>
<hotspots>

	<spot id="1" pan="0" tilt="0" url="ie7.png" scaleable="1" smoothing="1" 

	onClick="openUrl:http://www.microsoft.com/windows/ie/"

	/>

</hotspots>

id=”1″ gives identifier to the spot, it is necessary to work with mouse events like onClick. pan=”0″ and tilt=”0″ place the hotspot to the center of the front side. url=”ie7.png” is a path to the image (you can use any relative or absolute paths). scaleable=”1″ makes the hotspot to change it’s size on panorama zoom to be always comparable with objects on the panorama (try to change panorama zoom and browser window size to understand how scaleable=”1″ works). smoothing=”1″ turns on the antialiasing for the hotspots (working together with scaleable=”1″ to provide better quality for the hotspot image). And finally onClick=”openUrl:http://www.microsoft.com/windows/ie/” creates onClick event to open the new URL for this hotspot.

If you can repeat this and your panorama works ok and you can see the hotspot (run wood.swf or your own panorama file to test), you can continue to create hotspots on your own. The full list of commands and properties for the current version of the Hotspot plugin is here: http://flashpanoramas.com/player/hotspotsXML.

To make sure I’ll comment all other lines of spots.xml file.

To create the next hotspot, add new tag after previous but before like this:

<?xml version = '1.0'?>
<hotspots>

	<spot id="1" pan="0" tilt="0" url="ie7.png" scaleable="1" smoothing="1" 

	onClick="openUrl:http://www.microsoft.com/windows/ie/"

	/>

	<spot id="2" pan="30" tilt="-20" url="ff.png" 

	onClick="openUrl:http://www.mozilla.org/download.html"

	/>

</hotspots>

This time I didn’t use scaleable property. This means ff.png will always have 100% size irrespective of panorama zoom and panorama window size. This is useful sometimes, but if you have a lot of hotspots close by, this can create a mess for the little zoom factor. Don’t forget to set unique id and new position (pan and tilt) for each hotspot.

To improve it a little I applied some roll over effect:

	<spot id="2" pan="30" tilt="-20" url="ff.png" smoothing="1"

	onOver="
		change:-,blendMode, hardlight;
		change:-,scaleX, 1.1;
		change:-,scaleY, 1.1;
	"
	onOut="
		change:-,blendMode,normal;
		change:-,scaleX,1;
		change:-,scaleY,1;
	"

	onClick="openUrl:http://www.mozilla.org/download.html"

	/>

Property onOver defines the roll over event (when user rolls the mouse over the hotspot), it increases the image by 10% and changes the blending mode to hardlight (you can observe the obtained effect in the example), rollOut restores the hotspot state to the initial condition. More info about change command, about blendMode, scaleX and scaleY you can read in the same document: http://flashpanoramas.com/player/hotspotsXML#change.

Third hotspot and third browser icon:

	<spot id="3" pan="60" tilt="0" url="opera.png" smoothing="1" rotation="-20"

	onOver="
		change:3,rotation,160, 1500, elastic;
	"
	onOut="
		change:3,rotation,-20,1000, elastic;
	"
	onClick="openUrl:http://www.opera.com/download/"
	
	 />

This uses rotation effect with elastic type of motion. You can experiment with propertiy combinations, motion effects, duration and initial position to produce different and attractive effects. I give you a trick here: change onOver property for this hotspot to change:3,rotation, 1000000, 3000000, regular;. This makes the opera icon to revolve next 3000 seconds uniformly with steady speed. Remove onOut to be sure the rotation will not stop after you remove the mouse cursor. This is a way to produce enduring effects.

Next one:

	<spot id="4" pan="50" tilt="-50" url="flash.png" smoothing="1" depth="-1"

	onClick="
		change:1,pan,  40, 1500, elastic;
		change:1,tilt,-40, 1500, elastic;
		change:2,pan,  50, 1500, elastic;
		change:2,tilt,-35, 1500, elastic;
		change:3,pan,  60, 1500, elastic;
		change:3,tilt,-40, 1500, elastic;
	"
	
	 />

This is an example how to control the position of other hotspots using events. If id parameters of other hotspots are known, we can control their properties including position on the panorama. Just use change:[id] instead of change:-. Click on the Flash icon in the example to observe the effect. Note, I used depth=”-1″ to place the Flash icon below browsers icons, the default Flash icon depth corresponds to the position in the XML file, i.e. just above the Opera icon.

Two more buttons:

	<spot id="5" pan="90" tilt="-15" url="but.swf" rotation="220" 

	onClick="
		change:0,pan,15,1000;
		change:0,tilt,50,800;
		change:0,zoom,3,2000;
	"

	/>

	<spot id="6" pan="15" tilt="50" url="but.swf" rotation="40"

	onClick="
		change:0,pan,150,1500;
		change:0,tilt,-70,1500;
		change:0,zoom,0.8,600;
	"

	 />

No problem to control the panorama position as well, use change:0 to get access to the panorama properties. First button rotates the panorama on click event in the position opposite to the second button (shows the second button as a result). It changes not only the panorama pan and the panorama tilt but it affects the panorama zoom factor too. Different time of effect for each property (1000 milliseconds for pan change, 800 for tilt and 2000 for zoom) makes motion nonlinear and even more interesting.

By the way, there is one particularity about working with swf movies as a basis of hotspots: correctly working buttons should be compiled for Actionscript 3 only. Buttons for AS1-AS2 takes all mouse actions, and the panorama events like onOver and onClick don’t work (because there is no direct communication between AS3 and AS1-AS2). Nevertheless you can create some vector shape in Flash (just do not create buttons inside), compile it with any version of Flash and use it as a single button state, use another Flash movie or Hotspot plugin effects to create roll over effect. Or use Adobe Flash CS3.

It’s time to create transition effect between two panoramas:

	<spot id="8" pan="150" tilt="-70" url="snow.png" smoothing="1" scaleable="1" 

	onClick="
		loadPano:snow.swf,-;
		change:8,alpha,0.5;
		change:8,buttonMode,0;
		change:9,alpha,1;
		change:9,buttonMode,1;
	"
	
	 />

	<spot id="9" pan="210" tilt="-70" url="wood.png" smoothing="1" scaleable="1" 
	buttonMode="0" onLoad="change:-,alpha,0.5"

	onClick="
		loadPano:wood.swf,-;
		change:9,alpha,0.5;
		change:9,buttonMode,0;
		change:8,alpha,1;
		change:8,buttonMode,1;
	"
	
	 />

I placed two panorama icons to the nadir (tilt=-70), pressing snow icon loads snow.swf panorama (loadPano:snow.swf,-), pressing the wood icon loads the wood.swf back (loadPano:wood.swf,-). Switching the panorama changes the availability of the buttons (change:8,alpha,0.5; change:8,buttonMode,0;) to disable the icon with currently loaded panorama.
This version of Hotspots plugin provides 3 transition effects: fade (default), stripes and coverDown. Use loadPano:snow.swf,-,stripes;, for example, to check another one.
The hyphen in loadPano command (loadPano:wood.swf,-;) tell plugin to disable the loading of the param XML file. Using loadPano:wood.swf; instead of loadPano:wood.swf,-; may cause repeated loading of all plugins described in wood.xml file, use it carefully.

One more remark about loadPano. This command provides functionality to load new panorama images, but you are unable to control current set of hotspots, you can’t load/unload hotspots and plugins on the fly in this version of the Hotspots plugin. Yes, it’s possible to add additional commands to hide hotspots for the previous panorama (using visible parameter) and show hotspots for the next panorama:

	onClick="
		loadPano:wood.swf,-;
		change:snow1,visible,0;
		change:snow2,visible,0;
		change:snow3,visible,0;
		change:snow4,visible,0;
		change:snow5,visible,0;
		change:snow6,visible,0;
		change:wood1,visible,1;
		change:wood2,visible,1;
	"

But if you have several tens of hotspots this can be a trouble to debug it… Therefore if you have a virtual tour with dozens of hotspots or you want to have a different set of plugins for different panoramas, the best solution is to use openUrl instead of loadPano command:

openUrl: snow_panorama.html, _self;

openUrl reloads the browser page and prevents from using cool transition effects, but it allows to construct and test every page in your tour separately. Another benefit of openUrl command is correct work with browser’s history: you can use buttons front/back for navigation through you tour.

Control application:

<spot id="20" pan="160" tilt="0" url="controller.swf" align="CT" buttonMode="0" />

If you are Flash developer download the source of this application (all comments are within). Just ignore it if you are not.

YouTube video insertion:

<spot id="21" pan="220" tilt="0" scaleX="0.5" scaleY="0.5" 
url="http://www.youtube.com/v/mLeOiDF99Yo" />

I found an interesting bug here, you can’t use multiple instances of YouTube video in the panorama, it breaks the appearance of the YouTube player. Looks like they didn’t reckon to use their player inside the Flash Panorama Player environment.

I believe they will fix it later…

Google video insertion:

<spot id="22" pan="290" tilt="0" scaleX="0.5" scaleY="0.5" url="http://video.google.com/googleplayer.swf?docid=-1182786924290841590"  />

There is another unexpected behaviour: Google video player has it’s own resize controller, so if you are changing the panorama window size, the Google player change the player windows size simultaneously.

You can try to load any another Flash applications and whole Flash site into the panorama. There is a big probability they will work ok without any changes.

Another type of hotspots:

	<spot id="30" static="1" staticAlign="RT" align="RT" staticX="-4" staticY="4" 
	scaleX="0.1" scaleY="0.1" url="fullbutt.swf" onLoad="change:-,alpha,0.6,1000"

	onOver="
		change:-,alpha,1,700;
	"
	onOut="
		change:-,alpha,0.6,1400;
	"

	onClick="fullscreen:http://flashpanoramas.com/player/test/hotspots_window.html"

	/>

Hotspots with parameter static=”1″ are not placed to the panorama surface, they attached to the panorama window frame. There is a good place for fullscreen button: top-right corner of the window. Use special command (fullscreen) to work with onClick event. Single parameter of this command contains URL to the panorama itself, it’s using as an alternative way for users who have no fullscreen support in the Flash player (Flash version less then 9,0,18,60). Read more about required conditions to provide fullscreen support in your panorama: http://flashpanoramas.com/player/hotspotsXML#fullscreen

Good place for a logotype or some sort of reference is bottom-right corner of the window:

	<spot id="logo" static="1" staticAlign="RB" align="RB" staticX="-4" staticY="-4" 

scaleX="0.2" scaleY="0.2" url="logo2.png"

	onOver="
		change:-,scaleX,1,300;
		change:-,scaleY,1,300;

	"
	onOut="
		change:-,scaleX,0.2,700, bounce;
		change:-,scaleY,0.2,700, bounce;
	"

	onClick="openUrl:http://www.360days.com/"

	 />

Use this code as a template to place your own logotype to the panorama.

Finally, to control the performance of the panorama in action use special plugin fps2.swf with frame-per-second counter and currently used memory indicator:

<spot id="fps" static="1" staticAlign="LT" align="LT" url="fps2.swf" blendMode="invert" />

I used blendMode=”invert” to make it visible for both light and dark background. But it becomes hardly legible for the variegated background. Possible the better way is to place opaque box under the counter (a simple hotspot with a solid opaque rectangle).

Last stroke; replace the second line of XML file to:

<hotspots onLoad="change:-,alpha,0;change:-,alpha,1,1000;">

This global onLoad event calls for every hotspot loading (not panorama loading!) and works before onLoad event described in the hotspot tag. I.e. this function produces a smooth fade-in effect for every hotspot just after the object is loaded. To disable this effect for some buttons I determined local onLoad functions. For example, I added to the fullscreen button: onLoad=”change:-,alpha,0.6,1000″, this command executes just after the global onLoad command and sets the new effect for alpha property (goes to 0.6, not to 1).

Final view of XML file is here.

Use comments if you have more questions about this code.

This entry was posted on Wednesday, December 27th, 2006 at 11:48 am and is filed under Flash Panorama Player. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.