Anzeige
Tutorialbeschreibung

AS3: Externer Bilderload über Klassen

AS3: Externer Bilderload über Klassen

Hier wird euch erklärt, wie Ihr einen externen Bilderload in Flash CS3/CS4 realisiert.
Besonderheit ist die Verwendung von Klassen.


Hallo Leute!
Heute wollen wir uns mit den Klassen beschäftigen  und wie wir damit ein externes Bild laden können.

Schritt 1 - vorbereiten:

Erstellt einen neuen Ordener mit dem Namen eures Projektes.
In den Projekt-Ordner kommt ein neuer Ordner classes und einer pic.
Legt nun in den pic Ordner ein .jpg Bild, welches nicht größer als die Bühne sein sollte, und den Namen image besitzt.
Erstellt nun ein neues Flash Dokument (ActionScript 3) und speichert die FLA in den Projekt-Ordner.

Bilder


Schritt 2 - Die Einstellungen in der FLA:
Geht nun auf Einfügen -> Neues Symbol.
Beim Typ wählt ihr MovieClip und als Namen pic_bmp.
Wählt den Kontrollkasten bei Export für ActionScript an und als Klassenname gebt ihr classes.pic_bmp ein.

Bilder


Den Warnhinweis quitiert ihr mit OK.

Nun müsst ihr noch die Klasse des Dokumentes festlegen.

Bilder


Das classes steht hierbei für den Ordner, in den die ActionScript (.as) Dateien reinkommen


Schritt 3 - Die .as Dateien:
Erstellt eine neue AS Datei über Datei-> Neu-> Actionscript-Datei und speichert sie gleich im Ordner classes unter dem namen pic_bmp ab.
Hier kommt nun Folgendes rein:
 

package classes
    {
    import flash.display.Loader;
    import flash.display.MovieClip;
    import flash.net.URLRequest;

    public class pic_bmp extends MovieClip
    {
        public function pic_bmp()
        {
            var urlReq:URLRequest = new URLRequest ("pic/image.jpg");
            var picLoader:Loader = new Loader();
            picLoader.load(urlReq);
            picLoader.x = 0;
            picLoader.y = 0;
            addChild(picLoader);

        }
    }
}

package classes Hier muss der Name des Ordners stehen, in dem sich die .as befindet.
Import Importiert die verschiedenen Klassen.
public class pic_bmp extends MovieClip Die Klasse pic_bmp erbt alle Eigenschaften und Methoden vom Movieclip.
function pic_bmp Die Funktion von pic_bmp
var urlReq:URLRequest = new URLRequest ("pic/image.jpg") Instanziert ein neues URLRequest Objekt, welches das Bild im Ordner pic unter dem Namen image.jpg sucht.
picLoader.load(urlReq); Lädt das Bild.
picLoader.x = 0; Positioniert das Bild auf der x Achse(Horizontal).
addChild(picLoader); Legt das Bild in den MovieClip

Wenn wir den Film nun mit CTRL+Enter testen, bekommen nur die Hintergrundfarbe zu sehen.
Das liegt daran, dass wir das Bild erst in den MovieClip gelegt haben.
Legen wir nun den MovieClip auf die Stage(Bühne), sehen wir das Bild :)
Aber wozu haben wir dann eine Dokumenten-Klasse angelegt?
Die wird nun den MovieClip für uns positionieren.

Dazu erstellen wir nochmals eine neue .as Datei und nennen diese externenr_bilderload, gespeichert im Ordner classes.
Hier kommt nun Folgendes rein:

package classes
    {
   
    import flash.display.MovieClip;

    public class externenr_bilderload extends MovieClip
    {
        public var pic01:pic_bmp;
        public function externenr_bilderload()
        {
            pic01 = new pic_bmp();
            pic01.x = 0;
            pic01.y = 0;
            addChild(pic01);

        }
    }
}



Sieht vertraut aus ;)
public var pic01:pic_bmp Erstellt eine neue Variable namens pic01, diese ist mit unserer pic_bmp Klasse verknüpft, welche das Bild lädt.
pic01 = new pic_bmp(); Instanziert ein neues pic_bmp Objekt.
pic01.x = 0;
Positioniert das pic01 auf der X Achse, als Horizontal ganz links.
pic01.y = 0;
Positioniert das pic01 auf der Y Achse, als vertikal ganz oben.
addChild(pic01);
Bringt das pic01 auf die Bühne.

