12 Replies Latest reply on Sep 16, 2013 11:55 AM by oliverS

    replace code in timeline of a symbol

    oliverS Level 1

      My question is:

       

      I built a symbol and name it videoholder. Inside the symbol i draw a Rectangel and

      named it: Rectangel.

      Iput the following code on the first frame/millisecond:

       

      var video_path = sym.$("Rectangel");

      video_path.html('<video width= "750" height= "421" src = "example.mp4" type = "video/mp4" controls= "controls" </video>');

       

      Then I delete the symbol from the stage.

       

      Now I placed different images as symbols on the stage.

      When I click on these images i get the videoholder_image on the stage via createChildSymbol from the library.

       

      What I want is to put a code on each image_symbol which allows me to change the code

      inside the videoholder Rectangel:

       

      var video_path = sym.$("Rectangel");

      video_path.html('<video width= "750" height= "421" src = "example_new.mp4" type = "video/mp4" controls= "controls" </video>');

       

       

       

      I appreciate any hlep

        • 1. Re: replace code in timeline of a symbol
          AMULI Level 4

          Hi Oliver,

           

          Define a global function in your Stage.compositionReady event handler :

           

          sym.chooseVideo = function( radical)

          {

            // build the <video> tag by concatenation

            var video_tag = '<video width= "750" height= "421" src = "';

            video_tag += radical;

            video_tag += '.mp4" type = "video/mp4" controls= "controls" </video>';


            var video_path = sym.$("Rectangle");

            video_path.html( video_path);

          }

           

          Then, call this function inside each of your symbols (may be in the creationComplete event handler ?). For example :

           

          sym.getComposition().getStage().chooseVideo( 'example_new');

           

          Gil

          • 2. Re: replace code in timeline of a symbol
            oliverS Level 1

            special thanks Gil, but no chance for some reason it does not work.

             

            Here is a link of a verry clean example of the project to download, maybe you could have a look where is my fault:

             

            http://go-motion.net/upload/examples/06/EX06.zip

             

             

            Thank you verry much

            • 3. Re: replace code in timeline of a symbol
              AMULI Level 4

              1) Your project is difficult to decipher with elements named Rectangle or TextCopy. Give descriptive names, or yourself will get lost when opening your own project in a few months

               

              It's more legible when instance names correspond to the name of the symbol. For example videoHolder_1 instance of videoHolder (and if there is a second instance, you name it videoHolder_2).

               

              2) Do not use a trigger sym.stop() at 0 ms. Instead uncheck the autoplay property of the symbol (may be the stage symbol).

               

              3) In your symbol videoholder, you used a trigger at 0 ms. A good place for initialization is the creationComplete event handler of the symbol.

               

              But for now this code should be commented out as it will be replaced by the execution of function chooseVideo.

               

              4) Why are you using Tweenmax ? The primary interest of Edge Animate is to easily tween in the timeline.

               

              5) work-all > work01 : looks like useless, a second work-all.

               

              6) First error. In your videoholder > trigger at 0 ms : sym.$("Rectangel")

              But in the function chooseVideo : sym.$("Holder"); // should be "Rectangel"

               

              7) Second error. you define the global function but nowhere it is called !

               

              *

               

              So, tabula rasa. A works symbol nests two symbols w_01 and w_02, the access buttons to each of the two videos.

               

              A videoHolder symbol contains

              - a headline element, text that will receive the title ;

              - a videoFrame element, rectangle that will hold the <video> tag ;

              - a back_btn symbol.

               

              The stage has its autoplay property set to false. Clicking on either of the buttons plays at label video where videoHolder_1 slides up (and works has its display property set to none). A sym.stop() trigger at the end position.

               

              Capture d’écran 2013-09-14 à 23.42.34.png

               

              document.compositionready event handler :

               

              sym.chooseVideo = function( numChoice)

              {

                var radical = "";

                var title = "";

                switch( numChoice)

                {

                  case 1:

                    radical = "video1";

                    title = "This is video 1";

                    break;

                  case 2:

                    radical = "video2";

                    title = "And this one is video 2";

                    break;

                }

                // build the <video> tag by concatenation

                var video_tag = '<video width="750" height="421" src="video/';

                video_tag += radical;

                video_tag += '.mp4" poster="video/';

                video_tag += radical;

                video_tag += '.png" type="video/mp4" controls="controls" </video>';

               

                var video_H = sym.getSymbol( 'videoHolder_1');

                video_H.$('videoFrame').html( video_tag);

                video_H.$('headline').html( title);

               

                sym.play( 'video');

              }

               

              works > w_01.click event handler :

               

              sym.getComposition().getStage().chooseVideo( 1);

               

              works > w_02.click event handler :

               

              sym.getComposition().getStage().chooseVideo( 2);

               

              Download the example here : https://app.box.com/s/ykrvwvy3fclrdbwbwxff

               

              Gil

              • 4. Re: replace code in timeline of a symbol
                resdesign Adobe Community Professional & MVP

                All 1) through 7) are very good guidelines Gil!

                • 5. Re: replace code in timeline of a symbol
                  AMULI Level 4

                  Thanks, Marie

                  • 6. Re: replace code in timeline of a symbol
                    oliverS Level 1

                    So first of all Gil,

                     

                    thank you verry much for your time. And thanks for the detailed explaination.

                     

                     

                    There are reasons why tried to put in the TweenMax topic, but I know it is a long way to go...

                     

                    and why there is a nested work01 in a work_all

                     

                    (cause there are more work02, work03 ...) but I put them out to make the example smaller.

                     

                    And yes, you are completly right, that I have to work more precisely in my naming of elements and symbols.

                     

                     

                    Whatever, the creativeChild topic is important for me (for the project and for keeping my brain vital)

                     

                    So I took your example (by the way  - for those who download the example -  you have to change the video in case 1 and 2 name from video1 into video01)

                     

                    and I tryed to put in a crativeChild code for the viedoHolder and leave your videoHolder on the stage

                     

                    As you can imagine your code on frame_button 2 works very well and the new code on frame_button 01 does not work, but why? .

                     

                     

                    The code:

                    var videoHolder_cr = sym.getComposition().getStage().createChildSymbol("videoHolder", "Stage");

                    var videoHolder_sym = videoHolder_cr.getSymbolElement();

                     

                    sym.getComposition().getStage().videoHolder_sym.getStage().chooseVideo(1);

                     

                     

                    The symbol is placed on the stage but the chooseVideo function does not work.

                     

                    Maybe you can help me again,

                     

                    THX in advance

                    • 7. Re: replace code in timeline of a symbol
                      AMULI Level 4

                      var videoHolder_sym = videoHolder_cr.getSymbolElement();

                       

                      As you name your variable videoHolder_sym, I can deduce that your intent is to have a handle on a symbol. But getSymbolElement() gives you the underlying DOM element, which is different.

                       

                      More on this in the following thread : http://forums.adobe.com/message/5649189#5649189

                       

                      sym.getComposition().getStage().videoHolder_sym.getStage().chooseVideo (1);

                       

                      sym.getComposition().getStage() takes you back to the root symbol (Stage) level, where the function is defined, so that as I already showed you sym.getComposition().getStage().chooseVideo (1); is ok.

                       

                      If the symbol from where you call the function is a direct child of the Stage, an alternate statement would be sym.getParentSymbol().chooseVideo (1);

                       

                      Gil

                      • 8. Re: replace code in timeline of a symbol
                        oliverS Level 1

                        Hm....

                         

                        I think my english is to bad to explain it correctly

                        have a look:

                         

                        http://go-motion.net/upload/examples/07/07/GO_2.html

                         

                         

                        for download:

                        http://go-motion.net/upload/examples/07/EX07.zip

                         

                        In this example the createChild videoHolder fades out when you click on the first button, but just for the reasen to show me that it reacts,

                        but the chooseVideo code does work perfectly - or in other words, for the wrong videoHolder

                        • 9. Re: replace code in timeline of a symbol
                          AMULI Level 4

                          but the chooseVideo code does work perfectly

                           

                          You mean does not ?

                           

                          or in other words, for the wrong videoHolder

                           

                          There is only one videoHolder ?!? See the example.

                           

                          You've got all the keys, Oliver. It's up to you to clean and organize your project.

                           

                          I already spent much time trying to understand your logic in a muddled source. By now, it's sunday and I am working to honor my clients

                           

                          I remain open to your questions, provided that they are precise. And you will experience that precisely formulating the problem to somebody else is half way to the solution ; and better, this often makes you find it yourself Persevere !

                           

                          Gil

                          • 10. Re: replace code in timeline of a symbol
                            oliverS Level 1

                            OK accepted and understood everything you said.

                            And again I am thankfull for your answers and your time.

                             

                            Why does this line of code talk/(work fine) to my createdChild videoHolder:

                             

                            videoHolder_sym.animate({opacity: 0}, 50000);

                             

                             

                            My question : but why does the other line of code not talk to my createdChild videoHolder (no reaction):

                             

                            videoHolder_sym.chooseVideo (1);

                             

                            But when I change the last code line to:

                            sym.getComposition().getStage().chooseVideo (1)

                             

                            and I put the videoHolder on the stage manually -

                            then it works:

                            The headlines changes and the video plays

                             

                             

                            In my view, I can´t adress the videoHolder correctly!

                            But why does the videoholder fade out when I use the first code?

                             

                            videoHolder_sym. do this/fade out (works)

                            videoHolder_sym. do that/get the function (does not work)

                             

                            Acctualy I do not see the difference

                             

                            http://go-motion.net/upload/examples/07/07/GO_2.html

                             

                             

                            THX

                            • 11. Re: replace code in timeline of a symbol
                              AMULI Level 4

                              Hi Oliver,

                              And again I am thankfull for your answers and your time.

                               

                              Ironically, one of your questions was marked as correct

                              videoHolder_sym.chooseVideo (1);

                               

                              sym.getComposition().getStage().chooseVideo (1)

                              Global function chooseVideo is defined in the stage symbol.

                               

                              The first statement accesses an instance of the videoHolder symbol, where no function chooseVideo can be found.

                               

                              The second statement accesses the stage symbol where the function is found. That easy

                               

                              I insist on the fact that you should study the two blog posts by David Deraedt (links in the thread pointed to in my post 7) : I feel you have not a clear understanding of the symbols hierarchy.

                               

                              Be reassured : it was far from obvious for me as well when having my first steps in Edge programming

                               

                              Gil

                              • 12. Re: replace code in timeline of a symbol
                                oliverS Level 1

                                ok I will work on it