Hi,
I’m working on an music bar equaliser, the concept is the equalisers would go up and down randomly in a loop, but the catch is that the bars will have an image in them.
I can’t find a way to mask the image on the multiple bar graphs.
This is how it looks in HYPE
This is how it should look
Looking at the concept, the easiest route might be to animate the negative space instead of the image itself -- cover up the image with white bars on top. But if you have a background that won't work.
Otherwise, you could use the technique described here:
(I'd recommend splitting up the image in this case so there's not a ton of redundant images that are mostly masked out).
To add to @jonathan 's suggestion this mainly animates the top border to become the changing opaque area.
Here I use two rects, They move up and down with the top ones border increasing and decreasing.
They are in asymbol which is then duplicated, Each then has a Main Scene Main Timeline Action to go to a specific time and continue. They then continue in a loop.
Sound Graph.hype.zip (165.6 KB)
You could choose the do the timings as I have done or control them throught the Hype JS APIs.
Hi, Thank you Jonathan and MarkHunte for your quick replies.
I cannot animate the negative space since we’ll be using images over there, the top has to stay transparent.
What I did is I cut the whole image into 31 parts, each the perfect size of my bar.
The another problem that arised was the motion of the bars. Since Hype animates position from the top and left only, I found a hard time animating the height and keeping the top value constant. So I flipped the whole thing 180° and had to redo the whole animation. It’s till WIP, but I’m happy with how its going now.
Hope I was be able to explain the whole thing properly.
HTML5 – Bars Movement.zip (1.3 MB)
Open File – Bars movement.hype.zip (1.2 MB)
Oh, the flip is a creative approach to the problem!!
Hi Guys, so a final update,
We did get the whole thing right, sent it to the client and he din’t like it much. He wanted the small rectangles on the top which would fall and rise with the equaliser bars.
Getting that done on Hype would have been a nightmare.
So we downloaded an After Effects plugin called “BodyMovin” which exports AE animations to HTML5. The plugin made it super simple.
Check out the animation (Still on staging) – arrived.alri.com
http://www.aachener-zeitung.de/zva/karlo/Z_stuff/audioFrequenceVisualizerMask/
hype’s mostly open to other libraries … but this is just a playground …
Have you looked into physics?
You can do this thanks to Physics or Matter.js within Hype.
Update: Heres your complete project minus the mask you can use the technique to apply to masks.
EQ complete.zip (129.5 KB)
Depending on how fast you want it to move id say the sweet spot is .13 - .15
Example 2.zip (10.9 KB)
Physics engine within hype might be the answer 
you’ve forgot that masking is the challenge here 
the idea using physics is nice though.
I’ll leave that up to him or you since you brought it up
Hello,
Masks are an essential part of an animation software and I hope that future versions of Hype will integrate them, just like Adobe Animate: https://www.youtube.com/watch?v=8GHoAFeTYQc.
While waiting for this wonderful day, H_classen, how did you realize the animation:
https://www2.aachener-zeitung.de/zva/karlo/Z_stuff/audioFrequenceVisualizerMask/
Is it possible to have a source file?
Thanks !
Wow very nicely made.
Awesome !! But I think it works mostly with code, we move a little away from Hype tools and this development is not accessible to all.
Sinon, j’aime aussi ZAZ, vous êtes français ?
As pointed out before: just a playground, but with the serious background that hype does some effort to be open to third-party libraries …
no, german guy
OK I understand. Otherwise, for the ZAZ song, I think the original is here:
