I’ve done a ton of scripting with other languages in the past, including creating proprietary retail games and such (the last one - 12 years ago - sold 80K copies). With what I’m used to, I would select an object, keyframe, marker or whatever, then write the script in the associated script window, including the trigger in the script (“onMouseUp()objectname”, “onFrameEnter()”, etc.).
The reason why I’ve never been able to do anything with JS in Hype is that once you create the script, how do you connect it to anything? Virtually every JS post I’ve seen here says to use such and such script and that’s it.
Say I have a script that creates a bounce of a certain height and duration. I create a “ball” object and name it as such. What then?
I guarantee that this is the number one hurdle faced by users who are new to Hype and to JS.
Ummm … forgive me if I’m not understanding you correctly but “every” post? I’m sure most of the posts follow the same logic. If you give the element an ID you can use JS syntax to attach stuff to it.
Using the built in actions you can place your “script” into a function that runs according to the action. Then using the “name” (ID) of the “ball” you can call your script on it. You could even use the argument “element” that is passed into the function when you create it instead of an ID.
Also the documentation is a great resource to find out how creating a function in Hype works.
http://tumult.com/hype/documentation/3.0/#javascript
for newbies I would always point them to documentation to find out / learn how stuff works.
Also, the majority of my posts that include Javascript would include an instruction on where to add this “javascript” and possibly when to add it
Very many of the post come with examples projects.
A Hype script/ function can be called by a Run Javascript Action in the Action Inspector.
The same way you do with Jump to scene.
i.e on mouse click.
The function when called will place a reference to the element that initiated the call, in its element* argument
function foo(hypeDocument, element, event){
}
Hype Javascript APIs can work directly with this reference.
hypeDocument.setElementProperty( element , 'propertyName', value, 1.0, 'easeinout')
But a lot of the time you do not want to act on the calling element and you may not be using a elements Actions to make the call.
You may want to use the Scene inspector and On Scene Load Actions.
Or even Keyframe Actions to call the Javascript functions.
(All Actions, either in the Scene inspector, Key frames, Element Inspector all have the Run Javascript )
When you do this you will in most cases need to id the element you want the javascript to act on.
You will need to give the element an id in the identity inspector.
Then in the Javascript function, make a reference to the element
var myElement = hypeDocument.getElementById('myElement');
You can then call javascript on the myElement .
myElement.style.backgroundColor = "red";
hypeDocument.setElementProperty( myElement , 'propertyName', value, 1.0, 'easeinout')
Thanks.
The information in your post is invaluable, so thanks for the time you and any other contributors have spent on this.
Long post - feel free to skip and ignore…
Re: example projects - the central issue is about how to replicate what is happening. A novice can copy-and-paste the example scripts and create timelines, but they would need to find the lightbulb moment where they see how everything connects together. From that point synthesis can begin.
Last year I tried working on a scroll-to-top script. It worked for a single-layout document but when I added responsive, there was an issue with unique IDs spanning layouts that I couldn’t figure out. I found an example of a relative project and poured over it many times - every object, every field in the UI and every script but I couldn’t figure out why the example worked but not my version. I could figure out what the scripts were doing, just not how they did it.
As for the “lightbulb moment” thing, I know that the key to all of it is extremely simple, which is why it is frustrating (and I’m sure I’m not alone).
When I first moved into creative as a Photoshop editor in the big leagues (a major Chicago service bureau), part of my duties was running a Screen drum scanner. It was an old unit, with an interface that made DOS look downright intuitive. It had a grid of 2-letter function names and corresponding fields for entering numbers. I was told, for each type of photo, punch in such-and-such numbers and that I could fiddle with this or that number to tweak the scan. At no point could I get the scanner pro to drill down to the basics of what each setting was for and how it interacted with the other settings. At that time I was a year away from coauthoring a major 3rd party manual on Photoshop special effects and I knew all about luminance, chroma, etc., but the machine was so darned eccentric, that I ended up operating it hit-and-miss and trying to figure it out through experimentation. Fortunately, before long, I was able to jump into a senior AD position, but I still remember the guy telling me how easy it was without actually telling me the easy part. (He’d been to the factory scanner school and was taught by a guy who knew how to teach, but he’d never been trained how to teach what he knew.)
I tend to maintain a level of abstraction on this topic, because as a former educator I tend to see things from the view of the student. Having a lot of experience with a different scripting language, I know that once you “get it”, the learning curve becomes directly proportionate to how elaborate you want things to be, which is all about the ongoing accumulation of knowledge and experience. Once you get the simple, basic parts down, anything becomes possible.
However, when a person who knows nothing about scripting wants to make the jump, the chasm is both deep and wide, no matter how shallow or steep the learning curve may be on the other side. The pivotal thing is not the coolness or power of a script. Rather, it is the simple “hello world” step that makes everything click.
Again, I will go over everyone’s posts in detail. The friendly, helpful spirit fo the contributors is always most appreciated.
For beginner scripters - especially those wanting to work with graphics - I found the book “JavaScript & jQuery - The Missing Manual” (by David Sawyer McFarland, 3rd Edition O’Reilly), to be an excellent intro to these topics - available here. (I have the Second Edition the 3rd seems to be just as well received).
The general thrust of the book is aimed at designers creating interactive pages with visual effects.
It is 500 pages with the first hundred or so dedicated to JavaScript. Those 100 pages are concise & well written - lots of examples, the author does not overwhelm You, yet he provides a solid core to advance to the “next level”.
The following sections introduce jQuery & show You how to add interactivity to your pages, along with more advanced JavaScript instruction & strategies - again lots of easy to follow examples.
One of the best “Intro” computer books I’ve ever read - highly recommended.
For that sepcific point i would use classes instead of IDs. I was a flash dev for 10 years before doing javascript and hype and i learned most of it(probably wrongly but whatever) in the debugger.
In hype when you test in safari with the console on it lets you keep the same window instead of making multiple tabs in chrome
so did a console log for event..
Then i analysed it and was like oh look target..
then i did a log for target..
etc etc and found analysing the build in javascript properties and then doing a mozilla help database search on them taught me a lot.
E.G. if you put 10 symbols in different stages as the same class then console.log the class items you'll see only only one of them has different properies than the others, so you extract that one and label it. And boom that's your permanent referal script which works across scenes without needing a rewrite.
In your original post you said
First off if you wanna animate with code you may as well learn raw js code without hype, hype makes it easier for you by you doing it visually and then you can call on with a button without needing to code.
But if i was in your shoes at that point i would be like ok what's the best way to code animate in javascript. To me i knew the answer because i used the same library in flash, GSAP.
And it's pretty readable.
TweenLite.from('#myBall',1,{y:-200, ease:Bounce.easeOut});
"move from - 200 pixels up, to 0 where you are now, in a bounce style"
The problem with that is you need to use presets or make your own function that creates a bounce custom ease which i've done and is pretty annoying to do.
That's also the reason why when i have quick ads to do i just use hype, it takes me an hour to push a hype ad out and i can make it custom and not feel like i used presets.
So its on a case by case basis, there isnt really one way to learn JS or Hype. And I love hype's open ended ness so you can easily blend both at the same time. But really end of the day its up to you.
JavaScript | MDN is a golden resource