It All Started with Vector Animations

Let’s go back to 1995, a time when the great promise of the web was beginning to show, and yet there were real limits on what you could create as a web designer. The web was primarily a static place. If you wanted to build anything more interesting than a flat layout built from <table> tags and text, you needed to learn a variety of browser quirks, not to mention the slow dialup speeds that would hinder loading time for whatever you published. Animators could use the GIF format, but file sizes quickly rose to untenable numbers.

Understanding these limitations, the company FutureWave modified their drawing software SmartSketch to produce animations for the web. To achieve this, they built plugins for viewing the content in Netscape Navigator and Internet Explorer, the two dominant browsers at the time. At the end of 1995 they released their software: the tool was called FutureSplash Animator and allowed you to build frame animations with vector tools. Browsers needed only install a plugin to display the content.

FutureSplash Animator opened up a new world of fast-loading vector animations. The key to this software were the vector graphics represented by simple coordinates. These are more size-efficient than the same shapes represented in pixels. Rendering a circle, for example, requires just a few values: X and Y coordinates, its radius, and its color. FutureWave took advantage of this optimized coordinate system, creating animated vector graphics by changing coordinates over time.

In the mid 90s, installing a browser plugin was the only way to bring expressive content to your web-browsing experience, making it clunky for users. However, the excitement of seeing moving graphics within websites made the clunky experience worth it.

One example of early vector animations built with FutureSplash was the 1996 homepage for The Simpsons, which was considered a visual tour de force at the time. When this page was developed, CSS still hadn’t been finalized – the entirety of the HTML portion of the site was built with basic tags and tables.

Animated vector graphics for broad web distribution was brand new and exciting. Microsites like The Simpsons led the way in web design and stood out against the typical flat and static designs. FutureSplash was used to produce animations on the home page of Netscape Navigator in 1996, a sign that even high traffic browser home pages were taking advantage of the plugin.

FutureSplash quickly became an essential tool for big brands like Disney and Microsoft, but it also became popular among independent web designers. In an interview on a Flash-news website ‘Cold Hard Flash‘, FutureWave cofounder Jon Gay was most impressed to see talented animators like John Kricfalusi of Ren and Stimpy use the tool to create animated cartoons with sound. For other examples of early FutureSplash sites, see this interview with FutureSplash’s founders.

As support for FutureSplash sites rose, larger companies began building their homepages with the tool. The website Digital Archaeology, which covers the formative years of digital culture, looked back at few of these sites in 2012. The page for Gabocorp captures the enthusiasm and audio capabilities of the new tools:

In 1996, seeing the opportunity to sell creative tools for advanced graphics and animation production for the web, Macromedia acquired FutureWave.  This act created additional momentum for the quickly popularizing tool. Macromedia released version 2.0 of ‘Macromedia Flash’ in 1997. By 2005, Adobe’s purchase of Macromedia injected massive engineering effort into what we know today as Adobe Flash. The late 90s and early 2000s were the high point Flash’s dominance.

Simplifying Audio & Video Distribution

In the late 90s, animated GIFs with looping audio (often paired with MIDI files) represented the most common form of audiovisual content on the web. Normal audio and video files were not easy to publish. Instead of a standard for displaying video in-browser, there existed a hodgepodge of plugins like Real Video, Windows Media, or QuickTime which enabled users to play video. It wasn’t until 2007 that browsers could agree on the <video> tag. In a very real way, Flash was able to simplify this entire experience. Macromedia licensed the MP3 format in 1998, which made incorporating audio in Flash documents simpler. Then in 2002, Adobe licensed the optimized video codec Sorenson sparc to handle all video encoding in Flash documents. The result was a streamlined experience for getting audio & video on the web.

By 2002, Flash was the preferred format for distributing audio and video on the web and in turn made having the Flash plugin a necessity for everyone. 2002 is still three years away from Youtube and streaming web video’s real moment.

