how to avoid flikering button problem on Flash

From the earliest versions of Flash sometime we experienced this simple problem: - using MovieClips as Buttons and scaling them as rollover/rollout effect we got that ugly flickering effect.-
Today I read a very long tread about designers in serarch of some solution for this old issue. Since I didn't found an answer that satisfies me and since is really easy avoiding this problem I wrote this simple function:

function addButtonEvent(btn:DisplayObject):void {
 MovieClip(btn).buttonMode = true;
 MovieClip(btn).mouseChildren = false;
 var square:Sprite = new Sprite();
 square.graphics.beginFill(0x000000);
 var p = btn.getRect(btn.parent);
 square.graphics.drawRect(p.x, p.y, p.width, p.height);
 btn.parent.addChild(square);
 square.visible = false;
 MovieClip(btn).hitArea = square;
   
 btn.addEventListener (MouseEvent.MOUSE_OVER, blinkOver);
 btn.addEventListener (MouseEvent.MOUSE_OUT, blinkOut);
}
  
function blinkOver(e:MouseEvent = null) {
 Tweener.addTween(e.target, { scaleX:1.08, scaleY:1.08,time:.3 } );
}
  
private function blinkOut(e:MouseEvent  = null) {
 Tweener.addTween(e.target, {scaleX:1, scaleY:1,time:.1 } );
}

As you can see the tip is to create a static rectangle over the MovieClip and using it as hitArea.
You just need to call the addButtonEvent function in this way:

addButtonEvent(myMovieclip);

(super simple!!!) Note that for the scaling easing I used Caurina tweener

Allowed characters number and disabling textfield scrolling

How can we do if we have an "input" textfield and we wish to bind the max characters without making our textfield scrolling?
Think for example that we've only 4 visible lines for a textField t. How to prevent that users will write or just paste more text overfolwing on line 5?

below the solution I adopted:

1 I add a custom textfield with some height;
the first trouble is how many line the textfield is if this text is empty? (i just add a recursive function for understand this) check at getLastVisibleLine.
2 I slice each character under the last visible line.

package
{
    import flash.text.TextField;
    import flash.text.TextFieldType;
    import flash.text.TextFormat;
    import flash.events.Event;
    import flash.events.TextEvent;
    
    public class TextFieldUtil extends Sprite {
        
        public function TextFieldUtil()    { }
        
        //undestand how many lines we can insert in a textField without scrolling
        public static function getLastVisibleLine(t:TextField):int {
            t.type = TextFieldType.INPUT;
            var current_string:String = t.text;
            t.text = "";
            var l:int = 0;
            var scrld:Boolean = false;
            t.addEventListener(Event.SCROLL, checkScrl);
            function checkScrl(e:Event) {
                e.target.scrollV = 0;
                t.text = current_string;
                scrld = true;
            }
            while (scrld == false) {
                l++
                t.appendText("\n");
            }
            t.removeEventListener(Event.SCROLL, checkScrl);
            return l;
        }
        
        public static function createCustomTextField(x:Number, y:Number, width:Number, height:Number):TextField {
            var t:TextField = new TextField();
            t.type = TextFieldType.INPUT;
            t.mouseWheelEnabled = false
            t.wordWrap = true;
            t.multiline = true;
            t.x = x;
            t.y = y;
            t.width = width;
            t.height = height;
            //t.background = true;
            //t.border = true;
            var visiblesLines:int = getLastVisibleLine(t);
            
            t.addEventListener(Event.CHANGE, function (e:Event) { // lock text insertion and delete exceeding characters.
                var t:TextField = e.target as TextField;
                if (t.numLines > visiblesLines)    {
                    t.type = "dynamic";
                }
                while (t.numLines > visiblesLines){
                    var current_string:String = t.text;
                    t.text = current_string.slice(0, -1);
                }
                t.type = "input"; 
            });
            
            return t;
        }
    }
}

I wrote also a version with styles and special textFormat. Maybe I'll post in the future.

Jingle bells - Disney Advent Calendar

