Can a Video File Have a Transparent Background? (alpha channel)

(Greg Smith) #1


My goal is to create a small “cycling” animation created in other software - which I would like to import into Hype 3.5 - (it could be an animated .gif with transparent background) - overlaying it on another element - a static or a moving background illustration (i.e. a set of background elements exhibiting parallax) .

The object would be to animate the cycling animation moving along a path, as a foreground layer against the already animating background layers - thus achieving a standard layered animation technique.

I’m also unsure, at this time, if video files can now contain a transparent background - allowing them to be used as an overlay.

How would this be done in Hype 3.5?

Thank you,

Greg Smith

Importing video graphics with transparent background
Motion 5 export video with alpha chanel with no video control

Unfortunately not, but I believe this is ‘in the works’ – it’s a computationally intensive feature for browsers to support.

If you search ‘Frame animation’ you’ll see a number of different techniques others have employed on these forums. Here is a quick video tutorial that shows a manual (but still pretty quick method) of getting a sequence of frames added to a Tumult Hype document:



Video files themselves can contain transparent backgrounds, but in formats that are not web friendly, which is the reference for your question. To my knowledge there is not a web standard that natively (and universally) supports transparency - but read on…

The WebM format (VP8 codec) has had some interesting work done in this regard:
Alpha transparency in Chrome - video
Limited, but a start.

What is more interesting is moving away from a format~codec based solution and into an HTML5 canvas approach. This different solution has the benefit that all current video web standards can “keep on keeping on” without a fracturing in standards.

The following link, here, gives a demo using mp4. In a nut shell: two versions of the same video are produced: one with the rgb info and the other with the alpha channel data (to be used as an animated clipping mask). These two versions are then fused by javascript in the browser.


Here is a quick video tutorial that shows a manual (but still pretty quick method) of getting a sequence of frames added to a Tumult Hype document:

Yes, but too tedious for anything but a small collection of frames… looking forward to Hype having an “image sequence” import capability. This feature would would expand Hype’s design capabilities while being a “good bang for the development buck” (I would think).

Video: Turning Transparency (Alpha Channel) On
(Greg Smith) #4

Daniel & Jim:

I wholeheartedly agree with Jim - that adding even an image sequence import function (that transfers all images automatically to a timeline sequence one level deep) is very good bang for the buck, regarding the development of Hype.

Standards of all sorts seem to have stood in the way of all kinds of development - in all fields of technology. At least they provide employment for the legions of engineers out there.

But, a standard for video that “keeps on keepin’ on” for the web (transparency included) would truly comprise the bees knees for us animation artists.

The fact that we still have to monkey around with .gif files defies both logic and imagination.


Greg Smith

(Greg Smith) #5

Oh, by the way, for those wanting to produce frame-by-frame animation - manually and automatically - you should really take a look at OpenToonz - the first amazingly powerful, yet simple 2D animation application (used by Studio Ghibli) that has been made freely available to the public for all uses - both commercial and casual.

I’ve produced a series of videos demonstrating its usefulness and its functions, for anyone interested:

Couple this fantastic application with Hype for the absolute animation solution.

Greg Smith