Flash Transition Guide

Unknown

Welcome to Tumult’s Flash transition guide. We produced this guide to help those familiar with Adobe Flash get started with the best HTML5 production tool: Tumult Hype Professional. Tumult Hype produces high performance HTML5, JavaScript, and CSS. If you’re familiar with other timeline-based animation tools like After Effects, Final Cut Pro, or Motion, you’ll feel right at home with Tumult Hype’s keyframe system.

This is a pivotal moment for interactive content production on the web. Browser support for Flash decreases every day, and browsers compete with each other to support advanced HTML5 APIs. HTML5 & JavaScript have become the de-facto standard for delivering animation. This guide will help you join the club.

Flash has become a bad word in web development—but this wasn’t always the case. Flash had such a long and successful lifespan because the tools and the platform allowed creative developers the power to create animations that displayed consistently nearly everywhere. We’re not here to make fun of Flash — we’re here to talk about what’s next.

Why is the web transitioning from Flash to HTML5? 

  • No Mobile Support: Flash is not supported on mobile devices and it never will. Mobile devices are quickly becoming the primary method through which people experience the Internet.
  • Google Chrome pausing ‘non essential’ Flash: Chrome will no longer be the rare browser which ships with its own dedicated Flash plugin. Since September 1, 2015, Google Chrome will enable the ‘Plugin Power‘ saver feature in their attempt to compete with the battery Safari’s power save feature. This addresses battery life problems for laptops and Google’s own Chromebooks, and stops non essential Flash animations in their tracks.
  • Speed: HTML5 animations take advantage of the GPU, and browser vendors compete for high frame rates. Chrome’s V8 JavaScript engine and Safari’s Nitro engine continue to push JS performance higher.
  • Security: Flash has a well-earned reputation for introducing vulnerabilities to computers. Since updates are not reliably deployed, computers become increasingly vulnerable the longer Flash is left installed at low version numbers.
  • Advanced Device Detection: HTML5 APIs allow for easily detecting device resolution and size. With so many device sizes on the market, it’s important to serve the right resolution image; Hype also supports responsive layouts for producing device-specific animations and content.
  • Easy Media Control: Drag and drop video and audio support: start and stop audio easily with mouse and touch actions, and drop in videos without writing any Action Script.
  • Accessibility: Flash content can be twisted to conform to some screen readers, but any element in Hype can contain standard attributes for alt text, tab order, and title tags.
  • Easy External JavaScript Library Support: If you’d like to use an external library with your Tumult Hype animation, go for it. Unlike a SWF file’s locked down container, Hype instantiates regular HTML elements in the DOM, and gives you control over element IDs and classes for easy targeting.

About this Guide

This guide will start with top level view of Tumult Hype’s animation platform, and shows how Hype’s production workflow differs from Flash’s workflow. For a deep dive into how Hype works, read our detailed documentation, or explore topics on our forums.

For additional Flash transition guides, check these two fantastic tutorials written by experts in Flash & Hype:


Hype for the Transitioning Flash Developer

If you don’t yet, have Hype, feel free to play around with our 14 day unrestricted trial for Mac as you explore this guide.

In Flash, you typically choose a Framerate prior to creating your document (24 fps is the default). In Hype, the editing frame rate on the timeline is in a 30 frames / second format, but your animations will play up to 60fps.

flashScreen-Shot-2015-08-12-at-12.54.01-PM.jpe

In Hype, you set the document size for your document in the Scene Inspector. This can be adjusted on a per-document or per-scene basic at any time:

flashScreen Shot 2015-08-12 at 12.55.48 PM

Hype launches with a blank area that represents your visible document, but this is just the core stage for your animation: Flexible Layouts and Responsive Layout features allow you to create elements pinned or scaled based on the browser viewing the document and provides tools to create completely separate layouts for different devices.

Comparing The Hype UI to Flash

 

flashoverview-prolayout

Tumult Hype Professional (Dark theme)

flashScreen-Shot-2015-08-12-at-11.34.55-AM1.jpe

Flash CC in 2015

In Hype, we’ve collected all properties in the Inspector. All interface panels can be rearranged in the one-window interface. For more information about how we approached interface design, please read (Re)designing Hype, by Michael Johann.

Stop saying Tween: Basic Animations

Adapting the ‘Motion Tween’ concept to Hype is simple. For 99% of animations, you will only need to use Hype’s ‘Record’ button. The Record button is a ‘catch all’ for any property adjustment. By considering the initial state properties, ending state properties, and the current timeline position, the record button understands when properties have changed and creates initial and ending keyframes. In Flash, you need to consider:

  • Have I converted this object I’d like to animate to a symbol?
  • Is the timeline long enough to create the animation I’d like to make?
  • If an animation is 145 frames how long is it?

Hype handles these aspects of animation creation without any effort on your part. Here’s how to create your first animation in Tumult Hype:

  1. Press Record
  2. Change the position of the time cursor (this creates the duration of your animation)
  3. Adjust the position or size of any element, or adjust any value in the metrics inspector.

