Oh ok makes sense, cheers!
BUMP!
Now that the new Hype is out everyone please feel free to use this camera! It will work in all of your files 
Thanks
3 Likes
Just wanted to double endorse this project - it is trés cool.
1 Like
OMG man, this is amazing!!! 
1 Like
Thanks for sharing…
Hello Everybody,
even though people haven’t been commenting much this is a great project and I updated the code a bit.
v1.1
- Fixed the selection scopes to only focus on the current document and stage when selecting elements
- Fixed the requestAnimationFrame to cancel when the scene is changed
- Streamlined the query process with querySelector and more efficient scene selector
// Dcam by Lucky || LuckyDe.com || v1.0
// modified by Max Ziebell || v1.1
var gP = hypeDocument.getElementProperty,
hD = hypeDocument,
stage = hD.getElementById(hD.documentId()),
cam = stage.querySelector(".dCam"),
scene = stage.querySelector('#'+hD.documentId()+' > .HYPE_scene[style*="block"]'),
stageW = gP(scene, 'width'),
stageH = gP(scene, 'height'),
camMatrix, scaleW, scaleH, originX, originY, translateX, translateY, angle, camL, camT, camH, camW, camsX, camsY, realW, realH, realL, realT, rAF;
cam.style.visibility = 'hidden';
cam.style.zIndex = scene.style.zIndex;
function setupCam() {
rAF = requestAnimationFrame(setupCam);
camMatrix = new WebKitCSSMatrix(window.getComputedStyle(cam).webkitTransform)
camL = gP(cam, 'left');
camT = gP(cam, 'top');
camH = gP(cam, 'height');
camW = gP(cam, 'width');
camsX = gP(cam, 'scaleX');
camsY = gP(cam, 'scaleY');
angle = -Math.atan2(camMatrix.b, camMatrix.a) * (180 / Math.PI);
realW = camW * camsX;
realH = camH * camsY;
realL = (camL - (realW - camW) / 2);
realT = (camT - (realH - camH) / 2);
originX = (realL + (realW / 2));
originY = (realT + (realH / 2));
translateX = (originX - (stageW / 2)) * -1;
translateY = (originY - (stageH / 2)) * -1;
scaleW = stageW / realW;
scaleH = stageH / realH;
scene.style.transformOrigin = scene.style.WebkitTransformOrigin = originX + "px " + originY + "px";
scene.style.webkitTransform = scene.style.transform = "translateX(" + translateX + "px) translateY(" + translateY + "px) scaleX(" + scaleW + ") scaleY(" + scaleH + ") rotateZ(" + (angle) + "deg)";
scene.style.webkitFilter = cam.style.webkitFilter;
scene.style.opacity = cam.style.opacity;
if (scene != stage.querySelector('#'+hD.documentId()+' > .HYPE_scene[style*="block"]')) {
cancelAnimationFrame(rAF);
}
}
setupCam();
Nice work @Luckyde
7 Likes
(just wanted to give a shout out on how cool this is and I’m glad you’ve made some improvements to the original!)
Great job Max! Sorry I never updated this, I moved to a slightly dif position type of animator position and never got the time to update my hype knowledge so I appreciate you updating this! 
This is pretty intense, a camera system in hype who would’ve thought? What were you trying to achieve when creating this for hype? Im just wondering where/what can I apply this to, any ideas? Its def cool.
A camera system is the actual system to frame a scene. We instead use an inverted system in Hype. Much like choosing to see the live camera view if we had an actual camera system. Meaning we move all the objects to focus on a particular one or (if grouped) move and rotate a whole bunch of layers/objects so that in a intense zoom most of them are off screen and it’s labor intensive. A camera system keeps you in a birds eye overview when choosing the framing. Here are some pro’s and con’s on the system in Hype in it current implementation:
Pro
- Keep an overview of your scene
- frame your shots independent of the Hype editor viewport
- Use one scene as a setting and plan multiple “shots” in it (establishing, dialog etc.)
- Just have a wild camera movement like in some animated type poems
Contra
… in the current Implementation as in general
there isn’t much against such a system
- One can’t switch to a live preview in the IDE (needs publishing)
- One has to rely on the browser to manage performance (off screen objects etc.)
- It can be hard to achieve one to one pixel
Potential to explore and future option of this script
- Set the frameing to a specific group (and it’s children) to enable camera and traditional frameing in one scene (this would enables camera movement with independant titles for example).
- Options to enable and disable the camera system in the same scene… I added this to scene changes already but not with a specific function.
- Maybe an easier way to resize the camera dimensions to match the scene (if not 1920x1080). The code already allows for this (just resize the outer bound in the dCam symbol content). But lot’s of other stuff in there like title save and color control.
- Unprobable: Get some parallax going and depths.
- Highly unprobable: Get a live preview in the IDE running.
2 Likes
call me an idiot but I can’t figure out what this is supposed to do. I downloaded the file and it just animates into a black scene in my browser. Then I pasted it into a scene with stuff in and … nothing happened on preview.
Maybe there’s a ton of stuff about Hype I need to learn before I can apply this. Can anyone clue up a newbie?
It’s not what I expected from a “camera system” but then maybe that’s my experience as a semi-pro photographer causing me issues.
The download of a functioning example is up there dCam - Dynamic Hype Camera using Hype 3.5 features v1
There is not much going on in the example just a square and rectangle but you should get the idea… Here is a explanation from the good old Flash days…
BTW just to appreciate what modern animation like Hype, formerly Flash and Toon Boom is actually solving… look what Walt Disney had to accomplish without computers just to get a parallax going https://www.youtube.com/watch?v=YdHTlUGN1zw
2 Likes
as I said, I downloaded it. And, as I said, I didn't get the idea.
But with the video, I got everything all at once... and realised it's lovely but not something I need. Thanks for sharing Max.
Well just write a little script that animates the dCam to the position of an element that has been clicked on. I am guessing around 7 lines of code but that is independent of the actual dCam or actually vCam code. Hint: Use hypeDocument.setProperty on the dCam container…
I am rescuing this topic from the depths. 
I'm experimenting with the dCam created by @Luckyde with the revision made by @MaxZieb (v1.1.) I think it's wonderful!
The thing is that the camera is created in a 1920 x 1080 px format and I need it in another dimension, in this case 1000 x 425 px. So, changing the size of the camera deforms the output image. I have tried changing the size of the symbol and also of the rectangles inside the symbol. The result is the same: deformation.
I have looked as best as I can how it is built and I have created a new one with the dimensions I need and I have put the class names and removed them from the original camera.
And it works! But when I delete the original dCam, the new camera stops working and looks like a normal symbol again, with all the lines and RGB squares. Why does this happen, what am I doing wrong? I don't mind having it but I think it would be cleaner to delete it.
Here I share the Hype file. dCam_Test.hype.zip (1,3 MB)
It's just an example because I can't share the original project, but it has practically the same elements.
1 Like
Damn didn't think people would still use this after all these years hahah! The reason why yours seems to be not working is links? I got it to work by removing some of the extra scripts and files
you dont need these , remove em
you dont need the key / value? just set the class name
and attach the cam script to the new cam
so on load it kicks in, works for me!
dCam_Test 2.hype.zip (1.3 MB)
file might not load i might be on the wrong version
4 Likes
Hahaha, surprises of life.
Thank you very much for the help, I'm learning this way.
I find it a very interesting tool to work on panoramic presentations.
It works perfectly with these changes 
3 Likes
Hi @Luckyde, nice that you are still listening and even supporting the code! This script is just the best and one of my all-time favorites and classics on the forum. I love the hell out of it as it is so compact and effective. I keep thinking that its capabilities are heavily underrated! Could be used in so many scenarios…
3 Likes
Absolutely agree with @MaxZieb. Even I, with no idea of code, have been able to use it easily. 
2 Likes