Implementieren einer Karte mithilfe der Google Map-API für Flash

Zweimal im Monat besuchen wir einige der Lieblingsbeiträge unserer Leser aus der gesamten Geschichte von Activetuts+. Dieses Tutorial wurde erstmals im Mai 2009 veröffentlicht.

In diesem Tutorial erfahren Sie, wie Sie mithilfe der Google Map-API eine Karte in Flash erstellen können. Wir werden einige der Grundlagen behandeln, wie das Vergrößern der Karte und das Hinzufügen einiger Steuerelemente. Wir werden uns auch ansehen, wie wir unserer Karte Markierungen hinzufügen und wie wir Daten mithilfe einer XML-Datei laden können.

Schritt 1: Der Google Map API-Schlüssel

Bevor wir mit dem Erstellen unserer Karte in Flash beginnen können, müssen wir einige Dinge einrichten. Um die Google Map-API verwenden zu können, benötigen Sie einen persönlichen API-Schlüssel. Um dies zu erhalten, gehen Sie zu http://code.google.com/intl/nl/apis/maps/documentation/flash/ und klicken Sie auf den Link auf der rechten Seite der Seite "Für einen Google Maps-API-Schlüssel anmelden".

Schritt 2: Anmelden

Durch Klicken auf den Link "Für einen Google Maps-API-Schlüssel anmelden" gelangen Sie zur nächsten Seite, auf der wir unseren persönlichen API-Schlüssel generieren können. Scrollen Sie auf der Seite nach unten, stimmen Sie den Nutzungsbedingungen zu (Sie können diese auch lesen, wenn Sie wirklich interessiert sind) und fügen Sie die URL der Website hinzu, auf der Sie die Anwendung verwenden möchten (Sie benötigen für jede Domain einen anderen API-Schlüssel Sie möchten eine Karte platzieren). Klicken Sie danach auf "API-Schlüssel generieren".

Schritt 3: Speichern Sie es!

Jetzt sehen Sie Ihren persönlichen API-Schlüssel für die ausgewählte Domain. Kopieren Sie den API-Schlüssel und fügen Sie ihn ein oder speichern Sie ihn irgendwo, da wir ihn sehr bald benötigen.

Schritt 4: Die Google Map SWC-Komponente

Ok, jetzt haben wir unseren API-Schlüssel, aber wir brauchen noch eine Sache, bevor wir mit der Erstellung unserer Karte in Flash beginnen können. Wir müssen die Google Map SWC-Komponente herunterladen. Gehen Sie dazu zu http://code.google.com/intl/nl/apis/maps/documentation/flash/ und klicken Sie auf "Google Maps API für Flash SDK herunterladen". Ein Popup-Fenster wird angezeigt. Wählen Sie, ob Sie die Datei "sdk.zip" speichern und herunterladen möchten.

Schritt 5: Installieren Sie die SDK-Komponente

Jetzt müssen wir die SDK-Komponente installieren, um sie in Flash verwenden zu können. Navigieren Sie dazu zu dem Speicherort, an dem Sie die Google Maps-API für Flash SDK gespeichert haben, und suchen Sie die Nicht-Flex-Version der Schnittstellenbibliothek. In meinem Fall ist dies (lib/map_1_9.swc). Kopieren Sie nun die Datei "map_1_9.swc".

Schritt 6: Ordner

Wenn Sie Flash gerade geöffnet haben, beenden Sie die Anwendung und suchen Sie nach diesem Ordner:

• (Windows) C:\Program Files\Adobe\Adobe Flash CS3 (oder Ihre Flash-Version)\en (oder Ihre Sprache)\Configuration\Components
• (Mac OS X) Macintosh HD/Applications/Adobe Flash CS3 (oder Ihre Flash-Version)/Configuration/Components

Erstellen Sie in diesem Ordner einen neuen Ordner mit dem Namen "google" und fügen Sie die Datei "map_1_9.swc" ein. Flash ist jetzt so eingerichtet, dass es die Google Maps-API für Flash unterstützt.

Schritt 7: Neue ActionScript 3.0-Datei

OK. Das ist alles erledigt und abgestaubt! Jetzt können wir endlich anfangen, unsere Karte in Flash zu erstellen. Starten Sie Flash CS3 oder CS4 und erstellen Sie eine neue ActionScript 3.0-Datei mit der Standard-Bühnengröße (550 x 400).