Advent Calendar
Here some screenshot of the latest job I did in Disney. It's an Advent calendar, that kind of Christmas gadgets... For each day you'll find something. It's made using papervision and the performance optimization was a terrible activity. We localized it for Italy, Spain, France and United Kingdom. I hope you'll enjoy it. My favorite days are 6 and 19 December, but you have to wait for see what I mean!

---

Ho catturato qualche schermata dell'ultimo progetto che ho concluso. Il classico calendario dell'avvento, costruito come un ancora più classico carosello. Ogni giorno si clicca e si trova qualcosa. Regali, sconti, e tutto quello che siamo riusciti a strappare ai nostri colleghi dell'area publishing, film e videogames. L'ho sviluppato usando Papervision. L'ottimizzazione è stata un'attività ostica come al solito. Qualsiasi cosa fai ed inevitabilmente fonderai la cpu del tuo computer. Alla fine però mi ritengo abbastanza soddisfatto del lavoro. Ovviamente i sorgenti delle classi principali sono a disposizione.
Vai al calendario

Dopo una lunghissima assenza su queste pagine, rieccomi a "spammare" l'ultima mia "fatica" per gli amici della Disney. Questa volta si tratta di una gallery avventurosa sviluppata per l'uscita di UP, il nuovo film Disney Pixar.

flash fader effect walk cycle (actionscript 3)

In the previous post, I showed you how to implement a simple fader effect... Playing around this I made another fun effect (and nothing else… It’s totally inuseful thing). It was also great understand that with actionscript 3 you can change the framerate at runtime! Anyway I used an old walk cycle that I drawn for a project I did in bsmart. As you can see, I also changed the trail effect by the speed of the guy…

---

Nello scorso post, vi ho fatto vedere qualcosa sulla classe bitmapData e sugli effetti di fader. Giochicchiando un po' ho partorito un'altra stupidaggine (ovviamente si tratta solo di un esercizio di stile totalmente inutile). Comunque mi è stato molto utile perchè ho scoperto che con actionscript 3 si possono modificare alcune proprietà globali come il "framerate" a runtime! Per fare questo esempio ho usato un vecchio ciclo di camminata che disegnai per un vecchio progetto ai tempi del mio lavoro in Bsmart, una società di e-learning per la quale ho lavorato qualche anno fa. Come si vede dall esempio, sopstando il mouse a destra e a sinistra si incrementa o decrementa la velocità dell'omino (framerate più veloce o lento) e si altera anche la scia prodotta.

Flash fader effect (actionscript 3)

Here another piece of code about a collection of fader effects.

It’s beautiful what we can do with filters and bitmapData class. A stupid animation can become deeper and immersive. I’ve to integrate something with music, like the Winamp AVS. I’m thinking about a QX game, using this two concepts… A sort of rhythm and game and arcade game… Bah... maybe in the future.

---

Ecco un altro po' di codice sugli effetti fader. È interessante come una semplice stupida animazione può guadagnare profondità, con un semplice effetto di questo tipo. Mi piacerebbe integrare qualcosa con la musica, tipo gli effetti del winamp. Mi piacerebbe realizzare un gioco tipo QX (chi se lo ricorda?), ma più incentrato sull'aspetto musicale. Quindi per poter giocare ad un gioco simile sarebbe utile soprattutto il senso del ritmo... boh, comunque vedremo.

Here a "Strar Wars" tribute:

