[NOWE FAQ] czyli co każdy powinien wiedzieć.

[Marek_bf]

Wyjaśnienia i przykłady zawarte w FAQ nie są wyczerpujące i nie rozwiązują wszelkich problemów, które mogą zaistnieć w czasie tworzenia aplikacji. Mają jedynie za zadanie pokazanie użycia pewnych klas, metod, właściwości czy rozwiązań. Reszta, Dogi Użytkowniku zależy od Twojej inwencji.

Już istniejące opisy i przykłady zawarte w FAQ są sukcesywnie rozbudowywane w miarę zaistniałych potrzeb zaobserwowanych na forum. Więc warto do nich wracać, co jakiś czas.


Spis Treści

Instance Name - nazywanie obiektów na scenie i odwoływanie się do nich

LoadVars - pobieranie i wysyłanie danych

MovieClipLoader - ładowanie zewnętrznych plików swf i graficznych

getURL - otwieranie dokumentów w przeglądarce, uruchamianie skryptów oraz przesyłanie zmiennych GET i POST

ExternalInterface - obustronna komunikacja z JavaScript

Date - data i czas

[Marek_bf]

LoadVars

Jak pobrać dane do Flasha i jak wysłać dane z Flasha do skryptu.

Kod: Zaznacz cały

// scieżka pliku
var filePath:String = "load_vars_1.txt";
// 
var myLoadVars:LoadVars = new LoadVars();
// co zrobić po zaladowaniu pliku
// lub, jeśli zaladować sie nie da
myLoadVars.onData = function(str:String) {
	if (str != undefined) {
		my_txt.text = str;
	} else {
		my_txt.text = "Error";
	}
};
// rozpoczęcie połączenia
myLoadVars.load(filePath);
this.stop();

Plik txt

Kod: Zaznacz cały

Lorem ipsum dolor sit amet consectetuer amet dictumst augue Phasellus quis. Rhoncus Suspendisse dapibus interdum Lorem eros pede interdum Praesent Integer Lorem. Felis Pellentesque elit tincidunt auctor Pellentesque interdum sodales elit lorem parturient. Pede leo quis tristique justo quam egestas nibh nibh quis Sed. Sem Vivamus Curabitur et urna pulvinar consectetuer rutrum tortor elit vitae. Sed platea nunc vitae pede justo tristique Nam nibh condimentum.

Dane podzielone na zmienne:

Kod: Zaznacz cały

// scieżka pliku
var filePath:String = "load_vars_2.txt";
// 
var myLoadVars:LoadVars = new LoadVars();
// co zrobić po zaladowaniu pliku
// lub, jeśli zaladować sie nie da
myLoadVars.onLoad = function(success:Boolean) {
	if (success) {
		my_txt.htmlText = this.zmienna1 + "<br>";
		my_txt.htmlText += this.zmienna2 + "<br>";
		my_txt.htmlText += this.zmienna3;
	} else {
		my_txt.htmlText = "Error";
	}
};
// rozpoczęcie połączenia
myLoadVars.load(filePath);
this.stop();

Plik txt:

Kod: Zaznacz cały

zmienna1=a&zmienna2=b&zmienna3=c

Komunikacja pomiedzy Flashem i PHP

Kod: Zaznacz cały

// zapytanie
var query:String = "name";
// pusta tablica na dane
var myData:Array = new Array();
// adres pliku PHP
var filePath:String = "load_vars_3.php";
// dwie kopie obiektu LoadvVars
// mySend wysyła dane do PHP
// myLoad odbiera dane z PHP
var mySend:LoadVars = new LoadVars();
var myLoad:LoadVars = new LoadVars();
// przesłanie zapytania do obiektu load vars
mySend.query = query;
// oczekiwanie odpowiedzi z PHP i formatowanie otrzymanych danych
myLoad.onData = function(str:String) {
	if (str != undefined) {
		my_txt.htmlText = "<b>Zapytanie: </b>" + query + "<br>";
		my_txt.htmlText += "<b>Otrzymany string: </b>" + str + "<br>";
		my_txt.htmlText += "------------- stablicowane dane: -------------<br>";
		// rozbijam otrzymany string na tablicę
		myData = str.split("|");
		// usuwam ostatni element tablicy gdyz jest on pusty
		// można to zrobic w pliku PHP usuwając ostatni znak
		// (separator) z przesyłanego łańcucha
		myData.pop();
		my_txt.htmlText += "<b>Długość tablicy: </b>" + myData.length + "<br>";
		my_txt.htmlText += "<b>Zawartość tablicy: </b><br>";
		for (var i = 0; i < myData.length; i++) {
			my_txt.htmlText += "          myData[" + i + "] = " + myData[i] + "<br>";
		}
	} else {
		my_txt.htmlText = "Error";
	}
};
// wysyłam dane do PHP i odbieram dane z PHP
mySend.sendAndLoad(filePath, myLoad, "POST");

