Today, that experience may involve textbooks, videos, or if your teacher or school district has sought out additional resources: an interactive animation crafted by SERP:

SERP and their role in Curriculum Development

The SERP Institute brings together researchers, practitioners, and designers in education to improve the learning and engagement of all students while empowering both teachers and students with greater agency. Their task is huge. They achieve this by partnering with school districts to define and explore their biggest challenges; SERP then brings in researchers and designers to co-create a solution with the school district. Over 1,200 teachers and administrators have contributed to their research and design work, and their tools have reached over 40,000 registered teachers.

Hype as a Tool for Dynamic Learning

A key element of SERP’s design work involves creating engaging and interactive materials, and this is where Tumult Hype plays a significant role. I had the chance to chat with Matthew Ellinger, the Director of Design at SERP about their use of Hype. He told me they began experimenting with Hype after a designer who had just graduated from Stanford joined their team and suggested trying out a few animations in Hype as a way to move beyond static materials. Initially, Hype was used for basic math concepts, allowing for interactive demonstrations of division, for example.

This initial success paved the way for more complex animations. Artist and illustrator David Dudley joined SERP and further embraced Hype to create visually rich and interactive explanations of scientific concepts. These animations provide a level of engagement that traditional methods often struggle to achieve.

Showcasing Engaging Animations

SERP has developed a range of compelling animations using Hype. One notable project was for New York City’s Middle School Quality Initiative (MSQI), where teachers identified science concepts that were difficult to teach on paper. One such topic was on wave action, shown below:

This animation is one in a large set of interactive animations built for teaching wave energy you can check out here. These animations allowed students to dynamically explore concepts like pendulums and wave mechanics, fostering discussion and providing language for later written descriptions. Similarly, the “peppered moth” story, illustrating natural selection through changing tree colors and moth populations, is another example of a scientific concept beautifully brought to life through Hype animation.

Another fascinating example that Matthew also highlighted is the “lemonade” animation, which visually explains the phenomenon of condensation on a cold glass of lemonade. The animation meticulously shows water droplets forming and dripping on the glass, helping students understand the behavior of water molecules in a way that’s difficult to observe in a real-life experiment.

Check out a big selection of SERP’s Hype interactives at the bottom of this post.

Why Hype Works for SERP

The team at SERP reaches for Hype to convey these concepts for a number of reasons:

• Dynamic Visuals: Hype allows for the creation of much more engaging and understandable visual models compared to static alternatives.
• Student Agency: Unlike videos, Hype animations allow students to stop, start, and revisit content, fostering a sense of control over their learning. This encourages interaction and discussion among students.
• Facilitates Deeper Exploration: The interactive nature of Hype animations can inspire students to ask “what if” questions and explore the real-world phenomena being depicted.

We’re excited to stay on top of what Matthew and the team at SERP creates next! The gallery below shows off more awesome animations:

Natsuki’s project leverages the Felica reader, a contactless RFID reader, to create a unique interactive experience. By using object detection, different animations are triggered based on the object presented to the reader. This innovative approach blends Japanese tradition with modern digital storytelling.

More on this project from Natsuki:

In Japan, there is a traditional card game called Karuta, where a reader reads aloud the text on a picture card, and the players must find and take the card with the corresponding proverb or lesson. We have adapted this into a digital format, creating a digital Karuta project that brings a smile. When you hold up a Karuta card (illustration) related to the projected movie to a contactless reader, a story related to the depicted Karuta unfolds, allowing you to enjoy the narrative. All animations and scenes were created with Hype and exported to 20 HTML files. Playing through all of them takes about 30 minutes. We use a Felica reader for the device and a JavaScript module to operate it, but since it was challenging to handle the JavaScript functions within Hype, we embedded an HTML page for processing within Hype, making it work invisibly.

You may also love Natsuki’s homepage, filled with fun hand drawn animations.

You can view this project and the animation projection + interactivity in the video below:

Preview one of the animations exported from Hype:

One of the 20 animations built in Tumult Hype for this project

Drama in Panama came to life from hundreds of hours of filming, writing, rewriting, and then carefully bringing the story into an innovative self-paced interactive web format in Tumult Hype.

Daniel Morgan @ Tumult: From what I gather, this was a nine year project! Tell me a little bit about how you started planning / writing this, and what story you set out to tell.

