9 Replies Latest reply on Oct 13, 2014 7:14 AM by Alain Nicolas

    Animation doens't appear…except if you reload the page

    Alain Nicolas Level 1

      Here is the situation : I have an AOM animation imported in Muse. In the Muse page I have some parallax effects (horizontal effects).

      To be a the right place at the right moment, the oam file must be placed inside a group (layers panel).

      But the problem is : when the animation is inside this group, it doesn't appear anymore in the navigator… except if you reload the page. This happens on all the navigators tested (firefox explorer chrome opera) but works on Safari.

      If I extract the animation of the group, it works (the animation is visible in a navigator) but because of the scroll effects the animation is completely outside the place I want it to be (and i don't succeed to place it well)

      To understand the problem you can have a look here (website not finished)

      http://studionikotest.businesscatalyst.com/

      You have to go the third icon called "graphisme" ... to see..hmmm... an empty place... and then reload the page to see what should be there at the very first time.

       

      If you have any idea how to turn around this bug.

      Niko

        • 1. Re: Animation doens't appear…except if you reload the page
          Devendra Kumar Adobe Employee

          Hi Alain,

           

          Thanks for your post. I have reviewed this  Studio Niko

          It is working fine, all the icons showing the image.

           

          Please try clearing the cache of the browser and let me know if it helps.

           

          Regards,

           

          Devendra

          • 2. Re: Animation doens't appear…except if you reload the page
            Alain Nicolas Level 1

            No sorry, it doesn't work fine.

            and it's not a question of cache … that's the first thing I tried. And because I still had a doubt about the cache, I asked a friend of mine who never saw the website before to have a look from his computer. And the problem is the same : the animation is not working when loaded for the first time. If you reload, it works.

            I made different tests and it took me a very long time before I discover that the problem was linked to the fact that the animation was in grouped layer. When placed outside of  the grouped layer the animation is working well … but of course it's not at all, at the right place (I remind that the layer has a parallax effect).

            Niko

            • 3. Re: Animation doens't appear…except if you reload the page
              Vinod Menon@Adobe Adobe Employee

              Hi Alan

               

              We are trying to repro it on our side.

               

              Regards
              Vinod

              • 4. Re: Animation doens't appear…except if you reload the page
                Alain Nicolas Level 1

                if it can help to reproduce the problem :

                I notice today that the same problem appears with the social icon "Like- from facebook".

                When this icon is inside a group, the icon doesn't appear.. and finally appears if reloading the page. This happens on a page with scrollable effects, I haven't tried yet if this occurs on a simple page.

                Regards

                Niko

                • 5. Re: Animation doens't appear…except if you reload the page
                  heathrowe Most Valuable Participant

                  Hi Alain, did you get this corrected?

                   

                  First time visit at the link I am seeing everything play as it should.

                   

                  Nice job, btw.

                  Darrell

                  • 6. Re: Animation doens't appear…except if you reload the page
                    Alain Nicolas Level 1

                    Hi Darrell

                    No, It's not corrected.

                    Do you use Firefox ? It works with Safari and someone told me -but didn't tested it myself- that the problem appears also with IE (don't know which version) and Chrome and Opera)

                    My version of Firefox is 32.0.3, running on a Mac OsX 10.8.5. My friend's test is also on a mac.

                    Just to make sure of what should happen, you may visit this link :

                    http://studionikotest.businesscatalyst.com/tests/studioniko_whatshouldhappen.pdf

                    Thank's for interesting

                    Niko

                    • 7. Re: Animation doens't appear…except if you reload the page
                      Alain Nicolas Level 1

                      Hi ,

                      Keep on looking for the bug, i made a very simplified version of the website trying to focus on the problem.

                      One scrollable page (with parallax effects), three parts, an oam animation imported exactly the same way in each part. One part, one layer in Muse. The Oam is grouped with other stuff (a rectangle, a text) in a layer which has a parallax effect.

                      Part 2 : the animation and the picto facebook

                      Part 3 : the animation and the picto facebook

                      Results : it works .. until a certain point. At the third part, the problem appears.

                       

                      You can have a look at the problem here :

                      Studio Niko

                       

                      Niko

                      • 8. Re: Animation doens't appear…except if you reload the page
                        joel_pau Level 5

                        Bonjour,

                         

                        Alors, j'ai regardé attentivement le problème Firefox.

                        J'ai comparé Firefox 33 avec Safari 7 sur du matériel Apple. Voici le résultat avec 2 captures d'écran.

                        1) Le cas Safari.

                        bookGraphiqueSafari.jpg


                        2) Le cas Firefox.

                        bookGraphiqueFirefox.jpg

                        En comparant les consoles des 2 navigateurs, on voit que Firefox charge bien l'animation mais ne lance pas (ou ne démarre pas) ladite animation (ou composition).

                        En revanche, l'animation test de votre dernier post démarre automatiquement.

                         

                        Donc, je compare les codes de l'animation test et de l'animation sur la page "le book graphique" avec le copié collé ci-dessous.

                        1) Le code de l'animation test :

                        (function($,Edge,compId){var Composition=Edge.Composition,Symbol=Edge.Symbol;Edge.registerEventBinding(compId,function($){

                        //Edge symbol: 'stage'

                        (function(symbolName){Symbol.bindTimelineAction(compId,symbolName,"Default Timeline","complete",function(sym,e){

                        sym.play();});

                        //Edge binding end

                        })("stage");

                        //Edge symbol end:'stage'

                        })})(AdobeEdge.$,AdobeEdge,"EDGE-6258079");

                         

                        2) Le code de l'animation "EDGE-5296186" dite "le book graphique":

                        (function($,Edge,compId){var Composition=Edge.Composition,Symbol=Edge.Symbol;Edge.registerEventBinding(compId,function($){

                        //Edge symbol: 'stage'

                        (function(symbolName){})("stage");

                        //Edge symbol end:'stage'

                         

                        //Edge symbol: 'testdefilant'

                        (function(symbolName){Symbol.bindTimelineAction(compId,symbolName,"Default Timeline","complete",function(sym,e){sym.play();});

                        //Edge binding end

                        })("testdefilant_2");

                        //Edge symbol end:'testdefilant_2'

                         

                        //Edge symbol: 'vignettes_defilantes_symbol'

                        (function(symbolName){})("vignettes_defilantes_symbol_1");

                        //Edge symbol end:'vignettes_defilantes_symbol_1'

                        })})(AdobeEdge.$,AdobeEdge,"EDGE-5296186");

                         

                        La différence entre les 2 animations vient du contenu de la fonction "stage" à savoir ceci : (function(symbolName){})("stage");

                        Dans le cas de la panne, la fonction stage est vide :

                        //Edge symbol: 'stage'

                        (function(symbolName){})("stage");

                        //Edge symbol end:'stage'

                        Dans le cas où ça marche, la fonction stage contient du code (en rouge) :

                        //Edge symbol: 'stage'

                        (function(symbolName){

                        Symbol.bindTimelineAction(compId,symbolName,"Default Timeline","complete",function(sym,e){ sym.play(); });

                        //Edge binding end

                        })("stage");

                        //Edge symbol end:'stage'

                        On note que l'animation qui marche sur Firefox contient une instruction de démarrage : sym.play() pour boucler l'animation.

                         

                        Conclusion:

                        D'où l'idée de forcer le démarrage de l'animation en panne sur Firefox à savoir "EDGE-5296186".

                        Comment ? En ajoutant du code de démarrage dans la scène principale.

                        Par exemple, vous pouvez créer un déclencheur (trigger) au point 0 avec un code qui lance le symbole qui est en boucle avec getSymbol("le nom").play(0).

                        Pour faire la boucle, vous avez ouvert le panneau de code "complete" et écrit sym.play(). Ajoutez un zéro : sym.play(0) pour forcer le démarrage au départ.

                        Donc, en résumé, mon idée est de forcer le démarrage pour que ça marche aussi sur Firefox.

                        • 9. Re: Animation doens't appear…except if you reload the page
                          Alain Nicolas Level 1

                          Bonjour,

                          Tout d'abord merci pour l'intérêt porté à mon problème.

                          Fort de ce nouveau savoir j'ai effectué plusieurs tests dans le sens indiqué, à savoir forcer le démarrage. Cela ne marche pas plus, mais je vais y revenir juste après ; au préalable j'étais étonné de voir que mon test simplifié déposé marchait ("En revanche, l'animation test de votre dernier post démarre automatiquement."). ????

                          Je m'en vais voir et effectivement…cela marche…ou presque. Et là ça se complexifie sur la logique de la chose.

                          • Mon lien transmis atterrit directement sur l'ancre #graphisme (appelée page3) et dans ce cas cette animation en page3 se lance bien…… mais lorsqu'on clique sur un des boutons du haut  pour passer sur l'ancre #home (appelée page1) celle-çi ne se lance pas .. ah ?

                          • 2e element qui confirme ce souci : lorsque je clique sur un lien qui atterrit directement sur le haut de la page, l'animation page1 se lance bien .. et .. vous l'aurez deviné, en passant par le bouton en haut pour aller sur l'ancre #graphisme l'animation page3 ne se lance pas

                          Ancre home : Studio Niko

                          Ancre graphisme : Studio Niko

                          et comme d'habitude, tout marche après reload.

                           

                          Pour revenir sur les tests effectués : j'ai effectué le test sur le fichier simplifié

                          j'ai rajouté sur la time line un déclencheur avec un sym.play(0), essayé également avec une etiquette "debut" (oui, sans accent :-)). Comme je n'ai pas de symbole, j'ai essayé également avec un $("mousqueton2") qui est le nom du premier élément rencontré sur la time line (au point 0)

                          J'ai essayé également avec un chemin d'accès depuis le départ :

                          sym.getComposition().getStage().$("mousqueton2").play(0); (et sans l'élément) sym.getComposition().getStage().play(0);

                          J'ai essayé également dans le panneau d'action des propriétés du stage,  un sym.play (0) sur un compositionReady (sur le coup, pas trop sur de moi pour le choix du déclencheur)


                          J'ai bien mis un 0 dans le sym.play(0) du complete ; j'ai également essayé avec le nom de l'etiquette. (sur cette partie je n'ai pas trop essayé dans tous les sens car une fois lançée l'animation retourne bien à son point de départ et continue sans souci.

                           

                          Mais rien n'y a fait... il y a toujours besoin d'un reload pour que l'animation se déclenche.

                           

                          Cordialement,

                          Alain