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.
- 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.
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.
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:
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
Tumult Hype Professional (Dark theme)
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:
- Press Record
- Change the position of the time cursor (this creates the duration of your animation)
- 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 controls (left-to-right): Jump to Start, Previous Frame, Next Frame, Play/Pause, Loop
- Current time indicator; matches time cursor
- Record Button
- Timeline Selector Popup Menu
- Time cursor
- Animatable Property Popup Menu
- Timing Function Popup Menu
- Add Keyframe Buttons
- Time scale zoom slider
- Timeline View with Animation
- Timeline Action
- 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:
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:
Create and save your custom easing transitions using the same control point system as motion paths:
For more information, read the chapter on Animations.
Elements & File Formats
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.
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:
When selecting an element, you have access to a huge array of actions:
To quickly give you a sense of what Hype takes care of for you, look at the button below:
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.
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:
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!