Schritt 8: Speichern Sie es!

Speichern Sie nun einfach die Datei. Drücken Sie "Strg + S" oder gehen Sie im Menü zu Datei > Speichern. Speichern Sie es an dem gewünschten Ort und benennen Sie es wie Sie möchten. Ich werde es "google_map" nennen.

Schritt 9: Die GoogleMapsLibrary

Öffnen Sie das Komponentenbedienfeld "Strg + F7" oder klicken Sie im Menü auf Fenster > Komponenten und ziehen Sie die GoogleMapsLibrary auf die Bühne.

Schritt 10: Die Aktionsebene

Erstellen Sie eine neue Ebene, doppelklicken Sie auf ihren Namen und benennen Sie sie in "actions" um.

Schritt 11: Importieren..

Öffnen Sie nun bei ausgewählter Aktionsebene das Aktionsfenster, indem Sie auf "F9" klicken oder auf Fenster > Aktionen klicken. Fügen Sie diese Codezeilen hinzu:

1

import com.google.maps.LatLng;

2

import com.google.maps.Map;

3

import com.google.maps.MapEvent;

4

import com.google.maps.MapType;

Schritt 12: Erstellen Sie die Karte

Fügen wir nun die Karte hinzu! Wenn wir den Film laden, erstellt dieser Code eine Karte und stellt sie auf die Bühne. Im Code sehen wir die Variable "map.key"; Hier müssen wir unseren persönlichen API-Schlüssel hinzufügen. Öffnen Sie die Datei, in der Sie den API-Schlüssel gespeichert haben, und kopieren Sie ihn in die Variable.

1

// Create The Map

2

var map:Map = new Map();

3

map.key = "Your API Key here";

4

map.setSize(new Point(stage.stageWidth, stage.stageHeight));

5

this.addChild(map);

Schritt 13: Film testen

Ok, jetzt testen Sie Ihren Film "Strg + Eingabetaste" oder klicken Sie im Menü auf Steuerung > Film testen. Sie werden sehen, dass Sie gerade eine Karte erstellt haben.

Schritt 14: Kontrollen

Zu diesem Zeitpunkt können wir die Karte nur verschieben. Das ist nicht wirklich das, wonach wir suchen. Fügen wir also der Karte einige Steuerelemente hinzu, mit denen wir zoomen und uns bewegen können. Um unserer Karte Steuerelemente hinzuzufügen, müssen wir unseren Code aktualisieren. Zuerst müssen wir ein paar zusätzliche Klassen aufrufen:

1

import com.google.maps.controls.ZoomControl;

2

import com.google.maps.controls.PositionControl;

3

import com.google.maps.controls.MapTypeControl;

Danach müssen wir eine neue Funktion erstellen, die aufgerufen wird, sobald die Karte erstellt wurde. Wir nennen diese Funktion "onMapReady()". Innerhalb dieser Funktion fügen wir unsere Steuerelemente zur Karte hinzu.

1

function onMapReady(event:MapEvent):void {

2

  map.addControl(new ZoomControl());

3

  map.addControl(new PositionControl());

4

  map.addControl(new MapTypeControl());

5

}

Jetzt müssen wir nur noch die Funktion "onMapReady()" aufrufen, wenn unsere Karte geladen wird. Dazu müssen wir unserem ersten Code eine zusätzliche Zeile hinzufügen.

1

map.addEventListener(MapEvent.MAP_READY, onMapReady);

Unser vollständiger Code sieht jetzt so aus:

1

import com.google.maps.LatLng;

2

import com.google.maps.Map;

3

import com.google.maps.MapEvent;

4

import com.google.maps.MapType;

5

import com.google.maps.controls.ZoomControl;

6

import com.google.maps.controls.PositionControl;

7

import com.google.maps.controls.MapTypeControl;

8

9

// Create The Map

10

var map:Map = new Map();

11

map.key = "Your API Key Here";

12

map.setSize(new Point(stage.stageWidth, stage.stageHeight));

13

map.addEventListener(MapEvent.MAP_READY, onMapReady);

14

this.addChild(map);

15

16

function onMapReady(event:MapEvent):void {

17

  map.addControl(new ZoomControl());

18

  map.addControl(new PositionControl());

19

  map.addControl(new MapTypeControl());

20

}

