This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Johannes Eckert
Posted Aug 13 - Read on Facebook

I was thinking of this:
— it looks like Chrome supports alpha video (http://simpl.info/videoalpha/)
— for some complex animations, you may want to prepare sth. as a video (e.g. an icon animating when pulling down the page)
— create a transparent video of the animation in AE
— use as the new VideoLayer and set currentTime of the video to a value (using Utils.Modulate on the drag)
— have the video scrub forward/backward depending on the drag motion

however, it looks like currentTime cannot be set so often, in fact in my simple example it does not work when I set it during DragMove. You can click on the video to set the video to the time defined by the DragMove, but the DragMove itself does not seem to be able to change the video position.

why is that?

17 Comments

Johannes Eckert

OK, I should have tested this longer … turns out it depends on the video, if you add this video to the player, it will actually scrub in Chrome (not in Safari or Studio):
http://www.html5rocks.com/tutorials/video/basics/Chrome_ImF.mp4

and if you use a video from the alpha example site, it will actually scrub AND be transparent in Chrome (the ugly scrubbing glitch is hopefully just due to the bad video encoding).

check it out here: https://dl.dropboxusercontent.com/u/115270/video-basic.framer/index.html

unfortunately Safari doesn't support WebM, so I don't know a format that Safari accepts that also supports an alpha channel …

Alex Hazel

Found a weird bug too.....The audio for the video will keep playing even after I close the window for your project....odd

Alex Hazel

I think you need to fire a function on the "touchend" event to update the value of newPos so that moving the scrubber will change your position in the video....Try that...

Johannes Eckert

I actually need it _while_ dragging the scrubber, not just at Events.DragEnd

Alex Hazel

ah ok....hmm

Johannes Eckert

so far that works in the dropbox link from my first comment in chrome. you just need to wait for the video to appear playing before scrubbing (it doesn't always load as it seems)

Alex Hazel

I was thinking the ugly scrubbing glitch COULD have something to do with the fact you aren't formatting your "newPos" value correctly. I would clean that up so that your value is either only whole numbers or only two decimal places to the right of the decimal. Right now, the number sometimes randomly shows like 10 decimal places. Not sure how the video player is interpreting that....I could be wrong though....Encoding issues could also be a culprit. In general, best practice would tell me, that you never want to have a value that doesn't make sense. Time is in the format 12:00 so your value should probably reflect that as well....

Alex Hazel

also I am noticing the when you scrub you will get the same value twice in a row..Makes the scrubbing choppy and makes it almost seem like it goes in reverse for a frame or two....You might want to add a check into your logic to ensure that you never get two values that match each other when scrubbing

Noah Levin

This is fantastic! I've been thinking about something like this for a while -- will try it out and report back.

Koen Bok

We are actually writing something on this. I think the plan was to post it today.

Johannes Eckert

Alex: yes, it should include the frame rate in the math so the decimal values point to individual frames only

Marc Krenn

Tried to use a WebM-encoded video with alpha channel before but in it's current state it's just too exhausting to use:

1. WebM-encoding takes FOREVER
2. There's no "official" WebM-encoder for AE/P/ME provided by Adobe or Google.
3. The only 3rd-party encoder (https://github.com/fnordware/AdobeWebM) doesn't support alpha channels, yet.
4. As said before, WebM with alpha channel is only supported by Chrome with set experimental flags right now.

Ugh.

Koen, how about a png-sequence-based workaround, until the misery, that is webm right now, is fixed?

Koen Bok

The apple animation codec also support alpha and works well in Safari (not sure about Chrome).

Benjamin Den Boer

Marc Krenn Have you tried exporting with the Animation Codec? Both the Animation codec (default) and the Apple ProRes codec allow you to export transparant videos, as long as you have set the RGB+Alpha channel and have toggled the Transparency Grid on your composition.

Marc Krenn

Thanks Koen and Benjamin! No, I haven't tried that yet but I'll do that ASAP :)

Marc Krenn

Quick update regarding RGBA videos:

* Apple's Animation-codec only works in desktop Safari and FramerStudio
* Apple's proRes4444-codec fails to load correctly 95% of the time and even if it does load, the video is shown with a solid, black bg.

Fun fact: proRes4444 seems to be the only correctly working RGBA codec when opened with "Preview "(Yosemite) and Quicktime (10.4).

File sizes (500x500, RGBA ,4sec., AE snowstorm generator)
* proRes4444 (no Quality settings): 31,7MB
* Animation (Quality 100%): 25,7 MB
* Animation (Quality 50%): 21,6 MB
* Animation (Quality 10%): 16,2 MB
* Animation (Quality 1%): 15,1 MB

Read the entire post on Facebook