Aktivace flash animací v HTML - aktualizováno
18.9.2006· Autor: Ondřej Brichta·
Počet komentářů: 13
Dnes si představíme řešení vkládání SWF objektů do HTML stránek, které zajistí automatickou aktivaci vloženého SWF objektu, která je nutná díky poslední aktualizaci Internet Exploreru.
Poslední updaty v Internet Exploreru přinesly vývojářům flashových aplikací (především těch online) nemalé starosti. Přibyla totiž nutnost ručně aktivovat SWF animaci, vloženou v HTML stránce. Je zřejmé, že v době, kdy se snažíme co nejvíce zjednodušit uživatelské rozhraní aplikací je tento krok navíc nežádoucí. Proto se prakticky ihned po zveřejnění updatu objevily postupy, jak tuto aktivaci obejít. Na Adobe.com se před časem objevil návod na řešení uvedeného problému a ten si nyní představíme.
Aktualizováno:
Příjemnější a z pohledu vývojáře flashových aplikací jednodušší řešení detekce flashplayeru a automatické aktivace flashového pluginu lze získat instalací rozšíření pro samotný Flash 8 editor (rozšíření je ke stažení zde).
Instalace tohoto rozšíření přidá v nastavení exportu do html šablon další dvě, které zajistí správnou detekci a aktivaci flashového objektu na HTML stránce.
Postup při exportu
Při exportu flashového souboru přejdeme na HTML záložku, kde z připravených šablon (Template) zvolíme „Active Content Update - HTTP" a animaci exportujeme. Není to ovšem všechno, dále je nutné zvolit z hlavní nabídky „Commands - Apply Active Content Update". Tímto příkazem se zobrazí okno, ve kterém musíme zvolit právě exportovaný HTML soubor. Po zvolení HTML souboru se do stejné složky nakopíruje potřebný JS soubor. Tento soubor je nutný ke správnému vložení flashového objektu do HTML kódu.
Po instalaci přibudou další dvě HTML šablony:
Po dokončení celého procesu máme hotovo a můžeme HTML soubor společně s JS souborem a flashovou animací umístit na web. Bylo by ovšem dobré přepsat některé anglické výrazy, používané v této šabloně. Podívejme se tedy na některé důležité části HTML kódu s vloženým flashovým souborem:
<!--
// -----------------------------------------------------------------------------
// Globals
// Major version of Flash required
var requiredMajorVersion = 8;
// Minor version of Flash required
var requiredMinorVersion = 0;
// Revision of Flash required
var requiredRevision = 0;
// -----------------------------------------------------------------------------
// -->
Tato část skriptu určuje, kterou verzi flashe chceme detekovat, v tomto případě chceme flashplayer verze 8.0.0
Další, důležitá část skriptu je:
AC_FL_RunContent(
'codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0',
'width', '800',
'height', '600',
'<strong>src</strong>', '<strong>obsah</strong>',
'quality', 'high',
'pluginspage', 'http://www.macromedia.com/go/getflashplayer',
'align', 'middle',
'play', 'true',
'loop', 'true',
'scale', 'showall',
'wmode', 'window',
'devicefont', 'false',
'id', 'obsah',
'bgcolor', '#ffffff',
'name', 'obsah',
'menu', 'true',
'allowScriptAccess','sameDomain',
'<strong>movie</strong>', '<strong>obsah</strong>',
'salign', ''
); //end AC code
Zde se pomocí JavaScriptu vypisuje samotný flashový objekt. SWF soubor použitý v ukázce se jmenuje "obsah.swf". Vše by mělo být správně vypsané díky exportu z Flashe, někdy je ale nutné vložit k flashovém objektu do HTML kódu proměnnou . Pak musíme naleznout parametry 'src' a 'movie'. Pokud má mít proměnná název „promenna", pak se k flashovém objektu s názvem obsah.swf vloží následujícím způsobem:
'src', 'obsah?promenna=hodnota proměnné'
a dále
'movie', 'obsah?promenna=hodnota proměnné'
Poslední dvě části skriptu, které nás zajímají, v sobě obsahují alternativní texty v případě, že není k dispozici flashplayer požadované verze a nebo pokud prohlížeč nepodporuje JavaScript:
Druhá část vyhodnocení testování verze flashplayeru:
} else { // flash is too old or we can't detect the plugin
var alternateContent = 'Alternativní obsah.'
+ 'K prohlížení je nutný flashplayer.'
+ '<a href=http://www.macromedia.com/go/getflash/>Stáhnout flashplayer</a>';
document.write(alternateContent); // insert non-flash content
}
V případě, že prohlížeč nepodporuje skriptování:
<noscript>
// Provide alternate content for browsers that do not support scripting
// or for those that have scripting disabled.
K prohlížení je nutný flashplayer.
<a href="http://www.macromedia.com/go/getflash/"> Stáhnout flashplayer </a>
</noscript>
Další možnosti řešení detekce flashplayeru naleznete zde. Ovšem všechna řešení mají svá pro i proti, řešení zde uváděné jich má nejméně.
Řešením je JavaScript
Stejně, jako v případě detekce správnosti verze flashplayeru, i zde je použit JavaScript pro zápis do HTML kódu stránky.
Celkové řešení vypadá následovně:
<em><script language="JavaScript" type="text/javascript">
<!--
// -----------------------------------------------------------------------------
// Globals
// Major version of Flash required
var requiredMajorVersion = 8;
// Minor version of Flash required
var requiredMinorVersion = 0;
// Revision of Flash required
var requiredRevision = 0;
// the version of javascript supported
var jsVersion = 1.0;
// -----------------------------------------------------------------------------
// -->
</script>
<script language="VBScript" type="text/vbscript">
<!-- // Visual basic helper required to detect Flash Player ActiveX control version information
Function VBGetSwfVer(i)
on error resume next
Dim swControl, swVersion
swVersion = 0
set swControl = CreateObject("ShockwaveFlash.ShockwaveFlash." + CStr(i))
if (IsObject(swControl)) then
swVersion = swControl.GetVariable("$version")
end if
VBGetSwfVer = swVersion
End Function
// -->
</script>
<script language="JavaScript1.1" type="text/javascript">
<!-- // Detect Client Browser type
var isIE = (navigator.appVersion.indexOf("MSIE") != -1) ? true : false;
var isWin = (navigator.appVersion.toLowerCase().indexOf("win") != -1) ? true : false;
var isOpera = (navigator.userAgent.indexOf("Opera") != -1) ? true : false;
jsVersion = 1.1;
// JavaScript helper required to detect Flash Player PlugIn version information
function JSGetSwfVer(i){
// NS/Opera version >= 3 check for Flash plugin in plugin array
if (navigator.plugins != null && navigator.plugins.length > 0) {
if (navigator.plugins["Shockwave Flash 2.0"] || navigator.plugins["Shockwave Flash"]) {
var swVer2 = navigator.plugins["Shockwave Flash 2.0"] ? " 2.0" : "";
var flashDescription = navigator.plugins["Shockwave Flash" + swVer2].description;
descArray = flashDescription.split(" ");
tempArrayMajor = descArray[2].split(".");
versionMajor = tempArrayMajor[0];
versionMinor = tempArrayMajor[1];
if ( descArray[3] != "" ) {
tempArrayMinor = descArray[3].split("r");
} else {
tempArrayMinor = descArray[4].split("r");
}
versionRevision = tempArrayMinor[1] > 0 ? tempArrayMinor[1] : 0;
flashVer = versionMajor + "." + versionMinor + "." + versionRevision;
} else {
flashVer = -1;
}
}
// MSN/WebTV 2.6 supports Flash 4
else if (navigator.userAgent.toLowerCase().indexOf("webtv/2.6") != -1) flashVer = 4;
// WebTV 2.5 supports Flash 3
else if (navigator.userAgent.toLowerCase().indexOf("webtv/2.5") != -1) flashVer = 3;
// older WebTV supports Flash 2
else if (navigator.userAgent.toLowerCase().indexOf("webtv") != -1) flashVer = 2;
// Can't detect in all other cases
else {
flashVer = -1;
}
return flashVer;
}
// If called with no parameters this function returns a floating point value
// which should be the version of the Flash Player or 0.0
// ex: Flash Player 7r14 returns 7.14
// If called with reqMajorVer, reqMinorVer, reqRevision returns true if that version or greater is available
function DetectFlashVer(reqMajorVer, reqMinorVer, reqRevision)
{
reqVer = parseFloat(reqMajorVer + "." + reqRevision);
// loop backwards through the versions until we find the newest version
for (i=25;i>0;i--) {
if (isIE && isWin && !isOpera) {
versionStr = VBGetSwfVer(i);
} else {
versionStr = JSGetSwfVer(i);
}
if (versionStr == -1 ) {
return false;
} else if (versionStr != 0) {
if(isIE && isWin && !isOpera) {
tempArray = versionStr.split(" ");
tempString = tempArray[1];
versionArray = tempString .split(",");
} else {
versionArray = versionStr.split(".");
}
versionMajor = versionArray[0];
versionMinor = versionArray[1];
versionRevision = versionArray[2];
versionString = versionMajor + "." + versionRevision; // 7.0r24 == 7.24
versionNum = parseFloat(versionString);
// is the major.revision >= requested major.revision AND the minor version >= requested minor
if ( (versionMajor > reqMajorVer) && (versionNum >= reqVer) ) {
return true;
} else {
return ((versionNum >= reqVer && versionMinor >= reqMinorVer) ? true : false );
}
}
}
return (reqVer ? false : 0.0);
}
// -->
</script>
</head>
<body>
<strong><script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<script src="Scripts/AC_ActiveX.js" type="text/javascript"></script></strong>
<script language="JavaScript" type="text/javascript">
<!--
var hasRightVersion = DetectFlashVer(requiredMajorVersion, requiredMinorVersion, requiredRevision);
if(hasRightVersion) { // pokud je verze správná
<strong>AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0','width','950','height','570','src','final','quality','high','bgcolor','#fdbc04','pluginspage','http://www.macromedia.com/go/getflashplayer','movie','final' );</strong>
} else { // flash je ve starší verzi
<strong>var alternateContent = ' '
+ 'Je nutný Flashplayer.'
+ '<a href=http://www.macromedia.com/go/getflash/>Ztáhnout zde</a>';
document.write(alternateContent);</strong> // vložení osahu bez Flashe
}
// -->
</script>
<strong><noscript>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="950" height="570">
<param name="movie" value="final.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#fdbc04" />
<embed src="final.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="950" height="570"></embed>
</object>
</noscript></strong>
</body>
</html></em>
Uvedený kód se umístí do HTML stránky, ke které se navíc musí připojit dva JS soubory, obsahující skripty pro vypsání html kódu. Umístění JS souborů je definováno tagy:
<em><strong><script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script></strong></em>
Oba soubory jsou k dispozici zde.
Ve vypsaném skriptu jsou tučně vyznačeny oblasti, které nás nejvíce zajímací z pohedu vložení SWF objektu. Předně se jedná funkci AC_FL_RunContent, která zajišťuje vložení SWF objektu do html stránky pomocí předaných parametrů. Například:
... 'height','570','src','final' ...
znamená určení height - výšky SWF objektu a src - zdroje flashového ojektu, kterým je v tomto případě soubor final.swf.
Při vkládání obsahu pak musíme pamatovat na uživatele, kterí nemají správný flashplayer. V tomto případě do proměnné var alternateContent = ' ' vkládáme pomocný text, který uživatele nasměruje ke stažení flashplayeru, nebo k jeho aktivaci.
Dalším problémem můžou být kompletně zakázané skripty v prohlížeči webových stránek. V tomto případě je vhodné umístit do tagů:
<noscript> ..... </noscript>
Alternativní obsah, terý se v tomto případě zobrazuje. Jejiž na nás, jestli zariskujeme a vložíme sem opět SWF objekt (jako v této ukázce) a nebo jestli vložíme doatečnou informaci o jiném řešení.
Ondřej Brichta Vývojář multimediálních aplikací, šéfredaktor Flash.cz, školitel produktů Flash, Flex, Flash Media Server
Web:
http://www.obria.cz
|
Motto: <°))))><
Seriál:
Tipy a triky
Tipy a triky je seriál zaměřený na zajímavá řešení a vylepšení flashových aplikací