Deyan Sedlarski: It all started as a joke when we were students. We studied at the National Academy of Art in Sofia, Bulgaria, where we were tasked with making a comics based on a book by Jack London – The Hearts of Three. Our passion for cinema led us to film this book, but we had never done anything like this. Maybe being naive didn’t stop us in time. With tools and equipment at hand, we set out on this adventurous path. We went through many stages. Many people in the team changed. We made it to the final cut several times, but the results were not satisfying and it made us start all over again. Ivo Alekseev wrote five versions of the script and in the end we had a wonderful story. It’s only inspired by the book, we didn’t literally follow anything from it. I took care of directing the project, and later I shared this task with my wife, Mirela. And thank goodness, because I couldn’t have done it without her!

Daniel: The format of this interactive narrative is very unique — did you have any inspirations from film, TV or other interactive stories you’ve encountered?

Deyan: From the beginning we wanted to do a web series, but the whole time I was worried about the word “web.” What does it mean? If you upload a movie or a TV show to the internet, does it automatically become web? There are many examples of web series around the world that are nothing more than uploading video content to YouTube. For me, that wasn’t enough. It took me years to realize that to be web, our project had to be interactive. So even if I wanted to, it wouldn’t be able to go on TV or cinemas and really deserve the definition of “web.”

So I’ve achieved peace of mind regarding the definition of “interactive web series”. But this has a downside. Since I got this insight quite late, and we had already shot all the material, we couldn’t realize the possibility of the viewer choosing the direction of the plot. The story remained linear. In that sense, what we ended up with is not exactly a game, but rather an interactive comics and a movie in one.

Daniel: Would love to hear a bit about how you stayed organized through this process — especially switching between filming and building interactivity.

Deyan: The project took us nine years. All this time we were learning on the go. We watched lessons, read books, analyzed good examples from the world. We were complete beginners at filmmaking, but with the help of friends and parents, we were able to achieve results that we enjoyed! For us, Drama in Panama is an additional specialization, a curriculum in a free elective subject. In the last stage, we received funding from a government program to cover the cost of programming the episodes. Unfortunately, no team of developers was able to cover the brief and dare to implement it. This presented us with a huge problem. It was unthinkable to return the money to the program, something had to be done! On the other hand, the money was not enough to look for a company from abroad. I was very scared. Then one of the professors at the academy showed me the Tumult Hype. I hadn’t heard of it. It was intimidating for me to take on something that even the professionals didn’t dare start. But there was no other way out.

I embarked on studying your product. By then, I was surprised. It was much more intuitive to work with than any other software I have used so far. Also, the help I received on the forum was extremely important. Things that were completely new and unheard of for me, I would not have caught up with them if it weren’t for the forum members I was annoying around the clock!

I managed to do in three months what the developers wanted to do in more than half a year and without offering me a mobile version or support for any browser other than Google Chrome. And I have it all now thanks to Hype.

Daniel: That’s incredible! Awesome to hear that Hype was intuitive to learn. What’s your favorite segment of the story?

Deyan: The plot and visuals come to a head in the last two episodes, as the Daydreamer (my wife and co-director) unfolds in the Valley of Lost Souls. This segment of the story is mystical, surreal and that makes it truly wonderful! I don’t like to watch the rest because I play the twins Francis and Henry, and I don’t think I’m a good actor. I wouldn’t make that mistake again!

Daniel: Do you have words of advice for others embarking on a project like this?

Deyan: Don’t compromise on the overall composition, even when you don’t get paid for it. You can shoot a film with a not-so-good camera and make it less than ideal quality, but if the script is carefully thought out and the dialogue and scenes are meaningful, you’ll be happy with the result. In the end, even if things don’t work out in the best possible way, you’ll know you did your best! There are more important things than money, even though they are really necessary. More importantly, build on our high goals and always aim higher than what we can achieve.

Daniel: Any upcoming projects you’re working on?

When we finished working on Drama in Panama, I felt like I didn’t want to take on a big project anymore. But here I am now, a few months later, itching for new challenges. I want to work and look for new inspirations and people to make art with.

Experience Drama in Panama: https://dramainpanama.eu/en/

Watch the Trailer:

Предлага се и на български език.

Directors
Deyan Sedlarski and Mirela Sedlarska

Script-Writer
Ivaylo Alekseev

Music
Zdravko Krustev

Ali’s team creates interactive animations to augment and improve the vast library of textbooks her team distributes for free on the Apple Books Store for the College of Veterinary Medicine students. Interactives range from the flow of oxygen through the respiratory system to detailed 3D animations of bones and joints. By writing and designing their own interactive textbooks in-house, they can easily update, distribute, and control their curriculum.

