. .. : Swf.hu 1.0 archívum : Swf.hu főoldal >>> : .. .




 
 
SEGÉDLETEK Flash+JavaScript

Változó átadása Flash-nek JavaScript segítségével
  feltöltve: 2005.10.06 | szerző: Night | olvasva: 5769 alkalommal

   
 

Sokszor felmerül a kérdés, mégpedig: hogyan lehet JavaScripttel változót átadni a flashnek, vagy hogyan lehet irányítani egy flash-t JavaScripttel.

Ez a segéglet erre próbál választ adni. Remélhetőleg sikeresen:)

Figyelem! A segédlet igényel némi HTML és Flash alapismereteket. A segédletben nem fogok kitérni a HTML kód minden egyes részletére és a Flash alapokra.

A végeredmény


Ha tetszik a végeredmény, vágjunk bele!

JavaScript fájl létrehozása

Előszőr is hozz létre egy JS fájt (ezt Dreamweaverben megteheted, vagy akár Windows intézőben is: létrehozol egy szöveges file-t és a kiterjesztését .js-nek adod meg)

Ime a JS file tartalma:

// 1. paraméter átadása és flash irányítása
function lapoz(cim,szam,page) {
szam = szam-1;
document.flash.SetVariable("_root.param", cim);
document.flash.gotoFrame(szam);
window.open(page+".html", "main");
}

Vesézzük egy picit ki, mert még ködös az egész. Előszőr is létrehoztunk egy function()-t lapoz névvel, amit majd gombokkal meghívunk. Adtunk neki paramétereket -hármat-, mégpedig: cim (ez lesz a kiválasztott menüpont címe, ami flashben fog megjelenni), szam (ez lesz a frame-nek a száma, ahova ugrani fog a flash kattintáskor), page (ez pedig a betöltendő html neve). Amint ezzel végeztünk, jöhet a function() tartalma.

Ejtsünk néhány szót erről:
szam = szam-1; // érdekes módon, ha a gotoFrame-nek 1-t adunk, akkor a 2-s frame-re ugrik, ezért kell levonni egyet, hogy mindig a megfelelő frame-re ugorjon.

document.flash.SetVariable("_root.param", cim); // ez adja át a flashnek a kiválasztott lap címét. A flashben param néven fog megjelenni ez a változó és értéke a cim által közvetített érték lesz.

FONTOS! Láthatjuk, hogy a flash-re document.flash-ként hivatkozunk. Ez azért van, mert a flash beágyazásánál a flash-nek a "flash" szót adtam meg, mint ID (azonosító), de erről később.

document.flash.gotoFrame(szam); // a megadott frame-re ugrik a flash, amikor lefut a code, a szam-ról már írtam feljebb.

window.open(page+".html", "main"); // megnyitja a "main" nevezetű ablakban a megadott html-t. Még nincs "main" nevezetű ablakunk, de hamarosan lesz!

Ha minden világos mentsd le a JS fájlodat functions.js néven.

HTML létrehozása, JavaScript linkelése

Hozz létre egy HTML-t main.html néven.

Haladjunk lépésről lépésre, kezdjük el a <head>-del:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Flash-JS</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
<script language="JavaScript" type="text/javascript" src="functions.js"></script>
</head>


Sokat nem írnék erről a részről, egy fontos dolgot emelnék ki, mégpedig a JavaScriptünk linkelését. Így kell linkelni egy JavaScriptet:)

Következő állomás a <body> és a <html> lezárása:

<body>
<table width="400" height="300" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="72" colspan="2"><img src="html_resz_01.gif" width="400" height="72" border="0" usemap="#Map"></td>
</tr>
<tr>
<td width="117" height="228" background="html_resz_02.gif"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,22,0" name="flash" width="116" height="228" id="flash">
<param name="movie" value="flash.swf">
<param name="quality" value="high">
<embed src="flash.swf" width="116" height="228" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" name="flash"></embed>
</object></td>
<td width="283"><iframe name="main" scrolling="auto" width="283" height="228" src="home.html" frameborder="0" ></iframe></td>
</tr>
</table>
<map name="Map">
<area shape="rect" coords="119,50,164,69" href="javascript:lapoz('Home','1','home');">
<area shape="rect" coords="171,51,228,66" href="javascript:lapoz('Services','2','services');">
<area shape="rect" coords="244,50,293,69" href="javascript:lapoz('Contact','3','contact');">

</map>
</body>

</html>

Három code részletet emeltem ki. Mivel említettem, hogy a HTML alapokra és a Flash alapokra nem kívánok kitérni, mert a segédlet nem erről szól, ezért természetesnek veszem, hogy egy Flash-t beágyazni HTML-be, vagy táblázatot létrehozni tudsz.

