JavaScript in Flash einbinden.

SixxKiller

Erfahrenes Mitglied
Hi Leutz!

Ich hab en kleines Problem wobei ich Eure Hilfe benötige.
Hab vor kurzem ein Template erworben was komplett in Flash ist.
Da ich nen Neewbie bin in Sachen Flash hat man die Navigation und
Verlinkung für mich angepasst. Den Rest hab ich selbst geschafft.
Nun möchte ich einen Countdown in JavaScript einfügen.
Das Script zählt bis zum, einem vorgegebenen Datum und Uhrzeit runter.
Hier der Link zur HP: Ice Dogz
Und hier das JavaScript:
PHP:
	var jahr=2007, monat=03, tag=16, stunde=19, minute=30, sekunde=0; // Ziel-Datum in MEZ
	var zielDatum=new Date(jahr,monat-1,tag,stunde,minute,sekunde);

	function countdown() {
		startDatum=new Date(); // Aktuelles Datum

		// Countdown berechnen und anzeigen, bis Ziel-Datum erreicht ist
		if(startDatum<=zielDatum)  {

			var jahre=0, monate=0, tage=0, stunden=0, minuten=0, sekunden=0;

			/* Allgemeines Vorgehen:
			 * Zunächst werden die vollen Jahre gezählt
			 * und anschließend der Start- und Ziel-Monat auf den jeweiligen 1. gesetzt.
			 * Nun werden erst die vollen Monate vom 1. zum 1. des Start- bzw. Ziel-Monats berechnet
			 * und danach die tatsächlichen Monatstage wieder mit einbezogen.
			 * Dieses Vorgehen vermeidet Probleme mit den verschiedenen Monatslängen.
			 * Die restliche Differenz zwischen Start- und Ziel-Zeit wird mit Tagen aufgefüllt und
			 * was dann noch übrig bleibt, in Stunden, Minuten und Sekunden ausgedrückt.*/

			// Jahre
			if(startDatum<zielDatum) {
				while(startDatum<zielDatum) {
					if(startDatum.setFullYear(startDatum.getFullYear()+1)<=zielDatum) jahre++;
				}
				startDatum.setFullYear(startDatum.getFullYear()-1);
			}

			// Restliche Tage zum Monatsende ermitteln
			var restTage=0;
			var m=startDatum.getMonth();
			if(m==1-1||m==3-1||m==5-1||m==7-1||m==8-1||m==10-1||m==12-1) restTage=31-startDatum.getDate();
			else if(m==4-1||m==6-1||m==9-1||m==11-1) restTage=30-startDatum.getDate();
			else if(m==2-1) {
				if(startDatum.getFullYear()%4==0 && (startDatum.getFullYear()%100!=0 || startDatum.getFullYear()%400==0)) restTage=29-startDatum.getDate(); // Schaltjahr
				else restTage=28-startDatum.getDate();
			}

			// Start- und Ziel-Tag merken und auf 1 setzen
			var startTag=startDatum.getDate();
			var zielTag=zielDatum.getDate();
			startDatum.setDate(1);
			zielDatum.setDate(1);

			// Monate
			if(startDatum<zielDatum) {
				while(startDatum<zielDatum) {
					if(startDatum.setMonth(startDatum.getMonth()+1)<=zielDatum) monate++;
				}
				startDatum.setMonth(startDatum.getMonth()-1);
			}

			// Tatsächlichen Start- und Ziel-Tag berücksichtigen
			if(startDatum.getMonth()==zielDatum.getMonth()) {
				if(startTag<=zielTag) startDatum.setDate(startTag);
				else {
					monate--;
					tage=restTage+1;
				}
			}
			else {
				startDatum.setMonth(startDatum.getMonth()+1);
				if(startTag>=zielTag) tage=restTage+1;
				else {
					monate++;
					startDatum.setDate(startTag);
				}
			}
			zielDatum.setDate(zielTag);

			// Tage
			restTage=Math.floor((zielDatum-startDatum)/(24*60*60*1000));
			startDatum.setTime(startDatum.getTime()+restTage*24*60*60*1000);
			tage+=restTage;

			// Stunden
			stunden=Math.floor((zielDatum-startDatum)/(60*60*1000));
			startDatum.setTime(startDatum.getTime()+stunden*60*60*1000);

			// Minuten
			minuten=Math.floor((zielDatum-startDatum)/(60*1000));
			startDatum.setTime(startDatum.getTime()+minuten*60*1000);

			// Sekunden
			sekunden=Math.floor((zielDatum-startDatum)/1000);

			// Anzeige formatiere
			(tage<10)	?	tage		="0"+tage+"t "	: tage		=tage+"t ";
			(stunden<10)	?	stunden		="0"+stunden+"h "	: stunden	=stunden+"h ";
			(minuten<10)	?	minuten		="0"+minuten+"m "	: minuten	=minuten+"m ";
			(sekunden<10) 	?	sekunden	="0"+sekunden+"s"	: sekunden	=sekunden+"s";
			
			if(monate>0)
			{
				(monate<10)	?	monate		= monate+"M "	: monate	= monate+"M ";
				document.countdownform.countdowninput.value=monate+tage+stunden+minuten+sekunden;
			}
			else
			{
				document.countdownform.countdowninput.value="In: "+tage+stunden+minuten+sekunden;	
			}

			setTimeout('countdown()',200);
		}
		// Anderenfalls alles auf Null setzen
		else
			document.reload(); 
		// document.countdownform.countdowninput.value="0 Jahre,  0 Monate,  0 Tage,  0 Stunden,  0 Minuten  und  00 Sekunden";
	}