Daniel Morgan @ Tumult: It was great to see the animations you shared with us — The common theme for your animations seems to be approaching a medical concept from multiple angles ‘states’. What has it been like creating technical and medical animations with Hype?

Ali Ennis: It has been so fun creating animations using Hype. It is so easy to use, which allows us to quickly add interactivity to any animation or illustration. The field of medical illustration is all about conveying and teaching scientific information and concepts in a way that is clear and engaging. This requires a lot of creative problem solving, and Hype has been a very helpful tool for us to use to solve learning problems. Standard linear animations are sometimes limited in how much viewers will actually pay attention and understand a concept. Hype allows us to challenge our users to dig into a concept, and it encourages them to do something in order to see how and why things change.

Why did UGA choose the iBooks platform for creating this type of content? Do you have any thoughts on the transition to Pages for book production?

We chose the iBooks platform right after it was released because we wanted to create user friendly interactive books that could include different types of widgets to increase learner engagement. For testing purposes, our vet students now are required to have a Mac laptop, which means the software limitation hasn’t been an issue.
The transition to Pages is worrisome because we rely heavily on the widgets we can use to incorporate interactivity into iBooks, especially html5 content. This helps the content come alive. We’re hopeful that Pages will add this feature soon.

We’re also definitely hoping to see full support for HTML content in Pages. Embedding web content is a huge missing piece in an otherwise complete transfer of functionality from iBooks Author. What were the biggest challenges you encountered creating medical animations for these digital books?

A big challenge was focusing on the main concepts and ensuring the most time is spent to convey them creatively and clearly. It’s easy to want to make an animation or illustration for everything, but of course, too many visuals can be distracting and can take away from what you want the students to learn.

Can you tell us a bit about the creative process for creating these animations? Did you have a different go-to tool for creating these before working in Hype?

Our projects almost always accompany text, so our goal is always to help readers visualize the content. The first step is deciding if an interactive is the best way to help students pause from reading to dive into a visual. From there, we will write out what the users will see and what type of interactivity to include. Depending on the complexity of the animation, I will start with a few sketches or a complete storyboard to map out what each interface and animation will look like. I create most of the interface elements for my Hype files in Adobe Illustrator and Photoshop. When a project includes 3D animation or rotating 3D models, I use Cinema 4D and Zbrush to create the models and animate them. From there, I will render a .jpg or .png sequence using Redshift and either bring those frames directly into Hype or do some editing in Adobe After Effects before importing them. We use a lot of layered frame sequences with sliders to show something rotating or changing over time.

A few sketches from Ali's process can be found below: 

Thanks Ali! Looking forward to seeing new animations coming down the line! Check out all the books published by the Educational Resources Unit at UGA here.

The tools educators like Ali depend on are going through a bit of a flux at the moment: Apple has discontinued their free tool for embedding interactive content in digital books, and its replacement (Pages) lacks support for embedding HTML content — a feature introduced a decade ago and used widely. Curriculum developers around the world depend on the ability to create textbooks that extend beyond simple image and video embeds. The ability to interact in a non-linear fashion with a piece of content puts the learner in control to explore, interact, and digest information in a way that feels more real to them. Institutions like the University of Georgia made large investments in iPads and Macs because of Apple’s unwavering support for educators and animators like Ali and the students they both serve. We hope Apple will bring the full spectrum of support they introduced a decade back into their tools.

Read more about the iBooks Author transition here.

We’re happy to introduce a project created by Iain Livingston, an ophthalmologist and researcher based in NHS Forth Valley, Scotland. Iain developed a more portable and accurate tool to test infant vision, improving upon techniques created in the 80s. In January of 2019, Iain published Testing Pediatric Acuity With an iPad: Validation of “Peekaboo Vision” in Malawi and the UK in Translational Vision Science & Technology covering his research, which was prototyped in Hype and is coming soon to the App Store.

Iain was kind enough to answer some questions about this project and his upcoming research in the area of infant vision:

Daniel: It would be great to know a bit more about how you created this test platform in Hype and how you translated the testing platform and research question into the prototype. Could you give me a brief explanation of the project and the goals behind it for a non-medical audience?

