Fun With CORD..

After some tweaking with the string thing.. I have finally made a class out of it.
here is the class, place it in a folder interactingweb or change the package name accordingly where your fla file is present.

package interactingweb
{
import flash.display.Sprite;
import flash.events.MouseEvent;
import flash.events.Event;

public class cord extends Sprite
{
public static const CT_ATTACH:String = "Attach";
public static const CT_FOLLOW:String = "Follow";
public static const CT_REPEL:String = "Repel";
public static const CT_ATTRACT:String = "Attract";
private var gotonodes:Array = new Array();
private var currentnodes:Array = new Array();
private var cordType:String = CT_ATTACH;
private var cordSeg:int = 15;
private var cords:Sprite;
private var x1cor:Number;
private var y1cor:Number;
private var x2cor:Number;
private var y2cor:Number;
private var haschild:Boolean = false;
private var maxDist:Number = 10;
private var lineClr:uint = 0xffffff;
private var circleClr:uint = 0xffffff;
private var drawObj:Boolean = false;

public function cord(type:String, x1CoOr:Number, y1CoOr:Number, x2CoOr:Number, y2CoOr:Number)
{
if(type == CT_ATTACH || type == CT_FOLLOW || type == CT_REPEL || type == CT_ATTRACT)
cordType = type;

if(cordType == CT_FOLLOW)
{
x2cor = x1CoOr;
y2cor = y1CoOr;
x1cor = x2CoOr;
y1cor = y2CoOr;
}
else
{
x1cor = x1CoOr;
y1cor = y1CoOr;
x2cor = x2CoOr;
y2cor = y2CoOr;
}
gotonodes=Interpolate(x1cor,y1cor,x2cor,y2cor,cordSeg);
currentnodes=gotonodes;
}

public function setSegment(seg:int)
{
if(seg>=1)
cordSeg = seg;
gotonodes=Interpolate(x1cor,y1cor,x2cor,y2cor,cordSeg);
currentnodes=gotonodes;
}

public function setType(type:String)
{
var switchType:Boolean = false;
if(cordType == CT_FOLLOW || type == CT_FOLLOW)
switchType = true;
if(type == CT_ATTACH || type == CT_FOLLOW || type == CT_REPEL || type == CT_ATTRACT)
cordType = type;

if(switchType)
{
var tempx:Number = x2cor;
var tempy:Number = y2cor;
x2cor = x1cor;
y2cor = y1cor;
x1cor = tempx;
y1cor = tempy;
}
gotonodes=Interpolate(x1cor,y1cor,x2cor,y2cor,cordSeg);
currentnodes=gotonodes;
}

public function setMaxDist(distance:Number):void
{
if(cordType == CT_ATTACH || cordType == CT_FOLLOW)
{
if(distance >= 0)
maxDist = distance;
}
else
{
if(distance >=1)
maxDist = distance;
}
}

public function setLineClr(color:uint):void
{
lineClr=color;
}

public function setCircleClr(color:uint):void
{
circleClr=color;
}

public function setDrawObj(bool:Boolean):void
{
drawObj=bool;
}

private function Interpolate(x1:Number,y1:Number,x2:Number,y2:Number,n:int):Array
{
var tempx:Number = x2;
var tempy:Number = y2;
var ang = Math.atan2(tempy-y1, tempx-x1);
if(cordType == CT_FOLLOW)
{
tempx = x2 - maxDist*Math.cos(ang);
tempy = y2 - maxDist*Math.sin(ang);
}
else if(cordType == CT_ATTACH)
{
x1 += maxDist*Math.cos(ang);
y1 += maxDist*Math.sin(ang);
}
var dist= Math.sqrt(Math.pow(tempx-x1,2)+Math.pow(tempy-y1,2));
var points = [];
for(var l = -2;l<=dist;l+=dist/n)
{
var x3 =x1+l*Math.cos(ang);
var y3 = y1+l*Math.sin(ang);
points.push({xco:x3,yco:y3});
}
points.push({xco:x1,yco:y1});
if(cordType == CT_FOLLOW)
points.push({xco:x1,yco:y1});
return points;
}

public function DrawNodes():void
{
if(haschild) removeChild(cords);
cords = new Sprite();
addChild(cords);
haschild=true;
cords.graphics.lineStyle(1,lineClr,40);
cords.graphics.moveTo(currentnodes[0].xco,currentnodes[0].yco);
if(cordType == CT_FOLLOW)
{
for(var j = 0; j<currentnodes.length-2;j++)
{
cords.graphics.lineTo(currentnodes[j].xco,currentnodes[j].yco);
}
cords.graphics.beginFill(circleClr,1);
if(drawObj)
cords.graphics.drawCircle(currentnodes[currentnodes.length-3].xco,currentnodes[currentnodes.length-3].yco,5);
}
else
{
for(var i = 0; i<currentnodes.length-1;i++)
{
cords.graphics.lineTo(currentnodes[i].xco,currentnodes[i].yco);
}
cords.graphics.beginFill(circleClr,1);
if(drawObj)
cords.graphics.drawCircle(currentnodes[0].xco,currentnodes[0].yco,5);
}
cords.graphics.endFill();
}

public function updateSeg(xcoordinate:Number,ycoordinate:Number)
{
if(cordType == CT_ATTACH)
{
x1cor = xcoordinate;
y1cor = ycoordinate;
gotonodes=Interpolate(x1cor,y1cor,x2cor,y2cor,cordSeg);
}
else if(cordType == CT_FOLLOW)
{
x2cor = xcoordinate;
y2cor = ycoordinate;
gotonodes=Interpolate(x1cor,y1cor,x2cor,y2cor,cordSeg);
}
else if(cordType == CT_REPEL)
{
var dx:Number = x1cor-xcoordinate;
var dy:Number = y1cor-ycoordinate;
var dist:Number = Math.sqrt(dx*dx+dy*dy);
var dir:Number = Math.atan2(dy, dx);
if(dist<maxDist)
{
var tempx:Number = Math.cos(dir)*(maxDist-dist) + x1cor;
var tempy:Number = Math.sin(dir)*(maxDist-dist) + y1cor;
if (dist > maxDist) dist = maxDist;
gotonodes=Interpolate(tempx,tempy,x2cor,y2cor,cordSeg);
}
else gotonodes=Interpolate(x1cor,y1cor,x2cor,y2cor,cordSeg);
}
else
{
var dx1:Number = x1cor-xcoordinate;
var dy1:Number = y1cor-ycoordinate;
var dist1:Number = Math.sqrt(dx1*dx1+dy1*dy1);
if(dist1<maxDist) gotonodes=Interpolate(xcoordinate,ycoordinate,x2cor,y2cor,cordSeg);
else gotonodes=Interpolate(x1cor,y1cor,x2cor,y2cor,cordSeg);
}
}

public function updateCord()
{
for(var node = 0; node<gotonodes.length-1 || node<currentnodes.length-1;node++)
{
currentnodes[node].xco=currentnodes[node].xco+(gotonodes[node].xco-currentnodes[node].xco)/(node*node/30+1);
currentnodes[node].yco=currentnodes[node].yco+(gotonodes[node].yco-currentnodes[node].yco)/(node*node/30+1);
}
DrawNodes();
}
}
}