While Flash may have become the preferred rich media format, browsers continued to improve media support, add CSS properties, and introduce rudimentary animation techniques. These contributed to a more seamless and standardized online experience. Improved browser technology was absolutely arriving at a rapid clip, but Flash continued to be a comfortable authoring environment for creators.

At the height of the PC age, Adobe shepherded Flash to rock-star status. The introduction of a powerful scripting language called ActionScript offered object-oriented programming for the first time. For designers and web developers, creating content in Flash was a way to avoid thinking about browser technology, and instead master a single tool that seemed to be becoming more and more powerful with each passing year. Jedoubleu’s site from 2004 shows just how far some designers pushed Flash for their work.

Flash Dominance

In 2005, ActionScript reached version 3.0 and had matured to a point where you could create incredible games, interactive sites, and expansive multimedia worlds. The language was an implementation of ECMAScript; it was like JavaScript but with separate APIs. This meant Flash developers had access to an extremely powerful scripting language to build interactivity, dynamic animations, and more. However, alongside the incredible saturation and power of Flash + ActionScript, the platform became a large target for hackers and malware. With plugin support across 12 operating systems and four individual codebases for different browsers, the platform grew in capability and complexity, which stretched Adobe thin. Upgrading its capabilities while maintaining security would be a constant challenge.

As the needs of animators, designers, and programmers pushed browser technology forward, Flash did not progress at the same rate. And a key turning point came when the iPhone launched in 2007 without the Flash plugin installed.

With the introduction of touch-based mobile interfaces, common controls in Flash content (such as hovering menus) became incompatible, and mobile CPUs and GPUs were not equipped to contain additional plugins in memory. As the future of Flash came under question, the effort to translate its technology to iOS was underway at Adobe. At first it was a given that Flash would be ported to work on Safari for iOS, as it had become part of the “full web” or “the real internet.” An Apple commercial had to be pulled because the company claimed the iPhone 3G supported “the real Internet” but the lack of Flash and Java was enough to trigger action from a regulatory agency in the UK. 

As the dominance of Safari on iOS rose, so did the capabilities of HTML5, H.264 video, and CSS. Relying on a proprietary plugin like Flash for video support ran counter to efforts by open source and web standards adherents. By 2007, the <video> element had been proposed by Opera browser’s Håkon Wium Lie in his post “A call for video on the web“. Looking beyond Flash for video meant that web developers needed to now consider what browsers and mobile devices they wanted to support. Each had their own preferred video and audio codec. The impact that the Flash-free iPhone had on web development was titanic. “The real Internet” of the future would not need Flash.

‘Thoughts on Flash’ by Steve Jobs

In early 2010, Adobe felt pressure to ensure that Flash worked across upcoming mobile devices. As more mobile phones with embedded browsers were hitting the market, the company knew they needed a foothold to keep Flash a standard part of what they called the “full web.” In February of 2010, Adobe optimistically claimed that by 2012 nearly 53 percent, or 250 million devices would support Flash. This turned out to be a gross miscalculation.  

While Flash did make its way onto Android devices, it did so in a very limited and feature-incomplete fashion. The effort to ‘mobilize’ Flash was dramatically torn apart when Steve Jobs published ‘Thoughts on Flash‘ in April of 2010. Jobs cited Adobe’s proprietary control of Flash and the fact that websites had already adopted open technologies like streaming video and animation. He also criticized Flash’s rampant security issues overall performance, battery life, and touch-related issues. Jobs closed by recommending that “Adobe should focus more on creating great HTML5 tools for the future, and less on criticizing Apple for leaving the past behind.”

Despite the point-by-point takedown from Jobs, Adobe didn’t take it as a final nail in Flash’s coffin. They launched pro-Flash advertisements, Flash engineers attempted to correct Steve Jobs, and Adobe started calling out Apple’s ‘restrictions’ when viewing a flash site on the iPhone:

