Swish 2.0 - Einfacher Banner

    Wir möchten diesmal einen schon recht effektvollen Banner für unsere eigene Webseite erstellen. Aussehen soll/kann er im Endeffekt dann so:

    Der Gag: Auch wenn Sie jetzt gerade das erste Mal mit Swish 2.0 arbeiten, können Sie diesen Eycatcher schon erstellen.Wir starten Swish und gehen auf "Datei" und "Neu" oder wir klicken auf das Icon "Neu" oder aber wir verwenden das Tastaturkürzel "Strg+n".Ihr Programmfenster sollte in etwa so aussehen: Rechts am Bildschirm gehen Sie auf das Karteiblatt "Film" Dort geben Sie unter "Breite" und "Höhe" die Abmessungen in Pixel ein, die Ihre Flash Animation am Ende haben soll. Bei "Schritte/sek:" brauchen Sie nichts ändern, lassen Sie die voreingestellten "12". Klicken Sie nun auf "Hintergrundfarbe". Wählen Sie entweder aus den vorgegebenen Farben Ihre Wunschhintergrundfarbe aus, oder aber geben Sie den gewünschten Farbcode ein. Für unseren Banner habe ich hier den Farbcode 09 1B 6F verwendet und eine Standard Bannergröße von 468x60 Pixel eingegeben. Die Felder darunter vergessen wir für dieses Tutorial. Ihr Karteiblatt Film sollte dann so aussehen: Im mittleren Programmfenster (Layout) klicken Sie nun bitte auf das quadratische Icon "Rechteck". Nun ziehen wir mit der Maus ein Rechteck über die gesamte Breite des Banners. Sobald Sie auf das Icon "Rechteck" klicken, wechselt rechts das Karteiblatt auf "Form". Unter "Name" können Sie diesem Objekt einen Namen geben, dies ist aber nicht unbedingt notwendig. Unter Linie wählen wir "keine" aus und bei "Füllung" klicken wir in das große farbige Rechteck. Dort können wir uns wieder eine Farbe für unser Rechteck aussuchen oder definieren. Besonders Mutige können auch auf den Button "Voll" klicken und dort dann einen Farbverlauf erstellen. Ich mache mein Rechteck aber einfarbig.Unser Rechteck passen wir nun an die Abmessungen unseres Banners an. Dazu können Sie einfach die "Zugpunkte" verwenden und das Rechteck in der Größe verändern, oder Sie gehen rechts in das Karteiblatt "Transformieren" und geben dort die Wunschgröße in Pixel an. Nun noch den Banner mit der Maus "greifen" und an die gewünschte Stelle schieben. Klicken Sie nun mit der Maus auf das soeben erstellte Rechteck, damit es markiert ist (wenn Sie die Zugpunkte am Rechteck sehen ist es markiert). Nun links oben im Programmfenster auf "Effekt hinzufügen" klicken und "3D Drehung auswählen". Sie sehen nun dieses Fenster: Bitte stellen Sie alles so wie in obiger Vorlage ein und klicken Sie dann in dem Fenster auf OK. In der oberen Menüleiste von Swish finden Sie u. a. einen Button "Abspielen". Wenn der betätigt wird, haben Sie eine Animationsvorschau.Aber nun weiter. Klicken Sie mit der rechten Maustaste auf das Rechteck und wählen "Objekt kopieren", danach mit der rechten Maustaste in den Layout Screen klicken und "Objekt einfügen" klicken. Führen Sie nun das eingefügte zweite Rechteck an den unteren Rand unseres Banners. Nun nochmals mit "Objekt einfügen" ein drittes Rechteck einfügen. Dieses führen wir nun in die Mitte unseres Banners und ziehen es an den Zugpunkten so zurecht, dass es den gesamten, restlichen (bei mir blauen) Bereich einnimmt. Überlappt das dritte Rechteck die beiden anderen ein wenig, wirkt das fast wie dreidimensional. Machen Sie das Rechteck in der Breite etwas länger, dies verstärkt den Effekt. Rechts im Karteiblatt "Form" weisen wir dem dritten Rechteck aber eine andere Farbe zu. Wenn es bei Ihnen dann so in etwa aussieht, haben wir den schwierigsten Teil hinter uns.Oben in der Menüleiste nun auf das Text Symbol klicken. Nun hat sich rechts das Karteiblatt "Text" aktiviert. Schreiben Sie dort, rechts Ihren Text hinein. Sie können jede auf Ihrem System installierte Schriftart auswählen und natürlich auch die Schriftgröße definieren. Ich mache das mal so: Danach schieben Sie den Text mit der Maus an die gewünschte Stelle. In der oberen Menüleiste finden Sie Pfeile, die nach oben und unten weisen. Ist ein Objekt markiert ... können Sie mit diesen Pfeilen das markierte Objekt in der Reihenfolge nach vorne oder nach hinten schieben. Klicken Sie auf einen weinroten Pfeil, wird das markierte Objekt automatisch ganz nach vorne (Pfeil nach oben) oder ganz nach hinten (Pfeil nach unten) geschoben. Wir verschieben unseren Text ganz nach unten. Wenn Sie nun oben auf die "Abspielen" Taste klicken, sieht unser Banner dann in etwa so aus:

    Nun stört uns aber noch das kurze "Zucken", wenn die roten Balken ihre Animation eigentlich beendet haben. Das soll nun flüssig und durchgehend werden. Dafür klicken wir mit der linken Maustaste oben in der Zeitleiste in die oberste Zeile, bei dem letzten Schritt der "angezeigten Animation". Dann wieder links auf "Aktion hinzufügen" und "Gehe zu Schritt" auswählen. Nun wechselt rechts wieder das Karteiblatt. Damit sagen wir unserer Animation, dass genau dort die Animation an einem beliebigen Punkt unseres "Filmes" wieder anfangen soll. Standardmäßig ist dort Punkt 0 eingestellt, in unserem Falle genau richtig. Am Ende unserer Animation, fängt der Film wieder ganz am Anfang an.Nun nur noch abspeichern. Klicken wir oben auf das Speichersymbol (Diskette), wird unsere Animation als .swi Datei abgespeichert. Swi Dateien können wir dann jederzeit später beliebig weiterbearbeiten.Wenn wir den von uns erstellten Banner auf Webseiten einsetzen wollen, müssen wir oben auf Datei klicken und dann "Exportieren" >> "SWF" auswählen. Damit erstellen wir nun einen echten Flash Film. Den binden Sie dann einfach in Ihre Webseite ein. Fertig!

    Kleiner Hinweis: Unter "Datei" gibt es noch die Möglichkeiten, die Animationen zwischendurch mal in der richtigen Umgebung zu testen: Wahlweise im Flashplayer oder sogar schon eingebunden in eine HTML Seite. So kann man gleich kontrollieren, ob alles so aussieht wie erwartet.