Schritt 15: Mehr..

Testen Sie nun Ihren Film "Strg + Eingabetaste" oder klicken Sie im Menü auf Steuerung > Film testen. Sie sehen, dass unsere Karte jetzt Steuerelemente enthält. Wir können unsere Karte vergrößern und sogar in Satelliten-, Hybrid- und Geländeansicht ändern. Das ist sehr cool, aber wir wollen mehr.

Schritt 16: Breite und Länge

Lassen Sie uns einen bestimmten Ort vergrößern, sobald unsere Karte zum ersten Mal geladen wird. Angenommen, ich bin Surfer und möchte eine Karte der Surfspots in meiner Heimatstadt erstellen. Wir möchten nicht, dass die Leute manuell zoomen und nach dem Bereich suchen müssen, also werden wir das in einer Sekunde beheben. Das einzige, was wir hinzufügen müssen, ist eine kleine Codezeile zu unserer Funktion "onMapReady()".

1

map.setCenter(new LatLng(28.74659,-13.93447), 9, MapType.HYBRID_MAP_TYPE);

Was wir hier tatsächlich tun, ist einen neuen LatLng-Punkt auf der Karte zu erstellen. Zuerst geben wir 2 Werte an: den "Breitengrad" und den "Längengrad" aus unserer Region. Dann stellen wir unseren Zoomwert ein; Ich habe mich für 9 entschieden. Der Zoom reicht von 0 bis etwa 16 (dies kann von Region zu Region variieren). Zuletzt legen wir den Kartentyp fest; Ich habe mich hier für den HYBRID_MAP_TYPE entschieden.

Unsere Funktion "onMapReady()" sieht jetzt so aus:

1

function onMapReady(event:MapEvent):void {

2

  map.setCenter(new LatLng(28.74659,-13.93447), 9, MapType.HYBRID_MAP_TYPE);

3

  map.addControl(new ZoomControl());

4

  map.addControl(new PositionControl());

5

  map.addControl(new MapTypeControl());

6

}

Wenn wir unseren Film testen, können Sie sehen, dass sich viele Dinge geändert haben. Sobald die Karte geladen ist, zoomen wir in unsere spezifische Region und unser Kartentyp ist jetzt Hybrid. Um den Breiten- und Längengrad für Ihre Region zu bestimmen, können Sie Google Earth oder ein Online-Werkzeug wie http://itouchmap.com/latlong.html verwenden.

Schritt 17: Fügen Sie einen Marker hinzu

Fügen wir nun unserer Karte einen einfachen Marker hinzu. Fügen Sie einfach 2 weitere Klassen hinzu:

1

import com.google.maps.overlays.MarkerOptions;

2

import com.google.maps.overlays.Marker;

und aktualisieren Sie die Funktion "onMapReady()" mit diesem Code:

1

var marker:Marker = new Marker(

2

							     new LatLng(28.74659, -13.93447)	     		           

3

		     		            );

4

map.addOverlay(marker);

Wieder erstellen wir einen LatLng-Punkt mit bestimmten Längen-/Breitengraden für unseren Standort. Dann rufen wir "addOverlay()" auf, um unseren Marker auf der Karte zu platzieren. Unser vollständiger Code sieht jetzt so aus:

1

import com.google.maps.LatLng;

2

import com.google.maps.Map;

3

import com.google.maps.MapEvent;

4

import com.google.maps.MapType;

5

import com.google.maps.controls.ZoomControl;

6

import com.google.maps.controls.PositionControl;

7

import com.google.maps.controls.MapTypeControl;

8

import com.google.maps.overlays.MarkerOptions;

9

import com.google.maps.overlays.Marker;

10

11

// Create The Map

12

var map:Map = new Map();

13

map.key = "ABQIAAAAUeTGkbea0ftVnzbVMwAPKxT2yXp_ZAY8_ufC3CFXhHIE1NvwkxTlsMw9FdPd5mJqEw01CzwnlVdxDw";

14

map.setSize(new Point(stage.stageWidth, stage.stageHeight));

15

map.addEventListener(MapEvent.MAP_READY, onMapReady);

16

this.addChild(map);

17

18

