What do you want to see in Hype?
While there are many actions which are already available in Hype, it could be helpful to add more built in actions. This could be very useful for situations where for example e-Learning is being designed. Also, not every user of Hype either knows Javascript or has the time to learn Javascript. So having more built in actions could help here. Some additional suggested built in actions might be:
“Change the State of Object XYZ”
“Show-Hide XYZ”
“Move object along path XYZ”
“Play, Pause, Stop Video when clicking on XYZ”
“Morph Shape A to Shape B when clicking on XYZ”
Have you found a workaround for this problem?
Most of this I understand can be done in Javascript. However I do not have the time to learn this language at the speed I need due to other obligations.
Are there examples of other apps with this feature? Or, have you seen examples of this elsewhere on the web? (Please include a URL)
Yes, Articulate Storyline
How high of a priority is this for you?
[X] VERY Nice to Have
[ ] Important
[ ] Can’t use Hype without it
This is usually done by pressing record, moving the playhead forward, changing 'display' to 'Hidden' in the Element inspector. This automatically creates keyframes and doesn't require JavaScript.
This definitely does need JavaScript, and it's something we want to support in a future release -- Here's sample code: Creating Play & Pause Buttons for Video
Here's video showing how to morph between shapes:
A morph creates a 'path' animation, so this could be created on its own timeline. Then the additional timeline can be triggered as a 'mouse click' action (all without any code). Hope this helps!
Great thank you Daniel. I had checked out your video on shape morphing and that is a really cool feature… somehow I overlooked it when checking out your vids. I am looking forward to your upcoming play pause stop video implementation and will check out your Javascript code.
To respond to the “change the state of XYZ” without using Javascript… basically I was referring to two things:
a) That by clicking on one object, you could change the state of another object or itself without manually writing Javascript code. That this option might be accessible as an action from the actions menu.
EX: When the user clicks a square it could cause a circle to change its state (or characteristics) to a Hype prebuilt state like: Normal, Hover, Down (same as Pressed), Selected (If the button needed to remain down), Disabled but visible, Hidden or Shown (without Hide or Show being animated in the timeline). In other words… even if the timeline was paused these states could still be triggered. I believe that Hype currently has 3 built in element states which are Normal, Hover, and Pressed. I know that to change a state (as I am calling them), this can all be done in Javascript… but it would awesome if this feature was available in the actions menu as its own action. EX: When user Clicks on object X > then change the state of Object Y to one the above mentioned.
b) However, it would also be cool if Hype also had the ability to add as many additional customized states to an object as well beyond the 3 provided by Hype. For EX: in addition to the 3 default states that Hype offers which are Normal, Hover, and Pressed, that a user could click on a + button in the button control pop-over for an element, and add customized states. The user could then name those states anything they wanted and they could insert any graphic into that state or keep the original elements graphic.
Articulate Storyline has this feature and I find it incredibly powerful. In that program, the number of states which can be added to an element is only limited by the amount of memory ones computer can handle.
If you would like I can make a short video of Storyline’s states and action panel feature. I own the porgram.
I definitely like the idea of being able to add arbitrary named states to elements, and this is in fact something I’ve wanted to do for a bit.
One interesting facet is that the button states under-the-hood are actually implemented as timelines. When you change a property with a state selected, it is the same as going into record mode that generates animations with instant transitions. So in this regard you can always make alternate timelines that will change states of elements however you want.
Organizationally, sometimes it is easier to put the element in symbol and have your alternate timelines there. Custom Behaviors then becomes a good way to communicate state changes from outside - you can use the “Trigger Custom Behavior…” action on events.
Well that Sounds Like a direct behavior and is supported Out of the Box.
I' m in thoughts for a small helper that' ll enable multiple "and" and "or" combinations without custom coding ... But that'll ne just for the Logic, Not for mentioned states ..
That is interesting indeed. So, an API function and action stack item could then change a state using a transition and time. Sound like a “small” addition but a powerful concept. I guess the state feature would then be added to every rectangle (div). Probably would then be in the side panel rather then on screen?
On the other hand if you consider (relative) timelines a path to a state then we have that feature already. Animate any element or group of elements and run the timeline to arrive in that “state”. The trigger to run a timeline is also built in. If things get out of hand encapsulate the needed element in a symbol and you even got separate timeline scope.
The proposal is simpler and faster but would be more limited. Maybe also more appealing for smaller task or beginners, I guess?!
You mentioned that were interested in me creating a demo of Storyline’s Trigger and State features so I did a quick one this morn and here it is. This vid is only about triggers/states on basic elements and not how Storyline handles triggering videos or how it handles multiple timelines. But if you want I can make 1 video for each of those as well.
Liked the video. As I am also in this thread I’ll continue to comment.
I didn’t see state transitions in Storyline demo. Seams like it could only be state changes like instant or blend transition without getting weird. Magic transitions would be cool, though.
As this still could be valuable as it’s much simpler than using timelines, it could be a nice addition. But I doubt it would be easy to add very complex UI to it without replicating the already existing timelines approach. It would certainly add value to Hype as I never used buttons much (and specially not the states) as they are too limited and single focused. Great for help files, though. If design is involved I mostly us custom graphics as buttons and timelines as I want transitions other than instant. This addition would open (button) states up to really many use cases! I am starting to like the idea as a fellow user David S is winning me over…
Thank for taking the time to put that together, it was really illuminating to see!
Fundamentally I was thinking of a pretty similar concept, although the UI would be as buttons are with a "+" that allows adding additional states. However where I hadn't developed as much was in targeting - presently Hype doesn't have UI to target single elements. The Custom Behaviors feature started out as having these different states, with the "trigger" firing for all of them - but after a bit more brainstorming it seemed that timelines would be just as effective if it was a one-to-many action. Regardless, the main missing piece in Hype is a good UI to target elements. The elements list can get very large in documents.
Definitely having the "many ways to do the same thing" is something I'd like to avoid too - and alternate+relative timelines handle a lot of cases.
I've often thought about opening up the auto button timelines so the timing function/duration can be changed from instant. It definitely makes more sense to show these if there are additional states.
I took some time to get the Articulate Storyline trial and gave it a little spin to get a better feel for the triggers and also to look at how they do timelines. It looks like their concept of timelines is very different - a slide basically can have different layers, each of which has a single timeline that contains elements. This is probably most analogous to a symbol in Hype, if a symbol in Hype only had a single timeline. Even though the timeline is pretty prominent in their user interface, my feeling was that animations themselves were not as integral as they are in Hype so I can see why then went down that road.
Yes well actually I would have gone further in depth on the button state capabilities in the Storyline video but I did not want to make it too long. In Storyline it is indeed possible to add transitions to states, but I will say that the transitions are not very fluid and are extremely limited in their animation capabilities. They have the PowerPoint-ish feeling to them. This is one of many reasons why I think Hype overall is more versatile than Storyline… as a multi-functional tool for a variety of purposes… because Hype’s overall animation capabilities are far greater than Storyline’s. I guess the main point behind the video was just to show how specific areas of Storyline offer built-in non-Javascript methods to do certain things. Yet, these areas are still sophisticated enough which allows the user to create some very interesting interactivity. And the reality is that not everybody in the world of interactive design know Javascript… or maybe they just know a little bit who are in this particular domain. So adding in additional pre-built triggers/actions coupled with unlimited custmizable states with the fluid timeline animation power of Hype would be not only fun, but very very useful.
No problem Jonathan. It was fun to make. And yes you are right… when creating triggers for elements in Storyline the list does begin to grow very long very quickly. Especially for slides (scenes) for complex interactions. So for example 1 element (a triangle) might have 2-3 or more variable triggers, 5-10 direct element triggers, maybe a couple of layer triggers, and some audio triggers… and even more… and that is just for that one element in that scene (this example is for a complex interaction canvas). The other elements in the scene will also often times have a long list of triggers.
So while this is cool what Storyline can do with triggers… there is a is a big “however”. I really get frustrated with many many aspects of Storyline. One of these includes their trigger list management system to manage triggers as just discussed. I think it is not implemented very ergonomically or time-space UI efficient. I would suggest to them a collapsing triangle hierarchy system where the trigger types are folded up underneath the master trigger label type (Similar to how a user can unfold an entire set of sub-menus in After Effects).
Also… regarding Storylin’es use of layers… well its a cool concept and I use it all of the time. However the way they have implemented that is frustrating as well. I won’t go into that topic here so we can save space… but that is certainly a topic unto itself.
Haha, I definitely felt some of that frustration when using it .
It seems they break the UI rules about direct manipulation quite a bit so a user would try something, fail, have to figure out why, change modes, and then try again.
-- Here's sample code: 
