Du bist nicht angemeldet.

Lieber Besucher, herzlich willkommen bei: WebStyleBoard. Falls dies dein erster Besuch auf dieser Seite ist, lies bitte die Hilfe durch. Dort wird dir die Bedienung dieser Seite näher erläutert. Darüber hinaus solltest du dich registrieren, um alle Funktionen dieser Seite nutzen zu können. Benutze das Registrierungsformular, um dich zu registrieren oder informiere dich ausführlich über den Registrierungsvorgang. Falls du dich bereits zu einem früheren Zeitpunkt registriert hast, kannst du dich hier anmelden.

1

Mittwoch, 29. Juni 2005, 22:39

Flash Hilfe

Soll ein flash implementieren,

habe vorher sehr wenig mit Flash gearbeitet, werde mir auch gleich ein paar Beiträge von http://www.video2brain.com/ angucken.


Ich brauch folgende Hilfen:


Ich muss ein Bild einfügen (hab ich geschafft)

Nach einem Mouseover auf einen bestimmten Punkt soll ein kleines Video erscheinen und Musik laufen....

Wie geht das? und kann man mir dafür ein Tutorial geben? :)


okay hab folgenden plan:

- für jeden punkt trage ich nen neuen layer an und platziere ihn auf meiner grafik
- nach mouseover soll er einen anderen layer laden wo videoinformationen sowie sound drin sind O.o

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »escardo« (29. Juni 2005, 23:01)


2

Donnerstag, 30. Juni 2005, 10:09

Hi escardo!

Dein Plan an sich geht schon in die richtige Richtung... ;)

Hier ein kleines Tutorial, welches die wesentlichen Grundlagen Deines Vorhabens abdecken sollte...

I. Grundlegende Überlegungen

Zunächst sollte folgende Frage geklärt werden: Du sprichst von "Videos", welche bei Mauskontakt abgespielt werden sollen. Handelt es sich bei diesen "Videos" um echte Videos im Sinne von Filmsequenzen, oder meinst Du damit separate Flash-Filme?

Diese Überlegung ist aus folgendem Grund von Bedeutung: In jedem Fall solltest Du Deiner Animation einen Preloader spendieren, damit der Ladevorgang für all diejenigen deutlich wird, welche eine langsame Verbindung zum Internet haben.

Ist die Datenmenge der einzelnen Filme groß, würde es sich anbieten, sie nicht direkt in Deine Animation einzubinden. Stattdessen wäre es sinnvoller, jedes einzelne Video in eine eigene Flash-Datei zu packen und mit einem eigenen Preloader zu versehen.

Anschließend würdest Du dann die einzelnen Filme per loadMovie("Dateiname.swf". Ziel); einbinden. Das hätte zur Folge, dass nicht die ganzen Daten auf einmal geladen werden müssen, sondern immer nur dann, wenn sie wirklich gebraucht werden...

In diesem Tutorial werde ich zunächst auf den Fall eingehen, dass alles in einem preloadet wird. Sollte Klärungsbedarf für die zweite Variante (Daten dynamisch laden) bestehen, gehe ich darauf separat ein.



II. Vorbereitung der Datei