function onMapReady(event:MapEvent):void {

19

  map.setCenter(new LatLng(28.74659,-13.93447), 9, MapType.HYBRID_MAP_TYPE);

20

  map.addControl(new ZoomControl());

21

  map.addControl(new PositionControl());

22

  map.addControl(new MapTypeControl());

23

24

  var marker:Marker = new Marker(

25

							     new LatLng(28.74659, -13.93447)	     		           

26

		     		            );

27

  map.addOverlay(marker);

28

}

Gehen und testen Sie Ihren Film. Sie sehen unsere Markierung auf der Karte.

Schritt 18: Noch mehr..

Lassen Sie uns jetzt alles auf die nächste Stufe bringen. Wir haben eine Karte mit Zoom-Steuerelementen und einer Markierung. Was brauchen wir noch? Nun, ich werde es dir sagen. Wir brauchen MEHR MARKER, TOOLTIPS, INFO WINDOWS und wir wollen alles aus einer XML-Datei laden. Also lasst uns anfangen. Zuerst erstellen wir unsere XML-Datei. Öffnen Sie Ihren bevorzugten XML-Editor und erstellen Sie diese Datei:

1

<?xml version="1.0" encoding="utf-8"?>

2

 <map_xml>

3

4

  <location>

5

   <lat>28.74659</lat>

6

   <lon>-13.93447</lon>

7

   <name_tip>Majanicho</name_tip>

8

   <title_tip><![CDATA[Majanicho]]></title_tip>

9

   <content_tip><![CDATA[Majanicho is a very good surf spot for longboarding it offers very long rides.]]></content_tip>

10

  </location>

11

12

  <location>

13

   <lat>28.738764</lat>

14

   <lon>-13.955126</lon>

15

   <name_tip>Derecha de los Alemanes</name_tip>

16

   <title_tip><![CDATA[La Derecha de los Alemanes]]></title_tip>

17

   <content_tip><![CDATA[La Derecha de los Alemanes is another very good spot for longboarders but shortboarders will have some epic days out here to.]]></content_tip>

18

  </location>

19

20

  <location>

21

   <lat>28.741022</lat>

22

   <lon>-13.951821</lon>

23

   <name_tip>The Bubbel</name_tip>

24

   <title_tip><![CDATA[The Bubbel aka La Derecha]]></title_tip>

25

   <content_tip><![CDATA[The Bubbel is one of the most famouse waves in Fuerteventura its a really hollow reef break and it has some epic barrels on offer.]]></content_tip>

26

  </location>

27

28

 </map_xml>

Schritt 19: onMapReady()

Sobald unsere Karte geladen ist, müssen wir die XML-Daten in unsere Flash-Datei ziehen. Erstellen Sie eine neue Funktion mit dem Namen "xmlLoader()" und wir rufen diese Funktion in unserer Funktion "onMapReady()" auf. Zuerst müssen wir den Code löschen, den wir hinzugefügt haben, um unseren Marker nur wenige Schritte zuvor zu erstellen. Dann fügen wir die Zeile hinzu, um die Funktion "xmlLoader()" aufzurufen. Unsere Funktion "onMapReady()" sollte nun folgendermaßen aussehen:

1

function onMapReady(event:MapEvent):void {

2

  map.setCenter(new LatLng(28.74659,-13.93447), 9, MapType.HYBRID_MAP_TYPE);

3

  map.addControl(new ZoomControl());

4

  map.addControl(new PositionControl());

5

  map.addControl(new MapTypeControl());

6

  xmlLoader();

7

}

Als nächstes wollen wir die Funktion "xmlLoader()" erstellen.

1

function xmlLoader(){

2

3

}

Im nächsten Schritt werden wir es füllen.

Schritt 20: Laden Sie XML

Ok hier sind wir. Laden wir unsere XML-Daten. Innerhalb der Funktion "xmlLoader()" fügen wir diesen Code hinzu:

1

 function loadXML(e:Event):void{

2

	 XML.ignoreWhitespace = true; 

3

	 var map_xml:XML = new XML(e.target.data);

4

 }// end of loadXML function

5

6

 var xmlLoader:URLLoader = new URLLoader();

7

 xmlLoader.addEventListener(Event.COMPLETE, loadXML);

8

 xmlLoader.load(new URLRequest("xml.xml"));

Dadurch erhalten wir unsere XML-Daten, mit denen wir arbeiten können.

Schritt 21: Durchlaufen Sie die Standorte

