Wort:    Username:           
 

Hallo zusammen,


manche lachen mich vielleicht aus, wegen dem Titel. Allerdings, falls man ein Homepage-Portal hat oder ähnliches und man möchte einen Adventskalender als Add-on optimieren und ankündigen, muss man mit allem schon viel früher beginnen. Mitte November sollte so etwas fertig sein, damit die User früh genug wissen das so etwas rauskommt.

Da ich den Auftrag bekommen hab, einen Adventskalender zu programmieren, werde ich ein kleines Tutorial machen, damit jeder versteht was ich gemacht habe und die persönliche Note reinbringen kann :). Achtung der Kalender ist nicht zu 100% fertig, er funktioniert zwar, aber ist noch völlig unanimiert, also Türchen oder ähnliches gehen noch nicht auf, das könnt ihr dann so gestaltet, wie ihr wollte, oder ihr schreibt mir ne E-mail und ich gebe euch meine Version.

Noch dazu muss ich sagen, das ich noch nicht lange programmiere, aber vor ca. einem Jahr brauchte ich unbedingt mal den Code für solche Addons aber niemand hat damit rausgerückt alle wollten diese verkaufen, was mir eher assozial rüberkam. Deshalb bring ich immer mal wieder ein paar coole Dinge raus, die zwar nicht zu 100% professionell programmiert sind, aber ihren Dienst erledigen.


Also fangen wir an.
Am Anfang musste ich überlegen, wie ich das machen, hab mich dann entschieden, das über meine Timeline (Zeitleiste) laufen zu lassen und die einzelnen Frames anzuspringen. Das hat den Vorteil, das nicht gleich alles geladen werden muss, da ich viele Loader-Klassen eingefügt habe, heißt erst wenn der Nutzer den Frame anspringt wird das Bild geladen und unnötiger Traffic am Anfang gespaart. Code ist es aber trotzdem sehr viel!

Zitat :


stop();


tuerchen1_mc.addEventListener(MouseEvent.CLICK, opentuerchen1);
tuerchen2_mc.addEventListener(MouseEvent.CLICK, opentuerchen2);
tuerchen3_mc.addEventListener(MouseEvent.CLICK, opentuerchen3);
tuerchen4_mc.addEventListener(MouseEvent.CLICK, opentuerchen4);

var aktuell:Date = new Date();
var monat = aktuell.getMonth()+1;
var tag = aktuell.getDate(); if (tag < 10) tag = '0' + tag;

var cur_date = monat + "" + tag;

function opentuerchen1(evt:MouseEvent):void {
if (cur_date >= 825) {
gotoAndPlay(2);
stop();
} else {
datum_txt.text = "Das geht noch nicht!";
}
}

function opentuerchen2(evt:MouseEvent):void {
if (cur_date >= 826) {
gotoAndPlay(3);
stop();
} else {
datum_txt.text = "Das geht noch nicht!";
}
}
function opentuerchen3(evt:MouseEvent):void {
if (cur_date >= 824) {
gotoAndPlay(4)
stop();
} else {
datum_txt.text = "Das geht noch nicht!";
}
}
function opentuerchen4(evt:MouseEvent):void {
if (cur_date >= 702) {
gotoAndPlay(5)
stop();
} else {
datum_txt.text = "Das geht noch nicht!";
}
}



So ich erkläre schnell was ich gemacht habe. Ich habe in der ersten Timeline (Zeitleiste), erstes Frame(1tes Bild), diesen Code eingefügt + alle dazugehörigen Movieclips, die als Schaltflächen dienen. Um solche Schaltflächen aktivieren zu können muss das Datum natürlich stimmen. Dafür hab ich die Methode newDate eingefügt und die Monate und Tage ausgeben lassen (jahre sind bei einem 1-Monats-Kalender egal). Bei den Monaten müsst ihr hinten diese +1 beachten, da Flash den Monate Januar als 0 sieht und dann Dezember als den 11ten Monat ausgibt^^.
Bei den Tagen steht die If-Anweisung dahinter, die dient dafür das es keine Verwechslung gibt. Also es kommt ja häufiger vor, das die gleiche Zahlenkombinationen in dem ganzen Jahr erscheint. Und damit der Monat und Tag nicht addiert werden, hab ich das dazwischen eingefügt, heißt der 2.9.2009 ist umgeschrieben 902. So dann hab ich die einzelnen EventListener in Funktionen geschrieben, und eine If-Anweisung angefügt, die falls die Option erfüllt ist das Frame abspielt, falls nicht kommt in einem Textfeld (datum_txt.text, einfach ein dynamisches Textfeld einfügen, mit diesem Instanznahmen). Ich hoffe es kommt jeder mit.
Zur zweiten Timeline, erstes Frame, dort hab ich den Hintergrund eingefügt, also nicht die Movieclips, sondern z.B. ein winterliches Haus, oder ähnliches, eben Etwas was statisch ist und keine Funktion erfüllen muss auser gut auszusehen. Dieses Bild fügt ihr jedem Frame zu, solange eben, wie die erste Zeitleiste gefüllt ist. Also heißt 15 Frames sind auf der ersten Zeitleiste so sollten dann auch auf der 2ten 15 Frames mit den Background gefüllt sein. Im letzten Frame den AS-Code ' stop(); ' einfügen, damit er die 15 Bilder nicht immer wieder von vorne abspielt und der Nutzer nichtsmehr machen kann.

