This video was soooo incredibly helpful, thanks so much for this. I threw myself into an HTML ads project, didn't know anything and this took me from zero to... product animated ads, huge win! Thanks.
Thanks for this! It really saved me. I noticed you left out something at the HTML part that's important for the click tag to work: In order for the link to work, you need to wrap the div that's inside the body INSIDE the a tag. Meaning the opening of the a tag needs to be set in front of the opening div tag, and the closing part has to be set after the closing div. Seems most of your comments are positive, so maybe most people already figured this out, but just in case anyone wonders why it doesn't work for them, this worked for me.
Thank you, this video really helped me a lot! To prevent Animate CC from messing up the leading and kerning of the text, I converted the text into shapes on Illustrator before importing into Animate CC. Not too sure if its the correct workaround for it but it works for me haha.
OMG! This Finally works for me! I tried creating the click thru in the Actions panel in Animate with a couple YT tutorials but they didn't work for me. I used this method and adding the code AFTER publishing and it works! Thx!!!!
Hi, Angelo. Thanks for this tutorial. you've put together what took me weeks to figure out in trial by fire on my own a few years ago. I'm wondering if you have any leads on where people are validating their ads now that the google validator is getting sunsetted?
this has been so helpful! i do wish you explained the "convert to symbol", the different types, and what they mean. as it stands, im not sure about the reasoning why we're using those or what they do.
What I end up doing is changing the document size and selecting "scale content". This will scale your animation assets and the stage size to the new ad dimensions. It will take some adjusting but its the quickest way I've found. Also, when adjusting a symbol that has multiple keyframes associated with it, you can double click on the symbol, resize it, then double click on the stage and the size adjustment will apply to all symbols. Please not that this method is using classic tween + symbols.
This video rocks! Thanks for the tutorial! I did run into an issue when uploading to creative studio - the video didn't seem to render and appears blank - I wondered if it was cos my file size is 400kbs? I've followed everything along with the tutorial word for word but it's just that that point I'm not getting the same result. Do you have any suggestions?
Can you do a video on troubleshooting publishing/directory problems? How files should be organized to avoid problems? Also on how to optimize file sizes so that they are not rejected by media.
Sorry to hear you were having issues. It's hard to know where things went awry for you, but I will definitely put on my list to do a publishing assets video for animate. Thanks and take care.
Thank you for the great tutorial. But I have this problem where I only see a blank browser after opening the published html, what could I have done wrong?
Try using a code editor to upload the assets to a server. Often times, if you're trying to view published docs on your own machine it won't work because it's not being hosted. I use a software called Brackets and once I add the html, js and images, I am able to Live Preview the published work on their servers.
Thanks a lot for this great tutorial - everything works fine. I have a question concerning the implemtation of a video, that has to be combined with follwing Text & Logo-Animations. Importing the MP4-Video, worked properly. After the video an animated Headline, Logo and Text-Slides appears. This works properly on Desktop-Devices, but the auto-play function for the video does not work on iPhone, neither iPad. Is there a workauround for Adobe Animate CC? I found some work-arounds (playinside, mute, etc.) for HTML5-Videos, that embeds the video in the HTML-File in Video-Tags, but Animate embeds the video in the Javascript Code. In this case the work-arounds does not work. Thank you for an answer - I would appreciate your support very much.
Great video. My client wants me to edit an interactive HTML5 Canvas animation currently on their site, but they don't have the original Adobe Animate source file. Is this possible?
Hi, i want to transfer a number from adoube animate into the excel or any other data base. how can i do that? how can i make a button for example that when i clicked it , send number 1 to an excel columne ? can you please help ? tnx
Thanks Bryan! If you want a custom loop, it requires a code, which you can apply on the Actions layer on the last frame. if (!this.looped) this.looped = 1; if (this.looped++ == 3) this.stop(); The 3 represents the times you want it to loop. Change that number to set your custom loop. Thanks!
I keep getting the same error when I try to upload into creative Studio “Your HTML 5 as is missing a primary .HTML file……..” even when I add the lines of code from your video… any possible solution?
If I accept the banner as html5 and read the clickTag link but... the link does not work, it does not redirect you to the page. Would you know why? Thank you very much since you are one of the few who know about animate and your explanations are excellent, I worked with Flash 8 years ago and now I am returning to the topic of banner ads but I can't get it, it enters as html but it doesn't redirect me to the link.
Hey there. This is a premium tutorial post on Montilla Design. Pro and Pro+ members can access the files and lesson notes for premium posts like this one. To learn more, you can visit www.montilladesign.com/plans
So what is the reason that when I click F6, mine doesn't add a keyframe with a split section in front of it? Mine just adds a little diamond dot but it doesn't cut the sequence ahead of it. Does that make sense? This affects my ability to add the Classic Tween because it just applies it to the whole line.
Hi Duncan, you may have added a Motion Tween instead of a Classic Tween. They work similarly, but the motion tweens will add a Diamond keyframe rather than split the timeline sequence. This is a good breakdown of the keyframes in Animate: helpx.adobe.com/animate/using/animation-basics.html
Thanks for tutorial, I like that on ending u explained how add clickTag. But your banners too much simple :D..... in reallity often its banners where for example company selling 3 sorts on fences for example from stones, woods, metal and u need use 3 photos and 4 diffrent texts. And add some 3 icons animations to each fence. I mean u using very simple templates like possible to make in some online platform. People using adobe animate to make more advanced banners. Or for example some jump text then flying plain another frame some island monkeys and bananas falling :D then again text then we going up to sky, there from clounds jumping another texts, icons. And what I really miss its how to resize banners to another formats, or how move animation with frames with difficult and advances animation fastest ways. I rember before when was older version adobe animate edge I used to some elements for resize just the symbols with animation and img. But was problems, for example in chrome browser after resize symbol was bliured view, in mozilla firefox was good. Soo its ideas for next tutorialas... and look some banners portfolio from some agency from another country. :D They have very intresting banners, not just that default banners with 1 text, 1 and 1 icon. :D...
Thanks for the feedback, much appreciated! For the sake of time, I wanted to keep creative simple. Also because I am targeting beginner to intermediate, I don't want to overwhelm them. I agree, there are some really advanced banner ads and I am here for them! Perhaps this is something I will do for a more in-depth course in the future so stay tuned. Thanks again!
@@AngeloMontilla Then maybe just make tutorials from parts. 1. Advances intresting banner. 2. How to resize banners animations, move animated objects.(Its important because sometimes need to make 10 sizes of banners and its really taiking many time. 3. Most common problems tips, explain for example how save img, what need for retina screens 2x img because if just 1x will bliurred. For example bg possible to save 1x, or 1.5x. But like some img logo, texts, icons if its not vector for sure need use ratio 2x. Soo best ways to optimize size of banners. :D.
I disagree. Simplicity is best for banner ads. Short, simple, quick, to-the-point. Nobody will sit there and watch a short movie for a display ad. You need to catch people's attention right away.
Hello great tutorial but even including the ClickTAG code in my file the error below is appearing We are currently unable to upload this file. Clear cache and try again later. And even using your file that you made available for download, the same error as above appears And how cool it was to get to know this platform Ads Creative Studio Do I necessarily need to have my Ads Creative connected to Campaign Manager 360? But in the end you cut the video when you were going to show the export and use... sad! Show us the continuation, how after exporting I get the generated link and put the banner on my site?
@@AngeloMontilla Yeah, but responsive isn't the same thing as adaptive, let's say I want to include multiple resolutions in 1 file 300x250, 728x90, 160x600 (something I can easily do in Google Web Designer), but you cant do it in Animate or can you?
Hey there! Thanks for the kind words. There may be an external reference in the html causing that problem. Check out these links: community.adobe.com/t5/animate-discussions/error-quot-relative-asset-check-quot-when-validating-for-google-ads/td-p/11546963 support.google.com/google-ads/answer/1722096?hl=en#zippy=%2Call-other-html-ads
Hi Limin! My guess is that you have your document set to ActionScript 3.0 and not HTML5 Canvas. If you go to File > Convert To, you should be able to switch the doc type to HTML5 Canvas. Give that a try and then see if your publish settings appear.
Hi there! This video follows the guidelines for Ads Manager when uploading HTML5 creative to Google.The first line of code can be placed in the . The second must use the click tag variable as the click-through URL: Creating a hard-coded click-through in Animate won't work for Ads Manager. Check out this resource here ➡ support.google.com/admanager/answer/7046799?hl=en
Adobe Animate CC is a crap. You can create only very stupid html5 advertising banners, but there is no possibility to import videos or to add videos to container (if you want to have rounded corners), there si 3D tool missing for HTML5, no motion blur effects, etc. And the GUI... No comment.
finally somebody making adobe animate tutorial in a very professional way
Thank you!
Simplest, most informative HTML5 publishing tutorial ever.
Glad it was helpful!
This video was soooo incredibly helpful, thanks so much for this. I threw myself into an HTML ads project, didn't know anything and this took me from zero to... product animated ads, huge win! Thanks.
Glad it was helpful! 🙂
Thanks for this! It really saved me. I noticed you left out something at the HTML part that's important for the click tag to work: In order for the link to work, you need to wrap the div that's inside the body INSIDE the a tag. Meaning the opening of the a tag needs to be set in front of the opening div tag, and the closing part has to be set after the closing div. Seems most of your comments are positive, so maybe most people already figured this out, but just in case anyone wonders why it doesn't work for them, this worked for me.
@@lisabrune4242 Thanks!
saved my job bro
Thank you, this video really helped me a lot!
To prevent Animate CC from messing up the leading and kerning of the text, I converted the text into shapes on Illustrator before importing into Animate CC. Not too sure if its the correct workaround for it but it works for me haha.
Great tip!
OMG! This Finally works for me! I tried creating the click thru in the Actions panel in Animate with a couple YT tutorials but they didn't work for me. I used this method and adding the code AFTER publishing and it works! Thx!!!!
Excellent tutorial. Thank you!
Thank you so much for your tutorial! Very easy to follow and understandable for newbies in this HTML5 and Animate world!
straightforward and clear
Hi, Angelo. Thanks for this tutorial. you've put together what took me weeks to figure out in trial by fire on my own a few years ago. I'm wondering if you have any leads on where people are validating their ads now that the google validator is getting sunsetted?
Hi Jeremy. The only one I found that may work for you is advalify.io. Good luck!
@@AngeloMontilla thanks!
thanks a ton! i really love the explanation and its very helpful
Great Techniques
this has been so helpful! i do wish you explained the "convert to symbol", the different types, and what they mean. as it stands, im not sure about the reasoning why we're using those or what they do.
Thanks for the feedback! I'll add that to future Animate video content.
what if i need to make the same add in multiple sizes? is there a fast way to rescale the project or would you just make all one by one?
What I end up doing is changing the document size and selecting "scale content". This will scale your animation assets and the stage size to the new ad dimensions. It will take some adjusting but its the quickest way I've found. Also, when adjusting a symbol that has multiple keyframes associated with it, you can double click on the symbol, resize it, then double click on the stage and the size adjustment will apply to all symbols. Please not that this method is using classic tween + symbols.
it worked my friend thank you!
I need to figure out how to host the ads then with a link to put on my ad platform for it to display the ads.
At th-cam.com/video/455eHaBtPDY/w-d-xo.html The closing tag needs to be placed after the closing tag. To wrap the creative.
Thanks for the tip!
didn't see this comment. But I said it too, just in case.
Do you have to have a google dev account or anything? I want to create banner then move it all to server and place it in page code.
thanksss!!! you save me. Excellent tutorial!
Glad it helped! 🙂
excelente video amigo, sencillo, rapido y bien explicado
Great Tutorial. thank you for sharing.
Glad it was helpful! Thanks!
This video rocks! Thanks for the tutorial! I did run into an issue when uploading to creative studio - the video didn't seem to render and appears blank - I wondered if it was cos my file size is 400kbs? I've followed everything along with the tutorial word for word but it's just that that point I'm not getting the same result. Do you have any suggestions?
Yr a fantastic designer
Thank you so much 😀
Is animate or google web designer better for creating html5 banners for someone who don't do code ?
Mashallah sir Thanks
the js alone is 250kb... is this is spec for ad server?
Much thanks for an awesome content.
Thanks for watching and learning! 🙂
Can you do a video on troubleshooting publishing/directory problems? How files should be organized to avoid problems?
Also on how to optimize file sizes so that they are not rejected by media.
Sorry to hear you were having issues. It's hard to know where things went awry for you, but I will definitely put on my list to do a publishing assets video for animate. Thanks and take care.
Thank you for the great tutorial. But I have this problem where I only see a blank browser after opening the published html, what could I have done wrong?
Try using a code editor to upload the assets to a server. Often times, if you're trying to view published docs on your own machine it won't work because it's not being hosted. I use a software called Brackets and once I add the html, js and images, I am able to Live Preview the published work on their servers.
but the button is not clickable, hot the banner is going to redirect to the URL?
Thank you, a lot!
How would you include a fall back image?
Hi, we are having an error where the animation doesnt play on bowser, any suggestions?
How do I combine this with a Button that changes color on Hover State?
Hi, could you make a video about how to create a template for this in Animate so that the user doesn't need to copy-paste the code every time?
can you teach me how to create the banner from the illustrator?
Thanks a lot for this great tutorial - everything works fine. I have a question concerning the implemtation of a video, that has to be combined with follwing Text & Logo-Animations. Importing the MP4-Video, worked properly. After the video an animated Headline, Logo and Text-Slides appears. This works properly on Desktop-Devices, but the auto-play function for the video does not work on iPhone, neither iPad. Is there a workauround for Adobe Animate CC? I found some work-arounds (playinside, mute, etc.) for HTML5-Videos, that embeds the video in the HTML-File in Video-Tags, but Animate embeds the video in the Javascript Code. In this case the work-arounds does not work. Thank you for an answer - I would appreciate your support very much.
thank you !
You're welcome!
Great video. My client wants me to edit an interactive HTML5 Canvas animation currently on their site, but they don't have the original Adobe Animate source file. Is this possible?
Thank you a lot!
You're welcome! I am glad it was helpful!
Hi, i want to transfer a number from adoube animate into the excel or any other data base. how can i do that?
how can i make a button for example that when i clicked it , send number 1 to an excel columne ? can you please help ? tnx
Great tutorial, really easy to follow. Thank you! One question.... are there max file size limits for HTML 5 ad's? I know static files are max 150kb.
Thank you! That will vary from client to client. HTML5 follows similar guidelines for Google, which recommends under 200kb.
I subscribed already.
Great video! How do I make the video loop only 3 times?
Thanks Bryan! If you want a custom loop, it requires a code, which you can apply on the Actions layer on the last frame.
if (!this.looped) this.looped = 1;
if (this.looped++ == 3) this.stop();
The 3 represents the times you want it to loop. Change that number to set your custom loop. Thanks!
I keep getting the same error when I try to upload into creative Studio “Your HTML 5 as is missing a primary .HTML file……..” even when I add the lines of code from your video… any possible solution?
I can't publish my animated ads as the message always comes up that it can't find the directory. What should I do?
Where do I put the link for the action button?
I'm having this issue as well, I need it to direct to a webpage without putting it in google.
If I accept the banner as html5 and read the clickTag link but... the link does not work, it does not redirect you to the page. Would you know why? Thank you very much since you are one of the few who know about animate and your explanations are excellent, I worked with Flash 8 years ago and now I am returning to the topic of banner ads but I can't get it, it enters as html but it doesn't redirect me to the link.
I'm having the same problem. Everything works in the validator except that the file doesn't actually click through.
Are there preset animations we can use within AA?
Yes, if you go to Window > Motion Presets there are many to choose from there!
Just for practice purpose it would be helpful if you post the download link for the illustration file
Hey there. This is a premium tutorial post on Montilla Design. Pro and Pro+ members can access the files and lesson notes for premium posts like this one. To learn more, you can visit www.montilladesign.com/plans
So what is the reason that when I click F6, mine doesn't add a keyframe with a split section in front of it? Mine just adds a little diamond dot but it doesn't cut the sequence ahead of it. Does that make sense? This affects my ability to add the Classic Tween because it just applies it to the whole line.
NOTE: My text has been converted to a symbol.
Hi Duncan, you may have added a Motion Tween instead of a Classic Tween. They work similarly, but the motion tweens will add a Diamond keyframe rather than split the timeline sequence.
This is a good breakdown of the keyframes in Animate: helpx.adobe.com/animate/using/animation-basics.html
Thanks for tutorial, I like that on ending u explained how add clickTag. But your banners too much simple :D..... in reallity often its banners where for example company selling 3 sorts on fences for example from stones, woods, metal and u need use 3 photos and 4 diffrent texts. And add some 3 icons animations to each fence. I mean u using very simple templates like possible to make in some online platform. People using adobe animate to make more advanced banners. Or for example some jump text then flying plain another frame some island monkeys and bananas falling :D then again text then we going up to sky, there from clounds jumping another texts, icons. And what I really miss its how to resize banners to another formats, or how move animation with frames with difficult and advances animation fastest ways. I rember before when was older version adobe animate edge I used to some elements for resize just the symbols with animation and img. But was problems, for example in chrome browser after resize symbol was bliured view, in mozilla firefox was good. Soo its ideas for next tutorialas... and look some banners portfolio from some agency from another country. :D They have very intresting banners, not just that default banners with 1 text, 1 and 1 icon. :D...
Thanks for the feedback, much appreciated! For the sake of time, I wanted to keep creative simple. Also because I am targeting beginner to intermediate, I don't want to overwhelm them. I agree, there are some really advanced banner ads and I am here for them! Perhaps this is something I will do for a more in-depth course in the future so stay tuned. Thanks again!
@@AngeloMontilla Then maybe just make tutorials from parts. 1. Advances intresting banner. 2. How to resize banners animations, move animated objects.(Its important because sometimes need to make 10 sizes of banners and its really taiking many time. 3. Most common problems tips, explain for example how save img, what need for retina screens 2x img because if just 1x will bliurred. For example bg possible to save 1x, or 1.5x. But like some img logo, texts, icons if its not vector for sure need use ratio 2x. Soo best ways to optimize size of banners. :D.
I disagree. Simplicity is best for banner ads. Short, simple, quick, to-the-point. Nobody will sit there and watch a short movie for a display ad. You need to catch people's attention right away.
Hello great tutorial but even including the ClickTAG code in my file the error below is appearing
We are currently unable to upload this file. Clear cache and try again later.
And even using your file that you made available for download, the same error as above appears
And how cool it was to get to know this platform Ads Creative Studio
Do I necessarily need to have my Ads Creative connected to Campaign Manager 360?
But in the end you cut the video when you were going to show the export and use... sad!
Show us the continuation, how after exporting I get the generated link and put the banner on my site?
Hard to believe Animate is so unfriendly and stalled in 2024 :(
Is it possible to do adaptive designs?
Yes when you Publish (File > Publish Settings) ensure you select the "Make Responsive" option.
@@AngeloMontilla Yeah, but responsive isn't the same thing as adaptive, let's say I want to include multiple resolutions in 1 file 300x250, 728x90, 160x600 (something I can easily do in Google Web Designer), but you cant do it in Animate or can you?
amazing video! Can anyone help me, HTML5 VALIDATOR keeps giving an error called "Relative asset check". How do I fix this?
Hey there! Thanks for the kind words. There may be an external reference in the html causing that problem. Check out these links:
community.adobe.com/t5/animate-discussions/error-quot-relative-asset-check-quot-when-validating-for-google-ads/td-p/11546963
support.google.com/google-ads/answer/1722096?hl=en#zippy=%2Call-other-html-ads
Hi, anyone knows why I couldn't find the html/java option on publish setting page?
Hi Limin! My guess is that you have your document set to ActionScript 3.0 and not HTML5 Canvas. If you go to File > Convert To, you should be able to switch the doc type to HTML5 Canvas. Give that a try and then see if your publish settings appear.
@@AngeloMontilla This didn't show up for me either, but your tip helped - thanks!
I cant import from illustrator, keeps crashing even reinstalling several fucking times.
Same
❤
So Flash is called Adobe animate now?
Yes and it has many more capabilities for HTML5 output.
Who has the code at the end ?
Hey there, you can find the codes here
support.google.com/admanager/answer/7046799?hl=en
I am wondering how come you needed to paste the code twice here , one on top and one in the bottom. Normally, we only need to add
Hi there! This video follows the guidelines for Ads Manager when uploading HTML5 creative to Google.The first line of code can be placed in the . The second must use the click tag variable as the click-through URL:
Creating a hard-coded click-through in Animate won't work for Ads Manager.
Check out this resource here ➡ support.google.com/admanager/answer/7046799?hl=en
@@AngeloMontillaGood information, thank you!
Looks like you've gotten into the habit of just creating movie clips.
Adobe Animate CC is a crap. You can create only very stupid html5 advertising banners, but there is no possibility to import videos or to add videos to container (if you want to have rounded corners), there si 3D tool missing for HTML5, no motion blur effects, etc. And the GUI... No comment.
What application do you use that's better?
yep, subbed
Thanks!