However, notices like the above didn’t win Adobe many points. It put a fire under web developers to learn, adopt, and build websites that fit into other available web technologies. Seeing the above screen wasn’t Adobe or Apple’s problem, it was the web developers problem.

As this battle was raging, Flash developers did a bit of soul searching. “Should we learn new web technologies, or continue building in Flash?” Sites that featured incredible Flash websites like 2advanced, pixelranger, and the gaming community NewGrounds continued to push out inspiring Flash-based work. But every site now needed a plan for mobile, and for this purpose, many developers found that combining CSS and JavaScript opened up enormous possibilities.

Perhaps Flash’s final undoing was that fact that no one wanted to create for a fragmented, user-unfriendly web. If designers couldn’t design for every screen in Flash, they largely opted to switch to technologies that had broader support. Why not create websites using only open web technologies? The technology was mature, but the visual tools for building on it were not. One no longer needed Flash for video or audio, and the rich content capabilities of the open web were beginning to show fruit: animation, advanced typography, and media playback were becoming standardized, first-class browser features.

Flash’s Big Drawdown

Now we find ourselves intersecting with Flash’s history: Tumult Hype 1.0 launched in May of 2011, a little over a year after Jobs’ letter. Tumult founders Jonathan Deutsch and Ryan Nielsen left Apple to create the missing app for the web: an animation tool that output HTML, CSS, and JavaScript for creating animation on a familiar timeline. Its first version had Flash’s vital features, rethought for modern creation: tweening, simple shapes, and keyframe animation. Over time, Hype matured into a powerful way to make interactive pieces by offering user-friendly ways to incorporate the latest HTML5 technologies into web animation.

In August of 2011, perhaps having finally come to terms with Jobs’ letter, Adobe introduced an HTML5 animation authoring tool of their own called Edge Animate, which was packaged with Creative Cloud. Then in June of 2012, Adobe ceased allowing phones to install Flash, effectively killing all mobile support. But they nevertheless worked towards improving Flash, hoping to find an edge for it in 3D graphics, the AIR platform which allowed publishing on Apple devices, or on embedded TV software with Flash version 11.

In 2014, the Interactive Advertising Bureau started an initiative called ‘Making Mobile Work’ calling for advertisers to transition to HTML5 technologies and away from Flash. Despite Adobe’s best efforts, by early 2015, the technology press was also calling for it to be uninstalled in publications like Gizmodo, Wired, and Yahoo News. They cited similar reasons mentioned in Steve Job’s post.

Adobe eventually rebranded Flash Professional application as Animate. The HTML5-focused Edge Animate ceased development in November of 2015 and the Adobe forum members thankfully introduced each other to Tumult Hype!

Life on the Web After Flash

Adobe’s July 2017 announcement officially marked the beginning of the end. Browsers now tasked themselves with a three-year plan of adding click-to-play buttons to Flash, blocking Flash advertisements, and planning to remove the plugin entirely from their codebases. Because a majority of browsing happens on Google Chrome, the small changes Google planned to dial down Flash support have had huge effects on the adoption of replacement technologies. By initially lowering the resource requirements for Flash on the web, Chrome began by pausing Flash content in September of 2015. The change “pauses non-essential Flash Content, by replacing the plugin content with a static image preview and a play button overlayed.” Chrome’s plugin policies moved advertisers, analytics providers, and video sites away from Flash and towards HTML5 solutions.

Flash unleashed incredible creative output on the web. The designers, animators, and developers behind Flash deserve our thanks for making the web an incredible place. Until December 31, 2020, you’ll see this badge when you visit a Flash-enabled site:

Let’s thank the folks who gave us Flash and keep on creating.

At Tumult, we follow the adoption of new browser features and their usage on the web very closely. As our work on Hype has progressed over the last 9 years, we’ve built out support for responsive/scalable/flexible elements, audio event support, included a powerful physics engine, and most recently, built out vector drawing and animation capabilities in the highly performant SVG format. Now that desktop and mobile browsers advance the state of art together, building in Hype means supporting technologies that are supported across virtually every device with a web browser.