Da unsere XML-Datei drei Speicherorte enthält, müssen wir eine "For" -Schleife erstellen und alle Daten in einigen Arrays speichern. In unserer Funktion "loadXML()" fügen wir diesen Code hinzu, um die For-Schleife zu erstellen:

1

for (var i:Number = 0; i < map_xml.location.length(); i++){

2

		 trace(map_xml.location[i].title_tip);

3

4

	 }// end of for loop

Um zu testen, ob die Dinge für uns funktionieren, verfolgen wir die Variable "title_tip". Testen Sie Ihren Film und Sie sollten die folgende Ausgabe erhalten:

Schritt 22: Variablen

Als nächstes müssen wir einige Variablen erstellen, um unsere aus der XML-Datei geladenen Daten zu speichern. In unserer For-Schleife fügen wir folgende Variablen hinzu:

1

var latlng:LatLng = new LatLng(map_xml.location[i].lat, map_xml.location[i].lon);

2

var tip = map_xml.location[i].name_tip;

3

var myTitle:String = map_xml.location[i].title_tip;

4

var myContent:String = map_xml.location[i].content_tip;

Wenn Sie möchten, können Sie die zuvor verwendete Zeile "trace()" löschen. Unsere For-Schleife sieht jetzt so aus:

1

for (var i:Number = 0; i < map_xml.location.length(); i++){

2

3

		 var latlng:LatLng = new LatLng(map_xml.location[i].lat, map_xml.location[i].lon);

4

		 var tip = map_xml.location[i].name_tip;

5

		 var myTitle:String = map_xml.location[i].title_tip;

6

		 var myContent:String = map_xml.location[i].content_tip;		 		

7

	 }// end of for loop

Schritt 23: Zusätzliche Marker..

OK! Wir müssen der Karte für jeden unserer drei Standorte einen Marker hinzufügen. Nachdem wir alle Daten in unseren Variablen gespeichert haben, müssen wir eine neue Funktion mit dem Namen "createMarker()" erstellen. In unserer Funktion "loadXML()" fügen wir diese neue Funktion hinzu:

1

// Add Markers On The Map

2

function createMarker(latlng:LatLng, number:Number, tip, myTitle, myContent):Marker {

3

               var i:Marker = new Marker(

4

										 latlng,

5

										 new MarkerOptions({ 

6

                                                           hasShadow: true,

7

				                                           tooltip: ""+tip  

8

                                                           })

9

										 );

10

               return i;

11

}// end function createMarker

Wir müssen diese Funktion "createMarker()" noch aufrufen, um unsere Markierungen auf der Karte zu sehen. Dazu müssen wir am Ende unserer For-Schleife eine zusätzliche Codezeile hinzufügen:

1

map.addOverlay(createMarker(latlng,i, tip, myTitle, myContent));

So sollte unsere Funktion "loadXML()" jetzt aussehen:

1

function loadXML(e:Event):void{

2

	 XML.ignoreWhitespace = true; 

3

	 var map_xml:XML = new XML(e.target.data);

4

5

	 for (var i:Number = 0; i < map_xml.location.length(); i++){

6

7

		 var latlng:LatLng = new LatLng(map_xml.location[i].lat, map_xml.location[i].lon);

8

		 var tip = map_xml.location[i].name_tip;

9

		 var myTitle:String = map_xml.location[i].title_tip;

10

		 var myContent:String = map_xml.location[i].content_tip;

11

12

		 map.addOverlay(createMarker(latlng,i, tip, myTitle, myContent));

13

	 }// end of for loop

14

15

	 // Add Markers On The Map

16

	 function createMarker(latlng:LatLng, number:Number, tip, myTitle, myContent):Marker {

17

               var i:Marker = new Marker(

18

										 latlng,

19

										 new MarkerOptions({ 

20

                                                           hasShadow: true,

21

				                                           tooltip: ""+tip  

22

                                                           })

23

										 );

24

               return i;

25

      }// end function createMarker

26

 }// end of loadXML function

Testen Sie Ihren Film und Sie sehen die Markierungen auf der Karte! Beachten Sie, dass unsere 3 Punkte sehr nahe beieinander liegen. Sie können also etwas zoomen, um sie klarer zu sehen.

Schritt 24: Info Windows

