Parkland College Web Design

Parkland College > Fine & Applied Arts > Graphic Design | Web Design >
Student Links > GDS 214 > Course Descriptions

GDS 214 WEB DESIGN II
Information Page
Instructor: Rob Higgins

Math in flash - ActionScript for Designers

In the search for quick loading sites, we would be remiss if we didn't cover some scripting. Follow along. I think you'll find it easier than you think.

Open a new file in Flash.

File > New

Turn on the grid.

View > Grid > Show Grid

Use the rectangle tool and draw a box on the stage.

Select the box by double clicking on it and then convert it into a movie symbol named "box." Click on the advanced button and fill in everything just like below:

Delete the movie clip from the stage. From now on we will call it in the first frame with actionscript.

Rename your layer "script" and type in the following code:

xMax = 6;
yMax = 6;
xDist = 30;
yDist = 30;
xCenter = Stage.width/2;
yCenter = Stage.height/2;
for (y=0; y<yMax; y++) {
for (x=0; x<xMax; x++) {
clip = attachMovie("box", "b"+i, i++);
clip._x = (x-(xMax-1)/2)*xDist+xCenter;
clip._y = (y-(yMax-1)/2)*yDist+yCenter;
}
}

Save it and test your movie.

You should see:

The Max values are how many rows and columns.

The Dist values are how much space to but between each row and column.

The xCenter and the yCenter is to find the center of the stage.

the first loop is for the rows and the second loop is for the columns.

Inside the loops, we use attachMovie to attach our movie "box" to the script.

Now we are going to have some fun by adding properties to our box.

add:

clip._rotation = y*10;

before the final 2 curly brackets in the script that you just wrote.

now our code is:

}
}

Our file now looks like:

We can also set the value of "i" if we wish:

clip._rotation = i*10;

our script is now:

}
}

Now look what we have:

Here's what it looks like with the"x" rotated:

}
}

We can do even more...

We can also modify other properties such as the _alpha, _xscale or _yscale.

Look what happens when we add:

clip._alpha = (36-i)*3;
clip._yscale=x*15;
clip._rotation = x*10;

here is the complete script:

}
}

Now, let's add a function. This grid stuff isn't racing my boat yet.

in the existing script before the last two curly brackets we will now add the following code to call our function:

clip.onEnterFrame = move;

and below the curly brackets we will add our function:

function() {

this._rotation +=3;

)

Now we have:

and now the script is:

function() {
this._rotation +=3;

)

Why don't we go back to a simpler version:

function move() {
this._rotation += 20;

}

Here's what this looks like:

Next we will make our shape pulsate by changing the function a little.

In the main script we use:

clip.angle =x*.1+y*.1;

And we change our move() function to:

this._xscale =this._yscale=Math.sin(this.angle +=.1)*50+50;

Now our complete script is:

function move() {
this._xscale =this._yscale=Math.sin(this.angle +=.1)*50+50;

}

and it looks like this:

Now let's fade it. All we need to do is change the move() function to:

this._alpha =Math.sin(this.angle +=.1)*50+50;

Our complete code is now:

function move() {
this._alpha = Math.sin(this.angle +=.1)*50+50;

}

The fading example looks like this:

Adding Interactivity

We'll use the same script we did for the fading example but this time we will fade depending on where your mouse position is.

All we need to do is alter out move() function again to:

var dx =this._x-_xmouse;
var dy =this._y-_ymouse;
var dist = Math.sqrt(dx*dx+dy*dy);
if (dist < 100) {
this._alpha = dist;
} else {
this._alpha = 100;
}

The complete script is now:

function move() {
var dx =this._x-_xmouse;
var dy =this._y-_ymouse;
var dist = Math.sqrt(dx*dx+dy*dy);
if (dist < 100) {
this._alpha = dist;
} else {
this._alpha = 100;
}
}

And here is what it looks like:

Now let's try scale it with our move() function

All we need to change is:

