Timelines and Previous Timelines Part 2


(HunterXtreme) #1

Dbear helped me solve an interesting problem with my relative timelines using Javascript. It was a marvelous solution. This is an Addon to that but I am creating a new post because its a different Issue and i think there are many people that will benefit from this.

See the Initial Discussion Here: Link

Problem #2
Right now in my project i have 3 Timelines. The array & loop configuration created can support multiple timelines.

Now: When i go to a timeline, 2 elements slide into place. These elements are a rectangle and some text. I want the text to go away when clicked on, while the rectangle remains.

Theory: I figure this can be accomplished by reversing the timeline duration == text element slide in duration.

it takes the text element .5 seconds to move into place on the viewport. Is it possible to reverse the current timeline .5 seconds while still retaining the integrity of the original loop progression?

Clear as mud?

TIA for help.

nav_info-control-.hype.zip (26.8 KB)


#2

If I understand You correctly…

Set the “Mouse Click” event on the text to “Go to Time in Timeline…” and go to 1.0 seconds. This routine doesn’t “reverse” it but it simply accomplishes the goal - we don’t need the “disappearing” animation really.


(HunterXtreme) #3

Thanks for responding Jim! This is decent solution.


#4

Glad it worked for You. If this approach wasn’t suitable then the only way I know of meeting your request would be to wade into some code.

Post edit: Had another (non-coding) idea if the “return” animation of the text would still be appealing for You - create a (new) relative timeline that animated the text back into its original position. I’ve never created a relative timeline to date so I can’t be sure this would work, and I won’t have time in the immediate future to try it. But thought this approach might be worth mentioning.

Look under “Absolute & Relative Keyframes” in the Timeline section:
http://tumult.com/hype/documentation/3.0/#timelines


(Mark Hunte) #5

So this is now possible using

The hypedocument-extension hypeDocument.continueTimelineNamedFromTo

Here is an example using you project. See the link for more info.

nav_info-control-v1MH .hype.zip (28.0 KB)


(HunterXtreme) #6

Mark, This was a super fantastic Solution and a great example of how to use the Hype Extension!


(HunterXtreme) #7

Taking this a little bit further, The Unique Id’s are tied with the buttons and the timelines.

I would like to have this to where I could click on the Colored Object and have it produce the same results as the related button.

For Example: The button Marked “Move To Orange” will center the orange Block and bring up relative text.

I would like the make the orange rectangle clickable to where it would do the same thing as the button. How can this be done since i cant use a unique ID?


(Mark Hunte) #8

Can you explain a little bit better.[quote=“Valkolimark, post:7, topic:7010”]
I would like the make the orange rectangle clickable to where it would do the same thing as the button
[/quote]

Clicking the orange does the same as which button


(HunterXtreme) #9

There are tHree Buttons at the Top

“Move To Blue” Move To Orange" “Move To Green”

There are Three Corresponding Color Blocks

Basically, When you click the Color block, I want it to do the same thing as when you click the button. It is redundant i know, but there is a logical purpose…

Does that make sense?


(Mark Hunte) #10

But not all the blocks are visible.

But say I click the green block. The green Text comes up. How do I get the orange block…


(HunterXtreme) #11

The user needs to have the option of using the button or the block. Yes, you wont have all the options on the canvas at one time. :slight_smile: It is just giving the user, be it mobile or not, the option to click on a block or a button.

At that point you would use the button at the top. However, If a block is visible i want the user to be able to have that option.

I might even want to put an OnDrag event there to slide the block over, but that is beyond the scope of this particular conversation.


(Mark Hunte) #12

You can use class names and compare them to the timeline array items.

The are plenty of examples of this on the site.


(HunterXtreme) #13

Very Cool! Can you link me to a good example? I Looked but was fruitless in my efforts.


(Mark Hunte) #14

Ok,

Maybe not as easy to pin point as I thought it should be, they are mixed in with loads of threads.

the basic idea is to give for example; a button and a rectangle the same class name. You can added this in the Identity inspector.

Then there are a couple of ways to get the elements class name some similar to the way you obtain the id.

But an element can have more than one class name
In Hype Hype elements normally get a class name of ‘HYPE_element’.

So if you did not add a class name the array would look like

var classNames = element.classname;

—> HYPE_element

If you add a class name then you would get

—> HYPE_element t3

So using the indexOF() method you can test if the class names returned match any of the timelines in the array.

 var timelines = ["t1", "t2", "t3", "t4", "t5" ];
 

var className = element.className
for (i = 0; i < timelines.length; i++) {

if ( className.indexOf(timelines[i]) > -1){

console.log(timelines[i]);
} 

There are many ways to skin this cat and many caveats so my advise is to look up

indexOf(),
className,
classList
classList.contains()


(HunterXtreme) #15

Mark,

Thank you for taking the time to point this guy in the right direction. I will look this up and see what i can come up with! Thanks mon!