Größe einer Schaltfläche wie Tween ändern (Actionscript)

[Shockdoc]

Hi,

Wie kann ich die Größe einer Schaltfläche wie bei einem Tween langsam ändern?

 

[Tobias Menzel]

Hi,

nun, Du könntest in Deiner Schaltfläche einen MovieClip einsetzen, der getweent wird (lassen sich Schaltflächenobjekte denn nicht tweenen?).

Alternativ kannst Du beliebige Objekte auch per AS skalieren - schau dazu mal in die Referenz unter "_width", "_height", "_xscale", "_yscale" und "onEnterFrame".

Gruß
.

 

[Shockdoc]

Ja, aber dann hat der MC ja keine Schaltflächeneigenschaften mehr...

 

[Tobias Menzel]

... ich kann generell nur empfehlen, keine Schaltflächen, sondern ausschließlich MovieClips als Buttons etc. zu verwenden. Die drei popligen Zustände einer default-Schaltfläche lassen sich mit wenigen Zeilen "onRollOver" ,"onRelease" und "gotoAndStop" realisieren und mit wenig Aufwand noch viel mehr.

Ausserdem kannst Du doch auch in die 3 Schlüsselbilder (Zustände) einer Schaltfläche MovieClips packen, die über ein Tweening verfügen.

Letzendlich lassen sich sowohl ganze Schaltflächen tweenen als auch per AS skalieren. (siehe mein Eingangsposting)

Poste doch mal die Datei mit Deiner Schaltfläche und sag uns genau, wann sie sich wie vergrößern soll, dann mache ich Dir gerne ein Beispiel fertig.

EDIT: Im Anhang ein Beispiel mit drei verschiedenen Ansätzen.

Gruß
.

 

[ikon]

Hallo Tobias,
sorry dass ich den Thread wieder aufgreifen muss, aber mich interessiert ob es möglich ist Dein 2tes beispiel so umzuschreiben, daß es nach einer Weile aufhört größer/kleiner zu werden. Die Veränderungswerte müssten ja eigentlich nur durch Variablen ausgetauscht werden dessen Wert jeden Frame ein wenig verringert wird, bis der Movieclip wieder 100% erreicht hat. Ich tu mich da im Moment leider etwas schwer, bin zugegeben auch nicht gerade der Flashprofi... für einen Lösungsansatz wär ich sehr dankbar.
ikon

 

[luke_the_duke]

Hallo,

du könntest mit einer Counter-Variable i die Animation für eine gewisse Anzahl Frames laufen lassen:

this.onPress = function() {
	var i = 50;
        var stime = getTimer();
	this.onEnterFrame = function() {
		if (i>0) {
			
			this._yscale = 150+Math.sin((getTimer()-stime)/100)*50;
			i--;
		} else {
			delete this.onEnterFrame;
		}
	};
};

Animationstechnisch noch ein bisschen schicker würde es aussehen, wenn du den Counter i in die Berechnung einbeziehst. Die Variable endScale steht für den _scale-Wert, die der Button am Schluss haben wird.

this.onPress = function() {
	var i = 50;
	var endScale = 150;
        var stime = getTimer();
	this.onEnterFrame = function() {
		if (i>0) {
			
			this._yscale = endScale+Math.sin((getTimer()-stime)/100)*i;
			i--;
		} else {
			delete this.onEnterFrame;
		}
	};
};

gruss

EDIT: Skripte korrigiert.

 

[ikon]

Hi,
danke für die schnelle Antwort. Leider funktioniert das ganze nicht so ganz und ich komm nicht dahinter warum (habe den zweiten Queltext verwendet). Wenn ich den unverändert einbaue, wird mein MC zwar größer, bleibt dann aber bei der Größe stehen. Man könnte meinen, die Sinusberechnung wird völlig außer Acht gelassen, der Counter sowieso. Wenn ich nun aber Abfrage ob die Variable "endScale">0 ist, anstelle der Counter "i">0, und die "endScale" anstelle "i"am Ende der "if"-Schleife um jeweils 1 Iteration verringere, wird der MC erst auf 150% skaliert und schrumpft dann auf 100% zurück. Auch hier wird die Sinusberechnung ignoriert.

Quelltext mit veränderter Abfrage:

stop();

this.onRollOver = function() {
	gotoAndStop(2);
}

this.onRollOut = this.onDragOut = function() {
	gotoAndStop(1);
	this._yscale = 100;
	delete this.onEnterFrame;
}

this.onPress = function() {
    var i = 50;
    var endScale = 150;
    this.onEnterFrame = function() {
        if (endScale>100) {
            var stime = getTimer();
            this._yscale = endScale + Math.sin ((getTimer() - stime) / 100) *i;
            endScale--;
        } else {
            delete this.onEnterFrame;
			gotoAndStop(1);
        }
    }
}

this.onRelease = function() {
	gotoAndStop(2);
	this._yscale = 100;
	delete this.onEnterFrame;
}

 

[luke_the_duke]

Hallo,

hab ich mal wieder gepatzert... :-(!

Aber am Iterator liegts nicht, der scheint nur keinen Einfluss zu haben, weil du den auch weder inkre- noch dekrementierst. Nein, der Fehler liegt (übrigens bei beiden Skripts) daran, dass ich Schussel die Offset-Variable für die Millisekunden in die onEnterFrame-Schlaufe gepackt hab, damit wird immer der aktuelle Timestamp von sich selbst abgezählt, ergo der Sinus von 0 genommen, damit kommt natürlich niemand weit . Ich hab nun die obigen Skripts korrigiert, so dass sie nun wunschgemäss funktionieren sollten.

gruss

 

[ikon]

Hätt ich eigentlich auch selbst drauf kommen können... aber das ist wohl auf mein mangelndes Verständnis von OOP zurückzuführen. Hab auch die Variable "endScale" wieder rausgeschmissen, weils dann auf 150% stehen bleibt und der Wert eh fix ist. Sieht jetzt so aus das ganze:

this.onRollOver = function() {
	gotoAndStop(2);
    var i = 25;
	var stime = getTimer();
    this.onEnterFrame = function() {
		gotoAndStop(3);
        if (i>0) {
            this._xscale = 100 + Math.sin ((getTimer() - stime) / 100) *i;
            this._yscale = 100 + Math.sin ((getTimer() - stime) / 100) *i;
            i--;
		} else {
            delete this.onEnterFrame;
			gotoAndStop(1);
        }
    }
}