Anzeige
Tutorialbeschreibung

Einfaches Intro mit Logo

Einfaches Intro mit Logo

Logo:

Hintergrundfarbe #ECE9D6
Schriftfarbe: #000000
Schriftart: Times New Roman
Schriftgröße: 35
Linienfarbe 1: #000000
Linienfarbe 2: #FF0000

Schritt 1:
Öffnet ein neues Dokument und stellt die Hintergrundfarbe ein.

Wir ziehen nun mit unserem Linienwerkzeug (Strichfarbe #000000) eine gerade Linie auf unsere Ebene, das macht ihr am
besten in dem ihr die Shift taste gedrückt haltet und einfach dann eine Linie zieht, in diesem Fall ist es egal ob
ihr nach unten geht die Linie wird immer gerade.

Wir wählen nun unser Auswahlwerkzeug und markieren unsere Linie. Drückt dann STRG+C. Wenn ihr nun STRG+V mit
gedrückter Shift Taste drückt wird eine zweite exakte kopie eurer erstellten Linie auf die gleiche position eurer
ersten Linie eingefügt. Verschiebt nun die soeben eingefügte Linie mit gedrückter  Shift Taste nach unten.
Dies hat der Vorteil das eure Linie um genau 10px nach unten verschoben wird, das erspart uns in diesem Fall eine
menge Zeit.

Macht das selbe nun so lange bis ihr insgesammt 5 Linien habt und verschiebt diese immer unter einander so dass
das ganze dann so aussieht:

Bilder

Schritt 2:
Markiert nun alle eure 5 Linien mit dem Auswahlwerkzeug und drückt STRG+C. Erstellt dann eine neue Ebene, sperrt
die erste Ebene und bennent diese auch gleich Linie 1. Klickt nun auf Ebene 2 und gebt ihr den Namen Linie 2 und
drückt STRG+V+Shift. Eure kopierten Linien wurden nun in der Ebene Linie 2 an der selben Stelle eingefügt wie auf
Ebene Linie 1. Nun müsst ihr diese Linien rot färben, also einfach Strichfarbe in #FF0000 umstellen. Verschiebt
nun mit der Peiltaste die Linien 3x nach oben und 3x nach rechts.

Bilder

Schritt 3:
Wählt nun das Textwerkzeug und schreibt irgendwo auf die Bühne "PSD-Tutorials" und wandelt den Text in ein Movieclip
um. Das macht ihr in dem ihr euren erstellten Text mit dem Auswahlwerkzeug markiert und dann auf Modifizieren
In Symbol konvertieren wählt. Nennt euren Movieclip "PSD_logo".

Bilder

Schritt 4:
Löscht nun euren Text von der Bühne. Erstellt eine neue Ebene und nennt diese Logo. Importiert nun euren Schmetterling
in eure Bibliothek. Sperrt Ebene "Linie 2" ab.

Bilder

Schritt 5:
Aus dem Gif wurde nun automatisch von Flash ein Movieclip erstellt der den Namen "Symbol 2" bekam.
Schiebt nun euer PSD_logo nach links aber so, dass es zwischen der oberen und unteren Linie ist.
Schiebt nun "Symbol 2" in die rechte ecke der Linien, so dass der gelbe Schmetterling mit dem rechten
Flügel auf der oberen Linie ist.

Bilder

Schritt 6:
Entsperrt nun alle Ebenen und markiert alles auf eurer Bühne mit dem Auswahlwerkzeug. geht nun auf
Modifizieren - In Symbol konvertieren und gebt dem Namen "Logo" ein und natürlich als Movieclip.
Speichert die Datei als "Logo.fla" ab.

Bilder


Intro:

Hintergrundfarbe #ECE9D6
Schriftfarbe: #000000
Schriftart: Times New Roman
Schriftgröße: 35

Schritt 1:
Öffnet eine neue Datei, ohne die Datei "logo.fla" zu schliessen. Stellt den Hintergrund wieder in die
gewünschte Farbe.

Nun müssen wir uns überlegen was wir alles wollen, da ich ein Tutorial erstelle, werde ich ein schlichtes Intro
erstellen, also nichts besonderes.

Kopiert nun "PSD_logo"und "logo" von eurer Datei logo.fla und fügt sie in die eben Neu geöffnete Datei.
Natürlich müsst ihr das nicht tun, ich machs aber damit ich mein Logo nicht ausversehen verunstalte, in diesem
Intro wäre das jetzt nicht so tragisch aber bei guten selbstgemachten schon.

Nennt Ebene1 nun in PSD_logo um.

Bilder

Schritt 2:
Geht nun auf Ansicht - Lineale. Zieht nun "PSD_logo" in die mitte der Bühne. Zieht nun bei den Linealen
von der linken Seite soweit bis ihr die rechte Ecke von eurem "PSD_logo" erreicht habt. Macht das nun mit allen Seiten.

Bilder

Schritt 3:
Geht jetzt auf Bild 30 und wählt Schlüsselbild einfügen. Endweder mit klick durch die rechte maustaste oder unter
Einfügen - Zeitleiste - Schlüsselbild. Doppelklickt auf Bild 1.

Klickt nun euer "PSD_logo" an bis unter Eigenschaften das Feld "Farbe" erscheint, wählt dort Alpha 0% aus.
Bei Transformieren wählt ihr auch 0% aus. (Fenster - Transformieren). Klickt nun auf irgendein Bild und wählt bei
Tween "Bewegung" aus. Bei Drehen geht ihr auf "Nach rechts" und "1 mal".

Bilder

Schritt 4:
Erstellt eine neue Ebene nennt diese "Photoshop". Erstellt nun folgende Texte einzelnd:

Adobe Photoshop
Cinema4D
3D Studio Max
Adobe Flash
Webdesign
Video Tutorials
Downloads
Und vieles mehr!

Wandel nun die eben erstelten Texte in Movieclips um und lösche sie wieder von der Bühne. Wie ihr die Texte nun
bennent ist egal, ich habe ihnen den Namen gegeben wie sie auch zu sehen sind also z.B
Adobe Photoshop = adobe_photoshop.

Nun klicken wir auf Bild 35 und fügen ein Schlüsselbild ein. Zieht nun den Schriftzug Adobe Photoshop in die
rechte ecke, so dass er nicht auf der Bühne ist sondern ausserhalb. Erstellt nun weitere Ebenen,
Cinema, 3D Max, Flash, Downloads, Video Tut und fügt auch diese an verschiedenen stellen ausserhalb eurer Bühne ein.

Bilder

Schritt 5:
Macht nun bei allen soeben erstellten Ebenen bei Bild 65 ein Schlüsselbild. Verschiebt nun die Bilder woanders hin.

Bilder

Schritt 6:
Markiert nun das Bild 35 von euren Ebenen (bis auf PSD_logo) klickt auf irgend einen Schriftzug, wählt bei
Farbe wieder Alpha 0% aus und stellt bei Transparent 30% ein. Klickt nun auf Bild 32 und gebt unter Tween "Bewegung"
ein. Markiert nun Bild 70 von allen Ebenen bis auf PSD_logo und klickt auf "Bild einfügen".

Erstellt eine neue Ebene, nennt diese "Webdesign". Klickt nun auf Bild 75 und wählt Schlüsselbild einfügen.
Macht nun ein doppelklick auf die Lila Box eures Movieclips "Webdesign". geht nun auf Modifitieren - Teilen
dann auf Modifizieren - Zeitleiste - Auf Ebene verteilen. Ihr könnt nun Ebene1 löschen.

Verschiebt nun die einzelnen Buchstaben nach oben und nach unten, also z.B W 1x hoch E 1x nach unten. Markiert
alle Ebenen und macht bei Bild 5 ein Schlüsselbild. Kopiert dann alle Ebenen komplett also von 1 bis 5. Und wählt
kopieren.

Markiert nun alle Ebenen bei Bild 6 und wählt "Bilder einfügen" markiert die soeben eingefügten Bilder und wählt
"Bilder umkehren". Klickt nun oben wieder auf Szene1.

Bilder

Schritt 7:
Schiebt nun "Webdesign" in die mitte, also zwischen euren Lineallinien. Macht bei Bild 95 ein Schlüsselbild, markiert
Bild 75 und klickt auf "Webdesign" gebt bei Farbe wieder Alpha 0% ein. Dann wieder auf die Ebene Klicken und bei Tween
"Bewegung" eingeben.

So, wir erstellen nun eine neue Ebene und nennen diese logo. Wir fügen bei Bild 100 ein Schlüsselbild ein.
zieht nun "logo" auf die Bühne, fügt bei Bild 110 ein Schlüsselbild ein schiebt das Logo in die rechte obere Ecke.

Wechselt nun wieder zu Bild 100, gebt nun bei Transparent 165% (oder grösser) ein, schiebt das Logo in die linke untere Ecke.

Bilder

Schritt 8:
Stellt nun den Alpha-Wert auf 0% und aktiviert das Bewegungs-Tweene. Nun wollen wir noch einen text einfügen
und zwar fehlt uns noch der Text "Und vieles mehr!", diesen text wollen wir nun Buchstabenweise einblenden lassen.

(Überspringen wenn Erfahrung ist nur nötig wenn man den Text mehrmals benutzt anonsten diese Animation in den ordner
einfügen)

** Klickt dazu auf das Lila Kästchen von eurem Movieclip "Und vieles mehr!". Wie schon oben mal gemacht, teilen wir nun
den Movieclip in einzelne Buchstaben.

Klickt das Schlüsselbild des zweiten Buchstabens an nun müsst ihr mit gedrückter Umschalt-Taste zum letzten Buchstaben
scrollen. Zieht nun alles zu Bild 3. Nun müsst ihr die Buchstaben immer um 2 verschieben, also Buchstabe "D"
nicht auf 3 sondern auf 5 und das bei allen Buchstaben immer um 2 weiter.

Markiert nun Bild 31 bei allen Ebenen und macht "Bild einfügen" löscht nun Ebene 1 die brauchen wir nicht.

Bilder

Schritt 9:
** Erstellt nun einen Ordner und schiebt die Ebene "und" in diesen Ordner, klickt erneut auf das Lila Kästchen eures
Movieclips markiert alles und wählt "Bilder kopieren" geht nun auf die Ebene "und" und erstellt bei Bild 115 ein
Schlüsselbild wählt nun "Bilder einfügen"

Naja was uns jetzt noch fehlt ist einmal sound und zum zweiten der "Scip Intro" Button.

Wir erstellen eine neue Ebene, (klickt davor aber auf die Ebene "logo" sonst erstellt ihr die neue Ebene im erstellten
Ordner) und nennen diese "scip" geht auf Bild 1 und gebt den Text "Intro Überspringen" ein, die Schriftgröße ist 20.

Geht nun auf Modifizieren - Symbol konfertieren - Schaltfläsche der Name ist Intro

Bilder

Schritt 10:
Schiebt nun die Schaltfläche nach ganz unten, ungefähr in die mitte. Nun benötigt ihr noch einen Actionscript befehl,
aber bevor wir das machen verändern wir nun unsere Schaltfläche.

Doppelklickt diese und macht ein Schlüsselbild bei "Darüber", verändert die Farbe von Schwarz auf Weiss, macht nun ein
Schlüsselbild bei gedrückt rein und ändert die farbe von weiss auf rot. Macht ein weiteres Schlüsselbild
bei Aktiv, markiert nun mit dem recheckwerkzeug die komplette fläche des Schriftzugs.

Bilder

Alles was im Aktiv markiert wurde ist später nicht sichtbar. Er gibt nur die grösse an.

Klickt nun auf "Intro überspringen"gebt dem Instanzname "intro" ein, öffnet Aktionen und gebt folgenden code ein:

on (press) {
this.getURL(http://www.psd-tutorials.de/index.php, "_parent");
}

Fügt eine neue Ebene ein und nennt diese Sound. geht nun auf Datei - Importieren - In Bibliothek importieren
und fügt dort euren Sound ein, schiebt diesen dann auf die Ebene Sound. Speichert alles ab.

Speichert alles unter dem Namen "index.fla" ab sonst startet das Intro später nicht auf eurer Page da ja "index" der Start ist.
Wählt nun "Veröffentlichen", ladet eure Dateien auf einen Server und testet das ganze.

Wenn ihr Dreamweaver habt könnt ihr die html Datei noch bearbeiten damit euer Intro auch in der mitte ist.

Ich habe in diesem Intro kein Sound eingefügt, achtet auch darauf das je mehr Sound ihr einfügt desto größer eure SWF Datei wird. Wenn das Intro abgespielt wurde konnt ihr in den letzten Frame eine stop funktion einbringen damit das Video bei ende nicht wiederholt wird.

Erstellt am besten eine neue Ebene nennt diese Stop und gebt diesen Code ein:

stop();

Auch solltet ihr einen Button erstellen indem der User draufklickt um auf die nächste Seite zu kommen, der Code ist der selbe wie beim "Intro Überspringen", der Button
ist auch eine Schaltfläche.

http://polpetina.po.funpic.de/PSD

Falls ihr User von Flash 8 seit solltet ihr noch einstellen das euer Intro auch Flashplayer 7 unterstützt da nicht alle den aktuellen Flashplayer haben.

Hier wie immer zum Downloaden:

Flash 8

Flash MX

 

 

 

 

 


Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 26.03.2010 - 21:42

Also ich werds mal testen was bei raus kommt mich interessiert vorallem solche button wie Into Skip und sowas ;) scheint aber ganz ok zu sein, jedoch fürn anfänger vll etwas zu wenig bilder

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 06.03.2010 - 15:19

Hallo Lexia,

also ich hab mir deine erklärungen hier beim dem Tut zum Intro durchgelsen ist sicherlich alles schön nur da wo es interessant wird und ich dass was ich wissen will erfahren würde machste immer spünge.

Weil Du erklärt hier ausführlich wie man Linien zieht und Kopiert ist alles super gut und schön aber nicht das entscheidende was ich bräuchte... ich müsste wissen wie ich einem Intro klar mache dass es ein Intro ist.

Ich hab meine Animation mit Text Grafikelementen und Bildern udn die Funktioniert auch sind etwa mit Alpha-Einbledungen etwa ein ca. 15 bis 20 Sekünder... nur wie erkläre ich dem Ding also weiß jetzt nicht ob der Begriff Movieclip oder Flash-Export der richtigere wäre...
Hab also wegen mir 10 Moviclips die nacheinadner ablaufen udn igrenwas eben an dem gesmten verändern durch Einblenden oder Bewegung so und wenn ich dass Exportiere läuft es auch schön im Flasplayer alles super
Wenn ich dem ganzen nun aber klar machen möchte dass es eben ein Intro ist also einmal Abläuft und dann zur Webseite wechselt oder eben wenn man drauf klickt (Vollflächig bei mir weil soll keinen SkipIntro-Button bei mir geben) dann das Intro abbricht und direkt zur webseite Wechselt wie ich dass der ganzen geschichte hier klar mache dass ist mir nicht ganz klar! *lach*

Also da wäre hilfe und ein paar Tipps echt super... weil ich verzweifel gerade...

LG
Chris

Portrait von momo90
  • 14.01.2010 - 21:56

super tutorial hat gehoolfen ...

Portrait von Zork
  • 13.01.2010 - 14:53

Super!!

Vielen Dank, das hilft mir wirklich weiter..

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 06.01.2010 - 23:44

Nice TUT !!!! Gefällt mir super !!!

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 17.02.2009 - 16:03

Vielen Dank, hat mir sehr geholfen. Gruß Peter

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 21.01.2009 - 23:42

DANKE, macht ja richtig Spaß alles auszuprobieren...

Portrait von marinBluee
  • 13.11.2008 - 10:35

Vielen Dank, hat mir sehr geholfen.

Gruß Marin

Portrait von marinBluee
  • 13.11.2008 - 10:35

Vielen Dank, hat mir sehr geholfen.

Gruß Marin

Portrait von Leolo
  • 08.07.2008 - 16:19

Sehr schönes Aufbau-Tutorial. Danke.

Liebe Grüße
Leolo

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 09.06.2008 - 11:59

Danke toll, hat mir sehr geholfen.

Portrait von iMac
  • 06.03.2008 - 01:02

cool nice :D

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 02.03.2008 - 14:50

ja wirklich nicht schlecht vielen dank

Portrait von DJND
  • 15.02.2008 - 10:57

Prima! Eine gute Grundlage für jedes Intro!

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 06.02.2008 - 12:52

Danke war wirklich sehr hilfsreich

Portrait von sagoe1977
  • 05.02.2008 - 10:19

Danke, hat mir als Anfänger sehr geholfen!

Portrait von falken0077
  • 28.01.2008 - 19:51

Sehr gut gemacht, danke

Portrait von Brazil14
  • 27.01.2008 - 06:58

Danke hat mir sehr weiter geholfen :D

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 21.12.2007 - 23:51

gut das es so seiten gibt! einfach genial

Portrait von goe82
  • 15.10.2007 - 17:02

einwandfrei. gibt es wirklich nichts zu meckern!

x
×
×