Dr. Web Logo. Untertext: Seit 1997.
  • Beste Agenturen
  • Agentur-Standorte von A bis Z 🌇
  • Magazin
  • Newsletter 📩
  • Login
  • Agentur bewerben ✅
  • Kontakt
  • Werben 🎉
  • Sponsored Post
  • Jobs
Menü
  • Beste Agenturen
  • Agentur-Standorte von A bis Z 🌇
  • Magazin
  • Newsletter 📩
  • Login
  • Agentur bewerben ✅
  • Kontakt
  • Werben 🎉
  • Sponsored Post
  • Jobs
  • Werben
  • Gastbeitrag
  • Sponsored Post
  • Kontakt
  • Login
  • Newsletter
Suche
  • Beste Agenturen
  • Agentur-Standorte
      Berlin bei Nacht, Blick von oben Richtung Fernsehturm.

      Berlin

      Blick auf die Elbufer-Promenade Dresdens sowie Frauenkirche und Zwinger.

      Dresden

      Düsseldorf von oben mit Blick auf den Fernsehturm.

      Düsseldorf

      Blick von oben auf das Bankenviertel in Frankfurt am Main.

      Frankfurt am Main

      Hamburg bei Nacht, Blick auf die Speicherstadt.

      Hamburg

      Blick auf das Neue Rathaus, Hannover.

      Hannover

      Agenturen in Innsbruck von oben mit Blick auf die Alpen.

      Innsbruck

      Sonnenuntergang in Köln mit Blick auf den Dom. Im Vordergrund die Hohenzollernbrücke.

      Köln

      München bei Fön mit Blick in die bayerischen Alpen.

      München

      Stuttgart von oben.

      Stuttgart

      Wien von oben. Blick auf den Stephansdom.

      Wien

      Zürich von oben.

      Zürich

  • Magazin
    • Content Marketing
    • CSS
    • E-Commerce
    • E-Mail-Marketing
    • Freelancer
    • Fotografie
    • HTML
    • Online-Marketing
    • Responsive Design
    • SEO
    • UX Design
    • Webdesign
    • Website erstellen
    • WordPress
    • Dr. Web Autoren
  • Jobs
Menü
  • Magazin
    • Content Marketing
    • CSS
    • E-Commerce
    • E-Mail-Marketing
    • Freelancer
    • Fotografie
    • HTML
    • Online-Marketing
    • Responsive Design
    • SEO
    • UX Design
    • Webdesign
    • Website erstellen
    • WordPress
    • Dr. Web Autoren
  • Jobs
Agentur eintragen →
Dr. Web Logo. Untertext: Seit 1997.
  • Beste Agenturen
  • Agentur-Standorte
      Berlin bei Nacht, Blick von oben Richtung Fernsehturm.

      Berlin

      Blick auf die Elbufer-Promenade Dresdens sowie Frauenkirche und Zwinger.

      Dresden

      Düsseldorf von oben mit Blick auf den Fernsehturm.

      Düsseldorf

      Blick von oben auf das Bankenviertel in Frankfurt am Main.

      Frankfurt am Main

      Hamburg bei Nacht, Blick auf die Speicherstadt.

      Hamburg

      Blick auf das Neue Rathaus, Hannover.

      Hannover

      Agenturen in Innsbruck von oben mit Blick auf die Alpen.

      Innsbruck

      Sonnenuntergang in Köln mit Blick auf den Dom. Im Vordergrund die Hohenzollernbrücke.

      Köln

      München bei Fön mit Blick in die bayerischen Alpen.

      München

      Stuttgart von oben.

      Stuttgart

      Wien von oben. Blick auf den Stephansdom.

      Wien

      Zürich von oben.

      Zürich

Agentur eintragen →
Dr. Web » Webdesign » Rauch und Dampf

Rauch und Dampf

Wer keine Videokamera besitzt oder sich schwer damit tut, Filme in seinen Rechner zu bekommen, der kann sich auch mit Standbildern behelfen. Durch subtil gesteuerte und geschickt platzierte Vektor-Animationen, lassen sich Still-Leben zum Leben erwecken. Im...

Sozial sein
Share on facebook
Share on twitter
Share on linkedin
Share on xing
Share on whatsapp
Share on email
  • Keine Kommentare
Lesedauer: 4 Minuten
  • von Frank Puscher
  • 9. November 2007
Bookmarke mich
Share on pocket

von Frank Puscher