package
{
  import flash.display.*;
  import flash.events.*;
  import flash.filters.*;
  import flash.geom.*;
  import flash.ui.*;
  import flash.utils.*;

  public class Plasma extends MovieClip
  {
      var canvas:Bitmap;
      var plasma:MovieClip;
      var fader:ColorChanger;
      var blurFilter:BlurFilter;
      var bkgd:BitmapData;

      public function Plasma() : void
      {
          bkgd = new BitmapData(1000, 900, true, 4278190080);
          canvas = new Bitmap(bkgd);
          plasma = new MovieClip();
          blurFilter = new BlurFilter(1, 2, 1);
          fader = new ColorChanger();
          fader.alpha = 1;
   fader.x = 500;
   fader.y = 350;
   fader.scaleX = fader.scaleY = .6
          addChild(plasma);
          plasma.addChild(canvas);
          plasma.addChild(fader);
          addEventListener(Event.ENTER_FRAME, activateVisual);
          return;
      }

      private function activateVisual(param1:Event) : void
      {
   fader.rotation+=.5
   bkgd.applyFilter(bkgd, bkgd.rect, new Point(0, 0), blurFilter);

          bkgd.draw(plasma);
  
          return;
      }
  }
}

Gioco di Wall-e con box2d (wall-e game)

Hi, this is a Wall-e game. I started one year ago, and it was never completed.
As you can see a lot of buttons are disabled and it's graphically unfinished.
Anyway you can play using:
[space] to collect garbage.
[shift] to release compacted cubes.
Hoping that you enjoy this demo.

---

Ciao, questo è un giochino di Wall-e iniziato ormai quasi un anno fa e mai completato.
Infatti verdrete che molti bottoni sono disabilitati e la grafica è un po' approssimativa.
Comunque i controlli sono:
[spazio] per raccogliere i rifiuti.
[shift] per sganciare i cubi compattati.
Credo che questa sia l'unica informazione necessaria per poter giocare.

Concorso "destinazione Earth"

Ciao, questo è l'ultimo minisito su cui ho lavorato; così sono anche riuscito ad usare la terra rotante di cui avevo scritto.

Mappamondo

Semplice ma efficace, un mappamondo che al click slitta randomicamente dal Sahara a Cuba, passando per l'Italia, la Siberia, la Groenlandia, ecc...

burrattino con i fili sviluppato con box2d

Ecco l'ultima versione del burrattino con i fili... Come vedete dal braccino sinistro spastico, ci sono ancora diversi problemi relativi ai punti di registrazione. Spero di risolverli al più presto. Intanto guardate i fili che finalmente "fanno i fili".



E questa è una delle versioni che ho preparato per il sito Disney.it guarda l'animazione flash.

Un altro lavoretto extra sembra finito.

Non posso fare a meno di fare qualche piccolo lavoretto extra ogni tanto. Non riesco a spiegarmi il perché di questa cosa che per qualcuno può essere assimilata all'autolesionismo.

Io invece mi diverto, almeno nella fase iniziale, cioè quando devo definire il progetto, capire come fare il lavoro, affrontare subito le difficoltà più interessanti...

Ad un certo punto sopraggiungono i problemi più ostici... quali? Quelli grafico/puntigliosi - sposta quella freccia un pixel a destra, aggiungi un po' di blu, rendi la dissolvenza più fluida, non si può rallentare l'animazione di una frazione di secondo? E così via -. C'è da impazzire!

Comunque dato che questo blog è anche un portfolio delle mie realizzazioni, ecco l'ultima fatica:

Un video player a "mitragliatrice" (le interazioni su rollOver sono una poco felice scelta imposta dal committente) e un carosello per il sito Deagostini Edicola

Il sito è stato realizzato dalla società Exmachina s.r.l con cui ho collaborato realizzando questi due piccoli componenti.

problema: una corda non è un punzone

nell'articolo Digital Toys vi mostravo un giochino Flash "marionetta", in cui cercavo di simulare il comportamento di una marionetta.

Purtroppo come si vede il problema è che i fili si comportano un po' come dei punzoni, assolutamente rigidi.
Così ho deciso di sviluppare un componente corda.
C'ho perso un mare di tempo, ma alla fine, il lavoro sembra aver dato i suoi frutti. Ho anche aggiornato la versione della "sdk" sulla quale ho sviluppato tutti questi componenti. Si tratta di box2d, un motore fisico sviluppato da tale Erin Catto, un vero guru fra i programmatori. Il motore è programmato così bene che è stato possibile "portarlo" per una infinità di linguaggi, così non è difficile vedere giochi anche per iphone, nintendo ds, wii, ecc...

