Jump to content
Search Community

joe_midi last won the day on August 24 2016

joe_midi had the most liked content!

joe_midi

Members

  • Posts

    216

  • Joined

  • Last visited

  • Days Won

    1

 Content Type 

Everything posted by joe_midi

7
8
9
Page 8 of 9  
  1. joe_midi
    From your codepen, you need to put the value in parenthesis: so left:"180px" and not left: 180 px TweenMax.to(".logo", 4, { left:"180px" });
  2. joe_midi

    GSAP Run Problem

    joe_midi replied to Lynx's topic in GSAP

    I think because you are calling GSAP straight away rather than letting the page load is the issue here. There isn't a problem with library, its just that its not available to the browser when it reads that script tag. You are already using a document ready function with your jQuery, so you might as well place it in the bottom of that: $(document).ready(function(e) { $(function(){ $("#main_nav > a").on("click, touchstart", function(event){ event.preventDefault(); }).on("touchend", function(event){ if(!$("#main_nav").hasClass("active")) { $("#main_nav").addClass("active"); } else { $("#main_nav").removeClass("active"); } }).on("mousedown", function(event){ if(!$("#main_nav").hasClass("active")) { $("#main_nav").addClass("active"); } else { $("#main_nav").removeClass("active"); } }); $("#main_nav > li a").on("mousedown", function(event){ $("#main_nav").removeClass("active"); }); $("body").on("mouseover", function(event){ if( $("#main_nav").hasClass("active") && ! $("#main_nav").is(':hover')) { $("#main_nav").removeClass("active"); } }); }); var wind=new TimelineMax(); var repeat=wind.repeat(7); var crazygo=repeat.yoyo(4); wind.to("#main_nav",0.5,{transformOrigin:"50% 0",rotationX:"15",transformPerspective:"125"}) .to("#main_nav",0.4,{rotationX:"12px"}) .to("#main_nav",0.6,{rotationX:"-25px",transformPerspective:"125"}); }); You could also place this script tag at the bottom of the document before the body tag closure.
  3. joe_midi
    Oh I know this one! I've actually reached out to DCM recently to ask how to implement clickTags into a banner when not using DoubleClick Studio and the Enabler. If you are unable to traffic the creative through DC Studio you do NOT use the Enabler, but rather a global clickTag variable. And for your Edge creative, your HTML would end up looking something like this: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=Edge"/> <title>EDGE AD</title> <!--DEFINE YOUR AD SIZE HERE--> <meta name=”ad.size” content=”width=300,height=250”> <!--PLACE A GLOBAL CLICKTAG VARIABLE HERE--> <script type='text/javascript'> var clickTag = 'http://www.google.com'; </script> <!--Adobe Edge Runtime--> <script type="text/javascript" charset="utf-8" src="edge_includes/edge.6.0.0.min.js"></script> <style> .edgeLoad-EDGE-12766043 { visibility:hidden; } </style> <script> AdobeEdge.loadComposition('Edge-1', 'EDGE-12766043', { scaleToFit: "none", centerStage: "none", minW: "0px", maxW: "undefined", width: "300px", height: "250px" }, {"dom":{}}, {"dom":{}}); </script> <!--Adobe Edge Runtime End--> </head> <body style="margin:0;padding:0;"> <!-- PLACE A CLICK ON THE CREATIVE --> <div id="Stage" class="EDGE-12766043" onclick="javascript:window.open(window.clickTag)"> </div> </body> </html> So in the HEAD you define the width and height of the ad using a meta data tag, as well as the global clickTag variable within a script tag. And then in the body you can use a javascript:window.open(window.clickTag) to call the clickTag when the user clicks on the banner. In the example above I've written it onto the main stage of the creative. I don't use Edge much so I'm not sure how you would implement it using the Edge IDE. Regarding billing, traffickOps isn't really my area, but from a creative production agency point of view, we do not have a cost with using DC Studio. Its the media agency who would be booking the publisher ad slots and brokering deals with DoubleClick. They would effectively be paying DC on behalf of the client/advertiser. I always thought they the media agent books on the behalf of Famous Drinks Brand #1 say 10million impressions on X website for 2 weeks at a cost of Z, which Famous Drinks Brand #1 would be paying DoubleClick.
  4. joe_midi
    @somnamblst, I didn't use either Zepto or jQuery, as I didn't feel the need to, I'm just using vanilla JavaScript and GSAP. For banners those libraries both seem like overkill, if they had a function that you really needed to use, then you could extract just that one function and use it that way rather than importing the entire library. And you are right, they don't actually police the use of jQuery. I would run test tho, and see how performant the banners are in a mobile browser when using jQuery. @flysi3000, you should always use the https connection wherever available, if its not you could also drop the http/https and leave it protocol relative, so just //
  5. joe_midi
  6. joe_midi
    I also did some tests with animated spritesheets for character animations if you had the images split across vertical and horizontal: http://codepen.io/joemidi/pen/mJbLyO
  7. joe_midi
    My banners have passed DoubleClick QA and are trafficked live while using the CloudFlare CDN.
  8. joe_midi
    This is basically the Media Agencies saying, "we don't know what to do, here's a line from our websites and publishers". What is a 3rd Party Ad Serving Platform? You may have read some posts on this forum talking about: DoubleClick, Sizmek, Flashtalking, adform. Frankly I'm quite surprised that you would be a banner developer and never had to use one of these platforms. Each platform has their own tools, scripts and nuances, some of which can be a boon and some a complete pain in the arse. The choice of 3rd party ad server normally lies with the Media Agency, they are the ones that the clients give the budget to book media spaces on specific websites, and they strike deals with the Ad Servers for impressions on behalf of the client. (If they don't have a preference and you could force their hand in this, you might want to think about what platform suits you best. Your agency would need to create an account with a 3rd Party Platform to test them out and see how things go.) Process Find out what ad serving platform is required. Demand specifications and if possible a template (I say demand, because if you ask nicely, people don't always respond in kind). Build your banner, as and how you do is your own. Incorporate any platform specific code into your banner for clickthroughs and other metrics. For DoubleClick this would be Enabler.exit("THIS_IS_MY_EXIT"); for Sizmek, this should be EB.Clickthrough("THIS_IS_MY_CLICKTHROUGH"); remembering to include any platform specific libraries also. Upload to platform and send for QA. You'll need to associate a campaign to an advertiser/media agent, this will be different for each platform and will require the help of an account manager on the platform team. Hope this helps!
  9. joe_midi
    There's absolutely nothing wrong with building a banner in Edge Animate using the timeline, if I were given a creative that used Edge Animate and was told to adapt or make amends I would use it, there's no reason to re-write the book. My _personal_ preference is to hand-craft the code as I have full control over what it's doing, I know what libraries are being included in the files I create and deliver. I just did a quick test on creating a banner by hand, and then in Edge Animate, and when I publish the code in Edge Animate it's doing things I'm not sure if I want it to do that, such as including jQuery, which would be overkill for a banner because you don't need all that functionality. If I wanted to debug an error, and go through the HTML file I can't because it's obscured it all in its publishing process, I'm not sure if theres a way to turn this off. I'm not sure if there is a way to mix coding and timeline with Edge, you can certainly code, but I'm not really sure how you would sync the GSAP code with the timeline. Probably best to watch the video further up in this thread. If you wanted to use a Layout tool, you could try and use GWD, it puts far less bloat in and you can move things around on a stage. But for me, I'll still write these things by hand because I know exactly where everything is, and what the result will be.
  10. joe_midi
    Hi Zync, Have you tried Google Web Designer? It creates the CSS in the main HTML as you build the layout. You could publish it and then strip out all the code you don't need. And then use GSAP to animate.
  11. joe_midi
    So I published it locally to see what its doing, (I don't have an AdWords account so I can't test that) And it seems to me that it inlines all the loaded JS files inside the index.html, I guess in order to reduce HTTP requests. <script data-source="TweenMax.min.js" data-version="1.17.0" type="text/javascript">/*! * VERSION: 1.17.0 * DATE: 2015-05-27 * UPDATES AND DOCS AT: http://greensock.com * * Includes all of the following: TweenLite, TweenMax, TimelineLite, TimelineMax, EasePack, CSSPlugin, RoundPropsPlugin, BezierPlugin, AttrPlugin, DirectionalRotationPlugin * * @license Copyright (c) 2008-2015, GreenSock. All rights reserved. * This work is subject to the terms at http://greensock.com/standard-license or for * Club GreenSock members, the software agreement that was issued with your membership. * * @author: Jack Doyle, jack@greensock.com **/ After more playing around, I realised that I couldn't call TweenMax from inside the self-invoking function when I publish the file, not sure why, it worked in the preview! Anyway, I edited the code so the TL is created outside the self-invoked function whilst paused, and inside the ready handler just calls to play the timeline. Updated the files on the Git: https://github.com/joemidi/GSAP_AdWords_300x250
  12. joe_midi
    I took at stab at this, and I'm pretty sure you can have DoubleClick served GDN banners. I also created a banner in GWD, and got the option for DoubleClick or for AdWords, you mentioned AdWords earlier, so I went and used that template. I took a look a the code and its using the Enabler.js much like my DoubleClick banners in this post: Polite loading GSAP into a DC HTML5 banner This makes sense because DoubleClick, AdWords, GDN are all Google owned products, so they're sharing much of the same tech. Anyway, I started to look into making it work with GWD, and just followed the steps I would of done in Flash Pro. Lay everything out on the stage. Import GreenSock Write animation code. So I laid out the assets I had in Design View Switched to Code View and found where all the JS imports where, and placed this below, keeping in line with the syntax. <script data-source="assets/TweenMax.min.js" data-version="1.17.0" type="text/javascript" src="assets/TweenMax.min.js"></script> Then I found the banner initialisation code at the bottom gwdAd.initAd(); and placed the animation just after that: /** * Handles the WebComponentsReady event. This event is fired when all * custom elements have been registered and upgraded. */ function handleWebComponentsReady(event) { document.body.style.opacity = ""; // Start the Ad lifecycle. setTimeout(function() { gwdAd.initAd(); animateBanner(); }, 0); } /** * Lets put all our animation in one block to use */ function animateBanner() { var tl = new TimelineLite(); tl.from(['#joe_midi', '#balloons'], 1.5, { alpha: 0 }) .to('#balloons', 1, { y: "-=200" }) .staggerFrom(['#copy1', '#copy2', '#copy3'], 1.5, { x: "-=250", ease: Elastic.easeOut.config(1, 0.3) }, 0.5); } Uploaded to GitHub if thats any easier for people to code check: https://github.com/joemidi/GSAP_AdWords_300x250 GSAP_AdWords_300x250.zip
  13. joe_midi
    Doh, reverse! Yes of course, theres that too! @T.Gregory, yea like Carl said, you'll be amazed at what you can learn here in these forums.
  14. joe_midi
    Ah okay. So this is probably not the best way of doing it, but I added a onComplete functions that adds an "open" class to the target boxes, so the it just checks if its open, and if it is it sends it back, if not it animates it open. http://codepen.io/joemidi/pen/KpJNxg I hope that makes sense.
  15. joe_midi
    Hmm. I took a guess at what you wanted, and I think I've got it. http://codepen.io/joemidi/pen/KpJNxg/
  16. joe_midi
    Pretty good solution actually and makes sense, just chain them up in order of dependencies. But, and correct me if I'm wrong on this, you'll end up waiting longer as the user would need to wait for the first script to download before downloading the next, so that all the scripts are actually downloaded in a series; one after another, instead of grabbing them as soon as possible, which is a more normal web-development practice. (Although, having a banner wait longer before it renders isn't necessarily a bad thing, after all its not mission critical to the website, just the advertiser.)
  17. joe_midi
    Thank you Jack & Carl. That is totally a sweet solution. I'm very keen on sharing any insight on banner production here whenever I'm able to, it helps me think things through, and will surely help others.
  18. joe_midi
    There is a repeat setting in the TimelineMax setup. var tl = new TimelineMax({ delay: 0.5, repeat: 2, repeatDelay: 2.5 }); Set it to 2 and it will play once and repeat twice, so playback is 3 times in total.
  19. joe_midi
    Pretty much the same reasoning I've used in deciding to pursue a hand-coded approach. But I have to say on the Stage front of things, BannerFlow has a pretty sweet stage, they're young, (something like 7 months old) but getting there, and at better pace than GWD or Adobe Edge, because as the name suggests its made for banners, plus they plug into every ad serving platform on the planet so it makes it much easier to work out all the clickTag business, it just depends on how the business case works for you. I will also say that Adobe's handling of this transition has been poor, as they haven't really addressed the fact that some people do not have the mind-set for coding, they release this article a few weeks ago http://blogs.adobe.com/flashpro/converting-your-flash-ads-to-html5-canvas/ and a lot of the designers on my team were very apprehensive about taking these steps as they are just simply not code-minded.
  20. joe_midi
    I was wondering how do you detect that GSAP is loaded into the DOM and ready to animate the banner? DoubleClick provides you with this in their example of polite loading a banner, where the JS and CSS is loaded later into the DOM. <script src="http://s0.2mdn.net/ads/studio/Enabler.js" type="text/javascript"></script> <script language="javascript"> //Initialize Enabler if (Enabler.isInitialized()) { init(); } else { Enabler.addEventListener(studio.events.StudioEvent.INIT, init); } //Run when Enabler is ready function init(){ if(Enabler.isPageLoaded()){ politeInit(); }else{ Enabler.addEventListener(studio.events.StudioEvent.PAGE_LOADED, politeInit); } } function politeInit(){ //Load in Javascript var extJavascript = document.createElement('script'); extJavascript.setAttribute('type', 'text/javascript'); extJavascript.setAttribute('src', Enabler.getFilename('DCRM_HTML5_inPage_Polite_300x250.js')); document.getElementsByTagName('head')[0].appendChild(extJavascript); //Load in CSS var extCSS=document.createElement('link'); extCSS.setAttribute("rel", "stylesheet"); extCSS.setAttribute("type", "text/css"); extCSS.setAttribute("href", Enabler.getFilename("DCRM_HTML5_inPage_Polite_300x250.css")); document.getElementsByTagName("head")[0].appendChild(extCSS); document.getElementById("container_dc").style.opacity=1; document.getElementById("loading_image_dc").style.opacity=0; document.getElementById("container_dc").style.display = "block"; } </script> But I found that when I added GSAP to this, my code would always load first then fire off and not wait for GSAP to be ready. So a dug a little deeper into DC's Enabler.js and found they actually had a loadScript function with call back. <script src="http://s0.2mdn.net/ads/studio/Enabler.js" type="text/javascript"></script> <script language="javascript"> var TweenLiteJS = false, CSSPluginJS = false, EasePackJS = false; //Initialize Enabler if (Enabler.isInitialized()) { init(); } else { Enabler.addEventListener(studio.events.StudioEvent.INIT, init); } //Run when Enabler is ready function init(){ if(Enabler.isPageLoaded()){ politeInit(); }else{ Enabler.addEventListener(studio.events.StudioEvent.PAGE_LOADED, politeInit); } } function politeInit(){ Enabler.loadScript('//cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/TweenLite.min.js', function(){console.log("TweenLite Loaded"); TweenLiteJS = true;}); Enabler.loadScript('//cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/plugins/CSSPlugin.min.js', function(){console.log("CSSPlugin Loaded"); CSSPluginJS = true;}); Enabler.loadScript('//cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/easing/EasePack.min.js', function(){console.log("EasePack Loaded"); EasePackJS = true;}); Enabler.loadScript('script.js', function(){console.log("BannerScript Loaded"); Banner.init();}); //Load in CSS var extCSS=document.createElement('link'); extCSS.setAttribute("rel", "stylesheet"); extCSS.setAttribute("type", "text/css"); extCSS.setAttribute("href", Enabler.getUrl("styles.css")); document.getElementsByTagName("head")[0].appendChild(extCSS); document.getElementById("banner").style.opacity=1; document.getElementById("loading").style.opacity=0; document.getElementById("loading").style.display = "none"; document.getElementById("banner").style.display = "block"; } </script> So I ended up with this in the HTML and then this in the JS Banner.init = function(){ //Just an extra check to make sure all library files have loaded as well. if (document.readyState === "complete") { if( !TweenLiteJS || !CSSPluginJS || !EasePackJS) { console.log("Not ready to animate yet, try again in 500ms"); setTimeout( Banner.init, 500 ); } else { console.log("Animation start"); Banner.animate(); addListeners(); } } } And it works, the animation isn't fired off before its ready to. I was just wondering if I've over complicated things, or I've missed something. I actually got this idea from @letssock when talking about implementing GSAP into Celtra.
  21. joe_midi
    As I write this, I have 25 banners to build 5x Creatives, 5x Sizes and I'm going to hand-code all of this, I only need to work towards one platform, so I can set up the functionality for that and I'm good to go. I'll be saving snippets on the way with Sublime so I can make things faster later down the line. You could use GWD with other platforms such as Sizmek if you really wanted to, just select Generic when you start building, and then implement the Eyeblaster.js (can't remember the actual name, sorry) stuff in CODE view. I've tested out GSAP in platforms like Celtra and BannerFlow which have the ability to extend their platforms by giving users BLOB data iframe, they seem to work pretty well.
  22. joe_midi
    Hmm, have you tried with a different device? I'm using an iPhone 5s with iOS 8.2 and the animation performance is great. The parts I can see (start animation and the devices animation) run smoothly. The section with the bubble "Exercising an understanding of how knowledge...." doesn't animate in, which may be an issue with how you are detecting where the screen is and firing off that animation. Also remember with iOS devices, Safari pauses any JS from running when you are scrolling.
  23. joe_midi
    Tbh, I didn't look further than CloudFlare, I didn't need a CDN for my projects in the end as the client ended up going with a more simple implementation. GSAP is all there on : https://cdnjs.com/libraries/gsap I ended up using the Frame Div component and few Execute JS actions to trigger the animations of something really simple. That way I could rely on the Celtra platform for platform specific stuff like swiping and tapping.
  24. joe_midi
    Hey letssock, Firstly did you catch the webinar the other day on Custom Development in AdCreator 4? Marko is pretty good with explaining how to use custom JS with Celtra, but the only caveat is that you need a CDN to host the JS file to ensure that it will get delivered. But if you are just using GSAP, just use the loadJS() function and use the success call back to start/build your timeline or tweenlites. You will then need to use screen.find to reference the elements that you want to animate.
  25. joe_midi
    Hey Carl, Thanks for feedback! I just wanted to share with the GSAP community and to see if others were doing similar stuff. My code was really just a quick solution to a problem, as I had deadlines to meet, but I can see how useful using TimelineMax would be, especially if you were to develop this into a game, and your code is much cleaner than mine! Unfortunately, the Flash IDE has a lot of limitations on the information you can export and doesn't really have much documentation (that I could find) on what is available. It just iterates over each frame, so creating an array with default values was the easiest option. Also the export also has an option to Stack Frames which removes frames that are duplicates, so you could make the resulting sprite sheet a little lighter in file weight.
7
8
9
Page 8 of 9  
×
×
  • Create New...