FLASH A JAVASCRIPT - Grafika.cz - vše o počítačové grafice

Fotosoutěže
Fotogalerie
Rubriky
Odběr fotomagazínu

Fotografický magazín "iZIN IDIF" každý týden ve Vašem e-mailu.
Co nového ve světě fotografie!

 

Zadejte Vaši e-mailovou adresu:

Kamarád fotí rád?

Přihlas ho k odběru fotomagazínu!

 

Zadejte e-mailovou adresu kamaráda:

Nabídka práce
Poptávka práce


Webdesign

FLASH A JAVASCRIPT

Macromedia Flash tutorial
Macromedia Flash tutorial

Macromedia Flash tutorial

19. července 2001, 00.00 | Dnešní tutorial nebude až tolik o Flashi, ale spíš o věcech kolem - využití JavaScriptu při otevírání nových oken, přidání stránek do oblíbených, práce ve framových HTML stránkách a další. Mnozí z vás to určitě znají, ale některým to zůstává stále utajeno.

Dnešní tutorial nebude až tolik o Flashi, ale spíš o věcech kolem - využití JavaScriptu při otevírání nových oken, přidání stránek do oblíbených, práce ve framových HTML stránkách a další. Mnozí z vás to určitě znají, ale některým to zůstává stále utajeno.

Flash a JavaScript

Abyste mohli používat JavaScript ve Flashi (resp. ve výsledném Swf souboru), je třeba mít takový prohlížeč (webbrowser), který ho podporuje, popřípadě zkontrolovat, zda není jeho podpora vypnuta. Ale i při splnění těchto podmínek nemusí vždy fungovat, mnohdy je třeba po publikování swf souboru doplnit HTML kód, týká se to hlavně starších verzí Netscape (verze 3.x až 4.x, ale Netscape 4.77 tohle doplnění nevyžaduje). Aby tedy JavaScript komunikoval s plug-inem v Netscape, doplníme HTML kód o swliveconnect=true (nabývá hodnot "true" nebo "false") - nebo ekvivalentně swliveconnect=1 (nabývá hodnot "1" nebo "0"). Doporučuji doplnit vždy! Další podmínkou je Flash Plug-in 3.0 a vyšší.

Otevírání nových oken

Otevírání nových oken je snad nejpoužívanějším využitím JavaScriptu (JS) ve spojení s Flashem. Okna jsou kontrolovaná funkcí, která se začlení do HTML stránky. Samotný Flash nemá schopnost řídit atributy nových oken, ale může komunikovat s prohlížečem a nařídit mu otevření nebo zavření nových oken.

Metody používané pro práci s okny

Metoda Potíže Kompatibilita
Get URL nejsnadnější, ale často nenabídne dobrou kontrolu oken práce se všemi prohlížeči
Get URL: "Javascript:" jednoduchá a shodná nepracuje pod Windows s Internet Explorerem 3.0 nebo starším nebo Internet Explorerem 4.5 a starším pod Macintosh
FS Command těžší, nepodporuje každý prohlížeč FSCOMMAND pracuje v prohlížečích podporujících ActiveX a se zapnutým swliveconnect. To splňují Internet Explorer 3.0 a novější a Netscape Navigator 3.0 a novější pro Windows a také Netscape Navigator 3.0 a novější pod Macintosh.

Poznámka: Get URL v obou podobách pracuje s Mozilla 0.9+ a s Operou 5.0+ společně s Flash Plug-inem 5 (starší verze jsem nezkoumal), FS Command nepodporují Windows 3.1, Internet Explorer na Macintoshi, pro Mozillu se doporučuje updatovat Flash Plug-in na novější (pokud to není zrovna Flash Plug-in 5).

I. Get URL

Pro vytvoření nového okna je tato metoda nejjednodušší a nevyžaduje JS, ale nenabídne kontrolu nad nově vytvořeným oknem - jeho umístěním velikostí nebo možnost skrýt některou nástrojovou lištu.

Postup otevření nového okna:
1) přiřadíme akci Get URL tlačítku nebo framu v časové ose
2) do políčka URL doplníme adresu
3) z windows vybereme _blank pro otevření v novém okně

II. Get URL: "Javascript:"

