Custom eLearning Custom eLearning
  1. What We Do
    Custom eLearning Learning Consultancy Performance Campaigns Mobile Learning Performance Support Microlearning
    Video and Animation Rapid eLearning Games & Gamification Flash-to-HTML ILT and VILT Value Added Services
  2. Who We Are
    About Us Leadership Awards Press Releases Clients Careers Contact Us
  3. Our Work
  4. Insights
    eBooks Whitepapers Reports Presentations Case Studies Webinars Infographics Newsletters
  5. Podcast
  6. Let's Talk
  • What We Do
    • Custom eLearning
    • Learning Consultancy
    • Performance Campaigns
    • Mobile Learning
    • Performance Support
    • Microlearning
    • Video and Animation
    • Rapid Learning
    • Games & Gamification
    • Flash-to-HTML
    • ILT and VILT
    • Value Added Services
  • Who We Are
    • About Us
    • Leadership
    • Awards
    • Press Releases
    • Clients
    • Careers
    • Contact Us
  • Our Work
  • Insights
    • eBooks
    • Whitepapers
    • Reports
    • Presentations
    • Case Studies
    • Webinars
    • Infographics
    • Newsletters
  • Podcast

Flash to Animate CC: More than just a Rechristening

 

eLearning  |  6 MIN

Flash to Animate CC: More than just a Rechristening

Written by Mahesh Shinde

Flash to Animate CC After having been around for 20 years, Flash Professional has now evolved into Animate CC. Animate CC leverages the familiar tools interface and rich output of its predecessor, at the same time allowing for native HTML5 Canvas and WebGL support. This recent development at Adobe is more than just a renaming of the tool, as most reviews of the tool categorically say.

Our Observations

As a follow up to our previous blog, which was published shortly after the release of Animate CC, we share here some of our findings and observations after using the new tool.

Basic Animations:

We created basic animations using vector shapes with flat, gradient colors, simple typography, and audio synchronization. We were also successfully able to convert an existing basic Flash animation into HTML5 Canvas. We found that Animate CC converts fairly lengthy animations without any issues.

Advanced Animations:

We also created advanced animations where animations are nested and looped, with heavy use of filters, images, and typography. These were also synced with audio. We observed that Animate CC’s Motion Editor makes it easier to create the animation, since it allows for granular control over motion tween properties. Furthermore, with advanced animations we observed that there could be issues with the loading of images while launching the HTML output. Images sometimes failed to load at first, but they did load once the animation was refreshed (advanced animations take longer to load than the basic ones). We must call out, however, that this delay in loading could arise from various network and/or browser performance issues.

This challenge can however be addressed by preloading the images.

HTML Output Optimization:

Animate CC effectively optimizes animations by optimizing the images and the audio files they contain; it removes the unused assets, library elements, or keyframes.

Multiplatform and Device Support:

The Animate CC output can be exported to HTML5 Canvas, WebGL, Flash (SWF), AIR, video, and custom platforms (such as SVG) via extensions. GAF (Generic Animation Format) files can be used with gaming frameworks like Unity3D, Cocos2D, and Starling. Animate CC also provides publish settings for sprite sheets, which are used to create looped animations.

Responsive Output:

While Animate CC does not publish a responsive output, short animations created and published using the tool can be integrated into custom responsive HTML framework. These can then be scaled to fit to the device size. Animate CC allows for this by letting programmers easily access the code, which is built right into the tool.

Audio:

Animate CC exports the timeline audio into MP3 formats, adding support to almost over 90% of the browsers. However, while HTML5 Canvas supports the Audio ‘Event’ type, it does not support Stream audio.

Easier and Closed Audio Syncing:

Animate CC’s Timeline feature allows for seamless audio synchronization for animations-something that is both challenging and time-consuming with HTML5 alone. It also reduces programming effort. Essentially, this means that Animate CC will allow for the exact replication of Flash animations-however, the performance of the output and how it compares to the Flash-based output remains to be explored. Moreover, Animate CC’s Timeline feature also enables easy control of audio looping.

Video:

