Color.interpolateColor - creare transizioni di colore

[Flep]

Ciauz !

Questo Flash tutorial spiega come applicare delle transizioni di colore su una MovieClip utilizzando il metodo statico interpolateColor della classe Color di Actionscript 3.0.
Vogliamo ad esempio creare uno sfondo che cambia colore progressivamente in base alla sezione in cui ci troviamo ?
Oppure creare dei bottoni che ad ogni evento del mouse creano una transizione di colore diversa ?

Vediamo come fare...

Creo un FLA che salvo con nome ' main.fla '.
Con il codice seguente, disegno e creo una MovieClip di forma quadrata e al click sullo stage eseguo una transizione di colore della MovieClip stessa.

import fl.transitions.Tween;
import fl.transitions.TweenEvent;
import fl.transitions.easing.Strong;
import fl.motion.Color;
import flash.events.Event;
import flash.geom.ColorTransform;

var start_color:uint=0xCCFF00;
var final_color:uint=0x003399;
var clip_mc:MovieClip=new MovieClip();
clip_mc.graphics.beginFill(start_color,1);
clip_mc.graphics.drawRect(100,100,100,100);
clip_mc.graphics.endFill();
addChild(clip_mc);

 
var colorInfo:ColorTransform=clip_mc.transform.colorTransform;
function initTween(event:MouseEvent):void
{
	var my_tween:Tween=new Tween(clip_mc,'alpha',Strong.easeOut,0,1,1,true);
	my_tween.addEventListener(TweenEvent.MOTION_CHANGE,tweenToFinal);
}
function tweenToFinal(event:TweenEvent):void
{
	colorInfo.color=Color.interpolateColor(start_color,final_color,event.position);
	clip_mc.transform.colorTransform=colorInfo;
}
stage.addEventListener(MouseEvent.CLICK,initTween);

Risultato ( cliccare sullo stage ) :

Analizziamo il codice

importo le classi che mi servono:
import fl.transitions.Tween;
import fl.transitions.TweenEvent;
import fl.transitions.easing.Strong;
import fl.motion.Color;
import flash.events.Event;
import flash.geom.ColorTransform;

creo due variabili di tipo uint che contengono rispettivamente il colore iniziale e quello finale
var start_color:uint=0xCCFF00;
var final_color:uint=0x003399;
creo una nuova MovieClip e disegno un quadrato al suo interno con il colore contenuto nella variabile start_color
var clip_mc:MovieClip=new MovieClip();
clip_mc.graphics.beginFill(start_color,1);
clip_mc.graphics.drawRect(100,100,100,100);
clip_mc.graphics.endFill();
aggiungo clip_mc allo stage
addChild(clip_mc);

creo una variabile di tipo ColorTransform e gli assegno il colorTransfrom della proprietà transform di clip_mc
var colorInfo:ColorTransform=clip_mc.transform.colorTr ansform;

creo una funzione che verrà chiamata al momento del click del mouse
function initTween(event:MouseEvent):void
{
creo una nuova Tween e gli passo i parametri che preferisco
var my_tween:Tween=new Tween(clip_mc,'alpha',Strong.easeOut,0,1,1,true);
aggiungo un listener a my_tween in ascolto dell' evento MOTION_CHANGE che chiamerà la funzione tweenToFinal
my_tween.addEventListener(TweenEvent.MOTION_CHANGE ,tweenToFinal);
}

function tweenToFinal(event:TweenEvent):void
{
assegno alla proprietà color della variabile colorInfo ( che è di tipo ColorTransform ) il valore ottenuto chiamando il metodo statico interpolateColor della classe Color, passandogli un colore iniziale, uno finale ed il valore del momento della tween ( event.position ) che andrà progressivamente da 0 a 1
colorInfo.color=Color.interpolateColor(start_color ,final_color,event.position);
assegno il colore a clip_mc sempre attraverso il colorTransform della sua proprietà transform
clip_mc.transform.colorTransform=colorInfo;
}
aggiungo il listener allo stage in ascolto dell' evento CLICK
stage.addEventListener(MouseEvent.CLICK,initTween) ;