Wer keine Videokamera besitzt oder sich schwer damit tut, Filme in seinen Rechner zu bekommen, der kann sich auch mit Standbildern behelfen. Durch subtil gesteuerte und geschickt platzierte Vektor-Animationen, lassen sich Still-Leben zum Leben erwecken.

Im Folgenden erzeugen wir zwei Varianten des gleichen Effekts. Einmal dampft es aus einer Kaffeetasse, einmal qualmt eine Zigarette vor sich hin. Die kleinen aber wichtigen Unterschiede beider Animationen können verdeutlichen, worauf Sie bei Ihrem Motiv achten müssen.


Durch den starken Weichzeichner ist der Vektor-Dampf kaum von echtem zu unterscheiden

Wählen Sie zunächst eine Kaffee- oder Teetasse als Motiv. Sie sollte entweder ganz im Profil oder leicht schräg von oben aufgenommen worden sein. Bei Motiven, die aus zentraler Vogelperspektive aufgenommen wurden, entweicht der Dampf nicht zum oberen Bildrand, sondern er dehnt sich in alle Richtungen aus, während er verschwindet.

Ein Tässchen Kaffee
Platzieren Sie das Bild auf der Bühne, passen Sie die Bühnengröße darauf an und sperren Sie die Ebene. Erzeugen Sie eine zweite Ebene.

Nun nehmen Sie das Pinselwerkzeug, wählen eine weiße Farbe und zeichnen ein paar völlig beliebige Wölkchen etwas über dem Mittelpunkt der Tasse. Je zufälliger, desto besser. Nahmen Sie den Radiergummi zu Hilfe um ein paar Löcher in die Struktur zu reißen.

Screenshot
Die Grundstruktur für den Dampf ist eine ganz einfache Vektorzeichnung

Wandeln Sie nun die komplette ausgewählte Grafik in ein MovieClip um. Wiederholen Sie den diesen Vorgang. Nun haben wir ein MovieClip, dass in einem MovieClip verschachtelt liegt. Das ist die Vorraussetzung für die Anwendung eines Weichzeichner-Filters.

Klicken Sie doppelt auf das Container-Clip, um in dessen Bearbeitungsmodus zu gelangen. Nun wählen Sie das Wolken-Clip aus, gehen im Eigenschaftsinspektor auf das Register „Filter“ und klicken dort auf das Plus-Symbol. Wählen Sie den „Weichzeichner“ („Blur“). Nun heben Sie die Verbindung zwischen horizontaler und vertikaler Filterung auf, in dem Sie auf das Vorhängeschloss klicken. Verfremden Sie die „Wolke“ etwas mehr in die Breite als in die Höhe. Die genauen Werte hängen von Ihrem Motiv ab. In jedem Fall bedeckt die Wolke nur einen inneren Bereich der Kaffeetasse. Die Anpassung können Sie später auch mit dem Skalieren-Werkzeug durchführen.

Screenshot
Sie können den Weichzeichner nur auf MovieClips (und Text) anwenden

Der Rest ist denkbar einfach. Setzen Sie nach acht Frames ein weiteres Schlüsselbild, schieben Sie die Wolke nach oben und machen Sie sie breiter. Aktivieren Sie ein Tweening zwischen den beiden Schlüsselbildern. Gehen Sie noch mal acht Bilder weiter, setzen auch dort ein Schlüsselbild und verschieben die Wolke nach oben aus dem Bild. Ziehen Sie diese sehr breit. Nun müssen Sie noch die Transparenzwerte anpassen. Im ersten und letzten Frame ist der Alphawert der Wolke „0“, im mittleren so um „50“. Je dunkler Ihr Hintergrundmotiv um so weniger Deckkraft benötigt der Dampf.

Finetuning
Damit der Effekt nicht zu gleichförmig erscheint, bietet es sich an, noch eine zweite Wolke zu zeichnen und diese zeitlich versetzt zur ersten zu animieren. Dadurch bekommen Sie auch die Möglichkeit, einen kontinuierlichen Dampfaufstieg als Loop zu realisieren. Klicken Sie dazu in der zweiten Animationsebene auf Frame 16, den letzten Frame der ersten Animation. Setzen Sie ins bestehende Tweening ein Schlüsselbild. Sie sehen: Flash teilt die Animation in zwei Tweenings. Klicken Sie das soeben erzeugte Schlüsselbild an, halten Sie die Shift-Taste gedrückt, klicken Sie auf das letzte Schlüsselbild in der gleichen Ebene und wählen Sie über die rechte Maustaste: „Bilder kopieren“.

