Creating a alpha transparent video

Hi,
I am tasked to create a video that has a transparent background.
Something like this - http://updates.html5rocks.com/2013/07/Alpha-transparency-in-Chrome-video
I came across a solution called JQuery See Thru - https://github.com/m90/jquery-seeThru
But before the plugin can work, I will need to append the alpha channel below the actual video. I have tried using track matte in AE but it doesn't work.
Any advice or any other solution to create alpha transparent video for html5?
Thank you very much.

To build on what Mylenium said, you need to render your video out of After Effects with an alpha channel. If you're looking to deliver a video for the web, it'd be best to render a lossless file out of AE (with Alpha) and use the Adobe Media Encoder to make the FLV with alpha.

Similar Messages

Alpha transparency borders on dynamically loaded images for use with textures

Hi there folks. Well, I have been beating my head over this
and am hoping one of you can help me out.
Essentially I have 16bit images that are loaded into my
shockwave application at run-time. These images are user defined
which means that I will not know their size ahead of time. Once the
images are loaded I then create textures and apply them to various
shaders. Ok, all of this works just fine. What I need to do though
is create an alpha transparent border around the images, so when I
apply them to their surfaces I only see the image and nothing
around it. I am doing this because these images will only appear at
specific parts on a surface, textureRepeat will be false, and many
models will be stacked in the same exact location using the same
model resource. I have everything working, but I cannot figure out
the alpha part for the life of me. Also, when I test the alpha
based image by itself it works just fine. It is not until I try and
combine the 16bit (converted to 32bit at run-time) image that I run
into problems.
I have tried:
- Creating a 32bit alpha image in Fireworks with a
transparent border and a black rect for the inside. I then copy the
dynamic image over the alpha image (only after going from 16bit to
32bit in imaging Lingo) and leave a little room at the edges for
the transparency. Well, I get a crazy amount of streaks here even
when I try to up the trans border by around 24 pixels on each side.
- Using another similiar alpha based image as a mask with
copyPixels and extractAlpha/setAlpha like this... (code is a little
rough here)
newImage = new(#bitmap)
newImage.name = "place_Test"
newImage.image = member("place").image
newAlpha = new(#bitmap)
newAlpha.name = "AHH"
newAlpha.image = image(newImage.image.width + 24,
newImage.image.height + 24, 32)
newAlpha.image.useAlpha = true
newAlpha.image.copyPixels(member("vase").image,
newAlpha.image.rect, member("vase").image.rect)
newAlphaInfo = newAlpha.image.extractAlpha()
newAlpha.image.useAlpha = false
--reverse dark to light
iAlphaReverse = image(newAlpha.image.width,
newAlpha.image.height, 8, #grayscale)
iAlphaReverse.fill(iAlphaReverse.rect, rgb(0,0,0))
iAlphaReverse.copyPixels(newAlphaInfo, iAlphaReverse.rect,
newAlphaInfo.rect, [#ink : #reverse])
--newAlphaInfo.copyPixels(iAlphaReverse, newAlphaInfo.rect,
iAlphaReverse.rect, [#ink:#subtractpin])
newAlphaMask = iAlphaReverse.createMask()
rescaleAbs(newImage, newImage.image.width,
newImage.image.height, "place_Test", 32)
destImage = member("place_Test").image.duplicate()
destImage.fill(destImage.rect, rgb(0,0,0))
newAlpha.image.useAlpha = false
destImage.copyPixels(newImage.image, newImage.image.rect,
newImage.image.rect, [#maskImage:newAlphaMask, #ink:#add])
destImage.setAlpha(iAlphaReverse)
destImage.useAlpha = true
member("place_Test").image = destImage
I apologize for the messy code. I have cut and pasted from
all over the place and am getting confused. In any case, I think I
am making this harder then it needs to be and hope someone can
help.
Thank you in advance,
Dave

Hi, you can try using other texture layer as mask on the same
shader. As usually you create the texture from a dynamic loaded
image, then apply this texture to the shader on the texture list
index 1 (textureList[1]). Next part does the job, create other
texture from a 32 bits image with the alpha information and fill
all pixels with white color, this is very important because the
second texture layer will be multiply with the first texture layer.
This texture set its render format to rgba8888. Apply the mask
texture to the same shader at texture list index 2, verify that the
blendFunctionList index 2 is #multiply.
I include the code of a project that use this masking
approach:
property pMember
property pEarthSphere
property pNightSphere
property pLastTransform
on beginSprite me
pMember = sprite(me.spriteNum).member
me.setupWorld()
end
on setupWorld(me)
pMember.resetWorld()
repeat with i = pMember.light.count down to 1
pMember.deletelight(i)
end repeat
vEarthModelResource = pMember.newModelResource("EARTH MODEL
RESOURCE", #sphere)
vEarthModelResource.radius = 50.000
vEarthModelResource.resolution = 20
vEarthTexture = pMember.newTexture("EARTH TEXTURE",
#fromCastMember, member(3,1))
vEarthShader = pMember.newShader("EARTH SHADER", #standard)
vEarthShader.emissive = color(255,255,255)
vEarthShader.flat = TRUE
vEarthShader.transparent = FALSE
vEarthShader.textureList[1] = vEarthTexture
pEarthSphere = pMember.newModel("EARTH MODEL",
vEarthModelResource)
pEarthSphere.shaderList = vEarthShader
vNightModelResource = pMember.newModelResource("NIGHT MODEL
RESOURCE", #sphere)
vNightModelResource.radius = 50.2000
vNightModelResource.resolution = 20
vNightTexture = pMember.newTexture("NIGHT TEXTURE",
#fromCastMember, member(4,1))
vNightTexture.quality = #lowFiltered
vNightTexture.nearFiltering = FALSE
vNightTexture.renderFormat = #rgba8880
vNightShader = pMember.newShader("NIGHT SHADER", #standard)
vNightShader.emissive = color(255,255,255)
vNightShader.flat = TRUE
vNightShader.transparent = TRUE
vNightShader.textureList[1] = vNightTexture
vMaskNightTexture = pMember.newTexture("MASK NIGHT TEXTURE",
#fromCastMember, member(6,1))
vMaskNightTexture.renderFormat = #rgba8888
vNightShader.textureList[2] = vMaskNightTexture
vNightShader.textureModeList[2] = #wrapPlanar
pNightSphere = pMember.newModel("NIGHT MODEL",
vNightModelResource)
pNightSphere.shaderList[1] = vNightShader
pNightSphere.parent = pEarthSphere
end
on exitFrame(me)
pEarthSphere.rotate(0.0,0.1,0.0)
me.moveMaskNightTexture()
end
on moveMaskNightTexture(me)
vRotationVector = - pEarthSphere.transform.rotation
pNightSphere.shaderList[1].wrapTransformList[2].rotation =
vRotationVector
end

Minumum sufficient commands to create PSD containing transparent alpha channel

I was recently typesetting some leaflets in InDesign under time pressure. I had a JPG file with a white background and wanted to create a PSD from it in Photoshop CS5 with an alpha channel making the background transparent.
I managed this in the end by blundering around, but the help file is no help, and the obvious way of creating a layer mask doesn't work.
I'd like to know the minimum sufficient command sequence to do it.
Suppose we've got this in Photoshop, with the bit we want already selected:
Double clicking the background layer and then clicking ADD LAYER MASK looks good, but it doesn't create an alpha channel. It actually creates a channel named "Layer 0 mask" but if you save it in a PSD and then import into InDesign it is not transparent.
There doesn't seem to be a "convert layer mask to alpha channel" command. Nor a "make alpha channel from selection" command.
There is a button at the bottom of the CHANNELS tab that's named "create new channel" and if you click it when a selection is active it does create a new layer named "Alpha 1", but unfortunately it is not the wanted mask but rather just the path of the marching ants.

Yes, this does work. Don't know why it didn't for me yesterday.
There's no need to delete the background because in my example, after unlocking the padlock and adding layer mask, there's only one layer there. It does create, as I said above, an additional channel named "Layer 0 mask" which is what one would want as an alpha channel.
If I SAVE AS PSD, the box to include LAYERS is ticked and the box to include ALPHA CHANNEL is greyed out, but InDesign still treats it as transparent.
If I take the selection and SAVE SELECTION AS NEW CHANNEL, it creates a second channel looking exactly like the "Layer 0 mask" one above, but if I then SAVE AS PSD the box to include ALPHA CHANNEL is ticked. So the channel created by ADD LAYER MASK is of a different ilk than the one created by SAVE SELECTION AS NEW CHANNEL, although this is not apparent from the CHANNELS tab. Slightly confusing.

Alpha Channel Video Preloader

We are creating a project that includes a number of alpha channel videos of the course narrator and other characters. Playback works well however, before each video plays, there is a brief "loading" message and then the video pops onto the screen and plays.
I understand the need for the pre-loader, however, I am hoping there is a way to add a "poster frame" to avoid the jarring impact of a person suddenly appearing over a realistic background. A little too much like a magic trick.
We would like to try a poster frame similar to the commonly used "Flash Media Playback" player provided by adobe for flash video on websites found here http://www.adobe.com/products/flashmediaplayback/index.html
Flash media playback allow the use of a jpg file that loads immediately before the video buffers.
Alternatively, are there any other "tricks" to make it appear that the video is present on the screen before it begins to play?
Appreciate any ideas on this.
Thanks
Jeff

Probably because you're not actually encoding "nothing" when creating transparency. An alpha channel is an additional 8-bit grayscale channel, and it probably can't or isn't compressed as much as the RGB channels, or else the transparency would not be clean. The only way to decrease the file size is to lower the total bitrate, which will subsequently have an impact on the quality of the "visible" video.

Is there a way to create a semi-transparency with Java?

I would like to be able to create a semi transparent form and I was does anyone know how to do this?

import java.awt.*;
import java.awt.geom.*;
import java.awt.image.*;
import java.io.*;
import java.net.*;
import javax.imageio.*;
import javax.swing.*;
import javax.swing.event.*;
public class CompositeTest extends JPanel {
    private BufferedImage backImage, frontImage;
    private float alpha = 1;
    public CompositeTest() throws IOException {
        backImage = ImageIO.read(new URL("http://today.java.net/jag/bio/JagHeadshot-small.jpg"));
        frontImage = ImageIO.read(new URL("http://today.java.net/jag/Image54-small.jpeg"));
    public Dimension getPreferredSize() {
        return new Dimension(backImage.getWidth(), backImage.getHeight());
    public void setAlpha(float alpha) {
        this.alpha = alpha;
        repaint();
    protected void paintComponent(Graphics g) {
        super.paintComponent(g);
        Graphics2D g2 = (Graphics2D) g;
        int x = (getWidth() - backImage.getWidth())/2;
        int y = (getHeight()- backImage.getHeight())/2;
        g2.drawRenderedImage(backImage, AffineTransform.getTranslateInstance(x, y));
        Composite old = g2.getComposite();
        g2.setComposite(AlphaComposite.getInstance(AlphaComposite.SRC_OVER, alpha));
        x = (getWidth() - frontImage.getWidth())/2;
        y = (getHeight()- frontImage.getHeight())/2;
        g2.drawRenderedImage(frontImage, AffineTransform.getTranslateInstance(x, y));
        g2.setComposite(old);
    public static void main(String[] args) throws IOException {
        final CompositeTest app = new CompositeTest();
        JSlider slider = new JSlider();
        slider.addChangeListener(new ChangeListener(){
            public void stateChanged(ChangeEvent e) {
                JSlider source = (JSlider) e.getSource();
                app.setAlpha(source.getValue()/100f);
        slider.setValue(100);
        JFrame f = new JFrame("CompositeTest");
        f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        Container cp = f.getContentPane();
        cp.add(app);
        cp.add(slider, BorderLayout.SOUTH);
        f.pack();
        f.setLocationRelativeTo(null);
        f.setVisible(true);
}

How do i create an alpha channel to place into edge animate?

HowHow do i create an alpha channel compatible with edge animate?

I don't use Edge, but since it is a web tool it stands to reason it would use standard web techniques, meaning it would rely on built-in transparency functions of formats like PNG and GIF, which you can easily produce by using Save for Web after creating normal transparency on a layer in Photoshop. No extra Alpha channel or otehr extra steps required. Perhaps Edge even has some stuff that does the conversion on the fly by allowing you to open a native PSD like in Dreamweaver, but beyond that I don't see what else it could/ would do - all the features it can provide are limited by standard specifications for HTML, CSS and JavaScript. There is simply no way to do something sensible with a TIFF in a browser, if you get my meaning .
Mylenium

Keynote Export "Transparent video"

This maybe a some tip and trick how to export form Keynote transparent chart animations and what ever...
i looking for answer around the network, but no answerts of this question! So i figure out how to do this and i like to share it (maybe helpful for others)
1. Create a transparent .png file (i take for example my steps) i created in Photoshop transparent image 1024x576 for PAL Widescreen. Export as .png
2. Open Keynote, make your own animated chart, pie or whatever you like.
3. Open inspector > Document inspector set your size. (For my situation i choice 1024x576)
4. Go to Slide inspector. Under Background choice Image Fill and use your transparent .png image
5. File/Export.
6. check include transparency. Under formats choice "Custom"
7. Choice Settings!
8. In Video Compression Settings Choice Animation Set your frame rate. Set Keyframes to Automatic. Set Depth to Millions Of Colors + (Quality - set to Best)
Thats all!
Transparency are not working by default - it works only when you set a transparent Color Fill
this is some kind of Keynote Bug or so...

This also works if in your step 4, you choose "Color Fill", then using the Color well, choose any color you want, AND set its Opacity to 0%. No need for the transparent .png file this way.
(I sure wish the Include Transparency check box would stay checked from one export to the next!)
Cheers, and thanks for the post.
Keith

Creating animations with transparent backgrounds?

I'm running into some problems when using After Effects to create animations with transparent backgrounds for Keynote...
I use animated gifs and short quicktime movies with uniform backgrounds as source files, use color keying to take out the backgrounds, preview them to see if they look OK, render the results as RGB+alpha, and... they don't show up as transparent in Keynote. They work in Powerpoint, however. I've tried outputting as .mov, as .gif, as premultiplied vs straight alpha... no joy. Can someone explain (or point me to an explanation) of how Keynote differs from other programs in its handling of transparency? What am I missing?

Using a TYPE_INT_ARGB BufferedImage worked beautifully. I had played around with Image for hours, but it never occurred to me that BufferedImage would be needed. :)
many, many thanks,
Steven

Opening Fireworks PNG-8s with alpha transparancy

Hi all,
I have to do some work on some files I didn't create -- a couple hundred png files. They are 8-bit, indexed files, but when viewed on the web they have 256 levels of alpha transparency. When opened in Photoshop, they have only one level of alpha transparency :(
Turns out these are in some proprietary Fireworks format ... anyone have any ideas how I can get these into Photoshop without losing my alpha channel, hopefully without having to BUY Fireworks ... oh how I miss ImageReady ;)
Thanks in advance.

Photoshop doesn't work with continuous transparency in indexed color mode, only one transparent value is allowed. (ImageReady wouldn't do it, either)
You may need to use another application to convert them to a normal RGB image with transparency.

Transparent Video in Captivate 6 to HTML 5

So I have shot some video on a green screen, removed the background in After Effects and have saved the video in an alpha channel. I want to place the video into Adobe Captivate 6, these video are going to be a talking narrative throughout the slides. After importing and placing the video where I want it, I go to preview. If I preview the slides in Captivates normal previewer the background is transparent, just the way I want it. But if I preview it or publish it to HTML 5 the background becomes black. HTML 5 is what this project needs to be viewed in. Am I doing something wrong or does HTML 5 not support transparent video. Thanks for your help.

Hello There,
Can you please share a video file with alpha embedded? I doubt it is supported but want to check it before I confirm. You can send it to [email protected]
Thanks,
Vish

Appending alpha transparency swatches to a CLUT

I have a 160 swatch color table I generated in PS and I'd
like to append some alpha transparency values to it for PNG8
processing.
In Fireworks CS4 I've loaded up a test image, successfully
loaded in the .act file I exported from PS and then selected 'Alpha
Transparency' from the trns pulldown menu. Briefly some new
swatches show up in the swatch palette, but then they disappear.
I've tried everything I can think of. If there was a way to
manually add and edit the transparency swatches to the act that
would be ideal, but when I try to add swatches to the table I don't
see any way to edit the transparency value, only RGB/HEX etc.. I'm
somewhat stuck at the moment.
Is there a way to do this? Maybe even some sort of
independent color table editor?
It's important that I have exact control over the CLUT file
used as the device that the images will be running on can only have
one CLUT active at any time, and all of the images in the UI need
to be built to reference this single table.
Another tangental issue I've encountered is that the PNG8
alpha transparency in FW seems to be restricting itself for some
reason. For example, I've created a 256 pixel wide image in PS with
a black ramp that goes from 100% opaque to 100% transparent across
x-axis. I open this in FW, select PNG8, adaptive, 256 colors, alpha
transparency and I only get 16 swatches (4bit?), completely
faceting my ramp - however I've seen others online getting 8bit
values of transparency using this same method...
For example
Here
and
Here
Any and all feedback much appreciated.
Nate

natronix wrote:
> Jim,
> That one only contains 16 transparent values, if the
optimize palette
> functioned correctly it would be 255.. the source image
I started with
> contained a 256 pixel wide block, blending from opaque
black to completely
> transparent (therefor 1 opaque color and 255 values of
transparency).
>
> However when I select PN8, adaptive sampling, 256 colors
and alpha
> transparency, that file is what Fireworks creates.
>
> I'd described this previously- the posting of this file
was per Linda's
> request to see a PNG8 with non-index transparency, which
it has, albeit not a
> full 8bits.
>
> On another note, I've opened up the .act files in a hex
editor and can see
> that it does not contain an alpha attribute. So my
initial concept of appending
> these new transparent values from Fireworks to the .act
are moot. I've
> discovered the .pal color table format, which is almost
identical to .act
> except it contains an extra hex pair for an alpha value.
>
> Apparently Photoshop use to support importing and
exporting of .pal color
> table files. I don't know what version support stopped
at. I've tested CS3 & 4
> and they aren't playing nice.
>
> It appears as though I'll need to manually concatenate
the .pal file starting
> with the existing .act table that I have, porting the
hex values over, and then
> manually building out the transparent values I want. The
next and final step
> will be to identify a version of Fireworks, or some
other host, that can
> utilize .pal and run optimizations on the files I have.
That or I get a patch
> to Fireworks that fixes the optimize panel, better yet a
patch to Photoshop
> that enables alpha transparency in PNG8.. I'm not
holding my breath.
>
>
Nate can you share the original 256 value set, even if it is
in PSD form?
Jim Babbage - .:Community MX:. & .:Adobe Community
Expert:.
http://www.communityMX.com/
.:Adobe Community Expert for Fireworks:.
http://www.adobe.com/communities/experts/members/206.html

Exporting Alpha Transparency for a PC from motion5...?

I am trying to export alpha transparency for a lower third I've done in Motion5.
I know that proress422(proxy) can be used , but this does not import well into my PC (premiere pro).
Is there anyway of creating alpha transparency from m5 so that my PC will happily recognise it ?
thanks,

If you're using Alpha for *anything* -- you must use ProRes 4444 (if Premiere will accept it.) It is the only ProRes that supports transparency and the only export option in Motion 5 that supports transparency. (Older versions of Motion could export with the "Animation" codec which also supported transparency.)
If Premiere (on the PC) doesn't handle ProRes 4444, then
You can export just the alpha channel from Motion and use a "Track Matte Key" in Premiere (as I *understand* it -- I've never used premiere.)
On export, go under the Render options panel and set Color: to Alpha (default is Color + Alpha).
It's basically a B&W movie of the alpha data -- the "layer" is used as a luminance map in the travel matte key. I actually don't think it matters what codec you use for export -- it's not really transparency -- black is transparent and white is opaque.
HTH

Using the difference between two shots to create an alpha channel

If I were to lock my camera down and first film a shot of a non-moving background (say, my living room), then take another shot of someone walking into the room and sitting on a sofa, could I use the difference between the two shots (the person walking and sitting) to create an alpha channel?
What settings in Motion would I use to get this?

If you really want to do it within Motion, try stacking the clean frame and the the frame with the moving person over each other. Then set the blend mode to Difference for the top clip. You can clean this up a bit with a blur and a threshold filter, but Difference mattes are often a bit iffy.
If anything the person is wearing matches the background, for instance, that will be transparent.
After you've created a black/white representation of the "difference", you can add your person clip again to a new group, ⌘-shift-m to add a mask, then drag your difference group into it and set the source to luminance...
make sense?
Patrick

How can I create a custom sized video in PP cs6?

How can I create a custom sized video in PP cs6? I have read references to the "desktop" setting but cannot find it. I am trying to find the right settings for a 1080 px x 486 px video (which I need to qualify for hi res on Vimeo). I need to output a 450 x 1000 px video for
my website. Ideally, I'd like the sequence settings as well as the output settings. I am using still shots- no actual video.

What are the exact properties of the still images, particularly the pixel dimensions and pixel aspect ratio (PAR).* The letterboxing (black bars top & bottom) is most likely a result of a mismatch in these settings. If this is the case, then the easiest fix is to make sure not only the dimensions but the PAR match.
Say for instance your source images are 1000x1000 with a PAR of 1.0 (square pixels) and your sequence is set also set to 1000x1000 but with the PAR set to D1/DV NTSC (0.9091), the result would be letterboxing as seen here:
*if you're not sure about the PAR of your source images, right click on one of them in the Project panel and select Properties.

How To Create A Website Background Video In Adobe Edge ?

Hello,
I have video file in my computer SSD drive and i want it to play as background on my web page (page that i am creating).I did try to follow this video:
How To Create A Website Background Video In Adobe Edge Animate Using Edgehero - YouTube
but i cant follow 100% what he is doing.
Guide that i did try to follow is at this link: How To Create A Website Background Video In Adobe Edge Animate Using Edgehero - YouTube
Steps i do in Adobe Edge Animate CC
1.) Create New
2.) i click + sign under section Library >> Scripts >> Add JS File from URL...
URL that i am adding is: http://www.edgehero.com/edgehero.js/1.2/edgehero_1.2_min.js (URL is taken from site: Edgehero.js )
I add this link: http://www.edgehero.com/edgehero.js/1.2/edgehero_1.2_min.js to box that occures after i click on Add JS File from URL
3.) I go to Edgehero.js and from there i scrol down to section named as Media - Html5 video / Html5 audio
and i select from there this:
there is a code:
// this will set the video as background of the div/rectangle
backgroundvideo_1 ='movie.mp4';
// put new edgehero.js variables here
4.) I go to Adobe Edge Animate CC 2014 and right click on project and select Open Actions for "Stage"
and then i click on + sign and select creationComplete
This will open Stage window
there i will copy this code:
// this will set the video as background of the div/rectangle
backgroundvideo_1 ='movie.mp4';
// put new edgehero.js variables here
5.) Then i click on ++ sign under library >> Video
and i add video from my computer SSD drive.
Video is named as video3.mp4
Now i eddit the code in Stage window (See above)
code will look after editing like this:
Then i change under left side px to %
6.) Then i copy backgroundvideo_1 from Stage Code:
Then i select Rectangle Tool and mark the area (white box) and i click on small C icon
And the box that occures i type there backgroundvideo_1_mp4 autoplay
now when i use ctrl and enter i only get gray box that does not play video.
What am i doing wrong?

Here is the html file.
Note video file that i try to add is random training video from youtube, And file format is saved using this site:
How do I download and save a YouTube video to my computer?
this is only for testing as i am not gonna put that video on background to my web page. I am only trying to understand how to add video as background.
http://www.filedropper.com/test3_5
http://www.filedropper.com/test3_6
http://www.filedropper.com/test3edge
http://www.filedropper.com/test3edgeactions
http://www.filedropper.com/test3edgepreload
Goal is to create background video like u can see here:
Adobe Muse Tutorial - Responsive Design Hack! by MuseThemes.com - YouTube
Similar possibility is available also in Edge as i understand?

Creating a alpha transparent video

Similar Messages

Maybe you are looking for