Tutorial AS3: Externer Bilderload über Klassen

AS3: Externer Bilderload über Klassen

11.08.2009 in Adobe Flash von spy15
- Kategorie: Adobe Flash
- Erstellt mit Programmversion: CS4/CS3
- Dateigröße (PDF): 1.5 MB
- Dateigröße (Arbeitsmaterial): 20 KB
- Bisherige Zugriffe: 3395
Hier wird euch erklärt, wie Ihr einen externen Bilderload in Flash CS3/CS4 realisiert.
Besonderheit ist die Verwendung von Klassen.
Zum Downloadmanager hinzufügen PDF-Datei herunterladen (1.5 MB) Arbeitsmaterialien herunterladen (20 KB)
spy15
- Registriert seit: 12.05.2008
- User-Profil ansehen
- Weitere Tutorials, Video-Trainings & Downloads von spy15

Lieber Gast …

… die Inhalte von PSD-Tutorials.de stehen nur registrierten Mitgliedern zur Verfügung. Damit wollen wir den Communitygedanken weiterführen. Als Mitglied trägst du - wenn auch nur im Kleinen - zum Puls der Community bei. Und nur so ist es möglich, weiterhin hochwertige Inhalte für alle bereitzustellen.

Jetzt kostenlos registrieren!

Vorteile der kostenlosen Mitgliedschaft

Mit der kostenlosen und schnell erledigten Registrierung erhältst du viele nachhaltige Vorteile, die wir dir hier in aller Kürze aufzeigen möchten:

PSD steht für professionelles Know-how in den Bereichen Bildbearbeitung mit Photoshop, Fotografie, Webentwicklung, Layout- und Vektorbearbeitung, 3D-Bearbeitung mit Cinema 4D und Co.
Über 2200 Tutorials mit druckbarer PDF-Datei und teilweise den zugehörigen Arbeitsmaterialien
Mehr als 500 Video-Trainings als Stream zur Direktanzeige und zum Download
Abruf von über 1000 Downloads zu Photoshop-Presets, 3D-Modellen, Grußkarten, Texturen & Co
Zugriff auf ein sehr aktives Forum mit Antworten im Minutentakt
Deine Daten sind sicher. Sie werden nicht weitergegeben! Die Mitgliedschaft kann jederzeit und ohne Aufwand wieder gelöscht werden.

Reinschnuppern als Gast

Niemand kauft gerne die Katze im Sack, auch wenn sie kostenlos ist. Wir haben eine Handvoll Tutorials und Video-Trainings ausgesucht, die du auch als Gast ohne Registrierung ansehen kannst. Gefallen sie dir, stehen dir nach der Registrierung alle oben genannten Inhalte zur Verfügung.

Das Punktesystem

Einen winzigen Haken gibt es noch. Es gibt bei uns ein Punktesystem. Damit soll erreicht werden, dass Mitglieder sich aktiv in unserer Community beteiligen. Sobald du im Forum schreibst oder Tutorials kommentierst, bekommst du Punkte. Mit diesen Punkten kannst du wiederum Tutorials anschauen oder Downloads herunterladen. Mit der Registrierung bei PSD-Tutorials.de erhältst du ein Startguthaben von 100 Punkten, womit du schon ein gutes Stück weit kommst.

Jetzt kostenlos registrieren!

Kommentare

johanna52
01.08.2011 - 15:06
danke für das kl. Einsteiger-Tut. prima!
sille_88
09.02.2011 - 13:01
Ein bisschen mager...
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 ;)
sanseastian
11.03.2010 - 21:22
sooooooo lange nach genau diesem tut gesucht.....DAAAAAANKE!
killerfrettchen
10.11.2009 - 20:16
gutes tut, genau danach hab ich gesucht 5*
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
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)

}
}
}
- spy15
 09.10.2009 - 23:00
 Du musst ein URLRequest und ein Eventlistener einbauen. 
 
 so sieht dann die pic_bmp.as in meinem Fall aus: 
 
 package classes 
 { 
 import flash.display.Loader; 
 import flash.display.MovieClip; 
 import flash.net.URLRequest; 
 import flash.events.MouseEvent; 
 import flash.net.navigateToURL; 
 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); 
 
 picLoader.addEventListener(MouseEvent.CLICK,onClick); 
 var url:URLRequest = new URLRequest("www.spy15.ch"); 
 function onClick (E:MouseEvent):void 
 { 
 navigateToURL(url) 
 } 
 
 } 
 } 
 }
schnubbiii
05.10.2009 - 14:48
Genau das was ich gesucht habe für meine Flash Navigation, werde es gleich mal ausprobieren.
NGBMW
15.08.2009 - 06:42
Find ich toll!
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.
Sybie
13.08.2009 - 14:10
Gibt's auch ne Möglichkeit für AS2.0?
Mit Flash8 funzt es leider so nicht. :(
- spy15
 14.08.2009 - 10:56
 Das gibt es auf jeden Fall. 
 Ich beschäftige mich ausschliesslich mit AS3, daher kann ich dir nicht gross weiter helfen. 
 Dazu sollte es aber genügend Tutorials geben, einfach mal Googeln.
- 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.
endurion
13.08.2009 - 10:44
Auch wenn ich das schon weiß, ich hab einfach mal geklickt und find's sehr gut erklärt :)
ivadesign
12.08.2009 - 14:24
Danke, einfach es ist nie, besonders für Anfänger.
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
FTom
11.08.2009 - 14:44
eine tolle sache, leicht zum nachmachen
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!
rd2006sp
11.08.2009 - 10:18
....... werd ich ausprobieren!
Bin mit Flash net gut. Mal sehen ob ich damit mein Problem lösen kann ........
Das dauert aber noch.
Auf alle Fälle Danke für den guten Beitrag - und ich melde mich

Sonnige Grüße, rd2006sp

Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.

Tutorial empfehlen

Anleitung (Bilder + Extras werden nur für Mitglieder eingeblendet)

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:

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

PSD-Tutorials - Bildbearbeitung - Photoshop - Flash - Cinema4D - InDesign - Fotografie

AS3: Externer Bilderload über Klassen

11.08.2009 in Adobe Flash von spy15

spy15

Lieber Gast …

Vorteile der kostenlosen Mitgliedschaft

Reinschnuppern als Gast

Das Punktesystem

Kommentare

johanna52

sille_88

arimano

sanseastian

killerfrettchen

dCak

schnubbiii

spy15

schnubbiii

NGBMW

pastorpixel

Sybie

spy15

pastorpixel

endurion

ivadesign

spy15

FTom

klinnik

rd2006sp

Tutorial empfehlen

Anleitung (Bilder + Extras werden nur für Mitglieder eingeblendet)

Reklame

Anzeige

Aktuelles Commag

Anzeige

DarkSide

Anzeige

AS3: Externer Bilderload über Klassen

11.08.2009 in Adobe Flash von spy15

spy15

Lieber Gast …

Vorteile der kostenlosen Mitgliedschaft

Reinschnuppern als Gast

Das Punktesystem

Kommentare

Tutorial empfehlen

Anleitung (Bilder + Extras werden nur für Mitglieder eingeblendet)

Reklame

Anzeige

Aktuelles Commag

Anzeige

DarkSide

Social Media

Anzeige