tutoriel FPP

Création du panorama de base (dans un fichier html)
Voici la première partie du tutoriel FPP. Il permet de définir un panorama de base et de
l'encapsuler dans une page HTML afin de le publier.
Commencons par l'environnement de travail :
créer un répertoire et glissez y les fichiers suivants :
1. Structure des répertoires
le répertoire principal :
pano.xml : fichier de description du panoramique (voir ci dessous)
main.html : page html encapsulant le fichier flash ( voir ci dessous)
show_pano.swf, pano0.swf, pano.swf, panoStripe.swf : fichiers flash permettant
l'affichage des panoramiques ( fournis par FPP lors de l'achat)
swfobject.js : script javascript permettant l'encapsulation des fichiers flash dans une page
html
jacques_0.jpg à jacques_5 : panoramique sous forme de six faces d'un cube
jacques.jpg : panoramique sous forme équirectangulaire
le répertoire plugins :
contient les différents programme additionnel permettant d'étendre les possibilités de FPP
(hotspots, lensflare, ajout de video, ...) nous en détaillerons plusieurs par la suite. Il sont
accompagnés d'un fichier de description sommaire.
Le répertoire common :
contient les images des différents boutons et hotspots pour la créations des
panoramiques.
2. Fichier HMTL (main.html) encapsulant le panoramique
voici la partie intéressant du code HTML
<script type="text/javascript" src="swfobject.js"></script>
chargement de la procédure javascript swfobject permettant d'appeler une procédure flash
(extension swf) dans un page html. Voir la page suivante pour plus de détails :
http://wiki.mediabox.fr/documentation/swfobject
<script type="text/javascript">
var so = new SWFObject("show_pano.swf", "pano", "1024", "768",
"6.0.65", "#282828");
déclaration d'un nouvel objet flash ==> show_pano
nom interne du panoramique « pano »
taille 1024x768 pixels
so.addVariable("movie", "pano.swf");
lancement du panoramique ( avec appel du fichier de configuration pano.xml)
so.addVariable("redirect", window.location);
affichage dans la fenêtre courante
so.addParam("allowFullScreen","true");
permet le passage en plein écran
so.addParam("allowScriptAccess","sameDomain");
ne permet l' accès au code qu'aux utilisateurs du même domaine
so.write("flashcontent");
</script>
3. fichier pano.xml
Il permet de définir le panoramique :
<?xml version="1.0" encoding="iso-8859-1"?>
<panorama>
début de la définition
<!-- parameters section -->
<parameters>
paramètres de base du panoramique
chargement des plugins
layer_1 = plugins/hotspots.swf
permet de créer des hotspot (liens vers d'autres pano, d'autres pages web, et bien
d'autres actions ...)
layer_2 = plugins/tooltips.swf
permet de créer des petits labels explicatifs sur les hotspots
layer_3 = plugins/glassMeter.swf
affichage de la barre de chargement du panoramique
panoType=cube0
le panoramique se présente sous la forme de 6 fichiers
panoName=jacques
dont le nom est « jacquesxx.jpg » xx représentant le n° de la face de _0 à _5
panotype=cube1 si les n° varient de _1 à _6
segments=40
précision du panoramique plus segment est grand mieux le pano est défini mais plus il est
lent (déplacement haché) si segments est petit des ondulations peuvent apparaître sur les
lignes normalement droites.
</parameters>
fin de la section des paramètres
</panorama>
fin de la définition du panorama