________________________________________________

                       FLASH 360 PLAYER
  ________________________________________________

------------ PRESENTATION ----------

Flash 360° Player est un outil gratuit qui permet de visualiser un panorama 360° via Flash Player 10.
Il est configurable par l'intermédiaire d'un fichier XML (vitesse de déplacement, zoom, type de panorama, limite de la camera...)

Lien de démonstration : Lagny sur Marne - Place de la Fontaine

Màj 23/01/2010 : Prise en compte du brackingTime, retrait du champs de texte après chargement, Ajout d'un lien vers ce topic (clic droit).

---------- TELECHARGEMENT ----------

• Télécharger le player avec un exemple de panorama (ZIP - 1.6 Mo)

----------- MODE D'EMPLOI ----------

• Pré-requis

Pour fonctionner, le player nécessite les fichiers :

- panorama360.swf
 - config.xml
 - L(es) image(s) nécessaire(s) au panorama soit:
        - une seule, pour la projection sphérique
        - 6, pour la projection cubique (1 par face)

Pour l'exemple du pack à télécharger, il y a en plus un index.html où le .swf est intégré, ainsi qu'un script .js qui me sert pour cette intégration. (voir plus bas).
Il semblerait que lancer panorama360.swf directement avec le lecteur Flash Player en local ne fonctionne pas chez tous le monde, sachez déjà qu'il doit être à jour (version 10 ou +).

    /!\   Les images doivent avoir une taille inférieur à 6000px de largeur, à cause d'une limite de Flash...
          Les 2 premiers fichiers doivent être dans le même répertoire. L'url des image que vous indiquez dans le XML est relative à ce dernier.
          Ne mettez surtout pas d'accents, caractères spéciaux ou espaces aux noms de fichiers / dossiers que vous ajouterez au package.

• Intégration du player

Je ne m'attarderai pas à vous expliquer comment intégrer un SWF dans une page web, ce sujet a été traité de nombreuses fois dans la catégorie Programmation/HTML de ce forum, je vous laisse donc le soin de faire une recherche si vous ne savez pas comment faire...
Je vous suggère néanmoins d'utilisé SWFObject(), un outil javascript à la fois simple et complet pour intégrer proprement du Flash dans votre page (X)HTML.

• Paramétrage du player

Tout réside dans le fichier config.xml .
Vous pouvez l'éditer avec n'importe quel éditeur de texte simplifié, tel que le Bloc-note sous Windows, mais je vous recommande vivement NotePad++ (ou un autre éditeur de texte avancé) qui vous offrira un coloriage syntaxique assez utile pour ne pas se perdre dans le code, bien qu'il n'y en ait que très peu !
Sachez déjà que vous ne devrez toucher qu'aux données entre guillemets, autrement dit, aux valeurs de ces différentes propriétés :

Pour la balise <projection> :

type : Il faut mettre le type de projection. Il n'y a que 2 valeurs possibles : "spherique" (pas d'accent !) ou "cubique"... C'est à vous de voir laquelle correspond à votre panorama !

showStats : Prends comme valeur "true" ou "false". Il permet d'afficher (true) ou pas (false) un cadre contenant les statistiques hardware, à savoir le taux de FPS ainsi que la mémoire utilisé par votre panorama. Utile en phase de test...

Pour la balise <imageSpherique> :
(utile seulement si votre projection est de type sphérique, sinon, elle est à ignorer)

image : Indique l'url de l'image (jpg, gif ou png) du panorama

angleOffset : Angle de décalage vertical du panorama si il ne couvre pas toute la hauteur (180°) ET dont le centre ne correspond pas à l'horizon.

backgroundColor : La couleur de fond (en nombre hexadecimal). Si la caméra ne bloque pas, c'est la couleur qui apparaitra dans les zones non "remplies" par le panorama.

Pour la balise <imageCubique> :
(utile seulement si votre projection est de type cubique, sinon, elle est à ignorer)

front : indique l'url de l'image (jpg, gif ou png) de la face avant du cube.

left : indique l'url de l'image (jpg, gif ou png) de la face gauche du cube.

back : …
...

Pour la balise <camera>
Tout les nombres ici doivent être des entiers positifs.

cameraSpeed : La vitesse de la caméra.

angleMax : Angle maximal(en degré) auquel la caméra se bloquera. Voir schéma ci-dessous.

angleMin : Angle minimal (en degré) auquel la caméra se bloquera. Voir schéma ci-dessous.

defaultFOV : Angle de champs de vision (FOV) par defaut (au lancement du player, en degré). Voir shémas ci-dessous.

zoomStep : valeur de zoom/dézoom pour 1 "roulis" de molette.

brakingTime : durée (en milliseconde) de freinage de la caméra lorsqu'on relâche le clic de la souris.

