Beginning ActionScript 2.0 2006

Appendix A

navShadow.quality = 3; navShadow.strength = 1;

var nav:MovieClip = this.createEmptyMovieClip (“navigation”, 0); nav._y = 20;

nav._x = 20;

nav.filters = [navShadow]; buttonNum = 5;

for (var i = 0; i < buttonNum; i++) {

var buttonInstance:MovieClip = this.nav.attachMovie (“Button”, “Button” + i,

i);

buttonInstance.blur = new BlurFilter (1, 1, 3); buttonInstance.filters = [buttonInstance.blur]; buttonInstance._xscale = buttonInstance._yscale = 85; buttonInstance._y = i * 35;

buttonInstance.label = “Button “ + (i + 1)+” “; buttonInstance.checkMouse = function () {

var distx = (Math.abs ((this._parent._xmouse - this._width / 2) - this._x));

var disty = (Math.abs ((this._parent._ymouse - this._height / 2) - this._y));

var dist = (distx + disty) / 2; if (dist < 35) {

this.blurChange(dist); } else{

this.blurChange(35);

}

};

buttonInstance.blurChange = function (dist) { this.blur.blurX = (dist / 21) * .7; this.blur.blurY = (dist / 21) * .7; this.filters = [this.blur];

this._xscale = this._yscale = 115 - dist;

};

}

nav.onMouseMove = function () {

for (var i = 0; i < buttonNum; i++) { this[“Button” + i].checkMouse ();

}

};

Exercise 3 Solution

Place an image in a movie clip named picHolder. Place the following ActionScript on frame 1 of root:

import flash.geom.*; import flash.display.*; import flash.filters.*;

function addBubble(handle, x,y, pSize) { var id = handle.getNextHighestDepth();

var bubble:MovieClip = handle.createEmptyMovieClip(“bubble”+id, id); bubble.pSize = pSize;

var fill = “radial”;

var colors = [0xFF0000, 0x000000]; var alphas = [100, 100];

728

Exercise Answers

var ratios = [0, 200]; var spreadMethod = “pad”;

var interpolationMethod = “RGB”; var Ratio = 0;

var matrix = new Matrix(); matrix.createGradientBox(pSize, pSize, 0, 0, 0);

bubble.beginGradientFill(fill, colors, alphas, ratios, matrix, spreadMethod, interpolationMethod, Ratio);

bubble.moveTo(0, 0); bubble.lineTo(0, pSize); bubble.lineTo(pSize, pSize); bubble.lineTo(pSize, 0); bubble.lineTo(0, 0); bubble.endFill();

bubble._x = x; bubble._y = y; return bubble;

}

picHolder.opaqueBackground = 0xFFFFFF;

displacementCanvas = this.createEmptyMovieClip(“clip1”, this.getNextHighestDepth());

displacementCanvas._visible = false; displacementCanvas.beginFill(0x000000,100); displacementCanvas.moveTo(0,0); displacementCanvas.lineTo(0,picHolder._height); displacementCanvas.lineTo(picHolder._width,picHolder._height); displacementCanvas.lineTo(picHolder._width,0); displacementCanvas.lineTo(0,0);

displacementCanvas.endFill();

var s = addBubble(displacementCanvas, 75,0,450);

var sourceDisplacement:BitmapData = new BitmapData(picHolder._width+1, picHolder._height+1, false, 0xFFFFFF);

var mapPoint:Point = new Point(0, 0); var componentX:Number = 1;

var componentY:Number = 1; var scaleX:Number = 200; var scaleY:Number = 200; var mode:String = “color”; var color:Number = 0x000000;

sourceDisplacement.draw(displacementCanvas);

var filter:DisplacementMapFilter = new DisplacementMapFilter(sourceDisplacement, mapPoint, componentX, componentY, scaleX, scaleY, mode, color, alpha); picHolder.filters = [filter];

Exercise 4 Solution

import flash.display.*; this.attachMovie (“map”, “map”, 0); map._x = 2000;

var test:BitmapData = new BitmapData (map._width, map._height, false, 0); test.draw (map);

this.attachBitmap (test, 0); drawPin = true;

729

Appendix A

minutia = 1;

for (var i = 0; i < test.width; i += minutia) {

for (var j = 0; j < test.height; j += minutia) { var px = test.getPixel(i,j);

if (px == 16711680 && drawPin == true) { var id = _root.getNextHighestDepth ();

var pin:MovieClip = _root.attachMovie (“pin”, “pin” + id, id); pin._x = i;

pin._y = j; drawPin = false;

test.floodFill(i,j,16711681);

if(i < pin._width || j <ping._height){ pin._rotation = 180;

}

}

if(px != 16711681){ drawPin = true;

}

}

}