Digital Toys sviluppati con Box2d

Una parola che usano spesso quelli di Disney Online per descrivere tutte quelle piccole applicazioncine flash che appaiono un po' come giocattoli all'interno del sito. Ma forse di giocattolo c'è veramente poco... Ricordo quando da piccolo con mio fratello passavo giornate intere a costruire astronavi o robot usando le mollette come fossero costruzioni.
Io ho pensato di creare dei giocattolini che ammiccano ai giochi della realtà, quelli che i nostri figli forse non vedranno mai.

L system - Animazione

Ed ecco un'animazione completa. Un amico agronomo mi ha fatto notare che la forma dell'albero non può essere definita così meccanicamente.
Tanto per iniziare, come per ogni forma di vita, esistono delle fasi, (chissà com'è la pubertà dell'albero?).

L System (rappresentazioni grafiche)

Ecco alcune delle immagini ottenute:

Ed ecco la classe completa:

// Fern Fractal Nicola Sirago - an - Jim Bumgardner 2008 -port
package 
{
 import flash.geom.*;
 import GeomUtil;
 import flash.events.Event;
 import flash.display.DisplayObject;
 import flash.display.Sprite;

 public class FernSprite2 extends Sprite
 {
  var maxLevels:Number// = 6;
  var initBendAngle:Number// = 15;
  var initBranchAngle:Number// = 37;
  var trunkRatio:Number// = .1;
  var branchRatio:Number// = .4;
  var heightScale:Number// = 2.5;
  var regularity:Number// = 1;
  var offshoot:Number// = 1;
  
  public function FernSprite2(initObj)
  {
   maxLevels = initObj.maxLevels;
   initBendAngle = initObj.initBendAngle;
   initBranchAngle = initObj.initBranchAngle;
   trunkRatio = initObj.trunkRatio;
   branchRatio = initObj.branchRatio;
   heightScale = initObj.heightScale;
   regularity = initObj.regularity;
   offshoot = initObj.offshoot;
   initObj.parMC.addChild(this);
  }
  public function drawFern(p,a,rad,level)
  {
   var c:Point = new Point(p.x + Math.cos(a) * rad * trunkRatio, p.y + Math.sin(a) * rad * trunkRatio);
   p.height = Point.distance(new Point (p.x,p.y), c);
   p.width = (level + 1)*trunkRatio*30
   p.rotation = GeomUtil.radToGrad(a)-90;
   this.addChild(p);
   if (level > 0) {
    a += bendAngle;
    level--;
    var b1:ramo = new ramo;
    var b2:ramo = new ramo;
    var b3:ramo = new ramo;
    b1.x = b2.x = b3.x = c.x;
    b1.y = b2.y = b3.y = c.y;
    if(randRange(0,offshoot))
    drawFern(b1, a - branchAngle * randRange2(1, regularity), rad * branchRatio * randRange2(1, regularity), level);
    if(randRange(0,offshoot))
    drawFern(b2, a + branchAngle * randRange2(1, regularity), rad * branchRatio * randRange2(1, regularity), level);
    if(randRange(0,offshoot))
    drawFern(b3,a * randRange2(1, regularity),rad*antiTrunkRatio * randRange2(1, regularity),level);
   }else {
    var f:foglie = new foglie; 
    f.x = c.x;
    f.y = c.y;
   // f.rotation = p.rotation
    if(randRange(0,offshoot))
    this.addChild(f);
   }
  }
  public function redrawFern()
  {
   bendAngle = initBendAngle*Math.PI/180;
   branchAngle = initBranchAngle*Math.PI/180;
   lastMaxLevels = maxLevels;
   antiTrunkRatio = 1-trunkRatio;
   startAngle = -Math.PI/2;
   var b:t2 = new t2;
   drawFern(b, startAngle, heightScale, maxLevels);
  }
  public static function randRange(min:Number, max:Number):Number {
   var randomNum:Number = Math.floor(Math.random() * (max - min + 1)) + min;
   return randomNum;
  }
  public static function randRange2(min:Number, max:Number):Number {
   if (min == max)
   return min
   var d = 0
   while (d == 0) { d = randRange( -1, 1) }
   var randomNum:Number =Math.abs( Math.random() * (max - min) + min * d);
   return randomNum;
  }
 }
}