Animate CC allows videos to be exported for multiple resolutions. Moreover, the Adobe Media Encoder converts videos of any resolution into H.264 format to support a range of browsers.

Images:

Animate CC supports PNG, JPEG, and Single frame GIF (no animation). It allows access to more than 50 million curated, royalty-free photos and graphics-all housed

within the tool. All the images used in the animations are converted into sprite sheets and saved in PNG format. This reduces HTTP requests and loading time.

Filters:

We noticed that some of the filters in Animate CC do not render effective results in the HTML output. This means compromising on the visual quality and richness of the output, since the depth and value afforded by the filters is lost. Loss of visual quality was observed when using filters like Bevel, Gradient Glow, Gradient Bevel, Quality, Knockout, Inner Shadow, and Hide Object of the Drop Shadow Filter. We hope that Adobe addresses this issue in its subsequent updates.

Font Support:

Taking forward the support of installed and embedded fonts from Flash, Animate CC has integrated TypeKit in the tool-a service that allows designers and developers to choose from a library of high-quality fonts through a subscription plan.

Flash Components:

Animate also carries the same prebuilt components that were present in Flash. Those are handy when it comes to layout, design, and interactivities. But, Animate does not allow the use of these components in HTML Canvas and WebGL files.

Plug-in Dependency:

With native HTML Canvas and WebGL support, Animate CC has eliminated Flash Player dependency. That being said, it is interesting to note that Animate CC continues to support SWF as an output format.

Suggestions

After taking a first shot at the tool, we would like to share some of the suggestions or workarounds we came up with:

  • Avoid the use of images in order to get an optimized output (images used are combined in a sprite sheet which may increase the file size, depending on the number of images).
  • Since motion tweens are published as frame-by-frame animations, use classic tweens where possible.
  • Create animations in small parts to avoid errors while publishing for HTML (this approach would be less time-consuming too).
  • Keep the image setting at high quality. Although this would increase the file size, the use of 32 bit image depth is recommended for good quality images).

Our VerdictIt is evident that the strategic name change to “Animate CC” was intended to draw attention to the primary purpose of the tool-producing high-quality animations. This is indicative of the multitude of possibilities expected from the tool.

As with any other output, there are certain extrinsic factors that may impact the performance of the Animate CC output-for example, browser support to Canvas, device configuration, and device performance (because of multiple applications running on the device). Delays in the runtime loading of assets attributed to bandwidth issues may further impede the performance.

Notwithstanding the existing performance issues, Animate CC seems like a refreshing change of pace for developers in that they that can easily access and modify the code to suit the intended output. It also sounds promising for designers-enabling them to create impactful and functionally robust animations without any prior programming knowledge or programmer support.

As we explored the quality and level of output using Flash Professional, Animate CC, and HTML5, we identified certain features that were either comparable for each or stood out for one. We then put together a high-level comparison chart. You can take a look at this chart here.

Flash vs Animate CC vs HTML5

The reviews around Animate CC are still in a nascent stage-with several companies and users taking a go at the tool just months after its launch. This was our first attempt at seeing what the tool can do. We are excited about taking a deep dive into the tool and promise to keep you posted along the way, so watch this space for updates!

Tweet
Tags: Adobe Animate CC Adobe Animate CC First Look Animate CC New Features Flash to Animate CC

Write a Comment



← Responsive Videos Authoring Tool/Framework Selection for Responsive eLearning Development: Adapt →
Subscribe for updates

Delivered by FeedBurner