Chapter 15

Exercise 1 Solution

import flash.display.*; this.attachMovie (“map”, “map”, 0); map._x = 2000;

var test:BitmapData = new BitmapData (map._width, map._height, false, 0); test.draw (map);

this.attachBitmap (test, 0); drawPin = true;

minutia = 1;

for (var i = 0; i < test.width; i += minutia) {

for (var j = 0; j < test.height; j += minutia) { var px = test.getPixel(i,j);

if (px == 16711680 && drawPin == true) { var id = _root.getNextHighestDepth ();

var pin:MovieClip = _root.attachMovie (“pin”, “pin” + id, id); pin._x = i;

pin._y = j; drawPin = false;

test.floodFill(i,j,16711681);

if(i < pin._width || j <ping._height){ pin._rotation = 180;

}

}

if(px != 16711681){ drawPin = true;

}

}

}

730

Exercise Answers

Exercise 2 Solution

import flash.display.*;

var myBitmap:BitmapData = new BitmapData(Stage.width, Stage.height, false, 0); myBitmap.perlinNoise(100, 100, 6, 2, false, true, 2, false, null); this.attachBitmap(myBitmap, 0);

for(var i =0; i< myBitmap.height;i+=10){ for(var n =0;n<myBitmap.width;n++){

var pixel = myBitmap.getPixel(n,i);

if(pixel >=50000){

var mcID = this.getNextHighestDepth();

var mc = this.attachMovie(“myMC”,”myMC”+mcID,mcID); mc._x = n;

mc._y = i;

}

}

}

Chapter 16

Exercise 1 Solution

Before trying the code, create a movie clip in the library containing the content to be animated. Give this movie clip a linkage ID of cursorSymbol.

var easingFactor:Number = 10;

this.createEmptyMovieClip(“animationHolder”, this.getNextHighestDepth()); animationHolder.attachMovie(“cursorSymbol”, “cursorSymbol”, animationHolder.getNextHighestDepth());

animationHolder.onEnterFrame = function()

{

this.cursorSymbol._x += (_xmouse - this.cursorSymbol._x) / easingFactor; this.cursorSymbol._y += (_ymouse - this.cursorSymbol._y) / easingFactor;

}

There is an alternate solution shown in the downloadable code that shows a pair of eyes that follows the cursor, and whose pupils move so that they appear to be looking at the cursor at all times.

Exercise 2 Solution

var easingFactor1:Number = 5; var easingFactor2:Number = 10; var easingFactor3:Number = 15;

this.createEmptyMovieClip(“animationHolder”, this.getNextHighestDepth());

animationHolder.attachMovie(“cursorSymbol”, “cursorSymbol1”, ; animationHolder.getNextHighestDepth());

animationHolder.attachMovie(“cursorSymbol”, “cursorSymbol2”, ; animationHolder.getNextHighestDepth());

animationHolder.attachMovie(“cursorSymbol”, “cursorSymbol3”, ;

731

Appendix A

animationHolder.getNextHighestDepth());

var intervalID:Number = setInterval(animateClips, 20);

function animateClips():Void

{

animationHolder.cursorSymbol1._x += (_xmouse - ; animationHolder.cursorSymbol1._x) / easingFactor1;

animationHolder.cursorSymbol1._y += (_ymouse - ; animationHolder.cursorSymbol1._y) / easingFactor1;

animationHolder.cursorSymbol2._x += (_xmouse - ; animationHolder.cursorSymbol2._x) / easingFactor2;

animationHolder.cursorSymbol2._y += (_ymouse - ; animationHolder.cursorSymbol2._y) / easingFactor2;

animationHolder.cursorSymbol3._x += (_xmouse - ; animationHolder.cursorSymbol3._x) / easingFactor3;

animationHolder.cursorSymbol3._y += (_ymouse - ; animationHolder.cursorSymbol3._y) / easingFactor3;

updateAfterEvent();

}

Exercise 3 Solution

this.createEmptyMovieClip(“holderClip”, this.getNextHighestDepth()); holderClip.maxFlakes = 50;

holderClip.dropSpeed = 5;

var thisFlake:MovieClip;

for (var i:Number = 0; i < holderClip.maxFlakes; i++)

{

holderClip.attachMovie(“snowFlake”, “snowFlake” + i, ; holderClip.getNextHighestDepth());

thisFlake = holderClip[“snowFlake” + i]; thisFlake._x = randomRange(0, Stage.width); thisFlake._y = randomRange(0, Stage.height);

thisFlake._xscale = thisFlake._yscale = randomRange(50, 150); thisFlake._alpha = thisFlake._xscale - 50; thisFlake.cacheAsBitmap = true;

thisFlake.oscillationSeed = randomRange(0, 200); thisFlake.rotationRate = randomRange(-7, 7);

}

