Getter & Setter methods

Using JavaScript with Hype
1

I have been testing out the new getter & setter methods.

This kind of getter call seems to work fine:

var currentTop  = hypeDocument.getElementProperty(element, 'top');

However, when I replace “element” with another identifier like this, it fails:

var dropZoneTop  = hypeDocument.getElementProperty('dropZone', 'top');

In the console, I get this error message:

Error in shouldSnapToTargetFunction: TypeError: Cannot read property 'b' of undefined

Is this a bug or a limitation by design?

1 Like
2

Have you declared ‘dropZone’ as a variable?

I mean the function has to know what element it has to look at.

var dropZone = hypeDocument.getElementById("dropZone");

var dropZoneTop = hypeDocument.getElementProperty(dropZone, 'top');

D

3

I’ve found that you can now change the z-index with a setter function…

hypeDocument.setElementProperty(element, 'z-index', 2);

z-index.hype.zip (11.9 KB)

2 Likes
4

Good point, I had not done so correctly.

Here is my test project - a simple drag & drop example using the new getter & setter methods.

drag&dropPrototype.hype.zip (30.9 KB)

4 Likes
5

I like it DBear …

1 Like
6

Love this example! This would be a great tutorial for the group
How the script attaches to an element and how the script works.
I am crusading for more tutorials that explain javascript to those designers new to scripting.

Again really nice example!

8

Yes, z-index and top/left were the primary motivators since we do quite a bit depending on the browser and effects and they really need to go through the runtime! We're gonna have a fun time going through all the old forum threads commenting about the newer z-index method :smile:.

Wow, that's great! Good to see this being used. One suggestion would be that if the mouse is within the drop target to always have that snap in.

3 Likes
9

Absolutely @drewbullen , later when the release is released of course :smile:

1 Like
10

I am enjoying the new get/set options, they have made it very easy to bring the clicked element forward...

var zInd = hypeDocument.getElementProperty(element, 'z-index'); // get current z-index value
hypeDocument.setElementProperty(element, 'z-index', zInd + 1); // set z-index value & increment by 1 on each click

var shoMe = hypeDocument.getElementProperty(element, 'z-index')
console.log ("z-index: " + shoMe)

z-index-3.5.hype.zip (13.6 KB)

[feature request/question]

I'm not sure if it is possible, but can the z-index be added to the "Properties" menu so that we can use timelines for setting the z-index?

11

Awesome, glad you were able to make use of it and everything is working!

This is the million dollar question :smile:. I've been trying to figure out an intuitive way to do this since the get-go with Hype, but have not really come up with anything that meets our standards. z-index is a weird one. We use it for the ordering in the element list. The zIndex shouldn't be arbitrarily set; it really needs to be relative to other items (a unique and sequential z-index per element). So really if you change one element, you should also be changing a bunch of others. Copying an element with animated z-indexes shouldn't really preserve that value, especially if going into another scene. And so on... So I don't know a good way to do this from a UI perspective. Perhaps there's a notion we could use of an "offset" that gets added/subtracted from the base z-index, but Hype doesn't yet have any support for this.

1 Like
12

Thanks for the great explanation on z-indexing Jonathan. I think most folks are going to love the getter/setter options

1 Like
13

Nice exemple.
If I get it correctly, each time an element is clicked, its Z position is incremented by 1 ?
So, if I multiple-click on an objet, it could quickly be sent far in the front and I’ll will have to click those in the background the same number of times to get them in front ?
What about positioning all the z-moveable elements relatively to each other, moving them by switching their positions ?
Example : we have 3 elements. Az = 1, Bz = 2, Cz = 3. Clicking A will let it exchange position with B, and clicked again will make it switch with C.
I’m not the programming guy so I’m not able to do it, unfortunately.

14

All elements would have a certain z-index. When you change this with an animation, the element would also move up or down in the element list. It can get ugly when you move things in to a group…

15

I’m already using this feature in an mobile app. It’s very useful when you have multiple dragable elements and want to current dragged object on top off everything else. Since there’s now way to get the highest z-index by javascript, I use a global set to 1000.

if (event['hypeGesturePhase'] == hypeDocument.kHypeGesturePhaseStart) {
	gZindex++;
	hypeDocument.setElementProperty(element, 'z-index', gZindex);
}
1 Like
16

Is there a plan to support all the new Hype 3 easing curves as well? If not, please consider adding them.

Get/Set is a huge lifesaver for me to code simpler programatic transitions/animations which don’t need to be timeline based, but I make extensive use of the new easing curves such as “exponential” ease in/out and “elastic”.

2 Likes
17

Not currently; this is limited because they would take up a lot of runtime file size. I would like to provide a solution for this in the future though.

18

Try this on a text box…

hypeDocument.setElementProperty(element, 'scaleY', -1.0, 0.5, 'linear');
hypeDocument.setElementProperty(element, 'scaleX', -1.0, 0.5, 'linear');
1 Like
19

nice :smile:. You can set the values to be negative in the inspector too for flipping. I’ve debated about if this is correct behavior from the scene editor though.

20

That is sweet!!
I have been enjoying this add to Hype the most! :smile: