Ajout de Hotspots (bouton plein écran)

Transcription

Ajout de Hotspots (bouton plein écran)
Ajout de Hotspots (bouton plein écran)
Nous allons tout d'abord ajouter un bouton permettant de passer en mode plein écran.
Pour cela il faut modifier le fichier pano.xml de la manière suivante :
par rapport au fichier précédent les lignes suivantes ont été ajoutés :
<hotspots>
début de la définition des hotspots
<global>
début des définitions globales à appliquer aux hotspots (voir plus loin)
<spot
Définition d'un hotspot
id="btn_plein_ecran"
id ou nom du hotspot (chaque id doit être unique)
url="common/black_f.png"
lien vers l'image du hotspot
alt="Mode Plein Ecran (on/off)"
info bulle affichée lorsque la souris passe sur le hotspot (vient du plugins tooltips)
static="1"
le hotspot sera fixe sur la fenêtre (il ne tournera pas avec la rotation du panoramique)
salignX="0.45"
salignY="0.45"
coordonnées du hotspot suivant le schéma suivant :
staticX
staticY
(-0,5 -0,5)
(0,5 -0,5)
(0 0)
(-0,5 0,5)
(0,5 0,5)
il sera donc placé en bas à droite sur le panoramique
onClick="fullscreen()"
action exécutée lors du clic sur le hotspot ici passage en plein écran
/>
fin de la déclaration du hotspot
</global>
</hotspots>
fin des déclaration des hotspots
si le passage en plein écran ne fonctionne pas il convient en premier lieu de vérifier si la
variable allowFullScreen dans le fichier HTML est bien fixée à true sinon la modifier.
Ajout de Hotspots (passage d'un panoramique à un autre)
Nous allons voir maintenant comment passer d'un panoramique à un second et retour.
Voici tout d'abord le code :
<spot id="hs_base_0"
définition de l'id ou du nom (unique dans le fichier .xml)
url="common/hs.gif"
définition de l'image du hotspot ici un cercle
linked="jacques"
le hotspot est lié au panoramique « jacques » il n'apparaîtra donc que dans celui ci
pan="-121"
tilt="-4"
positionnement du hotspot (pan=gauche/droite de (-180 à 180°) tilt=haut/bas (de -90 nadir
à 90 zénith),ces paramètres sont à définir à tâtons ou en utilisant le plugins editor (voir
plus loin)
scale="1.7"
taille du hotspot
tintColor="#FF8800"
couleur du hotspot au format hexadécimal RRGGBB chacun des trois termes (RR, GG ou
BB) variant de 00 à FF
alpha="0.3"
transparence du hotspot de 0 à 1
alt="entrez dans le 'Canadair'"
info-bulle (du plugins tooltips.swf)
onOver="change:-,alpha,1,200;change:-,scale,3.5,100;"
comportement lors du passage de la souris sur le hotspot ici : changement de la
transparence de 0,3 -> 1 en 200ms et de la taille de 1,7 -> 3,5 en 200 ms
onOut="change:-,alpha,0.3,200;change:-,scale,1.7,100;"
comportement lorsque la souris quitte le hotspot ici : retour de la transparence à 0,3 et de
la taille à 1,7
onClick="loadPano(panoName=canadair&amp;pan=0.0;)"
affichage du nouveau panoramique dans le même format que le précédent (six fichiers
« canadair_0.jpg » à « canadair_5.jpg » avec placement de la vue avec le paramètre pan
à 0,
/>
fin de la description du hotspot
Définition des paramètres pan et tilt : utilisation du plugins
editor.swf
Cet éditeur s'affiche en rajoutant une clause layer_N=plugins/editor.swf (N étant un
nombre non existant dans la liste des layer) :
il permet de manipuler les objets présents dans le fichier pano.xml :
1) choisir l'élément à modifier dans la liste déroulante
2) a l'aide des flêches devant pan et tilt déplacer le hotspot jusqu'à l'emplacement
désiré
3) définir la taille de l'image à l'aide scaleX et scaleY il fonctionnent ensemble si la
case est cochée et indépendamment (déformation de l'image) sinon
4) copier les paramètres à l'aide du bouton copy XML :
5) coller tout ceci dans votre éditeur favori. (ne pas oublier de recopier les paramètres
linked, onOver onOut, onClick, alt car ceux-ci disparaîssent dans cette version de
l'éditeur) en jaune le code créé par editor et en dessous le code initial
l'autre solution est de noter les paramètres modifiés est de les introduire
manuellement dans la définition du hotspot (lorsque je modifie juste des paramètres span
tilt et scale c'est la solution que j'emploie)
6) effacez l'ancienne définition de l'objet (sinon définition en double et le pano ne
fonctionne plus) si vous avez fait un coller dans le fichier.
cet éditeur permet d'éditer de très nombreux paramètre il est encore en développement et
présente encore des imperfections (notamment pour l'affichage des paramètres effect des
spot il est impossible de voir la liste complète.
Personnellement j'utilise pspad (il est gratuit mais uniquement pour PC) comme éditeur
pour les fichiers xml, mais bien d'autres existent.

Documents pareils