Voici un micro tuto permettant d'afficher un sphérique avec panoSalado.
L'objectif est d'afficher un pano sphérique à partir des 6 faces de cubes.
Tout d'abord télécharger panosalado
Copier dans un répertoire les fichiers suivants (trouvé dans l'archive de panosalado):
- ModuleLoader.swf
PanoSalado.swf
PanoSaladoLoadMeter.swf
UserInterface.swf
swfobject.js
- vf2_cube_0.JPG
vf2_cube_1.JPG
vf2_cube_2.JPG
vf2_cube_3.JPG
vf2_cube_4.JPG
vf2_cube_5.JPG
Créer le fichier xml de configuration PanoSalado.xml avec le contenu suivant :
Code : Tout sélectionner
<PanoSalado>
<layer id="Interface" url="UserInterface.swf" depth="1"/>
<layer id="PanoSalado" url="PanoSalado.swf" depth="0">
<!--// parameter attributes set in the spaces element can be overridden in the individual space elements //-->
<spaces
onStart="loadSpace:preview"
cameraRetainsLastValues="false"
cameraZoom="6"
cameraFocus="100"
cameraZoomIncrement="0.2"
cameraKeyIncrement="75"
cameraSensitivity="60"
cameraFriction="0.2"
cameraRestThreshold="0.0001"
cameraMinimumZoom="3"
cameraMaximumZoom="20"
autorotator="false"
autorotatorIncrement="0.25"
autorotatorDelay="15000"
dynamicQualityAdjustment="true"
preciseOnAcceleration="true"
precisionOnAcceleration="4"
smoothOnAcceleration="false"
preciseOnDeceleration="true"
precisionOnDeceleration="4"
smoothOnDeceleration="true"
preciseAtRest="true"
precisionAtRest="1"
smoothAtRest="true"
>
<space id="preview"
label="preview"
interactive="false"
segments="8"
transition="tween:currentSpace.viewport.alpha from 0 over 1.5 seconds using Expo.easeInOut"
onTransitionEnd="loadSpace:pano"
>
<sphere id="preview_pano">
<file>vf3000x1500.JPG</file>
</sphere>
</space>
<space id="pano"
label="Fourvière"
interactive="true"
segments="16"
transition="tween:currentSpace.viewport.alpha from 0 over 1.5 seconds using Expo.easeIn"
onTransitionEnd="removeLastSpace"
smoothOnAcceleration="true"
>
<cube id="concert1_pano">
<file face="front">vf2_cube_0.JPG</file>
<file face="right">vf2_cube_1.JPG</file>
<file face="left">vf2_cube_3.JPG</file>
<file face="top">vf2_cube_4.JPG</file>
<file face="bottom">vf2_cube_5.JPG</file>
<file face="back">vf2_cube_2.JPG</file>
</cube>
</space>
</spaces>
</layer>
</PanoSalado>Créer le fichier index.htm conteneur avec un contenu semblable à :
Code : Tout sélectionner
<html>
<head>
<title>Sample
</title>
<style>#info { font-family:arial, sans-serif;color:#FFFFFF;font-size:1.2em; }#avt {font-family:arial, sans-serif;color:#DDD;text-align:right;padding-right:10px;}#agentTag {font-family:arial, sans-serif;text-align:center;color:#FFFFFF;padding:5px;}
<!--
/* hide from ie5 mac */
*
{
font-family: Arial, Helvetica, sans-serif;
color: #4A4A4A;
background-color: #F0F0F0;
}
html {
height: 100%;
}
#flashcontent {
height: 90%;
text-align: center;
}
/* end hide */
body {
height: 100%;
margin: auto;
padding: 20;
/* background-color: #171b20; */
}
-->
</style>
<script type="text/javascript" src="swfobject.js"></script>
</head>
<body link="#FFFFFF" vlink="#FFFFFF" alink="#FF0000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" scroll="yes">
<div> <h1>
Basilique de fourvière</h1>
</div>
<div id="flashcontent">
<h3 align="center">We have detected that your Flash Player is either missing or not fully up to date.</h3>
<h3 align="center">For the best viewing experience please click on the icon below to install
<a href="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash">Adobe's Latest Flash Player</a>.</h3><br />
</div>
<!-- Missing Flash Player HTML Code END -->
<script type="text/javascript">
var so = new SWFObject("ModuleLoader.swf?xml=PanoSalado.xml", "pano", "100%", "100%", "9", "#000000");
so.addParam("allowFullScreen","true");
so.addParam("allowScriptAccess","sameDomain");
so.write("flashcontent");
//window.document["pano"].focus();
</script>
</body>
</html>Le résultat est là