Plik PHP:

[php]<?php
$query = $_POST['query'];
//
$myArray['name'] = array('Jacek', 'Anna', 'Maciek');
$myArray['age'] = array('30', '28', '3');
$myArray['weight'] = array('76', '48', '15');
//
if(isset($query)){
foreach ($myArray[$query] as $value) {
$output .= $value.'|';
}
echo $output;
}
?>[/php]

Materiały:
www.webinside.pl/materialy/rozne/load_vars.rar
www.webinside.pl/materialy/rozne/load_vars_2.rar

[Marek_bf]

MovieClipLoader

MCL służy od wczytywania zewnętrznych plików typu: SWF, JPEG, GIF i PNG do innego swf.

Najprostsze zastosowanie:

Kod: Zaznacz cały

// adres pliku
var filePath:String = "ladowany_1.png";
var mclListener:Object = new Object();
// tworzę pusty MC do którego będę wczytywał pliki
this.createEmptyMovieClip("containerMc", my_mc.getNextHighestDepth());
// tworzę obiekt MovieClipLoader
var image_mcl:MovieClipLoader = new MovieClipLoader();
//przypisuje obiektowi MCL słuchacza
image_mcl.addListener(mclListener);
// rozpoczynam pobieranie
// wskazanago pliku do wskazanego MC
image_mcl.loadClip(filePath, containerMc);
this.stop();

Bardziej rozbudowana opcja z preloaderem

Kod: Zaznacz cały

// adres pliku
var filePath:String = "ladowany_2.swf";
// zatrzymuję i chowam progress bar
progressMc.stop();
progressMc._visible = false;
// podpisuje button
ladujBtn.infoTxt.text = "ŁADUJ";
// poprzez kliknięcie buttona rozpoczynam pobieranie
// wskazanago pliku do wskazanego MC
ladujBtn.onRelease = function() {
	image_mcl.loadClip(filePath, containerMc);
};
// tworzę słuchacza dla MovieClipLoadera
var mclListener:Object = new Object();
// po rozpoczęciu ładowania pokazuje progress bar
mclListener.onLoadStart = function(target_mc:MovieClip) {
	progressMc._visible = true;
};
// w czasie ładowania
mclListener.onLoadProgress = function(target:MovieClip, bytesLoaded:Number, bytesTotal:Number):Void  {
	//obliczam całkowity rozmiat pliku w KB, zaokrąglając wynik
	var bl:Number = Math.floor(bytesLoaded / 1024);
	//obliczam ilość aktualnie pobranych KB, zaokrąglając wynik
	var bt:Number = Math.floor(bytesTotal / 1024);
	// obliczam jaki procent danych jest aktualnie pobrany, , zaokrąglając wynik
	var p:Number = Math.floor((bl / bt) * 100);
	// steruję pozycja odtwarzania MC progressMc na podstawie wartości procentowej
	progressMc.gotoAndStop(p);
	// wyświetlam powyższe wartości
	progressMc.infoTxt.text = "Załadowano: " + p + "% [" + bl + "/" + bt + "KB]";
};
// po zakończeniu ładowania
mclListener.onLoadInit = function(target_mc:MovieClip) {
	// uruchamiam MC imageMc
	// znajdujący się we wczytywanym swf
	target_mc.imageMc.play();
	// ukrywam progress bar
	progressMc._visible = false;
};
// tworzę obiekt MovieClipLoader
var image_mcl:MovieClipLoader = new MovieClipLoader();
//przypisuje obiektowi MCL słuchacza
image_mcl.addListener(mclListener);
this.stop();

Materiały:
www.webinside.pl/materialy/rozne/movie_clip_loader.rar

[Marek_bf]

getURL


Akcja służy do otwierania dokumentu o podanym adresie, może też za pomocą przesłanych zmiennych komunikować się ze skryptami lub wywoływać skrypty np. JavaScript.

Można użyć jej jako funkcji globalnej:

getURL(parametry)
Lub jako metody movieclipa
MovieClip.getURL(parametry)

Funkcja przyjmuje trzy parametry, adres dokumentu, okno docelowe (_blank, _parent, _self, _top) i metodę przesyłu danych (GET, POST).

Zazwyczaj używa się jej po prostu do otwarcia nowej strony:

