I think I have the whole playable ad responsive but theres one page thats giving me the business! Here is the file in question. Any understanding will be appreciated. Thanks!
so, what is your question exactly?
guessing:
disabling your custom styles lets the hypedocument behave as expected by default.
so you’ve got a question regarding those styles¿
1 Like
I’m pretty sure I’ve figured it out. I’ll upload here shortly, but I was trying to fix the slide that was zoomed in when it loaded and get the screen size showing the entire board. Sorry I wasn’t clear about that. I just uploaded the .zip
Did you get it? If not, it’d be useful to know which scenes/elements specifically to look at and what the expected behavior is vs. what is happening (annotated screenshots can go a long way).
Also I recommend posting the .hype document instead of the exported files. To give advice is usually highly dependent on how your existing .hype document is structured. While users can choose the ‘Hype > Restore Document from Export…’ functionality, this doesn’t 100% preserve all data and so if a forum member makes some changes to send you it wouldn’t be what you’d want to use as your document going forward.
1 Like
I was trying to make my animation responsive and I have figured that out, but in doing so had to break another piece. I apologize for not being clear. I’m new and kind of slow, but some what smart! 
Here is the files in question. I need for “Scene 03” to have the blue lines with the square in the middle move with the mouse and freeze when clicked in place. Currently it just sits there and doesn’t move at all and when clicked it still doesn’t. I had some Java in there to make it the mouse, but when responsive it didn’t stay aligned.
terragenesis-revision-3.zip (2.6 MB)
Hey Jonathan!
thanks for chiming in! here is the native file. I've got the responsive down, but need help with "Scene 03". The guide needs to move with the mouse and pause on click to give the elusion of picking colony on map.
terragenesis-revision-3.zip (2.6 MB)
I added a Run JavaScript… with the follow() function to On Scene Load to get your code to run.
It looks like the basic problem is that your head EQCSS code is doing the scaling/responsive part, but the code you have doesn’t take into account that the element is going to be scaled and offset from where it is expected. You’ll need code that can property transform the coordinates.
The first step is that you’ll need an element that can represent the position and size of the scene. There’s no “scene” element easily accessible, but your “scene-3-background” element is the full size of the scene and should work fine for this. I assigned it a unique element ID of “scene-3-background” in the identity inspector.
Then you’ll need some way to get its transformed coordinates that have happened after the scale. There’s a DOM method on the element called getBoundingClientRect() that works just for this purpose.
You’ll also need to get the original width/height of the scene. For this, you can use the hypeDocument.getElementProperty() API. This will help say what the scale factor is.
Now you’ll just need to do the math to convert the mouse coordinate to the scene using the values we got before. You’ll also want to do the offset to get the center point of the image (instead of hard coding, I prefer getting the width/height of the image itself).
When all is done, you get use the hypeDocument.setElementProperty() API to set the left and top. Here’s what the new follow code looks like:
// Simple follow the mouse script
var divName = 'hype-obj-R5QMOKZLAD5KNEH39P3G'; // div that is to follow the mouse
function mouseX(evt) {if (!evt) evt = window.event; if (evt.pageX) return evt.pageX; else if (evt.clientX)return evt.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft); else return 0;}
function mouseY(evt) {if (!evt) evt = window.event; if (evt.pageY) return evt.pageY; else if (evt.clientY)return evt.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop); else return 0;}
function follow(evt) {
var sceneBackground = hypeDocument.getElementById("scene-3-background");
var imageElement = hypeDocument.getElementById("hype-obj-R5QMOKZLAD5KNEH39P3G");
var boundingClientRect = sceneBackground.getBoundingClientRect();
var scaleX = parseFloat(boundingClientRect.width) / parseFloat(hypeDocument.getElementProperty(sceneBackground, "width"));
var scaleY = parseFloat(boundingClientRect.height) / parseFloat(hypeDocument.getElementProperty(sceneBackground, "height"));
var offsetX = (hypeDocument.getElementProperty(imageElement, "width") / 2) * scaleX;
var offsetY = (hypeDocument.getElementProperty(imageElement, "height") / 2) * scaleY;
var left = ((parseFloat(mouseX(evt)) - parseFloat(boundingClientRect.left)) - offsetX) / scaleX;
var top = ((parseFloat(mouseY(evt)) - parseFloat(boundingClientRect.top)) - offsetY) / scaleY;
hypeDocument.setElementProperty(imageElement, "left", left);
hypeDocument.setElementProperty(imageElement, "top", top);
}
document.onmousemove = follow;
terragenesis-revision-3-fixed.hype.zip (2.6 MB)
Hopefully that will get you going with dealing with the rest of it!
2 Likes
Jonathan you da man! Thanks for your assistance and making my first experience a favorable one. The only question I have is for when they click I need the mouse function to stop there fore freezing in place it was clicked. Can I just do a simple stop function on key down or would I have to add that to the follow script?
1 Like
The easiest way would be to set a global variable with the On Mouse Down event in the Actions Inspector:
window["isMouseDown"] = true;
and unset it on a On Mouse Up event:
window["isMouseDown"] = false;
Then in the “inner” follow method do nothing if it is true:
//....
function follow(evt) {
if(window["isMouseDown"] == true) {
return;
}
var sceneBackground = hypeDocument.getElementById("scene-3-background");
//...
There are probably several different ways to do this though 
.
1 Like
I may have forgot to add my JS level is beginner as well. My strong suit is HTML/CSS/PHP and more front end, but I’ve been pushing to grow in JS and back end coding. I say that all to say I understand the last part that needs to be added to the follow function, but the two before in regards to the mouse are those new functions? If so its not stopping that mouse function or freezing on click. I’ve uploaded my interpretation and will continue the good fight in the meantime…
Umm ... JS is frontend PHP is backend. Just saying 
1 Like
In the actions inspector you should see the "On Mouse Down" and "On Mouse Up" actions. This is where you should run a new js function with the appropriate code above. Thus, setting global variables that can be used across different functions. i.e the function that's being used to control the mouse / freeze.
P.S I'm not at my comp, otherwise I'd look at project and see what's up and fix! If no one chimes in then I'll come back.
1 Like
I’m a late bloomer! 
No worries! I appreciate any and all help. Yeah when you see the file you see I made the attempt, but somethings off because it’s not freezing…
First of all, JS can be considered back end if using something like node.js but generally it’s considered a front end language. Think “Client” vs “Server”. My OCD got the better of me
Now, with your doc, as far as I can tell … and if I’m understanding right. All you need to do is add the “globalvariables” script to the mouse down action. Currently, you have “none” in there.
Basically, what this will do is make the “follow” script stop working it’s normal way because the variable is true so the “follow function” will return every time thus stopping the crosshair image from following the mouse. Which, I assume, is what you want? On scene load … follow the cursor until you click an area and then “freeze” then timeline to run and “free up” the cursor to choose the option of “build”.
1 Like
no worries! OCD is common amongs my friends. I’m following you, but I’m still lost. I thought I had added that code to the mousedown that I uploaded and it still wasn’t working. I’ll try it again and reupload if it doesn’t work.
Thanks DBear!
Awesome! I just ended up using the " window[“isMouseDown”] = true; " On Mouse Click in the Actions Inspector and its everything I wanted. Thank you very much for your time and patience you are appreciated!!!
1 Like