Featured PostsTags
L&D Go Beyond Podcast: Challenges and Opportunities for Measuring the Impact of Training and Learning, with Kevin M. YatesIsha Sood18 and Fabulous – Upside Learning Completes Another Glorious Year of Enabling Enterprises for Better Workplace LearningIsha SoodL&D Go Beyond Podcast: Instructional Story Design, with Rance GreeneIsha SoodStoryboarding – You Gotta LUV it!Neeti SudumbrekarL&D Go Beyond Podcast: Gamifying Workplace Learning the Right Way, with Karl KappIsha SoodL&D Go Beyond Podcast: Workplace Learning in the Post-Covid World, with Sam Taylor, Jr. and Rick HouslerIsha SoodDesirable Difficulties: Making learning slow, to improve performance fastShreyas KoradL&D Go Beyond Podcast: Learning for L&D Professionals, with Joti JosephIsha SoodBetter learning experiences lead to better employee engagement in the modern workplaceAmit GargL&D Go Beyond Podcast: The Ten Questions You Must Ask at The Start of Any Learning ProjectIsha SoodA little forgetting before retrieval makes memory stickier for workplace applicationAlesiya KhanL&D Go Beyond Podcast: Writing Better Multiple-Choice Questions to Assess LearningIsha SoodTime to onboard the great learning modernizationAlesiya KhanBeyond mere conversion, virtual ILT is an opportunity to modernize learningAmit GargModern workplace learning needs new wine in new bottleAmit GargIt’s Fun, But Is Netflix Right For Workplace Learning?Amit GargCan gamification level up your employee onboarding experience and boost outcome?Amit GargSolving before Learning: A Case for Inverting the Way Courses are DesignedShreyas KoradL&D Go Beyond Podcast: AI and The Upskilling Imperative for L&DIsha SoodLooking Back at 2021 with Gratitude: A Fulfilling Year with Many Reasons to CheerIsha SoodThe Forgotten Art of Exploratory LearningShreyas KoradDeep, durable learning ensures adept, adaptable workplace performanceAmit GargL&D Go Beyond Podcast: Design for How People LearnIsha SoodL&D Go Beyond Podcast: Chatbots in Workplace Learning & PerformanceIsha SoodL&D Go Beyond Podcast: Curiosity & Learning in the WorkplaceIsha SoodL&D Go Beyond Podcast: Curation & Learning Ecosystems – Dealing With the Complexity That Damages Learning CultureIsha SoodL&D Go Beyond Podcast: How to Solve the Right Problems in L&DIsha SoodL&D Go Beyond Podcast: Innovation in L&DIsha SoodL&D Go Beyond Podcast: How to Bring Performance Focus to TrainingIsha SoodL&D Go Beyond Podcast: Design Thinking for Learning EngagementIsha SoodL&D Go Beyond Podcast: Building Learning Programs that EngageIsha SoodL&D Go Beyond Podcast: Learning Engagement in Supply Chain TrainingIsha SoodThe Living Root Bridge of Learning EngagementAmit GargAuthentic, holistic tasks ensure engaged, applicable learningAmit GargThe Curious Role of Spaced Practice and Staggered Retrieval in Learning EngagementAmit GargWhy Interleaving is a Significant Practice for Learning EngagementAmit GargUnderstanding Learning Engagement – The Missing Link Between Learning and PerformanceAmit GargWhat is Learning?Amit GargEngaging eLearning is Effective LearningAmit GargReimagine Learning with GamificationShreyas KoradGamification of Workplace Learning: Podcast Series Episode 6Mustafa HusainGamification of Workplace Learning: Podcast Series Episode 5Mustafa HusainHow Mindset of a Gamer Help Us Navigate Learning in Modern WorkplaceShreyas KoradGamification of Workplace Learning: Podcast Series Episode 4Mustafa HusainGamification of Workplace Learning: Podcast Series Episode 3Mustafa HusainGamification of Workplace Learning: Podcast Series Episode 2Mustafa HusainGamification of Workplace Learning: Podcast Series Episode 1Mustafa HusainGamification: Presenting Framework for Gamified InductionMustafa HusainPresenting a New Podcast Series – Gamification of Workplace LearningMustafa HusainGamification: How Learning Happens in the Modern WorkplaceShreyas Korad
Mobile Learning (140)eLearning (115)mLearning (98)Instructional Design (50)Game Based Learning (42)Technology (35)eLearning Development (35)Workplace Learning (33)Learning (26)Learning Games (26)Design (25)Upside Learning (24)Learning Design (22)eLearning Technology (21)Social Learning (20)ipad (19)DGBL (17)Best eLearning Links (16)augmented reality (15)eLearning Outsourcing (15)Games (14)HTML5 (14)Innovation (13)LMS (13)Responsive Authoring Tools (13)Mobile (13)UL Fun Cartoon (13)Future (12)IPhone (12)Future Learning (11)UL Fun e toons (11)Informal Learning (11)elearning weekly digest (11)Responsive eLearning (11)Flash (10)Development (10)Top eLearning Links (10)eLearning On Tablets (10)Learning Technology (10)Weekly Digest (9)Top eLearning Posts (9)Blended Learning (9)GBL (9)Mobile Learning Technology (9)eLearning Weekly Finds (8)Tablet Learning (8)Multi Device eLearning (8)eLearning Weekly Find (8)Mobility (8)elearning in a multi-device world (7)Learning and Development (7)Trends (7)Rapid Authoring (7)Training Outsourcing (7)Engaging eLearning (7)Custom eLearning (7)Performance Support (7)Mobile Technology (6)Casual Games (6)Serious Games (6)
eLearning Learning

