8 Replies Latest reply on Feb 11, 2018 11:27 AM by marjantrajkovski

    How do you insert code in <body> section in Animate CC?

    Joshavn

      I have code I want to insert right after <body> and also another right before </body>

        • 1. Re: How do you insert code in <body> section in Animate CC?
          kglad Adobe Community Professional & MVP

          using script tags?

           

          but if you don't know that you probably are asking the wrong question and aren't going to accomplish whatever it is you're trying to accomplish.

          1 person found this helpful
          • 2. Re: How do you insert code in <body> section in Animate CC?
            RandomlyFish Level 3

            Is this code that have to be added in the HTML, or could this be written in the project itself?

            • 3. Re: How do you insert code in <body> section in Animate CC?
              JosephLabrecque Adobe Community Professional

              Yeah - can you provide more info into your intention?

               

              If working with HTML Templates (in Publish Settings for HTML5 Canvas) - you can employ a custom template with all sorts of modified tags - but hard to say if that will fill your need. So do let us know!

              1 person found this helpful
              • 4. Re: How do you insert code in <body> section in Animate CC?
                Joshavn Level 1

                OK this is what I want to achieve.

                 

                After publishing my Animate CC file, it generates HTML file, right?

                 

                So I use Notepad++ to edit that HTML and add the following code within the <head>:

                 

                <script type="text/javascript">

                var clickTag = 'http://www.website.com';

                </script>

                 

                and inside the <body> I would add:

                 

                <a href="javascript:window.open(window.clickTag);">

                .

                .

                .

                </a>

                 

                 

                So my question is, can I do that within Animate CC so that when I publish those codes above are already there? So that I dont have to open the HTML in Notepad++ to add those code?

                 

                 

                I hope that is more clear.

                 

                I appreciate your help if there's a solution to this

                 

                Thx

                • 5. Re: How do you insert code in <body> section in Animate CC?
                  Joshavn Level 1

                  Yes, I like to add those codes in the project itself so that when I hit publish it will be there in the HTML file.

                  • 6. Re: How do you insert code in <body> section in Animate CC?
                    Joshavn Level 1

                    Hi Joseph,

                     

                    My project is actually an HTML5 banner... All I want to do is insert the codes I mentioned above inside the project and not in the published HTML file generated.

                     

                    I know I can Global scripts.. But what I like to insert are the following inside the <body>

                     

                    <a href="javascript:window.open(window.clickTag);">

                    .

                    .

                    .

                    </a>

                    • 7. Re: How do you insert code in <body> section in Animate CC?
                      kglad Adobe Community Professional & MVP

                      yes, you can do that by creating a custom html template,

                       

                      HTML publishing templates in Adobe Animate CC

                      Create HTML5 Canvas documents in Animate CC

                       

                      for win 10, the directory with the templates is C:\Users\<user name>\AppData\Local\Adobe\<animate version>\en_US\CONFIG~1\HTML\

                      1 person found this helpful
                      • 8. Re: How do you insert code in <body> section in Animate CC?
                        marjantrajkovski Level 4

                        1. Export Default Template

                         

                        File > Publish Settings... > Advanced > Export (Export Selected HTML Template)

                         

                        2. Change Default Template with adding bold parts

                         

                        <!DOCTYPE html>

                        <!--

                        NOTES:

                        1. All tokens are represented by '$' sign in the template.

                        2. You can write your code only wherever mentioned.

                        3. All occurrences of existing tokens will be replaced by their appropriate values.

                        4. Blank lines will be removed automatically.

                        5. Remove unnecessary comments before creating your template.

                        -->

                         

                         

                        <html>

                        <head>

                        <meta charset="UTF-8">

                        <meta name="authoring-tool" content="$VERSION">

                        <title>$TITLE</title>

                        <!-- write your code here -->

                        <script type="text/javascript">var clickTag = 'http://www.website.com';</script>

                        $CENTER_STYLE

                        $CREATEJS_LIBRARY_SCRIPTS

                        $ANIMATE_CC_SCRIPTS

                        $SCRIPT_START

                        var canvas, stage, exportRoot, anim_container, dom_overlay_container, fnStartAnimation;

                        function init() {

                        canvas = document.getElementById("$CANVAS_ID");

                        anim_container = document.getElementById("$ANIM_CONTAINER_ID");

                        dom_overlay_container = document.getElementById("dom_overlay_container");

                        $CREATE_LOADER

                        $LOAD_MANIFEST

                        $PRELOAD_ASSETS

                        }

                        $HANDLE_FILE_LOAD_START

                        $HANDLE_FILE_LOAD_BODY

                        $HANDLE_FILE_LOAD_END

                        $HANDLE_COMPLETE_START

                        //This function is always called, irrespective of the content. You can use the variable "stage" after it is created in token create_stage.

                        $CREATE_STAGE

                        //Registers the "tick" event listener.

                        $START_ANIMATION    

                        //Code to support hidpi screens and responsive scaling.

                        $RESP_HIDPI

                        $HANDLE_COMPLETE_END

                        $PLAYSOUND

                        $SCRIPT_END

                        <!-- write your code here -->

                        </head>

                        <body onload="init();" style="margin:0px;">

                        <a href="javascript:window.open(window.clickTag);"><div id="$ANIM_CONTAINER_ID" style="background-color:$BG; width:$WTpx; height:$HTpx">

                        <canvas id="$CANVAS_ID" width="$WT" height="$HT" style="position: absolute; display: $CANVAS_DISP; background-color:$BG;"></canvas>

                        <div id="dom_overlay_container" style="pointer-events:none; overflow:hidden; width:$WTpx; height:$HTpx; position: absolute; left: 0px; top: 0px; display: $CANVAS_DISP;">

                        </div>

                        </div></a>

                            $PRELOADER_DIV

                        </body>

                        </html>

                         

                        3. Import back changed template

                         

                        File > Publish Settings... > Advanced > Import New... (Select Custom HTML Template)

                         

                         

                        2 people found this helpful