Converting AS2.0 to HTML5 and Javascript?

programming web dev
1

So I am rather new to HTML5 and Javascript, specifically in the field of doing animation and drawing. I’ve heard so many things about how the two are a much better solution to Flash.

Unfortunately, I grew up with Flash and I used it a lot back in my high school days and became rather familiar with it. Specifically the ActionScript 2.0 side.

I recently went back Flash/AS2.0 to create a landing page for a website I’ve been working on and I was able to make this.


There is no motion tween, all of it was done through code.

What I am looking for right now is a way to recreate this exactly or very similar, into HTML5 and Javascript.

Does anyone have an idea or can point me in the right direction or some tutorial where I can re-create this in JS/HTML5?

I will eventually want to have a crack with it in AS3.0 as well, but I wanna accomplish this first.

Here is my code:
Apologies for the lack of proper commenting. I have included the .FLA file for you all to take a look.
Frame 1 actions


stop();

_root.referenceX = Math.ceil(Stage.width*0.23828); //305
_root.referenceY = Math.ceil(Stage.height*0.46527); //335

rewind.onRelease = function() {
	nextFrame();
};

// ignore randCol2 completely
MovieClip.prototype.stepMove = function(x, y, randCol1, randCol2, finalCol) {
	finalX = x;
	finalY = y;
	speed = 6;
	
	var colorful = new Color(this);
	colorful.setRGB(randCol1);
	
	this._x += (finalX - this._x) / speed;
	if (stepping != 4) {
		this._alpha+=0.4;
	}
	if (Math.ceil(this._x) == finalX) {
		colorful.setRGB(finalCol);
		this._x += finalX - this._x;
		this._y += (finalY - this._y) / speed;
		if (Math.ceil(this._y) == finalY) {
			//colorful.setRGB(finalCol);
			this._y += finalY - this._y;
			this.stepping++;
		}
	}
}

// ignore randCol2 completely
MovieClip.prototype.move = function(x, y, randCol1, randCol2, finalCol) {
	halfXPos = Math.ceil((this.startXPos + x) / 2);
	halfYPos = Math.ceil((this.startYPos + y) / 2);
	
	firstQuarterXPos = Math.ceil((this.startXPos + halfXPos) / 2);
	firstQuarterYPos = Math.ceil((this.startYPos + halfYPos) / 2);
	
	secondQuarterXPos = Math.ceil((halfXPos + x) / 2);
	secondQuarterYPos = Math.ceil((halfYPos + y) / 2);
		
	if (this.stepping == 0) {
		this.stepMove(firstQuarterXPos, firstQuarterYPos, randCol1, randCol2, finalCol);
	}
	if (this.stepping == 1) {
		this.stepMove(halfXPos, halfYPos, randCol1, randCol2, finalCol);
	}
	if (this.stepping == 2) {
		this.stepMove(secondQuarterXPos, secondQuarterYPos, randCol1, randCol2, finalCol);
	}
	if (this.stepping == 3) {
		this.stepMove(x, y, randCol1, randCol2, finalCol);
	}
	if (this.stepping == 4) {
		this._alpha-=0.3;
		if (this._alpha < 50) {
			
			this._alpha = 90;
		}
	}
}

Code on top of a MovieClip that is a 10x10 pixel square. There are MANY of these. Each block of the letter is a movieclip with specified values passed into the move() method.


onClipEvent(load) {
	this._x = random(Stage.width);
	this._y = random(Stage.height);
	
	this.startXPos = this._x;
	this.startYPos = this._y;
	this._alpha = 0;
	this.stepping = 0;
	
	this.randomColor1 = Math.random() * 0xFFFFFF;
	this.randomColor2 = Math.random() * 0xFFFFFF;
	this.finalColor = 0xFF0000;
}

onClipEvent(enterFrame) {
	move(_root.referenceX, _root.referenceY+30, randomColor1, randomColor2, finalColor);
}

I will try my best to explain.

So basically I have 10x10 pixel blocks that are randomly placed in a random location on the stage. I have created two prototype functions that handle the movement from their initial random location to their final location. Many of these blocks put together in different locations spell out the word I want, etc.

The blocks can only move in one-axis at a time, and each time they swap axis movement, i change the color of the block. At the last y-axis movement, the block changes into the final color it should be.

Each movement has easing as you can see.

How would I go about creating this in JS/HTML5?