In fla file, all you do as below

1. import the package
2. create a cord object (you can also change the cord type later using setCordType)
3. Call DrawNodes method to actually initiate a drawing object
4. two key functions of animation
• updateSeg which will update the segments.
• updateCord which will update the cord itself.
5. Few fields worth noting
   
• Cord type: This can be changed by setCordType method, there are four types namely
• CT_ATTACH
  
• CT_FOLLOW
• CT_REPEL
• CT_ATTRACT
  
• Maximum Distance: This can be changed by setMaxDist method, default value is 10 and for cord types CT_ATTACH and CT_FOLLOW min value is 0 and for other two min value is 1. This is the distance maintained by the cord end.
  
• Draw Object: This can be changed by setDrawObj method, default is false. If enabled will draw a circle of radius 5.
• Cord Segments: This can be changed by setCordSeg method. default is 15 no of segments to break the cord into, more the number higher the precession(don’t go too much, it will be a CPU overhead).
• Line and Circle Color: This can be changed by setLineClr and setCircleClr respectively. default is white(0xffffff). Pass as valid value as there is no check for the correctness of data.

for ex:-

import interactingweb.*;

var temp:cord = new cord(cord.CT_FOLLOW,this.x,this.y,this.x,stage.stageHeight);
temp.setType(cord.CT_ATTACH);
temp.setSegment(25);
temp.setMaxDist(0);

temp.setDrawObj(true);
temp.DrawNodes();
stage.addChild(temp);
stage.addEventListener(Event.ENTER_FRAME, onmove1);
stage.addEventListener(MouseEvent.MOUSE_MOVE, onmove);

function onmove(e:MouseEvent)
{
temp.updateSeg(stage.mouseX,stage.mouseY);
}

function onmove1(e:Event)
{
temp.updateCord();
}

Play around with temp cord object… Have fun.

Elastic String to Mouse pointer Effect

One of my friend has a site www.magicwebmaster.com, I wondered how the effect of string attached to mouse was done. I started googling around and found the template (www.templatemonster.com/flash-templates/10335.html).
Now I have to really learn how this is done, I thought to myself and started googling more. Finally I found what I was looking for in this site (www.lemlinh.com/flash-source-elastic-string). Happiness didn't last long... I was disappointed after download because the code was in AS1.
Finally after a day I was able to convert it into AS3 and to my requirement but later I found there was one final addition of point was needed to make this perfect.
here is the code after everything.

