FadeIN und Out mit mehreren Objekten !gleichzeitig!

[ChrizBMX]

Hallo liebe Community!

Ich bin dabei einen Videoplayer zu erstellen.
Jedoch möchte ich meinen eigenen Player einrichten und natürlich einige extrafunktionen einbauen.
Ich habe mich in den letzten 2 Tagen stark mit Fades beschäftigt. Einen einfachen FadeIn und Out darzustellen ist kein Problem.
Jedoch, mein Problem:

Ich möchte, dass die Kontrolleiste vom Videoplayer beim RollOut schön ausgeblendet wird (wird langsam transparent.)
Dasselbe umgekehrt, wenn man mit der Maus wieder über die Leiste fährt, dass sie wieder langsam erscheint.

Die Kontrolleiste enthält aber mehrere Movieclips.
Folgende sind dabei:

controlBar = die komplette Leiste
playPause = play/Pause Button
rewindButton = "zurück zum Anfang"-Button
loader = Ladebalken, wie weit Video schon geladen ist
mute = Soundeinstellung

Leider bring ichs nicht dazu, alle gleichzeitig einzublenden und auch gleichzeitig auszublenden, wie z.b. in Youtube.

Folgenden Code hab ich bisher, aber der schaffts leider nur mit einem einzigen Objekt, hier controlBar:

inS = 5;
outS = 5;

controlBar._alpha = 0;

controlBar.onRollOver = function(){
	this.onEnterFrame = function(){
		this._alpha += inS;
		if(this._alpha > 85){
			this._alpha = 85;
			delete this.onEnterFrame;
		}
	}
}
controlBar.onRollOut = function(){
	this.onEnterFrame = function(){
		this._alpha -= outS;
		if(this._alpha < 0){
			this._alpha = 0;
			delete this.onEnterFrame;
		}
	}
}

Wenn ich das bei jedem Objekt mache oder es zusammenfasse, dann taucht das ein oder andere Objekt trotzdem nicht auf oder beim herüberfahren verschwindet dann die ganze Leiste...

Ich hoffe ihr könnt mir helfen!

Danke schonmal im Voraus

Chris

[milchreis]

Um mehreren Dingen das gleichzeitige Verschwinden zu ermöglichen, stecke sie alle in einen container movieclip (MC) und fade diesen aus.

Glückwunsch das du dich mit den Fades durchgeboxt hast und ein Erfolgserlebnis hattest, das ist immer eine wichtige Sache, auch selbst etwas auf die Beine zu stellen.

"Programmieren" ist eigentlich Latein und bedeutet "bezahlte Faulheit".
Also tue niemals etwas selbst, das schon vor dir jemand getan hat.

Fades sind Animationen.
Animationen sind Änderungen bestimmter Eigenschaften über eine Zeitspanne.
In Flash nennt man so was auch Tween.
Für Tweens gibt es fertige Engines, die dir die Arbeit (und Zeit) abnehmen.

Getting Started Tweening « GreenSock

[ChrizBMX]

Danke für die superschnelle Antwort!

Doch leider hab ich mit dieser Antwort schon gerechnet.
Genau das hab ich nämlich schon Probiert, aber wenn ich alle zusammen zu einem Symbol zusammenfasse, dann kann ich anschließend die Buttons nicht mehr betätigen, sondern der Film läuft ers gar nicht ab (weil ich kein autoplay wollte, sondern erst mit klick auf "play" der Film gestartet werden sollte!)

Ich wünschte man könnte das zusammengefasste Symbol "eine Ebene tiefer" als die Kontrolleiste selber legen, doch das funktioniert auch nicht irgendwie.

DIe Ebenen verlaufen folgendermaßen:

controls = Buttons
controlBar = Kontrolleiste
video = Video
actions = ActionScript Code..

Ich hoffe es gibt noch einen anderen Lösungsweg.

[milchreis]

achja, ich vergaß.

Du musst dem container einen instanznamen geben (so wie du es auch bei den Steuerelementen gemacht hast).
Um zu deinen Knöpfen zu kommen (um diese anzusprechen) musst du nun, wenn du auf der Hauptzeitleiste bist, über den container gehen.

Sei der isntanzname "container" also zB:

PHP-Code:

container.controlBar.onRollOver... 


Vernünftiger Weise würde man die Sache in eine Klasse packen, aber das würde wohl zuweit führen.

Edit: dein altes skript würde so wie es war funktionieren, wenn du es auf die Zeitleiste des containers legst.
Das ist aber Tineff hoch drei, weil du dann irgendwann nicht mehr durchsiehst wo welcher code steht, also immer schön auf der Hauptzeitleiste bleiben.

[ChrizBMX]

Habe es geändert, funktioniert nicht ganz.
Die Buttons lassen sich nicht ansprechen...

Ganzer Code:

var nc:NetConnection = new NetConnection();
nc.connect(null);

var ns:NetStream = new NetStream(nc);

