Network spy protection with AdGuard Home on a Raspberry Pi and Docker

Maybe you have bought you like me an Raspberry Pi4 with 4GB RAM and think about what nice things you could do with it. Since the beginning I got the idea to use it as an lightweight home server. Of course you can easily use a mini computer with more power and obviously more energy consumption too. Not a nice idea for a device is running 24/7. As long you don’t plan to mine your own bitcoins or host a high frequented shop system, a PI device should be sufficient.

I was wanted to increase the network security for my network. For this reason I found the application AdGuard which blocks many spy software from internet services you use on every device is connected to the network where AdGuard is running. Sounds great and is not so difficult to do. Let me share with you my experience.

As first let’s have a look to the overall system and perquisites. After the Router from my Internet Service Provider I connected direct by wire my own Network router an Archer C50. On my Rapsbery PI4 with 4GB RAM run as operation system Ubuntu Linux Server x64 (ARM Architecture). The memory card is a 64 GB ScanDisk Ultra. In the case you need a lot of storage you can connect an external SSD or HDD with an USB 3 – SATA adapter. Be aware that you use a storage is made for permanent usage. Western Digital for example have an label called NAS, which is made for this purpose. If you use standard desktop versions they could get broken quite soon. The PI is connected with the router direct by LAN cable.

The first step you need to do is to install on the Ubuntu the Docker service. this is a simple command: apt-get install docker. if you want to get rid of the sudo you need to add the user to the docker group and restart the docker service. If you want to get a bit more familiar with Docker you can check my video Docker basics in less than 10 minutes.

sudo apt-get install docker
sudo gpasswd -a <user> docker
sudo dockerd

After this is done you need to create a network where the AdGuard container is reachable from your router to a static IP address on your PI.

docker network create -d macvlan -o parent=eth0 \
--subnet= \
--ip-range= \
--gateway= \

Before you just copy and past the listing above, you need to change the IP addresses to the ones your network is using. for all the installation, this is the most difficult part. As first the network type we create is macvlan bounded to the network card eth0. eth0 is for the PI4 standard. The name of the network we gonna to create is lan. To get the correct values for subnet, ip-range and gateway you need to connect to your router administration.

To understand the settings, we need a bit of theory. But don’t worry is not much and not that complicated. Mostly your router is reachable by an IP address similar to – this is a static address and something equal we want to have for AdGuard on the PI. The PI itself is in my case reachable by, but this IP we can not use for AdGuard. The plan is to make the AdGuard web interface accessible by the IP OK let’s do it. First we have to switch on our router administration to the point DHCP settings. In the Screenshot you can see my configuration. After you changed your adaptions don’t forget to reboot the router to take affect of the changes.

I configured the dynamic IP range between to This means the first 4 numbers before can be used to connect devices with a static IP. Here we see also the entry for our default gateway. Whit this information we are able to return to our network configuration. the subnet IP is like the gateway just the digits in the last IP segment have to change to a zero. The IP range we had limited to the because is one number less than where we configured where the dynamic IP range started. That’s all we need to know to create our network in Docker on the PI.

Now we need to create in the home directory of our PI the places were AdGuard can store the configuration and the data. This you can do with a simple command in the ssh shell.

mkdir /home/ubuntu/adguard/work
mkdir /home/ubuntu/adguard/conf

As next we have to pull the official AdGuard container from the Docker Hub and create a image. This we do by just one command.

docker run -d --name adguard --restart=always \
-p 3000:3000/tcp --net lan --ip \
-p 53/tcp -p 53/udp -p 67/udp -p 68/udp -p 80/tcp \
-p 784/udp -p 8853/udp \
-p 443/tcp -p 443/udp \
-p 853/tcp -p 853/udp \
-p 5443/tcp -p 5443/udp \
-v /home/ubuntu/adguard/work:/opt/adguardhome/work \
-v /home/ubuntu/adguard/conf:/opt/adguardhome/conf \

The container we create is called adguard and we connect this image to our own created network lan with the IP address Then we have to open a lot of ports AdGuard need to do the job. And finally we connect the two volumes for the configuration and data directory inside of the container. As restart policy we set the container to always, this secure that the service is up again after the server or docker was rebooted.

After the execution of the docker run command you can reach the AdGuard configuration page with your browser under: Here you can create the primary setup to create a login user and so on. After the first setup you can reach the web interface by