On the day this post was published, Apple called out that Hype requires “no special plug-ins or complicated software.”  

Flash icon from Icon8.

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:

• Working with Symbols by Nick Gressle.
• Character Animation Tutorial by Lucky De.

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:

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:

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:

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

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:

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.

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:

• Working with Symbols by Nick Gressle.
• Character Animation Tutorial by Lucky De.

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!

Also check out the Character Animation guide for Flash converts.

Hi! My Name is Nick and I built my first animations in Flash years ago and continued building learning modules and games in Flash until I discovered Hype. When explaining why I use Hype Professional now as opposed to Flash I like to show potential users that the learning curve from the old to the new is not that difficult to master. Today I’ll be discussing the similarities and differences between the Flash MovieClip Symbol and Hype’s Symbols.

What is a Flash Movie Clip?

A Flash MovieClip is one of the three symbols: Graphic, Button or MoveClip, that allows you to make instances of animation, images and interaction.
With the movie clip symbol you can create reuseable pieces of animation that include…

• Multiframe Timelines that are independent of the main timeline.
• Interactive controls
• Sounds
• Graphic symbols
• Button symbols
• Text elements
• Additional Movie Clips
• … and these symbols are scriptable with Actionscript 3.0

Flash also uses the MovieClip symbol as a specialized element called a Component. These are MovieClips with defined parameters that accept other user interface items such as check boxes, radio buttons, scrollbars etc.

Movie Clip Characteristics

Movie Clips on the surface look like the other symbols in Flash.

• You can drag instances of them to the stage.
• Make multiple instances of them on the stage.
• Independent Scaling
• Independent Tinting
• Independent Alpha effects
• Independent Rotation

So as you can see MovieClips behave like Flash movies within a Movie. One note about MovieClips: while they are independent movies within the overall movie, their frame rate is governed by the global Flash Movie frame rate.
To create slower or faster animation in movies clips from the main timeline you need to adjust the length of your tween elements to get your desired effect.

Why organize your animation into Movie Clips?

Flash animations can get very large and complex quickly. If you were to do all of your work on the main timeline the organization of your symbols, tweens and interactive devices would become very cumbersome for any future editing. By organizing your animation into Movie Clip Symbols you can organize your movie into easy component parts that make future edits or team edits much easier.

What are Tumult Hype’s ‘Symbols?’

Where Flash has created three distinct symbols (graphics, buttons and Movie Clips). Hype classifies the Symbol as “scenes-within-a-scene for component reuse and to help manage document complexity.”

In this way a Symbol is very much like a Flash Movie Clip. It can have its own timeline that can act independently from the main timeline. And it can be extended with Javascript or custom Behaviors built in Hype. A Symbol can also be rotated and flipped along it’s X, Y and Z axis. You can also adjust its opacity as well. And just like the MovieClip in Flash, it can be enhanced with Hype’s built in filter effects such as

• Blur
• Sepia tinting
• Saturation
• Hue
• Brightness and Contrast

Why Use Hype Symbols?

Similar to the use of the Movie Clip in Flash, Symbols help organize your Hype document into manageable parts and components. By creating symbol-based animations you gain more editing control over your document as well as making it easier to target specific animations and elements with Hype Actions, Behaviors and Javascript Functions.

For instance if you wanted to make an animation of a character walking in a scene with the following traits…

• Main Character animated walk cycle
• Background city scene with animated characters
• Sky with Clouds moving through the sky

Putting all of that on one timeline or even multiple timelines within a scene would make for a very complicated project. Breaking each one of these 3 individual animations out into individual symbols helps keep separate components organized.

Each symbol would then have it’s own timeline set that could be identified with that symbol for example…