Per modificare le texture basta modificare i disegni all'interno dei movieclip "ramo" e "foglie"

L system MovieClip texturization

Ora che abbiamo trovato l'algoritmo di base le variazioni possono essere infinite.
Con Flash ad esempio si può texturizzare il nostro albero come ci piace distorcendo delle figure ed adattandole alla nostra struttura.
Ho preparato un esempio per consentire a chiunque di inserire le proprie texture all'interno dell'albero.

public function drawFern(p,a,rad,level)
  {
   var c:Point = new Point(p.x + Math.cos(a) * rad * trunkRatio, p.y + Math.sin(a) * rad * trunkRatio);
   p.height = Point.distance(new Point (p.x,p.y), c);
   p.width = (level + 1)*trunkRatio*30
   p.rotation = GeomUtil.radToGrad(a)-90;
   this.addChild(p);
   if (level > 0) {
    a += bendAngle;
    level--;
    var b1:tronco = new tronco;
    var b2:tronco = new tronco;
    var b3:tronco = new tronco;
    b1.x = b2.x = b3.x = c.x;
    b1.y = b2.y = b3.y = c.y;
    drawFern(b1, a - branchAngle, rad * branchRatio, level);
    drawFern(b2, a + branchAngle, rad * branchRatio, level);
    drawFern(b3,a, rad*antiTrunkRatio, level);
   }else {
    var f:foglie = new foglie; 
    f.x = c.x;
    f.y = c.y;
    f.rotation = p.rotation
    this.addChild(f);
   }
  }

Questa volta gli input iniziali non sono le coordinate di un punto (px, py) ma un MovieClip.
Ora abbiamo 2 differenti texture (tronco, foglie).
A differenza del primo esempio, foglie viene posizionato solo quando la variabile level è scesa a zero, quindi nell'ultima recursione.
Inoltre ho inserito una funzione radToGrad, che effettua una conversione da radianti a gradi (non ho mai capito come mai la proprietà rotation si esprime in scomodissimi gradi.)

public static function radToGrad(rad:Number) {
   return rad/Math.PI*180;
  }

Domani cerco di postare la classe completa e qualche immagine di esempio.

Sempre su L system (Un po' di codice)

Ciao, dopo aver smanettato alla ricerca di un buon syntax highliter, ovvero di un programino che stampa codice come Dio comanda rieccomi a parlare di L system. Infatti dopo aver visto qualche fantastico esempio offerto dalle potenzialità di questo algoritmo, mi sono dato alla sperimentazione (più che altro grafica).
la funzione da cui sono partito scritta da Jim Bumgardner è la seguente:

function drawFern(px,py,a,rad,level)
  {
   var cx = px+Math.cos(a)*rad*trunkRatio;
   var cy = py+Math.sin(a)*rad*trunkRatio;
   lineTo(cx, cy);
   if (level > 0) {
    a += bendAngle;
    level--;
    drawFern(cx,cy,a-branchAngle,rad*branchRatio,level);
    moveTo(cx,cy);
    drawFern(cx,cy,a+branchAngle,rad*branchRatio,level);
    moveTo(cx,cy);
   }
  }

Con una sintassi semplificata il procedimento può anche essere scritto così:

R(i)     :  Livello del Ramo
t        :  trasla la fine del ramo
s        :  Scala 
r1,r2    :  ruota in senso orario e antiorario
R(i) = s(t[T(i-1)] r1[R(i-1)] r2[R(i-1)])

Purtroppo nel nostro caso non abbiamo un metodo dinamico basato sulla sostituzione, la struttura di base dell'albero è scolpita all'interno dell'applicazione.