Hace tiempo que un colega me viene hablando del Adobe Edge. In this tutorial I will show you how to create a simple image slider using Adobe Edge. This is a good practice tutorial to start using Edge and learn its. Edge Keeps Adobe Relevant In a World without. Solutions for Banner Ads in the Post- Flash World. Published: 2. 01. Adobe Edge Animated Web Banners. Application from Adobe - Adobe Edge Animate. This software can create. Apps; Edge Animate Templates. IE10, IE11, Firefox, Safari, Opera, Chrome, Edge, Software Version. Now bring in Adobe Edge HTML5 animations into. Dan Carr shows you how to create a banner template in Adobe Edge. Using and animating filters in Flex apps. This is a set of professional designed and animated banners in the 3 most used web banner formats, for Adobe Edge. Creative Work Sign Up For Free. HTML5 app smackdown: Which tool is best? The best known of these are Adobe Edge Animate and Tumult Hype. Google sparked an urgent and rather violent shift away from Flash technology when it announced that Chrome will pause . Flash has served as the de facto standard for banner ads for more than a decade. Firefox also blocked Flash after major security issues were discovered and Facebook's security chief called for Adobe to kill Flash once and for all. Amazon says it will no longer accept any Flash ads after September 1. Clearly Flash is on its way out of web browsers. Advertisers can no longer afford its liabilities. Now what? Modern browsers are remarkably capable of handling slick animations natively using HTML, Java. Script, and CSS (collectively referred to as . However, a few barriers are clogging up the transition. Some are technical, some are political, and some have to do with a glaring lack of information. Let's address things head- on, identify some solutions, and get things moving in the right direction. Green. Sock has a rich heritage in the banner ad industry, serving as its most popular animation library in both Flash and HTML5. We obsess about animation in the browser, studying the technical challenges, performance benchmarks, and workflow. Are you kidding? Years ago, when bandwidth was a tiny fraction of what it is today, the ad industry codified a set of standards for banner ad file sizes. A common limit was 4. Flash compressed into a single amazingly small swf file. Technically each publisher determines its own file size policies, but almost everyone looks to the IAB (Interactive Advertising Bureau) as a standards- setting body, like the W3. C for web browsers. The IAB exists to help guide the industry but they don't mandate or enforce anything. When Flash ruled the banner ad landscape, certain file size specs were recommended by the IAB and the system worked well. However, the technology landscape has changed drastically. Bandwidth, page size, and banner budget over the years. Bandwidth (Mbps)Banner budget (kb)Page size (kb)2. Mbps. 40kb. 1,7. 95kb. Year. Bandwidth (Mbps)Banner budget (kb)Page size (kb)Jan 1, 2. Jan 1, 2. 00. 96. Jan 1, 2. 01. 09. Jan 1, 2. 01. 11. Jan 1, 2. 01. 21. Jan 1, 2. 01. 31. Jan 1, 2. 01. 42. Jan 1, 2. 01. 53. Page size (kb)Since 2. IAB has been cautious about declaring HTML5 specs due to all the complexities involved. They released a set of HTML5 guidelines in 2. HTML5 ads weigh . The gatekeepers who impose the 4. IAB spec dictates. Consequently, developers are forced to shoehorn HTML5 banners into archaic Flash specs which isn't what the IAB intended. This must change. From our vantage point, fear is driving the industry. Publishers and networks are afraid to raise the file size limits without IAB approval. Some do it anyway, but disagree on exactly how much, leading to wild variations. Developers have no choice but to build for the least common denominator in their ad campaign which is either totally unclear or ends up being the dreaded creativity- crushing 4. They miss the unique strengths of HTML5 technology that we should be exploiting - shared resources and browser caching. These have a tremendous impact on loading time and overall performance which is the whole point of the file size limits anyway! Flash compiled all assets into a single swf meaning that if 1. End users paid the file size price 1. Multiply that by millions of ads and it gets pretty crazy. In HTML5, however, a library can be dropped onto a CDN (content delivery network) and shared among all banners, thus end users only load it once and it. It means that common animation chores like the request. Animation. Frame loop, timing, sequencing, intelligent GPU layerizing, lag smoothing, compatibility workarounds, performance optimization, etc. The unique banner- specific code can be much more concise, reducing overall load times and improving performance. File size limitations should be applied to the banner- specific assets, excluding the shared resources that drive common functionality. Imagine how silly it would have been if the 1. MB Flash Player download was included in the aggregate file size for each swf banner. Ad networks and publishers can put a certain subset of tested- and- approved libraries onto their CDNs and exempt them from file size calculations. We're thrilled to see industry leaders like Advertising. AOL, Google Double. Click, Flashtalking, and Sizmek already taking this approach with GSAP. Ad networks and publishers win because load times (and costs) are lowered and it's easier to troubleshoot problems when a common toolset is used. They reap the benefits of all the compatibility and performance optimizations in tools like GSAP. End users get ads that perform better, load faster, and look more appealing. Animation technologies and approaches. For those tasked with building HTML5 banners, the choices are perplexing. Is it best to use a visual IDE like Adobe Edge Animate, Google Web Designer, or Tumult Hype? Even Flash is capable of outputting HTML5 content. These tools can make building ads easier (especially for designers who don. Some networks explicitly state that they won't accept ads built with these tools. We'd love to see the visual tools mature and export concise, performant, ad- friendly code because plenty of designers aren't comfortable hand- coding banners yet. Ideally, they'd tap into GSAP under the hood so that designers and developers could collaborate on the same files without worrying about runtime redundancies. There are also network- specific banner- building tools but their proprietary nature makes them impractical for many campaigns. If an agency uses one network. Learning how to use each network's proprietary tool can be cumbersome. Hand- coded animations are usually much lighter- weight, performant, and universally accepted, but building them requires a particular skill set. And which underlying technologies should be used? Once again, answers vary wildly among ad networks and publishers. The goal of this article isn't to provide an in- depth review or comparison of the various tools. Each has its own strengths and weaknesses, but let's briefly touch on some of the major runtime animation technologies: CSS transitions and CSS animations - these are supported in all modern browsers, but not IE9 or earlier. They're cheap from a file size standpoint and they perform well. For simple animations like button rollovers, they're great. However, file size rises quickly and things get cumbersome when you attempt even moderately complex animations. Simply put, they will take longer to build, they won't work in some older browsers, there are bugs (particularly when animating SVG elements), and certain tasks are outright impossible. Additional reading: https: //css- tricks. Query - it was never intended to be a robust animation tool, so j. Query suffers from poor performance and workflow issues. Most ad networks strongly advise against using it. GSAP is up to 2. 0x faster. Additional reading: http: //greensock. Create. JS - Adobe Flash can optionally export to this canvas- based library. You can't just publish existing Flash banners to Create. JS (you must do some conversion work and leverage Java. Script instead of Action. Script) but for designers who are already used to the Flash interface, this can be a boon. One down side to canvas- based libraries is that you lose accessibility (the browser sees it as essentially a blob of pixels), but that's probably not a top priority for banners. File size can also become a concern (possibly mitigated by CDN standardization). You can use GSAP to animate Create. JS content. Additional reading: http: //createjs. Zepto - like a lightweight version of j. Query that uses CSS transitions under the hood for animations. Zepto is better than j. Query for banners, but it suffers from similar workflow issues as well as the inconsistencies/bugs inherent in CSS transitions/animations (like with SVG transforms). Active development seems to have stalled. Additional reading: //zeptojs. Web Animations - a new spec being worked on that has a lot of promise, but it just isn't a realistic contender at this point because it is in flux and several browser vendors remain noncommittal about ever supporting it. The polyfill has performance problems. Additional reading: //w. GSAP - Widely recognized as the performance leader, GSAP solves all kinds of real- world animation problems from browser inconsistencies to workflow headaches (far too many to go into here). The Flash banner ad community is full of designers and developers who use GSAP daily, making it much easier to transition to HTML5; no new syntax to learn. Ongoing development and support have a solid track record for over 7 years. Additional reading: http: //greensock. Recommendations. Based on our experience and the results from our survey, we suggest the following: Standardize a few Java. Script libraries. Ideally, the IAB would equip the community with a short list of recommended libraries that get CDN- ified and exempted from file size calculations. Historically, the IAB has been extremely reluctant to officially endorse any third party tools. That's understandable - it could be seen as playing favorites or unfairly excluding someone's favorite library. However, without specific recommendations, the HTML5 landscape is so fractured and complex that it will result in a free- for- all (which is basically what it is now). The IAB can set the tone and move the focus away from aggregate total file sizes and into the modern era that leverages shared resources and browser caching to deliver excellent performance. It is imperative that this list of . The IAB can run their own independent tests and look at performance, features, compatibility, support, workflow benefits, and overall industry demand to determine which libraries get recommended. Of course we feel strongly that GSAP belongs on that list because: It is the top performer. It has widespread industry acceptance, both in Flash and HTML5.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. Archives
January 2017
Categories |