Screenshot
Für eine nahtlose Schleife müssen Sie die zweite Animation unterbrechen und in Frame 1 fortsetzen

Klicken Sie auf den ersten (leeren) Frame dieser Ebene mit der rechten Maustaste und wählen Sie „Bilder einfügen“. Der komplette Animationsteil wird nun dort eingefügt. Damit keine Verzögerung in der Bewegung entsteht, müssen Sie nun im ersten Frame die Wolke etwas nach oben verschieben.

Markieren Sie nun alle Bilder in der zweiten Ebene, die nach dem 16 Frame noch kommen und löschen Sie zuerst das Schlüsselbild (Shift+F6) und dann die anderen Bilder (Shift+F5). Der Ordnung halber können Sie auch das Tweening noch deaktivieren. Fertig.

Die Rauchsäule
Der Rauch einer Zigarette funktioniert generell etwa anders, als der wolkige Dampf einer Teetasse. Er besitzt eine dunklere Färbung, ein leichtes grau und er steigt als schlanke Säule nach oben. Dabei beschreibt er eine schlängelnde Bewegung.

Screenshot
Die Rauchfragmente werden grafisch aneinander ausgerichtet und zeitversetzt abgespielt

Die Grundbauweise ist die gleiche. Statt der „Wolke“ malen Sie aber eine ungleichmäßige Schlangenlinie. Markieren Sie die gesamte Schlangenlinie und schneiden Sie sie aus. Erzeugen Sie nun nacheinander vier Movieclips („Einfügen/NeuesSymbol“) mit fortlaufender Nummerierung, von denen jedes einen Bogen der Linie enthält.

Realisieren Sie nun innerhalb des Container-Clips die Animation für das erste Rauchsegment. Dabei verbreitert sich der Rauch im Lauf der Bewegung nur geringfügig, wird aber ebenso transparent. Vergessen Sie dabei den Weichzeichner-Filter nicht.


Fertiger Flashfilm

Nun kopieren Sie wie oben beschrieben die komplette Animation, fügen Sie sie auf einer neuen Ebene in Frame 5 wieder ein. Klicken Sie nun auf das Movieclip mit dem Rauch-Fragment, gehen Sie in den Eigenschaftsinspektor, wählen Sie „Austauschen“ und nehmen Sie das nächste Movieclip mit Rauch. Wiederholen Sie den Vorgang für alle drei Schlüsselbilder. Nun klicken Sie im Schlüsselbild in Frame 5 doppelt auf das Fragment und verschieben die Grafik so, dass sie unten am ersten Fragment anschließt.

Mit den Rauch-Fragmenten drei und vier verfahren Sie genauso, wobei Sie die Animation des vierten Fragments auch wieder teilen und im ersten Frame fortsetzen können, wie schon beim Kaffee.

Sollte Ihnen der Rauch in der Vorschau zu wuchtig erscheinen, so können Sie die gesamte Rauchsäule schlanker machen, in dem Sie in „Szene1“ das Container-Clip horizontal skalieren. ™

FLA-Dateien zum Download:

  • zigarette.fla
  • flash_rauch.fla

Erstveröffentlichung 09.11 .2007

Wie hilfreich war dieser Beitrag?

Klicke auf die Sterne um zu bewerten!

Durchschnittliche Bewertung 0 / 5. Anzahl Bewertungen: 0

Frank Puscher

Frank Puscher

arbeitet seit über 20 Jahren als Berater und Trainer in den Themengebieten E-Commerce und Onlinemarketing. Er berät Führungskräfte und unterstützt sie bei der Stärkung ihrer Onlinekompetenz. Frank hat mehrere Bücher über Webdesign, Kreativität und Usability geschrieben.

Agenturpartner

Webdesign DOERRER

Frankfurt am Main

AMZ-Marketing

Regensburg

DAZECON – Webdesign und Marketing

Dresden

Philipp Pistis – WordPress Agentur

Prittriching

Homepage & Design Heroes GmbH

Balingen

Alle Agenturpartner

Jobs

Texter / Junior Content Marketing Manager

Innsbruck

Teamleiter Online Marketing

München

SEO Junior für Suchmaschinen­optimierung

Salzburg

Cloud Engineer Container & Kubernetes

Karlsruhe

API Developer für die TelemaxX Cloud