The IP address you need now to past into the field DNS Server for the DHCP settings. Save the entries and restart your router to get all changes working. When the router is up open on your browser any web page from the internet to see that everything is working fine. After this you can login into the AdGuard web console to see if there appearing data on the dashboard. If this is happened then you are don e and your home or office network is protected.

If you think this article was helpful and you like it, you can support my work by sharing this post or leave a like. If you have some suggestions feel free to drop a comment.

Amazon affiliate links of my environment:

Installing NextCloud with Docker on a Linux Server

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.


  • Docker Basics
  • Installing Docker on a Ubuntu server
  • prepare your database
  • putting all together and make it run
  • insights to operate NextCloud

Docker Container Instructions

# create network
docker network create -d bridge --subnet= service

# postures database server
docker run -d --name postgres --restart=always \
--net service --ip \
-e PGPASSWORD=s3cr3t \
-v /home/ed/postgres/data:/var/lib/postgresql/data \

# copy files from container to host system
docker cp postgres:/var/lib/postgresql/data /home/ed/postgres

# pgAdmin administration tool
docker run -d --name pgadmin --restart=no \
-p 8004:80 --net services --ip \
-e \

# nextcloud container
docker run -d --name nextcloud --restart=always \
-p 8080:80 --net services --ip \
-v /home/ed/_TEMP_/nextcloud:/var/www/html \
-e POSTGRES_DB=nextcloud \
-e POSTGRES_USER=nextcloud \
-e POSTGRES_PASSWORD=nextcloud \


[1] Tutorial: Learn to walk with Docker and PostgreSQL
[2] Ubuntu Server:
[3] Docker :
[4] PostgreSQL
[5] pgAdmin
[6] 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.

Amazon affiliate links of my environment:

Learn to walk with Docker and PostgreSQL

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.

Step 0: create a local bridged network

docker network create -d bridge --subnet= services

The name of the network is services an bind to the IP address range to You can proof the success yourself by typing:

docker network ls

An output like the one below should appear:

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

docker run -d --name pg-dbms --restart=no \
--net services --ip \
-e PGPASSWORD=s3cr3t \

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

docker cp pg-dbms:/var/lib/postgresql/data /home/ed/postgres

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

docker run -d --name pg-dbms --restart=no \
--net services --ip \
-e PGPASSWORD=s3cr3t \
-v /media/ed/memory/pg:/var/lib/postgresql/data \

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.

The official PostgreSQL Docker Image in DockerHub:

Docker Basics in less than 10 minutes

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.

Get Flash(ed)

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

Grundlagen und Einstellungen

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

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.


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.


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.


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.

[swf src="" width=300 height=60]

Alternativ lassen sich die Animationen auch über HTML Code einbetten, die allerdings im gehosteten WordPress zu einem Link konvertiert werden.


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.


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.


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.


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.


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


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.


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 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 bezogen werden kann.

Der HTML Quelltext:


Das Wort was ihr bei Title schreibt erscheint später in der Explorerleiste des Browsers.

<frameset border=0 frameborder=0 framespacing=0 cols="30%,70%">
    <frame src="links.swf" name="links">
    <frame src="rechts.swf" name="rechts">

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.


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 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();
function neuesDatum() {
(datum = new Date()).getMonth() + 1 < 10 ? akt_datum[0] = "0" + (datum.getMonth()+1) : akt_datum[0] = datum.getMonth()+1;
datum.getDate() < 10 ? akt_datum[1] = "0" + datum.getDate() : akt_datum[1] = datum.getDate();
datum.getHours() < 10 ? akt_datum[2] = "0" + datum.getHours() : akt_datum[2] = datum.getHours();    // hier beginnt die Uhrzeit
datum.getMinutes() < 10 ? akt_datum[3] = "0" + datum.getMinutes() : akt_datum[3] = datum.getMinutes();
datum.getSeconds() < 10 ? akt_datum[4] = "0" + datum.getSeconds() : akt_datum[4] = datum.getSeconds();
meinDatum.text = wochentage[datum.getDay()] + ", den " + akt_datum[1] + "." + akt_datum[0] + "." + datum.getFullYear();
meineZeit.text = akt_datum[2] + " : " + akt_datum[3] + " : " + akt_datum[4];

setInterval(neuesDatum, 1000);