Ist es überhaupt möglich das JavaScript einzufügen?
Wenn ja wie?
Ach ja, den Countdown möchte ich möglichst unter die eigentliche HP haben.
Also sollte der Countdown von Anfang bis Ende zu sehen sein.
Thanks für Eure Hilfe.

Greetz SixxKiller
 
Hallo!

Ach ja, den Countdown möchte ich möglichst unter die eigentliche HP haben.

Aber dann müsstest du den Countdown ja nicht zwingend in Flash umsetzen, sondern könntest den Countdown ja einfach in ein HTML-Element stellen und jenes unter dem eingebetteten Flash-Film positionieren...

Aber um deine Frage zu beantworten:
Ja, man kann diesen Code kann man fast wie er ist in Flash einsetzen, da ActionScript sich sehr an Javascript orientiert. Folgende Umsetzung geht davon aus, dass ein Textfeld auf der Bühne liegt, dessen Instanzname "txt" lautet:
Code:
var jahr = 2007, monat = 03, tag = 16, stunde = 19, minute = 30, sekunde = 0;
// Ziel-Datum in MEZ
var zielDatum = new Date(jahr, monat-1, tag, stunde, minute, sekunde);


function countdown() {
	startDatum = new Date();
	// Aktuelles Datum
	// Countdown berechnen und anzeigen, bis Ziel-Datum erreicht ist
	if (startDatum <= zielDatum) {
		var jahre = 0, monate = 0, tage = 0, stunden = 0, minuten = 0, sekunden = 0;
		/* Allgemeines Vorgehen:
		             * Zunächst werden die vollen Jahre gezählt
		             * und anschließend der Start- und Ziel-Monat auf den jeweiligen 1. gesetzt.
		             * Nun werden erst die vollen Monate vom 1. zum 1. des Start- bzw. Ziel-Monats berechnet
		             * und danach die tatsächlichen Monatstage wieder mit einbezogen.
		             * Dieses Vorgehen vermeidet Probleme mit den verschiedenen Monatslängen.
		             * Die restliche Differenz zwischen Start- und Ziel-Zeit wird mit Tagen aufgefüllt und
		             * was dann noch übrig bleibt, in Stunden, Minuten und Sekunden ausgedrückt.*/
		// Jahre
		if (startDatum<zielDatum) {
			while (startDatum<zielDatum) {
				if (startDatum.setFullYear(startDatum.getFullYear()+1)<=zielDatum) {
					jahre++;
				}
			}
			startDatum.setFullYear(startDatum.getFullYear()-1);
		}
		// Restliche Tage zum Monatsende ermitteln 
		var restTage = 0;
		var m = startDatum.getMonth();
		if (m == 1-1 || m == 3-1 || m == 5-1 || m == 7-1 || m == 8-1 || m == 10-1 || m == 12-1) {
			restTage = 31-startDatum.getDate();
		} else if (m == 4-1 || m == 6-1 || m == 9-1 || m == 11-1) {
			restTage = 30-startDatum.getDate();
		} else if (m == 2-1) {
			if (startDatum.getFullYear()%4 == 0 && (startDatum.getFullYear()%100 != 0 || startDatum.getFullYear()%400 == 0)) {
				restTage = 29-startDatum.getDate();
			} else {
				restTage = 28-startDatum.getDate();
			}
			// Schaltjahr 
		}
		// Start- und Ziel-Tag merken und auf 1 setzen 
		var startTag = startDatum.getDate();
		var zielTag = zielDatum.getDate();
		startDatum.setDate(1);
		zielDatum.setDate(1);
		// Monate
		if (startDatum<zielDatum) {
			while (startDatum<zielDatum) {
				if (startDatum.setMonth(startDatum.getMonth()+1)<=zielDatum) {
					monate++;
				}
			}
			startDatum.setMonth(startDatum.getMonth()-1);
		}
		// Tatsächlichen Start- und Ziel-Tag berücksichtigen 
		if (startDatum.getMonth() == zielDatum.getMonth()) {
			if (startTag<=zielTag) {
				startDatum.setDate(startTag);
			} else {
				monate--;
				tage = restTage+1;
			}
		} else {
			startDatum.setMonth(startDatum.getMonth()+1);
			if (startTag>=zielTag) {
				tage = restTage+1;
			} else {
				monate++;
				startDatum.setDate(startTag);
			}
		}
		zielDatum.setDate(zielTag);
		// Tage
		restTage = Math.floor((zielDatum-startDatum)/(24*60*60*1000));
		startDatum.setTime(startDatum.getTime()+restTage*24*60*60*1000);
		tage += restTage;
		// Stunden
		stunden = Math.floor((zielDatum-startDatum)/(60*60*1000));
		startDatum.setTime(startDatum.getTime()+stunden*60*60*1000);
		// Minuten
		minuten = Math.floor((zielDatum-startDatum)/(60*1000));
		startDatum.setTime(startDatum.getTime()+minuten*60*1000);
		// Sekunden
		sekunden = Math.floor((zielDatum-startDatum)/1000);
		// Anzeige formatiere
		(tage<10) ? tage="0"+tage+"t " : tage=tage+"t ";
		(stunden<10) ? stunden="0"+stunden+"h " : stunden=stunden+"h ";
		(minuten<10) ? minuten="0"+minuten+"m " : minuten=minuten+"m ";
		(sekunden<10) ? sekunden="0"+sekunden+"s" : sekunden=sekunden+"s";
		if (monate>0) {
			(monate<10) ? monate=monate+"M " : monate=monate+"M ";
			txt.text = monate+tage+stunden+minuten+sekunden;
		} else {
			txt.text = "In: "+tage+stunden+minuten+sekunden;
		}
		
	} else clearInterval(interval);
	// Anderenfalls alles auf Null setzen 
	// document.countdownform.countdowninput.value="0 Jahre,  0 Monate,  0 Tage,  0 Stunden,  0 Minuten  und  00 Sekunden";
}
interval = setInterval(this, "countdown", 200);