Speichert alles und testet euer Movie.
Das Ganze sollte etwa so aussehen:

Bilder


Schlussendlich ist vielleicht noch zu sagen, warum wir das Ganze so machen.
Zum einen wird die SWF Datei um vieles kleiner, wenn wir die Bilder von außen laden.
Zum anderen verwenden wir die Klassen, wodurch wir den Code nicht im ganzen Projekt verteilt haben und ein nachträgliches Bearbeiten auch ohne Flash möglich ist.

Dies war mein erstes Tutorial, ich hoffe, ihr konntet etwas lernen ;)

Have Fun


DVD-Werbung
Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von Susan99
  • 05.06.2012 - 16:34

Ein gutes Tutorial als Einstieg in Sachen Klassen in AS3! Danke!
LG Susan

Portrait von johanna52
  • 01.08.2011 - 15:06

danke für das kl. Einsteiger-Tut. prima!

Portrait von sille_88
  • 09.02.2011 - 13:01

Ein bisschen mager...

Portrait von arimano
  • 13.05.2010 - 23:01

nich schlecht aber sooooo dynamisch ist das Ganze dann doch nicht, denn auch wenn du dein package extern bearbeiten kannst so wird es doch erst neu eingebunden wenn du deine .fla erneut exportierst --> ergo man kann es doch nicht ohne Flash ändern. Aber dafür hat man eben eine schöne schlanke .swf

Gefehlt hat mir noch bisschen die Sache mit dem praktischen Nutzeffekt, denn so lädt eine reine Flash-Website die eigentlich normalerweise 20x 1mb bilder enthält trotzdem in blitzschnelle, wenn man die Bilder nämlich erst reinlädt wenn man sie braucht ;)

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 11.03.2010 - 21:22

sooooooo lange nach genau diesem tut gesucht.....DAAAAAANKE!

Portrait von killerfrettchen
  • 10.11.2009 - 20:16

gutes tut, genau danach hab ich gesucht 5*

Portrait von dCak
  • 09.11.2009 - 18:13

Super cool ... kann man das erweitern, zb.: für eine Gallerie ?!
das er im Verzeichniss "image" alle bilder druchsucht und dann in flash reinlädt ?

könntest du mir das erklären bitte ?!

danke & LG

Portrait von schnubbiii
  • 06.10.2009 - 16:58

Funktioniert alles soweit, da ich aber geladenen Grafiken als Navigation für meine HP nutzen möchte, meine Frage: Wie setzte ich die Hyperlinks für die einzelnen Grafiken.

Mein AS Code sieht so aus:

package classes
{
import flash.display.Loader;
import flash.display.MovieClip;
import flash.net.URLRequest;

public class pic_bmp extends MovieClip
{
public function pic_bmp()
{
var urlReq:URLRequest = new URLRequest ("image/button1.jpg");
var picLoader:Loader = new Loader();
picLoader.load(urlReq);
picLoader.x = 0;
picLoader.y = 0;
addChild(picLoader)

var urlReq:URLRequest = new URLRequest ("image/button2.jpg");
var picLoader:Loader = new Loader();
picLoader.load(urlReq);
picLoader.x = 102;
picLoader.y = 0;
addChild(picLoader)

var urlReq:URLRequest = new URLRequest ("image/button3.jpg");
var picLoader:Loader = new Loader();
picLoader.load(urlReq);
picLoader.x = 204;
picLoader.y = 0;
addChild(picLoader)

var urlReq:URLRequest = new URLRequest ("image/button4.jpg");
var picLoader:Loader = new Loader();
picLoader.load(urlReq);
picLoader.x = 306;
picLoader.y = 0;
addChild(picLoader)

}
}
}

Portrait von spy15
  • 09.10.2009 - 23:00