1. Symbol “Character” | Character timeline: Walk_cycle, Arm movement, eyes blinking.
2. Symbol “Background City” | Background City timeline: Buildings, Cars, People
3. Symbol “Sky” | Sky timeline: Blue sky, Sun animation, Cloud animation

Now your main timeline is organized and easily accessible:

Within each Symbol, you can also further organize animations for one of your component parts: symbols can contain multiple timelines just like a regular scene in Hype.

Comparing Flash “symbols” and Hype “symbols” and elements

Flash categorizes all objects as symbols in it’s environment. For example a line segment is a graphic symbol, Text is a symbol, a button is a symbol, and a movie clip is a symbol.
Flash defines a symbol as a reusable image, animation, graphic, movie clip, sound file, font or button that resides in the Flash library. However, imported graphics such as bitmaps, jpgs, pngs are not considered as symbols and cannot be controlled like a Flash symbol.

In the Hype environment, elements on the scene exist in HTML’s DOM, so we Tumult calls them Elements. Buttons are elements, boxes are elements, and circles and text are all also classified as elements. Unlike Flash, a placed image such as a JPG, SVG, or PNG is considered a Hype element and can be controlled by JavaScript or by controls in one of the inspectors.

Symbols and Persistent Symbols

As we have mentioned above Hype Symbols can be as complex as a full length animation and then re-used much like a Flash Movie Clip or they can be as simple as an animated button that can be reused throughout your document. But there is one more type of Symbol in Hype: the Persistent Symbol.

The persistent symbol is a special type of symbol that can be used across all of your scenes. The best use of a persistent symbol would be a menu animation or a series of buttons that should be on every page of a website.

When you create a persistent symbol, Hype gives you the option of creating the persistent symbol across all scenes that you create or on just the current scene you are on at that moment. Only one instance of a persistent symbol can exist on your scene at one time.

It is also interesting to note that the persistent symbol can mimic the same functionality as the Flash Component. This can be done by making customized elements such as text boxes, check boxes and specialized buttons that can be stored for future use in the Resources Folder.

Comparison chart for Movie Clips and Hype Symbols

The chart below outlines the similarities and differences between Flash Movie Clips and Tumult Hype’s Symbols:

Creating and editing a movie clip vs creating and editing a Hype symbol

The basic setup for making a Movie Clip in Flash is to either convert a shape or animation into a Movie Clip or by creating a new symbol from the insert menu or the menu from the library. Once you create the symbol you can drag it from the library onto your stage for use in your project. In Hype you do something very similar. If you create an animation on any of your scenes you can select the elements and then go to the Symbols menu item and “create a new symbol from selection.”

The second method is to create a new symbol and then populate it with elements or a new animation. To do this go to the Symbols menu and select “New Symbol”.

This will create a new symbol on Hype’s scene (or stage, as it would be called in Flash). You can tell that there is a symbol on the scene by the display of a purple outlined box. it is labeled as “Symbol” and has a help tip on it to help you begin your editing.

Editing is very similar to the way you edit a movie clip in Flash.

To extend the physical size of a symbol select the symbol by clicking on it. You will then see resizing handles on the top, bottom and sides. Click and drag on any of the handles to extend the symbol dimensions to any size you need.

Remember that symbol contents have a bounding box just like groups: by setting ‘Content Overflow’ to ‘Hidden’ in the Metrics inspector, you can adjust how much of your symbol appears. If you resize the box too small it will crop the view of your symbol elements.

If you want to access the contents of a symbol all you need to do is double click the symbol. After you do that you will see that the timeline now gets a purple header showing you that you are in symbol editing mode.

At this time you can then build a new animation or just place elements within the symbol container. To move back into your main timeline all you have to do is click the X icon on the symbol header, and you are back to the Main Timeline.

The Hype Resources Folder

There is one last comparison to Flash and the Flash Movie Clip. In Flash you access all of your movie clip, graphic and button symbols from the Library. Hype organizes all of your symbols and persistent symbols in a the Resources pane alongside each video, image, JavaScript function, and audio file.

