9 Replies Latest reply on Apr 6, 2016 7:51 AM by stephaniek64991887

    When Is It Best To Use Canvas and When Is It Best To Use OAM?

    stephaniek64991887 Level 1

      I'm still struggling with this question.  I've asked it before here and am still not clear on the following.

       

      You've created something in Animate CC 2015 and you want to put it on an HTML page using Dreamweaver.

       

      How do you decide whether to use Canvas or OAM?  This question suggests the need for some type of a checklist or help page assisting users with this decision.

       

      Are there certain advantages or disadvantages to either approach?  If so, what are they?  Does one lend itself to certain functionalities that the other does not?

       

      And while insertion of OAM with Dreamweaver is covered in an Adobe online document, it appears that a comparable help document for Canvas insertion in Dreamweaver is not available.

       

      Animate CC 2015 is a powerful tool for creating online experiences on the web.  It would be helpful to have clarity on these questions.

       

      Please advise.

       

      Thank you.

        • 1. Re: When Is It Best To Use Canvas and When Is It Best To Use OAM?
          VivekP Adobe Employee

          Hello,

           

          First of All  would like to explain what is OAM file. OAM file is nothing but a package of the HTML files (Canvas files that you publish by selecting javascript/html in publish settings) that is recognised by adobe applications such as Dreamweaver, Muse and InDesign. Using OAM file in Adobe Applications saves some addition works as Adobe applications place them automatically creating required codes and directories.

           

          Please look at the link below that explains how to insert OAM file in Dreamweaver.

          Export OAM files from Animate CC for use in Dreamweaver and Adobe Muse | Adobe Dreamweaver CC tutorials

           

          Please feel free to get back to me in case you need more help on the same.

           

          Regards,

          Vivek

          • 2. Re: When Is It Best To Use Canvas and When Is It Best To Use OAM?
            rosebudd Level 3

            My 2 cents is that HTML is not that hard, and everyone would benefit from looking at code. Once you try it, you realize that the createjs HTML output file, is human readable, and not hard to undeastand. Some of the Animate output will go in the head, and sme will go in the body.  Just copy and paste.

            • 3. Re: When Is It Best To Use Canvas and When Is It Best To Use OAM?
              stephaniek64991887 Level 1

              Hello Vivek,

               

              Your explanation regarding OAM and its relationship to Canvas was very helpful.  I feel the fog beginning to burn off on this confusion regarding them.  Although, unless I missed something somewhere, I suspect I may not be alone in this confusion.  You are the first source I have read which explains this - and so well.

               

              I'm assuming, because it was not clearly stated in the Adobe link regarding OAM you included, that the Animate CC file should start out as a Canvas file and that Canvas ActionsScript should be selected when creating the Animate file.  This could be more clearly explained in the linked page.  That would help.

               

              I don't have a problem working with HTML code when necessary, but the OAM Package approach is sure helpful - especially when getting used to a new technology.  I find in my own work that I start out working with something like OAM Package and then after I get used to it - spend more time with the code.

               

              Thanks again for your help!

              • 4. Re: When Is It Best To Use Canvas and When Is It Best To Use OAM?
                stephaniek64991887 Level 1

                Hello Vivek,

                 

                I followed the instructions on the link you provided.  When I tested the animation in Animate CC and in a browser, it operates as planned with no problem.  However, when I followed the instructions, published the OAM file/package and inserted the OAM file in Dreamweaver, the file loaded on the page, however, no images from the animation appeared and no animation was present.

                 

                Please advise.

                 

                Thank you.

                • 5. Re: When Is It Best To Use Canvas and When Is It Best To Use OAM?
                  VivekP Adobe Employee

                  Are you in design view or in Live view?

                  Does it happen when you preview the page in browser from File > Preview in Browser ?

                  If you face the same issue in Browser and in live view then can you check if you are able to see all the assets in files panel as mentioned in the screenshot below.

                  Screenshot_105.png

                  You can open Files panel from Windows > Files

                   

                   

                  Regards,

                  Vivek

                  • 6. Re: When Is It Best To Use Canvas and When Is It Best To Use OAM?
                    stephaniek64991887 Level 1

                    To recap, this is the problem:

                    I've created a simple Canvas HTML 5 slide show in Animate CC 2015 with images, text and embedded links to other web pages in the site where the animation will reside.  When I test the animation in Animate both on the timeline and in a browser from within Animate, all works and looks good. 

                     

                    Then I followed the directions in the link below regarding publishing an OAM Package file from Animate.  Next, I followed the rest of the instructions in the link below regarding using Dreamweaver to insert the animation OAM file via the Animated Composition option into an HTML page.  The file does appear to load in the page - showing simply an outline of the file, but either in Live mode in Dreamweaver or testing the web page in a browser from within Dreamweaver, nothing else appears on the page - no images and no animation - just the static outline of the file.

                     

                    Export OAM files from Animate CC for use in Dreamweaver and Adobe Muse | Adobe Dreamweaver CC tutorials

                     

                    In response to your reply above, I'm in Live view.

                    Yes, the same thing happens when I preview the page in browser from File>Preview in Browser.

                    I checked to see if I am able to see all the assets in the files panel as is shown on your screenshot.  Nothing is there except for "object #EdgeID"

                    When I go into Code, all I see that has been added is: "<object id="EdgeID" type="text/html" width="720" height="536" data-dw-widget="Edge" data="animation_assets/PMMSlSh3_31/Assets/PMMSlSh3_31.html">"

                    That is all.  It appears that for some reason, all of the assets are not being created/loaded.  That appears to be the problem.  That would explain why I am not seeing anything as it should be seen.

                     

                    Please advise.  Thank you.

                    • 7. Re: When Is It Best To Use Canvas and When Is It Best To Use OAM?
                      VivekP Adobe Employee

                      Hello,

                       

                      I have sent you private message with my email. I would like to look at the fla file to understand if there is something odd about it.

                      Please share the fla file with me and I will share my observations with you.

                       

                      Regards,

                      Vivek

                      • 8. Re: When Is It Best To Use Canvas and When Is It Best To Use OAM?
                        VivekP Adobe Employee

                        Hello,

                         

                        Thank you very much for sharing the fla file with me. In order to let OAM file work you need to avoid using the option of Spritesheet.

                        Go to File >> Publish Settings >> Select "Javascript/HTML"  >> Uncheck "Combine into Spritesheet"  >> Click OK to save the changes > Publish the OAM file again >> Now it should work fine in DW.

                         

                        Screenshot_106.png

                         

                        Regards,

                        Vivek

                        • 9. Re: When Is It Best To Use Canvas and When Is It Best To Use OAM?
                          stephaniek64991887 Level 1

                          Hello Vivek,

                           

                          I made the publishing changes you suggested and the images and animations are now showing up in Dreamweaver.  However, there is one other problem which is still occurring.  When the animation is viewed in Animate and through the browser in Animate, the areas surrounding the images appear as they should.  But when the animation is loaded in Dreamweaver and viewed in the browser in Dreamweaver along the right and bottom sides of the images there is an extended border that occurs in a lighter color.  This extended border does not appear when viewed in Animate.

                           

                          Please advise.  Thank you.