Pro vytvoření nového okna se používá akce Get URL a JavaScriptové funkce, umožňuje tak ovládat parametry okna - jeho umístění, velikost, použité nástrojové lišty.


Postup otevření nového okna:

A) Ve Flashi
 1) přiřadíme akci Get URL tlačítku nebo framu v časové ose
2) do políčka URL doplníme JS pro otevření nového okna:
 
javascript:openNewWindow ('www.domena.cz/index.html', 'thewin', 'height=200,width=400,toolbar=no, scrollbars=no, resizable=no, menubar=no')

3) window necháme prázdné

4) zvolíme ve Flashi z menu File - Publish Settings, vybereme publikování ve Flash a HTML, přejdeme na nastavení HTML a vybereme Flash Only (Default), následně klikneme na tlačítko publikování Publish, dojde k vytvoření SWF souboru a HTML souboru ve stejném adresáři jako je uložen zdrojový FLA soubor.

B) Začlenění JavaScriptu do HTML stránky
1) do HTML souboru musíme přidat JavaScriptovou funkci v návaznosti na Get URL, proto otevřeme soubor v nějakém HTML editoru (Dreamweaver, FrontPage, Homesite) nebo textovém editoru

2) vložíme následující kód do hlavičky dokumentu mezi tagy <HEAD> a </HEAD>

<script language="JavaScript">
function openNewWindow(URLtoOpen, windowName,windowFeatures)
{ newWindow=window.open(URLtoOpen, windowName, windowFeatures); }
</script>

nebo mezi stejné tagy umístíme odkaz na soubor, ve kterém bude funkce uvedena:

<script type="text/javascript" language="JavaScript" src="nazevsouboru.js"></script>

3) Pokud používáte Flash 4 nebo starší, vložíme do HTML kódu Swf souboru:

swLiveConnect=true

 Umístíme ho mezi tagy EMBED nejlépe až po WIDTH a HEIGHT. To umožní komunikaci mezi Flash Plug-inem a prohlížečem. Doporučuji zařadit vždy!

4) Doporučuje se oddělit parametr swLiveConnect tak, že za něj přidáme další parametr:

NAME=nazevswf

Nahradíte "názevswf" názvem, který se objeví v parametru ID, NAME je stejné jako název souboru (samozřejmě bez přípony souboru .swf).

5) Nyní už stačí všechny změny uložit a otestovat v prohlížeči.

Popis JavaScriptové funkce:

javascript:openNewWindow zavolání funkce openNewWindow
'http://www.domena.cz/index.html'
 		adresa k otevření (absolutní nebo relativní)
'thewin' libovolný název okna
height=200 výška okna v px
width=400 šířka okna v px
toolbar=no zákáže nástrojovou lištu, horizontální menu prohlížeče s tlačítky Back a Forward ("yes" povolí
scrollbars=no zakáže horizontální a vertikální posuvníky
resizable=no zakáže změnu velikosti okna
menubar=no zakáže řádkové menu

Poznámka: 
Resizable - většina nových verzí prohlížečů podporuje tuto vlastnost, Opera 5 ji vůbec nepodporuje (je možné měnit velikost okna táhnutím myši nebo tlačítkem maximalizovat), Mozilla 0.9+ správně interpretuje, u Internet Exploreru 5.01 není možné změnit velikost okna táhnutím myši, ale je to možné tlačítkem maximalizovat, Netscape 4.77 funguje správně (zobrazí tlačítko maximalizovat, je však nefunkční).

Struktura JavaScriptové funkce:
openNewWindow (URLtoOpen, windowName,windowFeatures)
URLtoOpen 'http://www.domena.cz/index.html'
windowName 'thewin'
windowFeatures 'height=200, width=400, toolbar=no, scrollbars=no, resizable=no, menubar=no')'

Poznámka:
WindowFeatures (vlastnosti okna) můžeme klidně vynechat, pokud nechceme kontrolovat vzhled nového okna a pak bude funkce vypadat: javascript:openNewWindow: ('http://www.domena.cz/index.html', 'thewin').

Myslím, že podrobněji není třeba funkci popisovat, jen do funkce doplníme ještě znaky, které umožní tuto funkci přeskočit prohlížečem, který nepodporuje JavaScript:

<script language="JavaScript">
<!--
function openNewWindow(URLtoOpen, windowName,windowFeatures)
{ newWindow=window.open(URLtoOpen, windowName, windowFeatures); }
// -->
</script>