Kod: Zaznacz cały

getURL("http://www.strona.pl/", "_blank");
getURL("kontakt.html", "_self");

Co jest odpowiednikiem HTML’owego:

[xml]<a href="http://www.strona.pl" target="_blank">Klik</a>
<a href="kontakt.html" target="_self">Klik</a>[/xml]

Można też do adresu dołączyć zmienne z parametrami

Kod: Zaznacz cały

getURL("http://www.strona.pl?page=kontakt&id=1", "_self");

A skoro mowa o parametrach to istnieje ciekawa możliwość ich przesyłania właśnie poprzez metodę getURL movieclipu.

Tworzymy nowy pusty MC mający za zadanie przechowywać zmienne i ich wartości.
Następnie za pomocą metody przesyłamy te zmienne w adresie, metodą GET :

Kod: Zaznacz cały

var myVarsMc:MovieClip = this.createEmptyMovieClip("myVarsMc", this.getNextHighestDepth());
myVarsMc.page=kontakt;
myVarsMc.id=1;
myBtn.onRelease = function() {
	myVarsMc.getURL("http://www.strona.pl", "_self", "GET");
};

Oba powyższe rozwiązania są odpowiednikiem HTML’owego:

[xml]<a href="http://www.strona.pl?page=kontakt&id=1" target="_blank">Klik</a>[/xml]

A teraz to samo tylko metodą POST,

Kod: Zaznacz cały

var myVarsMc:MovieClip = this.createEmptyMovieClip("myVarsMc", this.getNextHighestDepth());
myVarsMc.page=kontakt;
myVarsMc.id=1;
myBtn.onRelease = function() {
	myVarsMc.getURL("http://www.strona.pl", "_self", "POST");
};

jest to odpowiednik HTML’owego formularza:

[xml]<form action="http://www.strona.pl" method="post" target="_self">
<input type="hidden" name="page" value="kontakt">
<input type="hidden" name="id" value="1">
<input type="submit" value="OK">
</form>[/xml]

Można też użyć mieszania metod przesyłania:

Kod: Zaznacz cały

var myVarsMc:MovieClip = this.createEmptyMovieClip("myVarsMc", this.getNextHighestDepth());
sendBtn.onRelease = function() {
	if (Boolean(imieInpTxt.text) && Boolean(nazwiskoInpTxt.text)) {
		myVarsMc.imie = imieInpTxt.text;
		myVarsMc.nazwisko = nazwiskoInpTxt.text;
		myVarsMc.getURL("get_url_1.php?id=1", "_self", "POST");
	}
};

Jest to odpowiednikiem HTML’owego formularza:

[xml]<form action="get_url_1.php?id=1" method="post" target="_self">
<input type="text" name="imie">
<input type="text" name="nazwisko">
<input type="submit" value="OK">
</form>[/xml]

Za pomocą getURL można również wywoływać skrypty JavaScript

Na przykład standardowy alert

Kod: Zaznacz cały

var myVariable:String = "Hello";
sendBtn1.onRelease = function() {
	getURL("javascript:window.alert('" + myVariable + "')");
};

Lub własna funkcję JS

Kod: Zaznacz cały

sendBtn2.onRelease = function() {
	getURL("javascript:foo(1, 3)");
};

Plik JS:

Kod: Zaznacz cały

function foo(num1, num2){
	var out = num1 + num2;
	window.alert(num1 + " + " + num2 + " = " + out);
}

Aby aplikacje działały prawidłowo trzeba pozwolić Flashowi uruchamiać skrypty. Robimy to wstawiając w kod osadzający Flasha ten kod:

[xml]<param name="allowScriptAccess" value="always">[/xml]

Wszystkie powyższe przykłady powinno się testować z serwera.

Materiały:
www.webinside.pl/materialy/rozne/get_url.rar

[Marek_bf]

ExternalInterface

Umożliwia dwustronną komunikację pomiędzy AS i JS

Aby programy działały prawidłowo trzeba pozwolić Flashowi uruchamiać skrypty. Robimy to wstawiając w kod osadzający Flasha ten kod:

[xml]<param name="allowScriptAccess" value="always">[/xml]

Wywołanie funkcji JS z Flasha:

Kod: Zaznacz cały

import flash.external.*;
ExternalInterface.call("foo", 1, 3);

Plik JS:

Kod: Zaznacz cały

function foo(num1, num2){
	var out = num1 + num2;
	window.alert(num1 + " + " + num2 + " = " + out);
}

Wywołanie funkcji AS z JS:

Kod: Zaznacz cały

