AC3 Farbe Ändern

[ray2mi]

Hallo, ich habe ein kleines Script von einem Button...
wenn man auf den Btn geht dann verändert sich die Opacity.

Nun würde ich es gerne so machen, dass wenn man auf den btn geht,
sich die Farbe ändert,
wenn man wieder von dem Btn geht, die Farbe sich in die Ausgnagsfarbe ändert,
und, wenn man drauf klickt,
sich ebenfalls eine andere Farbe auftut.

mein aktuelles Script

import fl.transitions.Tween;
import fl.transitions.easing.*;
import flash.events.MouseEvent;

//---Start_btn property change---\\\
var page:URLRequest = new URLRequest("http://www.web.de");
news_btn.addEventListener(MouseEvent.CLICK, newsClick);
news_btn.addEventListener(MouseEvent.MOUSE_OUT, newsOut);
news_btn.addEventListener(MouseEvent.MOUSE_OVER, newsOver);
//-----------------------------------------------------------


function newsClick(event:MouseEvent):void
{
	var onTween:Tween = new Tween(news_btn,"color",Strong.easeOut,0,0.5,1,true);
		//wenn Btn geklickt, alpha wird um 50% hoch gesetzt
	navigateToURL(page,"_self");
}

function newsOut(event:MouseEvent):void
{
	var outTween:Tween = new Tween(news_btn,"alpha",Strong.easeOut,0,1,1,true);
		//wenn Zeiger von Btn weg, alpha wird um 100% hoch gesetzt
}

function newsOver(event:MouseEvent):void
{
	var overTween:Tween = new Tween(news_btn,"alpha",Strong.easeOut,1,0,1,true);
		//wenn Zeiger auf Btn geht, alpha wird um 100% runter gesetzt
}

 

[tobee]

Man wüsste wissen wie der news_btn aufgebaut ist

 

[ray2mi]

der Newsbtn ist ein Movieclip
und der Einfachheit einfach nur ein rotes Quadrat...
wenn man dann drüber geht soll es ins Blaue faden und wenn man weg geht wieder ins Rote faden.
Bei einem Click sollte sich die Farbe oder die Größe verändern.
Ich muss das aber alles mit AC3 machen.

 

[tobee]

Soweit ich das weiß musst du das über die Timelime animieren

 

[Denniz]

und der Einfachheit einfach nur ein rotes Quadrat...
wenn man dann drüber geht soll es ins Blaue faden und wenn man weg geht wieder ins Rote faden

Hi,

ein einfaches beispiel wie man die Farbtransition mit reinem AS3 hinbekommt.
Die Variablen col1 &col2 bestimmen Ausgangs- und Endfarbe.
0xFFFF0000 wäre 100% Alpha und Rot.

var mc:Sprite = new Sprite();
mc.graphics.beginFill(0xFF0000, 1);
mc.graphics.drawRect(0, 0, 200, 200);
mc.graphics.endFill();
addChild(mc);
 
 
var step = 0;
var maxstep = 30;
var col1:Number = 0xFFFF0000
var col2:Number = 0xFF00FF00
 
var color_trans=  new ColorTransform();
this.addEventListener(Event.ENTER_FRAME, enterFrameHandler);
function enterFrameHandler(e:Event):void {
    color_trans.color=transformColor( col1, col2, step++, maxstep );
    mc.transform.colorTransform = color_trans;
    if (step == maxstep) {this.removeEventListener(Event.ENTER_FRAME, enterFrameHandler); step = 0;}
}
 
function transformColor( argbColorOld:Number, argbColorNew:Number, step:Number, steps_max:Number ):Number {
    var aOff:Number = (argbColorOld >> 24) - ( ( (argbColorOld >> 24) - (argbColorNew >> 24) ) * ( step / steps_max ) );
    var rOff:Number = (argbColorOld >> 16 & 0xFF) - ( ( (argbColorOld >> 16 & 0xFF) - (argbColorNew >> 16 & 0xFF) ) * ( step / steps_max ) );
    var gOff:Number = (argbColorOld >> 8 & 0xFF) - ( ( (argbColorOld >> 8 & 0xFF) - (argbColorNew >> 8 & 0xFF) ) * ( step / steps_max ) );
    var bOff:Number = (argbColorOld & 0xFF) - ( ( (argbColorOld & 0xFF)- (argbColorNew & 0xFF) ) * ( step / steps_max ) );
    return (aOff << 24 | rOff << 16 | gOff << 8 | bOff);
}

 

