fadeIn + fadeOut

[ouagadugu]

Hallo,
erstmal vielen Dank an alle Problemlöser, meistens konnte ich meine eigenen Fehler lösen, indem ich Hilfen auf ähnliche Probleme anderer umsetzte. Trotzdem komme ich im Moment nicht weiter.
Habe 2 Schaltflächen (sf1+sf2) sowie 2 Container. beide Container sind auf alpha 0 gesetzt. Ich will, dass beim klicken der sf1 der container1 einfaded (bei sf2 - container2). funktioniert auch. Allerdings soll, wenn ein container nach dem Klick enigefaded ist, dieser wieder ausfaden, wenn man die andere sf klickt. Man soll also hin und her faden können. (später dann mit 8 Schaltflächen, aber zuerst will ich mal den Anfang in den Griff bekommen.
Hoffe jemand kann mir helfen.
Gruss, Michel

sf1.onPress = function() {
container1.loadMovie;
if (container2_alpha>=100) {
function fadeOut() {
container2._alpha -= 5;
if (container2_alpha=0) {
clearInterval(idOut);
}
}
idOut = setInterval(fadeOut, 5);
}
function fadeIn() {
container1._alpha += 5;
if (container1_alpha>=100) {
clearInterval(idIn);
}
}
idIn = setInterval(fadeIn, 5);
};
sf2.onPress = function() {
container2.loadMovie;
if (container1_alpha>=100) {
function fadeOut() {
container1._alpha -= 5;
if (container1_alpha=0) {
clearInterval(idOut);
}
}
idOut = setInterval(fadeOut, 5);
}
function fadeIn() {
container2._alpha += 5;
if (container2_alpha>=100) {
clearInterval(id);
}
}
id = setInterval(fadeIn, 5);
};

 

[Tobias Menzel]

Hi,

ich würde das ganze in eine einheitliche Funktion auf der Hauptzeitleiste kapseln:

// Funktion auf der Hauptzeitleiste:
var container_anzahl = 8;

function setContainer(n) {
    this["container" + n].adest = 100;
    for (var i=1; i<=container_anzahl; i++) {
        if (i != n) this["container" + i].adest = 0;
        this["container" + i].onEnterFrame = function() {
            this._alpha += (this.adest - this._alpha) / 5;
            if (Math.abs(this.adest - this._alpha) < 1) delete this.onEnterFrame;
        }
    }
}

Auf den einzelnen Buttons (am Beispiel von Button 5):
on (release) {
    _root.setContainer(5); // Nummer des Containers
}

Gruß

P.S.: mit setInterval statt onEnterFrame geht das auch - wenn gewünscht, poste ich auch so eine Variante

P.P.S.: Bitte verwende beim Posten von Code CODE- oder PHP-Tags, danke!
.

 

[Budman]

P.S.: mit setInterval statt onEnterFrame geht das auch - wenn gewünscht, poste ich auch so eine Variante

Wenn's nicht zu unverschämt ist, aber das würde mich interessieren!

Danke, aber nur, wenn's nicht zu viel Mühe macht!

Gruss

 

[ouagadugu]

Mein lieber Datic,
Du bist der Größte, habe schon Stunden damit verbracht, mein Problem in den Griff zu bekommen und Du schreibst mir so ein kurzes script und alles läuft wie geschmiert.
Allerdings hast Du eine Klammer vergessen, aber damit wolltest Du mich nur testen, oder?....habs in jedem Fall rausgefunden, obwohl ich sonst ehrlich gesagt nicht viel kapiert habe.
Besten Dank
Michel

 

[Tobias Menzel]

Klammer? Welche Klammer? ^^

Hier noch mal eine Version mit setInterval:

In diesem Fall benötigt der Containerclip einige "innere" Funktionen (bzw. ich habe es auf die Schnelle nicht geschafft, setInterval eindeutig einem Containerclip zuzuordnen), die wir in einer neuen Ebene des Containers anlegen:

var IV = 0;

function fade() {
	var spd = (Math.abs(this.adest - this._alpha)) / (this.adest - this._alpha);
	if (Math.abs(this.adest - this._alpha) >= 1) {
		this._alpha += spd;
                // Lineares Fading statt progressiv mit enterFrame.
	} else {
		this._alpha = this.adest;
		clearInterval(this.IV);
	}
}

function startFade() {
	clearInverval(IV);
	IV = setInterval(function() { fade(); }, 20); // Interval in Milisekunden
}

Der Code auf der Hauptzeitleiste sieht dann so aus:

var container_anzahl = 8;

function setContainer(n) {
    this["container" + n].adest = 100;
    for (var i=1; i<=container_anzahl; i++) {
        if (i != n) this["container" + i].adest = 50;
        this["container" + i].startFade();
    }
}

Gruß
.

 

[ouagadugu]

Beim ersten code, den Du gepostet hast, fehlte die letzte Klammer dieser Zeile:
if (Math.abs(this.adest - this._alpha) < 1))
das mit dem neuen, zweiten code probiere ich auch mal aus.

übrigens, ist es kompliziert, das ausfaden schneller zu machen als das einfaden?
wenn nicht, wäre ich für einen Tip dankbar.
gruß
Michel

 

[Tobias Menzel]

Beim ersten code, den Du gepostet hast, fehlte die letzte Klammer dieser Zeile:

Ich weiß; ich habs heimlich korrigiert und Unschuld geheuchelt. ^^

Unterschiedliche Geschwindigkeiten beim Faden kannst Du z.B. durch andere Intervalle erreichen:

function startFade() {
    clearInverval(IV);
    var timeout = 20; // 20 ms beim Ausfaden
    if (this._alpha > this.adest) timeout = 40; // 40 ms beim Einfaden
    IV = setInterval(function() { fade(); }, timeout);
}

Gruß
.

 

[ouagadugu]

Dachte schon, ich bin bescheuert, als ich beim zweiten mal die Klammer gesehen habe, (zum Glück mache immer zuerst Bildschirmfotos von allem und das beruhigte mich ein wenig)
Fade Geschwindigkeit probiere ich gleich morgen aus, muss jetzt weg. Da meine page noch lange nicht fertig ist, bin ich sicher, dass noch das ein oder andere Problem auftritt.
Bis jetzt erst mal Danke
Michel

 

[Budman]

Hallo!

Danke Datic, ist auf jeden Fall sehr aufschlussreich!

Ich hätte da jetzt noch einen anderen Ansatz und würde gerne von euch beiden wissen, was Ihr von der Herangehensweise haltet

import mx.transitions.Tween;
import mx.transitions.easing.*;
fadeIn = function(target_mc) {
	easeType = Strong.easeOut;
	var fadeInTween = new Tween(target_mc, "_alpha", easeType, 0, 100, 3, true);

Oder gehe ich da jetzt total an dem von ouagadugu gewünschten vorbei?

Gruss

 

[Tobias Menzel]

Hi,

hmm, wie lautet denn der Quelltext für die Klasse "Tween"? Bzw.: Wenn diese Klassen mit Flash mitgeliefert werden, wo kann ich eine Auflistung/Referenz dieser bekommen? In meiner Dokumentation finde ich nichts darüber...

Gruß
.