Migrating from Adobe Edge

1

I am migrating an animation from Adobe Edge to Tumult hype.

http://www.tcibrokerage.com/about.php

I was able to use symbols in Hype, and allow and have hover effects per symbol. Not sure how to start this within Hype. I have done many animations, but they are animations, with minimal interactions.

I am thinking to use scenes, but then to keep the other items consistent, they have to be recreated. Is there any way to have a scene that “adds to” a prior scene?

I was thinking of using timelines, but they don’t seem to work… I cannot have one set of Actions for an object in Timeline A, and then a different set in Timeline 2.

Suggestions or tutorials where to begin?

2

Here is what I thought would work with symbols-

There is a symbol with 2 timelines, Main and Show text.

There is an icon, and it has an action on it for mouseover, where it goes to the ShowText Timeline, and displays some text. This works very well in the symbol. Mousing over shows text

There is also a mouse out action, and it goes to the Maintimeline (where the text is not visible). On mouse out is set to run this timeline, but mousing out does not hide the text.

So I thought that I would be able to create a third timeline (hide text) that I would run to remove text, but that doesn’t work. It seems that objects have a global set of properties, and they can cannot be set to different values in different timelines.

3

You could use javascript to change the z-index upon each click…

var stack = hypeDocument.getElementById('one');
stack.parentNode.style.zIndex += 1;
// console.log(stack);

You would probably be better off using class names for the elements that hold the text in the circles

z-swaping.hype.zip (13.6 KB)

4
  1. create timelines for each mouseover and mouseout and asign them to their elements.
  2. create a timeline in which you swap the explanationtext, lets say every second …
  3. create timeline that switchs the opacity from 0 to 100 for the explanation
  4. onclick or touchstart for each element asign a go to time intimeline (2.) that matches your needs and start 3.
    this is what you#ll get
    a guess it’s the simplest solution, there’ll be others :slight_smile:
5

Thank you so much for taking the time to respond, however…

I do not understand… there are timelines for the entire stage (document) and each Symbol could have a timeline… but I do not see how to attach timeline to an “element”

Swap the explain text with what? and why every second? How many do I need

Not sure if this is a translation issue or me being particularly dense.

If you have the time, and you please explain, or post your Hype file (or email it to me)?

That would help…

Also surprised there are no tutorials or explanations on how to do this (really, I could do this in CSS and HTML 5 by now…

6

so why use hype ¿ :wink:

example.hype.zip (12.7 KB)

7

because Hype should be easier, especially with positioning

Thank you for the example

8

Okay, Here is the final version:

http://dynamicsights.com/hype/serviceanim.html

I appreciate the help from H_classen, and the sample provided. I was using START timeline, but it seems that CONTINUE timeline is the better choice. Not sure why.

So this works beautifully, IF YOU GO SLOW. However, it is possible by mousing over to get the animation STUCK and it will do a mishmash of different timelines…

Other users seem to have this issue as well

If I don’t get a nice solution, I will most likely convert the mouse-overs to clicks.