Du musst ein URLRequest und ein Eventlistener einbauen.<br>
<br>
so sieht dann die pic_bmp.as in meinem Fall aus:<br>
<br>
package classes<br>
{<br>
import flash.display.Loader;<br>
import flash.display.MovieClip;<br>
import flash.net.URLRequest;<br>
import flash.events.MouseEvent;<br>
import flash.net.navigateToURL;<br>
import flash.net.URLRequest;<br>
<br>
public class pic_bmp extends MovieClip<br>
{<br>
public function pic_bmp()<br>
{<br>
var urlReq:URLRequest = new URLRequest (&quot;pic/image.jpg&quot;);<br>
var picLoader:Loader = new Loader();<br>
picLoader.load(urlReq);<br>
picLoader.x = 0;<br>
picLoader.y = 0;<br>
addChild(picLoader);<br>
<br>
picLoader.addEventListener(MouseEvent.CLICK,onClick);<br>
var url:URLRequest = new URLRequest(&quot;www.spy15.ch&quot;);<br>
function onClick (E:MouseEvent):void<br>
{<br>
navigateToURL(url)<br>
}<br>
<br>
}<br>
}<br>
}<br>

Portrait von schnubbiii
  • 05.10.2009 - 14:48

Genau das was ich gesucht habe für meine Flash Navigation, werde es gleich mal ausprobieren.

Portrait von NGBMW
  • 15.08.2009 - 06:42

Find ich toll!

Portrait von pastorpixel
  • 14.08.2009 - 15:22

Eine Klasse zu erstellen, um ein Bild zu laden, finde ich ein bisschen übertrieben aufwändig. Wenn man das Tutorial als Einstieg in Sachen Klassen ansieht, macht es dann schon Sinn.

Die Positionierung auf x=0 und y=0 ist eigentlich auch nicht sinnvoll, da das Bild auch ohne Positionierung auf x=0 und y=0 geladen würde. x=20 und y=20 wäre das schon sinnvoller.

Portrait von Sybie
  • 13.08.2009 - 14:10

Gibt's auch ne Möglichkeit für AS2.0?
Mit Flash8 funzt es leider so nicht. :(

Portrait von spy15
  • 14.08.2009 - 10:56

Das gibt es auf jeden Fall.<br>
Ich beschäftige mich ausschliesslich mit AS3, daher kann ich dir nicht gross weiter helfen.<br>
Dazu sollte es aber genügend Tutorials geben, einfach mal Googeln.<br>

Portrait von pastorpixel
  • 14.08.2009 - 15:30

Für AS2 hab ich das in meinem Flash Tutorial ausführlich erklärt, zwar nicht als Klasse, aber es funktioniert.
Hier die Links dazu
http://www.pastorpixel.de
Dort klickst du unten im Menü auf Tutorial, und dann rechts auf Flash AS2
oder gehst direkt auf die Seite
http://www.on-design.de/tutor/flashaction_d.htm#bildladen
oder gehst direkt ins Beispiel
http://www.on-design.de/tutor/FlsExpl/loadjpg.htm

Schau dir auf der Seite auch den Tipp "loadMovie" alle Beispiele kannst du dir auch als fla Dateien runterladen Die Version ist bei den meisten Dateien Flash MX oder Flash6.

Portrait von endurion
  • 13.08.2009 - 10:44

Auch wenn ich das schon weiß, ich hab einfach mal geklickt und find's sehr gut erklärt :)

Portrait von ivadesign
  • 12.08.2009 - 14:24

Danke, einfach es ist nie, besonders für Anfänger.

Portrait von spy15
  • 12.08.2009 - 07:09

Danke für die Kommentare.
Ich hab eine aktualisierte Version abgeschickt, welche in ein paar Tagen online sein sollte.
Ich werde schauen, das ich noch einige AS3 Tutorials machen kann, falls gewünscht.

Have Fun

Portrait von FTom
  • 11.08.2009 - 14:44

eine tolle sache, leicht zum nachmachen

Portrait von klinnik
  • 11.08.2009 - 13:33

Danke für das Tutorial. Hat gleich geklappt. Allerdings ist noch ein kleiner Fehler drin: Zuerst sollen wir den ordner für das .jpg "image" nennen. Später im Code nennst du ihn dann "pic". Ansonsten Glückwunsch zum ersten Tutorial!

x
×
×