Animating a video while it is indefinitely looped via loop checkbox

Hello all,

First time poster. Purchased Hype a month ago and am loving it. Hope you can help me and anyone else who may have this issue :grinning:

I have a project I am working on to where I need to animate beer descending down the glass as if someone is drinking it over an amount of time that is unspecified (data dependent).

The beer is a stock video with a transparent png of a beer glass on top of it.

I have an .mp4 of liquid with bubbles rising ( beer :slight_smile: ) that was set as a loop in AE. I imported it to my resources and set it to autoplay and loop as I want it to constantly loop regardless of the animation (up, down, left, right) of the video element itself.

I made it a symbol and animated it within the symbols timeline to move the video element down so it looked like it was losing volume in the glass.

All is well at this point.

==Issue==

I added a pause action to the symbols timeline, as I need to be able to programmatically show each frame at any given point in time but it pauses the looped video as well as the position of the animation within the glass.

I would like the video to keep looping while the downward animation proceeds over time depending on the data received.

I was thinking pause actions on the timeline and external programming could specify which frame to go to.

Has anyone messed with this? My brain is about to fall out.

Thanks!!

Hi @The_Beaticus

Hi and welcome to the forum (and Hype)

A few things, if possible (this is not always the case) could you post a document with what you have already. This enables us to see where you are and what steps you have taken to get there so that we may offer a more tailored solution. Not knowing how you have approached things, even though you’ve given a good description, makes it a little difficult (there could be settings that you have / haven’t used, etc)

I appreciate that some projects cannot be shared so another approach is to replicate the steps perhaps using different elements / resources.

Another good thing to add is your background. Are you comfortable using Hype? Do you know a little / a lot of Javascript programming and are you comfortable using this? (including the Hype API). This would help in the responses given.

This being said, what you have mentioned as an issue doesn’t seem to hold true when replicating the procedure in a new document. (i.e video inside a symbol with pauses in the timeline) so I’m guessing there is something that has been done or that is being done to cause this issue. This is where a document would be useful :wink:

Hi @DBear

I have attached an example file.

https://dl.dropboxusercontent.com/u/42942561/Beer%20test.zip

The beer on the left is what I would like it to do but pause the video animation every frame depending on what data I receive.

I set the beer on the right up to have pause states for the downward animation but it pauses the video itself as well.

I know a fair amount about Hype. I am still learning. As for JS, I have some experience but not much.

Thanks for helping!

@The_Beaticus

This is one approach which is timeline based - as per your example. It does not address the “depending on what data I receive” part of your post as I have no idea how accessing that data will be manifested in your project.

The goal here is to decouple the timelines so the beer “bubbles” while the volume decreases in discrete units (in this case seconds on the timeline). The route I have taken is to create a Symbol within a Symbol. Just as Scenes have their own timelines so do Symbols. So the beer video runs on a continuous loop, while the volume of the glass is controlled by another timeline. In this example it only goes down - it could go up as well.

Project example here: Beer_Example_JHS-v1a.hype.zip (982.6 KB). Demo here.

The timeline for the glass on the right runs (volume goes down) for 5 secs & then pauses. Clicking the glass will run it for another 5 seconds, etc.

I also edited your video for purposes of this demo. I shrunk it from 1920px x 1080px to the needed size of 220px x 280px. Additionally I trimmed the run time to six seconds from 55 seconds. So now instead of a file 38 megabytes in size it is now 578 kilobytes. The video is looped in Hype. Six seconds is enough time to give the rising bubbles enough variety (at least in this demo).

====================

I think there is a better way to achieve this effect - especially if your data has a lot of variability in it - but for now I am out of time. The way I would go about this would be to use JavaScript to set the volume (“Top” property of the “Beer Vid” symbol) of the beer glass. This way you can use your data in a more flexible manner to animate the beer level up, down by what ever amount You wish (and as fast~slow as you like, not dependent on the timeline running at its fixed rate). Perhaps You do not need this kind of control. I could write a demo but it will be a day or so until I can get to it… or others may step in before that.


EDIT: Additional Demo - see the paragraph just above, ignore the part about not getting to it for awhile ;->
Below follows an example of using JavaScript without a timeline on the left glass (right glass works as before with the timeline ~ clicking on the glass to continue it playing after each pause).

Project File: Beer_Example_JHS-v2.hype.zip (987.9 KB)
Demo here.

Interface: Clicking on a button above the left glass adjusts the level of the glass to that corresponding percentage. Your actual data set will of course obviate the need for these buttons - which are used here for simplicity only.

The code also includes one line of jQuery for the animating (loaded in the “Head HTML” of the Hype document - see Hype’s “Inspector” panel - “Edit Head HTML…”). Note: jQuery is not required, but is so easy to animate elements with it.

The function below is triggered by clicking on one of the buttons above the left beer glass. Each button has an ID (“element.id” in the code below) which is used to calculate the percentage height the glass level should be. “BeerLeftHeight” refers to (surprise!) the left beer glass. We get the full height of the “glass” in line 3 (.getElementProperty(beerHeight, ‘height’); then multiply that number times the percentage supplied by the ID of the button that was clicked on, and animate the resulting number using jQuery. The “2000” in the jQuery animation line refers to 2000 milliseconds, the length of the animation time. “1500” would be 1.5 seconds, etc.

function setBeerHeight(hypeDocument, element, event) {
        var beerHeightPercentage = (1-(element.id)/100);
	var beerHeight = hypeDocument.getElementById('BeerLeftHeight');
	var beerHeight = hypeDocument.getElementProperty(beerHeight, 'height');
	var nuBeerHeight = beerHeight;
	beerHeightChange = nuBeerHeight * beerHeightPercentage;
	
	$('#BeerLeftHeight').animate({top: beerHeightChange}, 2000); //jQuery animation
}
1 Like

Nice one @JimScott

You can remove the jQuery and simply use the Hype API for the animation.

    var beerHeightPercentage = (1-(element.id)/100);
    	var BeerLeft = hypeDocument.getElementById('BeerLeftHeight');
    	var beerHeight = hypeDocument.getElementProperty(BeerLeft, 'height');
    	
    	var nuBeerHeight = beerHeight;
    	var beerHeightChange = nuBeerHeight * beerHeightPercentage;
    	
     
    	
    	hypeDocument.setElementProperty(BeerLeft, 'top', beerHeightChange, 2.0, 'easeinout')
2 Likes

@MarkHunte

Thanks for your PM regarding the animation not working on the second demo (left glass).

Indeed my animation works on the only browser I tested - Safari. Opera, Chrome & FF do not respond. I will be looking into this shortly - thanks again for the note.

UPDATE: Version 3 - New & Improved for a Sexier Smile!
Marketing speak for: Our previous version was such a dog.

My first suspect was the jQuery not loading properly on the Dropbox server. So I employed @MarkHunte's suggestion above and used the Hype API (not sure why I didn't do this to start).

Updated Project here: Beer_Example_JHS-v3.hype.zip (989.0 KB) - Demo Here.


@The_Beaticus

I was thinking pause actions on the timeline and external programming could specify which frame to go to.

In my examples there are no frames. The timeline is expressed in seconds, and the JavaScript utilizes a straight numerical calculation.

4 Likes

@JimScott @MarkHunte

Thank you guys for the solutions! Version 3 most certainly has a sexier smile :slight_smile:

I appreciate the help!

2 Likes