gruss
 
Zuerst Danke für deine Antwort.
Vielleicht hab ich mich in meinem ersten Post etwas unverständlich ausgedrückt.
Den Countdown im HTML Bereich einzusetzen wäre einfach zu tief. Ich hatte an den Bereich gedacht unterhalb des Copyrights der ja im Flash-Bereich liegt.
Das mit Instanzname hab ich verstanden. Jetzt muss ich aber trotzdem dumm fragen wie ich dieses Textfeld anlege? Wie schon gesagt bin ich noch recht frisch mit Flash.
Muss ich eine neue Ebene erstellen und dort das Textfeld einfügen oder geh ich in eine vorhandene? Und wie erstell ich das Textfeld?
Ich beschreib mal kurz was ich versucht hab. Habe ein Textfeld erzeugt und in ein Symbol umgewandelt mit dem Instantnamen "txt". Im ersten Frame hab ich das Script eingesetzt. Entweder hab ich das richtig gemacht oder grundlegend falsch, eine Fehlermeldung kam nicht. Aber zu sehen ist auch nichts?

Greetz SixxKiller
 
Hallo,

du musst bloss mit dem Textwerkzeug ein Textfeld auf die Bühne ziehen, die Ebene spielt keine Rolle und brauchst auch kein Symbol machen. Dann wählst du für den Textfeldtyp "dynamisch" und gibst ihm den Instanznamen "txt". Je nachdem musst du auch noch die Schriftart einbetten. Wichtig ist noch, dass sich das Skript und das Textfeld auf derselben Zeitleiste befinden.

