However, before sinking a ton of time into a full-blown course I'm offering these source files to my Creative Coding Club members as a bonus to see what kind of interest there is. These files are the outcome of easily 20 hours of googling and searching forums for answers when I transferred from AS3 to JavaScript.
They contain techniques I use on virtually every project. My hope is that they give you a gentle entry into the wonderful world of creative coding in Adobe Animate and inspire you to learn. If you learn by exploring, this not-a-course is for you! New content added every week. You should understand some Animate basics like: creating symbols, working with the timeline, and assigning instance names to Movie Clips. Check out my Skillshare course: Animate CC for Everyone 2 months free if you need to learn the basics.
That's cool. You can cancel your subscription immediately after you download the files. However, I encourage you to check out the other great courses you will have access to. Either way you can stay around for as short or as long as you like. Join Now. It's great for HTML5 banners, generative art, interactive educational projects, and basic games. Why is this a not-a-course?
I personally love Animate and think it has huge potential. After making these edits, your code should end up looking like this:. We now need to manually remove the JSON dependency of our sprite sheet in order to ensure that DoubleClick can accept the ad. That said, for now we need to manually get rid of the JSON. In order to do this, go back to line within the init function to see where the JSON file is presently being loaded.
Rather than loading the JSON file we will now need to load an image file instead. So, in our example we currently see the following on line :. Replace the src attribute with the image file path rather then the JSON file path, and also change the type attribute to image , so that your code has been edited to look like the following:.
Inside of the handleComplete function, on line , is where we are currently pointing to the loaded sprite sheet as follows:. Now instead, we have to explicitly create the sprite sheet object ourselves. In order to accomplish this, we need to first ensure that the string contained within the first set of brackets, matches the id value from line that we edited earlier. This will most likely already be the case, however you should check it just to be safe. SpriteSheet ;.
You should be copying the following code:. Next, we need to paste this JSON code into the function that creates the new sprite sheet object as follows:. Your finalized code should look like this:. As we continue to work on the banner and republish from Animate CC , the JSON file will unfortunately continue to be generated, even though it is not actually being used any longer.
Because of this temporary inconvenience, which will be resolved in the next Animate CC release, we will need to remember to delete the JSON file from the images folder one final time before packaging up the final assets for delivery. If it is detected that CreateJs is unsupported by the current browser then this function will display alternative content.
Please understand that this approach is completely optional, and if you chose to not include a backup image within your ad package then you can easily change or remove this functionality. AdHelper provides the following static methods for handling alternative content, each giving different levels of control:. Please note that in this tutorial we are using.
However, there may be scenarios that require you to use one of the alternative methods above. Please refer to my Adobe Animate CC White Paper for specific details on how to properly utilize these different methods. Now if you decided that you did not want to include fallback logic within your HTML, then you could also remove the function entirely and simply send your ad-serving vendor a separate back-up image that is not packaged with the ad assets.
The way that you handle back-up images comes down to the specific requirements of the ad serving vendor or publisher. In these scenarios they instruct you to include a backup image in your. In our case, because AdHelper references the backup image from within the HTML, it is up to you to decide how you wish to handle your backup image.
Using AdHelper within your HTML5 DoubleClick ads provides a great deal of flexibility for handling backup assets, allowing you to take any of the following approaches:.
The final phase of this tutorial focuses on the implementation of some basic and commonly needed skills that you will frequently employ in most of your banners. This includes controlling timeline animations, simple programmatic animation with GSAP, adding basic interactivity and optimizing final assets for delivery.
Then type the following, so that the timeline will stop on the first frame:. JavaScript does not use this as an implicit scope as is the case with AS3. You are now required to explicitly specify scope in all timeline scripts. So, on the timeline, rather than calling stop , you must use this. However, if you mouseover the logo, nothing happens.
Leave the MovieClip and go back to the main timeline, and click on the first frame of the js layer. This scope activation object will allow for you to more easily reference MovieClips from within the local scope of other functions. Add the following code within the Actions Panel :. Here we have used the EaselJs on method to easily attach and handle the mouseover and mouseout events. The on method provides an easy way to scope your methods and offers some other handy features. By default, on sets the scope to the dispatching object, but you can include a third parameter to specify your own scope as needed.
The programmatic animations that are triggered on user interaction are being executed by GreenSock , which if you recall, is automatically being linked to within the custom template that is being leveraged by the FLA. A couple of things to note about the animation code:. One thing to note within the anonymous function that is called on mouseout is the usage of ad.
This is an AdHelper method which allows us to manually wake the ad for a specified duration in order to allow our animation to complete before the ad goes back to sleep.
Mouseover and mouseout the Animate CC logo to see your interactivity in action! On mouseover you should see the light shine effect play while the logo and the shadow beneath it increase in scale with some elasticity easing applied.
The next thing that we need like to do is to control and manage the timeline animations of the headline text. Right now, the animations are continuously looping and there is also a brief flicker when the animation returns to the first frame of the timeline. Add the following code underneath the first line where we created the scope activation object root :. First, you need to know that 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.
For example:. In order to get around 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. Next, on frame of the js layer, add the following code:. On the final frame of the timeline add the following code:.
So, you may have just noticed that I said we were sending the timeline to the 15th frame, however the code seems to indicate that we are instead sending it to the 14th frame. This can cause some initial confusion, as it currently requires you to subtract 1 from the indexes displayed in Animate CC.
So, the code above is actually correctly sending the timeline to the 15th frame, even though it may appear otherwise. This may be confusing at first, and you may find that labeling your animation frames with frame labels is more intuitive. These animations will automatically stop after 15 secs, then restart on mouseover and pause on mouseout thanks to AdHelper. Add the following line of code after all of the other existing code:.
You should see the two logos pulsating simultaneously. If you watch the ad for 15 seconds you should see the animations stop. Upon mouseover of the ad, the animations will restart and will then stop again on mouseout. Well congratulations, this ad is just about finished!
The only remaining step is completed outside of Animate CC , and that would be to fully optimize our image assets. Simply go inside of the images folder and manually compress the JPG using PhotoShop , and then replace the current JPG with your new optimized version. The reason that we need to manually compress and optimize our image assets is because unfortunately the Animate CC default bitmap compression is not very aggressive and you can achieve far better results by using other tools.
With file size being one of the major challenges of HTML5 advertising, this is a very important final step before you can complete your banner projects. Feel free to contact me with any of your questions or issues and I will be more than happy to help you get up to speed with using Animate CC for HTML5 ad creation. HTML5 ad building with Animate CC can be a very rewarding endeavor once you get down the basics, however this tutorial has really only scratched the surface of what is possible.
If your team is interested in learning much more and receiving personalized training covering how to most effectively use Adobe Animate CC, CreateJs, AdHelper and GSAP for HTML5 ad creation, then please reach out to me for further details regarding the training options that are currently available.
Download or learn more about Animate CC here. A few of the advantages of authoring your FLA at the actual ad dimensions rather than at double-scale would be: It may feel more intuitive and natural to many ad creators. Allows for greater flexibility if the you are ever required to support screens that may be higher then 2x pixel density, which is very likely to become more prevalent as technology continues to advance. In these scenarios you could easily use images that were 3x or 4x while still authoring your FLA at the intended ad dimensions.
You are able to selectively decide which assets will be scaled up within the FLA rather than scaling down all of the assets collectively.
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. 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.
The FPS has been set to 30, as previously described.
