ProfessionalHTML5: 2014

Sunday, June 1, 2014

Color change using percentage

//Script following below

<style>

#colorContainer{

width:100%;

height:auto;

}

.colors{

float:left;

width:50px;

height:50px;

position:relative;

font-size:20px;

text-align:center;

line-height:50px;

}

</style>

var percent = 0;

var intervalId;

function init(){

intervalId = setInterval(doAnim, 100);

}

function doAnim(){

$("#colorContainer").append("<div class=colors style=background:"+getRedToGreen((percent+=2), 0)+";color:"+getRedToGreen((percent), 255)+">

"+percent+"%</div>

");

if(percent>=100){

clearInterval(intervalId);

}

function getRedToGreen(percent,val){

r = percent<50 ? 255 : Math.floor(255-(percent*2-100)*255/100);

g = percent>50 ? 255 : Math.floor((percent*2)*255/100);

b = "0";

if(!val){

return 'rgb('+r+','+g+','+b+')';

}else{

return 'rgb('+(val-r)+','+(val-g)+','+b+')';

}

</script>

</head>

</div>

</body>

Friday, May 16, 2014

Mouse tail in as3.0

var tailLength:uint = 10;
var spacing = 25;
var speed = 3;
var mc:MovieClip;
var clips:Array = [];
for (var i:uint = 0; i<tailLength; i++)
{
mc= new Ball();

mc.id = i;
clips.push(mc);

addChild(clips[i]);
if (i>0){
clips[i].addEventListener(Event.ENTER_FRAME, MoveOtherBalls);
}
else
{
clips[i].addEventListener(Event.ENTER_FRAME, MoveFirstBall);
}
}
function MoveFirstBall(e:Event)
{
var clip:MovieClip = MovieClip(e.currentTarget);
clip.x += (this.mouseX-clip.lastX)/speed;
clip.y += (this.mouseY-clip.lastY)/speed;
clip.lastX = clip.x;
clip.lastY = clip.y;
}
function MoveOtherBalls(e:Event)
{
var clip:MovieClip = MovieClip(e.currentTarget);
clip.x += ((clips[clip.id -1].x-clip.lastX)/speed);
clip.y += ((clips[clip.id -1].y-clip.lastY)/speed)+8;
clip.lastX = clip.x;
clip.lastY = clip.y;
}

The above programe is developed in flash as3.0.

How to run above programe in flash.?

Follow below simple 10steps.

1). First draw a shape and convert into movieclip by pressing F8 key.

2). Choose movieclip in dropdown.

3). Make sure the Registration point in middle.

4). And tick mark "Export for actionscript".

5). In class field enter "Ball" then click ok.

6). Then delete the ball from stage. This object will be there in library. So don't worry about to delete from stage.

7). Then click first frame in the timeline and press F9 key to open actionscript pannel.

8). And copy above programe and paste it.

9). To run press Ctrl+Enter.

10). Move mouse, the 10 ball are move like a tail by, one by one.

Enjoy it :)

Vickybees

Sunday, April 27, 2014

Find distance between two points using trigonometry

Distance Formula (Pythagorean theorem)

distance = Sqrt((x2-x1)^2+(y2-y1)^2)

Thursday, April 24, 2014

Move the ball with a specified angle

Move Ball With Specified Angle

//Script following below

<style>

#mainContainer{

margin:0px auto;

border:#F00 1px solid;

width:500px;

height:400px;

}

</style>

</head>

</canvas>

</div>

var ang = 45;

var speed = 10;

var rad = ang*Math.PI/180;

var xInc = Math.cos(rad);

var yInc = Math.sin(rad);

var ctx;

var currentPosX = 50;

var currentPosY = 50;

function init(){

var c=document.getElementById("gameCanvas");

ctx = c.getContext("2d");

setInterval(startAnim,50);

}

function startAnim(){

currentPosX += xInc*speed;

currentPosY += yInc*speed;

if(currentPosX>480||currentPosX<20){

xInc *=-1;

}

if(currentPosY>380||currentPosY<20){

yInc *=-1;

}

ctx.clearRect(0,0,500,400);

ctx.beginPath();

ctx.arc(currentPosX, currentPosY, 20, 0, 2 * Math.PI, false);

ctx.fillStyle = 'green';

ctx.fill();

}

</script>

</body>

Sunday, April 20, 2014

EASY WAY TO FIND ANGLE BETWEEN TWO POINTS

Scripts are following below
//Get angle in radian.

//For convert radian to degree.
//Theta*180/PI

//For convert degree to radian.
//Theta*PI/180

alert(getAngle())//In Radian
alert(getAngle()*180/Math.PI)//In Degree

function getAngle(x1, y1, x2, y2){
var dx = x2 - x1;
var dy = y2 - y1;
return Math.atan2(dy,dx);
}

Sunday, June 1, 2014

Color change using percentage

Color change using percentage

Friday, May 16, 2014

Mouse tail in flash as3.0

Mouse tail in as3.0

Sunday, April 27, 2014

Find distance between two points using trigonometry

Distance Formula (Pythagorean theorem)

Thursday, April 24, 2014

Move the ball with a specified angle

Sunday, April 20, 2014