6 Replies Latest reply on Feb 5, 2016 1:09 AM by Nebulous Dawn

    Flash to html5 canvas - can I communicate from canvas to parent page?

    Nebulous Dawn Level 1

      I have several buttons inside my canvas. I want them, when clicked, to make a hidden div visible on the parent html page, and then scroll to the correct point in that div. Is there a way to do this - a general way to communicate via js from within a canvas to the parent html page?

        • 1. Re: Flash to html5 canvas - can I communicate from canvas to parent page?
          kglad Adobe Community Professional & MVP

          yes, just stub in some code for your button in flash pro and publish.

           

          find that code in the published js file and substitute the stubbed code for the code to make your div visible.

          • 2. Re: Flash to html5 canvas - can I communicate from canvas to parent page?
            ClayUUID Adobe Community Professional

            It's not only possible, it's trivial. What Flash generates in Canvas mode is bog-standard HTML and JavaScript. Execution of the page is not managed from "within" the canvas. The canvas is literally just a "<canvas>" tag that Flash (via the CreateJS library) draws on. All control is managed by included JS libraries and whatever code you write yourself. This is not like AS2/AS3 where you're forced to communicate with JS via an intermediate layer. In Canvas mode it's all just one big happy JS family. So for your button you could have something like:

             

            function fl_MouseClickHandler() {
                myDiv = document.getElementById("myDiv");
                //do whatever to the div
            }
            
            • 3. Re: Flash to html5 canvas - can I communicate from canvas to parent page?
              Nebulous Dawn Level 1

              Thanks, it is working fine now. Bit strange though.  Originally, as a test (before contacting the forum), I had

               

              $("#overlay-div").css("display","block");

               

              in my Flash file, but when published this created an error - the console said something along the lines of the "#' being illegal I think.

               

              So I asked my question on the forum.

               

              After reading your answers I replaced the jquery with plain js along the lines you suggested and it worked. As I could not see why the js worked where the jquery did not I put it back into jquery for one last try. Lo and behold it did not break.

               

              So I now have a Flash file with identical code to the one I started with but now it is working. Very strange.

               

              Thanks though, somehow your comments seem to have had the required effect - I'd love to know what changed though to make it start working.

              • 4. Re: Flash to html5 canvas - can I communicate from canvas to parent page?
                kglad Adobe Community Professional & MVP

                i find it much easier to stub in code like the following 4 lines in flash pro:

                 

                myjsbutton.addEventListener('click',jsF);

                function jsF(e){

                //

                }

                 

                and then search the published js file for that code, replace the // with the js code i want (and i like to use jquery), save and test.

                • 5. Re: Flash to html5 canvas - can I communicate from canvas to parent page?
                  ClayUUID Adobe Community Professional

                  Nebulous Dawn wrote:

                   

                  Thanks, it is working fine now. Bit strange though.  Originally, as a test (before contacting the forum), I had

                   

                  $("#overlay-div").css("display","block");

                   

                  in my Flash file, but when published this created an error - the console said something along the lines of the "#' being illegal I think.

                   

                  I'm going to guess it didn't work when you ran the page because the jQuery library wasn't getting loaded.

                   

                  kglad wrote:

                   

                  i find it much easier to stub in code like the following 4 lines in flash pro:

                  and then search the published js file for that code, replace the // with the js code i want (and i like to use jquery), save and test.

                   

                  How on earth is it easier to manually search and replace a block of code every single time you publish the page, vs just putting the code in the page?

                  • 6. Re: Flash to html5 canvas - can I communicate from canvas to parent page?
                    Nebulous Dawn Level 1

                    Yes, I think it must have been that the jquery hadn't loaded rather than that there was something wrong with the code itself.

                     

                    I am not sure I understand kglad's idea, but he knows a lot more than me so I will bear it in mind.

                     

                    Anyway, all working now so thanks.