This post documents the new technique we discovered and what changes have been made based on the knowledge.

Creating Animated buttons

We know that Hype’s buttons can create changes on mouseover and when it is pressed, however, creating a flash, a bulge, and a fancier animation, took some experimenting. In researching methods to create the effects, we stumbled on examples of code and other suggestions using alternative timelines. Upon reading this, we took to Hype and used some old fashioned trial and error to create the effect we wanted by simply using symbols and their internal animations. See below for the quick trial and error process we underwent. We assumed that using the main timeline would have made everything trigger at once, however, some miracle occurred and it only affected individual symbols! Here’s a link to the project file so you can see what was done or apply it to your own projects.


Applying the Technique to Other Areas Within the App

The visual feedback is important throughout the app to let users know they are interacting with the objects on the screen. The buttons built into Hype can only do so much (as far as we are currently aware) so we have to use the internal symbol animations to achieve the effects we are after.

Screen Shot 2016-11-11 at 9.32.47 pm.png
The settings used to create the effect.

The first thought for using this technique was for providing the visual feedback in the music creation lab. It could be uses to let users know what note they just pressed and it could allow let them know which drum pad they tapped. The drums are a one-shot sample trigger so they need to be quick unlike smooth bloating buttons. It was somewhat intuitive, as we converted one of the triggers to a symbol and underwent the same method using the timeline within the symbol. This ran into an issue where rapid taps didn’t respond well. Luckily the “can restart timeline” feature was discovered which allowed the rapid taps to provide the effect we needed. The timeline was configured to pause on the first frame so that it would not have a mind of its own when the scene loads. The “continue timeline” action allows the timeline to progress, to effectively run the recorded animation. To work with a slower speed, a timeline action to return to the first frame was initially added, however, this is made redundant by the “can restart timeline” feature. See below for an example of this.

Screen Shot 2016-11-11 at 9.33.20 pm.png
What We Hope to Apply This Effect To

Using this method, we may be able to create the visual feedback in the Loop Pad to let users know when loops are actually activated. Using buttons in their pressed position to swap between the play and pause symbols may prove effective if this can be applied to button states as well. Sarah Prestwidge and I will explore this promptly to provide the app’s prototype with more functional aesthetics.