Upcoming Events

Archives

Resources
Compliance Training: Stop Ticking the Box
Compliance Training: Stop Ticking the BoxesHave a compliance program that’s not as effective as you’d hoped? Or wondering where to start to design an effective one? Find the answers to all your queries in this eBook.
Read More and Download
The Ultimate Guide to migrating eLearning from Flash to HTML5
The Ultimate Guide to migrating eLearning from Flash to HTML5This eBook is meant for organizations who want to migrate their eLearning from Flash to HTML5.
View Recording
Tips for Designing, Testing and Delivering eLearning in a Multi-device World - eBook
Tips for Designing, Testing and Delivering eLearning in a Multi-device WorldA collection of highly useful tips on the various aspects of designing, testing and delivering multi-device/ responsive eLearning.
Read More and Download

GET INSIGHTS AND LEARNING DELIGHTS STRAIGHT TO YOUR INBOX, SUBSCRIBE TO UPSIDE LEARNING BLOG.

Delivered by FeedBurner

Published on June 21, 2016
Topic : eLearning

Don't forget to share this post!

  • Snow
  • Snow
  • Snow
  • Snow

GET INSIGHTS AND LEARNING DELIGHTS STRAIGHT TO YOUR INBOX, SUBSCRIBE TO UPSIDE LEARNING BLOG

Delivered by FeedBurner

  • Snow
  • Snow
  • Snow
  • Snow

Follow us on

  • linkedin
  • Facebook
  • Snow
  • Slideshare
  • Feedburner
  • Youtube
to be in trend with latest happening in the elearning domain.

More from Our Resources

  • eBook

  • Whitepapers

  • Reports

  • Presentations

  • Case Studies

  • Webinars

  • Infographics

  • Newsletters

Snow
Forest
Mountains
Mountains
Mountains

WANT TO FIND OUT HOW OUR SOLUTIONS CAN IMPACT
YOUR ORGANISATION?
CLICK HERE TO GET IN TOUCH

Custom eLearning

Upside Learning Solutions Pvt. Ltd.

Punakar Complex, Survey No-117,
Bangalore Pune Highway, Warje,
Pune, India

Tel: +91-20-2523 6050 / 51 / 52

Email: elearning@upsidelearning.com

FOLLOW US

GO BEYOND
What is Go Beyond Compliance Training Sales Enablement Measuring Learning
Effectiveness
Microlearning Gamification Learning Engagement
OUR PHILOSOPHY
Learning Strategy Solution Design and
Development
WHAT WE DO
Custom eLearning Learning Consultancy Performance Campaigns Mobile Learning Performance Support Microlearning Video and Animation Rapid eLearning Games & Gamification Flash-to-HTML Conversion ILT and VILT Value Added Services
WHAT WE ARE
About Us Our Work Leadership Awards Press release Clients Careers Contact Us
QUICK LINKS
Insights Blog Submit a RFP Schedule A Call Client Login Privacy Policy

Copyright © 2022 Upside Learning Solutions Pvt. Ltd.