gruss
 
Top!
Funktioniert einwandfrei.
Riesen Dank an luke_the_duke.
Nun hab ich noch eine Frage. Vielleicht hätte ich das am Anfang fragen sollen
aber ist es möglich das Script auszulagern? Sobald der Countdown abgelaufen
ist muss ich ja das Datum neu eingeben. Und jedes mal die fla zu bearbeiten
wäre doch etwas umständlich. Es würde auch reichen wenn ich nur per txt die ich
dann auf dem Server liegen hab das Datum ändere und das Script das Datum über
die txt abfragt.
Geht das?

Greetz SixxKiller
 
Hallo,

du könntest das Ziel-Datum in einer XML-Datei speichern, etwa so:

Code:
<?xml version="1.0" encoding="utf-8"?>
<startdatum>
	<jahr>2007</jahr>
	<monat>03</monat>
	<tag>16</tag>
	<stunde>19</stunde>
	<minute>30</minute>
	<sekunde>0</sekunde>
</startdatum>

Wenn du diese Datei nun z.B. "datum.xml" nennst, könntest du die Werte wie folgt für dein Skript bereitstellen:
Code:
function datumSpeichern(xml) {
	
	var l = xml.length;	
	for (var i = 0; i < l; i++) {
		this[xml[i].nodeName] = xml[i].firstChild.nodeValue;
	}
	this.interval = setInterval(this, "countdown", 200);
}

var xml = new XML();
xml.ignoreWhite = true;
xml.onLoad = function () {
	datumSpeichern(this.firstChild.childNodes);
}

xml.load("datum.xml");

Damit das auch funktioniert, entfernst du am besten die erste Zeile des bisherigen Codes und ersetzt die letzte Zeile durch den Code hier.

gruss
 
Zuletzt bearbeitet:
Wunderbar!
Auch dies funktioniert einwandfrei.
Nochmals Big Thanks luke_the_duke!

Edit: Doch zu früh gefreut. Erst wird alles normal angezeigt aber jetzt bekomm ich diese
Fehlermeldung:

**Warnung** Szene=Scene 1, Ebene=Layer 2, Bild=1:Zeile 112: Der Bezeichner 'xml', bei dem es nicht auf die Groß-/Kleinschreibung ankommt, verdeckt das integrierte Objekt 'XML'.
var xml = new XML();

Anzahl der ActionScript-Fehler: 1 Gemeldete Fehler: 1

Was hab ich falsch gemacht?

Greetz SixxKiller
 
Zuletzt bearbeitet:
Hallo,

du verwendest eine ältere AS-Version und da werden Klassennamen noch nicht auf Gross-/Kleinschreibung überprüft -> mein Fehler.
Am besten ersetzt du jedes Vorkommen von "xml" (Achtung: Nur die kleingeschriebenen Ausdrücke!) durch irgendeinen anderen Variablen-Namen.

gruss
 

Neue Beiträge

Zurück