holderClip.onEnterFrame = function()

{

var thisFlake:MovieClip;

for (var i:Number = 0; i < this.maxFlakes; i++)

{

thisFlake = this[“snowFlake” + i];

thisFlake._y += thisFlake._xscale * (this.dropSpeed / 100);

thisFlake._x += Math.sin((thisFlake._y + thisFlake.oscillationSeed) / 50);

732

Exercise Answers

thisFlake._rotation += thisFlake.rotationRate;

if (thisFlake._y >= Stage.height)

{

thisFlake._x = randomRange(0, Stage.width); thisFlake._y = 0;

}

}

}

function randomRange(min:Number, max:Number)

{

return Math.random() * (max - min) + min;

}

Exercise 4 Solution

var ACCELERATION_RATE:Number = 1.5;

var FRICTION:Number = 0.8; // 1 = no friction, 0 = sticks to floor

this.createEmptyMovieClip(“animationHolder”, this.getNextHighestDepth()); animationHolder.attachMovie(“ball”, “ball”, animationHolder.getNextHighestDepth()); animationHolder.ball._x = 100;

animationHolder.ball._y = 100; animationHolder.ball.verticalSpeed = 0;

var intervalID:Number = setInterval(animateBall, 20);

function animateBall():Void

{

animationHolder.ball.verticalSpeed += ACCELERATION_RATE; animationHolder.ball._y += animationHolder.ball.verticalSpeed; if (animationHolder.ball._y >= Stage.height)

{

//Switch the direction of the ball. animationHolder.ball._y = Stage.height;

//Switch direction of travel, and bleed off some of the speed animationHolder.ball.verticalSpeed = ;

-animationHolder.ball.verticalSpeed * FRICTION; if (animationHolder.ball.verticalSpeed < 1 && ;

animationHolder.ball.verticalSpeed > -1)

{

// Stop the animation when the bounces get really small clearInterval(intervalID);

}

}

updateAfterEvent();

}

733

Appendix A

Chapter 17

Exercise 1 Solution

import mx.transitions.Tween; import mx.transitions.easing.*;

this.createEmptyMovieClip(“curveClip”, this.getNextHighestDepth());

var direction:Number = -1;

var sidePushAmount:Number = 50; var startWidth:Number = 125; var endWidth:Number = 400;

var startHeight:Number = 200; var endHeight:Number = 320; var startX:Number = 20;

var endX:Number = 75; var startY:Number = 20; var endY:Number = 40;

var startAlpha:Number = 30; var endAlpha:Number = 100;

var backgroundColor:Number = 0x990000; var tweenDuration:Number = 2;

var sidePushTween:Tween = new Tween(null, “”, Elastic.easeOut, ; sidePushAmount, 0, tweenDuration, true);

var widthTween:Tween = new Tween(null, “”, Elastic.easeOut, ; startWidth, endWidth, tweenDuration, true);

var heightTween:Tween = new Tween(null, “”, Elastic.easeOut, ; startHeight, endHeight, tweenDuration, true);

var xTween:Tween = new Tween(null, “”, Elastic.easeOut, ; startX, endX, tweenDuration, true);

var yTween:Tween = new Tween(null, “”, Elastic.easeOut, ; startY, endY, tweenDuration, true);

var alphaTween = new Tween(null, “”, Elastic.easeOut, ; startAlpha, endAlpha, tweenDuration, true);

sidePushTween.onMotionChanged = function()

{

drawBox(xTween.position, yTween.position, widthTween.position, ; heightTween.position, this.position * direction, backgroundColor, ; alphaTween.position);

}

sidePushTween.onMotionFinished = function()

{

direction *= -1; this.rewind(); this.start(); widthTween.yoyo(); heightTween.yoyo(); xTween.yoyo(); yTween.yoyo(); alphaTween.yoyo();

734

Exercise Answers

}

function drawBox(x:Number, y:Number, width:Number, height:Number, ; sidePush:Number, backgroundColor:Number, backgroundAlpha:Number):Void

{

curveClip.clear(); curveClip.lineStyle(1, 0x000000);

curveClip.beginFill(backgroundColor, backgroundAlpha); curveClip.moveTo(x, y);

curveClip.curveTo(x+sidePush, y+height/2, x, y+height); curveClip.curveTo(x+width/2, y+height-sidePush, x+width, y+height); curveClip.curveTo(x+width-sidePush, y+height/2, x+width, y); curveClip.curveTo(x+width/2, y+sidePush, x, y); curveClip.endFill();

}

