Flash CS3 Documentation

Learning ActionScript 2.0 in Adobe Flash > Animation, Filters, and Drawings > About blending modes > Applying blending modes

Applying blending modes

The following procedure loads a dynamic image and lets you apply different blend modes to the image by selecting a blending mode from a combo box on the Stage.

To apply different blending modes to an image:

1. Create a new Flash document and save it as blendmodes.fla.
2. Drag a ComboBox component instance onto the Stage and give it an instance name of blendMode_cb.
3. Add the following ActionScript to Frame 1 of the Timeline:

   var blendMode_dp:Array = new Array();
   blendMode_dp.push({data:"add", label:"add"});
   blendMode_dp.push({data:"alpha", label:"alpha"});
   blendMode_dp.push({data:"darken", label:"darken"});
   blendMode_dp.push({data:"difference", label:"difference"});
   blendMode_dp.push({data:"erase", label:"erase"});
   blendMode_dp.push({data:"hardlight", label:"hardlight"});
   blendMode_dp.push({data:"invert", label:"invert"});
   blendMode_dp.push({data:"layer", label:"layer"});
   blendMode_dp.push({data:"lighten", label:"lighten"});
   blendMode_dp.push({data:"multiply", label:"multiply"});
   blendMode_dp.push({data:"normal", label:"normal"});
   blendMode_dp.push({data:"overlay", label:"overlay"});
   blendMode_dp.push({data:"screen", label:"screen"});
   blendMode_dp.push({data:"subtract", label:"subtract"});
   blendMode_cb.dataProvider = blendMode_dp;
   
   var mclListener:Object = new Object();
   mclListener.onLoadInit = function(target_mc:MovieClip) {
       var blendModeClip:MovieClip = target_mc.createEmptyMovieClip("blendModeType_mc", 20);
       with (blendModeClip) {
           beginFill(0x999999);
           moveTo(0, 0);
           lineTo(target_mc._width / 2, 0);
           lineTo(target_mc._width / 2, target_mc._height);
           lineTo(0, target_mc._height);
           lineTo(0, 0);
           endFill();
       }
       target_mc._x = (Stage.width - target_mc._width) / 2;
       target_mc._y = (Stage.height - target_mc._height) / 2;
       blendModeClip.blendMode = blendMode_cb.value;
   };
   this.createEmptyMovieClip("img_mc", 10);
   var img_mcl:MovieClipLoader = new MovieClipLoader();
   img_mcl.addListener(mclListener);
   img_mcl.loadClip("http://www.helpexamples.com/flash/images/image1.jpg", img_mc);
   
   function cbListener(eventObj:Object):Void {
       img_mc.blendModeType_mc.blendMode = eventObj.target.value;
   }
   blendMode_cb.addEventListener("change", cbListener);
   

   This ActionScript code populates the combo box with each type of blending mode, so the user can view each effect on the dynamically loaded image. A listener object is created, which is used with a MovieClipLoader instance. The listener object defines a single event listener, onLoadInit, which is invoked when the image is completely downloaded and is initialized by Flash. The event listener creates a new movie clip named blendModeType_mc, and uses the Drawing API to draw a rectangular shape over the left half of the image. The currently selected blending mode for the ComboBox instance is then applied to the blendModeType_mc movie clip.

   The rest of the code sets up the MovieClipLoader instance, which is responsible for loading the specified image into a movie clip on the Stage. Finally, a listener is defined for the blendMode_cb ComboBox instance, which applies the selected blending mode whenever a new item is selected from the ComboBox instance.

4. Select Control > Test Movie to test the document.

Flash CS3