Once you do this, you’ll notice a blue animation bar has been created on your currently-active timeline. You can adjust the timing of the animation by either dragging the blue bar, or click and drag either end to adjust start or ending times. For further control, you can add manual keyframes.

Tumult Hype’s timeline corresponds to real time. Instead of increasingly large numbers (representing frames, dependent on your animation’s frame rate) at the top of your timeline, you’ll see Minutes:Seconds:Frames (30/sec).

Animation Interface:

flashAnimationsOverview@2x

  1. Animation controls (left-to-right): Jump to Start, Previous Frame, Next Frame, Play/Pause, Loop
  2. Current time indicator; matches time cursor
  3. Record Button
  4. Timeline Selector Popup Menu
  5. Time cursor
  6. Animatable Property Popup Menu
  7. Timing Function Popup Menu
  8. Add Keyframe Buttons
  9. Time scale zoom slider
  10. Timeline View with Animation
  11. Timeline Action
  12. Motion Path Toggle Button

To start an animation after time zero, you’ll use the Capo tool. The Capo pairs with Tumult Hype’s recording feature to let you quickly build animations which start and end at arbitrary times without manually inserting keyframes. With the Record button on, the Capo appears at the left edge of the time scale area:

capo

That’s the basic gist of how animations work in Hype. There are many more details in our documentation, but I’d like to highlight two other powerful features:

Create Motion Paths by double clicking a regular animation path to add control points and manipulate bezier curve controls:

flashAnimation-MotionPath

Create and save your custom easing transitions using the same control point system as motion paths:

Animation-EasingSelection@2x

For more information, read the chapter on Animations.

Elements & File Formats

Images

Vectors:
To use vector graphics in Tumult Hype, we recommend exporting as an SVG from your image editor. SVGs can be resized and manipulated directly on the Hype stage. Read more about SVGs on our forums.

Bitmap images:
Tumult Hype will do the right thing when you drop an image into the scene and resize it (during export, Tumult Hype handles retina images and downscaling). Our Image documentation explains the logic behind this.

Copying and Pasting from Flash Projects:
Copying an SVG from Flash will likely result in a PNG image. This will retain transparency, but you’ll lose the low file size and quality benefits of your SVG. Extract your SVGs whenever possible and use those files. You can drag and drop an SVG file directly into the Tumult Hype scene area.

Fonts & Media

Audio & Video
Check out our Audio & Video documentation for tips and tricks.

Custom Fonts & Google Fonts & More:
Just like Flash, you’ll need to embed non-standard fonts in your project. The Typography chapter of our documentation describes the process using the built-in Google Fonts selector, or adding your own web fonts. Just like in Flash, using non standard fonts will add additional download requirements to your document.

Actionscript to Actions.

For a quick introduction to how ‘Actions’ work in Tumult Hype, read our Actions documentation chapter. The majority of actions like scene changes, timeline triggers, easing & transitions can be performed with no code at all. This is a huge change from Flash, where even the most minor actions required lines of Actionscript.

Here are a few examples of functions that required Actionscript, but which can be done with the Actions inspector:

  • Go To URL
  • Start, pause, continue, reverse timeline
  • On Drag / Control Timeline with Drag
  • On Mouse Over
  • Swipe Gestures
  • Scene Transitions

Using Timeline Actions, you have a visible representation of what happens when, on which timeline:

ActionsEditTimelineAction@2x

When selecting an element, you have access to a huge array of actions:

Screen Shot 2015-09-18 at 2.10.56 PM

 

To quickly give you a sense of what Hype takes care of for you, look at the button below:

Screen Shot 2015-09-21 at 5.26.30 PM

Without any code, you can design your normal, hover, and pressed states (And even use any Google Font you wish), but you can also easily create links to other scenes, URLs, or even an exact second on a timeline in response to a click action.

Once you start working with Symbols and behaviors, the power of Hype really opens up. For more information about how Symbols in Flash compare to Symbols in Tumult Hype, read Nick Gressle’s guide.

The Tumult Hype JavaScript API

Since Hype makes use of web technologies, you can use both regular JavaScript and make use of external JavaScript libraries. For controlling scenes, timelines, symbols, and controlling advanced interactions like dragging, the JavaScript API built into Hype is extremely powerful.

Here’s a quick example: To continue a timeline in reverse after clicking an element, you would run the following code from the Actions inspector’s ‘Mouse Click’ action:

hypeDocument.continueTimelineNamed('Main Timeline',hypeDocument.kDirectionReverse);

Explore the various functions here.

Have more questions? Please join us on the Tumult Forums.


For additional Flash transition guides, check out these two tutorials below written by experts in Flash & Hype:

We’re committed to ensuring you feel comfortable with Hype no matter your background. If you have any questions about Hype, please get in touch!

 

Made for you in San Francisco.