Mouseover change images

There are a few different approaches:

Using Multiple Elements with a Timeline (crossfade)

  1. Insert two images, with the image you want the mouse to change to right on top of the base one.
  2. Set the top image to have an opacity of 0
  3. Add a on mouse over action for the top image to Continue a Timeline, and make a new timeline. Make sure to check ‘Can Restart Timeline’
  4. On this timeline, create an animation that changes the opacity of the top to 100%
  5. Add a on mouse out action on the top image to Continue Timeline (using the same timeline), and check the ‘Play in reverse’ and ‘Can Restart Timeline’

Using a Single Element with a Timeline (instant)

  1. Insert the base image
  2. Add a on mouse over action for this element to Continue a Timeline, and make a new timeline. Make sure to check ‘Can Restart Timeline’
  3. Hit Record and move the playhead up a frame
  4. Click the ‘Choose’ button for the Background Image in the Element inspector, and find your hover over image
  5. End recording
  6. Add a on mouse out action on the element to Continue Timeline (using the same timeline), and check the ‘Play in reverse’ and ‘Can Restart Timeline’

Using a Button (instant)

  1. Insert a Rectangle element (and select Edit > Show Button Controls) or Insert a button
  2. Remove styling
  3. In the normal state, change the Background Fill Style in the Element Inspector to Image, and select your base image
  4. In the hover state, click Choose for the Background Style and find your hover-over image
1 Like

Great intro!

Is there anyway to control speed of the timeline when mousing out?

Trying to make simple line of animated circles that scale up on mouse over, they’re almost fine on desktop but overlap on mobile:

http://digivore.dk/hype/VRline.html

Edit: Never mind fixed it with “Goto timeline” & “Continue Timeline” everything tweens out perfectly

2 Likes

@jonathan Online Documentation (Tumult Hype Documentation) says:
"An easy way to loop timelines is to add a Timeline Action at the end of the timeline that will run a Continue Timeline action on the current timeline, with ‘Can restart timeline’ checked."CanRestartTimeline

But that doesn't do the trick. A Timeline won't restart unless another Continue Timeline forward action is set at the beginning of the timeline.

That makes ‘Can restart timeline’ checked obsolete?
Any obvious case for using this 'Can restart timeline', checked? THANKS!

Fo the API

hypeDocument.continueTimelineNamed('timelineName', hypeDocument.kDirectionForward, false)

it makes much sense as a timeline that reached it’s end and it triggered won’t jump to the beginning

hypeDocument.continueTimelineNamed('timelineName', hypeDocument.kDirectionForward, true)

does the trick… but the version on the timeline behaves differently as you suggested. See attached testcase.

continue.hype.zip (111,1 KB)

Update:

001

This is what seams to be happening. Hype determins the length of the timeline by …

  • The longest/last timeline OR
  • The last Timelineaction

The sequence follows this logic


CASE1 (with TimelineAction)

  1. End of line in CASE 1 is reached.
  2. Last action is execute
  3. End of Timeline Event fires (=Stop)

This allows StartTimelineNamed to do it’s thing as it immediately sets the playhead to the beginning
ContinueTimelinenNamed(Restart Allowed) continues playing but then step 3. stops the Timeline. Both commands don’t behave the same.


CASE2 (simple case)

  1. End of line in CASE 2 is reached.
  2. End of Timeline Event fires (=Stop)

CASE 3

As a button doesn’t live in the timeline…pressing it once the Timeline has reached Stop makes either ContinueTimelinenNamed(Restart Allowed) and StartTimelineNamed behave the same. This is also true for any event that fires after the end of timeline event.


Hope this helps.

PS: My guess is that “fixing” this would have to involve a special rule in the end of timeline event and also would be a problem because it might break existing animations if they upgrade.

1 Like

Sorry, I think this is a bit of a documentation issue. You should be using Start Timeline.

You can think of timelines as having a playback state (play/paused), direction (forward/reverse), and a playhead position (aka the time).

Continue Timeline’s purpose is really to change the playback state to play. Therefore Continue Timeline will only do the checked “restart” behavior when the playhead is at the end and the playback state is paused – basically the timeline is complete.

Can Restart Timeline used to be the default behavior for the Continue Timeline action - it was thought of akin to the “play” button in iTunes. It will continue playing the current song, but if it is at the end of the playlist it will just start over. We added this option and changed the default behavior to not restart in 3.5, as we came to realize in most user cases the playhead doesn’t need to be restarted. However there’s still interesting use cases like toggle buttons and we needed the checkbox to preserve backwards compatibility.

Start Timeline will always set the playhead position to 0 (or the duration if reversed) and set the playback state to playing.

(The one fun special case with Start Timeline is that if it is used at the first frame it will be ignored as this will create an infinite loop!)

1 Like