Sunday, July 17, 2016

Let's Make a Rocket!

After all the reading for this unit, I wanted to create something that really took advantage of a smartphone's strengths while avoiding its weaknesses. Since I'm pretty handy with websites, I created a web app (essentially a single-page website).

First I used Photoshop to create a collection of graphics. I've always admired the high-contrast, simple, cartoon-like graphics you see in mobile apps, but I've never made them. It involves using vector paths for drawing, something that Photoshop can do but which is what Illustrator is really designed for. I don't have Illustrator, so I went with Photoshop, but I've never really tried to do anything with vector paths before. Whew! One learning curve to climb!

Second, I wanted to design a tall, thin web page, something that would involve no horizontal scrolling to view. I wanted to tell a story that had minimal text, mostly graphics. I wanted the end product to be in html. HEY EVERYBODY, get this free download - a program called Macaw that uses an Adobe-like interface to design visually with graphics and text (kinda like Captivate) but which outputs automatically to html and css. You don't need to know any code (though knowing a little will allow you to get the full benefit). It's fantastic, and it allows you to build a responsive web app that will scale correctly on any device (using something called breakpoints, which was also new to me). Another learning curve, but well worth it.

Third, I've always been intrigued with scrolling animation. This involves graphics that are animated, and the animation is triggered by the vertical scrolling. Here's the most involved example of this I've seen - NASA: Prospect, a graphic story with music, and all the animation is driven by the vertical scrolling. It's very cool, but unfortunately it's only partially responsive. Look at it on a big screen, it'll be frustrating with a smartphone!

Scrolling animation has always struck me as perfect for mobile, and I've always wanted to try it. Alas, there's no software I've found out there yet using drag-and-drop for scrolling animation, so you'll need to know html, css, and a little JavaScript. I coded my animation using Animate.css. Just visit the site and play around! Then I used the Waypoints JavaScript library. Yet another learning curve.

Then I packaged the web app into a container that made it a mobile app. Apparently many mobile apps are packaged this way. This was very easy to do using the MIT App Inventor.

If I were going to take this project further, I would add buttons that, when clicked, would add additional explanatory text and various options. I would also record audio snippets, also triggered by the scrolling, of me explaining certain things. And background music (it's sounding more and more like a Captivate project). Someday.

The mobile app is hosted on Google Cloud and can be downloaded from there. I've tested it on my Galaxy Grand Prime smartphone and my old Nexus tablet. The web app is also on Google Cloud, and can be viewed with any browser. I've tested it on my Nexus tablet and my Surface tablet (portrait and landscape). You can even view it on a big screen. Enjoy!

No comments:

Post a Comment