this._xscale = this._yscale=110-dist;
} else {
this._xscale = this._yscale=10;

The complete script is:

Here is where we are so far:

Isn't his getting better?

Now how about making it elastic?

Add "clip.xBase=" and "clip.yBase=" to these two lines in the code:

clip._x = clip.xBase=(x-(xMax-1)/2)*xDist+xCenter;
clip._y = clip.yBase=(y-(yMax-1)/2)*yDist+yCenter;

and change the move function.

Here is the complete script:

xMax = 6;
yMax = 6;
xDist = 30;
yDist = 30;
xCenter = Stage.width/2;
yCenter = Stage.height/2;
for (y=0; y<yMax; y++) {
for (x=0; x<xMax; x++) {
clip = attachMovie("box", "b"+i, i++);
clip._x = clip.xBase=(x-(xMax-1)/2)*xDist+xCenter;
clip._y = clip.yBase=(y-(yMax-1)/2)*yDist+yCenter;
clip.onEnterFrame = move;
}
}

k = .2;
damp = .9;
maxDist = 100;

function move() {
var dx =this._x-_xmouse;
var dy =this._y-_ymouse;
var dist = Math.sqrt(dx*dx+dy*dy);
if (dist < maxDist) {
this.vx += (_xmouse-this._x)*k;
this.vy += (_xmouse-this._y)*k;
}

this.vx += (this.xBase-this._x)*k;
this.vy += (this.yBase-this._y)*k;
this.vx *= damp;
this.vy *= damp;
this._x += this.vx;
this._y += this.vy;
}

Here is the result:

since we got this far, we might as well try more elastic.

xMax = 6;
yMax = 6;
xDist = 30;
yDist = 30;
xCenter = Stage.width/2;
yCenter = Stage.height/2;
for (y=0; y<yMax; y++) {
for (x=0; x<xMax; x++) {
clip = attachMovie("box", "b"+i, i++);
clip._x = clip.xBase=(x-(xMax-1)/2)*xDist+xCenter;
clip._y = clip.yBase=(y-(yMax-1)/2)*yDist+yCenter;
clip.onEnterFrame = move;
}
}

offset=100;
k = .2;
damp = .9;
maxDist = 100;

function move() {
var dx =this._x-_xmouse;
var dy =this._y-_ymouse;
var dist = Math.sqrt(dx*dx+dy*dy);
if (dist < maxDist) {
var angle = Math.atan2(dy, dx);
var tx = _xmouse+Math.cos(angle)*offset;
var ty = _ymouse+Math.sin(angle)*offset;

this.vx += (tx-this._x)*k;
this.vy += (_ty-this._y)*k;
}

this.vx += (this.xBase-this._x)*k;
this.vy += (this.yBase-this._y)*k;
this.vx *= damp;
this.vy *= damp;
this._x += this.vx;
this._y += this.vy;
}

Now what do you think?

Let's try some waves here:

xMax = 6;
yMax = 6;
xDist = 30;
yDist = 30;
xCenter = Stage.width/2;
yCenter = Stage.height/2;
for (y=0; y<yMax; y++) {
for (x=0; x<xMax; x++) {
clip = attachMovie("box", "b"+i, i++);
clip.baseX =(x-(xMax-1)/2)*xDist+xCenter;
clip.baseY =(y-(yMax-1)/2)*yDist+yCenter;
clip.onEnterFrame = move;
clip.angleX = x*.3+y*3;
clip.angleY = x*.15+y*.15;
}
}

function move() {
this._x = this.baseX+Math.sin(this.angleX += .1)*20;
this._y = this.baseY+Math.sin(this.angleY += .15)*20;
}

Here is a link to All Examples on this page for your reference.

I know you are now saying... "So what?" "What can I do with this stuff?"

It's up to you to be creative and use this stuff but just to give you an idea, I created a project for an example.

World Youth Day 2005

In this example, I combined three techniques to create this animation. Here is the code that I used:

xMax = 18;
yMax = 14;
xDist = 70;
yDist = 110;
xCenter = Stage.width/2;
yCenter = Stage.height/2;
for (y=0; y<yMax; y++) {
for (x=0; x<xMax; x++) {
clip = attachMovie("box", "b"+i, i++);
clip.baseX =(x-(xMax-1)/2)*xDist+xCenter;
clip.baseY =(y-(yMax-1)/2)*yDist+yCenter;
clip.onEnterFrame = move;
clip.angleX = x*.3+y*3;
clip.angleY = x*.15+y*.15;
}
}

}

The only other thing I did was change the graphic from the little cube to the picture of the pope.

What do you think? With a little imagination, I know you can do better than I did. Go ahead and see what you can do.

Fla Files:

______________________________

Last updated: 8/26/03• Webmaster: Paul Young

Tips, Tricks
& Handouts

Student
Links