Testo dinamico evidenziato animato

[Grezzo]

Chiedo a voi sommi maestri qual'è la soluzione al mio profondo dilemma, quale sarebbe la soluzione più semplice volendo creare un testo dinamico che si anima con una specie di sfondo colorato (75% trasparente) con la stessa larghezza della riga. Allego immagine per far capire come deve essere l'animazione e il testo. Se riuscite a darmi qualche consiglio perchè non so neanche da dove partire...

[Stan]

Supponendo che il titolo fa casella a sé, si prende la larghezza delle casella

var lar = casellatesto._width


poi metti un clip sotto al testo e da actionscript puoi dare la larghezza a 0

mioclip._width = 0

quando vuoi lanci una tween sul tuo clip fino alla larghezza lar a memoria, comunque guarda la documentazione per tranquillità (ricorda anche di importare la classe Tween e le funzioni di easing)


new Tween(mioclip, "_x", 0, lar, Regular.easeOut, 1, true)


Per il testo invece puoi fare riferimento a questa classe, ma devi lavorarci un po'
http://blog.greensock.com/textmetrics/

(In AS3 invece credo ci siano dei metodi della classe textfield che ti restituisce la lunghezza della linea)

[Kaneda81]

Ti posto la soluzione in AS3 (titolo_txt e testo_txt sono 2 campi di testo dinamici che devi avere sullo stage, mentre gli import sono della library di tween greensock, scaricabile gratuitamente).

import com.greensock.*;
import com.greensock.easing.*;

var s:Array = [];
var a:Array = [];
var speed:Number = 2;
var titleShape:Shape;
var titleShapeW:Number;

function createShape()
{
    titleShape = addTitleShape();
    titleShapeW = titolo_txt.textWidth + 5;
    
    for (var i:int = 0; i<testo_txt.bottomScrollV; i++)
    {
        var metrics:TextLineMetrics = testo_txt.getLineMetrics(i);
        var h:Number = metrics.height;
        var newY:Number = testo_txt.y + (metrics.height * i);
        var textShape:Shape = addTextShape(newY, h);
        
        s.push(textShape);
        a.push(metrics.width+2);
    }
    
    goTween();
}

function addTextShape(newY:Number, h:Number):Shape
{
    var s:Shape = new Shape();
    s.x = testo_txt.x - 3;
    s.y = newY;
    
    s.graphics.beginFill(0x999999, 0.75);
    s.graphics.drawRect(0, 0, 2, h);
    
    return addChild(s) as Shape;
}

function addTitleShape():Shape
{
    var s:Shape = new Shape();
    s.x = titolo_txt.x - 3;
    s.y = titolo_txt.y;
    
    s.graphics.beginFill(0xCC0000, 0.75);
    s.graphics.drawRect(0, 0, 2, titolo_txt.height);
    
    return addChild(s) as Shape;
}

function goTween()
{
    var timeline:TimelineMax = new TimelineMax();
    timeline.insert(TweenMax.to(titleShape, speed, {width:titleShapeW, ease:Bounce.easeOut}) );
    for (var i:int = 0; i<s.length; i++)
    {
        timeline.insert(TweenMax.to(s[i], speed, {width:a[i], ease:Bounce.easeOut}))
    }
}

createShape(); 

E' fatta al volo quindi è scritta un pò a cavolo, il principio di fondo cmq è questo.