Die Überlegung, für jeden Button eine eigene Ebene anzulegen ist im Prinzip nicht verkehrt. Zwar kannst Du alle Schaltflächen und alle Videos auch in eine einzige Ebene packen (sofern Du diese nicht separat Tweenen (Bewegunsanimation oder Formanimation) willst, aber dabei geht die Übersicht schnell verloren.

Wenn Du andererseits für jeden Button und für jedes Video eine eigene Ebene erstellst, kannst Du zwar die einzelnen Elemente gezielter ansprechen, verlierst aber auch schnell den Überblick, da die Zeitleiste sehr hoch wird. Wenn Du nicht gerade (wie ich... *protz*) in den Genuß kommst, zwei oder mehr Monitore nutzen zu können, bist Du bald nur noch am Scrollen...

Daher empfehle ich Dir folgenden Kompromiß: Ebenenordner! Sammele alle Elemente in entsprechenden Ordnern. D.h. einen Ordner für alle Buttons, einen für alle Videos usw. und je eine Ebene für Scriptanweisungen und eine für das Hintergrundbild.

Das ganze könnte dann so aussehen:



Jetzt musst Du nur noch in der untersten Ebene "Bild" das Hintergrundbild plazieren, und weiter geht's... ;)



III. Die Buttons

Die Schaltflächen sollen, wenn ich Dich richtig verstanden habe, nicht zu sehen sein. Es soll ja so aussehen, als reagierten bestimmte Teile des Bildes, richtig?

Dies erreichst Du folgendermaßen:


III.1 Schaltfläche erstellen

Zunächst zeichnest Du ein Rechteck ohne Rahmen. Die Farbe ist beliebig:




III.2 MovieClip erstellen

Anschließend markierst Du das Rechteck und drückst F8. Dadurch kannst Du das Rechteck von einer Grafik in ein Symbol konvertieren.

Im erscheinenden Dialogfenster wählst Du "Movieclip" aus und achtest darauf, dass der mittlere Registrierungspunkt ausgewählt ist:




III..3 Schaltfläche unsichtbar machen

Du plazierst den Button nun an der Stelle, an der das Bild "reagieren" soll. Dort angekommen stellst Du sicher, dass die Schaltfläche ausgewählt ist, und wirfst einen Blick auf das Kontrollfeld "Eigenschaften". Sollte dies noch nicht offen sein, einfach STRG + F3 drücken.

In der Mitte der Eigenschaftsleiste siehst Du den Punkt "Farbe". Dort wählst Du "Alpha" aus und als Wert 0%. Damit wird der Button unsichtbar:



Auf diese Weise erstellst Du so viele Reaktionsflächen, wie benötigt.



IV. Video-Clips erstellen / einbinden


IV.1 MC für Video erstellen

Ähnlich wie bei den Schaltflächen erstellen wir nun die Flächen für die Animation.

Durch das Drücken von STRG + F8 öffnet sich das gleiche Dialogmenü wie beim Konvertieren der Grafik, nur mit dem Unterschied, dass Du nun einen leeren Clip erstellst.

Als Namen verwendest etwas aussagekräftiges, z.B. "Video 1".

Nach einem Klick auf "OK" befindest Du Dich in diesem MC. Hier machen wir jedoch noch nichts, sondern verlassen den MC durch einen Klick auf "Szene 1" in der Kopfzeile des Bühnenfensters.


IV.2 MC auf Bühne plazieren

Um den ersten Clip auf der Bühne zu plazieren, wählst Du zunächst in der Zeitleiste die richtige Ebene aus. Anschließend öffnest Du durch STRG + L die Bibliothek.

Dort siehst Du den Namen des neuen Clips, und kannst diesen einfach auf die Bühne ziehen:




IV.3 Instanznamen vergeben

Damit das Ganze später funktionieren kann, ist es enorm wichtig, diesem Clip einen Instanznamen zu geben, damit er gezielt angesprochen und gesteuert werden kann.

Hierzu markierst Du den Clip und wirfst erneut einen Blick auf das Eigenschafts-Fenster. Direkt am Anfang findest Du das Feld "Instanzname". Dort trägst Du einen Instanznamen ein, der sich nicht wiederholen darf!




IV.4 Clip mit Inhalt füllen

Nun kannst Du auf den Clip an der richtigen Stelle plazieren und anschließend doppelklicken. Dadurch wird dieser geöffnet.

Jetzt kannst Du den Clip mit Inhalt füllen. Wichtig dabei ist jedoch, dass der erste Frame keinen sichtbaren Inhalt hat, sondern nur einen einzigen Frame mit der Scriptanweisung stop();:



Dies verhindert, dass die einzelnen Videos direkt von Anfang an abgespielt werden.



V. Die Scriptanweisungen

Nun kommen wir zu den Scriptanweisungen, welche das Ganze erst zum Laufen bringen...

Hier beschreibe ich zwei verschiedene Varianten:

Variante 1: Filme werden bei Mauskontakt abgespielt und sofort beendet, wenn die Maus die aktive Fläche wieder verlässt...

Variante 2: Filme werden nach Mauskontakt einmalig komplett abgespielt, und gehen danach wieder in den "Ruhezustand".

Durch F9 öffnest Du das Fenster "Aktionen". Hier klickst Du auf das Icon "Ansichtsoptionen", um in den Expertenmodus zu wechseln. Auf diese Weise kannst Du die folgenden Scriptanweisungen direkt dorthin kopieren:




V.1 Variante 1

ActionScript für die Buttons:

Quellcode

1
2
3
4
5
6
7
8
9
on(rollOver)
{
	_root.INSTANZNAME.gotoAndPlay(2);
}

on(rollOut)
{
	_root.INSTANZNAME.gotoAndStop(1);
}


ActionScript für die Clips:

Im letzten Frame der Animation erstellst Du ein Schlüsselbild in der Script-Ebene mit folgender Anweisung:

Quellcode

1
_root.INSTANZNAME.gotoAndPlay(2);



In allen obigen Fällen musst Du "INSTANZNAME" durch den Namen des jeweiligen Videos ersetzen.

Und dies bewirkt der Code:

Die ersten Zeilen (rollOver) veranlassen den Video-Clip dazu, ab Bild 2 abgespielt zu werden.

Die nächste Anweisung sorgt dafür, dass der Film wieder in seine Ausgangslage zurückspringt, wenn die Kontaktfläche verlassen wird.

Durch die kleine Zeile ActionScript am Ende des Clips wird bewirkt, dass dieser wieder an den Anfang springt und weiter abgespielt wird, bis die Kontaktfläche verlassen wird.


V.2 Variante 2

ActionScript für die Buttons:

Quellcode

1
2
3
4
on(rollOver)
{
	_root.INSTANZNAME.gotoAndPlay(2);
}


ActionScript für die Clips:

Im letzten Frame der Animation erstellst Du ein Schlüsselbild in der Script-Ebene mit folgender Anweisung:

Quellcode

1
_root.INSTANZNAME.gotoAndStop(1);



In allen obigen Fällen musst Du "INSTANZNAME" durch den Namen des jeweiligen Videos ersetzen.

Und dies bewirkt der Code:

Wie Du siehst, ist der Code der Version 1 sehr ähnlich. Nur mit dem Unterschied, dass ein Verlassen der Kontaktfläche das Video nicht beendet, und das Video nur einmal durchlaufen wird, und sich dann wieder selbst beendet.

Ich hoffe, Dir die komplexen Zusammenhänge etwas näher gebracht zu haben... Bei Fragen weißt Du ja, wohin damit... ;)

