HypeCam v0.3 [BETA]

(Lucky) #1

Hey again,
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.

Example: http://www.luckyde.com/ipad/HypeCam/0.2/
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 :smile:

Rotation works now

File: cam_0.3.zip (939.1 KB) :smile: 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)


dCam - Dynamic Hype Camera using Hype 3.5 features v1
(Mark Hunte) #2

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.

(Lucky) #3

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

(Mark Hunte) #4

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 :sweat_smile: )

(james koh) #5

i am just guessing.
i am not javascriptor so plz understand.
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+")";

(Lucky) #6

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 :stuck_out_tongue:
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)

(Mark Hunte) #7


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

(Lucky) #8

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.
Update soon.

(Lucky) #9

And now rotation works :smile:

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 :smile:

(Mark Hunte) #10

Nice one… is there an example you could post… :grinning:

(Lucky) #11

Yep up above :smile:
cam_0.3.zip (939.1 KB)