theVideo.attachVideo(ns);

ns.play("video.flv");
ns.pause();

// Controls

// Controlbar

inS = 5;
outS = 5;

fadeBlock._alpha = 85;

fadeBlock.onRollOver = function() 
{
	this.onEnterFrame = function() 
	{
		this._alpha += inS;
		if(this._alpha > 85) 
		{
			this._alpha = 85;
			delete this.onEnterFrame;
		}
	}
}
fadeBlock.onRollOut = function() 
{
	this.onEnterFrame = function() 
	{
		this._alpha -= outS;
		if(this._alpha < 0) 
		{
			this._alpha = 0;
			delete this.onEnterFrame;
		}
	}
}

// Rewind

fadeBlock.rewindButton.onRollOver = function()
{
	this.gotoAndStop("rewindOver");
}

fadeBlock.rewindButton.onRollOut = fadeBlock.rewindButton.onReleaseOutside = function()
{
	this.gotoAndStop("rewind");
}

fadeBlock.rewindButton.onRelease = function()
{
	ns.seek(0);
}

// Play - Pause

fadeBlock.playPause.onRollOver = function()
{
	if(this._currentframe == 1) 
	{
		this.gotoAndStop("playOver");
	}
	else
	{
		this.gotoAndStop("pauseOver");
	}
}

fadeBlock.playPause.onRollOut = fadeBlock.playPause.onReleaseOutside = function()
{
	if(this._currentframe == 10) this.gotoAndStop("play");
	else this.gotoAndStop("pause");
}

fadeBlock.playPause.onRelease = function()
{
	if(this._currentframe == 10)
	{
		this.gotoAndStop("pauseOver");
		ns.pause();
	}
	else
	{
		this.gotoAndStop("playOver");
		ns.pause();
	}
}

So lassen sich die Buttons nicht anklicken, der Fadeeffekt jedoch ist genau richtig.
Wenn ich den Code umändere, bei Fadeteil in:

fadeBlock.controlBar.onRollOver....

dann wird nur die Kontrolleiste ein und ausgefaded. Die Buttons bleiben jedoch IMMER 100% sichtbar, auch wenn die Leiste schon weg ist.

[milchreis]

In As2 ist es so nicht möglich zwei gleiche Eventmethoden in einer verschachtelten Struktur zu haben.

Also Container mit onRollOver und ein Etwas im Container auch mit onRollOver.

Allerdings bin ich aus As2 auch schon eine Weile raus.
Mir fällt die Umgehung dieses Problem im Moment nicht ein, aber hier gibt's ja noch andere Leute die auf dem Gebiet bewandert sind =)

[ChrizBMX]

Lässt sich das beheben, indem man den Videoplayer in AS3.0 bastelt?

[Martin Kraft]

Zitat von ChrizBMX

Lässt sich das beheben, indem man den Videoplayer in AS3.0 bastelt?

Ja, lässt es sich.
Da Du dann aber quasi wieder bei 0 anfangen musst, dürfte Du dafür in andere Problem rennen. Hast Du schonmal mit AS3 gearbeitet?

[ChrizBMX]

Nicht wirklich. Ich habe gestern ein bisschen gestöbert, was die unterschiede betrifft. Aber so viele unterschiede gibt es ja nicht, jedenfalls gibt es keine unterschiede wenn ich mein script in AS 3 verfassen würde, außer dass es dann funktioniert...

Das mit dem von 0 anfangen ist kein problem, ging ziemlich schnell

Danke euch! Ich werde heute abend mal probieren, dann melde ich mich wieder.

[Martin Kraft]

Zitat von ChrizBMX

Nicht wirklich. Ich habe gestern ein bisschen gestöbert, was die unterschiede betrifft. Aber so viele unterschiede gibt es ja nicht, jedenfalls gibt es keine unterschiede wenn ich mein script in AS 3 verfassen würde, außer dass es dann funktioniert...

Da gibt es schon erhebliche Unterschiede, insbesondere was das Event-Handling und die API angeht. Ohne Dich entmutigen zu wollen, aber bei Deinem Script z.B. kannst Du nicht mal die Hälte der Zeilen ohne Änderung übernehmen.

Zitat von ChrizBMX

Danke euch! Ich werde heute abend mal probieren, dann melde ich mich wieder.

Trotzdem ist sowas ein guter Anlass sich in AS3 einzuarbeiten. Diesem ActionScript-Dialekt gehört nämlich in jedem Fall die Zukunft.

[milchreis]

Zitat von ChrizBMX

Danke euch! Ich werde heute abend mal probieren, dann melde ich mich wieder.

Herzlich willkommen in der Gegenwart.
Jede Frage zu As3 beantworte ich lieber als eine zu As2.
Also nur Mut.

In den letzten 5 Jahren ist einiges passiert.

Migrating from ActionScript 2 to ActionScript 3: Key concepts and changes | Adobe Developer Connection
Weiter Links in Martins Signatur beachten!