Zum nächsten Schritt:

Zitat :


var laden:Loader = new Loader();
laden.x = 25;
laden.y = 5;
laden.load(new URLRequest("http://beispiel-url.de/images/bild1.jpg" ));
addChild(laden);


back_mc.addEventListener(MouseEvent.CLICK, backstep);


function backstep(evt:MouseEvent) {
gotoAndStop(1);
removeChild(laden)
}



Also das hier kommt einfach auf jedes Frame, auf dem ein Bild gezeigt wird. Hier wird mit Hilfe eines Loader, das Bild auf die Bühne geladen. Gebt die X und Y Koordinaten an um die Position zu bestimmen. Nachteil, das Bild muss in der Auflösung, wie deine Bühne sein. Also heißt deine Bühne ist 600 x 500 Pixel groß. Dann kann das Bild so groß sein. Am besten aber kleiner, da man den 'Backstep Button' noch sieht, um wieder zurück zu kommen. So noch zu beachten ist, das der Loader in jedem Frame einen anderen Namen bekommt also :

Beispiel für ein 2tes Bild:

Zitat :


var laden1:Loader = new Loader();
laden1.x = 25;
laden1.y = 5;
laden1.load(new URLRequest("http://beispiel-url.de/images/bild1.jpg" ));
addChild(laden1);


back_mc.addEventListener(MouseEvent.CLICK, backstep);


function backstep(evt:MouseEvent) {
gotoAndStop(1);
removeChild(laden1)
}



So mein ich das :) sonst gibt es einen Chrash.

Eigentlich sollte das alles jetzt so funktionieren wie ihr wollt. Das ist ein ziemlich einfacher Code, der aber funktioniert. Ich versuche gerade das Bild automatisch mit xscale und yscale in die richtige Auflösung zu zwingen, sowie eine Animation zum Öffnen der 'Türchen' zu machen. Heißt klappe auf, einen kleine Vorschau des Bildes und dann bei nochmaligen Klick wird das Bild größer und bei nochmaligen Klicke wieder kleiner :). Ihr könnt übrigens auch Filme hochladen lassen oder Animationen oder Gedichte also Texte etc. alles möglich. Einfach anstatt z.B. bild1.jpg, gedicht1.txt eingeben, und dann wird der auch geladen.

Also der Grundbau ist gemacht, die Feinheiten könnt ihr ja ordentlich gestalten, wünsche euch viel Spaß und an die die Flash schon ewig programmieren und meinen Code lächerlich finden.......stellt doch einen besseren rein :sol:


grüße

Max


PS: Falls ihr wisst, wie man auf ein MovieClip zugreift, könnt ihr den Loader das Bild auch in ein von euch erstellen MC laden. Folgendes:
mein_mc.addChild(laden);
Schon habt ihr einen MovieClip über den ihr aufs Bild zugreifen könnt und es somit verändert könnt.


Nachricht bearbeitet von I-LoVeRaP am 25.08.2009 um 14:00:16
Anzeigen

Edit: oben anstatt dem smiley 'aktuell: Date' (nur halt zusammen)

Und noch was, wollte das hier nur als Gedankenanstoß geben^^, den fertigen Kalender gebn ich sobald er fertig ist, zum Download bereit, also den Code, Bilder etc. dazu hab ich keine Rechte :).


Nachricht bearbeitet von I-LoVeRaP am 25.08.2009 um 11:54:28
Antworten I-LoVeRaP
Tom's Hardware > Foren > Eigene Website, Hosting, Webdesign, Programmieren > Adventskalender (AS3)
Zu:

Es gibt 35 identifizierte und nicht identifizierte User. Zur Ansicht der Liste identifizierter User, Hier klicken.

Google Anzeigen
  • Die Community jetzt fragen
  • Veröffentlichen
Anzeige
Die folgenden Community-Mitglieder erhielten Auszeichnungen!
Wir gratulieren:
Anzeigen