The Resource library makes it easy to duplicate symbols: simply click on your symbol instance in the Resources Folder window and drag it to your stage.

Tip: Creating a Hype Template with utility symbols stored in your Resource library (such as drop down menus, buttons, etc.) is a great way to save time when starting a new Hype Project!

Creating a Symbol in Hype

Thanks for reading!

Nick

You might also be interested in the ‘Working with Symbols‘ post in this series.

Good day!
My name’s Lucky. I’ve created interactive Flash animations for over a decade. I’ve jumped into a lot of different types of Flash work from games, cartoons, banners, UI, explainer vids and more. And this year I started trying to take the jump from flash to modern tech finally to stay current!

This chapter explores character animation in Hype. If you’re new to Hype, consider starting with the documentation or going through their tutorials before going into this one. I’ll be going through more advanced things and skipping over basics. So lets get started!

Step 1: Character Design

For this I’m going to create a basic character.  I’ll call him Sam.
Sam will be a basic 3/4 view character we can animate a run cycle with. The way we’ll do it is with some rig techniques transferred over from Flash. We need the character and the basic keys here to achieve that.

Sam’s basic keys for a run cycle look like this: Leg one up, leg one down , leg two up , leg two down. If you want more info on basic animation keys for reference I suggest reading Cartoon Animation by Preston Blair. The above assets can be found here.

Step2: Colour and Setup

For this I used Illustrator. I coloured the sketch  and broke it apart into layers:

For easier import into Hype, make sure nothing is grouped. When it comes to distributing thing into layers I try to think about it like a marionette, the way joints connect. So I tend to always leave extra space in the shapes so that i can put other shapes on top of them, ensuring there’s no empty space.

Notice how it looks like they connect with circles. That’s similar to how I setup Flash animation rigs for TV work I’ve done
e.g.

It works especially well with basic shapes, but also works with outline characters. I wouldn’t recommend dealing with characters with too much detail in Tumult Hype yet though—the more basic the character the better. For now anyway.

Step3: Rig Setup

With this you can go 2 ways. PNGs or SVGs.

PNGs: The Good & Bad:

+Transparent
+Solid quality
+Easy to swap out
+Save filesize in the long run

-Blurry motion
-Can’t rescale up without swapping image
-Hard to control without snapping with Hype tweens
-Flicker if swapped out too fast

Good/Bad for SVGs

+Low file size initially (but depends on complexity)
+Best quality possible
+Can be rescaled
+Motion seems to work much smoother

-Harder to import
-Can eat up a lot of filesize if not used/optimized right
-Big initial load
-Aren’t supported by older browsers.

So I’ll leave it up to you on which way to do it. For this animation I used SVGs.

To use SVGs, Grab this plugin, and use the settings below. You’ll end up with a folder full of SVG files straight from Illustrator!

Now with that said if you’ve never used SVG use PNGs instead. It will make the next step easier , however you’ll run into quality issues. If you want to stick with SVG though I recommend also using Sublime Text to open them up.

Open up hype. There are 16 parts to my character so I’m going to make 16 boxes.

In the boxes I’m going to insert some HTML. That ‘HTML’ is going to be the entire content of the SVG pasted into the block.

To do so double click into the square and click on the tiny pencil tool (Command-Option-E).
Once you have all 16 in there remove the fill and outline of the squares. Then resize them and rearrange the layers so your character looks like the one you made in illustrator. Remember to name the layers properly!

If you want to use PNGs, you just run the above script but with export set to png and drag them in Hype. It’s a lot less hassle, so it’s up to you!

*Note you can import SVGs AS images by dragging them into hype, but you wouldn’t have the ability to edit the code like with the box method, so chose which option is best for you depending on your preference.

As you can see with my file I’ve rearanged, rescaled and placed everything properly.
Now notice something apart from that?

Groups.

