looping custom cursor opacity falling in infinite loop - actionscript-3

Question

I am trying to make my custom cursor glow slowly by changing its opacity. The problem is that the only way I can see it working is by making a while, which creates an infinite loop. Is there a way to proceed so my cursor changes from 0 opacity to 1 opacity and go up and down. Here is my code at the moment... I'm trying to find another way to proceed, but I really don't see any other way.
public var Alpha:Number = 1;
public var sense:String = "down";
private function thisMouseOver(e:MouseEvent):void{
Mouse.hide();
//draws the cursor
drawCursor();
//Animates cursor
if(!this.animationStarted)
{
this.animationStarted = true;
animateCursor();
}
}
private function animateCursor():void{
while(this.animationStarted)
{
if(this.Alpha==1)
{
this.sense = "down";
}
else if(this.Alpha == 0)
{
this.sense = "up";
}
if(this.sense == "up")
this.Alpha += 0.1;
else
this.Alpha -= 0.1;
this.graphics.beginFill(0x333333);
this.graphics.drawRect(0,0,25,25);
this.graphics.endFill();
drawCursor();
}
}
private function drawCursor():void{
this.graphics.beginFill(0x00BFFF,this.Alpha);
//top left
this.graphics.drawRect(0,0,6,2);
//bottom left
this.graphics.drawRect(0,23,6,2);
//left top
this.graphics.drawRect(0,0,2,6);
//left bottom
this.graphics.drawRect(0,19,2,6);
//top righ
this.graphics.drawRect(19,0,6,2);
//right top
this.graphics.drawRect(23,0,2,6);
//bottom right
this.graphics.drawRect(19,23,6,2);
//right bottom
this.graphics.drawRect(23,19,2,6);
this.graphics.endFill();
}

Answer 1

The best way is to use tweener, my favorite is GTween:
private function test():void
{
var shape:Shape = new Shape();
addChild(shape);
shape.graphics.beginFill(0xFF0000, 1);
shape.graphics.drawCircle(100, 100, 50);
shape.graphics.endFill();
var tween:GTween = new GTween(shape, 1, {alpha:0}, {reflect:true, repeatCount:2});
tween.nextTween = tween;
}
Use tween.paused = true/false to play()/stop() the tween.
There is another variant without tweener (but I recommend to use tween because code is more clear, readable and it's less resources cost) that is more like your, but instead of while loop use EnterFrame event approach - remove while loop from animateCursor() method, add Event.ENTER_FRAME listener in the point of animateCursor(); call:
if(!this.animationStarted)
{
this.animationStarted = true;
addEventListener(Event.ENTER_FRAME, onEnterFrame);
}
private function onEnterFrame():void
{
animateCursor();
}

Answer 2

One way to avoid your problem with the infinite loop is to put your animateCursor code inside an ENTER_FRAME event handler.
Here's how it can look: http://www.swfcabin.com/open/1360303185
( Your custom cursor shape looks awesome ; )
Here's your code remade in MiniBuilder ( functions are arranged alphabetically ):
package com.glowingcursor {
import flash.display.*;
import flash.events.*;
import flash.geom.*;
import flash.ui.*;
public class Application extends Sprite {
private var cursor:Sprite;
private var cursorOffset:Point;
private var sense:Boolean;
public function
Application() {
addEventListener( Event.ADDED_TO_STAGE, onAdded );
}
private function
animateCursor( e:Event ):void {
if ( cursor.alpha >= 1 ) sense = false;
else if ( cursor.alpha <= 0.2 ) sense = true;
if( sense ) cursor.alpha += 0.08;
else cursor.alpha -= 0.08;
}
private function
hideCursor( e:MouseEvent ):void {
Mouse.show();
removeChild( cursor );
removeEventListener( Event.ENTER_FRAME, moveCursor );
removeEventListener( Event.ENTER_FRAME, animateCursor );
}
private function
initCursor():void {
cursor = new Sprite();
cursor.graphics.beginFill( 0xff0000 );
cursor.graphics.drawRect( 0, 0, 6, 2 ); // top left
cursor.graphics.drawRect( 0, 23, 6, 2 ); // bottom left
cursor.graphics.drawRect( 0, 0, 2, 6 ); // left top
cursor.graphics.drawRect( 0, 19, 2, 6 ); // left bottom
cursor.graphics.drawRect( 19, 0, 6, 2 ); // top right
cursor.graphics.drawRect( 23, 0, 2, 6 ); // right top
cursor.graphics.drawRect( 19, 23, 6, 2 ); // bottom right
cursor.graphics.drawRect( 23, 19, 2, 6 ); // right bottom
cursor.graphics.endFill();
// So InteractiveObjects react to the custom cursor properly
cursor.mouseEnabled = false;
// For cursor centering
cursorOffset = new Point( cursor.width / 2, cursor.height / 2 );
}
private function
moveCursor( e:Event ):void {
cursor.x = mouseX - cursorOffset.x;
cursor.y = mouseY - cursorOffset.y;
}
private function
onAdded( e:Event ):void {
initCursor();
showCursor();
}
private function
showCursor():void {
Mouse.hide();
addChild( cursor );
addEventListener( Event.ENTER_FRAME, moveCursor );
addEventListener( Event.ENTER_FRAME, animateCursor );
}
}
}

Answer 3

You can put your code from the animateCursor inside a different method, and use a Timer to call that method. This way you can control how "fast" the cursor blinks and when.
Timer timer = new Timer( 25, 0 );
private function animateCursor():void
{
timer.addEventListener( TimerEvent.TIMER, timerHandler );
timer.start()
}
private function timerListener( e:TimerEvent ):void
{
if(this.Alpha==1)
{
this.sense = "down";
}
else if(this.Alpha == 0)
{
this.sense = "up";
}
if(this.sense == "up")
this.Alpha += 0.1;
else
this.Alpha -= 0.1;
this.graphics.beginFill(0x333333);
this.graphics.drawRect(0,0,25,25);
this.graphics.endFill();
drawCursor();
}
also it's a good idea to change your alpha conditions from this.Alpha == 0 to this.Alpha <= 0 as you may choose to change the amount by which you modify the alpha to values that don't always add up to 0 or 1.