import flash.external.*;
ExternalInterface.addCallback("fooAS", null, foo);
function foo() {
	// kod do wykonania
}

Plik JS:

Kod: Zaznacz cały

function fooJS(){
  var flash = document.getElementById("external_interface_2");
  flash.fooAS()	
}

Osadzenie Flasha z nadaniem ID:

[xml]<object data="external_interface_2.swf" width="350" height="200" type="application/x-shockwave-flash" id="external_interface_2">
<param name="allowScriptAccess" value="always">
<param name="movie" value="external_interface_2.swf">
<param name="bgcolor" value="#ffffff">
</object>[/xml]

Wywołanie:

[xml]<a href="#" onClick="return fooJS()">Klik</a>[/xml]

Wywoływanie metody obiektu Flasha z JS (np. play i stop dla wybranego mc):

Kod: Zaznacz cały

import flash.external.*;
ExternalInterface.addCallback("fooASplay", myMc, play);
ExternalInterface.addCallback("fooASstop", myMc, stop);
myMc.stop();

Plik JS:

Kod: Zaznacz cały

function fooJSplay(){
  var flash = document.getElementById("external_interface_3");
  flash.fooASplay()	
}
function fooJSstop(){
  var flash = document.getElementById("external_interface_3");
  flash.fooASstop()	
}

Osadzenie Flasha z nadaniem ID:

[xml]<object data="external_interface_3.swf" width="350" height="200" type="application/x-shockwave-flash" id="external_interface_3">
<param name="allowScriptAccess" value="always">
<param name="movie" value="external_interface_3.swf">
<param name="bgcolor" value="#ffffff">
</object>[/xml]

Wywołanie:

[xml]<a href="#" onClick="return fooJSplay()">Play</a>
<a href="#" onClick="return fooJSstop()">Stop</a>[/xml]

Wszystkie powyższe przykłady powinno się testować z serwera.

Materiały:
www.webinside.pl/materialy/rozne/external_interface.rar

[Marek_bf]

Instance Name

Żeby za pomocą ActionScript odwoływać się do kopii obiektu umieszczonego na timeline należy nadać mu unikalną nazwę. Robimy to wpisując unikalny ciąg znaków w pole Instance Name.

Przy nadawaniu nazwy powinno pamiętać się o ogólnych zasadach programistycznych.
- nie powinna zaczynać się od cyfry
- nie powinna zawierać w sobie narodowych znaków diakrytycznych (ogonków)
- nie powinna zawierać w sobie spacji
- nie można używać nazw zarezerwowanych przez Flasha np. nazwy klas czy matod


Zaznaczamy kliknięciem myszki wybrany klon obiektu,



Przechodzimy do panelu Properties, domyślnie jest on umieszczony na dole okna programu. Jeśli go nie ma trzeba go uaktywnić za pomocą kombinacji klawiszy CTRL +F3.

Odszukujemy w panelu pola input z treścią <Instancje Name>



Wpisujemy w tym polu nazwę dla naszego klonu, w tym przypadku myBtn


Zaznaczamy na timeline klatkę, w której wpiszemy akcję



Należy pamiętać, że akcje obiektów muszą być przypisywane w klatkach, w których te obiekty istnieją. Jeśli nasz obiekt umieścilibyśmy w klatce nr 2 a kod do niego się odnoszący w klatce 1 to kod nie zadziałałby z tej prostej przyczyny ze dla niego obiekt jeszcze nie istnieje.

Po zaznaczeniu klatki otwieramy panel akcji (F9)



Wpisujemy kod:

Kod: Zaznacz cały

myBtn.onRelease = function() {
	trace(this._name);
};

Czyli do kopii obiektu na scenie, za pomocą nadanej nazwy (myBtn), przypisaliśmy uchwyt zdarzenia (onRelease).

Materiały:
www.webinside.pl/materialy/rozne/instance_name_1.rar

[Marek_bf]

Date

Obiekt Date pozwala operować czasem i datą. Trzeba jednak zaznaczyć, że działa on na podstawie czasu (zegara) komputera, na którym uruchomiony jest film Flasha. Czyli w miarę różnic, na różnych maszynach będzie on inny. Jednak nawet w tym przypadku może mieć wiele zastosowań. Choćby do sterowania aplikacja w czasie jej trwania, do kalkulatorów czasu, do monitorowania zachowań w czasie itp. itd.

Kod: Zaznacz cały

