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 » Bilderschieber – Teil 2: Die Programmierung

Bilderschieber – Teil 2: Die Programmierung

Auf der Suche nach immer neuen Varianten für Bildergalerien und deren Benutzeroberfläche bleibt man entweder bei den ganz spektakulären oder den vollkommen intuitiven Exemplaren hängen. Der Bilderschieber gehört zu letzterer Gattung. Die Programmierung für...

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

von Frank Puscher

Auf der Suche nach immer neuen Varianten für Bildergalerien und deren Benutzeroberfläche bleibt man entweder bei den ganz spektakulären oder den vollkommen intuitiven Exemplaren hängen. Der Bilderschieber gehört zu letzterer Gattung.

Die Programmierung für die Animationen findet an zwei Stellen statt, im MovieClip mit der Bildanimation und in einem SteuerungsClip.

Ausgehend vom letzten Arbeitsschritt im ersten Teil dieses Workshops, befinden wir uns im Bearbeitungsmodus des BildanimationsClips. Sie sollten also vor sich die Timeline mit der Maske, den Buttons und dem Bildmotiv sehen.

Die Programmierung
Die grafischen Arbeiten sind beendet. Der Rest ist ActionScript. Beginnen wir bei den beiden Buttons. In Frame 1 bekommt der Button folgende Programmierung:

 on (rollOver) {
_root.ichBins=this._name.substr(4,1);
_root.steuerung.play();
}

In Frame 10 ist sie etwas verschieden:

      on (rollOver) {
_root.ichBins=this._name.substr(4,1);
_root.steuerung.gotoAndPlay(5);
}

Screenshot

Die Buttons sind nur jeweils in einem Frame zu sehen

Die erste Zeile innerhalb des RollOver-Befehls ist enorm spannend. Sie macht aus dem Instanznamen des von der Maus berührten MovieClips eine Ordnungszahl. Diese Zahl brauchen um später festzustellen, welche MotivClips geöffnet bzw. geschlossen werden müssen. Schließlich kann es vorkommen, dass der Nutzer mit der Maus nicht das nächste sondern das übernächste Motiv wählt. Dann müssen neben dem aktuell sichtbaren und dem berührten Clip noch weitere verschoben werden.

Der AS-Begriff „.substr(4,1)“ extrahiert vom Instanznamen das fünfte Zeichen (bei 0 geht’s los) mit einer Länge von einem Zeichen und schreibt es in die Variable „ichBins“.

Der zweite Befehl startet ein Steuerungsclip, dass für die Animationen zuständig ist.

Erstellen Sie nun eine neue Ebene für „Aktionen“. Im ersten und zehnten Frame steht natürlich ein „stop()“. Zusätzlich im ersten Frame und auch im dreizehnten steht: „left=true;“. Das werden wir verwenden, damit immer die richtige der beiden Animationshälften abgespielt wird. Analog steht im Frame 5: „left=false;“.

Screenshot

Nach dem Laden der Clips und Bilder passiert i Szene 1 nichts mehr

Das MovieClip ist fertig. Kehren Sie zurück zu Szene 1. Löschen Sie das Clip von der Bühne. Nennen Sie die Ebene „Aktionen“ und schreiben Sie im ersten Frame:

      current=9;
kontrolleR=0;
kontrolleL=0;

Die Variable „current“ beschreibt das aktuell geöffnete Clip. Die Variablen „kontrolle“ dienen als Zähler für die Animationen. Einmal rechts und einmal links.

Im zweiten Frame (Schlüsselbild setzen) wird das MovieClip dupliziert und mit den Bildern aus dem Ordner befüllt.

      for(i=0;i<10;i++){
var t = this.attachMovie("bild", "bild"+i, i+1);
loadMovie("bild"+i+".jpg", "bild"+i+".platzhalter");
t._x=450+(i*15);
t._y=350;
}

stop();

Wir lassen die Variable „i“ in einer For-Schleife von 0 bis 9 durchlaufen und erzeugen zu jedem „i“ eine Instanz des MovieClips, füllen dieses mit dem Bild mit der gleichen Ordnungsnummer (im Clip bild3 liegt das Motiv bild3.jpg) und platzieren die Clips mit einem Abstand von 15 Pixel nebeneinander. Durch den Term (i*15) wird jedes Clip 15 Pixel weiter rechts angesiedelt, als sein Vorgänger.

Achten Sie auf das „i“ im Z-Index, also im dritten Parameter des Befehls attachMovie. Es bewirkt, dass die Clips von links nach rechts gestapelt werden. Das Clip mit dem Instanznamen „bild9“ liegt also ganz oben und ist am Anfang sichtbar. Was wir ja bereits mit der Variable „current“ definiert haben.

Die Steuerung
Nun fehlt noch das Herzstück. Erzeugen Sie ein neues MovieClip. Es bleibt grafisch leer und dient nur dem Auslösen der diversen Animationen.

Screenshot

Je nach Richtung der gewünschten Animation wird entweder Frame 2 oder Frame 5 im Steuerungsclip gestartet

Im ersten Frame erfolgt die Initialisierung:

      _root.kontrolleR = 0;
_root.kontrolleL = 0;
stop();

Zwar sind die Kontrollvariablen schon geschrieben, doch dient diese Variablendefinition als Reset nach jeder beendeten Animationssequenz.