Exercise 2 Solution

The following code assumes that there is a Button component on the stage with instance ID of toggle Button.

import mx.transitions.Tween; import mx.transitions.easing.*;

this.createEmptyMovieClip(“curveClip”, this.getNextHighestDepth());

var direction:Number = -1;

var sidePushAmount:Number = 50; var startWidth:Number = 125; var endWidth:Number = 400;

var startHeight:Number = 200; var endHeight:Number = 320; var startX:Number = 20;

var endX:Number = 75; var startY:Number = 20; var endY:Number = 40;

var startAlpha:Number = 30; var endAlpha:Number = 100;

var backgroundColor:Number = 0x990000; var tweenDuration:Number = 2;

var sidePushTween:Tween = new Tween(null, “”, Elastic.easeOut, ; sidePushAmount, 0, tweenDuration, true);

var widthTween:Tween = new Tween(null, “”, Elastic.easeOut, ; startWidth, endWidth, tweenDuration, true);

var heightTween:Tween = new Tween(null, “”, Elastic.easeOut, ; startHeight, endHeight, tweenDuration, true);

var xTween:Tween = new Tween(null, “”, Elastic.easeOut, ; startX, endX, tweenDuration, true);

var yTween:Tween = new Tween(null, “”, Elastic.easeOut, ; startY, endY, tweenDuration, true);

var alphaTween = new Tween(null, “”, Elastic.easeOut, ;

735

Appendix A

startAlpha, endAlpha, tweenDuration, true);

sidePushTween.onMotionChanged = function()

{

drawBox(xTween.position, yTween.position, widthTween.position, ; heightTween.position, this.position * direction, backgroundColor, ; alphaTween.position);

}

function drawBox(x:Number, y:Number, width:Number, height:Number, ; sidePush:Number, backgroundColor:Number, backgroundAlpha:Number):Void

{

curveClip.clear(); curveClip.lineStyle(1, 0x000000);

curveClip.beginFill(backgroundColor, backgroundAlpha); curveClip.moveTo(x, y);

curveClip.curveTo(x+sidePush, y+height/2, x, y+height); curveClip.curveTo(x+width/2, y+height-sidePush, x+width, y+height); curveClip.curveTo(x+width-sidePush, y+height/2, x+width, y); curveClip.curveTo(x+width/2, y+sidePush, x, y);

curveClip.endFill();

}

var buttonListener:Object = new Object() buttonListener.click = function()

{

if (sidePushTween.time == sidePushTween.duration)

{

direction *= -1; sidePushTween.rewind(); sidePushTween.start(); widthTween.yoyo(); heightTween.yoyo(); xTween.yoyo(); yTween.yoyo(); alphaTween.yoyo();

}

}

toggleButton.addEventListener(“click”, buttonListener);

Chapter 18

Exercise 1 Solution

loadImage = function (args) { args = args.split(“,”);

field[args[0]].loadMovie(args[1]);

};

var field = this.createTextField(“field1”, 1, 20, 20, 300, 0); field.autoSize = true;

field.html = true;

field.htmlText = “<p>This is some text with an image tag.<img id=’imageTag1’ ;

736

Exercise Answers

src=’imgTag.swf’ width=’100’ height=’100’/> Press <a ; href=’asfunction:loadImage,imageTag1,image.jpg’><u>this link</u></a> to ; control some action script within it.</p>”;

Exercise 2 Solution

CSS: p {

color: #000000;

font-family: Arial,Helvetica,sans-serif; font-size: 12px;

}

a:link {

color: #FF0000; text-decoration: underline;

}

a:hover{

color: #CCCCCC; text-decoration: underline;

}

CODE:

loadImage = function (args) { args = args.split(“,”);

field[args[0]].loadMovie(args[1]);

};

var field = this.createTextField(“field1”, 1, 20, 20, 300, 0); field.autoSize = true;

field.html = true;

var myStyles:TextField.StyleSheet = new TextField.StyleSheet(); myStyles.onLoad = function(success:Boolean):Void {

if (success) {

field.styleSheet = myStyles;

}

trace(“ok”);

field.htmlText = “<p>This is some text with an image tag.<img id=’imageTag1’ ; src=’imgTag.swf’ width=’100’ height=’100’/> Press <a ; href=’asfunction:loadImage,imageTag1,image.jpg’><u>this link</u></a> to ;

control some action script within it.</p>”; };

myStyles.load(“styles.css”);

Exercise 3 Solution

CSS: p {

color: #000000;

font-family: Arial,Helvetica,sans-serif; font-size: 12px;

}

a:link {

737