Schließlich müssen wir einige Info-Fenster hinzufügen. Wenn wir auf die Markierungen klicken, erhalten wir einige Informationen über ihre Positionen. Dazu müssen wir 2 weitere Klassen hinzufügen:

1

import com.google.maps.InfoWindowOptions;

2

import com.google.maps.MapMouseEvent;

..ein bisschen mehr Code für unsere Funktion "createMarker()"..

1

i.addEventListener(MapMouseEvent.CLICK, function(event:MapMouseEvent):void 

2

        {

3

         map.openInfoWindow(event.latLng, new InfoWindowOptions({

4

                                      titleHTML: ""+myTitle, 

5

                                      contentHTML: ""+myContent

6

                                                               }));

7

8

		});

Testen Sie nun Ihren Film und Sie werden sehen, dass unsere Markierungen jetzt anklickbar sind und ein Infofenster mit Text aus der XML-Datei erstellen.

Abschluss

Das ist es! Schauen Sie sich unseren endgültigen Code an:

1

import com.google.maps.LatLng;

2

import com.google.maps.Map;

3

import com.google.maps.MapEvent;

4

import com.google.maps.MapType;

5

import com.google.maps.controls.ZoomControl;

6

import com.google.maps.controls.PositionControl;

7

import com.google.maps.controls.MapTypeControl;

8

import com.google.maps.overlays.MarkerOptions;

9

import com.google.maps.overlays.Marker;

10

import com.google.maps.InfoWindowOptions;

11

import com.google.maps.MapMouseEvent;

12

13

// Create The Map

14

var map:Map = new Map();

15

map.key = "Your API Key Here";

16

map.setSize(new Point(stage.stageWidth, stage.stageHeight));

17

map.addEventListener(MapEvent.MAP_READY, onMapReady);

18

this.addChild(map);

19

20

function onMapReady(event:MapEvent):void {

21

  map.setCenter(new LatLng(28.74659,-13.93447), 9, MapType.HYBRID_MAP_TYPE);

22

  map.addControl(new ZoomControl());

23

  map.addControl(new PositionControl());

24

  map.addControl(new MapTypeControl());

25

  xmlLoader();

26

}

27

28

function xmlLoader(){

29

 function loadXML(e:Event):void{

30

	 XML.ignoreWhitespace = true; 

31

	 var map_xml:XML = new XML(e.target.data);

32

33

	 for (var i:Number = 0; i < map_xml.location.length(); i++){

34

35

		 var latlng:LatLng = new LatLng(map_xml.location[i].lat, map_xml.location[i].lon);

36

		 var tip = map_xml.location[i].name_tip;

37

		 var myTitle:String = map_xml.location[i].title_tip;

38

		 var myContent:String = map_xml.location[i].content_tip;

39

40

		 map.addOverlay(createMarker(latlng,i, tip, myTitle, myContent));

41

	 }// end of for loop

42

43

	 // Add Markers On The Map

44

	 function createMarker(latlng:LatLng, number:Number, tip, myTitle, myContent):Marker {

45

               var i:Marker = new Marker(

46

										 latlng,

47

										 new MarkerOptions({ 

48

                                                           hasShadow: true,

49

				                                           tooltip: ""+tip  

50

                                                           })

51

										 );

52

			   i.addEventListener(MapMouseEvent.CLICK, function(event:MapMouseEvent):void 

53

																			  {

54

																			  map.openInfoWindow(event.latLng, new InfoWindowOptions({

55

																																	 titleHTML: ""+myTitle, 

56

																																	 contentHTML: ""+myContent

57

																																	 }));

58

59

																			  });

60

               return i;

61

      }// end function createMarker

62

 }// end of loadXML function

63

64

 var xmlLoader:URLLoader = new URLLoader();

65

 xmlLoader.addEventListener(Event.COMPLETE, loadXML);

66

 xmlLoader.load(new URLRequest("xml.xml"));

67

}

Testen Sie Ihren Film mit Strg + Eingabetaste, um das Ergebnis zu überprüfen. Sie haben Ihre eigene XML-basierte Flash-Karte! Sie können es auf Ihrer Website verwenden, die Speicherorte nach Ihren Wünschen bearbeiten, es liegt an Ihnen. Experimentieren Sie, wenn Sie coole Ergebnisse haben, teilen Sie sie uns unbedingt mit.

Ich hoffe Ihr hat dieses Tutorial gefallen, danke fürs Lesen!