I spend the weekend trying to recreate another feature from animation into hype, use of camera!
At this point i figured out the ability to scale, move x and y and rotate.
How to use:
either use my file or just make a shape , call it ‘cam’, make it the stage size and put the camController js on frame one of the main stage.
Things I need to figure out
Tinting the camera white or black to tint the stage
Help with the above would be appreciated.
But yeah I think this is a massive feature lacking in most animation tools and now you won’t need to scale all your items up and down to simulate a zoom in and out/pan
Rotation works now
File: cam_0.3.zip (939.1 KB) Test it out!
Now uses cssMatrix, X, Y, W, H works fine. Rotation, Skew do not.
File: cam_0.2.zip (936.2 KB)
File: cam_0.1.zip (939.1 KB)
This is pretty cool. Did not know you could do stuff like that.
Do you mean rotate as in
scene.style.transform = "rotate(45deg) translateX(-"+camL+"px) translateY(-"+camT+"px) scaleX("+scaleW+") scaleY("+scaleH+") ";
scene.style.webkitTransform = "rotate(45deg) translateX(-"+camL+"px) translateY(-"+camT+"px) scaleX("+scaleW+") scaleY("+scaleH+") " ;
This did rotate for me but not the ideal image to do so. But as this concept is new to me I am not 100% on what I am looking for.
See that would work and I tried that, however for some reason the camera element’s rotation is something I can’t trace out and as soon as I turn the camera the “camL” and “camT” variables (cam.style.left and top) return in NaN immediately. Try it out.
If you were to do camR = parseInt(cam.style.rotation) and link that to the rotation value the whole thing breaks (at least for me)I lose all the innitial variables as well as the rotation variables).
What I’m looking for is the ability to rotate the camera item, and the stage matching it’s rotation just like as if you’re shooting film and you want to rotate the camera.
See http://bitey.com/smf/index.php?topic=705.0 from what I’m trying to achieve, mind you that is a.s.3 based so the syntax for the most part I cant transfer over
Can you post one with your rotation in so I can see more what you mean. ( I had to swoosh my hand over my head a couple times reading that )
i am just guessing.
in this code transform z-axis is not mentioned. isn’t it why this does not work?
scene.style.transform = “translateX(-”+camL+“px) translateY(-”+camT+“px) scaleX(”+scaleW+") scaleY("+scaleH+")";
scene.style.webkitTransform = “translateX(-”+camL+“px) translateY(-”+camT+“px) scaleX(”+scaleW+") scaleY("+scaleH+")";
The isue is that hype on rotating an object on the stage doesnt result in translateZ it results in rotate
^ above is the result or me manually rotating the camera.
So declaring translateZ won’t make an effect, I need to link a manual rotating the camera on stage to the code the same way manually changing the width height, x and y will make the code retransform the stage around the camera.
And Mark sorry if I overcomplicated it
Here’s a basic idea of what I mean. Take my document, rotate the camera just an inch left or right and the whole code breaks, with the innitial left and top variables also dissapearing and I don’t know why.
Here’s an example of a broken camera, I rotated the camera and added a rotation controller and it broke. It broke before i added the rotation controller, i think the issue is picking up the rotate value, and maybe hype overwrites all my code as soon as I rotate the object? I’m not sure.
cam_0.1_rotate.zip (937.0 KB)
When @jameskoh wrote about the z-axis, I tried it and found that the whole project was broken.
I did not realise that was what you meant. So I originally thought I had screwed something up.
Just adding a timeline keyframe for the Rotate -z breaks the project. You do not even have to complete the rotate just add the base keyframe.
Even if you remove it after, the projected is screwed. It seems that this is a bug and has nothing to do with the JS code per say
Figured out the issue, Hype overwrites object properties on moving and puts them into the transform matrix.
Reworking the code now so that it’s based around css transform matrix.
And now rotation works
Give the camera a shot, play around with it!
Make a new shape , call it cam and dump the code on there.
Should be able to rotate, scale , move easily
Nice one… is there an example you could post…
Yep up above
cam_0.3.zip (939.1 KB)