AS3 problème sous IE avec une animation de type caroussel développée avec paperv

Question

Premièrement bonjour à tous car ceci est mon premier post sur ce site :) Alors mon soucis, c'est que mon animation, une fois développée et intégrée, fonctionne très bien sous firefox, mais sous IE, un bug étrange se produit, au survol de la souris sur un des produits on dirait que l'animation s'arrête, les éléments devraient recommencer à tourner dès le rollout mais ils restent figés (sachant qu'en local et sous FF tout fonctionne à merveille) Alors j'avoue que je suis assez desespéré et perplexe, je ne vois vraiment pas d'où ce problème peut provenir, si ça vient du code actionScript ou du script d'intégration qui provoque un conflit avec IE, j'ai fais beaucoup de recherches (dont sur ce site) mais je reste sans solutions c'est donc pour cela que je fais appel à vous et votre bonté... Je vous donne mon code actionScript au cas où le problème viendrait de la même si j'en doute (désolée si ce n'est pas hyper propre, j'ai essayé de faire au mieux ) : package { // imports import flash.display.MovieClip; import flash.display.DisplayObject; import flash.events.Event; import flash.events.IOErrorEvent; import flash.display.Loader; import flash.display.Bitmap; import flash.net.*; import flash.filters.GlowFilter; import flash.text.TextField; import org.papervision3d.objects.primitives.*;// les planes import org.papervision3d.materials.*; // les textures des planes import org.papervision3d.events.*; // les événements sur les objets 3D import org.papervision3d.cameras.*;// la caméra import org.papervision3d.scenes.*;// la scène 3D import org.papervision3d.view.*; // la projection import org.papervision3d.render.*; // le rendu public class Caroussel3D extends MovieClip { var chargeImages:Loader; // chargeur var chargeur:Loader; // un deuxième chargeur // Propriétés du carrousel var vitesse:Number = 0.02; var nbrImg:int = 6; // nombre de vignettes var angleProduit:Number = (Math.PI*2)/nbrImg; // angle entre chaque produit var w:Number=stage.stageWidth; // largeur de la scène var h:Number=stage.stageHeight;// hauteur de la scène var rayonCarrousel:Number=220; // rayon du carrousel var angleCam:Number = 0;// angle de la caméra sur Y var rayonCam:Number= 560; // rayon de la caméra //les tableaux var imglist:Array = new Array();// liste des produits var prix:Array = new Array();// liste des clips "prix" // Propriétés Papervision var texture:Number=0;// index de la texture à charger var projection:Viewport3D; var scene:Scene3D; var camera:Camera3D; // Variables du prix des produits var prix1:Prix1 = new Prix1(); var prix2:Prix2 = new Prix2(); var prix3:Prix3 = new Prix3(); var prix4:Prix4 = new Prix4(); var prix5:Prix5 = new Prix5(); var prix6:Prix6 = new Prix6(); // Variables qui serviront pour l'affichage des prix(movieClips) et qui doivent être en variable de classe var ob:Object; var id:int; var texturePlane:MovieMaterial; public function Caroussel3D() { // paramètres de la projection projection = new Viewport3D(w, h, true, true);// projection scene = new Scene3D();// scène 3D camera = new Camera3D();// camera var pointDeFuite = new Plane();// le pivot camera.target = pointDeFuite;// arroche la caméra au pivot projection.buttonMode=true;// affiche l'icone "main" au passage des surface interactives // pose les objets sur la scéne addChild(projection);// la projection //nous mettons les prix dans le tableau de prix prix.push(prix1); prix.push(prix2); prix.push(prix3); prix.push(prix4); prix.push(prix5); prix.push(prix6); // charger le xml var chargeurXML:URLLoader = new URLLoader(); // objet de chargement du XML chargeurXML.addEventListener(IOErrorEvent.IO_ERROR, indiquerErreur); chargeurXML.load(new URLRequest("http://www.fitnessdiscount.fr/templates/fitness/images/images.xml")); chargeurXML.addEventListener(Event.COMPLETE, parseXML);// récupération des données } // récupération des données function parseXML(e:Event):void { var xml:XML = new XML(e.target.data); // on récupère notre xml var liste:XMLList = xml.elements(); // le document XML est constitué d'une liste d'éléments XML for each (var produit:XML in liste) { imglist.push({u:produit.adresse, lien:produit.lien});//pour chaque enfants } chargeImage();// charge la première texture } // charger une image function chargeImage():void { chargeImages = new Loader(); chargeImages.load(new URLRequest(imglist[texture].u)); trace(imglist[texture].u); chargeImages.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, handlerError); chargeImages.contentLoaderInfo.addEventListener(Event.COMPLETE, creePlane); } // créer un Produit function creePlane(e:Event):void { // appliquer la texture (image) var bd:Bitmap = Bitmap(chargeImages.getChildAt(0));// objet d'affichage de la texture var bdmovie:MovieClip = new MovieClip(); // on créer un clip vide bdmovie.addChild(bd); // on lui attache le bitmap texturePlane = new MovieMaterial(bdmovie,true,true);// texture du plane texturePlane.oneSide = false;// cacher la face arrière (non) texturePlane.interactive=true;// rendre interactif // créer le plane var p:Plane = new Plane(texturePlane);// plane texturé p.useOwnContainer = true;// utilise son propre conteneur p.filters = null;// filtres inactif // placer le plane p.x = Math.cos(texture*angleProduit)*rayonCarrousel;// position sur X p.z = Math.sin(texture*angleProduit)*rayonCarrousel;// position sur Z //p.rotationY = (-texture*angleProduit)*(180/Math.PI)-90;// rotation sur Y // afficher le plane et placer les écouteurs p.addEventListener(InteractiveScene3DEvent.OBJECT_PRESS, clicProduit);// écouteur p.addEventListener(InteractiveScene3DEvent.OBJECT_OVER, overProduit);// écouteur p.addEventListener(InteractiveScene3DEvent.OBJECT_OUT, outProduit);// écouteur scene.addChild(p);// ajouter le plane dans la scène chargeImageSuivante();// on charge l'image suivante } // reste t?il des images à charger ? function chargeImageSuivante():void { // si il reste des textures à charger if (texture < imglist.length-1) { texture++; chargeImage(); // charge la nouvelle image } else { stage.addEventListener(Event.ENTER_FRAME, render);// boucle permanente } } // rendu de la scene et boucle principale function render(e:Event):void { angleCam -= vitesse; // angle de rotation de la caméra sur Y camera.x = Math.cos(angleCam)*rayonCam;// position de la caméra sur X camera.z = Math.sin(angleCam)*rayonCam;// position de la caméra sur Z // rendu de la projection var renderer:BasicRenderEngine = new BasicRenderEngine(); renderer.renderScene(scene, camera, projection); orienteProduit(); } // Orienter les planes function orienteProduit():void { var j:uint=nbrImg+3; while (j--) { var p = scene.getChildByName(j.toString()); if (p!=null) { p.rotationY = -angleCam/Math.PI*180+90; p.rotationX = -camera.y*Math.PI/180; } } } // Lorsque l'on clique sur un produit, la page produit correspondante est appelée function clicProduit(e:Event):void { id = e.target.name - 3; var url:URLRequest = new URLRequest(imglist[id].lien); navigateToURL(url, "_self"); } function overProduit(e:Event):void { // on stocke l'objet dans une variable ob = e.target; id = ob.name - 3; // on crée un identifiant contenant l'index du plane diffusant l'evt texturePlane = ob.material; // on donne a la variable de classe le movieMaterial actuel // on arrête le déplacement vitesse = 0; // application du filtre de rayonnement var glow:GlowFilter = new GlowFilter(); glow.color = 0x009922; glow.blurX = 25; glow.blurY = 25; ob.filters = [glow]; /*affichage du prix*/ // pour commencer, il faut charger l'image du plane diffusant l'evt dans un nouveau loader chargeur = new Loader(); // un nouveau chargeur d'image (loader) chargeur.load(new URLRequest(imglist[id].u)); // qui prend l'image de l'objet selectionné chargeur.contentLoaderInfo.addEventListener(Event.COMPLETE, nouvelleTexture); chargeur.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, errorhandler); // Dès que le chargement est complet, on peut procéder à la création de la nouvelle texture } function nouvelleTexture(e:Event):void{ /*affichage du prix*/ //création de la nouvelle texture : il faut tout récupérer en y ajoutant le prix var image:Bitmap = Bitmap(chargeur.content); // un Bitmap qui prend l'image var movieTexture:MovieClip = new MovieClip(); // un movieClip vide //image.bitmapData.draw(prix[id]); if(image != null){ // pour éviter les erreurs pendant les cours instants ou "image" est nul movieTexture.addChild(image); // auquel on ajoute le bitmap de l'image movieTexture.addChild(prix[id]); // et le clip du prix du produit var textureOver:MovieMaterial = new MovieMaterial(movieTexture,true,true); textureOver.oneSide = false;// cacher la face arrière (non) textureOver.interactive=true;// rendre interactif ob.material = textureOver; // puis on applique cette texture } } function outProduit(e:Event):void { // on redonne de la vitesse vitesse = 0.02; //on enlève le (ou les) filtres ob.filters = null; // on remet la première texture ob.material = texturePlane; } //intercepte l'erreur du chargeurXML function indiquerErreur(erreur:IOErrorEvent):void { throw new Error("Erreur lors du chargement : " + erreur.toString()); } //intercepte l'erreur du chargeurImage function handlerError(erreur:IOErrorEvent):void { throw new Error("Erreur lors du chargement : " + erreur.toString()); } //intercepte erreur du chargeur function errorhandler(erreur:IOErrorEvent):void { throw new Error("Erreur lors du chargement : " + erreur.toString()); } } } Puis je vous donne le Test.htm si vous voulez faire la comparaison entre IE et FF : Merci d'installer Flash et d'activer JavaScript dans votre navigateur. Merci

jpetre · Answer

Please SVP cette satanée animation me rend dingue..

cs_Burnside · Answer

Slt,

Je regarderai à ton problème ce soir, sinon sur la page d'accueil tu spécifies que le site est optimisé pour Firefox ou autre browser.

IE restera la bète noir des developpeur web, j'en connait un rayon rien que pour les CSS (IE6, IE7).

Bàt,
Burnside.
PS: moi pour mes developpements je teste sur FF3 et Safari (Windows et MAC)et IE7,  si ok je valide sinon tantpis pour les autres.


..:: Enjoy living in hell ::..
<img alt="flash " src="http://userbarscity.armatronic.com/userbars/41.png" wi="" align="middle" border="0" height="20" hspace="0" vspace=

jpetre · Answer

Salut Burnside !

Premièrement, franchement un énooorme et sincère merci !!! 
Car je commençais vraiment à me sentir seul et à desespérer de trouver une solution.

Ensuite effectivement IE c'est une vrai plaie  malheureusement mon "boss" veut absolument que cela fonctionne car la plupart de ses clients utilisent IE..

D'où la galère, j'ai essayé de voir si je trouvais des erreurs avec firebug mais non aucune, la je vois vraiment pas, donc si jamais tu trouve la solution je te serais vraiment très reconnaissant 

Et sinon tant pis, je te remercierais d'avoir tenté de résoudre mon problème et comme tu dis tant pis pour les autres ! (même le boss^^)

jpetre · Answer

Euuh désolé d'insister Burnside, mais tu n'aurais pas à tout hasard trouver une solution à mon problème ? (ou quelqu'un d'autre..)

AS3 problème sous IE avec une animation de type caroussel développée avec paperv

4 réponses

Votre réponse

Discussions similaires