Karlsruhe

Zum richtigen Job

Newsletter

Tipps, Tricks, Ratgeber. Unser Newsletter: Jeden Dienstag frisch gedruckt in Deinem Mail-Postfach.

Lust auf mehr? Wir empfehlen folgende Artikel:

Webdesign Trends 2022: Das erwartet uns

Animation, Interaktion und Immersion: Das neue Jahr bringt zahlreiche Trends im Webdesign mit sich und entwickelt einzelne Bereiche weiter. Bereits jetzt ist klar – in Sachen Webdesign-Trends hat das Jahr 2022 einiges zu bieten.

 →   

Google Fonts sind nicht mehr datenschutzkonform. Was nun?

Mit dem Urteil des Landgerichts München vom 20.01.2022 ist nun auch die Verwendung von Google Fonts über die Fonts API nicht mehr datenschutzkonform. Zeit sich nach einer Lösung umzusehen, wie Du dennoch Google Fonts weiterhin einsetzen kannst.

 →   

Dunkel Design – herzlich willkommen auf Dr. Web

Wir freuen uns, dass Moritz Dunkel mit seiner Agentur DNKL.DSGN aus Köln an Bord ist. Moritz Dunkel von Dunkel Design verstärkt unser Agentur-Netzwerk. Inhaltsstarke Seiten

 →   

Schreibe einen Kommentar Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Dr. Web Logo weiss.

Pionier für Digitale Transformation. Seit 1997. ✅  Wissen, Tipps, Ratgeber, Dienstleister: Wir bringen wir die digitale Transformation von Unternehmen praxisnah voran.

Share on facebook
Share on twitter
Share on linkedin
Share on xing
Share on whatsapp
Share on email

Wissen finden

  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs & Karriere
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce
Menü
  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs & Karriere
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce

Rechtliches

  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Nach oben ↑
Menü
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Nach oben ↑

Für Agenturen & Unternehmer

  • Als Agentur eintragen
  • Beste Agenturen finden
  • Städte: von A bis Z.
  • Agenturen in Augsburg
  • Agenturen in Basel
  • Agenturen in Berlin
  • Agenturen in Bochum
  • Agenturen in Bonn
  • Agenturen in Bremen
  • Agenturen in Dortmund
  • Agenturen in Dresden
  • Agenturen in Duisburg
  • Agenturen in Düsseldorf
  • Agenturen in Essen
  • Agenturen in Frankfurt am Main
  • Agenturen in Freiburg
  • Agenturen in Hamburg
  • Agenturen in Hannover
  • Agenturen in Innsbruck
  • Agenturen in Karlsruhe
  • Agenturen in Köln
  • Agenturen in Leipzig
  • Agenturen in München
  • Agenturen in Münster
  • Agenturen in Nürnberg
  • Agenturen in Offenbach am Main
  • Agenturen in Regensburg
  • Agenturen in Salzburg
  • Agenturen in Stuttgart
  • Agenturen in Wien
  • Agenturen in Zürich
  • Digitalagentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
Menü
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Städte: von A bis Z.
  • Agenturen in Augsburg
  • Agenturen in Basel
  • Agenturen in Berlin
  • Agenturen in Bochum
  • Agenturen in Bonn
  • Agenturen in Bremen
  • Agenturen in Dortmund
  • Agenturen in Dresden
  • Agenturen in Duisburg
  • Agenturen in Düsseldorf
  • Agenturen in Essen
  • Agenturen in Frankfurt am Main
  • Agenturen in Freiburg
  • Agenturen in Hamburg
  • Agenturen in Hannover
  • Agenturen in Innsbruck
  • Agenturen in Karlsruhe
  • Agenturen in Köln
  • Agenturen in Leipzig
  • Agenturen in München
  • Agenturen in Münster
  • Agenturen in Nürnberg
  • Agenturen in Offenbach am Main
  • Agenturen in Regensburg
  • Agenturen in Salzburg
  • Agenturen in Stuttgart
  • Agenturen in Wien
  • Agenturen in Zürich
  • Digitalagentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
Das große Dr. Web Icon-Set: 970+ Icons, im SVG-Format​

Lade Dir jetzt das Icon-Set
kostenlos herunter ↓

Über 970 Dr. Web-Icons, kostenlos.
Danke nein, ist nichts für mich.
Invalid email address
Vielen Dank! Bitte schau noch in Dein Postfach und bestätige die Anmeldung.