How do I animate CC (HTML5 Canvas) work on Google Adwords?

I used to animate banners of HTML5 using Adobe Edge, but now I have to work in "Adobe animate CC" and I do not know what settings you have for export or what should I put on the HTML5 which generates my creativity. Can someone help me please?

PS. I'm not an expert in using the codes, if someone could please tell me in my editor (dreamweaver), what it took to make it work? I would appreciate.

1 animation duration is 30 seconds or less (Animation, an loop indefinitely but must stop after 30 seconds)


2 IMPORTANT! Unckeck option combine in spritesheets in publication settings that generates the JSON spritesheets file because the JSON file is not allowed in AdWords

3 ad is 150 or smaller (ZIP file)


4. Add a meta tag with your dimensions size format in thetag. For example:

5 copy the library CreateJS (48 KB in ZIP)


 

or if you need more space use both Google hosted CreateJS libraries and include two other libraries of CreateJS (15 KB in ZIP)

You can download it from the website CreateJS or you have if you have Flash Pro CC.

We are still waiting for AdWords update full CreateJS library that is hosted on Google

https://S0.2mdn.NET/ads/Studio/cached_libs/createjs_2015.11.26_54e1c3722102182bb133912ad44 42e19_min.js


6 HTML5 ads are, by default, clickable on the entire surface of the announcement.


7 check-in validator AdWords | HTML5 Validator

Tags: Adobe Animate