Iain: Infant vision tests have remained largely unchanged for over 30 years, comprising a set of large, expensive cards. I used Hype years ago to make a proof of concept test, where a child presses on a grating target and gets an animation and sound reward. It worked a charm, and I quickly noticed that children preferred a tablet-based test to the traditional cards, with the animated cartoon rewards increasing their interest and engagement. It was also ultra-portable and much faster. We formally evaluated this test with adult volunteers using a range of blurring lenses, and observed the paradigm was actually more reliable (better test-retest repeatability) than the reference standard. We then took the prototype to Malawi, where we do a course teaching ophthalmic clinical officers (non-medical) in Malawi to test vision in the very young. There, we recognised that a lower cost digital platform could be quite transformative, and undertook a clinical evaluation, echoing our findings from the adult cohort. We then formalised the build into an iPad app, Peekaboo Vision, which is an app that is CE marked as a medical device, and is the new clinical standard for infant vision testing in our Trust.

Daniel: Can you share what the physical ‘cards’ look like that are typically used for this type of eye test? It’s incredible that Hype can make these tests easier and cheaper to administer at scale and improve health outcomes.

Iain:  This video captures the reference standard:

The traditional card-based tests  (Keeler Cards, Teller Cards, Cardiff Acuity Cards, and Lea Paddles) are great, but we see Peekaboo Vision offering several advantages. We have a paper in submission that suggests the digital version (that started as a Hype prototype build) is superior to card-based tests in terms of the physical properties of the digital displays, combined with the software, when it comes to testing vision. One type of cards that the iPad app replaces can be seen on this page. 

Daniel: Can you share a video walkthrough of the prototype, or images from the app in use? During the test, what types of observations are the testers making?

Iain: In this video, you will see that in the first part, I am looking over the top of the screen to see where the child is looking.

I know the target will be in one of the four corners, but I can’t see the screen, so I tap the relevant corner based on where she is looking, and if that is where the grating is, the target is presented, until the threshold is reached. So the “eyetracking” is very manual! When the child increases in confidence during the tests, she starts bashing the screen where the target is, which is to be encouraged, as she is driving the vision test herself. We have a PhD working on taking the automated eye tracking to the next level. Still in R&D phase.

Daniel: Do you have any other upcoming projects you’re planning to use Hype to build?

Iain: The one in the video was an executable written in Visual Basic by a colleague. I made an HTML5 version as it meant we just needed to share a URL instead of a file, and it became platform agnostic (phone/tablet/Mac/window). We use this with screen share to test vision via VC, which allows us to do acute tests in a patient’s home. You can see a demo of this technology at 1:43s in this video presented by Andrew Bastawrous:

This video is actually of a .exe version that was not made with hype. We found that was a pain to run on hospital computers (recognised as a virus and was a nightmare to get white-listed for bureaucratic reasons) and also couldn’t run on a mac or tablet, so I made a new version with Hype that is working a charm on all platforms and super easy for all to access, and now set to be used in a multi-site clinical evaluation. Premise is the same as demonstrated: supervised home vision test to check children’s vision remotely during COVID-19. They would usually come to hospital for such a test in the UK.

Daniel: What new techniques are you trying to do with the browser-based version of the app? I imagine getting it to run on any laptop would make the test even easier to distribute and administer (though you’d have less screen resolution and no touch screen interface).

Iain: This test is conducted via screen share during a video call, with credit card pinch/zoom matching used to calibrate sizing before the test proceeds. The big benefit for us as clinicians is that we can see that the test is being conducted properly, and we control the test screens, just like we would if the child was present in the clinic. We can easily see if they are peeking through fingertips or cheating by moving forward towards the screen.

Daniel: Thank you for chatting with us Iain! Closing thoughts?

Iain: My pleasure. I love working with Hype. I’m sure hype will be a continued part of the development pipeline as we try to make vision tests more accessible in a browser-based way!

You can follow Iain’s work at: https://www.researchgate.net/profile/Iain_Livingstone 

Visit Michael’s site for more information, links to discussion about the book, and a preview. 

More on the project:

Take the groundbreaking “Masters of the Sun: The Zombie Chronicles” graphic novel to unprecedented heights with an innovative animated digital book that brings the pages to life. A-list voice talent, a cinematic score featuring Hans Zimmer and more form a one-of-a-kind experience.

Watch as the panels pop off the page and bring the action to new life as will.i.am of global phenomenon Black Eyed Peas presents a zombie thriller fusing Egyptology, Afrofuturism and L.A. gang culture.

Download on iBooks here and also make sure to check out the Augmented Reality companion app for the project. You can preview a few pages below:

