Übung: Animation und Graphik


Das Ziel dieser Übung ist das Kennenlernen der graphischen Möglichkeiten von VB. Am Ende dieser Übung sollte man über folgendes Bescheid wissen:

Das sinnvolle Benutzen von Graphiken und Graphikanimationen kann den Eindruck einer Anwendung deutlich aufwerten. Es gibt einen weiten Spielraum wenn es darum geht, Graphiken zu erhalten, bearbeiten und benutzen. Microsofts Windows 95 macht einen ausgeprägten Gebrauch von Animationen: Kopieren von Dateien, Entleeren des Papierkorbes, Defragmentieren der Fesplatte, das Logo des Internet Explorer, etc. Die folgende Abbildung zeigt eine Animation einer 'fliegenden' Datei auf dem Weg zwischen zwei Ordnern.


  1. Eine Animation kann dadurch erstellt werden, indem man ein Steuerelemente-Datenfeld eines Bildfeld-Steuerelements einrichtet, dessen Visible-Eigenschaft auf False setzt, und eine weiteres Bildfeld einrichtet (sichtbar), das für die Ausgabe der Animation verwendet wird. Eine Serie von Bildern wird dann erstellt, eines für jedes der unsichtbaren Bildfelder.

    Anmerkung: Ein Steuerelemente-Datenfeld wird erstellt, indem man das erste Steuerelement einrichtet, und dann die Kopieren- und Einsetzen-Befehle verwendet, um die benötigte Zahl an 'Clones' zu erzeugen.

    In dem nachfolgenden Beispiel wurden die Telephone ausgehend von einem Zeichen eines Zeichensatzes (Wingdings, Größe 72pt) erstellt. Der Hörer wurde dann angehoben und etwas gedreht, und dieses Bild wiederum gespeichert, dann wurde das Bild gespiegelt und erneut gespeichert, usw. Anschließend wurde Visual Basic gestartet, ein Steuerelemente-Datenfeld von leeren Bildfeldern erstellt, und die Graphiken diesen zugewiesen. Zwei Zeitgeber-Steuerelemente sowie zwei Labels mit der Caption-Eigenschaft 'Läut' wurden hinzugefügt. Einer der Zeitgeber kontrolliert die Animationsgeschwindigkeit, und der andere die beiden Labels. Die Oberfläche für diese Anwendung könnte wie folgt aussehen:


    Anmerkung: Die verborgenen Bildfelder für diese Animation müssen nicht nebeneinander stehen. Um Platz zu sparen, können sie übereinandergelegt werden:


    Der Code, der für die Ilusion einer animierten Graphik notwendig ist, wird in einem der Zeitgeber-Steuerelemente plaziert:

    Private Sub tmrAnimation_Timer()
  Static TelefonNr As Integer

  imgAnimation.Picture = imgStill(TelefonNr).Picture
  TelefonNr = TelefonNr + 1

  If TelefonNr = 8 Then TelefonNr = 0
End Sub

    Das Zeitintervall für diesen Zeitgeber sollte eher hoch sein (etwa 200). Experimentieren Sie mit unterschiedlichen Werten, um zu sehen, welchen Einfluß diese haben. Die Variable TelefonNr ist als statische Variable deklariert, damit andere Prozeduren sie nicht ansprechen (und möglicherweise ihren Inhalt abändern können), und außerdem würde eine lokale Variable jedesmal ihren Inhalt verlieren, wenn der Zeitgeber aufgerufen wird. Der Inhalt der Variable muß zwischen den Aufrufen der Zeitgeber-Prozeduren erhalten bleiben, damit man dessen Wert verwenden kann, um festzulegen, welches Bild als nächstes anzuzeigen ist.

    Der andere Zeitgeber wird verwendet, um das Anzeigen der beiden Labels (lblBring1 und lblBring2) zu unterbinden. Das Zeitintervall dieses Zeitgebers sollte langsamer sein (etwa 1200), damit jedes der Labels lange genug angezeigt werden kann, um erkannt zu werden.

    Private Sub tmrText_Timer()
  If lblBring2.Visible Then
    lblBring2.Visible = False
    lblBring1.Visible = True
  Else
    lblBring1.Visible = False
    lblBring2.Visible = True
  End If
  