Merci de signaler ce qui n'est pas clair !

----------- A PROPOS ----------

• Technologie / sources utilisée

Pour produire cette source, j'ai utilisé FlashDevelop, qui couplé au Flex SDK permet de développer et compiler l'AS3 gratuitement.
Par ailleurs, les frameworks (libres) suivants ont été utilisés :
Away 3D : pour le rendu 3D dans Flash.
Tween Lite : Pour des interpolations fluides et légères.
BulkLoader : Pour la gestion des chargements multiples.
Mr.Doob : Affichage des statistiques hardware.

Mon travail se résume surtout à l'interactivité de la caméra et l'interprétation du XML.
Je compte partager prochainement la source .as si je vois des gens intéressés... C'est à la base un projet personnel que je partage

• Projets

- Porter la source vers WebGL lorsque le HTML5 se démocratisera. Le but est de ne plus dépendre de flash (qui est une technologie propriétaire).
- Créer des zones cliquables afin d'atteindre d'autre panorama, ouvrir une image...
- Créer un interface simplifier pour configurer le panorama pour passer outre l'édition manuelle XML

Je souhaiterais par ailleurs que vous me soumettiez toutes vos idées / remarques nécessaires à l'amélioration de cet outil  

j'ai téléchargé le ZIP avec l'exemple et l'image ne se charge pas c'est normal ?

non -.-
C'est en local seulement ? peux tu tester sur un FTP si t'en a un ?
Mon lien de démo fonctionne t-il ?

drapal

Quelqu'un peu retester le pack avec l'exemple (avec index.html) en local svp ?

Et hop    
 
ça ma l'air prometteur, good job abais  

oui téléchargé, décompressé, et j'ouvre le swf et rien

De mon côté ça fonction, sous firedox et flash player 10.

nan mais c'est bon en fait, j'essayais d'ouvrir le swf, mais sur une page web, pas de souci

Le .SWF du dernier pack est lui aussi différent à 2-3 choses prêt concernant les sécurités d'export Flash, le but étant de régler les éventuels conflits en mode local...
Le problème c'est que ça marchera dans tous les cas chez moi, ce pourquoi je vous sous-traite pour tester le nouveau pack (en local)    
 
Suite à vos retour ça semble maintenant fonctionner...
 
Merci à vous    

drap

bon je viens de l'essayer. très bon travail   jusqu'ici j'utilisais pano2vr mais ton lecteur me plaît    
 
feedback:
-l'argument brackingtime ne fonctionne pas sur mon animation. ni sur celle en exemple dans l'archive. que l'on passe de 500ms à 5000ms c'est la même, je voulais avoir un mouserelease plus "smooth" or là c'est pas possible.
-pour chipoter: le curseur quand il est au milieu de l'animation prend la forme d'un i majuscule, comme lorsqu'on saisit du texte, ça vient je pense (ayant qqs notions en flash/actionscript) de la progressbar qui reste en arrière-plan une fois l'image chargée.

1) Je vais jeter un coup d'oeil, merci
EDIT :  C'est réglé !

2) J'avais réglé se problème mais pas mis à jour le SWF sur mon FTP, je vais faire ça dés que possible...C'est bien le textfield du chargement qui posait le pb
EDIT : Uploadé

parfait
 
par contre il ne faut pas mettre une image de pile 6000px de largeur sinon ça ne marche pas

Apparement, la limite est de 16 MP...
Si le ratio est de 1/2 (panorama 360°x180°), la limite serait donc de 5656px...

drapo

Dés que j'aurais le temps, je porterais la source sur away3dlite que j'ai chatouillé récemment...
J'espère diminuer la charge CPU et diviser la taille du SWF par 2

Y a t'il un paramètre permettant de démarrer le défilement au chargement du pano sans toucher à la souris ?
Bravo pour cette magnifique appli !
Jean-Benoît

non, mais je pourrais le rajouter...

Bonjour,
 
Ton application est vraiment super sympa par contre j'aimerai savoir s'il y avait la possibilité de configurer un angle max pour la droite et la gauche..  
Je m'explique , je prend des photos en mode fishEye et cela me permettrais de ne montrer que le partie devant moi (180° ).
 

Excellent ton Player flash !
 
Je l'ai testé avec des grandes images et la qualité est super.
Le mode sphérique présente une minuscule déformation des lignes droites, mais il faut bien regarder.
Le résultat est meilleur en mode cubique.
 
Comme chacun y va de son idée ou de sa requête :
 
Serait'il possible de modifier les proportions de l'image ?
Changer la largeur sans changer la hauteur, ou l'adapter au format large ou 16/9, comme les autres players.
 
Tant qu'on y est, un mode "plein écran", serait le top.
 