Kirk DesRosier, an Instructional Designer at the Royal College of Physicians and Surgeons of Canada, recently shared an extraordinary educational game on our forums. The game is an “interactive simulation that puts you in the shoes of patient, resident trainee and physician.” 

We were really struck by what this narrative taught us about the inner workings of Hospitals. My knowledge of hospitals is extremely limited, and this project brought to the surface the range of interpersonal considerations that make a well-functioning hospital.  Beyond this insider’s view, a great deal can be learned from this project if you’re in the planning stage of a large scale educational or narrative-driven Hype project. The pacing and user interface design of this project is worth studying.

The project was created to help in recognizing and managing disruptive behavior in a clinical environment by taking the viewer through a medical case and viewing it from multiple perspectives. The educational game also seeks to poll its participants after completing the narrative which allows participants in a medical practice to earn MOC (Maintenance of Certification) points. Please check out the project here.  

As Tumult Hype has matured, we’ve seen larger and more complex projects where video, database integrations, and multiple modes of interactivity blend together to create a seamless experience. I asked Kirk a few questions about what it was like to produce something of this scale. Below we cover how Hype fit into this project, creating the user interface and interaction patterns, and some surprising results received from the poll data collected by the ‘players’.

Daniel Morgan: There’s a lot of elearning tools out there for producing narratives like this. How did you decide that Hype was a good fit for building out the framework?

Kirk DesRosier: It was an educated guess. We have the Adobe Creative Cloud here so I have access to whatever they called Flash now (Animate CC?) as well as Dreamweaver and a few other tools. Animate CC still kind of sucks. For a while they were working on Edge, but they killed it, took the name and merged flash into it. That’s when I found Hype. The new Animate CC is way too much tool for what I needed to do and a steep learning curve. I also found it buggy in the past and Adobe forums and support have never been that helpful to me when I do run into issues.  

I have about 15-20 years of experience building eLearning via various tools and I felt pretty confident Hype would let me do some things that I have not really seen or done before, like having the data visualizations and integrated discussions. I also wanted to go full screen and not many elearning development tools will let you do that.

I started using Hype a few projects ago and they got progressively bigger. I worked on a knowledge translation site where the doctor I worked with wanted to structure info on ‘Navigating Medical Emergencies’ into visual maps. Hype worked well organizing this information. Select any topic except for the drug summaries to see Hype content.

That was the first project where I actually researched what tools were available and Tumult Hype had very good reviews so I thought I’d give it a shot. It stood up well: no bugs, no crashes, great forums and support and I could see that I could go a lot further with it. My next project with Hype was a medical simulation project. That project incorporated video and a pop-up controller window to let an instructor manipulate a simulated patient on a second monitor while going through a critical care case and adjusting things in the case dynamically. Unfortunately I can’t share that document here. Hype worked really well for that project too and I became more familiar with it. I started integrating jQuery into projects to a greater extent.

For the Small Things project it was a natural progression and I did some searching on the forums to see whether there were limitations in size with Hype that might affect me. After some searching I realized it would work just fine. During development I ran into a couple of issues where looping animations were slowing things down but once I got those under control the performance of the project was great. I also had to eliminate a snowfall library I thought was super cool for the early December scenes because it really bogged processing down – not Hype’s fault though. Overall the Hype forums and documentation are great. The biggest issue I had was trying to keep my code concise. I ended up trying to call external functions that were in one .js file as much as possible versus having code attached to things all over the place. And duplicating chunks of code. It’s not that easy to pass variables to a function in Hype but some of that may also be my limited coding skills.

Daniel: Can you tell me a bit about how you decided to carry the narrative? You leveraged video, chat, and primary documents to take the viewer through the story. How did that planning process look on your end and what was this like structuring in Hype?

Kirk: Our unit does a lot of video based clinical learning scenarios so we have that skill in house. That being said, I have to say most of our projects are pretty dry and written in more of a textbook style. I wanted to try something more engaging for this given we wanted to get people to empathize with an entire patient journey and resident experience and the pressures of being part of the staff of a hospital. I did a few small samples of the journal approach and the team liked it so we spent time rewriting the narrative portion and creating journal entries.

The map was a way to tie things together… I was worried that in the end it would look like a scrap-booking project gone mad but I think people bought into it. The final presentation format was an iterative process. We focused on just one point of view first (the patient’s) and I had the main layout with the journal entries ready before we shot video and photos. Some people in my organization were hesitant as to whether doctors would want to have a more game-like experience and there was some discussion about whether they would get the user interface.  It kind of came to me that even older people I know like my mother in-law figured out texting at the age of eighty six so why not focus the UI on texting, something everyone knows.

