Standardowy edytor TinyMCE, włączony do Joomla!, czyni z osadzania animacji flash w artykułach czynność banalną. Wystarczy bowiem wskazać w treści artykułu miejsce, w którym chcemy osadzić animację, kliknąć przycisk Media, a następnie - w oknie dialogowym - wpisać lub wybrać odpowiednie parametry prezentacji:
Naciśnięcie ikony Media spowoduje otwarcie okna dialogowego z dwoma kartami ustawień: Podstawowe i Rozszerzone. Na karcie ustawień podstawowych określamy:
- Typ: rodzaj obiektu; mamy tutaj do wyboru cztery formaty: Flash, Quicktime, Shockvawe (Director), Windows Media oraz Real media.
- Plik/Adres: określamy względną ścieżkę do pliku lub pełny adres internetowy (URL),
- Wymiary: ustalamy w pikselach co najmniej szerokość; możemy zarządzić zachowanie proporcji, zaznaczając pole wyboru obok.
Jeśli teraz naciśniemy przycisk Wstaw, w oknie edytora pojawi się żółtą ramka z ikoną sygnalizującą plik flasha.
Klikając w przyborniku przycisk Podgląd, możemy się przekonać, że poczynione dotychczas ustawienia spowodują wyświetlenie animacji:
Kliknijmy umieszczony poniżej edytora przycisk Przełącz edytor, aby podejrzeć wygenerowany kod:
<object style="width: 350px; height: 100px;" width="350" height="100" data="images/stories/swf/flesz.swf" type="application/x-shockwave-flash">
<param name="src" value="images/stories/swf/flesz.swf" />
</object>
Jak widać powyżej, animacja została osadzona za pomocą przewidzianych do tego celu zarówno w HTML, jak i XHTML znaczników object oraz param. Znacznikowi object przypisano pięć atrybutów:
- data: wskazujący ścieżkę do osadzanego pliku,
- type: precyzujący rodzaj pliku (typ MIME)
- width: określający szerokość obiektu,
- height: określający wysokość obiektu,
- style: powtarzający określoną w odrębnych atrybutach szerokość i wysokość obiektu.
Co ciekawe, nawet jeśli usuniemy niepotrzebne powtórzenia, to i tak zostaną one automatycznie dodane przez TinyMCE.
Wewnątrz został osadzony znacznik param z dwoma atrybutami:
- name, określający nazwę atrybutu, w tym przypadku src, a więc ścieżkę do pliku
- value, precyzujący wartość parametru
Osadzony tym sposobem obiekt flash wyświetlany jest poprawnie we wszystkich najnowszych wydaniach popularnych przeglądarek (przetestowane w Windows: Firefox 3.6.2, Internet Explorer 8.0, Opera 10.51, Safari 4.0.4 czy Google Chrome 4.1.249.1045). Spośród wymienionych Opera nie wyświetla animacji, pozostawiając użytkownikowi decyzję o uaktywnieniu wtyczki, nawet jeśli jest zainstalowana:
W oknie dialogowym edytora TinyMCE można też ustawić kilka dodatkowych parametrów prezentacji:
Karta ustawień rozszerzonych umożliwia sprecyzowanie ustawień większości, bo aż 16 parametrów prezentacji:
Na marginesie - przyznam, że każda publikacja tłumaczenia do edytora TinyMCE czy JCE jest dla mnie źródłem sporych wątpliwości: czy tłumaczyć nazwy parametrów na zrozumiałe dla "zwykłego użytkownika" komputera, czy też pozostawiać angielskie nazwy parametrów, niekoniecznie zrozumiałe dla przeciętnego użytkownika, ale oczywiste dla obeznanych z HTML.
- Id [id]: unikalny identyfikator, który można wykorzystać w skryptach oraz w arkuszu stylów CSS, aby odwołać się do obiektu; powinien zaczynać się od litery lub znaku "_" - w kodzie HTML jest atrybutem opisującym znacznik object,
- Nazwa [name]: jak id - unikalny identyfikator obiektu, umieszczany jako wartość atrybutu name w znaczniku param, może być wykorzystany np. w skryptach JavaScript albo VBScript, powinien być taki sam, jak id, zaczynać się od litery lub znaku "_"
- Wyrównanie [align]: określa położenie obszaru przeznaczonego na animację w stosunku do elementu obejmującego; w kodzie HTML umieszczany jako wartość atrybutu align w znaczniku param, może przybierać jedną z czterech wartości lewa (w kodzie l) - przy lewej krawędzi obszaru, w którym umieszczono prezentację, góra (w kodzie t) - przy górnej krawędzi obszaru, w którym umieszczono prezentację, prawa (w kodzie r) - przy prawej krawędzi obszaru, w którym umieszczono prezentację, dół (w kodzie b) - przy dolnej krawędzi obszaru, w którym umieszczono prezentację,
- Kolor tła [bgcolor]: określa kolor tła animacji, zastępuje (nadpisuje) kolor tła określony w kodzie animacji, ale nie ma wpływu na kolor tła samego dokumentu html; kolor wybieramy z próbnika lub określamy kodem w formacie szesnastkowym (np. #RRGGBB) - pierwsze dwie cyfry to wartość barwy czerwonej, następne dwie to barwa zielona, a ostatnia para to barwa niebieska; w kodzie HTML tło jest wartością atrybutu bgcolor w znaczniku param,
- Odstępy obok [hspace]: określa minimalną odległość w poziomie od elementów umieszczonych obok; w kodzie HTML umieszczany jako wartość atrybutu hspace w znaczniku param
- Odstępy nad i pod [vspace]: określa minimalną odległość w pionie od elementów umieszczonych nad i pod obiektem flash; w kodzie HTML umieszczany jako wartość atrybutu vspace w znaczniku param
- Jakość [quality]: określa poziom wygładzania krawędzi (antyaliasingu) elementów graficznych, w kodzie HTML umieszczany jako wartość atrybutu quality w znaczniku param; może przybrać jedną z sześciu wartości:
- low: niska jakość, wyłączony antyaliasing,
- autolow: automatyczne ustalanie jakości począwszy od niskiej na początku prezentacji - antyaliasing jest wyłączony (jak w low), a jeśli procesor potrafi odtworzyć animację z zadaną prędkością klatek, następuje włączenie antyaliasingu i przejście do jakości high
- autohigh'': automatyczne ustalanie jakości począwszy od wysokiej na początku prezentacji - - antyaliasing jest włączony jak w high), ale jeśli procesor nie potrafi odtworzyć animacji z zadaną prędkością klatek, antyaliasing zostaje wyłączony, prezentacja wyświetlana jest w jakości low
- medium: średnia jakość, antyaliasing jest włączony, ale wygładzane są jedynie kształty i tekst, nie są wygładzane bitmapy,
- high: wysoka jakość - antyaliasing jest włączony, jeśli plik zawiera bitmapy i nie zawiera animacji, to bitmapy są wygładzane; jeśli plik zawiera animacje, bitmapy nie są wygładzane; opcja domyślna
- best: najlepsza jakość - antyaliasing jest włączony, a wygładzanie bitmap następuje bez względu na to, czy plik zawiera animacje.
- Skala [scale]: określa dopasowanie wielkości prezentacji do wielkości obszaru przeznaczonego na prezentację, w kodzie HTML umieszczany jako wartość atrybutu scale w znaczniku param, może przybrać jedną z czterech poniższych wartości:
- showall: obiekt zostanie przeskalowany do nowych wymiarów proporcjonalnie tak, aby animacja była w całości widoczna w obszarze przeznaczonym na prezentację (ustawienie domyślne),
- exactfit: obiekt zostanie przeskalowany i dopasowany do wymiarów obszaru przeznaczonego na prezentację tak, aby był widoczny w całości i wypełniał cały obszar, ale proporcje nie zostaną zachowane
- noborder: bez ograniczenia - obiekt nie zostanie przeskalowany; jeśli nie zmieści się w oknie lub wyznaczonym obszarze, zostanie przycięta
- noscale: bez skalowania
- Tryb okna [wmode]: decyduje o możliwości pozycjonowania obiektu własnością z-index oraz przezroczystości tła animacji, w kodzie HTML umieszczany jako jedna z trzech możliwych wartości atrybutu wmode w znaczniku param:
- window: opcja domyślna, obiekt zajmuje w dokumencie własną przestrzeń (okno), nad obiektem flash nie można umieścić innego obiektu (obiektu nie można spozycjonować własnością z-index)
- opaque: obiekt można spozycjonować własnością z-index, przenosząc inne elementy pod animację Flash - nieprzezroczyste tło obszaru animacji spowoduje, że obiekty poniżej nie będą widoczne
- transparent: : obiekt można spozycjonować własnością z-index, ale przezroczyste tło odsłoni częściowo elementy umieszczone na niższych warstwach niż obiekt Flash,
- Dopasowanie [salign]: określa położenie animacji w obszarze wyznaczonym przez atrybuty width i height, w kodzie HTML umieszczany jako jedna z 8 możliwych wartości atrybutu salign w znaczniku param:
- tl: góra lewa - przy górnej i lewej krawędzi
- tr: góra prawa - przy górnej i prawej krawędzi
- bl: dół lewa - przy dolnej i lewej krawędzi
- br: dół prawa - przy dolnej i prawej krawędzi
- l: lewa - przy lewej krawędzi
- t: góra - przy górnej krawędzi
- r: prawa - przy prawej krawędzi
- b: dół - przy dolnej krawędzi
- Odtwarzaj [play]: decyduje, czy animacja zostanie odtworzona zaraz po załadowaniu, w kodzie HTML umieszczany jako wartość true lub false atrybutu play w znaczniku param; TinyMCE pomija param w przypadku wartości domyślnej true.
- Powtarzaj [loop]: określa, czy animacja powinna być odtwarzana w nieskończoność (true), czy tylko jeden raz (flalse); podobnie jak w przypadku poprzedniej własności TinyMCE pomija param w przypadku wartości domyślnej (true)
- Pokaż menu [menu]: określa czy po kliknięciu prawego przycisku myszki, której wskaźnik znajduje się nad prezentacją, pojawi się podręczne menu, w kodzie HTML umieszczany jako wartość true lub false atrybutu menu w znaczniku param; TinyMCE pomija param w przypadku wartości domyślnej true.
- Łącz z JavaScript [swliveconnect]: decyduje o możliwości komunikowania się z aplikacją flash za pomocą JavaScript, w kodzie HTML umieszczany jako wartość true lub false atrybutu swliveconnect w znaczniku param;
- Adres bazowy [base]: umożliwia określenie lokalizacji plików Flasha na dysku serwera lub w sieci w przypadku, gdy znajdują się one poza głównym katalogiem witryny, w kodzie HTML umieszczany jako wartość atrybutu base w znaczniku param;
- Zmienne flash [flashvars]: umożliwia przekazanie do kodu animacji zmiennych, wartościami flashvars w znaczniku param są pary nazwa_zmiennej=wartość połączone znakiem "&", znaki specjalne powinny być przedstawione sekwencją złożoną ze znaku procenta (%) oraz 2-cyfrowego kodu szesnastkowego, czyli tak jak w adresach URL.
Oto przykładowy kod wygenerowany przez TinyMCE:
<object id="flesz01" style="width: 350px; height: 100px;" width="350" height="100" data="images/stories/swf/flesz.swf" type="application/x-shockwave-flash">
<param name="play" value="false" />
<param name="loop" value="false" />
<param name="menu" value="false" />
<param name="swliveconnect" value="true" />
<param name="quality" value="autolow" />
<param name="scale" value="showall" />
<param name="salign" value="tl" />
<param name="wmode" value="transparent" />
<param name="base" value="http://localhost/!__testowa/" />
<param name="flashvars" value="zmienna1=wartosc_zmiennej1&zmienna2=wartosc_zmiennej2" />
<param name="name" value="flesz01" />
<param name="src" value="images/stories/swf/flesz.swf" />
<param name="align" value="left" />
<param name="bgcolor" value="#ffffff" />
<param name="vspace" value="5" />
<param name="hspace" value="5" />
</object>
