This post documents some of our experimentation with Hype using some features that Sarah Prestwidge and I would need for our project

Animation

Using the timeline to set keyframes, we had a trial and error play and it was quite intuitive to create an animation. See below for a GIF.

Animation Test.gif

As you can see, movement and opacity was animated. This could be used as like an introduction page before going to the main menu.

Title Screen

Taking animation further, we animated buttons fading in, as well as a dynamic background which will be useful for changing colours like Kahoot.

ScreenFlow.gif

Different Scenes

To quickly test sound effects, we used the circle shapes to mock up a drum kit. Using some kit samples, we assigned them to the buttons with click/tap triggers.

Screen Shot 2016-11-05 at 12.30.26 pm.png

This worked fine using Wav files, however, on older iOS devices it had some lag so mp3 became the better option as it required less data bandwidth.

Different Layouts

Hype is excellent because you can create different layouts for different devices. This means we would be able to craft different layouts for tablets and phones. See below for the iPhone layout which works with the portrait layout. Screen Shot 2016-11-05 at 12.33.15 pm.png

At this point in time, we don’t know how to make a layout for both portrait and landscape, as it only allows one kind of device (see image below). If we try and add another iPhone layout it says, “There is already a breakpoint at 320 px”.

Screen Shot 2016-11-05 at 12.35.01 pm.png

Sadly, wordpress.com does not allow us to post our Hype documents and it would be too tedious to create another WordPress with wordpress.org to post our HTML5 applets. Perhaps we will look into it, although, we can share the HTML5 files, or collate all drafts and experiments within an iBook as widgets.

Advertisements