Scaling up the Canvas (which will leverage bitmaps that will not be scaled) for hi-DPI screens rather than scaling down the Canvas (and it’s bitmaps) for standard displays, ensures that there is no aliasing of bitmaps, which can sometimes be a side effect when scaling down image assets.This allows you to more easily implement a strategic approach for supporting hi-DPI in order to avoid unnecessarily bloating the overall file size associated with your image assets. You are able to selectively decide which assets will be scaled up within the FLA rather than scaling down all of the assets collectively.In these scenarios you could easily use images that were or while still authoring your FLA at the intended ad dimensions. Allows for greater flexibility if the you are ever required to support screens that may be higher then pixel density, which is very likely to become more prevalent as technology continues to advance.Basically provides the same approach that is taken when supporting hi-DPI graphics in the HTML DOM, where you would reference double-scaled image assets and then size them down using CSS.It may feel more intuitive and natural to many ad creators.A few of the advantages of authoring your FLA at the actual ad dimensions rather than at double-scale would be: Now the method that I’ve described within those publications is still valid, however in this tutorial I wanted to introduce an alternative approach that will allow for you to author your FLA at the actual ad dimensions while still having AdHelper provide hi-DPI support.If you’ve read my GreenSock Blog Article then you know that I’ve previously instructed ad creators to author their FLAs at double-scale and then allow AdHelper to scale the Canvas element accordingly, in order to ensure crisp graphics on high-DPI screens. Inside of the Properties Panel you’ll notice that the Stage has dimensions of 300×250.Alternate content for unsupported browsersĪ few additional, noteworthy points about the DoubleClick_AdStarter FLA:.Automatic starting and stopping of animations after 15 seconds.Loading a locally referenced version of AdHelper (will be included within the deliverable creative assets).Inclusion of DoubleClick’s required clickTag variable.
Loading DoubleClick’s CDN hosted GSAP library ( TweenMax).Loading DoubleClick’s CDN hosted CreateJs library (full, combined).The DoubleClick_AdStarter_Template file will support the following:
To see the reference to the custom template ( DoubleClick_AdStarter_Template) and associated custom profile ( DoubleClick_StandardHTML5_GSAP_AdHelper), go to File > Publish Settings > Advanced as shown below: Using the DoubleClick_AdStarter FLA The custom template also provides complete support for GreenSock and AdHelper, which we will utilize in the demo project. The FLA is already pre-configured to reference a custom template that will allow you to more efficiently create a standard HTML5 ad that meets DoubleClick’s coding requirements. This is intentional, because this FLA can be used as a generic template to begin any standard HTML5 ad that will be served by DoubleClick. You will probably immediately notice that the FLA appears to be empty, with no visible elements on the Stage or timeline. The banner is also configured to comply with DoubleClick’s standard HTML5 banner coding requirements, which can be referenced here.Ĭlose DoubleClick_AdStarter_300x250_Final.html and then open the DoubleClick_AdStarter FLA inside of the DoubleClick_AdStarter folder. You should see a very simple banner featuring some animated headline text and a few interactive logos. Simply open DoubleClick_AdStarter_300x250_Final.html within your preferred browser to view the finalized demo. Still, the tutorial below may still be helpful for some.
0 kommentar(er)
