Anzeige
Tutorialbeschreibung

Flash-Spiel erstellen

Flash-Spiel erstellen

Ich erkläre euch, wie man einfach ein kleines Spiel mit Flash MX erstellen kann. Man muss Gegenstände verschieben und irgendwo ist eine Katze versteckt!!


Hallo,

Ich erkläre euch, wie man einfach ein kleines Spiel mit Flash MX erstellen kann. Man muss Gegenstände verschieben und irgendwo ist eine Katze versteckt!!

So soll es dann aussehen, wenn es fertig ist:

Bilder

Als Erstes wird die Hintergrundfarbe und die Leinwandgröße festgelegt.

Für die Leinwandgröße klickst du am unteren Bildrand auf >EIGENSCHAFTEN< (wenn es nicht schon geöffnet ist). Dann klickst du neben „Größe“ auf den Button.

Dann gibst du einfach die gewünschte Größe ein. Ich hab mich für 550 x 400 entschieden.

Um den Hintergrund zu ändern klickst du neben „Hintergrund“ bei dem kleinen Fenster auf den Pfeil; es öffnet sich eine Farbpalette. Ich habe die Farbe #CC6600 genommen, ein schönes braun für den Fußboden also.

Bilder

Gut, jetzt kommen wir zu den Gegenständen im Zimmer, die man nicht verschieben kann: Das Bett oder den Schrank.

Für das Bett ziehen wir ein Rechteck. Danach machen wir einen Doppelklick in das Rechteck, so dass der Rahmen des Rechtecks (bei mir Schwarz) und Inhalt des Rechtecks (bei mir Dunkelbraun) markiert wird. Nun drückst du Strg + G (Gruppieren).

Bilder

Das Gleiche machst du noch mit einem Regal oder irgendeinem anderen Möbelstück.

Bilder
Jetzt kommen wir zum Bettzeug. Polster und Decke soll man verschieben können. Zuerst machen wir uns eine neue Ebene (bei der Zeitleiste).

Diese benennen wir um in „Objekte“. Dazu klickst du doppelt auf den Namen der neuen Ebene (Ebene 2) und gibst dann den Namen ein!

Bilder
Nun zeichnen wir ein Polster:

Klick auf den Bleistift Tool (Freihandwerkzeug) und stelle bei „Optionen“ (unter Farben) von „Begradigen“ (

Bilder
) auf „Glätten“ (
Bilder
) um!!

Jetzt ziehst du die Umrisse des Polsters nach! Beachte aber, dass du immer noch in der Ebene „Objekte“ bist!

Jetzt klickst du auf den „Farbeimer“ und stellst die Farbe ein, die das Polster haben soll (Farben > der kleine Farbeimer). Jetzt klickst du in den Umriss des Polsters. Er sollte jetzt diese Farbe bekommen! Wenn das nicht der Fall ist, dann prüf genau nach ob der Umriss genau verschlossen ist! Sollte es dann immer noch nicht gehen, verschiebe den Umriss einfach ein wenig, das hilft oft!!

Dann markierst du wieder Füllung und Umriss (Doppelklick in den Polster!) und drückst F8. Es öffnet sich ein Fenster namens „In Symbol konvertieren“. Da klickt man jetzt einen Punkt in „Grafik“ und anschließend OK.

Dann drückst du noch einmal F8, machst aber diesmal einen Punkt in „Schaltfläche“ und wieder OK.

Jetzt klickst du am unteren Rande des Bildschirms „Eigenschaften“ und gibst einen Namen beim Feld <Instanzname> ein. Nennen wir es „Polster“!!

Nun machst du einen Klick in das Polster und klickst auf „Aktion – Schaltfläche“ unter „Eigenschaften“!!

Da kopierst du jetzt folgendes rein:

on (press) {

            startDrag(Polster);

}

on (release) {

            stopDrag();
}

 

Erklärung: „on (press)“ bedeutet, dass wenn man auf die Schaltfläche klickt, „startDrag(Polster)“ er das „Polster“ (weil wir das Objekt „Polster“ genannt haben!!) festhalten und dem Cursor folgen soll. Und „on (release)“ bedeutet, dass wenn man die Schaltfläche loslässt, soll er den Drag nicht mehr ausführen!

Gut. Wenn du jetzt wieder in die Arbeitsfläche klickst und Strg + Enter drückst, dann kannst du das Polster jetzt verschieben!!

Dann zeichnest du eine Decke, färbst sie ein, machst wieder F8 > Grafik, F8 > Schaltfläche, aber gibst dieses mal bei <Instanzname> „Decke“ ein.

Dann kopierst du wieder die Befehle in das „Aktion – Schaltfläche“ Fenster, aber änderst in der zweiten Zeile, das  startDrag(Polster); , in startDrag(Decke); um!!

So, wenn du das geschafft hast, dann kannst du dir jetzt jede Menge Krempel zeichnen, z.B.: Unterhosen, Zeitschriften, Essensreste - einfach Alles was in einem unaufgeräumten Zimmer liegt.

Dann machst du wieder bei jedem F8 > Grafik, F8 > Schaltfläche, gibst jedem Objekt einen <Instanznamen> und kopierst dir den Befehl in das „Aktion – Schaltfläche“ Fenster!! Und nicht vergessen: startDrag(Polster); immer umändern!!

Wenn du dir jetzt genug gemacht hast, dann kopierst du die Objekte, änderst den <Instanznamen> um (z.B. von „hose“ auf „hose2“) und den startDrag (hose2) Befehl!!

Das machst du jetzt so oft du willst, aber es fängt schnell an zu nerven.