[ChrizBMX]

Wenn ich mir das so anseh, beudeutet das, korrigiert mich, falls ich falsch liege, dass die Objekte nicht mehr über die Instanznamen angesprochen werden, sondern über Klassen, und dass ActionScript auf Frames anstatt auf die Objekte zugreift? (Von deinem Link, milchreis)

Ist ja eher schon OffTopic hier, aber diese eine Frage tuts noch

Chris

[Martin Kraft]

Zitat von ChrizBMX

Wenn ich mir das so anseh, beudeutet das, korrigiert mich, falls ich falsch liege, dass die Objekte nicht mehr über die Instanznamen angesprochen werden, sondern über Klassen, und dass ActionScript auf Frames anstatt auf die Objekte zugreift?

Hier mit geschehn: Du liegst falsch!

Objekte und Instanznamen gibt es immer noch (auch wenn letztere lange nicht mehr so wichtig sind, wie in AS1/2). Klassen sind sowas wie Baupläne für Objekte (vgl. Symbole vs. Instanzen). Und wo Du warum mit AS auf Frames zugreifen willst ist mir schleierhaft..

[chanel]

wenn es unbedingt as2 sein soll ,
könntest das problem mit "hitTest" lösen.

beispiel:

PHP-Code:

fadeBlock.onMouseMove = function() {
    
    var bo_rewindButton:Boolean = this.rewindButton.hitTest(_root._xmouse, _root._ymouse, true);
    
    if (bo_rewindButton == true) {
        
        this.rewindButton.gotoAndStop("rewindOver");
        
    } else {
        
        this.rewindButton.gotoAndStop("rewind");
        
    }
    
}; 


[ChrizBMX]

Super, genau das hab ich gebraucht!

Doch leider gibt es immer noch ein Problem...
Die Buttons wechseln ihre Farben zwar, aber betätigen kann man sie immer noch nicht.
Ich habe für meinen Player das Script etwas erweitert, doch leider lassen sich die Buttons nicht betätigen.

ganzer Code:

var nc:NetConnection = new NetConnection();
nc.connect(null);

var ns:NetStream = new NetStream(nc);

theVideo.attachVideo(ns);

ns.play("video.flv");
ns.pause();

// Controls

// Controlbar

inS = 5;
outS = 5;

fadeBlock._alpha = 85;

fadeBlock.onRollOver = function() 
{
	this.onEnterFrame = function() 
	{
		this._alpha += inS;
		if(this._alpha > 85) 
		{
			this._alpha = 85;
			delete this.onEnterFrame;
		}
	}
}

fadeBlock.onRollOut = function() 
{
	this.onEnterFrame = function() 
	{
		this._alpha -= outS;
		if(this._alpha < 0) 
		{
			this._alpha = 0;
			delete this.onEnterFrame;
		}
	}
}

fadeBlock.onMouseMove = function() {
    
    var bo_rewindButton:Boolean = this.rewindButton.hitTest(_root._xmouse, _root._ymouse, true);
    
    if (bo_rewindButton == true) {
        
        this.rewindButton.gotoAndStop("rewindOver");
        
    } else {
        
        this.rewindButton.gotoAndStop("rewind");
        
    }
	
	var bo_playPause:Boolean = this.playPause.hitTest(_root._xmouse, _root._ymouse, true);
    
    if (bo_playPause == true && this._currentframe == 1) {
        
        this.playPause.gotoAndStop("playOver");
        
    } else if (bo_playPause == true && this._currentframe == 20) {
        
        this.playPause.gotoAndStop("pauseOver");
        
    } else if (bo_playPause == false && this._currentframe == 1) {
		
		this.playPause.gotoAndStop("play");
	
	} else {
		
		this.playPause.gotoAndStop("pause");
		
	}
    
};  

// Rewind

fadeBlock.rewindButton.onRollOver = function()
{
	this.gotoAndStop("rewindOver");
}

fadeBlock.rewindButton.onRollOut = fadeBlock.rewindButton.onReleaseOutside = function()
{
	this.gotoAndStop("rewind");
}

fadeBlock.rewindButton.onRelease = function()
{
	ns.seek(0);
}

// Play - Pause

fadeBlock.playPause.onRollOver = function()
{
	if(this._currentframe == 1) 
	{
		this.gotoAndStop("playOver");
	}
	else
	{
		this.gotoAndStop("pauseOver");
	}
}

fadeBlock.playPause.onRollOut = fadeBlock.playPause.onReleaseOutside = function()
{
	if(this._currentframe == 10) this.gotoAndStop("play");
	else this.gotoAndStop("pause");
}

fadeBlock.playPause.onRelease = function()
{
	if(this._currentframe == 10)
	{
		this.gotoAndStop("pauseOver");
		ns.pause();
	}
	else
	{
		this.gotoAndStop("playOver");
		ns.pause();
	}
}