16 Replies Latest reply on Jul 13, 2017 2:48 PM by kglad

    How to call function in container page?

    Pete47

      I am using the initial release of Animate CC to produce an HTML5/Canvas OAM package for use in Captivate.

       

      I found the thread where the topic of finding an object in the containing HTML page and changing a property. That makes sense because it is finding and manipulating an object in the DOM.

       

      How would you call a js function in the containing HTML page? I'm guessing it is just as simple, but I'm having trouble getting started with an example.

       

      If my Animate composition wants to call a JS function in the containing HTML page called"parentContainerCall()" what is the correct syntax within the Animate composition?

        • 1. Re: How to call function in container page?
          kglad Adobe Community Professional & MVP

          just call it.

           

          ie, if you have:

           

          <script>

          function testF((){

          //

          }

          </script>

           

          in your html page, in your canvas timeline you can use:

           

          testF();

           

          to call that js function

          2 people found this helpful
          • 2. Re: How to call function in container page?
            Pete47 Level 1

            That does sound easy... I've set up a test and it is failing at the moment.

             

            The resulting code in the javascript file created during the publish action, looks like this so I know Animate CC is generated the expected call in the OAM.

             

            // timeline functions:
            this.frame_0 = function() {
            mainThis = this;
            mainThis.SendMessage.addEventListener("click", ph_CallExternalFunction);
            function ph_CallExternalFunction()
            {
            alert("Mouse clicked");
            parentContainerCall()
            }
            }

             

            The script in the html page where I've added the Animate CC OAM file looks like this:

             

            <body>

            <script>

            function parentContainerCall(){

              alert("call to parent page received");

            }

            </script>

            <object id="EdgeID" type="text/html" width="570" height="420" data-dw-widget="Edge" data="animation_assets/ThimbleDemoAnimateCC/Assets/ThimbleDemoAnimateCC.html">

            </object>

            </body>

             

            When tested, as a web page using LocalHost under IIS, the page loads and I see the alert message from the Animate CC OAM file called by the HTML page, but the call to the parent HTML page fails. Apparently, the  function call I'm trying to make is undefined.

             

            parrentContainerCall.png

             

            Wondering if there is more syntax to be paid if I want to make such a call. Thoughts?

            • 3. Re: How to call function in container page?
              kglad Adobe Community Professional & MVP

              i don't know about your test environment, but open your html page in a web browser and test.

              • 4. Re: How to call function in container page?
                Pete47 Level 1

                My current testing environment is with a browser (IE11 in this case) accessing the localhost. I use it routinely to test web pages for clients so I'm certain the code is being treated as if it were hosted on a commercial web server. So there is something else wrong with my test page and OAM file. Animate CC throws a number of compiler errors but produces the OAM package file.

                 

                complieErrros.png

                 

                 

                All the code in this FLA file is:

                 

                mainThis = this;

                 

                mainThis.SendMessage.addEventListener("click", ph_CallExternalFunction);

                 

                function ph_CallExternalFunction()

                {

                  alert("Mouse clicked");

                  parentContainerCall()

                }

                 

                Examining the output files in the OAM file suggests the calls are being produced as expected. Hard to tell if the compiler error are related to whatever is preventing this from working or not.

                • 5. Re: How to call function in container page?
                  Colin Holgate MVP & Adobe Community Professional

                  I read in another topic something about those compiler errors, and that they don't matter in this case.

                   

                  In Captivate, aren't OAM items effectively iframes? The parent of a CreateJS canvas would be the iframe, if it's in one, and not the page that the iframe is in.

                  • 6. Re: How to call function in container page?
                    Pete47 Level 1

                    Yes, a staff member told me to ignore the compile errors and I have. At least this time, Animate CC will actually generate the OAM file.

                     

                    I don't know about Captivate and iframes. I haven't reached that point in this effort; I've started with a standard HTML page for this test. However, I recall reading something about iframes with Captivate.

                     

                    There are a lot of things about Captivate that are disappointing for anyone trying to go beyond the limits of the existing Captivate system. For example, I learned that I can't edit a text field object in the published Captivate content because everything, including text, is published as graphics so it looks the same on all devices and browsers.

                    • 7. Re: How to call function in container page?
                      kglad Adobe Community Professional & MVP

                      so, this thread is closed and your question has been answered?

                      • 8. Re: How to call function in container page?
                        Pete47 Level 1

                        No, it shouldn't be closed. I've not been successful in calling a function in the containing HTML page yet. Hoping for some other ideas to help make this work. Perhaps someone else has done this and can provide some details.

                        • 9. Re: How to call function in container page?
                          kglad Adobe Community Professional & MVP

                          it works for me, and i suspect the problem is your test environment.

                           

                          again, open the html file in a browser.  any problem?

                           

                          addendum:  are you using edge animate?  if so, you're posting in the wrong forum.

                          • 10. Re: How to call function in container page?
                            Pete47 Level 1

                            I am certain the problem is not with my test environment. I've uploaded it to a commercial web server with the same results.

                             

                            I suspect the problem is with how I've coded this or how I've added the OAM file to the HTML page. I won't be able to work on this any further for a few days. When I do understand the problem, I'll update this thread with details on what I was doing wrong, or what I had to do, to make it work.

                             

                            I've suspended work with Edge Animate because it is no longer supported.

                            • 11. Re: How to call function in container page?
                              kglad Adobe Community Professional & MVP

                              if you're not using edge animate, why is there code shown in message 2 that references edgeID?  that's not something i've seen flash/animate publish.

                               

                              here's complete code published by animate pro using my suggestion (and that works):

                               

                              html (the lines in bold, defining testF1, testF2 and testF3 were added by hand after publication):

                              <!DOCTYPE html>

                              <html>

                              <head>

                              <meta charset="UTF-8">

                              <title>test</title>

                              <!-- write your code here -->

                               

                               

                              <script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>

                              <script src="test.js?1455985370154"></script>

                              <script>

                              var canvas, stage, exportRoot;

                              function init() {

                                  // --- write your JS code here ---

                                 

                                  canvas = document.getElementById("canvas");

                                  exportRoot = new lib.test();

                               

                                  stage = new createjs.Stage(canvas);

                                  stage.addChild(exportRoot);

                                  stage.update();

                               

                                  createjs.Ticker.setFPS(lib.properties.fps);

                                  createjs.Ticker.addEventListener("tick", stage);

                              }

                              function test1F(){

                                  console.log('test 1');

                              }

                              function test2F(){

                                  console.log('test 2');

                              }

                               

                              </script>

                               

                              <!-- write your code here -->

                               

                              </head>

                              <body onload="init();" style="background-color:#D4D4D4;margin:0px;">

                                  <script>

                                  function test3F(){

                                      console.log('test 3');

                                  }

                                  </script>

                                  <canvas id="canvas" width="550" height="400" style="background-color:#FFFFFF"></canvas>

                              </body>

                              </html>

                               

                              js:

                               

                              (function (lib, img, cjs, ss) {

                               

                              var p; // shortcut to reference prototypes

                               

                              // library properties:

                              lib.properties = {

                                  width: 550,

                                  height: 400,

                                  fps: 24,

                                  color: "#FFFFFF",

                                  manifest: []

                              };

                               

                               

                               

                              // symbols:

                               

                               

                               

                              // stage content:

                              (lib.test = function(mode,startPosition,loop) {

                                  this.initialize(mode,startPosition,loop,{});

                               

                                  // timeline functions:

                                  this.frame_0 = function() {

                                      test1F();

                                      test2F();

                                      test3F();

                                  }

                               

                                  // actions tween:

                                  this.timeline.addTween(cjs.Tween.get(this).call(this.frame_0).wait(1));

                               

                              }).prototype = p = new cjs.MovieClip();

                              p.nominalBounds = null;

                               

                              })(lib = lib||{}, images = images||{}, createjs = createjs||{}, ss = ss||{});

                              var lib, images, createjs, ss;

                              2 people found this helpful
                              • 12. Re: How to call function in container page?
                                Colin Holgate MVP & Adobe Community Professional

                                Is it even possible to use OAM directly with HTML? The compatibility remarks mention InDesign, Dreamweaver, and Muse (and I know some have used Captivate). Are you building the page with one of those tools?

                                • 13. Re: How to call function in container page?
                                  Pete47 Level 1

                                  The "edgeID" reference we see is in the code from my first example posted earlier in this thread, is produced automatically by Dreamweaver 2015 CC when I added the OAM file. In another posting, I asked about the compatibility remarks within the OAM, not including Captivate and someone replied saying they had asked the dev team. I've not heard anything further on that query.

                                   

                                  There are a large number of users including OAM files with their Captivate work. Those OAM files were produced with Edge Animate CC. I've tested my Animate CC OAM files with Captivate and they work fine up to a point. Meaning, I've not taken the next step of trying to call a function in the container file produced by Captivate. I am trying to take this one step at a time by focusing on a simple HTML page first.

                                   

                                  Colin, you ask a good question. Dreamweaver allows me to easily add the OAM file and even goes so far as to un-compress and copy the contents of the OAM file that Animate CC generates, when it the OAM file is added via the Dreamweaver GUI. That suggests Dreamweaver is prepared to use an OAM file. But I'm not betting on it without further confirmation from Adobe.

                                   

                                  If not, then perhaps that is why I've not been able to embed a function call in my Animate CC OAM file that successfully calls a javascript function in the Dreamweaver produced HTML, containing file.

                                   

                                  (in this context, I have to agree with whoever complained about the new name being too close to other products... this can easily be very confusing when talking about Animate CC and Edge Animate CC)

                                  • 14. Re: How to call function in container page?
                                    Colin Holgate MVP & Adobe Community Professional

                                    I heard back about the remarks thing. It seems that some programs use those remarks to decide it the file is compatible. A program not being included doesn't necessarily mean it's not compatible, it may mean that the program doesn't check the remarks tag.

                                     

                                    In other words, if it works, then it's compatible.

                                    • 15. Re: How to call function in container page?
                                      digitalmaniak_ Level 1

                                      I had the same issue and this worked for me. Pretty straight forward.

                                      Thanks.