I'm writing a processing sketch displaying multiple videos with 'transparent' background, by masking the RGB-layer with it's own Alpha layer, like this:

1.      rgbmovie.mask(alphamovie);
        image(rgbmovie, width/2, height/2);

I rendered the two videos in Aftereffects. The 'rgbmovie' is a movie rendered normally with RGB-properties. The 'alphamovie' is the same movie, but only rendered with ALPHA-properties. This enables me to mask() the RGB movie with its ALPHA movie, and create a movie with transparent background in Processing.

This works fine in theory, but I have problems syncing up the RGB with the ALPHA movie. When I run my sketch it looks like this. The cirlces should be filled with colour of the RGB layer, but they are cropped instead.



This is my code supposedly displaying two 'transparent' videos, each by masking the RGB-movie with the ALPHA-movie. The first movie gets displayed when pressing the 'A'-button, the other one by pressing 'W'.

1. int air, water;
   
   import processing.video.*;
   Movie elair, elair_mask, elwater, elwater_mask;
   
   void setup() {
   
     size(600, 400, JAVA2D);
       frameRate(30);
   
     elair = new Movie(this, "air.mov");
     elair_mask = new Movie(this, "air_alpha.mov");
     elwater = new Movie(this, "water.mov");
     elwater_mask = new Movie(this, "water_alpha.mov");
    
     imageMode(CENTER);
    
   int air, water = 0;
   }
   
   void draw() {
    
    background(200);
   
   //+WATER PARTICLES
      if (water == 1) {
        elwater_mask.read();
        elwater.read();
       
        elwater.loop();
        elwater_mask.loop();
        elwater.play();
        elwater_mask.play();
       
        elwater.mask(elwater_mask);
        image(elwater, width/2, height/2);
      } else {
        elwater.stop();
        elwater_mask.stop();
   }
    
       
   //+AIR PARTICLES        
    if (air == 1) {
        elair_mask.read();
        elair.read();
    
        elair.loop();
        elair_mask.loop();
        elair.play();
        elair_mask.play();
       
        elair.mask(elair_mask);
        image(elair, width/2, height/2);
      } else {
        elair.stop();
        elair_mask.stop();
   } 
   }
   
   
   void keyPressed(){
      if(key == 'a') {air = 1;}
      if(key == 'w') {water = 1;}
   }
   
   void keyReleased(){
      if(key == 'a') {air = 0;}
      if(key == 'w') {water = 0;}
   }

The movies can found here, here, here and here.


Has anyone an idea what I'm doing wrong or how to fix that problem?