Zde si můžete vyzkoušet otevření nového okna:

III. Fs Command

Je třeba zdůraznit, že využití akce Fs Command ve spojení s JavaScriptem pro otevření nového okna nebude fungovat Internet Exploreru 4.5 pro Macintosch.

Postup otevření nového okna:

A) Ve Flashi
 1) přiřadíme akci Fs Command  tlačítku nebo framu v časové ose
2) do políčka pole "Command" doplníme "openWindow"

3) arguments necháme prázdné

4) zvolíme ve Flashi z menu File - Publish Settings, vybereme publikování ve Flash a HTML, přejdeme na nastavení HTML a vybereme Flash with Fs Command, následně klikneme na tlačítko publikování Publish, dojde k vytvoření SWF souboru a HTML souboru ve stejném adresáři jako je uložen zdrojový FLA soubor.

B) Začlenění JavaScriptu do HTML stránky
1) do HTML souboru musíme přidat JavaScriptovou funkci v návaznosti, proto otevřeme soubor v nějakém HTML editoru (Dreamweaver, FrontPage, Homesite) nebo textovém editoru
2) otevřete si HTML soubor a uvidíte, že HTML kód se podstatně než v případě publikování pro Flash Only, nalezněte místo, kde je napsáno:

// Place your code here...

3) smažte tento text a doplňte následující JavaScript:

{if(command=="openWindow"){openNewWindowFs()}}

function openNewWindowFs()
{setTimeout(window.open('http://www.domena.cz/index.html','newwindow',
'height=200,width=400,toolbar=no, scrollbars=no, resizable=no, menubar=no')),0}

Adresu, název okna, velikost, lišty, které se nemají zobrazit, můžete měnit podle svých požadavků.

Popis JavaScriptové funkce:

{if(command=="openWindow"){openNewWindow()}}

Příkaz "command" je čten z Flashe a říká, jestliže je command roven "openWindow", pak JavaScript spustí funkci openNewWindow.

function openNewWindowFs()
{setTimeout(window.open('http://www.domena.cz/index.html','newwindow',
'height=200,width=400,toolbar=no, scrollbars=no, resizable=no, menubar=no')),0}
Tato funkce je obdobná jako v Get URL:"JavaScript:", proto nebude už podrobně vysvětlována. SetTimeout je časový limit, který má předejít neslučitelnosti s některými prohlížeči, u kterých by se okno nemuselo otevřít.

Závěr:
K otevírání oken bych doporučil jedině Get URL v obou podobách, jejich klady a zápory byly popsány v předchozím textu. Rozhodně pro otevírání oken nepoužívejte Fs Command, protože nefunguje v mnohých prohlížečích, a když už se vám okno přece jenom podaří otevřít, tak následně zkrachuje prohlížeč - hlavně ve spojení SWF vytvořeného ve Flash 4 a Internet Explorer 5.0+ na OS Win2000, pokud použijete SWF soubor vytvořený ve Flash 5 a IE 5.0+ nebo Netscape 4.77 na OS Win2000, pak problémy nedělá. Mozilla 0.9 a Opera 5.0 si s tím neporadí. Aspoň to vyplynulo z mých zkušebních pokusů.

Ilustrační obrázky jsou z Flashe 4, obdobně se dané metody otevírání oken používají u Flash 5. Zdrojem předchozího textu byly převážně stránky společnosti Macromedia.

V další části se zaměřím na praktické ukázky nejen ve spojení s JavaScriptem:

1) Otevření nového okna umístěného na střed obrazovky
2) Otevření tzv. CHROMELESS okna
3) Umístění Flash animace na střed
4) Práce s frames (rámy)
5) Přidání do oblíbených

Pokračování

Obsah seriálu (více o seriálu):

Tématické zařazení:

 » Rubriky  » Go verze  

 » Rubriky  » Webdesign  

Poslat článek Diskuse (0) Tisk Přečteno: 3255x

www.grafika.cz/rubriky/webdesign/flash-a-javascript-129624cz

 

 

 

Nejčtenější články
Nejlépe hodnocené články
Nabídka bazar

 

Přihlášení k mému účtu

Uživatelské jméno:

Heslo: