Flex – garść porad
Jakiś czas temu rozważałem wprowadzenie Flexa do sklepu internetowego z tuszami (nawet zrobiłem dwie tabelki do pokazywania rekordów), ale ostatecznie pomysł upadł. Niedawno zostałem poproszony o napisanie odtwarzacza filmów na stronę www. Przysiadłem do dokumentacji, ściągnąłem SDK (numer 4, żeby być na czasie) oraz Eclipse. Wtyczek do Ecplise nie udało mi się znaleźć, więc stosując się do porad na stronie http://www.roseindia.net/flex/compiling_flex_on_eclipse.shtml podpiąłem kompilator do edytora. Rozwiązanie nie jest zbyt poręczne, ale wystarcza.
Lista w xml
Odtwarzacz powinien mieć playlistę. Najłatwiej podpiąć ją pod mx:httpservice (result_handler), ale pojawia się problem przy pojedynczym elemencie na liście. W przykładach znaleźć można odwołanie do ArrayCollection, co działa tylko i wyłącznie dla większej liczby wpisów w xml. W takim przypadku należy sprawdzić czy wynik pobrany z xml jest tablicą, a jeśli nie, to odpowiednio zareagować.
W razie problemów z dostępem do zdalnego adresu (dotyczy to głównie zapisu danych) należy wgrać do głównego katalogu docelowego serwera plik crossdomain.xml o treści:
<?xml version="1.0"?> <!DOCTYPE cross-domain-policy SYSTEM "http://www.macromedia.com/xml/dtds/cross-domain-policy.dtd"> <cross-domain-policy> <allow-access-from domain="domena.z.flashową.animacją" /> </cross-domain-policy>
Flash sprawdza istnienie oraz zawartość tego pliku i na tej podstawie decyduje czy należy wysłać treść.
Własny ProgressBar
Nie udało mi się znaleźć odpowiedzi na pytanie jak zrobić pasek postępu podobny do tego na YT (dwa w jednym: postęp pobierania i postęp odtwarzania). Zrobiłem zatem własny pasek. Canvas główny, do niego wstawione dwa canvasy o zmiennej szerokości i o ustawionym kolorze tła (+alpha). Zmiana szerokości canvasów uzależniona od zdarzeń generowanych przez mx:videodisplay:
IFrame
Osadzanie html we flashu nie należy do najłatwiejszych (nawet na stronie Tour de Flex widać, że coś nie gra – albo jest to wina przeglądarki). Najlepiej działa starsza wersja flexi-frame, jednak trzeba wykonać drobną modyfikację. Funkcja zmieniająca widoczność nie chce zbytnio współpracować, więc koniecznie jest dopisanie własnych funkcji robiących co należy. Ramkę można odpalić także w trybie run-time:
import IFrame ; // plik IFrame.as w tym samym katalogu co aplikacja.mxml
private var googleIFrame : IFrame ;
...
try {
googleIFrame = new IFrame() ;
googleIFrame.source = "http://ADRES_DO_POKAZANIA" ;
googleIFrame.width = 460 ;
googleIFrame.height = 64 ;
googleIFrame.id = "googleIF" ;
ELEMENT_RODZICIELSKI.addChild( googleIFrame ) ;
googleIFrame.show() ;
}
catch( err:Error ) {
Alert.show( 'exception '+err.message ) ;
}
Jest jeszcze mała niedogodność. Przy dynamicznie uzupełnianych stronach (treść pojawiająca się na długo po załadowaniu flasha) położenie IFrame może nie zgadzać się z położeniem animacji. Wystąpić może nawet taka sytuacja, że IFrame wyląduje na samym dole strony. Być może rozwiązaniem jest odczekanie zadanego czasu. Javascript do odczytu bezwzględnej pozycji x i y, do tego styl obiektu ustawiony na display: block i położenie ramki wewnątrz flexa użyte jako offset. Odpalamy we flashu funkcję js odczytującą położenie animacji na stronie, dodajemy do tego współrzędne wewnętrzne ramki i gotowe.
Osadzanie obrazków
Obrazki mogą być czytane z zadanego katalogu (także zdalnego), albo osadzone wewnątrz flasha (mniej plików, łatwiej zapanować nad całością). Osadzenie nie jest celem samym w sobie, ponieważ dobrze by było móc odwoływać się do takich obrazków (np. zmienić obrazek „play” na „pause”).
[Embed(source="logo.png")] [Bindable] private var logo:Class;
Pierwsza linijka określa plik, który należy dołączyć do wygenerowanego pliku. Druga i trzecia linijka dowiązują wstawiony obrazek do zmiennej. W tym przypadku będzie można odwoływać się do obrazka poprzez {logo}:
<mx:Image x="250" y="5" source="{logo}" />
Suwaki
Niekiedy nie jest wskazane, żeby pokazywały się suwaki w boksach, czy w samej animacji. Wyłączenie sprowadza się do dodania do elementów odpowiednich atrybutów. To samo dotyczy aplikacji:
horizontalScrollPolicy="off" verticalScrollPolicy="off"
Nawet jeśli coś wyjdzie poza widoczny obszar, to nie spowoduje przepełnienia roboczego obszaru.
exception #2060
Jeśli w kodzie mamy odwołania do javascriptu poprzez ExternalInterface.call(), to należy upewnić się, że osadzony flash ma dopisane odpowiednie parametry:
<param name="allowscriptaccess" value="always" />...<embed allowscriptaccess="always" ...
Javascript w środku Flexa
Istnieje możliwość wstawienia javascriptu do środka tworzonej aplikacji. Dzięki temu nie trzeba robić niczego z kodem strony. Przykładowo:
private static var FUNCTION_FULLMOVIEOP:String =
"document.insertScript = function ()" +
"{ " +
"if (document.fullmovieop==null)" +
"{" +
"fullmovieop = function(movie_id) " +
"{" +
"var okno = window.open ('http://ADRES_STRONY',\"mywindow\",\"location=0,status=0,scrollbars=0,fullscreen=yes\");" +
"}" +
"}" +
"}";
private function fullScreen():void {
ExternalInterface.call(FUNCTION_FULLMOVIEOP);
ExternalInterface.call("fullmovieop", mx.core.FlexGlobals.topLevelApplication.parameters.id);
}
Po wywołaniu funkcji fullScreen() do kodu strony wstrzyknięty zostanie javascript zawierający funkcję fullmovieop, a następnie wykonana zostanie ta nowa funkcja. Lista parametrów dla javascriptowej funkcji przekazywana jest po przecinku:
ExternalInterface.call("FUNKCJA", [parametr[,parametr[,parametr...]]] ) ;
Dodaj komentarz