End Sub

  2. Animationen können mit dynamischer Bewegung des Bildfeldes kombiniert werden. Um das zu tun, ergänzen Sie eine Zeile in der Zeitgeber-Subroutine um entweder die Top-Eigenschaft oder die Left-Eigenschaft des Bildfeldes zu ändern, welches die Animation zeigt (die versteckten Bildfelder brauchen sich nicht zu bewegen). Um diesen Effekt sehen zu können, laden Sie das Beispiel Animation.zip herunter. Diese kann im Download-Abschnitt der Hauptseite gefunden werden.


  3. Nachfolgend sind ein paar Ideen für animierte Sequenzen aufgelistet:


  4. Experimentieren Sie mit dem Kopieren des Bildschirminhalts und dessen Bearbeiten in Graphikbearbeitungsprogrammen. Um einen Windows-Bildschirmausschnitt festzuhalten, drücken Sie die 'Druck'-Taste auf der Tastatur, und der Bildschirminhalt wird in die Zwischenablage kopiert. Wechseln sie zu MS Paint und wählen Sie dort 'Einfügen' aus dem 'Bearbeiten'-Menü. Eine praktische Anwendung dieser Arbeitsmethode ist die Erstellung von Hilfedateien, bei denen mit Abbildungen des jeweiligen Bildschirminhalts (oder den wichtigen Ausschnitten) diese erklärt werden. Die folgende Abbildung könnte ein Bestandteil einer solchen Hilfedatei sein.


    Wenn Sie hingegen keine Beschriftungen überall auf dem Bildschirmausschnitt verstreut haben möchten, laden Sie nur das Bild an sich und setzten Sie zusätzlich einige Bezeichnungsfelder (Label) über jene Bereiche, zu denen Sie eine Hilfestellung einblenden möchten. Setzten Sie als nächstes die BackStyle-Eigenschaft der Labels auf Transparent, und löschen Sie den Caption-Eintrag. Dies führt dazu, daß das Bezeichnungsfeld nicht zu sehen ist, aber dennoch vom Programm angesteuert werden kann. Fügen Sie ein weiteres Bezeichnungssteuerfeld ein, nennen Sie es beispielsweise lblAnmerkungen. Gehen Sie zu den unsichtbaren Labels, und tragen Sie in den MouseMove-Methoden den Code, um die Anmerkung anzuzeigen (z.B. lblAnmerkung.Caption = "Schaltfläche für das Minimieren"). Da die MouseMove-Methode verwendet wird, braucht der Benutzer nur mit der Maus auf den Bereich zeigen, zu dem er Informationen haben möchte, und das Label lblAnmerkungen zeigt automatisch diese Informationen an.


  5. Für photo-realistische Graphiken am PC können Scanner benutzt werden, um Papierabzüge zu digitalisieren. Als Alternative bieten sich verschiedene Sammlungen auf CD-ROM an, die in vielen Buchhandlungen oder Papiergeschäften zu finden sind.

    JPEG Bild (883 x 665). Copyright: Kai Bachmann


    Kommentar: Selbst wenn es verschieden Graphikformate gibt, sind manche besser als andere geeignet. Zum Beispiel benötigt dieses Stadtszenenbild im GIF-Format 110k mehr Speicherplatz. Trotzdem ist GIF effizienter für kleinere Graphiken wie z.B. für die Pfeilknöpfe am Ende dieser Seite.

    Bilder aus dem WWW können gespeichert werden, indem man mit der rechten Maustaste auf diese clickt, un dann 'Graphik speichern unter..' aus dem Kontextmenü auswählt. Denken Sie aber immer an das Copyright. Kleinere Symbole und Knöpfe stellen in der Regel keine Probleme dar, aber vor dem Herunterladen größerer Bilder oder Firmenlogos sollte immer um Erlaubnis angesucht werden. Einmal heruntergeladen als .GIF or .JPEG müssen diese Bilder in das Bitmap-Format konvertiert werden, damit sie in Visual Basic verwendet werden können.


Übung 6 (Vertikale und Horizontale Bildlaufleisten)
Hauptseite
Übung 8 (Arbeiten mit mehreren Formen)