Programmatically apply animation for items

Animation
1

Hi, I have several images like a video thumbnail in 10-15 scenes.

On mouseover, I need to play an effect to scale down (make the image smaller a bit) all these images.

How to do this more efficiently rather than making a timeline for each image?
I’m using Hype Standard.

Thank you for your help.

2

Hi Vina!

For the following You do not need to assign a unique element ID for the element You wish to scale; simply set the handlers for that element to the appropriate function…

This function is called by the “On Mouse Over” handler for each element You wish to scale down:

function scaleDown(hypeDocument, element, event) {
hypeDocument.setElementProperty(element, 'scaleX', .75, 0.5, 'easein')
hypeDocument.setElementProperty(element, 'scaleY', .75, 0.5, 'easein')
}

Function called by the "On Mouse Out" handler to scale the element back to its original size: 
function scaleUp(hypeDocument, element, event) {
hypeDocument.setElementProperty(element, 'scaleX', 1.0, 0.5, 'easeout')
hypeDocument.setElementProperty(element, 'scaleY', 1.0, 0.5, 'easeout')
}

More info on using Hype’s “setElementProperty” here.

Example project:
ScaleDemo.hype.zip (15.7 KB)

2 Likes
3

Hi @JimScott thanks for the sample project, yes it worked but for some reasons the scaleUp handler is not working in my project … the file is 4.4mb (can’t attach)
https://dl.dropboxusercontent.com/u/28350025/scaleNotWorking.zip

4

It looks like the problems copy and paste.

When you copy and paste you may include hidden characters that although you cannot see programs can.
If the program does not know how to handle the characters then it will brain fart.

This can normally occur when you copy from a html page and into a rich text allowable system which is what the hype function area looks like.

To fix this either delete all the text in the function and type it out or delete all the space around the code lines which should remove the bad char. ( I did the latter )

@Daniel may also want to look at your doc to see if there is a way to handle this in the program.

UPDATE.

Saying all of that, I just added a newline after the first line (dropped the second line lower) and that fixed it.
So I am wondering if the character is right at the end of the first line and adding the newline allows the ‘eval’ to not think the two lines are one because of the hidden character which I think is what it is doing.

5

Woww you are right! deleted and retyped all text and it work. a little buggy for the lazy lol…

6

@JimScott or @MarkHunte can I ask about syntax to change the font color to yellow for example…

Thanks

7

Hi vina!

Check out http://www.w3schools.com/jsref/dom_obj_style.asp for more info on styling.

Since Hype API does not have “color” (which refers to text) in its “Get~Set” vocabulary we need to use a different approach. The code below still assumes what ever element gets assigned the event handler is the target. If You also wanted to change another element’s text then You would need to spec the ID for that element (in Hype’s “Identity Inspector”) - such as a red text box = ID of “redBox”:


Initialize the global variable “redBoxText” - called by “On Scene Load” handler:

 function sceneVariables(hypeDocument, element, event) {
   redBoxText = hypeDocument.getElementById('redBox');
  // created a global variable named "redBoxText"
    }

Called by the "On Mouse Over" handler... 
function scaleDown(hypeDocument, element, event) {
hypeDocument.setElementProperty(element, 'scaleX', .75, 0.5, 'easein')
	hypeDocument.setElementProperty(element, 'scaleY', .75, 0.5, 'easein')
	element.style.color = "#FFEBA3"; // affects text, if any, in the element
	redBoxText.style.color = "#FFEBA3";
   // set text color to "yellow" (hexadecimal value)
}

Called by the "On Mouse Out" handler 
function scaleUp(hypeDocument, element, event) {
    hypeDocument.setElementProperty(element, 'scaleX', 1.0, 0.5, 'easeout')
    	hypeDocument.setElementProperty(element, 'scaleY', 1.0, 0.5, 'easeout')
    	element.style.color = "black"; // affects text, if any, in the element
    	redBoxText.style.color = "#000000";
            // set the red box's text color to "black" (hexadecimal value)
    }

Example File: ScaleDemo_v2.hype.zip (18.5 KB)

8

I tried to use a similar method to apply the same animation to a number of buttons and scale them into the scene initially without success. Here’s the code I tried:

	for (i = 0; i < data.length; i++) {

	$('#button' + i).text(data[i].question).fadeIn(1000);
	hypeDocument.setElementProperty($('#button' + i), 'scaleX', 1, 1.0, 'easein');
	hypeDocument.setElementProperty($('#button' + i), 'scaleY', 1, 1.0, 'easein');
}

The code can’t find the elements with jQuery so it vomits a ton of errors. If you’re running into this problem, use straightforward JavaScript, i.e. hypeDocument.getElementById('button' + i)

1 Like