Hype was really great in some aspects in that I broke down my interface into object oriented components and was able to re-use each new widget I created pretty easily. It also allowed for rapid prototyping and the ability to adjust my images really quickly to tweak things in Hype. My initial vision was to make things totally responsive and Hype would have allowed for that too but I ran out of time. I wanted the phone version to be a complete phone conversation but we didn’t have enough time to set that up. I also really liked the flexibility that using external style sheets gave me. We had to change the handwriting fonts many times. It turned out the during usability testing I realized that a significant portion of the population can’t read cursive anymore so changing the font was super easy via the external style sheet and a few small tweaks in Hype.

Daniel: What were the most interesting or surprising results you received from the polling / Quickbase data?  

Kirk: The data is still coming in –as of today we have about 300 people that have participated and about 60 from our membership which is greater than 45,000 so a long way to go. There are quite a few surprises:

• People are actually engaged and creating meaningful comments. Professionalism, bullying and harassment in healthcare can be attributed to huge societal problems and resident burnout, alcoholism and even suicide are real. We just had a visiting professor in at lunch today who mentioned that in the UK suicide is considered “just a job hazard” in medicine and that they are trying to change the culture there as well. I’m really surprised at the quality and quantity of comments so far.
• We collect data about the number of years in practice and total usage span. I was really surprised to find no significant differences between usage spans across the board. By this I mean that people who have practiced for >20 years are using it about as long as people that are <5 and everything in between. I guess everyone likes to have fun.
• Responses to the polled questions were also surprising. My colleague felt that everyone in healthcare was sick and tired and knew everything there was to know about “Just Culture”. As it turns out this was an overestimation. People seem to know very little going in.
• People still want more instruction and to make it easier. But at the same time the same people are saying they loved it. Go figure.
• We are also using a reflective pre-post evaluation to ask people about their knowledge gain in the topics, motivation to use what they learned and any barriers they foresee putting what they learned in action. In addition we have a 2 month follow-up (optional) to see how it went in practice. So far I am astonished at the positive gains people are reporting and the high level of motivation. It will be interesting to see the 2 month follow-up data. I don’t want to get long winded but if we can get enough people who work in healthcare to view this, we can expect some significant outcomes in terms of people being more aware of their behavior and maybe even treating people better…. Maybe even one less suicide.

Daniel: Any future projects planned like this for the hospital?

Kirk: The projects we do are targeted to our membership who work at hospitals throughout Canada and the world. Most of the topics are applicable to larger healthcare teams and International medical workers. There is nothing specific to Canada. The next project is about enhanced recovery techniques; if I can push for a game-like experience I would use Hype. It depends on the subject matter and I don’t know enough about it yet so tool selection is not determined yet.

 I’d definitely like to use Hype again if I can get the time commitment… Things I’d like to tackle are:

• Integrating the xAPI standard into a Hype project so I can offload data storage, standardized tracking and deal with progress reinstatement more elegantly. You could probably make it a part of Hype’s export feature pretty easily.
• Integrating AI and NLP. Our organization is responsible for accrediting Canadian Specialists and currently we do this by using standardized patients, essay based questions, multiple choice questions and other techniques that are manually reviewed and marked. I’d like to create a patient encounter that assesses skills and does not simplify things down to being multiple choice questions.
• More visualization! Many experienced doctors I’ve met talk about a novice approach versus the approach of a more experienced clinician and there is no denying there are differences in skill level. I think being able to visualize those approaches could be very powerful. Imagine if you tried to tackle a simulated patient encounter and could then visually see how you approached it versus your peers or more experienced physicians…. That would be cool! Hype allows me to offload the more menial coding tasks so I can focus on advanced stuff so It’s a great platform.

Thanks for reading!

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. 

(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.

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:

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.

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: 

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

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

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

Little GIF Showcase 

Below are a few GIFs created in Hype published and discoverable in Giphy at the tag “immagineit” 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/. 

For years, Tumult Hype has been the tool of choice for easily creating HTML5 ads. We recently received a huge collection of fresh banners from Dennis van Leeuwen & his collegue Inga Hammy. Below you’ll find banners for a number of campaigns built with Hype, and a couple bonus projects:

View them in action here.

They also shared a test of a promotional video created to feature Bosch’s smart home. This project was exported as a 60fps 1080p video directly from Hype: