8 Replies Latest reply on Aug 8, 2014 10:18 AM by Eddie Ostrowski

    Why isn't a layered animation visible on top of a movie when you Preview in Browser?

    Eddie Ostrowski Level 2
      • I'm using the latest version of EA CC (2014)
      • Imported a video
      • Converted it into a symbol
      • Added a controller... plays fine on its timeline, or Preview in Browser

       

      Then, I did the following...

      • Double-clicked the symbol of the video
      • Created an animation to play on top of it
      • Everything previews fine on the symbol's timeline

       

      Here's the problem...

      • When I Preview in Browser, the video plays fine, but the animation that I layered on top, is not visible at all
      • Please advise, thanks.
        • 1. Re: Why isn't a layered animation visible on top of a movie when you Preview in Browser?
          jbowden Adobe Employee

          Hi Eddie,

           

          That shouldn't be happening, and I can't reproduce the problem as reported.

           

          Can you add more detail to reproduce the problem, or post a link to your composition?

           

          Thanks,

          Joe

          • 2. Re: Why isn't a layered animation visible on top of a movie when you Preview in Browser?
            Eddie Ostrowski Level 2

            Joe,

             

            Just sent you a zipped folder via Dropbox… hope you receive it OK. Thank you for your assistance, much appreciated.

             

            And, you are correct… I don’t believe this should be happening.

             

            When you watch it via the timeline, everything is OK. It’s when you watch it via Preview In Browser, it does not appear (Callout_01).

             

            Eddie

             

            Eddie Ostrowski

            Pitney Bowes Inc. | Multimedia Specialist

            Global Knowledge and Content Management

            37 Executive Drive | Danbury, CT  06810 USA

            Internal:  8.796.6691 | External:  203.796.6691

            • 3. Re: Why isn't a layered animation visible on top of a movie when you Preview in Browser?
              jbowden Adobe Employee

              Thanks Eddie.

               

              However, the link you sent to the folder in Dropbox is empty. Is the zip file still uploading? Or can you check on the folder in Dropbox?

               

              Thanks,

              Joe

              • 4. Re: Why isn't a layered animation visible on top of a movie when you Preview in Browser?
                Eddie Ostrowski Level 2

                Joe.

                 

                Will do in an hour… in a meeting from 1 > 2. Thanks.

                 

                Eddie

                 

                Eddie Ostrowski

                Pitney Bowes Inc. | Multimedia Specialist

                Global Knowledge and Content Management

                37 Executive Drive | Danbury, CT  06810 USA

                Internal:  8.796.6691 | External:  203.796.6691

                • 5. Re: Why isn't a layered animation visible on top of a movie when you Preview in Browser?
                  jbowden Adobe Employee

                  Hi Eddie,

                   

                  Got your composition - thanks for uploading it.

                   

                  The reason why you don't see your animation in the symbol is that the symbol has "Autoplay" unchecked, and your code in Btn02 doesn't tell the symbol to play. Therefore, you don't see your animation, because the symbol isn't playing - just the video is displayed. Try this instead (one line of new code in blue, my comments in green):

                   

                  // insert code for mouse click here

                  // Play an audio track

                  sym.$("Technology_Radio_Button_Clicking_012")[0].play();

                   

                   

                  // Show an element

                  sym.$("Ani_02").show();

                   

                  // JB: Play the symbol

                  sym.getSymbol("Ani_02").play();

                   

                   

                  // Show an element

                  sym.$("MenuButton").show();

                   

                  // JB - Not sure if you need this next round of code? Did you want the video to skip backward by 10% when this button is clicked?

                  // Skip a video track backward by 10% of its total duration

                  sym.getSymbol("Ani_02").$("Vantage_FeedAssembly_Ani_02")[0].currentTime = sym.getSymbol("Ani_02").$("Vantage_FeedAssembly_Ani_02")[0].currentTime + ((-100/100) * sym.getSymbol("Ani_02").$("Vantage_FeedAssembly_Ani_02")[0].duration);

                   

                  Let me know if anything is unclear.

                   

                  hth,

                  Joe

                  1 person found this helpful
                  • 6. Re: Why isn't a layered animation visible on top of a movie when you Preview in Browser?
                    Eddie Ostrowski Level 2

                    Joe,

                     

                    Almost there…

                     

                     

                     

                     

                     

                    I added this and understand why… “Callout_01” now appears and plays:

                     

                    // JB: Play the symbol

                     

                    sym.getSymbol("Ani_02").play();

                     

                     

                     

                     

                     

                    I initially put this in because if you click the animation as it’s playing, it’ll bring you back to Home. Then, if you click “Button_02” again, the video will play from the beginning. If you take it out, it will not play from the beginning. I should have changed the comment to read 100% instead of 10%... my fault. Joe, since you questioned it, I replaced it with a shorter piece of code that accomplishes the same thing (see below).

                     

                    // Skip a video track backward by 100% of its total duration

                     

                    sym.getSymbol("Ani_02").$("Vantage_FeedAssembly_Ani_02")[0].currentTime = sym.getSymbol("Ani_02").$("Vantage_FeedAssembly_Ani_02")[0].currentTime + ((-100/100) * sym.getSymbol("Ani_02").$("Vantage_FeedAssembly_Ani_02")[0].duration);

                     

                    // EO: Replaced the above with this > Play the timeline at a label or specific time. For example:

                     

                    // sym.play(500); or sym.play("myLabel");

                     

                    sym.getSymbol("Ani_02").play(0);

                     

                     

                     

                    I added these two after making the above changes. Because if you went back to Home and repeatedly clicked “Button02”, “Callout_01” would not show/play.

                     

                    // EO: Show an element

                     

                    sym.getSymbol("Ani_02").$("Callout_01").show();

                     

                     

                     

                    // EO: Play the timeline at a label or specific time. For example:

                     

                    // sym.play(500); or sym.play("myLabel");

                     

                    sym.getSymbol("Ani_02").getSymbol("Callout_01").play(0);

                     

                     

                     

                     

                     

                    Here’s the end of the puzzle, almost there… Previewing in browser, you click “Button02”, “Ani_02” starts to play. However, before “Callout_01” appears (at 55 sec mark), you click the Pause Button on the Controller. After a short pause (let’s say 3 sec), you click the Play Button on the Controller. As the video continues to play, you’ll notice that the Pause Button on the Controller had no effect on “Callout_01” to also stop playing… it will appear prematurely however long the pause was.

                     

                    Apologize for being so wordy, but it’s the only way I can describe what is/is not happening.

                    • 7. Re: Why isn't a layered animation visible on top of a movie when you Preview in Browser?
                      jbowden Adobe Employee

                      Hi Eddie,

                       

                      I think I understand. Here's the thing: the video element controls has nothing at all to do with the symbol timeline - it's only meant to control the video element (it's actually the native media controller that each HTML5 browser provides for video & audio elements - you may have noticed it looks different in different browsers). So when you pause your video, the symbol timeline keeps playing.

                       

                      Is it critical for there to be the default controls for the video? If not, I'd omit them and just control the video playback with the playback actions, or with your own code. With some buttons and code, you can pause/play the video element as well as the symbol timeline in the same button clicks - this is the easiest way to keep the video and symbol timeline in sync.

                       

                      hth,

                      Joe

                      • 8. Re: Why isn't a layered animation visible on top of a movie when you Preview in Browser?
                        Eddie Ostrowski Level 2

                        Joe,

                         

                        It is not critical to use the default controls… just a nice “to have”. One “Pause/Play” button should do it… easy.

                        Love using the enhanced Actions editor… can’t wait to see what the next version brings.

                         

                        Again, thank you for your help… much appreciated.

                         

                        Eddie