A Flash Developer Resource Site

Results 1 to 8 of 8

Thread: [F8] How to..(pixelbreaker-polarclock)

  1. #1
    Moderator whispers's Avatar
    Join Date
    Mar 2001
    Location
    CFA2h (respect the HEX)
    Posts
    12,755

    [F8] How to..(pixelbreaker-polarclock)

    http://blog.pixelbreaker.com/polarclock/

    Im curious as to how they or how one would approach making (not the clock portion).. but just an AS animation that makes the 'rings/circles' that can be animated in a clockwise/counter-clockwise fashion as on this screen saver (clock)

    I have seen an animation class that sorted did this..

    but I dont think you could control line thickness, color...etc..

    open for discussion, links..etc..etc. show me what ya got.

    thanks

  2. #2
    Moderator whispers's Avatar
    Join Date
    Mar 2001
    Location
    CFA2h (respect the HEX)
    Posts
    12,755
    bump ( pixelbreaker polar clock )

    someone as to have a to on how to even begin to make an CIRCLE like 'stroke' with AS?

    Is the math that intense??

  3. #3
    :
    Join Date
    Dec 2002
    Posts
    3,518
    Grabbed most of this code from something else, but is this like the concept you are asking about?
    Code:
    stop();
    var myPI = Math.PI;
    drawArc = function (mc, x, y, radius, angle, endAngle) {
    	angle = (angle) * myPI / 180;
    	endAngle = (endAngle) * myPI / 180;
    	var arc = endAngle - angle;
    	while (arc < 0) {
    		arc += myPI * 2;
    	}
    	var segs = Math.ceil(arc / (myPI / 4));
    	var segAngle = -arc / segs;
    	var theta = -segAngle / 2;
    	var cosTheta = Math.cos(theta);
    	var ax = Math.cos(angle) * radius;
    	var ay = Math.sin(angle) * radius;
    	mc.moveTo(ax + x, ay + y);
    	for (var i = 0; i < segs; i++) {
    		angle += theta * 2;
    		var angleMid = angle - theta;
    		bx = x + Math.cos(angle) * radius;
    		by = y + Math.sin(angle) * radius;
    		cx = x + Math.cos(angleMid) * (radius / cosTheta);
    		cy = y + Math.sin(angleMid) * (radius / cosTheta);
    		mc.curveTo(cx, cy, bx, by);
    	}
    };
    var canvas = this.createEmptyMovieClip("canvas", this.getNextHighestDepth());
    var cenX = 275;
    var cenY = 200;
    var startAngle = 0;
    var endAngle = 180;
    var radius = 140;
    var arc1 = canvas.createEmptyMovieClip("arc1", 1);
    arc1.lineStyle(30, 0x0000FF);
    drawArc(arc1, cenX, cenY, radius, startAngle, endAngle);
    arc1.onPress = function() {
    	this.clear();
    	this.lineStyle(30, 0x0000FF);
    	startAngle += 10;
    	endAngle += 10;
    	drawArc(this, cenX, cenY, radius, startAngle, endAngle);
    };
    //
    var arc2 = canvas.createEmptyMovieClip("arc2", 2);
    arc2.lineStyle(30, 0xFF00FF);
    drawArc(arc2, cenX, cenY, 100, 100, 300);
    //
    var arc3 = canvas.createEmptyMovieClip("arc3", 3);
    arc3.lineStyle(30, 0xFFFF00);
    drawArc(arc3, cenX, cenY, 60, 280, 240);
    //

  4. #4
    Moderator whispers's Avatar
    Join Date
    Mar 2001
    Location
    CFA2h (respect the HEX)
    Posts
    12,755
    It looks to be.. very much so...

    my line API experience isnt very much..and my use of the Math. object is even worse..LOL

    thanks.

  5. #5
    Moderator whispers's Avatar
    Join Date
    Mar 2001
    Location
    CFA2h (respect the HEX)
    Posts
    12,755
    hiya.. got to play with you code today...

    (Im sure I could have kept in one function.. but I was just messing around..to try and understand your functions..

    I am such a 'tard' when it comes to using the math object like .cos, .sin...etc

    this:
    PHP Code:
    stop();
    var 
    canvas this.createEmptyMovieClip("canvas"this.getNextHighestDepth());
    var 
    cenX 155;
    var 
    cenY 150;
    var 
    startPoint = -90;
    var 
    spacer 10;
    var 
    innerRadius 20;
    //draw hours circle
    var hoursEndPoint:Number;
    var 
    hoursRadius innerRadius;
    var 
    hoursColor "0xDD44FF";
    var 
    hoursStroke 8;
    var 
    hoursArch canvas.createEmptyMovieClip("hoursArch"canvas.getNextHighestDepth());
    hoursArch.lineStyle(hoursStrokehoursColor);
    //draw minutes circle
    var minutesEndPoint:Number;
    var 
    minsRadius hoursRadius + (spacer 1);
    var 
    minsColor "0x77BB22";
    var 
    minsStroke 8;
    var 
    minutesArch canvas.createEmptyMovieClip("minutesArch"canvas.getNextHighestDepth());
    minutesArch.lineStyle(minsStrokeminsColor);
    //draw seconds circle
    var secondsEndPoint:Number;
    var 
    secsRadius hoursRadius + (spacer 2);
    var 
    secsColor "0x0099FF";
    var 
    secsStroke 8;
    var 
    secondsArch canvas.createEmptyMovieClip("secondsArch"canvas.getNextHighestDepth());
    secondsArch.lineStyle(secsStrokesecsColor);
    //seconds testField
    var secondsField_txt canvas.createTextField("secondsField_txt"canvas.getNextHighestDepth(), 00100100);
    //minutes testField
    var minutesField_txt canvas.createTextField("minutesField_txt"canvas.getNextHighestDepth(), 00100100);
    //hours testField
    var hoursField_txt canvas.createTextField("hoursField_txt"canvas.getNextHighestDepth(), 00100100);

    var 
    myPI Math.PI;

    drawHoursArc = function (mcxyhoursRadiusanglehoursEndPointtHours) {
        
    trace("END: "+Math.round(hoursEndPoint));
        
    trace("Converted hoursEndPoint: "+convertedHours);
        
    trace("Hours: "+Math.round(tHours));
        
    angle = (angle)*myPI/180;
        
    hoursEndPoint = (hoursEndPoint)*myPI/180;
        var 
    arc hoursEndPoint-angle;
        while (
    arc<0) {
            
    arc += myPI*2;
        }
        var 
    segs Math.ceil(arc/(myPI/4));
        var 
    segAngle = -arc/segs;
        var 
    theta = -segAngle/2;
        var 
    cosTheta Math.cos(theta);
        var 
    ax Math.cos(angle)*hoursRadius;
        var 
    ay Math.sin(angle)*hoursRadius;
        
    mc.moveTo(ax+xay+y);
        for (var 
    0i<segsi++) {
            
    angle += theta*2;
            var 
    angleMid angle-theta;
            
    bx x+Math.cos(angle)*hoursRadius;
            
    by y+Math.sin(angle)*hoursRadius;
            
    cx x+Math.cos(angleMid)*(hoursRadius/cosTheta);
            
    cy y+Math.sin(angleMid)*(hoursRadius/cosTheta);
            
    mc.curveTo(cxcybxby);
        }
        
    //update textField
        
    hoursField_txt.text tHours;
        
    hoursField_txt.textColor "0XFFFFFF";
        
    hoursField_txt._x arc
        
    hoursField_txt._y arc;
        if (
    convertedHours == -90) {
            
    trace("reset");
            
    trace("Hours: "+convertedHours);
            
    trace("Hours2: "+tHours);
            
    mc.clear();
            
    //arc = 0;
            //drawHoursArc(mc, cenX, cenY, hoursRadius, -190, 0);
            //var hoursArch = canvas.createEmptyMovieClip("hoursArch", canvas.getNextHighestDepth());
            
    hoursArch.lineStyle(hoursStrokehoursColor);

        }
    };



    drawMinutesArc = function (mcxyminsRadiusangleminutesEndPointtMins) {
        
    trace("END: "+Math.round(minutesEndPoint));
        
    trace("Converted minutesEndPoint: "+convertedMins);
        
    trace("Minutes: "+Math.round(tMins/6));
        
    angle = (angle)*myPI/180;
        
    minutesEndPoint = (minutesEndPoint)*myPI/180;
        var 
    arc minutesEndPoint-angle;
        while (
    arc<0) {
            
    arc += myPI*2;
        }
        var 
    segs Math.ceil(arc/(myPI/4));
        var 
    segAngle = -arc/segs;
        var 
    theta = -segAngle/2;
        var 
    cosTheta Math.cos(theta);
        var 
    ax Math.cos(angle)*minsRadius;
        var 
    ay Math.sin(angle)*minsRadius;
        
    mc.moveTo(ax+xay+y);
        for (var 
    0i<segsi++) {
            
    angle += theta*2;
            var 
    angleMid angle-theta;
            
    bx x+Math.cos(angle)*minsRadius;
            
    by y+Math.sin(angle)*minsRadius;
            
    cx x+Math.cos(angleMid)*(minsRadius/cosTheta);
            
    cy y+Math.sin(angleMid)*(minsRadius/cosTheta);
            
    mc.curveTo(cxcybxby);
        }
        
    //update textField
        
    minutesField_txt.text tMins;
        
    minutesField_txt.textColor "0XFFFFFF";
        
    minutesField_txt._x bx
        
    minutesField_txt._y by;
        if (
    convertedMins == -90) {
            
    trace("reset");
            
    trace("Minutes: "+convertedMins);
            
    trace("Minutes2: "+tMins);
            
    mc.clear();
            
    minutesArch.lineStyle(minsStrokeminsColor);
        }
    };



    //-----------------------------------------------------------------------------//


    drawSecondsArc = function (mcxysecsRadiusanglesecondsEndPointtSecstMinstHours) {
        
    trace("END: "+Math.round(secondsEndPoint));
        
    trace("Converted endPoint: "+convertedSecs);
        
    trace("Seconds: "+Math.round(tSecs/6));
        
    angle = (angle)*myPI/180;
        
    secondsEndPoint = (secondsEndPoint)*myPI/180;
        var 
    arc secondsEndPoint-angle;
        while (
    arc<0) {
            
    arc += myPI*2;
        }
        var 
    segs Math.ceil(arc/(myPI/4));
        var 
    segAngle = -arc/segs;
        var 
    theta = -segAngle/2;
        var 
    cosTheta Math.cos(theta);
        var 
    ax Math.cos(angle)*secsRadius;
        var 
    ay Math.sin(angle)*secsRadius;
        
    mc.moveTo(ax+xay+y);
        for (var 
    0i<segsi++) {
            
    angle += theta*2;
            var 
    angleMid angle-theta;
            
    bx x+Math.cos(angle)*secsRadius;
            
    by y+Math.sin(angle)*secsRadius;
            
    cx x+Math.cos(angleMid)*(secsRadius/cosTheta);
            
    cy y+Math.sin(angleMid)*(secsRadius/cosTheta);
            
    mc.curveTo(cxcybxby);
        }
        
    //update textField
        
    secondsField_txt.text tSecs;
        
    secondsField_txt.textColor "0XFFFFFF";
        
    secondsField_txt._x bx
        
    secondsField_txt._y by;
        if (
    convertedSecs == -90) {
            
    trace("reset");
            
    trace("Seconds: "+convertedSecs);
            
    trace("Seconds2: "+tSecs);
            
    mc.clear();
            
    secondsArch.lineStyle(secsStrokesecsColor);
        }
    };
    startTimer setInterval(dateFunction1000);
    function 
    dateFunction() {
        
    //Get DATE:
        
    var myDate:Date = new Date();
        var 
    date myDate.getDate();
        var 
    month:Array = ["1""2""3""4""5""6""7""8""9""10""11""12"];
        var 
    year myDate.getFullYear();
        var 
    currentDate month[myDate.getMonth()]+"/"+date+"/"+year;
        
    //Get Time
        
    var tHours:Object convertHours(myDate.getHours());
        var 
    tMins myDate.getMinutes();
        if (
    tMins<10) {
            
    tMins "0"+tMins;
        }
        var 
    tSecs myDate.getSeconds();
        if (
    tSecs<10) {
            
    tSecs "0"+tSecs;
        }
        
    //declare 12/24 hr convertion function    
        
    function convertHours(hour24:Number):Object {
            var 
    returnObj:Object = new Object();
            
    returnObj.ampm = (hour24<12) ? "am" "pm";
            var 
    hour12:Number hour24%12;
            if (
    hour12 == 0) {
                
    hour12 12;
            }
            
    returnObj.hours hour12;
            return 
    returnObj;
        }
        
    convertedSecs Math.round(360/60)*tSecs-90;
        
    convertedMins Math.round(360/60)*tMins-90;
        
    convertedHours Math.round(360/12)* tHours.hours-90;
        
        
    //updateClock
        
    drawSecondsArc(secondsArchcenXcenYsecsRadiusstartPointconvertedSecstSecs);
        
    drawMinutesArc(minutesArchcenXcenYminsRadiusstartPointconvertedMinstMins);
        
    drawHoursArc(hoursArchcenXcenYhoursRadiusstartPointconvertedHourstHours.hours);
        
    //date 
        //trace("Date: " + currentDate);
        //time
        //trace("Hours: "+tHours.hours);
        //trace("Time: " + tHours.hours + ":" + tMins + ":" + tSecs + " " + tHours.ampm);


    1.) is there anywhere you recommend to start getting up to speed on ung code to produce 'grapchics'.... I dont wanna say physics (per se`).. but places that use the Math Function? graphing.. line drawing..etc..etc..

    2.) I was trying to play with your 'vars/ to use that as my x/y for textFields.. to display.. (I really like how pixel breaker has his text..looks very nice, arch'd trails..)

    3.) Im un-sure as to how to get away from the 'ticking'..and move more into an 'easing' animation...


    also..point anything you see in the code.. I was just taking a stab as how to approach it.. so if you think there is a better way/code/approach...let me know..

    Im all for improving.

    3.)

  6. #6
    :
    Join Date
    Dec 2002
    Posts
    3,518
    Messed around with it a bit more...
    Code:
    stop();
    var oHours = 0;
    var oMins = 0;
    var oSecs = 0;
    var myPI = Math.PI;
    //
    var cenX = 80;
    var cenY = 80;
    var spacer = 16;
    var innerRadius = 20;
    var offSet = 86;
    var txtFormat = new TextFormat();
    txtFormat.color = 0xFFFFFF;
    txtFormat.font = "FontBold";
    txtFormat.size = 12;
    var letterSpacing = -4;
    //
    var canvas = this.createEmptyMovieClip("canvas", this.getNextHighestDepth());
    //
    var hoursArc = canvas.createEmptyMovieClip("hoursArc", canvas.getNextHighestDepth());
    var hoursRadius = innerRadius;
    hoursArc.stroke = 14;
    hoursArc.colour = "0xDD44FF";
    hoursArc.lineStyle(hoursArc.stroke, hoursArc.colour);
    var hoursArcTxt = hoursArc.createEmptyMovieClip("holder", 1);
    hoursArcTxt._x = cenX;
    hoursArcTxt._y = cenY;
    //
    var minsArc = canvas.createEmptyMovieClip("minsArc", canvas.getNextHighestDepth());
    var minsRadius = hoursRadius + (spacer * 1);
    minsArc.stroke = 14;
    minsArc.colour = "0x77BB22";
    minsArc.lineStyle(minsArc.stroke, minsArc.colour);
    var minsArcTxt = minsArc.createEmptyMovieClip("holder", 1);
    minsArcTxt._x = cenX;
    minsArcTxt._y = cenY;
    //
    var secsArc = canvas.createEmptyMovieClip("secsArc", canvas.getNextHighestDepth());
    var secsRadius = hoursRadius + (spacer * 2);
    secsArc.stroke = 14;
    secsArc.colour = "0x0099FF";
    secsArc.lineStyle(secsArc.stroke, secsArc.colour);
    var secsArcTxt = secsArc.createEmptyMovieClip("holder", 1);
    secsArcTxt._x = cenX;
    secsArcTxt._y = cenY;
    //    
    function convertHours(hour24) {
    	var returnObj = new Object();
    	returnObj.ampm = (Number(hour24) < 12) ? "am" : "pm";
    	var hour12 = Number(hour24) % 12;
    	if (hour12 == 0) {
    		hour12 = 12;
    	}
    	returnObj.hours = (hour12 < 10) ? "0" + String(hour12) : String(hour12);
    	return returnObj;
    }
    function dateFunction() {
    	var myDate = new Date();
    	var dd = myDate.getDate();
    	var mm = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"];
    	var yy = myDate.getFullYear();
    	var currentDate = mm[myDate.getMonth()] + "/" + dd + "/" + yy;
    	var tHours = convertHours(myDate.getHours());
    	var tMins = myDate.getMinutes();
    	tMins = (Number(tMins) < 10) ? "0" + tMins : tMins;
    	var tSecs = myDate.getSeconds();
    	tSecs = (Number(tSecs) < 10) ? "0" + tSecs : tSecs;
    	if (oSecs != myDate.getSeconds()) {
    		oSecs = myDate.getSeconds();
    		convertedSecs = 6 * Number(tSecs);
    		drawArc(secsArc, secsRadius, 0, convertedSecs);
    		doArcTxt(secsArcTxt, secsRadius, convertedSecs, tSecs);
    	}
    	if (oMins != myDate.getMinutes()) {
    		oMins = myDate.getMinutes();
    		convertedMins = 6 * Number(tMins);
    		drawArc(minsArc, minsRadius, 0, convertedMins);
    		doArcTxt(minsArcTxt, minsRadius, convertedMins, tMins);
    	}
    	if (oHours != myDate.getHours()) {
    		oHours = myDate.getHours();
    		convertedHours = 30 * Number(tHours.hours);
    		drawArc(hoursArc, hoursRadius, 0, convertedHours);
    		doArcTxt(hoursArcTxt, hoursRadius, convertedHours, tHours.hours);
    		doCenTxt(hoursArc, tHours.ampm);
    	}
    }
    function drawArc(mc, radius, startPt, endPt) {
    	var x = cenX;
    	var y = cenY;
    	var angle = (startPt - offSet) * myPI / 180;
    	var endAngle = (endPt - offSet) * myPI / 180;
    	var arc = endAngle - angle;
    	while (arc < 0) {
    		arc += myPI * 2;
    	}
    	var segs = Math.ceil(arc / (myPI / 4));
    	var segAngle = -arc / segs;
    	var theta = -segAngle / 2;
    	var cosTheta = Math.cos(theta);
    	var ax = Math.cos(angle) * radius;
    	var ay = Math.sin(angle) * radius;
    	mc.moveTo(ax + x, ay + y);
    	for (var i = 0; i < segs; i++) {
    		angle += theta * 2;
    		var angleMid = angle - theta;
    		bx = x + Math.cos(angle) * radius;
    		by = y + Math.sin(angle) * radius;
    		cx = x + Math.cos(angleMid) * (radius / cosTheta);
    		cy = y + Math.sin(angleMid) * (radius / cosTheta);
    		mc.curveTo(cx, cy, bx, by);
    	}
    	if (endPt == 0) {
    		mc.clear();
    		mc.lineStyle(mc.stroke, mc.colour);
    	}
    }
    function doArcTxt(txtMC, r, myAngle, txtInfo) {
    	var txt = String(txtInfo);
    	var theta = (myAngle - offSet + 360) * myPI / 180;
    	var L = txt.length;
    	var spac = letterSpacing;
    	var cWidth0 = 0, cWidth1 = 0;
    	var c;
    	for (var i = 0; i < L; i++) {
    		if (myAngle <= 90 || myAngle >= 270) {
    			c = txt.substr(L - i - 1, 1);
    		} else {
    			c = txt.substr(i, 1);
    		}
    		var mc = txtMC.createEmptyMovieClip(i, i);
    		mc.createTextField("letter", 1, 0, 0, 0, 0);
    		mc.letter.autoSize = true;
    		mc.letter.embedFonts = true;
    		mc.letter.text = c;
    		mc.letter.setTextFormat(txtFormat);
    		mc.letter._y = -(mc._height / 2);
    		cWidth1 = mc._width / 2;
    		mc.letter._x = -cWidth1;
    		theta -= Math.atan((cWidth1 + cWidth0 + spac) / r);
    		cWidth0 = cWidth1;
    		mc._x = Math.cos(theta) * r;
    		mc._y = Math.sin(theta) * r;
    		mc._rotation = theta * 180 / myPI;
    		if (myAngle > 90 && myAngle < 270) {
    			mc._rotation += 270;
    		} else {
    			mc._rotation += 90;
    		}
    	}
    }
    function doCenTxt(txtMC, txt) {
    	var mc = txtMC.createEmptyMovieClip("mc", 2);
    	mc.createTextField("ltrs", 1, 0, 0, 0, 0);
    	mc.ltrs.autoSize = true;
    	mc.ltrs.embedFonts = true;
    	mc.ltrs.text = txt;
    	mc.ltrs.setTextFormat(txtFormat);
    	mc._x = cenX - (mc._width / 2);
    	mc._y = cenY - (mc._height / 2);
    }
    // ********************************
    dateFunction();
    startTimer = setInterval(dateFunction, 1000);
    1) Not really...
    2) See above...
    3) Not sure how to do easing and use the drawing function...
    .
    Last edited by dawsonk; 09-18-2007 at 02:50 PM.

  7. #7
    Moderator whispers's Avatar
    Join Date
    Mar 2001
    Location
    CFA2h (respect the HEX)
    Posts
    12,755
    I just copy/pasted real quick.. I dont see any TEXT.... taken out perhaps? quick glance looks like you have routines to display/position text..

    thanks..

  8. #8
    :
    Join Date
    Dec 2002
    Posts
    3,518
    Need to put font (I used Arial, Bold) in library and set export linkage to 'FontBold'.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  




Click Here to Expand Forum to Full Width

HTML5 Development Center