dCam - Dynamic Hype Camera using Hype 3.5 features v1

knowledgebase

(Lucky) #1

Hey guys,

Months ago I created an alpha for a camera object i posted on the forums


which would be able to simulate an after effects camera using hype. Well with Hype’s new functionality I got it!

Download Link (18.1 KB)

This symbol can be copy pasted into a document and as soon as it does the scene will resize itself to it’s dimensions. When you animate it the stage will animate and it uses request animation frame so that coupled with the new engine makes it very smooth to work with!

Current features:

Pan/Zoom/Rotate camera to make the stage do the same
ScaleX/Y
Filter Effects
Opacity changes on it reflect the stage’s opacity
Multiple scenes are supported
it doesn’t matter which scene you place it into it will find the scene it’s in as long as the class name stays and rejigs the code.

I’m sure there are bugs still but I worked 2 months on it so far and it’s now in a stable place thanks to @jonathan’s help with the rotation i couldn’t solve before so i’m very happy and proud of it :smile:

Give it a shot and let me know your feedback!


Camera controls
Welcome on board! Please introduce yourself 🖐
(Jonathan Deutsch) #2

This is an amazingly innovative way to solve the issue of Hype not having a built-in camera object. It works extremely well and effortlessly from the perspective of an animator. When @Luckyde emailed me about it I was giddy as a schoolgirl to see Hype used in this manner. Well done!

On a side note, I noticed that the animation was exceedingly slow. I tracked it down to filter effects being applied and calculated unnecessarily. I’ve fixed this, and it will be much faster in the next beta of Hype.


#3

Nice work @Luckyde good things do come to those that wait! So says Guiness!!

D


(Lucky) #4

Hahah thanks guys! Just wanna build tools to improve the base and hopefully this helps!

Oh so if i disable the webkitfilter it will run faster? I can disable them for now if it means improving the speed. Otherwise awesome, will try it in the new beta to compare!


(Jonathan Deutsch) #5

The problem was even where filter values are their default (even if you reset to defaults) we’d still write filter code, and it looks like WebKit instead of ignoring would spend a lot of time trying to apply them. Hype is now smarter about not applying filter CSS if it doesn’t need to be there (within the scene editor, this was not a problem in the browser). So unless you remake your elements from scratch there’s not much you can do until the new beta.


(Lucky) #6

Oh ok makes sense, cheers!


(Lucky) #7

BUMP!
Now that the new Hype is out everyone please feel free to use this camera! It will work in all of your files :smile:
Thanks


(Jonathan Deutsch) #8

Just wanted to double endorse this project - it is trés cool.


(www.360FUN.net) #9

OMG man, this is amazing!!! :smiley:


#10

Thanks for sharing…


(Loves Hype) #11

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


(Jonathan Deutsch) #12

(just wanted to give a shout out on how cool this is and I’m glad you’ve made some improvements to the original!)


(Lucky) #13

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! :smiley:


(Pete) #14

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.


(Loves Hype) #15

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.

#16

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.


(Loves Hype) #17

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


#18

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.


(Pete) #19

https://lab.hakim.se/zoom-js/

If you can do this that be great.


(Loves Hype) #20

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…