Du kannst die verschiedenen Objekte noch drehen,  vergrößern oder verkleinern, damit ein wenig Abwechslung reinkommt!

Jo, dann wäre der größte Teil der Arbeit getan. Jetzt fehlt nur noch die Katze.

Zuerst erstellen wir eine neue Ebene, die wir zwischen „Ebene 1“ und „Objekte“ schieben! Dann machen wir einen ovalen Kreis als Körper und einen Kreis als Kopf. Stell dazu die Linienfarbe (die Farbe der Umrandung) auf die gleiche Farbe, wie die des Kreises. Jetzt noch zwei Kreise als Augen, darunter noch einen Kreis als Nase und Ohren, die man am besten mit dem Bleistift hinbekommt. Jetzt fehlt noch der Schwanz und die Füße. Zum Schluss sollte das dann ungefähr so aussehen:

Bilder

Mach die Katze nicht zu groß, sonst findet man sie zu leicht!!

Jetzt markiere die Katze, drücke F8 und mach ein Pünktchen bei „Schaltfläche“. Klick einmal auf die Katze, dann auf „Aktion – Schaltfläche“ und kopier das rein:

on(release) {

  loadMovie("ende.swf", _root.dropZone);

}

Erklärung: „on(release) = wenn man die Schaltfläche loslässt, soll er „loadMovie(„ende.swf“,_root.dropZone);“ den Film „ende.swf.“ laden!

Jetzt musst du nur noch die Katze unter den ganzen Krempel verstecken, und los geht’s!

Ok das wars dann – FAST!! Es gibt nämlich noch kein ende.swf was er laden könnte! Deshalb machen wir jetzt eine neue Flash-Datei auf und schreiben „ Gut Gemacht“ oder „Ende“ oder so hinein. Du kannst aber auch noch mehrere Level machen!! Du musst diese Dann als „ende.swf“ speichern, oder beim Befehl oben, das loadMovie("ende.swf", _root.dropZone); durch z.B.  loadMovie("level2.swf", _root.dropZone); austauschen!!

 

Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von Susan99
  • 05.06.2012 - 19:39

Schönes Tutorial. Danke für den Anreiz. Bringt mich auf eine Idee!

Portrait von apeljuice
  • 01.12.2011 - 07:23

So, habe mir gerade das Tutorial runtergeladen und bin gespannt. :)

Portrait von monochrome
  • 23.10.2011 - 15:39

Endlich mal wieder was nützliches^^
Danke

Portrait von elo98
  • 13.07.2011 - 22:53

Super erklärt! Schönes spielchen :D
mfg elo98

Portrait von DessIntress
  • 16.12.2010 - 00:09

danke, is wunderbar und sicherlich auch gut ausbaufähig

Portrait von KABLE1992
  • 23.03.2010 - 11:59

klappt alle die cs4 haben sollten das im Action script 2 starten und für das ende würde ich ein anderen script empfehlen und zwar :
on (release) {
gotoAndPlay(6);
}
also wer mein spiel loaden will www.daniel.hosari.de.ms ich hab ein menü eingefügt und ein 2 level Kontakt Icq: 378648285 um die roh version zu bekommen zur bearbeitung

Portrait von KABLE1992
  • 22.03.2010 - 13:33

es klappt zwar alles bis auf das er nicht das video lädt kannste da nochmal posten wie das funktionieren soll ich hab das was du gemacht hast auch gemacht bringt irgendwie nix wohin muss ich die ende.swf speichern ???

Portrait von ScorpX
  • 01.02.2010 - 19:21

hab da mal eine frage wie soll ich das machen ich will es ja auf eine seite von mir reinstellen aber wie soll ich machen das wenn man auf die katze (bei mir Roter punkt) klickt das der Nächste Level läd?

Portrait von raphs
  • 30.01.2010 - 14:06

Hmm da von Flash hier nicht unbedingt die grosse auswahl besteht, bin ich trotzdem sehr froh das ich das hier so einfach wie möglich gefunden hab :D

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 05.12.2009 - 17:05

ej danke ne!
das ist echt super^^ diese befehl hab ich schon tagelang gesucht^^
on (press) { startDrag("Polster"); } on (release) { stopDrag(); }

Portrait von timroh
  • 09.11.2009 - 20:27

Habe eine Lösung für die Action Sctipt Probleme gefunden.

on (press) {
startDrag("Polster");
}
on (release) {
stopDrag();
}

PS ihr müsst unter Datei -> Einstellungen für Veröffentlichungen ->Flash -> Action Sctipt 2.0 ausgewählt haben
Mit freundlichen Grüssen tim

Portrait von Litti
  • 30.10.2009 - 19:30

sehr gut erklärt, einfach schön

Portrait von Flobse0103
  • 15.10.2009 - 15:59

Gutes Tutorial. Sehr gut für Anfänger beschrieben

Portrait von Samatze
  • 20.09.2009 - 22:54

gut geschrieben werds ausprobieren

Portrait von SnowDragon
  • 26.08.2009 - 14:39

Gutes tut, ideal für Anfänger

Portrait von Suffering
  • 07.06.2009 - 14:34

Gut erklärt.....danke für dieses tut

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 02.06.2009 - 13:22

Gut für Anfänger erklärt.

Portrait von biggie83
  • 30.03.2009 - 13:14

der aktionscript code fehlt oder ist unvollständig an vielen stellen.

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 20.03.2009 - 13:33

Hi,

ich bin neu im Flash. Läuft dieses Spiel ohne Actionscript?

Danke.

Portrait von koksner
  • 15.10.2008 - 12:52

Irgendetwas stimmt mit dem actionscript nicht. Die Decke bewegt sich bei mir nicht

x
×
×