Featured work & animations by an Italian animation master: Michelangelo Agostinetto

In our work on Tumult Hype, we’ve had the pleasure of meeting incredible developers and designers. From time to time we like to share quality animations created with Hype on this blog, and today I’d like to introduce one of our good friends in the Hype universe, Michelangelo Agostinetto.

Michelangelo is a towering figure in the Hype community, having singlehandedly created one of the largest resources for discovering Hype animations and projects at HypeDocks. His high-end animation and web development work for Italian brands are full of life and character. 

I had the good fortune of meeting Michelangelo a couple years ago in his home city of Verona for a cappuccino and a stroll through the medieval city — he even showed me the famous Roman Gavi Arch, an ancient structure Michelangelo created one of his first Hype projects on. Today I’m pleased to share a huge range of quality work Michelangelo has created with Hype over the past few years. His work ranges from small animated GIFs to powerful Rapidweaver themes and stacks. I’ll let Michelangelo take it from here:


Hello, I’m Michelangelo Agostinetto, and I’m a web developer, photographer, graphic designer, 3D modeler and animator in Verona, Italy. Hype has become instrumental to my work, and in this post I’m going to be talking about some of my recent projects. Primarily I create for clients like HTC Los Angeles, Borile Moto, Kawasaki Italy, Ducati Italy, Special Mr. Martini, Ferro Magazine, Franz Magazine, ArtStories Apps, and Elastico educational apps.

The type of work I produce is always changing—some days I’m producing small animations, but sometimes I produce larger interactive single page websites. But no matter what I’m working on, Hype is something I use daily. In this post, I’d like to share some templates, examples and techniques I’ve developed after using Hype for the last few years for a variety of projects. 

image2.gif

(Download this Hype Template)

The reason why I use Hype so much is the flexibility of what I can export from the tool: an idea can become a video, a web ad or an animated GIF. In the integrated graphic and motion design work I create for clients, I can use Hype in a number of different ways across projects and clients. I can also quickly import other media into my Hype projects to remix what I create. So whether I start with a GIF or a video outside of Hype, I usually find myself bringing the content together in Hype to compose my work.

Below are a few recent documents I’ve created: I’ve included infographics, animated GIFs, a demo document showing off shape morphing in Hype 4, and more. But first I’d like to talk about a site I created to show off Hype projects and connects freelancers:

Creating HypeDocks  

Working with Hype and meeting people on the Tumult Forums, I got to know a number of members of the creative Hype community. Thanks to the help of some master users I created a portal for the collection of projects and examples at HypeDocks.com.

Over time we have collected many examples and templates, and I’m pleased to see that it has become a popular resource for the community. In addition to a home for templates and great examples of the creative Hype community, the site has become a resource for freelancers. 

Leveraging Hype for Animated GIFs

We’ve witnessed the resurgence of the GIF format on social media, which has led to such a rise in creative expression on the various social media platforms that support it. The speed of the internet today allows you to produce files with a high frame-rate for smooth and impressive animations. Hype’s ability to export not only GIFs, but GIFs with a transparent background has been fantastic for my work. Building animations in Hype gives me enormous control over my desired frame rate and duration during export.

In my arsenal of software Hype is the best tool to produce animated GIFs and “stickers”. Being able to export GIFs with a transparent alpha channel has made using that content in other tools extremely easy. Also, other tools can import the high resolution PNG sequences Hype can export such as video editing software is fantastic — I can create a high resolution animation in Hype, export a sequence, and use that sequence to add high quality animations (even at 60 frames per second) to video editing software.

Normally in video I use Final Cut to import PNG series (with alpha channel) but you can do it with any video editing software. Also Photoshop is able to import/export PNG series as a video timeline, so you can work with the Hype output in many ways.

image6.gif

The linked documents below are some examples of my production work for personal projects or for clients. The common denominator is speed, rhythm, and my goal of creating animations with high visual impact. You can also find some stickers on Giphy by visiting https://giphy.com/search/hypepro-stickers.

Education & Infographics

Lately I’ve created a number of projects built around educational slides with topics ranging from literature to history and mathematics. The downloadable SMILE infographic later in this post is an example of this format which you can download here. Below are a few screenshots from different projects I’ve created with this template as a starting point:

image4.jpg

I produce these infographics for companies, schools and universities. The SMILE infographic was created with techniques similar to those used in professional jobs and can be used a starting point.

The common denominator of these works is the use of Hype without adding manual code. But in some projects I leverage CSS to customize some elements like buttons. Hype allows you to create dynamic relationships between scenes, using symbols and persistent symbols to create efficient navigation menus in an easy way. And these navigation menus are easily reusable across other projects. Creating these educational quizzes or guided tours is possible using only timelines without a line of code.

The important thing is to understand that timelines are not only used to animate objects but also to create events in scenes; once you understand this with Hype, you can create complex projects without writing any code.

Another interesting aspect of the work on infographics with Hype is the speed of production compared to other software and the extreme ease with which you can incorporate external libraries of any kind and objects via iframes; Javascript, CSS and external libraries can be implemented quite easily.

View ‘A Smile’ infographic & quiz or download.

image1.png

GAVI ARCH is an interactive exploration of the Arco dei Gavi in Verona, Italy. The project was one of my first educational projects built with Hype: 

image5.jpg

Roman city plan, an animated map with line draw animations and line-dash animations representing waterflow (a new Hype 4 feature): (download

x3.gif

Pangea, demonstrating shape morphing (new in Hype 4) & shifting tectonic plates (download):

image3.png

Pop animation, showing off Morphing Shapes and Lines (download):


Screen Shot 2019-05-23 at 1.54.13 PM.png

Little GIF Showcase 

Below are a few GIFs created in Hype published and discoverable in Giphy at the tagimmagineit” and “immagineit-stickers.” I’ve made a few of the Hype templates for the GIFs below available here so you can see exactly how I created them. Thanks for reading, and I hope you’ve enjoyed this post. 

Thanks for reading! To follow my work and new animations I create, visit my website at https://www.immagine.it/servizi/animazioni/