Néhány magyarázat a táblázat elkészítéséhez: 2*2 táblázat (2 sor, 2 oszlop), 400-as szélességgel és 300-as magassággal. Az első sorban colspan-nal megszüntettem az oszlopot, vagyis egyesítettem a két cellát. Az első sor mérete 400*72 lett, és itt elhelyeztem a html_resz_01.gif-et (meglepő módon pont 400*72-s a mérete:) ). A második sor első oszlopa 117*228-as míg a második 283*228-as. A második sor első oszlopába került a 116*228-as méretű flash -amit hamarosan elkészítünk-, háttere pedig a html_resz_02.gif lett, és a második oszlopba pedig az <iframe> amire szeretnék kitérni.


html_resz_01.gif


Gondoltam teszek bele egy kis extrát, ezért találkozhatunk az iframe-mel. Hasonló, mint a frameset, de az iframe-nél elég ennyit írni: <iframe paraméterek></iframe>, meg amúgy is... jobban szeretem, mint a framesetet.:) A paramétereket fent a <body> codejában láthatod. Ezekközül egyet emelnék ki, mégpedig a name="main"-t. Ugye emlékszel még a JavaScript code-ra, amiben
window
.open(page+".html", "main"); szerepelt? Nos, most kapott értelmet a main, és mostmár tudni fogja a JavaScript, hogy hol nyissa meg a meghívott HTML-t.

Kiemeltem még a <map> TAG-et. Ez konkrétan arra jó, hogy egy adott képen (jelen esetben a html_resz_01.gif) el tudsz helyezni különböző formájú láthatatlan gombokat. Én ezeket most az egyes menüpontok fölé helyeztem. Terméeszetesen a gomboknál lehet adni linket is, és itt jön a lényeg!
Már meg is jött. Tehát a menünk egyes gombjainak megadhatjuk, hogy hívja meg a JavaScript lapoz nevezetű function-jét.

FONTOS! A map TAG-et érdemes DreamWeaverből kezelni, mert ott pontosan látjuk, hogy hova helyezi a gombjainkat.

Gyakorlás:
nyisd meg a DreamWeaver-t, helyezz el egy képet a html lapodon, jelöld ki a képed, és hozd be a Properties panelt, ha alapból nem látszik. Ezt fogod látni:



Kattints a ciánkék téglalapra a bal alsó sarokban és rajzolj egy négyzetet a képedre. Máris alkottál egy láthatatlan gombot, vagyis egy map-ot. Ekkora a DW automatikusan ad egy nevet a map-odnak, alapból a "Map"-ot adja, mint azt a fenti képen is láthatod. Ha átváltasz a fekete kurzorra (balra a négyzettől), akkor ki tudod jelölni a képen a map-od és tudsz neki Linket adni. Mi is linkeket fogunk most adni a gombjainknak.


A menüpopntok, rajtuk a gombokkal


  • A Home feletti gomb linkje: javascript:lapoz('Home','1','home');
    Mi történik, ha rákattintanak? Meghívódik a lapoz funkció és átadja a megadott paramétereket, vagyis, hogy a cim = Home, szam = 1, page = home. Amint lefut a function(), a flash -ami még nincs kész, de mindjárt!- megkapja a Home-t, mint a param változó értéke, ráugrik az első kockára és betölti az home.html nevezetű html-t az iframe-be. Hat nem csodás? Es mindezt egy kattintásra!
  • A Services feletti gomb linkje: javascript:lapoz('Services','2','services'); és most magadban mond el, hogy mi fog történni;)
  • A Contact gomb linkje: javascript:lapoz('Contact','3','contact');


Figyelem! Mivel most határoztuk meg a 3 betöltendő HTML-ek nevét (home.html, services.html, contact.html), ezért itt az ideje, hogy elkészítsük ezt a 3 darab HTML-t. Leírom a paramétereket amikkel dolgoztam, a többit rád bízom: háttér színe: #656565, szöveg színe: #FFFFFF, Left és Top margin: 15, és a head-be ezt a code-t tettem még:

<style type="text/css">
<!--
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
}
-->
</style>

Ez egy CSS style, erről bővebben itt olvashatsz.

Tartalommal töltsd fel, amivel akarod, és mentsd le a HTML-eket home.html, services.htmlés contact.html néven. Egy könyvtárba legyenek a main.html-eddel, amiben a flash van.

Egyetlen egy kiemelt code rész maradt ki, mégpedig az id="flash". Ennek az apró párkarakteres code-nak köszönhető, hogy a JavaScript átadja a változót a flashnek és átugrasztja arra a frame-re amelyikre kell.

FONTOS! Természetesen, ha id="kutyafule" lenne, akkor a JavaScript-ben document.kutyafule-ként hivatkozunk rá!

Nos, azért is hagytam utolsónak ezt a code részt, hogy megvillogtathassam irói vénám és egy könnyed mozdulattal vezethessem át az id="flash"-ről a témát a flash elkészítésére. Jó, mi?;)
 
   
 
 

© Devnet.hu. A segédletek semmilyen formában nem másolhatók, publikálhatók a Devnet.hu és a szerzők közös írásos engedélye nélkül.
 
. .. : Swf.hu 1.0 archívum : Swf.hu főoldal >>> : .. .