© Copyright 2002 A List Apart Magazine, Drew McLellan, аll rights reserved
Превод: Боби Димитров и Ради Хаджирадев | Последна промяна: 26.07.2004
Macromedia Flash винаги е имал възможност на генерира HTML страница, която съдържа flash филм. Отначало беше инструмент, наречен AfterShock. След пускането на Flash 4, авторите можеха да експортират HTML страници с вградени филмчета чрез самия Flash. Macromedia Flash вгражда филмчетата, чрез:
<object
classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"
width="400" height="300" id="movie" align="">
<param name="movie" value="movie.swf">
<embed src="movie.swf" quality="high" width="400"
height="300" name="movie" align=""
type="application/x-shockwave-flash"
plug inspage="http://www.macromedia.com/go/getflashplayer">
</object>
Както виждате, кодът изглежда като някакво чудовище. Два главни тага вграждат филмчето и изискват да декларирате всяка стойност по два пъти. Internet Explorer във всичките му варианти използва единия таг, а Netscape и подобните нему браузъри - другия. Това наричам методът "Двустранно запичане". Ето какво имам предвид.
Тагът <object> е част от XHTML спецификацията, но в случая е използван неправилно. Браузърите тип IE го използват, за да заредят в паметта Flash Player и да отворят в него съответното Flash филмче. lt;param> е неговия пръв приятел, използван за подаване на произволен брой параметри към Flash Player след стартирането му.
Тагът <embed> не е част от XHTML спецификацията и ще попречи на валидацията на страницата ви. Netscape и други подобни браузъри го използват за да показват Flash филмчета. Параметрите се подават към филмчето като двойки име/стойност, описани в тага.
Netscape създаде <embed> като начин на вграждане на plug-in и плейъри в уеб страниците. Тагът <embed> не е част от XHTML спецификацията, и въпреки, че други браузъри освен Netscape го поддържат, той не е съвместим със стандартите, така че не би трябвало да го ползвате. Чао, чао <embed>... Беше забавно.
Без тага <embed> оставате само с <object>, така че ще е мъдро да разберете пълните му възможности. Добрата новина е, че почти всички браузъри поддържат този таг по един или друг начин. Тагът <object> няма задължителни параметри, но пък има много, който може да използвате. Следват някои от по-интересните, подкрепени с информация от W3C спецификацията:
classid (URI): Този параметър определя местоположението на плейване на обекта чрез URI. Може да го използвате с или като алтернатива на data параметъра(виж по-долу), зависещ от типа на замесения обект.
codebase (URI): Този параметър определя базовия път, използван да реши отнасящите URIs определени от classid, data и archive параметри.
data (URI): Това определя мястото на данни от <object> тага или по-скоро форма на обект, който може да бъде използван за пресъздаването им.
type (content-type): Това определя типа съдържание генериран от data.
codetype (content-type): Това определя типа съдържание на очакваните данни, докато се сваля обекта, определен от classid.
Други параметри позволяват референции към предишни версии, или показване на текст по време на зареждането на филмчето (това вече е възможно и в самият Macromedia Flash (бел. ред.: Авторът говори за preloader.)). Също така съществуват общите параметри като width, height, id и class. Параметрите изредени горе, обаче, са особено интересни когато става въпрос за вграждане на Macromedia Flash филмчета.
Още едно полезно нещо, което научих, е че <object> тага може да съдържа елементи, които може да ползвате като алтернатива, ако браузъра няма възможност да зареди указания в <object> обект. (бел. ред.: Ако например искате да покажете Flash, а посетителя няма инсталиран Flash Player.) Всъщност, точно по този начин нежеланият <embed> таг работи под Netscape.
Въоръжен с повече знания започнах да тествам кода си в различни браузъри. Първата ми стъпка да пробвам кода на Macromedia с премахнат <embed> и преправен до XHTML:
<object
classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"
width="400" height="300">
<param name="movie" value="movie.swf" />
</object>
За нещастие, това просто не работи извън IE. След някои проучвания и търсения в Google открих, че стойността на classid е специфична за ActiveX конфигурациите на браузъра. Всъщност това караше Netscape и Mozillа да игнорират изцяло обекта. Обаче classid има важна функция: казва на браузъра коя версия на Flash Player да използва. Така че не можем просто така да се отървем от него без да го заместим с нещо притежаващо подобна функционалност.
За щастие, по подразбиране на Flash Player е настроен да отговаря на съдържание с MIME application/x-shockwave-flash (бел. ред.: Това ще рече, че когато браузъра срещне такова съдържание се обръща към Flash Player). Това е страхотно, защото параметъра type ви позволява да посочите тип съдържание. В крайна сметка вместо да използвате:
classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
Ползвайте това:
type="application/x-shockwave-flash"
Сама по себе си горната модификация няма да подкара филмчетата под Netscape-базираните браузъри. Следващата любопитност е атрибутът codebase. Той съдържа като стойност път до Flash Player на сървърите на Macromedia. Това, всъщност, е неправилна употреба на този атрибут, защото по спецификация всякакви пътища в него трябва да сочат към същия домейн, а не този на Macromedia - мярка за сигурност.
В много браузъри (основно IE) параметърът codebase извършва още една функция. На края на пътя към сървъра се съдържа текст, който указва коя версия на plug-in-а трябва да достави сървъра (бел. ред.: Например #version=6,0,0,0 за Flash Player 6.0). Ако исканата версия е по-висока от наличната, браузъра ще попита дали потребителя иска да обнови plug-in-а. Проблемът е, този атрибут codebase също така спира възпроизвеждането на Flash в Netscape и Mozilla, така че трябва да го премахнем. По-долу ще дискутираме как да заменим изгубената функционалност. След премахването на codebase опростихме кода до:
<object
type="application/x-shockwave-flash"
width="400" height="300">
<param name="movie" value="movie.swf" />
</object>
Пробвайте този код - отново няма да покаже филмчето под Netscape. След всички тези премеждия започнах да се тревожа, че просто няма начин да доставиш Flash съдържание под Netscape чрез валиден XHTML. Всеки отговор на моите търсения в интернет беше подобен, затова и направих каквото винаги правя в такива моменти - започнах да изпробвам разни щури идеи.
Когато пробвах data параметъра едва не подскочих от радост, защото филмчетата тръгнаха в Netscape и Mozilla. Когато пробвах в IE видях, че и там филмчетата работят:
<object
type="application/x-shockwave-flash" data="movie.swf"
width="400" height="300">
<param name="movie" value="movie.swf" />
</object>
Когато пробвах с по-големи филмчета се появи проблем. Докато във всички останали браузъри нещата бяха добре, то в IE/Windows филмчето тръгваше чак след като се е заредило изцяло. Това не е голям проблем с малки филмчета, но при всички останали липсата на streaming е неприемлива. Стигнах до заключението, че все пак ще е възможно да показва Flash съдържание чрез валиден XHTML, но чак след като Microsoft оправят този проблем с IE за Windows.
Няколко дни по-късно обсъдих проблема с Джефри Зелдман. Той също се заинтересува, защото вече беше срещал проблема в своите проекти. Дискусията ме накара да помисля сериозно и докато си карах към дома изведнъж ме озари решението.
Както казах, единствения проблем беше, че IE изчаква да зареди цялото филмче преди да го пусне, като проблемът е незабележим при малки по размер филми. Затова реших да пробвам да създам малко по размер филмче-контейнер, в първия кадър на което да се зарежда истинското филмче.
Пробвах и стана. Вярно, че това е един вид hack, но въпреки всичко един валиден и оправдан hack, по мое мнение. Най-хубавото е, че няма нужда да създавате отделни контейнери за всяко истинско филмче. Един "умен" контейнер може да върши работа за всички Flash филмчета, които имат еднакви пропорции.
Без значение дали става дума за Flash филмче, телешко, пилешко или свинско, винаги е нужно да го нанижете на шиш и да го топнете в соса, за да стане както трябва. Затова и го нарекохме методът "Flash Соте". (бел. ред.: Виж коментара в края на статията)
Създадох ново Flash филмче и поставих следния ActionScript на първия кадър:
_root.loadMovie(_root.path,0);
Това указва на Flash Player да зареди филмче, чието име е стойността на променливата path. Всичко, което ни е нужно сега, е да се уверим, че името на филмчето, което искаме да заредим е подадено като стойност на променливата path.
Със Flash това е лесно. Flash Player зарежда всяка двойка име/променлива, които са подадени към Flash филмчето като част от URI-то. Това има най-различни интересни приложения, но в нашия случай ще го употребим така:
c.swf?path=movie.swf
Контейнерът се казва c.swf. Предаваме променлива с име path и стойност movie.swf. Това означава, че нашият ActionScript ще стане такъв:
_root.loadMovie("movie.swf",0);
Можете да промените поведението на контейнера както желаете (например да използвате GET и POST за да предавате променливи на филмчето), стига да запазите размера му малък - не повече от няколко килобайта.
Остава ни само да уточним финалния код. Премахнахме много атрибути, добавихме нови и подредихме малко:
<object type="application/x-shockwave-flash"
data="c.swf?path=movie.swf"
width="400" height="300">
<param name="movie"
value="c.swf?path=movie.swf" />
</object>
И така, ето го решението - по-готино, по-леко и като цяло по-добро за околната среда. Но какво стана с функционалността, която загубихме при премахването на атрибута codebase?
Основният проблем, породен от липсата на атрибута codebase е, че с негова помощ IE и подобните браузъри дават възможност на потребителя да обнови своя Flash Player ако е излязла по-нова версия. Това е наистина полезно, тъй като вероятно е единствения начин, по който нормалните потребители си обновяват Flash Player.
Заобиколното решение е просто - просто добавете едно напълно празно и иначе ненужно филмче, в чиято декларация използвайте атрибута codebase. Това ще възстанови загубената функционалност. Това може да не е най-чистия подход, но поне е практичен. (бел. ред.: Това е и най-големият пропуск, най-големият недостатък на този метод. Много хора, обаче, са склонни да го пренебрегнат, тъй като се смята, въз основа на данни от проучвания, че потребителите вече сами се грижат да имат последна (или поне актуална) версия на Flash Player инсталиран)
Помните ли, че тагът <object> може да съдържа елементи, които да се показват ако браузъра не се справи със самия <object>? Това е много интересно, защото позволява, например, да поставим изображение в <object> тага и ако браузъра не може да покаже Flash съдържанието, то тогава ще зареди изображението.
Да вземем за пример сайта на Macromedia.com (бел. ред.: Обърнете внимание, че тази статия е писана през 2002 година). Можете да забележите, че те използват сложен JavaScript, с който откриват дали посетителя има инсталиран Flash Player и ако няма - отново с JavaScript - създават динамично HTML, който да замести навигацията. Грозно, грозно, грозно. Ето как бих го направил аз:
<object type="application/x-shockwave-flash
data="c.swf?path=movie.swf"
width="400" height="300">
<param name="movie"
value="c.swf?path=movie.swf" />
<img src="noflash.gif"
width="200" height="100" alt="" />
</object>
Ако браузърът не знае как да се справи с обекта с MIME application/x-shockwave-flash, следва да покаже първия вложен в <object> тага елемент - <img>. Мисля, че повечето браузъри биха се справили с изображение, но ако желаете можете да използвате и чист текст.
Очевидно е, че авторът е решил да използва кулинарна терминология поне на две места в статията - "Twice-Cooked Method" и "Satay Method". Първия термин няма директен превод на български. Става дума за ястие, което се готви по два различни начина, например месо, което първо се вари, а после - пържи. В случая го превеждам като "двустранно запичане" не само заради кулинарната му страна, а и заради преносния смисъл - авторът го използва да опише един двойно грешен подход.
Flash Satay: тук има леко смесване на терминологията. В американската кухня "satay" или "sate" е печени нанизани на шиш мариновани късчета месо. Познати у нас като "шишчета". В азиатската кухня обикновено се пекат на силен жив огън за много кратко време, като така се стяга повърхността на месото, а вътрешността остава алангле, но запазва соковете. Често се практикува и поливане месото със горими субстанции и запалването им. Освен това, отново в източната кухня, това "соте" се прави и без шишчетата - само накълцано месо. В България е широко разпространено мнението, че "соте" означава ястие, приготвено на силен жив огън, а "сотирам" е глагол за това действие. Например като калмари соте се предлагат кръгчета калмари сотирани с масло и подправки.