Détails des fichiers

Le premier exemple contient les fichiers suivants :

• AVFlashVR.swf: C'est le fichier principal (le moteur) du player.
• index.html: C'est la page qui intègre le player.
• pano.mov : Un panorama au format .mov (QTVR) (AVflashVR peut aussi lire le JPG (6 faces de cube).
• read_me.txt : Documentation.  

Il est possible d'intégrer AVFlashVR avec une simple balise <embed>, comme toutes les animations Flash.

Dans l'exemple 1, le code de la page index.html affiche le pano, avec seulement 3 paramètres :

• Le nom du fichier pano, passé par la variable panoImage (panoImage=pano.mov). 
• Et les dimensions (width="900" et height="450") en pixel.

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" id="avfvr" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab #version=10,0,0,0" width="900" height="450" align="middle"> 
  <param name="allowScriptAccess" value="always" /> 
  <param name="movie" value="AVFlashVR.swf" /> 
  <param name="quality" value="high" /> 
  <param name="bgcolor" value="#ffffff" /> 
  <param name="flashvars" value="panoImage=pano.mov" /> 
  <embed src="/AVFlashVR.swf" quality="high" bgcolor="#ffffff" flashvars="panoImage=pano.mov" width="900" height="450" name="mymovie" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer" /> 
</object>

AVFlashVR accepte toutes les dimensions jusqu'a 100% de la page. Il peut aussi s'adapter aux dimensions variable, pour les pages "popups" ou les fenêtres modales. 

Les 6 images sont rassemblées dans le dossier "pano_cub", et elle correspondent à 6 faces d'un cube.

Dans la page index.html de l'exemple 2, nous utilisons swfobject.js pour intégrer AVFlashVR.

Le code est chargé avec cette ligne: 

<script src="/swfobject.js" type="text/javascript"></script> 

Voici le code minimum pour charger pano.mov

<script src="/swfobject.js" type="text/javascript"></script>
<script type="text/javascript">
  var flashvars = {};
  var params = {allowScriptAccess: "always"};
  var attributes = {};
  swfobject.embedSWF("AVFlashVR.swf?panoImage=pano.mov", "mypano", "900", "450", "10.0.0", "expressInstall.swf", flashvars, params, attributes);
</script>

Ci-dessous, le code est étendu pour passer les 6 images (cube faces) dans flashvars.

Cette fois, la variable panoImage contient l'url des 6 fichiers .jpg, séparés par une virgule (et sans retour a la ligne).  

<script src="/swfobject.js" type="text/javascript"></script>
<script type="text/javascript">
  var flashvars = {
   panoImage: "pano_cub/019_0.jpg,pano_cub/019_1.jpg,pano_cub/019_2.jpg,pano_cub/
   019_3.jpg,pano_cub/019_4.jpg,pano_cub/019_5.jpg"
  };
  var params = {
   menu: "false",
   scale: "noScale",
   allowFullscreen: "true",
   allowScriptAccess: "always",
   bgcolor: "#000000"
  };
  var attributes = {
   id:"Panav"
  };
  swfobject.embedSWF("AVFlashVR.swf", "mypano", "900", "450", "10.0.0", "expressInstall.swf", flashvars, params, attributes);
</script>

Les paramètres de base

AVFlash Player peut démarrer automatiquement, afficher des titres et des messages.

A partir de l'exemple 3, nous avons passé des paramètres dans l'objet "flashVars".

Chaque paramètre est séparé par une virgule.

Les lignes de commentaires (de couleur verte), commençant par "//", sont sans action sur le fonctionnement. 

var flashVars = {
   // Url of the pano file
   panoImage: "pano_mov/019.mov",
   // Title
   title:   "Penne d'Agenais - Village médiéval",
   // sysInfo. 0 for normal display.
   sysInfo:  "0",
   // Delay for autorun (seconds) 
   autoStart:  "4",
   // Direction of autorun (l)eft, (r)ight
   autoDir:  "r", 
   // Mouse effects 
   inertia:  "85", // 0 to 100 (82 = standard setting)
   flexibility: "50", // 0 to 100 (50 = standard setting)
   // Registration domain name
   regDomain:  "mysite.com",
   // Registration code
   regCode:  "107604-119682-106506-131760",
   // Image showed at start  
   infoImage:  "img_thumbs/avpano.jpg", 
   // Url called when you click on the intro image
   openUrl:  "http://www.avisiter.com",
   // Logo text
   logoText:  "MySite.com"
};

Liste des paramètres de base de AVFlashVR

JSON vs. XML 

Beaucoup d'applications Flash utilisent le langage XML pour stoker leurs paramètres.

AVFlashVR a été conçu pour faciliter le travail du webmaster. Il se programme avec JSON.

JSON est un format d'échange de données, plus simple et plus léger que XML.

Les paramètres de AVFlashVR sont plus faciles à régler, et la documentation est plus légère.

JSON est compatible avec tous les langages Internet (HTML/JS, PHP, ASP, etc.). 

 

Dans les premiers exemples, nous avons vu comment afficher un pano, avec un minimum d'information.

A partir de l'exemple 4, nous utilisons un objet JSON qui contient tous les paramètres des visites virtuelles :

Cela permet d'afficher dans un même cadre :

• Plusieurs panos avec interaction.
• Des galeries (images miniatures).
• Des textes (titres, logos, etc.).
• Des cartes Gmaps
• etc.

Pour simplifier le traitement, nous avons groupé les paramètres similaires dans un seul objet.

L'objet nommé "panos" (au pluriel) contient plusieurs objets ("pano00", "pano01", "pano02",...)  

Chaque objet "panoXX" contient les paramètres du pano correspondant.

 

Cette écriture est également appliquée pour les "plugins" et les "hotspots".

Vous trouverez un modèle concret dans le fichier ".js" de l'exemple 4.

 

Vous remarquerez que la syntaxe JSON est vraiment simple.

Les mêmes réglages en XML, auraient occupé plus de place, et de temps.

// Panoramas
panos:{ pano00: { file: "pano_mov/pano0.mov",                        
                  title: "Title for pano 0",
                  // Optionnal
                  pan: "-125",
                  zoom: "1",
                  gMapLat: "44.718538477895144",
                  gMapLon: "-1.2050172686576843"
                },

        pano01: { file: "pano_mov/pano1.mov",
                  title: "Title for pano 1",
                  pan: "-125",
                  tilt: "45",
                  zoom: "1.2"
                },

        pano02: { file: "pano_mov/pano2.mov",
                  title: "Title for pano 2"
                }
       }

A partir de l'exemple 4, on trouve le paramètre "panoObject". Celui-ci peut recevoir de nombreux paramètres ou "objects", stockés dans un fichier externe.

En ouvrant l'exemple 4 vous comprendrez rapidement le principe :

• Une page index.html avec le code ci-dessous.
• Le fichier nommé "flashvars_obj.js" contient les paramètres qui doivent passer dans "panoObjet".

 

// Chargement du fichier externe
<script src="/avflashvr/params_js/flashvars_obj.js" type="text/javascript"></script>
 
<script type="text/javascript">
// La variable "flashVars_obj" est convertie en objet JSON.
var paramObj = encodeURIComponent(JSON.encode(flashVars_obj));
var flashVars = {
             // Les paramètres sont envoyé à "panoObject".
             panoObject: paramObj
}
</script>

Cette méthode permet de passer tous les paramètres, sous la forme d'un seul objet, au format JSON.

Les paramètres étendus listés dans le tableau ci-dessous, s'appliquent aux objets :

• logoStyle: {}

• titleStyle: {}

Les noms des paramètres parlent d'eux même. La plupart d'entre eux sont facultatifs.

Si vous souhaitez remplacer une couleur, une taille de police, ou ajouter une ombre, ne modifiez qu'un paramètre à la fois, et rafraichissez la page pour voir la différence.

Dans certains cas, vous devrez peut-être vider le cache de votre navigateur, pour voir le résultat.

 

Ci-dessous, la liste des parametres communs à tous les plugins. Chaque plugin dispose aussi de paramètres spécifiques, comme "gmapKey" qui ne concerne que le plugin "GMaps". Vous trouverez des compléments d'information dans les fichiers de paramétrage.

Un "hotspot" est un objet graphique, composé d'une image et d'un texte. Il peut se placer dans un espace 3D, et tourner avec la pano. Exemple : Une fléche qui montre une zone cliquable, pour changer de vue.

C'est le paramètre "align", qui détermine si le hotspot est de type 3D ou 2D.

 

Quand il est placé dans l'espace 2D, le hotspot peut afficher une image, ou du texte devant le pano (par exemple un logo fixe).

Les hotspots acceptent aussi des paramètres, pour les styles de textes, les effets d'ombres, de couleurs, et de transparences. Un timer permet de choisir la durée d'affichage.