// tworzy obiekt daty
var myDate:Date = new Date();
// rok w postaci nnnn
var rok:Number = myDate.getFullYear();
// nr miesiąca w postaci 0 1 2 3 4 5 6 7 8 9 10 11
// dlatego aby uzyskać faktyczny nr miesiąca dodajemy 1
var miesiac:Number = myDate.getMonth() + 1;
// dzien miesiaca
var dzienMiesiaca:Number = myDate.getDate();
// dzien tygodnia 0 1 2 3 4 5 6
// niedziela to 0 sobota 6
var dzienTygodnia:Number = myDate.getDay();
// robimy sobie operator warunkowy który
// jeśli dzień tygodnia to 0 czyli niedziela
// zmieni 0 na 7
dzienTygodnia = dzienTygodnia == 0 ? 7 : dzienTygodnia;
// godzina
var godzina:Number = myDate.getHours();
// minuta
var minuta:Number = myDate.getMinutes();
// sekunda
var sekunda:Number = myDate.getSeconds();
// milisekunda
var miliSekundyCzasu:Number = myDate.getMilliseconds();
// liczba milisekund od roku 1970
// czas uniksowy
// http://pl.wikipedia.org/wiki/EPOCH
var miliSekundyDaty:Number = myDate.getTime();
///////////////////////////////
// odczytujemy testowo poprzez trace
trace("Rok: " + rok);
trace("Miesiąc: " + miesiac);
trace("Dzień miesiąca: " + dzienMiesiaca);
trace("Dzień tygodnia: " + dzienTygodnia);
trace("Godzina: " + godzina);
trace("Minuta: " + minuta);
trace("Sekunda: " + sekunda);
trace("Milisekunda czasu: " + miliSekundyCzasu);
trace("Milisekunda daty: " + miliSekundyDaty + " milisekund upłynelo od roku 1970");

Flash sam nie wstawi zer wiodących, więc warto podczas wyświetlania daty samemu o to zadbać:

Niezbyt ładnie zaprezentuje się wyświetlana data i czas, gdy miesiące, dni, godziny, minuty lub sekundy będą mniejsze niż 10

Kod: Zaznacz cały

var myDate:Date = new Date();
var rok:Number = myDate.getFullYear();
var miesiac:Number = myDate.getMonth() + 1;
var dzienMiesiaca:Number = myDate.getDate();
var godzina:Number = myDate.getHours();
var minuta:Number = myDate.getMinutes();
var sekunda:Number = myDate.getSeconds();
// odczytujemy testowo poprzez trace
trace(rok + "." + miesiac + "." + dzienMiesiaca + " - " + godzina + ":" + minuta + ":" + sekunda);

Żeby wszystko miało ręce i nogi dodajemy zera wiodące do tego celu stworzymy funkcję aby nie powielać niepotrzebnie kodu:

Kod: Zaznacz cały

var myDate:Date = new Date();
var rok:Number = myDate.getFullYear();
var miesiac:Number = myDate.getMonth() + 1;
var dzienMiesiaca:Number = myDate.getDate();
var godzina:Number = myDate.getHours();
var minuta:Number = myDate.getMinutes();
var sekunda:Number = myDate.getSeconds();
trace(rok + "." + dodajZera(miesiac) + "." + dodajZera(dzienMiesiaca) + " - " + dodajZera(godzina) + ":" + dodajZera(minuta) + ":" + dodajZera(sekunda));
// funkcja dodająca zera wiodące
function dodajZera(num:Number):String {
	return String(num < 10 ? "0" + String(num) : num);
}

Aby czas wyświetlany, był cały czas uaktualniany, trzeba odczytywać go w pewnych interwałach.

Kod: Zaznacz cały

// co 500ms wywolujemy funkcje wyswietlDate
// tym samym odswierzając datę i czas
var intervalID:Number = setInterval(wyswietlDate, 500, myTxt);
// funkcja wyswietlajaca czas
function wyswietlDate(myTextField:TextField):Void {
	var myDate:Date = new Date();
	var rok:Number = myDate.getFullYear();
	var miesiac:Number = myDate.getMonth() + 1;
	var dzienMiesiaca:Number = myDate.getDate();
	var godzina:Number = myDate.getHours();
	var minuta:Number = myDate.getMinutes();
	var sekunda:Number = myDate.getSeconds();
	myTextField.text = rok + "." + dodajZera(miesiac) + "." + dodajZera(dzienMiesiaca) + " - " + dodajZera(godzina) + ":" + dodajZera(minuta) + ":" + dodajZera(sekunda);
}
// funkcja dodająca zera wiodące
function dodajZera(num:Number):String {
	return String(num < 10 ? "0" + String(num) : num);
}

Materiały:
http://www.webinside.pl/materialy/rozne/date.rar