Search the Community
Showing results for tags 'templates'.
Found 3 results
-
My very long "origin" story follows. TL/DR: I've attached some templates that people might find useful if they are building ads for AdWords using Adobe Animate CC 2017. <--- begin long story ---> I'm very new to HTML5, but I have many years of experience with Flash. That said, I'm a designer, not a coder, so trying to figure out what path I should take to move from Flash to HTML5 was like wandering around lost in a jungle, sans-machete. The last time I made the effort to learn how to make HTML5 ads was a couple of years ago and was less than successful. I ended up landing on Google Web Developer, since that appeared at the time to be the only HTML5 program that AdWords would accept ads from. That was so incredibly frustrating that I ended up going back to Flash CC 2015, animating the ads, then back saving the files to CS6 so I could publish them with the highest level of the Flash Library that AdWords would accept. Due to how long that process ended up being, we transitioned to using static ads instead of animated ads, and our clients were fine with that. I was relieved. All was right(ish) with the world. I was content to leave HTML5 behind and pretend like I would never need to figure it out. That ended in February. We have a client that wants to start running animated banner ads through AdWords. Back into the jungle I went. After learning that AdWords will no longer accept .swf files, I picked up GWD once again, and took a day to put together one ad that would show the client that we could do animated ads. If anything, GWD felt worse than it did two years ago. I banged my head against the wall trying to get text to do what I wanted, and ended up creating SVG shape files instead. I eventually got the ad mostly working. Sometimes a background shape didn't do what it was supposed to, and nothing seemed to fix it. It was not an ad that I was very proud of, but at least it was working. Mostly. I also calculated that it took me eight times as long to build that ad as it did for me to make a static ad. I sent the example ad off to the client and didn't hear anything back until last week. He sent us links to some ads that he liked, and asked if we could do something like that. They were pretty basic, the one he really liked was a bit sloppy, but I replied that we could do that, and also pointed him back to the example ad that I had sent before. Apparently his missed it, because he said that he loved it. It was exactly what he was looking for. For the heck of it, I decided to take a look at the code for one of the ads and see if it was made in GWD, or something else. Really hoping for something else. Around the middle of the HTML file, I saw, "UPDATES AND DOCS AT: http://greensock.com"... That's what led me here. Through watching videos, and searching the forums, I learned that Adobe Animate was basically Flash – or Flash enough that the learning curve would be pretty shallow – and that it could incorporate GreenSock. Oliver16Years was particularly helpful in pointing me down the correct path regarding the use of Animate versus hand coding, and that saved me quite a bit of time. The next hurdle I had to overcome was building an ad in Animate and getting it through AdWord's HTML5 Validator. I rebuilt my original ad, and when it came time to run it through the Validator, I got two errors; one involving missing this code from the <head> section: <meta name=“ad.size” content=“width=300,height=250”> Which I already knew about, and just forgot. The other involved fonts, which surprised me because I was using Google Fonts. Apparently, when Animate publishes the files it links to the Google fonts in a way that makes AdWords sad. Looking at the code, I couldn't figure out what needed to be changed. I asked for advice in another forum post and ohem helped out with his reply saying that I would be better off sticking with static text since Animate would automatically convert it to shapes when the file is published. So I've sidestepped that issue for now, and will revisit it if I need to down the path. I fixed those two things, resubmitted, and then got another error. Apparently, I needed to find this line in the published HTML5 file: <script src=“https://code.createjs.com/createjs-2015.11.26.min.js”></script> replaced with this: <script src=“https://s0.2mdn.net/ads/studio/cached_libs/createjs_2015.11.26_54e1c3722102182bb133912ad4442e19_min.js”></script> So I did that. Resubmitted, and then got an error for how I was direct linking the ad to a URL instead of using "clickTag"... Yeah, I remember click tags from my Flash days. I get it. You gotta track those clicks. The solution was (or appears to be) to add this script code to the HTML5 file (I put it below the <title>): <script type=“text/javascript”> var clickTag = “”; </script> And use this for the button code: this.btn_main_link.addEventListener(“click”, fl_ClickToGoToWebPage); function fl_ClickToGoToWebPage() { window.open(“clickTag”, “_blank”); } ... I believe that is correct. At least after doing that and resubmitting it, I didn't get any more errors. All of that was a lot of jumping around in the code side of things that I really didn't want to be doing, especially if/when we start rolling out animated ads to our other clients. Surely there was a way to make this work automatically? Why yes, yes there is. Thanks to this other forum thread I came across, I learned that I could go under the "Publishing Settings / Advanced" tab in Animate, and export the "Template for publishing...", modify what I needed to modify, and then import it back in. I totally took advantage of that. I set up the file so it would have all of the code changes, as well as including the GreenSock library. I tested the published file using the AdWords Validator, and everything was green. Then I made the other two common sized ads that we are always needing to make, to give us a full set: 300x250, 160x600, and 728x90. Then, because of a number of our clients are car dealers and have lengthy disclaimers that we need to cram into the ads, I made a modified set similar to what I used to do in Flash for a huge account at a prior job that include a rollover "disclaimer" button. I tested those in the Validator as well, not expecting them to work, but they did. They may not work when actually uploaded to AdWords though; I'm a designer, so I don't have access to that side of things to test. <--- end long story ---> I've attached my current set of templates to this post. They are set up with all of the basics you need to satisfy the AdWords gods (at this time, and as far as I know). 160x600, 300x250, 728x90 (two sets; one with a rollover for disclaimers and one without) built in Adobe Animate CC 2017 30 fps 1px black border (locked)... there may be a better way to do this. I fell back on my Flash experience when setting it up, but I'm certain there's a way to add a border to the ad through HTML. It was a low priority right now. click area (locked & hidden) 300 frames (10 seconds) already added to the timeline stop code on the 300th frame the GreenSock Library should already be include and working (it's included when published), but I haven't tested that part yet (still learning my way around GreenSock), and – again – I'm a designer, not a coder, so I may be missing something there I have not used these yet for actual ads that are up and running on AdWords. Once I have, I'll report back, and if any changes are needed to make them work, I'll replace/update the zip file. --- (edit) The rollover part of the rollover banners, as they are now, do not work when uploaded to AdWords. I will see if I can figure out what has to be done to make it work (if anything CAN be done). If any of you guys have an idea how to fix them, please let me know and I'll get the fix in and updated asap. --- (edit 2) Thanks to the responses below, I seem to have fixed the rollover issue so they work now with AdWords. I also caught a few more errors that I fixed as well. A new zip file has been uploaded. Until I actually use them for a campaign, I'm not 100% sure they will fly, but I'm hopeful. If anyone has a chance to use them before I do and would like to say how they worked, I would appreciate it. The disclaimers are in OpenSans, but you can change them to whatever works best for you, of course. Animate CC 2017 HTML5 Templates-AdWords-v2.zip -
Anyone here familiar with weborama HPTO and how the hell it works? there is so little documentation that is hard to simply preview a file just to work on it. http://specs.weborama.nl/nl/html-publisher-persgroep-vk_parool-hpto
-
Keeping in mind am using the Meteor framework... Currently, when i click on a specific button on my page, it redirects/loads to the intended page being a template. My desire is to use (timeLineLite() ) to animate the intended page (template) by sliding it into the main page. Is this possible to do? If so kindly show me how to. My codepen link where I indicate the issue is: http://codepen.io/SirBT/pen/ORVyBq Thanks in advance