Frame 3 und Frame 7 dienen nur zur Herstellung von je einer Schleife:

      gotoAndPlay(2); 
bzw. gotoAndPlay(5);

Frame 5 enthält ebenfalls eine Initialisierung, falls der Nutzer direkt zwischen beiden Animationsrichtungen wechselt:

      _root.kontrolleL = 0;
    

Frame 2 und Frame 6 tragen die animatorische Hauptlast. Sie sind fast identisch, nur die Berechnung der Reihenfolge ist unterschiedlich und die verwendeten Variablen sind verschieden.

Frame 2 enthält folgendes Skript:

      differenzR=_root.current - _root.ichBins;
if(_root.kontrolleR<=differenzR){
summeR=Number(_root.current) - Number(_root.kontrolleR);
playerR = eval("_root.bild"+summeR);
if((playerR.left==true)and(summeR>0)){
playerR.play();
}
_root.kontrolleR=_root.kontrolleR+1;
}else{
_root.current = _root.ichBins;
gotoAndStop(1);
}

In der ersten Zeile berechnen wir den Abstand der Instanznamen zwischen dem berührten Bild, das als nächstes angezeigt werden soll, und dem aktuell sichtbaren Bild. Alle Instanznamen, die zwischen den beiden Motiven liegen müssen ebenso nach rechts geschoben werden, wie das aktuell sichtbare Bild. Nur das neue Motiv wird nicht animiert. Es wird quasi freigelegt.

Die große If-Klammer prüft also die Zählung der Variablen „kontrolle“. Sie wird immer größer (Zeile 8) bis sie den Wert von „differenzR“ erreicht. Durch die Subtraktion der „kontrolle“ vom Wert des aktuellen Motivs „current“ wird stets das nächste Bild zur Linken animiert, bis das gewünschte neue Bild sichtbar ist. Die Variable „playerR“ ist nur ein Hilfskonstrukt zur Vereinfachung für den Abspielbefehl „playerR.play();“.

Letzterer ist konditioniert. Er wird nur ausgelöst wenn die „summeR“ noch größer ist als 0. So kann das letzte Motiv in unserem Stapel gar nicht animiert werden. Muss es auch nicht, darunter ist schließlich nur noch „Tischplatte“ zu sehen.

Die zweite Konditionierung ist ein kleiner Sicherheitspuffer. Sie fragt, ob sich das aktuell zu animierende Motiv überhaupt auf der linken Seite befindet. Sonst könnte es bei ganz schnellen Mausbewegungen zu Fehlanimationen kommen.

Das Skript in Frame 6 sieht folgendermaßen aus, die Unterschiede sind fett dargestellt.:

      differenzL=_root.ichBins - _root.current;
if(_root.kontrolleL<=differenzL){
summeL=Number(_root.current) + Number(_root.kontrolleL);
playerL = eval("_root.bild"+summeL);
if((playerL.left==false)and(summeL>0)){
playerL.play();
}
_root.kontrolleL=_root.kontrolleL+1;
}else{
_root.current = _root.ichBins;
gotoAndStop(1);
}

Achten Sie noch auf die letzten fünf Zeilen. In Zeile 8 wird der Zähler „kontrolle“ um einen Wert erhöht. Ist die If-Bedingung erfüllt und der Wert von „kontrolle“ höher als der von „differenz“, aktualisiert der Befehl _root.current = _root.ichBins; den Wert für das aktuell sichtbare Motiv und das Steuerungsclip wird in den ersten Frame zurückgeschickt, wo die Kontrollvariabeln zurückgesetzt werden.

Zum Schluss kehren Sie zurück auf Szene 1 und ziehen Das Steuerungsclip aus der Bibliothek auf die Bühne. Testen Sie den Film. Beim Laden der Bilder kann es passieren, das sie eine andere Position einnehmen, als das ursprüngliche Platzhalterbild. Dann ist vermutlich der Registrierungspunkt des „bild“ MovieClips in der linken oberen Ecke. Passen Sie die Bildposition des Platzhalters in allen drei Schlüsselbildern entsprechend an. Normalerweise liegen die Positionswerte bei (-400; -300).

Wenn der Ablauf funktioniert, müssen Sie noch zwei Dinge tun: Klicken Sie in der Bibliothek doppelt auf das Icon des Button und ziehen Sie den schwarzen Punkt vom Frame „Auf“ in den Frame „Aktiv“, um ihn unsichtbar zu machen. Und nun klicken Sie doppelt auf das MovieClip „platzhalter“ und löschen das Bild. Das spart exakt eine Motivgröße an Downloadzeit. ™

Material zum Artikel:

  • Demo der fertigen Bildergalerie
  • Teil 1 des Artikels

Erstveröffentlichung 12.12 .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

netkin digital Marketing

Köln

SEO Galaxy

Udler

Critch GmbH – Immobilienkanzlei FREITAG®

München

Warscher – Digital Experts

Horgen

Dunkel Design | Webdesign Grafikdesign Logodesign

Köln

Alle Agenturpartner

Jobs

Inside Sales Manager

Karlsruhe

API Developer für die TelemaxX Cloud

Karlsruhe

Business Development Manager

München

Frontend-Entwickler Angular, React

Bonn

Google Ads Kampagnen­betreuer

Salzburg

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
  • 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 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
  • 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 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.