Looking for:
- Adobe animate cc html5 banner tutorial free download |
Step-By-Step HTML5 Ad Creation With Adobe Animate CC.
We have since released GSAP 3 with many improvements. While it is backward compatible with most GSAP 2 features, some parts may need to be updated to work properly.
Please see the GSAP 3 release notes for details. During the same time period that Adobe Flash established itself as the content creation tool of choice for the digital advertising industry, the GreenSock Animation Platform had also become synonymous with digital advertising and had earned the well deserved distinction of being the de facto industry standard for programmatic animation of Flash-based content.
The two technologies enjoyed a sustained and complementary relationship that became a familiar and effective pairing for Flash animators everywhere. If you were one of the ad creators who had been using the two technologies together to make your living, then you were probably pretty bummed out to say the least. To many, it appears as though GSAP has finally found the worthy partner it has been waiting for. The two technologies can be used together seamlessly, achieving great results that are highly optimized across all browsers and devices.
In this article I will focus on showing you how to use some starter files that are preconfigured to load TweenMax so that all you have to do is edit and publish. In my next article I'll guide you through the process of creating a custom template so that you can greatly extend the capabilities of your published Animate projects and streamline your workflow.
Contains minimal animation code. No code or artwork present. Use this to start new banner ad projects. You can click on each element to see its instance name in the Properties panel.
How was this animation executed without the help of the Animate timeline? But wait, there was no visible linkage to TweenMax. This time right-click within the document and view the source of the generated HTML wrapper and you will see the following reference to the TweenMax. Well, a custom template of course! It was this custom template that injected the code to load TweenMax. The template also loads AdHelper.
Adobe Animate CC to the Rescue! Next, look inside of the Properties panel and notice that the Stage of the FLA has dimensions of x yet after publishing the canvas is actually being rendered at x This is AdHelper automatically scaling the canvas in order to ensure crisp graphics on high-DPI screens. The reason that we need to author our Adobe Animate ads at double the actual ad dimensions is because you will most likely want to ensure that any images or assets that are cached as bitmaps are high resolution and not scaled up on high-DPI devices, which would cause them to appear blurry.
If you mouseover the ad the pulsating animation will resume and then pause once again when you mouseout and leave the bounds of the canvas. This is AdHelper functionality once again, this time automatically pausing and restarting any ongoing animations in order to comply with standardized and widely adopted IAB and publisher specs.
The creation of the border and the click-handling functionality are both being executed by code contained within the custom template, saving you the hassle of having to do this repetitive work on each and every banner project.
You will never need to include a border or any click handling methods within the FLA of any ad that uses this custom template. It is a great exercise to peak behind the scenes to see how and where these features were implemented inside the template.
To learn how to create your own custom template read the second article in this series. In no particular order, here we go:. JavaScript does not use this as an implicit scope as is the case with AS3. You are now required to explicitly specify scope in timeline scripts. So, on the timeline, rather than calling stop , you must use this. For example:. Variables are defined within the scope of their frame code, so if you define a variable in the first frame, you will not be able to access that variable in the final frame.
In order to address this, you need to scope your variables using this so that they are accessible across all frames. Please note that variables are not strictly typed in JavaScript as they were previously in AS3. The same approach should be taken for defining any functions on your timeline that will need to be called later in the animation or by a parent MovieClip :. It is also helpful to be aware that you can reference the main timeline of the FLA from nested MovieClips using a global reference named exportRoot or the stage property, which is exposed on all DisplayObject instances and points to the Stage that contains the instance.
You should also know that if define external functions inside of your HTML wrapper you can automatically access them from anywhere inside of your FLA. You can also append global variables and functions to the window and document objects to make them accessible from anywhere from inside the FLA or externally from the HTML wrapper. This can cause some initial confusion, as it currently requires you to subtract 1 from the indexes displayed in Adobe Animate. To avoid this confusion, it is suggested that you label your animation frames with frame labels, and reference those in your code rather than numbers.
It's likely that you've previously used ActionScript's trace statement to debug your code. In JavaScript, you can use console.
To view console. Be aware that in IE9 the console must be open in order to function correctly or it will generate errors.
Make sure that you remove any console. This is exactly the same way that it was done with Flash, so this should look very familiar:. This approach can also be very useful if you have a designer who is preparing the assets within Adobe Animate and then handing them off to a developer who might leverage them outside of Adobe Animate. In this scenario Adobe Animate functions as a pure content creation tool with the generated JavaScript file containing a JavaScript representation of the Library that allows the developer to easily reference any asset that has been assigned a Linkage ID.
I will walk through the steps of creating your own custom template, so that you can configure one for yourself that meets your specific needs. This will allow you to create multiple custom templates for specific ad vendors, formats and configurations.
These two old friends are finally reunited and the future is looking bright! Cory Hudson Email: cory bannerwave. Posted April 19, Posted April 20, Posted April 30, Posted May 18, Posted May 26, Posted June 2, You need to be a member in order to leave a comment. Sign up for a new account in our community. It's easy! Already have an account? Sign in here. Leaderboard More More. Sign in to follow this Followers 0. April 18, GreenSock. We are happy to introduce this guest post from Cory Hudson.
Cory is well-known for his work at the IAB, presentations at Adobe Max and conferences across the country. Although it is easy to use GSAP in your Animate projects, it is not super clear or intuitive to include it via the Publish Settings dialog box. This series will have you up and running in no time while giving you many practical tips to avoid common pitfalls if you are transitioning from Flash and ActionScript-based projects.
Get an all-access pass to premium plugins, offers, and more! Join the Club. Un jour un dessin. Into the Storm. UX Fest The Alienist. Centogene Solutions. One Million Devs. View All Submit a Showcase. With great power comes great responsibility. Tween wisely. Go to blog posts.
Recommended Comments. I have been waiting for this! Templates rule! Link to comment Share on other sites. Great Post Cory! Carl 10, Likes Superhero Posted April 20, It's kinda like trying to apply font-size to text inside a JPEG image. It's a fundamentally different technology. If there's enough demand, perhaps we'll create special plugins specifically for Adobe Animate that might accomplish similar feats.
You need to set it up correctly but the combination can be powerful. The info under the "Retina ready" heading is interesting, but it seems that using 2X images for all assets could be problematic in terms of hitting the standard k file size limit? For my standard DOM div banners, I've been using regular size images for most imagery- the blurring is not very noticeable when most images scale on hi-res displays.
Blurring is much more noticeable on text, so I use SVG for text whenever possible, though file size can be prohibitively high on SVG text.
No comments:
Post a Comment