Similar Questions

  • Animate CC (HTML5 Canvas) chronology cannot choose stream in properties > Sync to sound

    Hello

    I have a problem. Animate CC (HTML5 Canvas) timeline is not Stream select Properties > Sync for the sound.

    This section examines passive. Why would it be.

    Thank you.

    Screen Shot 2016-10-03 at 11.39.44.png

    HTML5 Canvas only supports the synchronization of its event. You can use a document of ActionScript 3.0 for audio streams.

  • How to use video with HTML5 Canvas alpha channel? is this possible?

    How to use video with HTML5 Canvas alpha channel? is this possible?

    Thanks in advance

    There is a video in HTML5 tag, as there is a canvas tag. But you want to alpha. He is not an alpha channel in HTML5 video.

    Transparency alpha in video Chrome | Web - developers of Google updates

    Tag video example

    video controls style="width:640px;height:360px;" poster="poster.png">
        type='video/webm;codecs="vp8, vorbis"' />
        type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"' />
        kind="subtitles" srclang="en" default>

  • How to 'split' text mode 'HTML5 canvas "?

    'Split' option is greyed out in HTML5 canvas. Is it bug or feature? How break apart text or convert the text to a path access/plan?

    Thank you

    Hi Marek,

    In addition to the Typekit web fonts, Google fonts are now supported in HTML5 canvas documents in the last update of CC animate (15.2.1) comes out.

    See here: new feature summary (June and August 2016)

    By using the Google fonts to animate CC

    Update your copy of CC animate through the creative application of cloud and try it!

    Thank you!

    Mohan

  • Animate CC HTML5 Canvas mouse on

    I can't get my animation to stop and start playing with a mouseover, but the listener actually put a message box to the top. This tells me that the interception of the earphone works, but the command to stop and start the animation is incorrect. How the animation to stop and start playback with a mouse during the event?


    / * Mouse over event
    Mouse on the symbol instance performs a function in which you can add your own custom code.

    Directions for use:
    1. Add your custom code on a new line after the line that says "/ / Start your code custom" below.
    The code runs when the symbol instance is wriggling on.
    the frequency is the number of times the event should be trigerred.
    */

    frequency of var = 3;
    stage.enableMouseOver (frequency);
    canvas.addEventListener ('mouseover', fl_MouseOverHandler_10);

    function fl_MouseOverHandler_10()
    {
    Start your custom code
    This code example displays the words "Moused over" in the output panel.
    Alert ("Moused over");
    This.Stop ();
    Complete your custom code
    }

    / * Mouse event
    Mouse on the symbol instance performs a function in which you can add your own custom code.

    Directions for use:
    1. Add your custom code on a new line after the line that says "/ / Start your code custom" below.
    The code runs when the symbol instance is speckled of.
    */
    frequency of var = 3;
    stage.enableMouseOver (frequency);
    canvas.addEventListener ("mouseout/mouseouthandler()", fl_MouseOutHandler_8);

    function fl_MouseOutHandler_8()
    {
    Start your custom code
    This code example displays the words "Moused over" in the output panel.
    Alert ("Moused over");
    This.Start ();
    Complete your custom code
    }

    In addition, in case you were wondering, here is an updated version of the code that you use, that works after a few adjustments:

    stage.enableMouseOver ();

    myLocalThis01 = this;

    This. MouseTrk.addEventListener ('mouseover', fl_MouseOverHandler);

    function fl_MouseOverHandler()

    {

    myLocalThis01.stop ();

    }

    This. MouseTrk.addEventListener ("mouseout/mouseouthandler()", fl_MouseOutHandler);

    function fl_MouseOutHandler()

    {

    myLocalThis01.play ();

    }

    There were a few problems with your previous code:

    • You only need a global variable to reference your local context, so I got rid of things "myLocalThis02".
    • You must use play() instead of start().
    • You should only allow the passage of the mouse once.
    • You need not define the frequency of the mouse more than once (if at all).  If you set the default frequency of 20.
  • Adding CSS properties to objects to animate CC HTML5 Canvas

    Is it possible to add some CSS3 to objects (MovieClips or otherwise) in HTML canvas to animate CC?

    Lol CSS can only the DOM style elements; You cannot apply CSS what anyone in canvas.

  • Animate CC HTML5 canvas in Internet Explorer has no audio

    Another strange question, I know.

    I made a simple slideshow with audio accompaniment (mp3 format).  It works very well in all the browsers on Mac and PC, except Internet Explorer. IE11 has 2 issues that might be related:

    (1) it loads instantly, as in, I immediately see the first slide.  All other browsers, it goes through the process of loading and I see loading animated gif I've included.

    (2) IE will not play sound, he plays the slides and animations very well, but there is no audio data. Again, all other browsers it plays very well.

    To resolve the second problem, I searched the googles and went through all the different proposed solutions for the fixation of sounds in IE (re-install flash, reset flash, java installation, checking this setting and this setting). Nothing seemed to work until I finally found the setting on "Reset Internet Explorer settings" in the advanced Internet Options menu.  This seemed to fix it. Audio is now played for my presentation.

    As a bonus, it also seemed to fix the first issue as well, it took a bit to load now and showed the loading animation.

    So now you're probably wondering yourself, OK fixed you, why I read this.  Well, here's the thing. I tried it on several computers of my colleague, and they all had the same problem. I can't tell my customers 'OK for that to work, you need to reset your IE,' which seems bad.  My theory is that IE is default loading of images that are first of all of small size and show them without the full presentation at full load.  So is there something I can do to animate html or .js to force IE to do a full charge?

    Thank you!

    In your HTML, where you have:

    var loader = new createjs. LoadQueue (false);

    Add this line, and the page will load a lot faster:

    var loader = new createjs. LoadQueue (false);
    loader.setMaxConnections (6).
  • Animate CC (HTML5 Canvas) timeline is not synchronized with audio

    Hi, I am experiencing problem with synchronize the audio file with the time line set, cadence Adobe animate the value 24 fps, audio don't play with according to the number of frame in the timeline.

    It is possible to solve the problem with Javascript. Here is the example code that will make the animation in real time:

    var starttime is createjs. Ticker.getTime ();

    createjs. Ticker.setfps(25) (24);

    this.addEventListener ("check", movealong);

    self = this;

    This.Stop ();

    function movealong() {}

    var = now createjs. Ticker.getTime ();

    var f = Math.floor ((now-starttime)/1000 * 24);

    self.gotoAndStop (f);

    }

  • Animate CC: HTML5 Canvas Bug? Or...

    Hello

    I trust that a drive with the appropriate knowledge will help me in my request for help.

    Here's what I'm working with.

    Tactical rehab

    I have simple buttons on the shoulder and knee, which, as you can see are working properly. Simple.

    However, my problem lies in the video for ankle. I have the desire for a video slide show for pop up, then go as expected on the mouse.

    Everything works fine except, as you can see, it disappears when the mouse passes over the black arrows or the line in the middle. Strange! As there is absolutely no code associated with the line or the arrows that would disappear. It's just a brush design...


    Here is the code on the main timeline. SS is the slide show.

    this.SS.visible = false;
    
    this.Ankle_Button.addEventListener("mouseover", over.bind(this));  
    function over()  
    {  
    this.SS.visible = true;
    }  
          
          
    this.SS.addEventListener("mouseout", out.bind(this));  
    function out()  
    {  
    this.SS.visible = false;
    }  
    
    

    I removed the code of the slideshow in the movieclip "SS", and the problem persists; so I know that it is not related to this code.

    Why would it disappear? This must be a bug, no?

    Initially, I tried to put just the clip of slide show on the stage of the button (which is what I prefer), but the overstate to a button symbol does not feature in the show (where why, it is being replaced by a movieclip symbol).

    Thanks for your help,

    Hey Joe,

    The problem that you are facing is due to the use of event mouseout/mouseouthandler() . He behaves differently from the launch event in easeljs.

    You must simply changedeployment"instead of"mouseout/mouseouthandler()"in line 10 of your code!

    Let me know if it still does not...

    -Mabrouk

  • How to resize image in Html5 Canvas?

    Hey, I try to width and height to resize the image using the code:

    h01 = document.createElement('img');
    h01.src = 'images/rambut/h01.png';
    h01.width = 69;
    h01.height = 69;
    var images_h01 = new createjs.Bitmap(h01);
    this.mc_h01.addChild(images_h01);
    

    but the size of the image is not changing anything.

    Help...

    CreateJS is not a way to explicitly set the height and width of the image. If you already know the dimensions of the external image, just use some simple calculations to convert the dimensions in a scale factor. If you don't know the dimensions of the external image, you can access it from image.width and image.height. However, it will need to wait until the image is loaded.

    Or, you could give up on the relationship between the image in CreateJS of DOM and just do float directly on the canvas yourself.

  • Animated Navigation CC HTML5 Canvas issues

    I use Adobe animate CC HTML5 Canvas.

    I use some variables and STOP to navigate through the timeline, as if they were pages.

    Go forward through the timeline gives me no problem, however, when I got back in the timeline (from frame_1 to frame_0) when I ask many interactions on the previous page don't work (visibility and hover button) and then when I try to go forward again it does not stop on the frame more.

    An alert using, I found that he jumps in the course although I stops.

    Can someone help me please? I can send the files together if necessary.

    Here is my code for the navigation of the page:

    This.Stop ();

    SECTION INFO & NAVIGATION DRIVE

    VARIABLES FOR NAVIGATION

    var frameNumber = this.currentFrame;

    nextFrame var = frameNumber + 1;

    prevFrame var frameNumber = - 1;

    DISPLAYS CURRENT PAGE NUMBER

    var text = this.currentFrame.toString ();

    var thisText = "Page" + displayText;

    createText var is new createjs. Text (thisText, "" BOLD "44px Myriad Pro", "White");

    this.addChild (createText);

    TEXT OTHER THAN THE WEIGHT/SIZE/COLOR/FONT STYLE

    createText.x = 98;

    createText.y = 1375;

    CLEARS THE PREVIOUS PAGE NUMBER BEFORE MOVING FRAMES

    this.next.addEventListener ("click", removePageNumberNext.bind (this));

    function removePageNumberNext()

    {

    this.removeChild (createText);
    this.gotoAndPlay (nextFrame);

    }

    this.prev.addEventListener ("click", removePageNumberPrev.bind (this));

    function removePageNumberPrev()

    {

    this.removeChild (createText);
    this.gotoAndPlay (prevFrame);

    }

    Hold up... you have the above reproduced code in each single frame? This would explain why your buttons are behaving strangely. Handlers on objects do not replace each other - they are cumulative. If you have only one set of buttons in nav for the entire timeline, you only need to assign handlers once at the beginning.

    Similarly, you should not create a textfield to display page in the code. You just create a dynamic textfield in the editor, name ('pageNum' or whatever), then update its content through the .text property.

    Assuming that you are using the frame 1 (0) to initialize and start your content on frame 2 (1) and have a next button called 'next', a previous page named 'prev' button and a textfield of page number named 'pageNum', all that exists throughout the entire timeline, you can use this code to control your page :

    _root = this; // global handle to root timeline for event listeners
    this._maxPage = _root.timeline.duration - 1; // total pages
    
    // event handlers
    this.navPrev = function() {
        var cur = _root.timeline.position;
        if (cur > 0) {
            _root.navToPage(cur - 1);
        }
    }
    
    this.navNext = function() {
        var cur = _root.timeline.position;
        if (cur < _root._maxPage) {
            _root.navToPage(cur + 1);
        }
    }
    
    // do navigation
    this.navToPage = function(p) {
        // set visibility of nav buttons
        this.prev.visible = p > 1;
        this.next.visible = p < this._maxPage;
        // update page counter
        this.pageNum.text = "Page " + p;
        // navigate
        this.gotoAndStop(p);
    }
    
    // assign event listeners
    this.prev.addEventListener("click", this.navPrev);
    this.next.addEventListener("click", this.navNext);
    
    // get the party started
    this.navToPage(1);
    
  • Interactive Html5/canvas freezes mobile phones

    Hello

    I was once a Flash Designer, and since Apple _ Google has announced that Flash would be is no longer supported on mobile devices. I've been without a good Interactive platform / Animation that would be supported on mobile phones / tablets without having to do it in the AIR or develop a native app.

    Along came animate dashboard... Well... who have worked at least on mobile phones... I thought it would be a good replacement for the awesome tool that Flash was.

    NOPE... Adobe he pulls away and gives us a CC to animate.

    I thought well... at least its in the Middle, I know...

    in any case... I did this Interactive Html5/canvas with "Button" to go to each image. That's all that.

    Work a lot on my desktop PC... but when I view it on my Android phone, this is WICKED SLOW (my entire Web page of scrolling is slow)

    Click on one of the buttons (which has a hover) takes several seconds to go to the desired image.

    After about 3 times switching pages... the canvas completely freezes the phone and I have to do a HARD REST of the PHONE.

    See the page the Html5/canvas content here, I did...

    Image file formats. Articles | TechniPixel Solutions

    I expect animate CC way to better answer to the phone than that.

    If this is true, CC animate (aka Html5/canvas) is NOT READY for prime time yet on mobile phones...

    So I have nothing to use to develop interactive content that allows to display on a mobile phone without creating a native application or with air.

    Flash is an A + in my books

    Animate CC is a D - F... I'm not impressed

    Anyone can do the light on interactivity and mobile phones with animate CC (aka Html5/canvas)

    Oh, I wish for the days of Flash back!

    Thanks in advance

    Well... Since nobody does not address this... I changed the links so my JS/Image version is now live on my site.

    JS/Image Version that replaces the CC version animate Html5 Canvas (link below)

    Image file formats. Articles | TechniPixel Solutions

    Animate CC Html5 Canvas Version

    Image file formats. Articles | TechniPixel Solutions

    The final conclusion is that CC animate is optimal for the creations of office... but because of the lack of CPU power on mobile phones (which is the number of phone manufacturer to catch up)... It is better not to use Html5 Canvas on mobile phones... AT THE MOMENT!

    We have to wait for the phone power to get faster and better, computer

    It's NOT for the lack of CC animate... but lacks the phone to be able to make enough office powered creations.

  • How to call a function of my html code to js created by animate cc, I had used 'exportRoot.functionName' and said this function in my document of flash pro with html5 canvas, but now on cc animate this way doesn't work.

    My html code created by animate cc was changed to php for me, because I send and received variables via get and catch the cookies and much more. the function that I used to call function on my .fla of the document is passId() and it worked before when animate was Flash pro with html5 canvas.

    Captura de pantalla 2016-09-27 a las 12.19.59 p.m..png

    And function of .fla, I frame_0 only assign to the variable "id_usuario", this is the feature on fla:

    Captura de pantalla 2016-09-27 a las 12.20.12 p.m..png

    First of all, the title of your thread is horrible. Titles are supposed to be securities, not paragraphs.

    As for your problem, you are probably trying to call catchIdUser before it is defined. handleComplete() is raised when the content is ready to run. He did not actually yet. I guess you should have script code call the function of window parent, not the other way around.

  • How to convert (Action Script 3.0) .as files to work on HTML5 Canvas?

    So I did an ActionScript 3.0 game in CC animate using files as with packages and classes rather than use actions for example

    There is a Game.as file:

    package
    {
      import flash.display.MovieClip;
      import flash.events.Event;
      import flash.utils.Timer;
    
      public class Game extends MovieClip
      {
      static var ship:MovieClip;
    
      function Game()
      {
      ship = new Ship(stage, 200, 100);
      var spawnTimer = new Timer(3000);
      spawnTimer.addEventListener("timer",spawn);
      spawnTimer.start();
      }
    
      function spawn(e:Event):void
      {
      var enemy = new Enemy();
      stage.addChildAt(enemy, 1);
      }
      }
    }
    

    I used the commands > convert to other Formats of Document and you select HTML5 Canvas. When I run the project all the code does not work because the .as files are not related to the project (because it is a HTML5 Canvas). So, how can I convert my project an ActionScript 3.0 for a HTML5 Canvas so that the scripts work in the game? Should I use. JSFL files? How to bind the?

    Thanks in advance.

    There is no external class in HTML5 Canvas Javascript file. Also, the variables are not typed. Symbols belong to the library, which will be shortened to 'lib '. You can define listeners on the createjs. Ticker, but using setTimeout() is a simple alternative.

    In view of this, your AS3 could be something like this:

    boat var = new lib. Ship();

    Ship.x = 200;

    Ship.y = 100;

    stage.addChild (ship);

    setTimeout (spawn, 3000);

    spawn() {} function

    enemy of the var = new lib. Enemy();

    Enemy.x = Math.random () * 500;

    Enemy.y = Math.random () * 400;

    stage.addChildAt (enemy, 1);

    setTimeout (spawn, 3000);

    }

  • How to disable the cc button animate html5 canvas files?

    Hello!

    How to disable the cc button animate html5 canvas files?

    ex:

    this.mc.on('click',function(){alert('this')})
    this.mc.enabled=false
    

    question 1:

    When you click on the 'mc', it always run. How can I control the button of the deactivate and activate?

    question 2:

    The mc is not an image, it's a movieclip. How can I change the colors of the mc? example: default of the mc color red, I want to click change black!

    Thank you!

    use addEventListener instead of 'on '.  You can then use removeEventListener to disable.

    or you can intemperies to use 'on' using the mouseEnabled property to disable this.mc:

    this.mc.mouseEnabled = false;

Maybe you are looking for