Hype 4 Beta Replaces the Need to go to After Effects

[petester (Peter Borokhov)]

Yes, its that good. Anticipating the day its officially released to the public.

Above is a video export prototype no longer a prototype for UNiDAYS a student university/college discount program. The UNiDAYS in house team created a static image for Facebook and I came back to them with above. Let see what they say.

Update Response from UNiDAYS

This is great! We'll get it live within the next hour.

[MaxZieb (Loves Hype)]

Just remind me how your doing the pie chart effect.

[petester (Peter Borokhov)]

Ahh, Yes mimicking a fill with a border width with the vector ellipse. Sure, increase the border width so it fills up the entire ‘fill’ region depending on how big the vector ellipse is of course and you can scale it.

hype 4 beta file
PieChart InOutTransition.zip (11.8 KB)

Maybe you can come up with a better approach. Maybe at @Jonathan can tweak this in the ui so dialing the numbers is not a trivial and guessing game?

[jonathan (Jonathan Deutsch)]

That is really clever!

@petester

can tweak this in the ui so dialing the numbers is not a trivial and guessing game?

I'm not sure what you mean here? Which part of the UI? Line draw has a text field for the percent.

[petester (Peter Borokhov)]

Thanks. What I meant If at all possible it would make this effect easier to accomplish, allow border width from the inside of the shape path vs outside or the middle of the path because as it stands now, the shape grows outwards increasing inside and outside border “fill” which forms this pie chart looking thing depending on the width value.

Also, If there is a way to set a mathematical value to ‘fill’ the shape with a border width value based on the overall size of the element without going over or not enough via a check button?

This is all theory and maybe limited to html, svg…

[jonathan (Jonathan Deutsch)]

@petester

Thanks. What I meant If at all possible it would make this effect easier to accomplish, allow border width from the inside of the shape path vs outside or the middle of the path because as it stands now, the shape grows outwards increasing inside and outside border “fill” which forms this pie chart looking thing depending on the width value.

SVG itself doesn't provide inner or outer stroking. A future version of SVG might, though. It can be created with some math though, so this might still get implemented in Hype in a future version regardless. It is definitely on the feature tracker!

@petester

Also, If there is a way to set a mathematical value to ‘fill’ the shape with a border width value based on the overall size of the element without going over or not enough via a check button?

I think this would imply some sort of property binding and math conversion formula. Definitely an interesting idea!

[petester (Peter Borokhov)]

@jonathan

I think this would imply some sort of property binding and math conversion formula. Definitely an interesting idea!

Precisely.

@jonathan

SVG itself doesn’t provide inner or outer stroking. A future version of SVG might, though. It can be created with some math though, so this might still get implemented in Hype in a future version regardless. It is definitely on the feature tracker!

I see, Is there a workaround to tweaking the svg path in H4 beta to get this effect?

[jonathan (Jonathan Deutsch)]

@petester

I see, Is there a workaround to tweaking the svg path in H4 beta to get this effect?

Not really that I'm aware of. The best you could do for an outer stroke would be to double the stroke width, and then duplicate the shape with no stroke and place it above . I've saw a few hacks on SVG tutorials with clip paths for inner strokes, but I don't think you can easily do that with Hype v4.