Groups are super important, they’ll keep things cleaner. Once you’re done distributing things into layers and naming them properly make a folder for each arm and each leg. This is very important to save hassle in animation.

Pivot Points. 

To make a pivot point command click on a piece and drag the pivot circle to where you’d like it to be. Just like flash.

Do one for every piece of the body you think the centre point is wrong at. So that’s all of the limbs basically.
The goal here is to make the rotation of these better controllable. And with things like arm and leg joints to make them rotate at the proper location instead of in the middle.

Now we have a completed character rig.

Here’s my rig, the SVG, and the settings I used.

Step 3:  Animation

Ok now the interesting part.

Pose it up. 
Put the guide underneath the character, make a 4 second animation set to instant tweening.

This is important since Hype doesn’t let us just make keyframes without tweens yet and the constant movement will be a problem right now.
The 4 frames will be pose 1 to 4, on a loop.

You can do that with a start timeline action at the end of it.
Hit Record (⌘+R) and go!
Take as much time as you need to make the main poses for the character.
Remember if you ever undo something, record will stop recording so watch the record button always!

Once you have the main 4 poses set up and set to instant and they pretty much work fine you can add an easing onto it.

I tend to go EaseOut > Ease In > Ease Out > Ease In. If that works good for you it’s time to change the timing. I set it to 1.2 seconds at the end so that it’s more realistic.

Once that’s done it’s time for you to go into it and start breaking it apart even more, hide the head arms and neck and only work on the legs.

Then work your way up. Legs > Chest > Neck > Head > Arms. Arms always last.

So once the motion is good on all of the pieces again break it up. Add in-betweens so that you don’t have as many floating things.

This may take a while since you have a lot of elements to work with and that’s fine. What I’d like to recommend with this is using shortcuts for moving frames around and nudging things with the arrow keys and the record button on. To create shortcuts I suggest reading Jonathan’s post here. I have one for timeline animation so i can control it with < > to nudge frames just like in Flash.

Another issue you’ll probably have is if you want to make tiny adjustments to something in the middle of the animation it will affect a lot of things you didn’t expect it to affect. Say you decide to rotate something in the middle of the animation which was never rotated in the first place. It will cause it to create a rotation(Z) tween starting at frame 0 and going to your frame which if you don’t pick up on it immediately and nudge frame one will eventually get worse and worse if unnoticed. So keep scrubbing through. Adjustments made while you were off of a keyframe will differ from animations when you are on a keyframe. On-frame animations will adjust just that frame, but off-frame animations (to position, for example) will adjust the element’s position regardless of other frames.

One way to ensure your adjustments always taken Hype is make keyframes for every thing that might be animated. I’m sure a better solution will be created eventually.

Next step for me was I decided to add a softener for the shoulder since I disliked the way the shoulder behaved in motion.

It’s just a circle with the same colour of the shirt, but it works well

Then I wanted to do a final touch which was a blink for the eyes. So what I did was I created a symbol from the head and I copy pasted the head motion in the main timeline on it.

This way the head symbol is clear of movement. I made a couple of other head shapes and put them in the symbol on different layers. Then I set them to fade in and out with instant on the motion. Essentially swapping them out.

And that’s about it.

Here’s my final of the cycle.

Source files including all of my animating stages.

Conclusion:

Hype has a lot of potential. It can definitely compete with flash for animation on a basic level. When it comes to rigs and more complicated things for animation I would say invest time in learning it. While it’s still not as feature full it’s getting there! Within a year I hope it will have the same ability as Flash with it and the benefit is it’s all HTML5 so I highly recommend investing time in trying more complicated animation experimenting!

And post on the forum if you have any feedback, recommendation or experiments you’d like to show yourself!:)

Thanks,
Lucky

You can find Lucky’s work at Luckyde.com.

Check out some of the characters and animations in our gallery to see other amazing things people have created, or join us on the forums.

You can see all Flash Transition posts here.