import flash.display.*;
import flash.events.MouseEvent;
import flash.events.Event;

var haschild:Boolean = false;
var gotonodes:Array = new Array();
var currentnodes:Array = new Array();

gotonodes=Interpolate(stage.mouseX,stage.mouseY,275,0,25);
currentnodes=gotonodes;
stage.addEventListener(Event.ENTER_FRAME, onmove1);
stage.addEventListener(MouseEvent.MOUSE_MOVE , onmove);
function onmove(e:MouseEvent){
gotonodes=Interpolate(stage.mouseX,stage.mouseY,275,0,25);
}
function onmove1(e:Event){
for(var node = 0; node<gotonodes.length-1;node++){
currentnodes[node].xco=currentnodes[node].xco+(gotonodes[node].xco-currentnodes[node].xco)/(node*node/30+1);
currentnodes[node].yco=currentnodes[node].yco+(gotonodes[node].yco-currentnodes[node].yco)/(node*node/30+1);
}
DrawNodes(currentnodes);
}

function FindAngle(x1, x2, y1, y2):Number {
return Math.atan2(y2-y1, x2-x1);
};
function Distance(x1,x2,y1,y2):Number{
return Math.sqrt(Math.pow(x2-x1,2)+Math.pow(y2-y1,2));
}
function Interpolate(x1,y1,x2,y2,n):Array{
var dist= Distance(x1,x2,y1,y2);
var ang = FindAngle(x1,x2,y1,y2);
var points = [];
for(var l = 0;l <=dist;l+=dist/n){
var x3 =x1+l*Math.cos(ang);
var y3 = y1+l*Math.sin(ang);
points.push({xco:x3,yco:y3});
}
points.push({xco:x1,yco:y1});
return points;
}
function DrawNodes(array):void{
if(haschild)
{
this.removeChildAt(0);
haschild=false;
}
var shape:Shape = new Shape();
shape.graphics.lineStyle(1,0xFFFFFF,40);
shape.graphics.moveTo(array[0].xco,array[0].yco);
for(var i = 0; i < array.length-1;i++){
shape.graphics.lineTo(array[i].xco,array[i].yco);
}
shape.graphics.beginFill(0xFBFFA4,1);
shape.graphics.drawCircle(array[0].xco,array[0].yco,5);
shape.graphics.endFill();
this.addChild(shape);
haschild=true;
}

Latest addition can be found in the post Fun With CORD..

Flash Writing Animation

For one of my work I had to write one “Animation of writing a sentence”. I googled around for some time and found creating movie clip with each frame consisting of writing couple of character or part of character painted to accomplish the animation.

The problem with this is I have to do lot of work if string has around 600 Character and also file size will be enormous, brighter side is that the motion will be smoother. After brainstorming I finally came up with some code than can accomplish the animation task, but this code works fine with some particular value of sec. As sec value decreases the motion is horrible. People with more knowledge on AS3 (more like guru in AS3) can improve this. Without further delay here is the code. here I’m loading data from a external text field, and after loading I’m assigning this to c=variable string.

var string:String = textloader.data.substr(0,550);
var lengt:int = string.length;
var sec:int = 3;
var interval:Number = lengt/(sec*1);
var nochar:int = lengt/interval;
var intcomp:int = 0;
var incchar:int = nochar;
var timefram:Number = (sec*1000)/interval;
var time:Timer = new Timer(timefram, 1);
time.start();
time.addEventListener(TimerEvent.TIMER_COMPLETE, animate);

function animate(e:TimerEvent):void
{
  intro_txt.text=string.substr(0,incchar);
  incchar += nochar;
  if(intcomp <= interval)
  {
    intcomp++;
    time.start();
  }
}

I hope this works for you. Please feel free to comment if you have any suggestion on improvement. I have not provided the interval parameter while creating time object because I had problems, so i came up with a work around with an if(intcomp <= interval) condition.

JCL - PART I

JCL Stands for Job Control Language. As you all might know JCL has three main Keywords

1. JOB
2. EXEC
3. DD

We will elaborate each in coming parts soon. In this part we'll talk more about JCL.
You can think JCL as equivalent to a bat file in Windows. In JCL you can execute one step after another in sequence of there occurrence. Consider and example below.

//JOBNAME JOB(acct info).....
//STEP20 EXEC .....
//STEP10 EXEC .....

In the above example as you can see the STEP20 runs first and next STEP10, main thing that you can observe here is name its just for our understanding, mainframe follow the occurrence. If you don't know the syntax don't bother now you'll explore later.
At maximum of 255 steps can be executed in a JOB. When you submit your JOB using SUBMIT Command you can see the JOB in SPOOL (to go to spool enter s.st in ISPF main menu)


Still to come here....