[ray2mi]

ohw damn...was ist das denn
Ich habe eben versucht das mal nachzuvollziehen und das ist mir nur bedingt gelungen.

Ich dachte es wäre ebenso einfach wie das mit dem Alpha, einfach einen Satz AC3 schreiben aber, dass jetzt so ein Hammer kommt.

Ich habe keinen Plan wie ich dieses Script meinem kleinen Button unterordne

 

[Denniz]

Kannst du die fla nochmal als CS3 kompatible Version hochladen?

 

[tobee]

@Denniz:
ColorTransform kannte ich noch nicht. Danke für das anschauliche Beispiel.
Leider verstehe ich die transformColor Funktion noch nicht ganz. Ich bin leider nicht so fit mit Bitwise Operators. Wäre net wenn du Diese kurz erklärst.
Danke

Anbei mein FDT3/AS3 "Nachbau":

package {
	import flash.display.MovieClip;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.TimerEvent;
	import flash.geom.ColorTransform;
	import flash.utils.Timer;

	public class Main extends MovieClip {

		private var _timer:Timer;
		private var _transform:ColorTransform;
		private var _colorStart:uint = 0x000000;
		private var _colorEnd:uint = 0xffffff;
		private var _step:uint = 0;
		private var _maxStep:uint = 100;
		private var _mc:Sprite;

		public function Main():void {
			addEventListener(Event.ADDED_TO_STAGE, initialize);
		}

		private function initialize(event:Event):void {
			if(hasEventListener(Event.ADDED_TO_STAGE)) {
				removeEventListener(Event.ADDED_TO_STAGE, initialize);
			}
			
			_mc = new Sprite();
			_mc.graphics.beginFill(0xFF0000, 1);
			_mc.graphics.drawRect(0, 0, 200, 200);
			_mc.graphics.endFill();
			addChild(_mc);
			
			_transform = new ColorTransform();
			
			_timer = new Timer(10);
			_timer.addEventListener(TimerEvent.TIMER, update);
			_timer.start();
		}

		private function update(event:TimerEvent):void {
			_transform.color = transformColor(_colorStart, _colorEnd, _step++, _maxStep);
			_mc.transform.colorTransform = _transform;
			if(_step == _maxStep) {
				_timer.stop();
			}
		}

		private function transformColor(colorStart:uint, colorEnd:uint, step:Number, maxStep:uint):uint {
			var aOff:Number = (colorStart >> 24) - ( ( (colorStart >> 24) - (colorEnd >> 24) ) * ( step / maxStep ) );
			var rOff:Number = (colorStart >> 16 & 0xff) - ( ( (colorStart >> 16 & 0xff) - (colorEnd >> 16 & 0xff) ) * ( step / maxStep ) );
			var gOff:Number = (colorStart >> 8 & 0xff) - ( ( (colorStart >> 8 & 0xff) - (colorEnd >> 8 & 0xff) ) * ( step / maxStep ) );
			var bOff:Number = (colorStart & 0xff) - ( ( (colorStart & 0xff) - (colorEnd & 0xff) ) * ( step / maxStep ) );
			return (aOff << 24 | rOff << 16 | gOff << 8 | bOff);
		}
	}
}

 

[Denniz]

Mit dem Bitwise Operator ziehst du die einzelnen werte für die Alpha,Rot,Grün,Blau Kanäle. Danach wird ein Abstandswert (Offset) ermittelt. Das ist ein Wert der quasi die Differenz zwischen Ausgangsfarbe und Endfarbe ist und abhängig von dem jeweiligen step und anzahl der Max Steps ist.
Maxstep gibt an wieviel Farben bei der Transition angezeigt werden sollen.
Also wenn du 2 Farbwerte hast die eine differenz von 1000 haben und 10 MaxSteps ausführst dann gibt die Funktion im ersten Step 100 ((1000 / maxSteps) * step ), im 2ten Step 200 usw raus. Dadurch wird die farbe des MC's transformiert . Eigentlich ganz easy..