Alla prossima !

[cucamod]

Scopo : Transitare da un colore ad un altro quando scatta il timer.
ho provato così:


import fl.transitions.Tween;
import fl.transitions.TweenEvent;
import fl.transitions.easing.Strong;
import fl.motion.Color;
import flash.utils.Timer;
import flash.geom.ColorTransform;
// creo un timer, 10000= 10 secondi, 0 = numero infinito di chiamate
var timer:Timer=new Timer(5000,0);
// aggiugo un listener al timer che chiamerà la funzione scattaEvento
timer.addEventListener(TimerEvent.TIMER,scattaEven to);
// faccio partire il timer
timer.start();
// implemento la funzione scattaEvento
function scattaEvento(evt:TimerEvent):void
{
var n:Number=Math.random()*0xFFFFFF;
var colorInfo:ColorTransform=clip_mc.transform.colorTr ansform;
var my_tween:Tween=new Tween(clip_mc,'alpha',Strong.easeOut,0,1,1,true);
colorInfo.color=Color.interpolateColor(n);
clip_mc.transform.colorTransform=colorInfo;
}

Mi da il seguente Errore
descriz: 1136: Numero di argomenti non valido. Numero previsto: 3.
Sorgente:colorInfo.color=Color.interpolateColor(n) ;

[Flep]

Devi farlo esattamente con le 2 funzioni initTween e tweenToFinal, cambia evt:MouseEvent con evt:TimerEvent.

[cucamod]

niente sempre errore...
nella riga
colorInfo.color=Color.interpolateColor(start_color ,final_color,event.position); nel mio caso che voglio il colore random devo sostituire Start_color,final_color con la funziona coloreRandom? ma si puo collegare alla funzione?

[Flep]

Dovresti lavorare così:

import fl.transitions.Tween;
import fl.transitions.TweenEvent;
import fl.transitions.easing.Strong;
import fl.motion.Color;
import flash.events.Event;
import flash.geom.ColorTransform;

var start_color:uint=0x99FF66;
var final_color:uint;
var colorInfo:ColorTransform;
var timer:Timer=new Timer(2000,0);
timer.addEventListener(TimerEvent.TIMER,initTween);
timer.start();

function initTween(event:TimerEvent):void
{
	final_color=Math.random()*0xFFFFFF;
	colorInfo=clip_mc.transform.colorTransform;
	var my_tween:Tween=new Tween(clip_mc,'alpha',Strong.easeOut,0,1,1,true);
	my_tween.addEventListener(TweenEvent.MOTION_CHANGE,tweenToFinal);
}
function tweenToFinal(event:TweenEvent):void
{
	colorInfo.color=Color.interpolateColor(start_color,final_color,event.position);
	clip_mc.transform.colorTransform=colorInfo;
}

Comunque, per farlo ancora meglio, dovresti utilizzare il tweener di google group ( il link che ti ho dato ).
Ti faccio un esempio con quello appena posso

[Flep]

Guarda questo esempio:

[cucamod]

FLEP sei un grande come sempre grazie! spero di ricambiare il piu presto!

[cucamod]

incredibile le Tweener di google fanno proprio quello che cercavo!
Tweener.addTween(clip_mc,{_color:Math.random()*0xF FFFFF,time:1.5,transition:"easeOutCubic"});
cambiando time:1.5 con un valore piu alto , si ottiene una transizione piu lenta , proprio come mi occorreva!
ottimo.. grazie Flep

[Riuma]

Ciao Flep,
sto cercando di usare il Tweener nel tuo componente slider eventi 2 però c'è un problema: nn riesco a intercettare solo il bg di ogni menù item; nello showEvent ho messo Tweener.addTween(clips_array[i].bg_mc,{_color:objects_array[i].coloritem,time:0.5,transition:"easeOutCubic"});
però nn me lo prende: com'è fatta la struttura di ogni menù item? bg_mc nn è figlio di clips_array???

Ciao, grazie.

W

[Riuma]

Scusa, ho risolto con clips_array[i].getChildAt(0) e clips_array[i].getChildAt(1)

Ciaoooooooooo