Si tu mets les sources à disposition je suis intéressé.  
Je suis photographe panoramiste et en echange, si tu veux, je te propose une dizaine de mes photos (cubiques et sphériques) pour faire tes tests ou tes demos  
 
Patrick.

Bonjour winini33,

Pour le player en soit, rien ne t'empêche de le mettre dans la taille que tu souhaite...
Concernant les proportions de l'image, je ne vois pas trop où tu veux en venir, car le ratio d'une image sphérique 360°x180° est normalement de 2/1...
Si les 180° ne sont pas desservi, il rajoute automatiquement des bande noir...
M'enfin, si tu justifie cette proposition, pourquoi pas...

Pour le fullscreen, bonne idée

Concernant le mode sphèrique, les déformations peuvent aussi être dues au maillage 3D de la sphère qui est assez léger, lorsque j'aurai porté ma source sur Away3DLite, je me permettrai de l'alourdir

Pour le partage de ma source, je ne sais pas trop encore, ça dépendra de mes projets, mais je me demande si je ne vais pas faire quelque chose de lucratif derrière... En stand-by pour le moment donc...

En ce moment, je suis à fond sur mon site perso (voir le Wip de ma signature), mais j'essayerais de m'y mettre assez tôt.

Ok Abais, merci pour ta réponse.
 
Les proportions de l'image d'origine sont bien de 2/1, mais le player c'est une fenêtre et on doit pouvoir lui donner n'importe quelle dimension sans déformer le sujet.
J'ai des exemples sur mon site avec des panoramiques 360 qui s'ouvrent en fenêtres modales et qui s'adaptent aux dimensions de la page.
 

Quand je clique sur un de vos panoramas dans l'accueil du site, ça ouvre bien une box, mais ça me fait un fond de couleur uni...  
Pourtant, je vois bien la barre de chargement se compléter en haut à gauche...
 
Je crois voir ce que vous dites, le redimensionnement n'agrandirait pas le viewport 3D, mais se contente de stretcher le canvas flash...
Je jetterais un coup d'œil là dessus

cool ca ...  

drapal

Pourrait - on avoir les sources de ce superbe player ?
 
Je dev avec Flash et Away 3D mais je suis bloqué et j'aimerais beaucoup utiliser ton player, et pour le customiser avec des hotspots il me faudrait le AS  
, est ce possible ?
 
Merci d'avance

bonsoir a tous
voila j'ai un problème que je n'arrive pas a résoudre sa fait deja 3 jours que je cherche et je sent que je vais craquer. jusqu'a present je trouve quelque tutorial mais pas trés interréssant et sans bonne explication.
Mon souci...le voici
je suis membre d'un forum (http://a-d-n.forumperso.com/) je désirai poster dans un message plusieurs panorama que j'ai effectuer avec panoramastudio2pro chaque panorama contient un dossier avec image jpeg, un .html , un un .xml et un fichier pano studio viewer.
Mon probleme c'est...comment les mettre en ligne ???
j'aimerai que les membre puisse depuis le message poster naviguer a traver le panorama en haut a droite a gauche etc... dans une sorte de fenetre aussi grand qu'un fenetre de video youtube...
je ne sais pas si cela ai possible , je ne suis pas un pro en informatique non plus.
je ne sais pas non plus ou héberger ces fichier car apparement il faut quils soient tous au meme endroit mais si je les upload (ex : chez free) j'ai un lien par fichier !.. donc je cale sérieusement
 
merci pour vos réponse futur, si vous avez besoin d'autre explication je suis la ^^
merci encore

petit up :
voici un lien en .rar contenant un dossier avec un jpeg (une simple photo en panorama) et un autre dossier que j'ai obtenue avec panoramastudioviewer2pro
si quelqu'un pouvais m'expliquer la marche a suivre pour pouvoir le mettre en ligne ^^
http://dl.free.fr/aRwirFRVw

Tu n'es pas vraiment dans le bon topic pour ça... Ici je distribue un player de panorama 360, je ne fais pas le support d'un autre...
Pour t'aiguiller, tu dois avoir ouvrir un hébergement web (FTP) et y uploader tes fichiers...

Merci Abais pour ton player, c'est ce que je recherchais et je trouve qu'il offre un très bon rendu en terme de qualité d'image par rapport à d'autres, donc félicitations!    
Par contre j'aimerais pouvoir bloquer le zoom molette. J'ai essayé avec la valeur 0 pour le zoomStep, mais ca ne fonctionne pas. Et le plus gênant est que le zoom reste actif même si on sort du champ du panorama lorsqu'on utilise la molette pour scroller dans une page web.
Si tu as une solution, je suis preneur.
Par avance merci!
Jocelyn