Believe the Hype (4)

Being an aspiring Web Developer, I never got into animation. It has always been interesting to me, though. I think going to a site and seeing things move, and move well can really take your site to the next level. For one of my courses, I had the opportunity to study Hype 4.

When I first opened up Hype, I was a little overwhelmed, but the more hours I put into it, the simpler it became.

When you first open up a new project, there are plenty of options of ways you can customize your animation. Luckily, I was able to create my elements in Illustrator and just paste them over to Hype. Once in Hype I am able to put any kind of animation on them that I want.

For my project, I was assigned to animate a famous speech, making the words from the speech all appear and move as the audio says them. For this, I decided on the Gettysburg Address. I decided on doing the Gettysburg Address because I had to memorize the first half of it when I was in elementary school, so I was pretty familiar with it. I found a clip on Youtube of somebody giving the speech with lots of emphasis, and decided to use that as my audio.

I am pretty happy with the way this came out. I spent a lot of time making sure the audio matches up perfectly as the text appears, which was not easy. There is a moment in there where the voice says “Our Fathers brought forth a NEW nation”. As the voice says “new”, I made the background lighten up, to symbolize the new nation Lincoln is talking about. Going from a dark past to a bright new nation.

After I made my Gettysburg Address Project, the next item of business was to make an animated infographic with the same style. The infographic needed to have three pages, all with its’ own animation, as well as a way to navigate between the pages.

Page 1

For my first page, I decided to do it on war casualties in America, to show just how huge the Civil War was. This page probably ended up being my most difficult page. Getting the bar to move across the page was simple enough, but getting the numbers to increase like that proved to be a lot more difficult than I though it would. Luckily, a super cool part about Hype is that you can embed Javascript functions into your animation. So for this, those numbers are basically just empty paragraph tags, tied to a function that increases to the desired number.

Page 2

For this section, I went with a Timeline of Lincoln’s Life. Unfortunately I wasn’t able to upload a gif of the entire animation, but I will show a video in the end of the entire animation. The idea is that the little Lincoln hat slowly moves across the timeline, and each box gets bigger to show the user what it says, while the rest of them get blurry.

Page 3

This was definitely my favorite page to do. The idea is that it shows different variations of the flag over history, and has the stars and stripes change to show the differences. It was a little bit tedious getting the start and stripes to move in the way that I wanted them to, but I think it was definitely worth it. For the text, Hype doesn’t have an animated typer like this, so I had to embed some more Javascript to simulate the typing effect. I am super happy with the way it came out, and I think it adds quite a bit. As far as font goes, I wanted something that looked like it would come out of a type writer, to seem a little more old school.

Finished Product

Here is the product all put together. Notice the nav bar at the top, letting the user select where they want to go. The Infographic starts with the Gettysburg Address speech video, and lets the user click through the next button to get to the different infographics. There also is a little animated underline that shows what page the user is on.

Takeaways

Hype is a super awesome product, and I really enjoyed the time I got studying it. I think using CSS to animate is a little bit difficult and takes a lot of steps, but having the ability to have Hype output the CSS for you to just put into your project is awesome. That being said, it is not perfect. I noticed if I tried to put too much Javascript on a page the app couldn’t really handle it and would get really laggy and close. So putting in complex Javascript functions is definitely not its’ best feature, so it is best to keep it simple when it comes to embedding your pages with code. I think Hype is going to be a great tool to have under my belt as I move forward as a Web Developer.