For business it’s sometime important to have a central place where employees and clients are able to interact together. NextCloud is a simple and extendable PHP solution with a huge set of features you can host by yourself, to keep full control of your data. A classical Groupware ready for your own cloud.
If you want to install NextCloud on your own server you need as first a well working PHP installation with a HTTP Server like Apache. Also a Database Management System is mandatory. You can chose between MySQL, MariaDB and PostgreSQL servers. The classical way to install and configure all those components takes a lot of time and the maintenance is very difficult. To overcome all this we use a modern approach with the virtualization tool docker.
The system setup is as the following: Ubuntu x64 Server, PostgreSQL Database, pgAdmin DBMS Management and NextCloud.
[1] Tutorial: Learn to walk with Docker and PostgreSQL
[2] Ubuntu Server: https://ubuntu.com/download/server/
[3] Docker : https://www.docker.com
[4] PostgreSQL https://hub.docker.com/_/postgres
[5] pgAdmin https://hub.docker.com/r/dpage/pgadmin4
[6] NextCloud https://hub.docker.com/_/nextcloud
If you have any question feel free to leave a comment. May you need help to install and operate your own NextCloud installation secure, don’t hesitate to contact us by the contact form. In the case you like the video level a thumbs up and share it.
After some years the virtualization tool Docker proofed it’s importance for the software industry. Usually when you hear something about virtualization you may could think this is something for administrators and will not effect me as a developer as much. But wait. You’re might not right. Because having some basic knowledge about Docker as a developer will helps you in your daily business.
The name of the network is services an bind to the IP address range 172.18.0.0 to 172.18.0.255. You can proof the success yourself by typing:
docker network ls
An output like the one below should appear:
NETWORK ID NAME DRIVER SCOPE
ac2f58175229 bridge bridge local
a01dc5513882 host host local
1d3d3ac42a40 none null local
82da585ee2df services bridge local
The network step is important, because it defines a permanent connection, how applications need to establish a connect with the PostgreSQL DBMS. If you don’t do this Docker manage the IP address and when you run multiple containers on your machine the IP addresses could changed after a system reboot. This depends mostly on the order how the containers got started.
Step 1: create the container and initialize the database
If you wish that your PostgreSQL is always up after you restart your system, you should change the restart policy form no to always. The second line configure the network connection we had define in step 0. After you created the instance pg-dbms of your PostgreSQL 11 Docker image, you need to cheek if it was success. This you can do by the
docker ps -a
command. When your container is after around 30 seconds still running you did everything right.
Step 2: copy the initialized database directory to a local directory on your host system
The biggest problem with the current container is, that all data will got lost, when you erase the container. This means wen need to find a way how to save this data permanently. The easiest way is to copy the data directory from your container to an directory to your host system. The copy command needs tow parameters source and destination. for the source you need to specify the container were you want to grab the files. in our case the container is named pg-dbms. The destination is a PostgreSQL folder in the home directory of the user ed. If you use Windows instead of Linux it works the same. Just adapt the directory path and try to avoid white-spaces. When the files appeared in the defined directory you’re done with this step.
Step 3: stop the current container
docker stop pg-dbms
In the case you wish to start a container, just replace the word stop for the word start. The container we created to grab the initial files for the PostgreSQL DBMS we don’t need no longer, so we can erase it, but to do that as first the running container have to be stopped.
Step 4: start the current container
docker start pg-dbms
After the container is stopped we are able to erase it.
Step 5: recreate the container with an external volume
Now we can link the directory with the exported initial database to a new created PostgreSQL container. that’s all. The big benefit of this activities is, that now every database we create in PostgreSQL and the data of this database is outside of the docker container on our local machine. This allows a much more simpler backup and prevent losing information when a container has to be updated.
If you have instead of PostgreSQL other images where you need to grab files to reuse them you can use this tutorial too. just adapt to the image and the paths you need. The procedure is almost the same. If you like to get to know more facts about Docker you can watch also my video Docker Basics in less then 10 Minutes. In the case you like this short tutorial share it with your friends and colleagues. To stay informed don’t forget to subscribe to my newsletter.
This short tutorial covers the most fundamental steps to use docker in your development tool chain. After we introduced the basic theory, we will learn how to install docker on a Linux OS (Ubuntu Mate). When this is done we have a short walk through to download an image and instantiate the container. The example use the official PHP 7.3 image with an Apache 2 HTTP Server.
Das Projekt Get Flash ist eine sehr frühe Arbeit aus dem Jahre 2002, die ich bei Aufräumarbeiten zufällig wieder entdeckt habe. Auch wenn neue Versionen von Flash mittlerweile viele der vorgestellten Techniken automatisch generieren können, glaube ich das dieses kleine Tutorial hilfreich ist, ein allgemeines Verständnis zu Videoanimationen zu erlangen. Es ist auch zu erwähnen, das Flash heutzutage etwas an seiner Bedeutung verloren hat und beispielsweise Apple generell diese Technologie nicht unterstützt. Auch WordPress.com gestattet das Einbinden von Flasch-Filmen ausschließlich über eien Plugin, wozu man einen kostenpflichtigen Premium Account benötigt. Aus diesem Grund sind sämtliche Beispiele auf Googel Drive zum freien Download abgelegt. Sicherlich verwenden immer weniger Webseiten, aus Gründen der Barrierefreiheit Flash Animationen, dennoch ist die Software ein hervorragendes Werkzeug Animationen zu erstellen, die sich ohne Schwierigkeiten in eigens erstellte Filme einbetten lassen, welche man im Sinne der Idee Broadcast yourself auf Portalen wie YouTube veröffentlichen kann. Die hier vorgestellten Beispiele beziehen sich auf Flash Version FX, lassen sich allerdings auch problemlos in neueren Versionen öffnen und bearbeiten. Ach wenn Machromedia vor sehr langer Zeit durch Adobe aufgekauft wurde.
Nach dem das Flash MX Installiert wurde muss es unseren Anforderungen angepasst werden. Bei dem Erststart werden wir gefragt was wir machen möchten, Design oder Entwicklung. Eigentlich ist diese Frage überflüssig und wir klicken einfach das an was uns gerade einfällt, da hier nur verschiedene Arbeitsbereiche eingeblendet werden. Die einzelnen Fenster mit den Arbeitsmitteln passen (modifizieren) wir uns nach den Bedürfnissen an.
Die Zeitleiste
Die Zeitleiste besteht aus mehreren Bereichen. Die Arbeitsfläche, auch Bühne genannt, lässt sich als erstes Identifizieren. Den Inhalt kann man in dem Eingabefeld am rechten Rand skalieren, somit können Details besser bearbeitet werden. Der eigentliche Clou besteht in der Aufteilung von Einzelbildern (Schlüsselbilder) Ebenen und Szenen. Was dies im Einzelnen ist beschreibe ich im Kurzen nachfolgend.
Szenen
Das größte Objekt nennt sich Szene. Wie bei einem Kinofilm werden mehrere Bildinhalte in einer Szene zusammengefasst. Wenn man sich eine Internet Seite betrachtet ist diese einzelne Seite in Flash als Szene zu betrachten. Es werden viele Bilder aneinander gereiht um einen bestimmten Effekt (Animation) zu erreichen. Um zwischen den einzelnen Szenen zu wechseln benutzt einfach folgendes Symbol: . Über das Menüfeld Einfügen können neu Szenen erstellt oder gelöscht werden.
Ebenen
An zweiter Stelle stehen die Ebenen, sie kann man mit Folien, die über einander gelegt werden, vergleichen. Dabei ist zu beachten, das die höhere Ebene immer die darunter liegende überdeckt. Es geht also nicht, erst einen Text zu erstellen und dann ein Bild darüber zulegen, somit wäre der Text vom Bild verdeckt.
Eine neue Ebene kann mit diesem Zeichen erstellt werden. Seit der Version MX gibt es auch die Möglichkeit Ebenen Ordner zu erstellen. Somit können verschiedene Sequenzen zusammengefasst werden, dies erhöht wesentlich die Übersichtlichkeit. Zusätzlich sollte man alle Ordner und Ebenen explizit (eindeutig) bezeichnen. Mit einem Doppelklick lässt sich dies recht einfach bewerkstelligen. Das erleichtert vor Allem die Arbeit bei späteren Änderungen, da die Position der einzelnen Objekte besser lokalisiert werden kann. Wenn ein Ordner oder eine Ebene makiert ist, kann sie mit diesem Zeichen gelöscht werden .
Für einige Effekte werden Pfade benötigt, wie diese benutzt werden wird an späterer Stelle erklärt. Mit diesem Symbol: werden Ebenenpfade erstellt. Sie beziehen sich immer auf die darunter liegende Ebene.
Eine andere Möglichkeit ist über das Menüfeld Einfügen eine neue Ebene bzw. einen Ordner zu erstellen.
Um effektiver arbeiten zu können, besitzen die Ebenen verschiedene Eigenschaften. Diese im Anschluss erläuterten Features, findet man oft ich hochwertigen Zeichenprogrammen.
Ein und Ausblenden
Sperren: sperrt alle Objekte in der betreffenden Ebene
Farbzuweisung: Weist allen Objekten einer Ebene eine eigen Farbe zu, dadurch lässt sich besser erkennen welche Objekte in die betreffende Ebene gehören
Einzelbilder / Schlüsselbilder
Die Ebenen bestehen aus beliebig vielen Einzelbildern. In diesen Bildern werden die Einzelnen Objekte abgelegt und mit Arbeitsanweisungen versehen.
Das kleinste Element in Flash ist das Bild, und wird Schlüsselbild genannt, wenn es direkt mit der rechten Maustaste angewählt wird, kann ihm über das Menüfeld Aktion eine Eigenschaft zugewiesen werden.
Über dieses Zeichen lassen sich verschiedene Ansichtsoptionen der Schlüsselbilder einstellen.
Werkzeuge
Flash bietet die verschiedensten Zeichenwerkzeuge, zum erstellen von Grafiken an. Der folgende Abschnitt ist lediglich als kleine Einführung zu verstehen, um einen kurzen Überblick zu erhalten. Das Programm Flash besitzt eine ausgezeichnete Hilfefunktion, mit F1 kann diese aufgerufen werden, in der die einzelnen Werkzeuge bis in Detail beschrieben werden.
Pfeilwerkzeug: Mit diesem Werkzeug werden Objekte ausgewählt und können anschließend bearbeitet bzw. verschoben werden. Man hat damit Zugriff auf die verschiedenen Fenster wie Transformieren und Info.
Unterauswahl: Mit dem Unterauswahlwerkzeug werden Ankerpunkte die zuvor mit dem Stiftwerkzug erzeugt wurden sind verschoben.
Linienwerkzeug: In dem Fenster Eigenschaften kann man die verschiedenen Optionen für die zu zeichnenden Linien einstellen. Farbe, Stärke und Art lassen sich so variieren.
Lassowerkzeug: Mit dem Lasso ist es möglich Bereiche einzugrenzen und dies dann zu löschen oder zu verschieben.
Stiftwerkzeug: Wie Ihr sicherlich schon festgestellt habt lassen sich Linien mit dem Linienwerkzeug nicht krümmen. Um dies zu ermöglichen gibt es das Stiftwerkzeug, es hat natürlich die gleichen Optionen im Fenster Eigenschaften wie die Linien. Es werden zwei Punkte ausgewählt die dann direkt verbunden werden. Mit dem Pfeilwerkzeug kann nun ein beliebiger Punkt auf dieser Linie ausgewählt werden an dem sich der Wendepunkt (Übergang von einer Kurve in die nächste) befindet. Durch ziehen mit gedrückter rechter Maustaste kann die Krümmung bestimmt werden.
Textwerkzeug: Mit diesen Eigenschaften lassen sich Schriften hervorragend formatieren. Die meisten Symbole dürften von den verschiedensten Office Anwendungen bekannt sein. Schrifttyp, Farbe, Größe, Buchstabenabstand, Blocktext und Kursiv sind nur einige Optionen. Über den Button Format lassen sich die wichtigsten Einstellungen vornehmen.Flash unterscheidet drei Arten von Text:
Statischer Text: ist für den Benutzer unveränderbar
Dynamischer Text: Liest verschiedene Variablen aus und zeigt sie an (Statusanzeige für Preloader)
Eingabetext: Definiert ein Eingabefeld für Anwender (Gästebücher, Formulare)
Ellipsenwerkzeug: Die unterschiedlichsten Ellipsen bzw. Kreise lassen ich mit diesem Werkzeug zeichnen.
Rechteckwerkzeug: In der Werkzeugleiste gibt es ein Feld das sich Optionen nennt, wenn man dieses Symbol auswählt kann man Rechtecke mit abgerundeten Ecken zeichnen.
Freihandwerkzeug: Wie der Name schon sagt kann man mit diesem Hilfsmittel lassen sich alle Variationen von Polygonen (unförmige Gebilde) erstellen. Die Linienform kann vom Programm in drei unterschiedlichen Einstellungen beeinflusst werden. Begradigen Erzeugt winkelförmige Objekte, Glätten verändert die Linien mehr in Kurven und Tinte zeichnet ohne Beeinflussung des Programms.
Pinselwerkzeug: Mit dem Pinselwerkzeug kann man verschiedene Pinselspitzen und Größen laden. Im Gegensatz zum Freihandwerkzug, ist dieses Zeichenmittel für die Bearbeitung einzelner Pixel gedacht und nicht für Linien.
Frei transformieren: Alle Objekte, die vorher mit dem Pfeilwerkzeug ausgewählt wurden, lassen sich Frei transformieren. Man kann also mit diesem Werkzeug Objekte verkleinern, vergrößern, drehen und neigen. Besonders bei importierten Bildern lernt man diese Möglichkeit zu schätzen.
Füllungstransformation: Mit dem Füllungstransformationswerkzeug können Farbverläufe bearbeitet werden, indem das Werkzeug ausgewählt wird. Sobald man nun mit der Maus über einen Farbverlauf kommt, werden die Optionen angezeigt. Der Verlauf lässt sich nun transformieren, drehen und verschieben.
Tintenfasswerkzeug: Wenn z. B. ein Viereck gezeichnet wird, besteht es aus einer Randfarbe und einer Füllfarbe. Mit dem Tintenfasswerkzeug lassen sich die Linien des Randes nachfärben.
Farbeimerwerkzeug: Um komplette Farbfüllungen zu verändern nutzt man das Farbeimerwerkzeug
Pipette: Mit der Pipette lassen sich Farbtöne aufnehmen, dies wird benötigt wenn eine einheitliche Farbgebung erwünscht wird. Am einfachsten wird dieses Werkzeug mit Farben Fenster in der Werkzeugleiste verwendet, z. B. wenn eine Füllfarbe übernommen werden soll. Einfach mit der Maus auf die gewünschte Farbe wechseln, der Mauszeiger verwandelt sich außerhalb des vordefinierten Farbfeldes automatisch zur Pipette. Durch einfaches anklicken wird die Farbinformation übernommen.
Radiergummiwerkzeug: Zum Radiergummi lässt sich nicht besonders viel sagen, es lassen sich verschiedene Spitzen laden und schon kann man die “Fehler” wieder korrigieren. Eine sehr nette Option ist der Wasserhahn, mit ihm kann man ganze Füllflächen entfernen.
Einbetten von Filmen
Wer eine eigene WordPress Installation besitzt, kann das WP Flash Plugin installieren. Die Verwendung ist recht einfach.
Alternativ lassen sich die Animationen auch über HTML Code einbetten, die allerdings im gehosteten WordPress zu einem Link konvertiert werden.
Shortcuts
Unter Hotkeys bzw. Shortcuts versteht man den Zugriff auf verschiedene Optionen des Programms, mit nur einem einfachen Tastendruck. Diese Tasten sind auch unter den einzelnen Menüpunkten in Flash gekennzeichnet. Diese Liste erhebt keinen Anspruch auf Vollständigkeit.
Del = Löschtaste (Entf.)
Shift = Umschalttaste (Backspace)
Strg = Crtl
Animierter Text
In diesem Abschnitt beschreibe ich alle gängigen Animationsgrundlagen, sie lassen sich auch auf Bilder und selbst gezeichnete Grafiken übertragen. Der Text wird mit dem Textwerkzeug erstellt und kann mit einer Vielzahl an Formatierungsmöglichkeiten verändert werden.
Die wichtigste Eigenschaft von Flash ist der Tween, es gibt ihn als Bewegung und Form. Die ersten sechs Beispiele beruhen auf Bewegung. Das Prinzip ist relativ einfach, es gibt ein Ausgangsbild und ein Endbild zwischen einem Tween. Lediglich diese beiden Bilder müssen erstellt werden, um den Rest kümmert sich das Programm. Ein Bewegungstween wird über das Menüfeld Einfügen erstellt. Eine andere Methode einen Tween zu erstellen ist mit der Maus auf das entsprechende Schlüsselbild zudrücken und im sich öffnenden Menüfenster Bewegungstween erstellen auswählen. Im Fenster Eigenschaften werden nun die verschiedenen Parameter eingegeben. Die nachfolgenden Beispiele sind verschiedene Anfangslektionen um die einzelnen Optionen eines Tweens zu erlernen. Sie lassen sich problemlos erweitern, kombinieren und modifizieren.
Laufschrift
Die Simpelste Möglichkeit ist die Bewegung von einem Anfangspunkt A zu einem Endpunkt E. Mit dem Textwerkzeug wird in das erste Schlüsselbild einer Ebene ein Text geschrieben. Diesen Text wird vor der Bühne mit dem Pfeilwerkzeug platziert. Nun erstellen wir einen Bewegungstween. Als nächsten wird ca. 10 Bilder weiter ein Schlüsselbild(wie Tween erstellen, allerdings Schlüsselbild einfügen auswählen) erstellt, je höher die Anzahl der Bilder zwischen den einzelnen Schlüsselbildern ist, desto länger dauert der Effekt. Nach dem das zweite Schlüsselbild erstellt worden ist wählen wir es mit dem Pfeilwerkzeug aus und verschieben den Text an das andere Ende der Bühne, Mehr ist für eine einfache Laufschrift nicht zu tun. Das Ergebnis kann man betrachten wenn man den Menüpunkt Steuerung/ Film testen auswählt.
Hinweis: Um eine verwacklungsfreie Animation zu erreichen, sollte das Objekt auf einer geraden Linie verschoben werden. Um dies zu bewerkstelligen wird das Fenster Info genutzt, hier lassen sich Pixelgenaue Koordinaten für die Abszisse (X) und Ordinate (Y) angeben. Die Ausrichtung erfolgt standardmäßig an der rechten oberen Ecke des Objektes. Dies lässt sich ändern indem man kleine weiße Kästchen neben dem X und Y Feld anklickt, somit ist die Ausrichtung mittig. Mit B und H kann die Breite und Höhe eines Objektes genau festgelegt werden.
Transformation
Es gibt zwei Möglichkeiten einen Transformationseffekt zu erstellen. Als erstes muss wieder in der Ebene ein Schlüsselbild ausgewählt werden in dem ein Text gezeichnet wird. Danach wird ein Bewegungstween erstellt und ca. 10 Bilder weiter wieder ein Schlüsselbild eingefügt. Diese Prozedur kennen wir schon aus der vorhergehenden Animation, sie wird uns auch noch häufiger begleiten. Bis jetzt passiert noch nix. Das wird geändert in dem man mit dem Pfeilwerkzeug das letzte Schlüsselbild auswählt. Nun kommt das Feld Transformation zu Einsatz. Mit dem Kästchen Proportionen wird festgelegt ob die Transformation gleichmäßig oder ungleichmäßig verläuft. Anschließend kann man die Werte Für Höhe und Breite in die Eingabefelder eintragen und mit Enter bestätigen. Eine andere Möglichkeit ist in dem Fenster Info die Höhe und Breite des Objektes explizit einzugeben.
Ticker
Einen Ticker wird auf recht einfache Weise erstellt, dazu schreiben wir den ersten Buchstaben des Wortes auf die Bühne und richten diesen mit dem Pfeilwerkzeug nach belieben aus. Nun wird ein neues Schlüsselbild in der Ebene erstellt. Wir wechseln wieder zum Textwerkzeug und klicken damit auf den Text und schreiben den nächsten Buchstaben. Dies wird solange wiederholt bis der komplette Text geschrieben ist. Es ist nur zu beachten dass man immer den neuen Buchstaben auch in das neue Schlüsselbild schreibt.
Ein- und Ausblenden
Ein weiterer Effekt ist das Ein – bzw. Ausblenden von Objekten. Dazu erstellen wir wieder ein Text und ein Bewegungstween und ca. 10 Bilder weiter ein neues Schlüsselbild. Nun wählen wir das Pfeilwerkzeug aus und markieren das letzte Schlüsselbild. Danach muss mit der Maus der Text ausgewählt werden. Im Fenster Eigenschaften ist nun folgender Inhalt zu sehen: Die Abgebildeten Einstellungen müssen direkt übernommen werden, lediglich die Prozentangabe wird auf Null gesetzt. Der Effekt nennt sich Alphatween.
Drehen
Um Objekte zu drehen wir wieder der der Bewegungstween mit den beiden Schlüsselbildern erstellt. Wenn dies erledigt ist wird wieder das letzte Schlüsselbild mit dem Pfeilwerkzeug ausgewählt.
Anschließend wenden wir uns wieder dem Fenster Transformation zu. Dort gibt es zwei Optionen, Drehen und Neigen. Die Parameter werden in Grad angegeben. Es ist allerdings zu beachten, dass Flash nur die Gradzahlen von 0 bis 180 kennt der Bereich von 180° bis 360° wird mit einem Minuszeichen abgedeckt. Somit benötigt man für eine 360° Drehung 5 Schritte (0°,90°, 180°, -90°, 0°). In der Klammer stehen die Parameter für alle 5 Schlüsselbilder chronologisch geordnet.
Farbänderungen
Farbänderungen werden wie Blendeffekte erstellt, es wird lediglich im Fenster Eigenschaften anstatt Alpha die Option Farbe ausgewählt. In dem kleinen Kästchen neben Auswahlmenü Farbe kann nun die neue Farbe eingestellt werden.
Animierte Grafik
Alle Animationen die bereits vorgestellt wurden lassen sich genauso auf Grafiken übertragen. In diesem Kapitel möchte ich etwas schwierigere Animationen vorstellen, die Besonderheit hierbei ist lediglich das mit Pfadebenen und dem Formen Tween gearbeitet wird. Natürlich stehen auch hier alle Beispiele als .fla Rohdatei zur Verfügung.
Die Bibliothek
Eines der wichtigsten Arbeitsmittel für Grafiken, natürlich auch für alle anderen extern geladenen Daten, ist die Bibliothek. Sie wird geöffnet über Fenster/ Bibliothek. Alle Dateien die in den Aktuellen Film importiert worden sind erscheinen hier. Auch sämtliche Tweens werden in der Bibliothek abgelegt. Um den Überblick zu wahren, sollte auf eine Archivierung mit Ordnern zurückgegriffen werden. Mit einem Doppelkick auf das Ordnersymbol werden die darin enthaltenen Dateien angezeigt. Wählt man nun z.B. eine Schaltfläche aus kann sie per Drag and Drop (herrüberziehen und fallen lassen) auf der Bühne platziert werden. Mit der gleichen Methode werden auch die einzelnen Elemente in die Ordner gepackt. Im untersten Rand der Bibliothek findet man einige Optionen: mit dem Plus Symbol werden neue Grafiken erstellt, mit dem Ordner Symbol erstellt man neue Ordner und markierte Objekte löscht man mit dem Papierkorb Symbol.
Externe Dateien laden
Bilder oder auch Sounddateien werden über Datei/ In Bibliothek importieren in die Bibliothek aufgenommen.
Masken
Der Masken Effekt ist vielseitig einsetzbar, er beruht auf 2 Ebenen. Die oberste Ebene fungiert als Maskenebene, in der ein Objekt (Kreis, Rechteck etc.) erstellt wird das als Fenster für die darunter liegende Ebene dient. Auf diese Weise lässt sich auch ein Ticker realisieren.
Als erstes wird eine zweite Ebene erstellt. In der oberen Ebene wird das Objekt eingebunden welches als Fenster dienen soll. Dieses Objekt kann natürlich auch mit einem Bewegungs- oder Formentween (nächster Unterpunkt) animiert werden. Als zweiten Schritt wird ein Objekt in der darunter liegenden Ebene erstellt, dies kann z.B. ein importiertes Bild oder ein Text sein. Es ist besonders darauf zu achten, dass die untere Ebene genauso viele Einzelbilder enthält wie die darüber liegende Ebene. Wenn das untere Bild nicht animiert ist muss nicht extra ein Bewegungstween erstellt werden. Es genügt in dieser Ebene im letzten Bild ein neues Schlüsselbild zu erstellen, so wird die Speichergröße auf einem Minimum gehalten. Nach dem alle Objekte ausgerichtet sind wird mit der rechten Maustaste die obere Ebene ausgewählt, es öffnet sich nun ein Menü. In diesem Menü wird der Unterpunkt Maske ausgewählt. Nach diesem Schritt ist der Film fertig gestellt.
Morphing (Formentween)
Der Formentween ist das geeignete Werkzeug in Flash um einen Morphing Effekt zu erzeugen. Diese Animation lässt sich relativ einfach erstellen.
Zuerst wird ein Objekt auf die Bühne gezeichnet. Anschließend erstellt man einige Bilder weiter ein neues Schlüsselbild und löscht den übernommenen Inhalt, dann erstellt man das nächste Objekt. Wenn nun beide Objekte erstellt wurden sind, wird das Pfeilwerkzeug ausgewählt. Nun wechseln wir in das erste Schlüsselbild und ändern im Fenster Eigenschaften den Wert für Tween auf Formen. Dies wird für jedes weitere Schlüsselbild genauso durchgeführt. So einfach lässt sich eine Morpinganimation durchführen.
Bewegungspfad
Der Bewegungspfad ist gedacht, um Objekte auf einer festgeschriebenen Bahn “wandern” zu lassen. So lassen sich vor allem Kreisbewegungen realisieren, da der reine Bewegungstween nur gerade Stecken kennt.
Als ersten Schritt muss die Ebene ausgewählt werden, in der sich das Objekt befindet, dass bewegt werden soll. Dann Wird über das Symbol: eine neue Pfadebene erstellt. In dieser Pfadebene wird nun mit dem Freihandwerkzeug die Linie gezeichnet auf der sich das Objekt bewegen soll. Nachdem das geschehen ist, wird die Ebene tiefer gewechselt. Hier wird nun das gewünschte Bild oder der Text gezeichnet bzw. eingefügt. Anschließend wird wie üblich ein Bewegungstween und einige Bilder weiter ein neues Schlüsselbild erstellt. Nun muss nur noch das Objekt im ersten Schlüsselbild am Anfang des Pfades und das Objekt im letzten Schlüsselbild am Ende des Pfades positioniert werden.
So sollte dann die Zeitleiste ausschauen wenn, alles in Ordnung ist:
Action Script
Um einen Film interaktiv zu gestalten werden Schaltflächen benötigt. Sobald das Layout feststeht und man sich auch im Klaren über die Funktion (z.B. Ein und Ausschalten von Musik) des Buttons ist, kann mit der Erstellung begonnen werden. Zunächst möchte ich darauf hinweisen, dass es nicht wie in HTML üblich eine Bilddatei mit einem Funktionslink verknüpft wird. Schaltflächen müssen explizit (eindeutig) generiert werden. Dies erreicht man auf recht simple Weise über das Menüfeld: Einfügen / Neues Symbol. Anschließend öffnet sich ein Fenster in dem man die Option Schaltfläche auswählt und bestätigt.
In dem neuen Fenster sind vier leere Einzelbilder in der Zeitleiste zu sehen. Auf, Darüber und Aktiv sind die einzelnen Zustände und beziehen sich auf das Verhalten der Schaltfläche und der Maus. Das Aussehen der einzelnen Teilbilder wird vom eigenen Geschmack bestimmt. Das Zeichnen selbst erfolgt wie in einem normalem Einzelbild, als Orientierungshilfe befindet sich auf der Arbeitsfläche ein Kreuz. In dem man Szene mit der Maus auswählt gelangt man anschließend zurück zum Film. Die erstellte Schaltfläche befindet sich nun in der Bibliothek und kann per Drag and Drop auf der Bühne positioniert werden. Weitere Hinweise zur Bibliothek stehen im Kapitel 4.1 Grafik. Nachdem die Buttons im Film integriert worden sind müssen sie noch mit Aktionen versehen werden. Dazu wird mit dem Pfeilwerkzeug die Schaltfläche ausgewählt und im Fenster Aktionen wird ihr die entsprechende Eigenschaft zugewiesen. Das Zuweisen von Eigenschaften ist im Kapitel Actionscript genauer erläutert, da die einzelnen Möglichkeiten recht umfangreich sind.
Actionscript für Schaltflächen
Frames
Frames sind Rahmen die den Browser unterteilen, im Allgemeinen sind die Inhalte dieser Rahmen eigenständig. Durch diese Technologie lassen sich mehrere voneinander unabhängige Seiten in einem Browserfenster arrangieren. Der Vorteil hierbei ist das nur bestimmte Teile einer Webseite bei Aktionen (navigieren mit einer Schaltfläche) aktualisiert werden. Zusätzlich kann man sagen dass die gängigsten Browser diese Technologie unterstützen. Das hier vorgestellte Script für HTML ist die einfachste Variante für Frames und teilt den Browser in zwei vertikale Spalten, natürlich sind auch Schachtelungen und aufwendigere Unterteilungen möglich. Mehr Informationen bietet das kostenlose Nachschlagewerk SelfHTML welches unter www.teamone.de bezogen werden kann.
Der HTML Quelltext:
<html>
<head>
<title>Home</title>
</head>
Das Wort was ihr bei Title schreibt erscheint später in der Explorerleiste des Browsers.
Mit den Attributen Border, Frameborder und Framespacing werden die Rahmen innerhalb des Browserfensters unterdrückt. Cols bezeichnet die Größe der einzelnen Frames. Wenn rows anstatt cols verwendet wird unterteilt man das Browserfenster nicht in rechts und links sondern oben und unten. Name ist ein Ankerverweis damit die zu ladende Seite auch in das richtige Fenster geladen werden kann, wird dieser Ankerverweis nicht gesetzt lädt die der Link die neue Seite in das Fenster in dem sich der Link befindet.
<body></body>
</html>
Datum Script
Oft möchte man auf seiner Seite aus verschiedenen Gründen, die aktuelle Uhrzeit oder das aktuelle Datum anzeigen. Dies lässt sich mit dem folgenden Script einfach realisieren, auf der Seite http://www.flashhilfe.de/lesen/forumtipps_0_000_0_33229_33229.html findet ihr das Original. Da dort im Forum einige Leute Probleme mit der Umsetzung hatten habe ich das ganze leicht modifiziert und etwas erläutert. Die Änderungen betreffen lediglich das Design und nicht die grundsätzliche Funktion.
Zu beginn öffnen wir eine neues Dokument in dem drei Ebenen erstellt werden. Diese Ebenen bekommen die Namen: Text1, Text2 und Script. Nach dem dies getan ist wechseln wir auf die Ebene Script und stellen in dem Fenster Aktionen den Expert Modus ein. Anschließend könnt ihr bequem das Script in Flash rüber kopieren, so erspart man sich unnötige Tippfehler. Wer möchte kann nun noch einige Anpassungen vornehmen. Im zweiten Schritt wechseln wir zur Text1 Ebene und erstellen ein dynamisches Textfeld mit dem Textwerkzeug, für den Instanznamen gebt ihr >meinDatum< ein. Nun kann über das Fenster Eigenschaften die Schriftart, Schriftfarbe usw. eingestellt werden. Das Gleiche wiederholt ihr mit der Ebene Text2, die für das Textfeld den Instanznamen >meineZeit< bekommt. Durch die Textfelder könnt ihr selbständig wählen ob nur das Datum oder die Zeit bzw. beides angezeigt wird. Auch lassen sich so die beiden Objekte genauer im Film platzieren.
wochentage = new Array("Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag");
akt_datum = new Array();
Die Zeitleiste besteht aus mehreren Bereichen. Die Arbeitsfläche, auch Bühne genannt, lässt sich als erstes Identifizieren. Den Inhalt kann man in dem Eingabefeld am rechten Rand skalieren, somit können Details besser bearbeitet werden. Der eigentliche Clou besteht in der Aufteilung von Einzelbildern (Schlüsselbilder) Ebenen und Szenen. Was dies im Einzelnen ist beschreibe ich im Kurzen nachfolgend.
. Über das Menüfeld Einfügen können neu Szenen erstellt oder gelöscht werden.
erstellt werden. Seit der Version MX gibt es auch die Möglichkeit Ebenen Ordner 
zu erstellen. Somit können verschiedene Sequenzen zusammengefasst werden, dies erhöht wesentlich die Übersichtlichkeit. Zusätzlich sollte man alle Ordner und Ebenen explizit (eindeutig) bezeichnen. Mit einem Doppelklick lässt sich dies recht einfach bewerkstelligen. Das erleichtert vor Allem die Arbeit bei späteren Änderungen, da die Position der einzelnen Objekte besser lokalisiert werden kann. Wenn ein Ordner oder eine Ebene makiert ist, kann sie mit diesem Zeichen gelöscht werden 
.
werden Ebenenpfade erstellt. Sie beziehen sich immer auf die darunter liegende Ebene.
Ein und Ausblenden
Sperren: sperrt alle Objekte in der betreffenden Ebene
Farbzuweisung: Weist allen Objekten einer Ebene eine eigen Farbe zu, dadurch lässt sich besser erkennen welche Objekte in die betreffende Ebene gehören
Über dieses Zeichen lassen sich verschiedene Ansichtsoptionen der Schlüsselbilder einstellen.
Pfeilwerkzeug: Mit diesem Werkzeug werden Objekte ausgewählt und können anschließend bearbeitet bzw. verschoben werden. Man hat damit Zugriff auf die verschiedenen Fenster wie Transformieren und Info.
Unterauswahl: Mit dem Unterauswahlwerkzeug werden Ankerpunkte die zuvor mit dem Stiftwerkzug erzeugt wurden sind verschoben.
Linienwerkzeug: In dem Fenster Eigenschaften kann man die verschiedenen Optionen für die zu zeichnenden Linien einstellen. Farbe, Stärke und Art lassen sich so variieren.
Lassowerkzeug: Mit dem Lasso ist es möglich Bereiche einzugrenzen und dies dann zu löschen oder zu verschieben.
Stiftwerkzeug: Wie Ihr sicherlich schon festgestellt habt lassen sich Linien mit dem Linienwerkzeug nicht krümmen. Um dies zu ermöglichen gibt es das Stiftwerkzeug, es hat natürlich die gleichen Optionen im Fenster Eigenschaften wie die Linien. Es werden zwei Punkte ausgewählt die dann direkt verbunden werden. Mit dem Pfeilwerkzeug kann nun ein beliebiger Punkt auf dieser Linie ausgewählt werden an dem sich der Wendepunkt (Übergang von einer Kurve in die nächste) befindet. Durch ziehen mit gedrückter rechter Maustaste kann die Krümmung bestimmt werden.
Flash unterscheidet drei Arten von Text:
Ellipsenwerkzeug: Die unterschiedlichsten Ellipsen bzw. Kreise lassen ich mit diesem Werkzeug zeichnen.
Rechteckwerkzeug: In der Werkzeugleiste gibt es ein Feld das sich Optionen nennt, wenn man dieses Symbol 
auswählt kann man Rechtecke mit abgerundeten Ecken zeichnen.
Freihandwerkzeug: Wie der Name schon sagt kann man mit diesem Hilfsmittel lassen sich alle Variationen von Polygonen (unförmige Gebilde) erstellen. Die Linienform kann vom Programm in drei unterschiedlichen Einstellungen beeinflusst werden. Begradigen Erzeugt winkelförmige Objekte, Glätten verändert die Linien mehr in Kurven und Tinte zeichnet ohne Beeinflussung des Programms.
Pinselwerkzeug: Mit dem Pinselwerkzeug kann man verschiedene Pinselspitzen und Größen laden. Im Gegensatz zum Freihandwerkzug, ist dieses Zeichenmittel für die Bearbeitung einzelner Pixel gedacht und nicht für Linien.
Frei transformieren: Alle Objekte, die vorher mit dem Pfeilwerkzeug ausgewählt wurden, lassen sich Frei transformieren. Man kann also mit diesem Werkzeug Objekte verkleinern, vergrößern, drehen und neigen. Besonders bei importierten Bildern lernt man diese Möglichkeit zu schätzen.
Füllungstransformation: Mit dem Füllungstransformationswerkzeug können Farbverläufe bearbeitet werden, indem das Werkzeug ausgewählt wird. Sobald man nun mit der Maus über einen Farbverlauf kommt, werden die Optionen angezeigt. Der Verlauf lässt sich nun transformieren, drehen und verschieben.
Tintenfasswerkzeug: Wenn z. B. ein Viereck gezeichnet wird, besteht es aus einer Randfarbe und einer Füllfarbe. Mit dem Tintenfasswerkzeug lassen sich die Linien des Randes nachfärben.
Farbeimerwerkzeug: Um komplette Farbfüllungen zu verändern nutzt man das Farbeimerwerkzeug
Pipette: Mit der Pipette lassen sich Farbtöne aufnehmen, dies wird benötigt wenn eine einheitliche Farbgebung erwünscht wird. Am einfachsten wird dieses Werkzeug mit Farben Fenster in der Werkzeugleiste verwendet, z. B. wenn eine Füllfarbe übernommen werden soll. Einfach mit der Maus auf die gewünschte Farbe wechseln, der Mauszeiger verwandelt sich außerhalb des vordefinierten Farbfeldes automatisch zur Pipette. Durch einfaches anklicken wird die Farbinformation übernommen.
Radiergummiwerkzeug: Zum Radiergummi lässt sich nicht besonders viel sagen, es lassen sich verschiedene Spitzen laden und schon kann man die “Fehler” wieder korrigieren. Eine sehr nette Option ist der Wasserhahn, mit ihm kann man ganze Füllflächen entfernen.
Es gibt zwei Möglichkeiten einen Transformationseffekt zu erstellen. Als erstes muss wieder in der Ebene ein Schlüsselbild ausgewählt werden in dem ein Text gezeichnet wird. Danach wird ein Bewegungstween erstellt und ca. 10 Bilder weiter wieder ein Schlüsselbild eingefügt. Diese Prozedur kennen wir schon aus der vorhergehenden Animation, sie wird uns auch noch häufiger begleiten. Bis jetzt passiert noch nix. Das wird geändert in dem man mit dem Pfeilwerkzeug das letzte Schlüsselbild auswählt. Nun kommt das Feld Transformation zu Einsatz. Mit dem Kästchen Proportionen wird festgelegt ob die Transformation gleichmäßig oder ungleichmäßig verläuft. Anschließend kann man die Werte Für Höhe und Breite in die Eingabefelder eintragen und mit Enter bestätigen. Eine andere Möglichkeit ist in dem Fenster Info die Höhe und Breite des Objektes explizit einzugeben.
Die Abgebildeten Einstellungen müssen direkt übernommen werden, lediglich die Prozentangabe wird auf Null gesetzt. Der Effekt nennt sich Alphatween.
Eines der wichtigsten Arbeitsmittel für Grafiken, natürlich auch für alle anderen extern geladenen Daten, ist die Bibliothek. Sie wird geöffnet über Fenster/ Bibliothek. Alle Dateien die in den Aktuellen Film importiert worden sind erscheinen hier. Auch sämtliche Tweens werden in der Bibliothek abgelegt. Um den Überblick zu wahren, sollte auf eine Archivierung mit Ordnern zurückgegriffen werden. Mit einem Doppelkick auf das Ordnersymbol werden die darin enthaltenen Dateien angezeigt. Wählt man nun z.B. eine Schaltfläche aus kann sie per Drag and Drop (herrüberziehen und fallen lassen) auf der Bühne platziert werden. Mit der gleichen Methode werden auch die einzelnen Elemente in die Ordner gepackt. Im untersten Rand der Bibliothek findet man einige Optionen: mit dem Plus Symbol werden neue Grafiken erstellt, mit dem Ordner Symbol erstellt man neue Ordner und markierte Objekte löscht man mit dem Papierkorb Symbol.
Um einen Film interaktiv zu gestalten werden Schaltflächen benötigt. Sobald das Layout feststeht und man sich auch im Klaren über die Funktion (z.B. Ein und Ausschalten von Musik) des Buttons ist, kann mit der Erstellung begonnen werden. Zunächst möchte ich darauf hinweisen, dass es nicht wie in HTML üblich eine Bilddatei mit einem Funktionslink verknüpft wird. Schaltflächen müssen explizit (eindeutig) generiert werden. Dies erreicht man auf recht simple Weise über das Menüfeld: Einfügen / Neues Symbol. Anschließend öffnet sich ein Fenster in dem man die Option Schaltfläche auswählt und bestätigt.
In dem neuen Fenster sind vier leere Einzelbilder in der Zeitleiste zu sehen. Auf, Darüber und Aktiv sind die einzelnen Zustände und beziehen sich auf das Verhalten der Schaltfläche und der Maus. Das Aussehen der einzelnen Teilbilder wird vom eigenen Geschmack bestimmt. Das Zeichnen selbst erfolgt wie in einem normalem Einzelbild, als Orientierungshilfe befindet sich auf der Arbeitsfläche ein Kreuz. In dem man Szene mit der Maus auswählt gelangt man anschließend zurück zum Film. Die erstellte Schaltfläche befindet sich nun in der Bibliothek und kann per Drag and Drop auf der Bühne positioniert werden. Weitere Hinweise zur Bibliothek stehen im Kapitel 4.1 Grafik. Nachdem die Buttons im Film integriert worden sind müssen sie noch mit Aktionen versehen werden. Dazu wird mit dem Pfeilwerkzeug die Schaltfläche ausgewählt und im Fenster Aktionen wird ihr die entsprechende Eigenschaft zugewiesen. Das Zuweisen von Eigenschaften ist im Kapitel Actionscript genauer erläutert, da die einzelnen Möglichkeiten recht umfangreich sind.