| Blend modes are yet another feature new to Flash Player 8. Blend modes are applied at runtime using native player-level functionality. Blend modes enable you to instruct Flash Player to mathematically combine the pixels of a movie clip with the pixels of what is beneath it. For example, if you use the lighten mode, Flash will compare each pixel of a movie clip with the pixels that are beneath it. It will then select the pixel color value that is lightest, and it will use that value in the movie clip to which the blend mode is applied. Or, if you apply the add blend mode, Flash Player adds the pixel color values and uses that value for the corresponding pixel in the movie clip to which the blend mode is applied. Blend modes enable effects where movie clips appear to merge with what is underneath it. You can programmatically manage blend modes for movie clips using the blendMode property. The default value for the blendMode property is the string normal. Common blendMode values are as follows: multiply, screen, lighten, darken, difference, add, subtract, invert, overlay, hardlight. The Flash Help describes each blend mode in detail. You can refer to that documentation for detailed descriptions. In this next task, you'll build an application that has a hidden message. The user can read the message by clicking a sequence of movie clips. Each of the movie clips, as well as the message, has blend modes applied to them to make interesting effects. 1. | Open message1.fla from the Lesson09/Start directory.
The message1.fla Flash document has all the assets necessary to complete the task. On the main Timeline you'll see there are four layers: Actions, Click Areas, Message, and Background. On the Click Areas layer there are four movie clips with instance names of clickArea1Clip, clickArea2Clip, clickArea3Clip, and clickArea4Clip. Those movie clips will function as the clickable regions that are necessary to display the message.
On the Message layer is a movie clip with an instance name of messageClip. Within messageClip is a text field called messageField. The text field will display the message after the clickable regions are clicked in order. The text field is placed within a movie clip so that a blend mode can be applied to the text by way of the parent movie clip.
| 2. | Select the keyframe on the Actions layer, and open the Actions panel by pressing F9. Add the following code to the script pane to make the clickable regions invisible to start:
clickArea1Clip._visible = false; clickArea2Clip._visible = false; clickArea3Clip._visible = false; clickArea4Clip._visible = false;
To start each of the clickable regions needs to be invisible. After the message text has loaded from a text file, the first clickable region is made visible, and then each of the remaining regions is made visible in sequence as each is clicked.
| 3. | Assign blend modes to each of the clickable regions using the following code:
clickArea1Clip.blendMode = "overlay"; clickArea2Clip.blendMode = "multiply"; clickArea3Clip.blendMode = "hardlight"; clickArea4Clip.blendMode = "difference";
Each of the clickable regions has a different blend mode in this example.
| 4. | Make the message movie clip invisible and assign a blend mode to it as well using the following code:
messageClip._visible = false; messageClip.blendMode = "difference";
The message movie clip also remains invisible until the clickable regions have been clicked in sequence. After the message movie clip is made visible, it ought to have a blend mode applied so that it combines with the background.
| 5. | Assign button event handler methods to the clickable regions with the following code:
clickArea1Clip.onPress = function():Void { this._visible = false; clickArea2Clip._visible = true; }; clickArea2Clip.onPress = function():Void { this._visible = false; clickArea3Clip._visible = true; }; clickArea3Clip.onPress = function():Void { this._visible = false; clickArea4Clip._visible = true; }; clickArea4Clip.onPress = function():Void { this._visible = false; messageClip._visible = true; };
The preceding code is not nearly as difficult as it might look at first. Each of the onPress() event handler methods are very similar. Each makes the clickable region invisible after it is clicked, and it makes the next movie clip in the sequence visible. After clickArea4Clip is clicked, it causes the message movie clip to display.
| 6. | Use a LoadVars object to load the message from message.txt (also located in Lesson09/Assets) with the following code:
var messageLv:LoadVars = new LoadVars(); messageLv.onData = function(messageText:String):Void { messageClip.messageField.text = messageText; clickArea1Clip._visible = true; }; messageLv.load("message.txt");
The LoadVars object loads the text from message.txt. After the text loads the onData() method is called and passed a parameter with the context of the file. Assign the text to the messageField text field. When the text has loaded into the player, it's okay to make the first clickable region visible.
| 7. | Test the movie.
When you test the movie, the first clickable region will display within a second or so depending on how much text is in the text file and whether you're loading the content locally or over the Internet. After the clickable region has appeared, click each region as prompted. After the fourth region, the message will display.
 |
|