LapisInfernalis
Signatur von »LapisInfernalis« Eine Milde Gabe...

Der Horizont vieler Menschen ist ein Kreis mit dem Radius Null - und das nennen sie ihren Standpunkt.

Albert Einstein (1879-1955)

A common mistake people make when trying to design something completely foolproof is to underestimate the ingenuity of complete fools.
Douglas Adams (1952-2001)

3

Freitag, 1. Juli 2005, 15:43

okay, wie geb ich dem film soeine art scrolleiste etc?

möchte auch das erst nen fenster geöffnet wird wo der film dann drin is


möchte auch das der film erst versteckt ist und danach zu sehen is

mussm an wahrscheinlich nur was am script ändern ;)

gibts irgendwo eine reference site?

Dieser Beitrag wurde bereits 3 mal editiert, zuletzt von »escardo« (1. Juli 2005, 15:50)


4

Samstag, 2. Juli 2005, 14:51

Kein Problem... Gern geschehen... ;)

[q=escardo]okay, wie geb ich dem film soeine art scrolleiste etc?

möchte auch das erst nen fenster geöffnet wird wo der film dann drin is[/q]
Zunächst zum Fenster. Was genau meinst Du damit? Die HTML-Seite, welche den Film enthält? Quasi als PopUp? Automatisch oder nach einem Mausklick?

Scrollleiste? Für das Fenster oder die Flash-Datei?

[q=escardo]möchte auch das der film erst versteckt ist und danach zu sehen is
mussm an wahrscheinlich nur was am script ändern ;)[/q]
Das ist relativ einfach. Du lässt den eigentlichen Inhalt erst einen Frame nach dem Start beginnen. Verwendest Du z.B. einen Preloader, so nimmt dieser aller Wahrscheinlichkeit nach die ersten beiden Frames in Anspruch.

Der eigentliche Film beginnt dann erst bei Frame 4. Im dritten Frame plazierst Du dann z.B. einen Button, mit dem man das Ganze startet. Wichtig ist, dass Du auf der Script-Ebene im dritten Frame ein Schlüsselbild einrichtest und diesem die ActionScript-Anweisung stop(); verpasst, damit der Film nicht von alleine losläuft...

Eine Demo habe ich dazu noch nicht. Dafür fehlt mir im Moment leider die Zeit... ;)
Signatur von »LapisInfernalis« Eine Milde Gabe...

Der Horizont vieler Menschen ist ein Kreis mit dem Radius Null - und das nennen sie ihren Standpunkt.

Albert Einstein (1879-1955)

A common mistake people make when trying to design something completely foolproof is to underestimate the ingenuity of complete fools.
Douglas Adams (1952-2001)