Flash CS4 - sajtóanyag

A Flash sikertörténete nem mondható töretlennek, de mindenképpen érdekes. Kezdetben óriási lelkesedéssel kezdték használni azok a weboldalak, amelyeknek nem volt értékelhető mennyiségű vagy minőségű tartalmi mondanivalója, de a Flash segítségével könnyedén a látványra tudták helyezni a hangsúlyt. Hamarosan nagy számban elterjedtek a Flash oldalak, de 2000 októberében ez egyik legrelevánsabb webelemző Jakob Nielsen oldalán megjelent egy cikk „Flash: 99% Bad” címmel ami nagyrészt azóta is igaz, és hát 99%-ban rossznak mondható arány nem a legjobb ajánlólevél. Aki csak Flash-re épülő weboldal készítésére adja a fejét, előtte tájékozódjon a www.useit.com oldalon, a „Flash” kulcsszó begépelése után az első találat a fenti cikk, de további hasznos cikkeket is találhat ezen az oldalon a webtervezéssel vagy a webes technológiákkal és azok ésszerű alkalmazásával kapcsolatban. A helyzet annyiban javult, hogy az indokolatlanul Flash alapú weboldalak vagy megszűntek, vagy visszaálltak hagyományos HTML/PHP alapokra. Jelentősen fogytak időközben az indokolatlan Flash címlapok is ott ahol az eleve fölösleges volt.

Származási hely: Adobe CS4

A jelenlegi helyzetben azt lehet mondani, a Flash nem alkalmas komolyabb mennyiségű tartalom publikálására, és ezt – a korábbi próbálkozásokkal ellentétben – ma már nem is erőltetik a designerek. A Flash jelentősége és alkalmazási területe pont ott nem tudta bizonyítani a jelentőségét ahol az a legfontosabb lenne: a szöveg alapú tartalomszolgáltatásban, beleértve az üzleti weboldalakat. Ma a Flash alkalmazási területe viszonylag jól behatárolható:
• Internetes reklámok, amelyeket egyre többen blokkolnak.
• Multimédia fejlesztők, rajzfilm- és animációkészítők, reklámügynőkségek, Flash-designerek weboldalai, tehát olyan témakörök, amelyek eleve a Flash alkalmazása köré épülnek.
• Zenét vagy filmet publikáló oldalak. Itt jelentős Flash-túltengés tapasztalható, hiszen a Myspace, Youtube, és minden hasonló videomegosztó site, és sok zenekari oldal Flash alapú MP3 és filmlejátszót, filmek esetében legtöbbször Flash video .FLV filmformátumot használnak, bár ez már nem kötődik magához a Flash programhoz, hiszen leginkább egy filmvágó programból készíthetünk ilyen formátumú kimenetet. A Flash alapú, interneten fellelhető filmek aránya az Adobe szerint ma 77%.
• Flash alapú játékoldalak.
• Mobil eszközökre írt alkalmazások, általában játékok, leginkább az „okostelefonok” esetében terjed.

Elég érdekes tehát az a jelenség, hogy a tartalomszerkesztésre épülő nyomdaipari tördelőprogramok szinte mindegyike rendelkezik Flash kimenettel (és nem ritkán bemenettel, főleg amióta létezik a programok közötti átjárást biztosító XFL formátum), igaz nem minden esetben webes céllal, van amikor ezt a Powerpoint kiváltására ajánlják vállalati bemutatók készítésére. Kétségtelen, hogy egy nyomdai kiadványszerkesztő használata egyszerűbb mint magában a Flash-ban összeúsztatni pár oldalt. Az elemzők cikkei és a Flash eddigi története alapján mindenképpen átgondolandó a Flash használata és a „kevesebb több” elve alapján tervezni Flash alapúra az egész webhelyet vagy akár csak a címoldalt. Amennyiben mégis úgy döntünk, hogy a Flash megfelel az egész site, vagy annak bizonyos részletének előállítására, nézzük hogyan segíti terveinket a CS4-es verzió.

A Flash CS4 programmal 5 csomagban is találkozhatunk: Adobe Creative Suite® Web Premium, Adobe Creative Suite Web Standard, Adobe Creative Suite Design Premium, Adobe Creative Suite Production Premium, Adobe Creative Suite Master Collection. Ezt a programot a Dreamweaverhez hasonlóan a Macromediától vásárolta az Adobe, a korábbi CS3 verzió szinte semmilyen említésre méltó változást nem tartalmazott a korábbi verzióhoz képest. Nyilvánvaló, hogy az egyik legkézenfekvőbb fejlesztés itt is a felület egységesítésére irányult. A program felülete immár hasonlít a többi Adobe programéra, a saját keretbe (szülőablakba helyezés), a „füles” megoldás több munka kapcsolgatása között, a lebegő paletták rendszere, ezek méretezhetősége, és az eszközsor mind ismerős, illetve hasonló elemeket tartalmaz a többi Adobe program ismeretében. Itt is több előre definiált munkaterület között kapcsolgathatunk, illetve sajátot is készíthetünk.

Objektum alapú animáció készítése és szerkesztése

A Flash korábbi verzióiban az animációkat a Timeline panelen, a kezframek segítségével lehetett előállítani. Ezek utólagos szerkesztése bonyolultabb munkák esetében hosszadalmassá válhatott.
Most, az új objektum alapú animációs model segítségével az animáció az objektumra vonatkozik nem az időtengely képkockáira. Ez rövidebb szerkesztési munkamódszert, és könnyebb utólagos módosításokat tesz lehetővé.

1. A négyszögrajzoló eszközzel készítsünk egy lefedett területet a bal felső sarokba.
2. A szelekciós eszközzel jelöljük ki az előbbi négyszöget.
3. Jobb click a kijelölt alakzatra, és láthatjuk a hozzá tartozó menürendszert. Válasszuk a „Create Motion Tween” menüt.
4. Ehhez a kijelölt területet szimbólummá kell konvertálni. A korábbi verziókkal ellentétben a CS4-ben beállítható az automatikus konverzió amikor az szükséges.
5. Ezután nincs szükség arra, hogy az időtengelyen vagy a képkockákon további műveleteket hajtsunk végre. Az időtengelyen létrejön az animáció időtartamát jelző sáv, és a lejátszó helyzetét jelző kurzor ennek végére ugrik.
6. ebben a helyzetben csupán húzzuk el az objektumot a munkaterület egy másik pozíciójába.
7. Üssünk Enter-t az animáció lejátszásához.

Az animáció szerkesztése

Az objektum alapú animációnak nem csak az elkészítése egyszerűbb mint a korábbi verziókban, az utólagos szerkesztés esetén is vannak előnyei. Az animáció létrehozása után látható az objektum kezdeti és végső állapotát összekötő útvonal. Ezen az egyenesen (vagy a módosítás után görbén) láthatjuk a képkockákra levetített töréspontokat. Az animáció útvonalának utólagos módosítása nagyon egyszerű: az egyenes pontjait megfoghatjuk a szelekciós eszközzel, és Bézier-görbe szerkesztés szabályai szerint módosíthatjuk azt. A módosítás az útvonal megfelelő töréspontjának megfogásával is lehetséges, illetve a lejátszó pozíciójának áthelyezésével kijelölhetjük a módosítás konkrét képkockáját is. Enter billentyű leütése után újra megnézhetjük az animációt, az időtengelyen pedig a módosított képkockák pozícióját gyémánt alakú képpont jelzi. Ezután, az időtengelyen helyezzük a lejátszót az egyik ilyen pontba, és használjuk a „Free Transform” eszközt. Ezzel az eszközzel az objektumot az adott időpillantban el tudjuk forgatni. Ezekhez a transzformációkhoz és mozgásokhoz nem kellett manuálisan „keyframe”-ket készíteni, a transzformációk és mozgatások definiálásánál azok automatikusan létrejöttek. Egy időpillanathoz (keyframe-hez) több tulajdonság is köthető, mint például méretezés, forgatás, átlátszóság.
Látható, hogy bizonyos animáció létrehozásánál nem szükséges az időtengely használata, a mozgást magát létre lehet hozni a munkaterületen is. Az időtengely ablakot akkor használhatjuk, ha például az animáció alapértelmezésű időtartalmát (ami 1 mp-nek megfelelő képkocka) meg akarjuk változtatni. Ekkor az időtengelyen a „span” (időtartamot jelző kék sáv) jobboldalát kell a megfelelő képkockára húzni. Az idősáv módosítása olyan módszerrel történhet, mint egy grafikai objektum átméretezése.
Az objektum alapú animáció további előnye, hogy nem csak egy egyszerű elemére, mint jelen esetben egy téglalapra lehet vonatkoztatni, hanem egy már kész animációra is. Ha például van egy mozgás közben is animálódó rajtunk (madár, lepke, autó...) akkor ezen animációk útvonalát is az előbbiek szerint egyszerűen meghatározhatjuk. ez esetben az objektumon használhatjuk a jobb egérgombot, és az ekkor megjelenő Swap Symbol menüpontot. A feljövő dialógus boxban láthatjuk az objektumba ágyazott esetlegesen több animációt is, és kiválaszthatjuk azokat név szerint további szerkesztésre.
Az új objektum alapú animáció segít a kezdőknek, hiszen egyszerűbben készíthetnek mozgó elemeket, és azoknak is akik évek óta használják a programot, mert az új módszerrel együtt járó új „Motion Editor panel” több lehetőséget ad az animációs munkára.

Motion Editor panel

Az objektum alapú animáció lehetősége az egyes képkockákon (keyframeken) alkalmazható effektekhez is sok újdonságot ad. Részletes, egymástól független paramétereket állíthatunk be a képkockákon: forgatás, méretezés, pozíció, filterek, és még sok más lehetőség is nyílik a szerkesztésre a „Motion Editor” panel használatával.
A Motion Editor panel lehetőségei egy képkockán is használhatóak, illetve az időtengelyen egy idősáv tartományban állíthatjuk szinte tetszőlegesen a mozgás paramétereit és effektjeit. A Motion Editor panel görbék (és egyenesek) segítségével egyszerre mutatja a mozgó objektum időben változó paramétereit.

• Az időtengelyen kattanjunk az idősáv tetszőleges helyére, lehetőleg arra a kockára, amelyiken transzformálni szeretnénk a mozgást.
• Válasszuk a Window menü Motion Editor menüpontját. A Motion Editor panel meglehetősen nagy, célszerű csak a szükséges paramétereket megjeleníteni, vagy második monitort használni.
• Minden tulajdonság (mozgás, transzformációk, színeffektek) listaszerűen fel vannak sorolva a panelen. A görbék az adott transzformáció vagy mozgás jellemzőit írják le a panel jobb oldalán. Ezzel a módszerrel finoman beállíthatjuk például egy megrajzolt grafikai vagy szöveges elem forgását. A „Rotation Z” paraméter az elem látszólagos 3D forgatását is lehetővé teszi. A forgás szögállása bármely pillanatban meghatározható, de a folyamatos mozgás illúziója kedvéért a transzformáció a vektoros rajzolásból ismert, irányvektorral ellátott Bezier görbével is szabályozható. Ezek a tulajdonságok nem csak a görbén magán, hanem a panelen számjegyek segítségével is beállíthatóak ha nagyobb pontosságra van szükség.
• A Flash korábbi verzióiban ezek a finomállítási lehetőségek el voltak rejtve a program mélyére. Az, hogy a mozgások kontrollja ilyen közel került az időtengelyen elhelyezett objektumokhoz, az új felhasználóknak és a gyakorlott usereknek egyaránt könnyebbség.
• Az eredeti munkafelületre a Motion Editor panel bezárásával vagy a „Workspace switcher” segítségével térhetünk vissza.

Mozgásfázisok gyors alkalmazása

A vektor alapú animációnál gyakori, hogy azonos mozgásokat kell sokszor alkalmazni egyazon vagy különböző objektumokon. A mozgásfázisok elmentésére már eddig is volt lehetőség, most lehetőség nyílik ezek megosztására is.

• Nyissuk ki a Motion Preset panelt (Window menü).
• A panel alsó felében nyissuk ki a „Default Presets” mappát.
• Az itt található mozgásfázisokat megtekinthetjük a felső ablakban ha rákattintunk.
• A mozgásfázis alkalmazásához jelöljük ki a munkaterületen a kérdéses objektumot.
• A Motion Preset panelen válasszuk ki a megfelelő presetet, és használjuk az Apply gombot.
• Enter-el lejátszhatjuk az animációt.

Saját presetet is könnyedén létrehozhatunk. Jelöljünk ki egy olyan objektumot amelyiken már van mozgás definiálva, és a Motion Preset panelen válasszuk a „Save Selection As Preset” gombot. Az így elkészült beállításokat megoszthatjuk mindazokkal akik a projekten dolgoznak.

Motion Preset importálása

• A Motion Presets panelen válasszuk az Import menüt.
• Nyissunk meg egy olyan animációt, amelyben a kívánt, lehetőleg egyedileg létrehozott preset van alkalmazva.
• A Motion Presets panelen most láthatóvá válik egy Custom Presets mappa.
• Kattanjunk a szelekciós eszközzel munkaterületen egy megfelelő objektumra.
• Alkalmazzuk a beimportált presetet az Aplly gombbal. Amennyiben a kijelölt objektumon már van Motion Preset, a program megkérdezi felülírja-e azt.
• Enter segítségével megtekinthető az animációt az új presettel mozgatva.

3D transzformációk

3D-nek látszó transzformációkat a Flash korábbi verzióiban csak a jól képzett felhasználók tudtak készíteni többek között a script nyelvvel vagy bonyolult mozgásfázisok egymáshoz igazításával. A CS4 verzióban ez jelentősen leegyszerűsödött, a 3D transzformációk eszközével.
• Az egyik ilyen eszköz a „3D Rotation tool” forgatás céljára.
• A másik a „3D Translation” amely 3 tengelyen képes a kijelölt objektumot megmozgatni.

3D forgatás

A 3D forgatás eszköze a függőleges eszközsorban kapott helyet. Használatához kapcsoljuk be ezt az eszközt, és jelöljük ki a formálandó objektumot a munkaterületen. Ekkor a kijelölt objektumon megjelenik a forgatáshoz használható „widget”. Itt 3 színnel elkülönítve láthatjuk a forgatás 3 lehetséges tengelyét, illetve az egész körül láthatunk egy narancssárga kört, ez mindhárom tengelyen egyszerre engedélyezi a transzformációt.

3D torzítások

Amennyiben a 3 tengelyen történő forgatás nem elegendő a kívánt hatás létrehozásához, ugyan csak az eszközsorban találunk egy „3D Translation” eszközt. Ez a 3D Rotation eszközzel van egy csoportban, az egér lenyomva tartásával az ismert módon tudjuk előhívni. Ekkor a munkaterületen az objektumra (vagy szimbólumra) kattintva az ehhez tartozó „widget” jelenik meg a képernyőn. Ezen a felületen látható mind a 3 tengely, az egérrel ezeken a tengelyeken lehet transzformálni (fordítani) a kijelölt elemet. Az egérkurzor is jelzi éppen melyik tengelyen dolgozunk.

Kölcsönhatások és torzítások definiálása „Bones” eszközzel

A Bones eszköz alapvetően arra való, hogy a korábban viszonylag nehezen meghatározható mozgásokat (emberi, állati) definiáljunk vele akár egyetlen objektumon is. A Bones eszköz értelem szerűen az eszközsorban kapott helyett, egy csont az ikonja.

Készítsünk egy több darabból álló ábrát, úgy, hogy az ábra elemei egy-egy ponton csatlakozzanak egymáshoz. Ez lehet például pár „összeszögelt” egyenes, bonyolultabb esetben egy daru részegységei. A Bones eszközzel jelöljük ki a csatlakozási pontokat, ott ahol az elemek egymáson elfordulnak. A csatlakozási pontok egyben összekapcsolják az egymáson elforduló elemeket. Ezután mozdítsuk el az egyik szélső elem végpontját, az egész ábra úgy fog elmozdulni mintha az elemek a csatlakozási pontokban képesek lennének elmozdulni.

Az időtengelyen egy layer keletkezik a fentiek hatására. Jelöljük ki a keletkezett layert, és vegyük elő a Properties panelt. Itt a példa kedvéért válasszuk az „Options” menüből a „Type” listát, és onnan a „Runtime” elemet. Ez lehetővé teszi hogy az összekapcsolt elemek helyzetét futásidőben módosítsák a látogatók.

Az így elkészült animációt a Control menü Test Movie menüpontjában tudjuk tesztelni. Amennyiben a lejátszás során az egérrel elmozdítjuk a Bones eszközzel összekapcsolt részeket, egy kis interaktivitást csempészhetünk a Flash oldalunkba az ActionScript ismerete nélkül.

Egyes alakzatok torzítása Bones eszközzel

Készítsünk egy bonyolultabb körvonalat, például egy ember vagy valamilyen mozgó állat körvonalait rajzoljuk le. Válasszuk a Bones eszközt az eszközsorból, és az ábra középpontjából indulva húzzunk ki pár „csontot” ott megtörve ahol azok elfordulnak egymáson. Ezután a szelekciós eszközzel egy-egy végtagot megfoghatunk és elmozdíthatjuk. Szerencsés esetben az egész ábra az összekapcsolt „csontoknak” megfelelően fog elmozdulni.

Az egy körvonalból álló ábrák mozgatásának csak egyik eszköze a „Bones Tool”. Rendelkezésre áll még a „Bind Tool”, az egyszerű körvonalak torzítására.

Mintázatok készítése a „Deco” eszközzel

Design téren új elem a CS4-ben a „Deco Tool” ami leginkább szabályos vagy szabálytalan minták létrehozását segíti. A mintakészítésnél három rajzeffekt áll rendelkezésre: Vine Fill, Grid Fill, és Symmetry Brush. A Vine (szőlő, kúszónövény) effekt egy területet képes feltölteni látszólag véletlenszerűen elágazó mintázattal. Ehhez lehet használni már meglévő grafikai elemeket. A Drawing Effect panelen lehet kiválasztani a feltöltés három típusa közül az egyiket.

Az innen kiválasztható „Grid Fill” effekt az egyik legegyszerűbb feltöltési mód. A kijelölt formát szabályosan tölti fel a kiválasztott elemmel mint szimbólummal. A szimbólum tulajdonságait a Properties panelen lehet egyénire szabni.

A harmadik effekt a patternkészítésnél a „Symmetry Brush”. Ezzel kaleidoszkóphoz hasonló hatást lehet elérni egy vagy több mintázattal a kiválasztott területen belül. A proeprties és az Advanced Properties penelek segítségével ezt a kitöltés-fajtát is sokoldalúan módisíthatjuk, beleértve a szimbólumok kiválasztását, irányát, szögállását.

XFL tartalom megnyitása Indesign-ben és After Effects-ben

Az XFL formátumot a CS4-es verzióban vezeti be az Adobe. Ezzel az a cél, hogy a különböző programokban létrehozott tartalmakat (jelen esetben Indesign és After Effects) be tudjuk olvasni a Flash-ba ha szükséges. Ennek a lehetőségnek elsősornam az az előnye, hogyha egy nyomdai tartalom például megfelel Flash célokra is, akkor ezt nem kell újra létrehozni, elegendő XFL formában exportálni majd importálni azt.

H.264 videó integrálása

A videós tartalmak mára jelentős mértékben elterjedtek a weben, és ezeket legtöbbször Flash lejátszóval lehet megnézni. Az ilyen tartalmak elterjedése vonta magával azt az igényt, hogy a film kis méret mellett jó minőségű legyen. A filmvágó programokban már korábban is találkozhattunk az Adobe Media Encoder alkalmazással, amely sokféle webes felhasználásra képes átalakítani a szerkesztett tartalmat. Most ez a lehetőség a Flash programban is rendelkezésre áll a H.264 video codec segítségével. Az ilyen módon előállított videós tartalmakat vissza tudjuk helyezni egy készülő Flash projektbe, attól függetlenül hogy ayok honnan származnak, vagy a H.264 codec használata mellett milyen formátumban állnak rendelkezésre.
• A videó integrálásához használjuk a File > Import > Import Video menüpontot. Az importnál megjelenő dialógus boxban lejátszót, háttérszínt, stb... választhatunk a importálni kívánt filmhez. Ha az első ablakban minden szükséges elemet beállítottunk, használjuk a Continue gombot.
• Az importálás paramétereinek beállítása és elfogadása (Finish) után a videó megjelenik a Flash oldalon amit a Control > Test Movie menüponttal tudunk megtekinteni.

A Flash weben betöltött szerepét nem definiálta át az új verzió, de sokat könnyített abban, hogy bizonyos nehezen megoldható rajzos-animációs ötleteket most már a scriptnyelv ismerete nélkül is könnyedén el lehet készíteni, szinte egy dialógusbox vagy eszköz használatával, és bizonyára sokan örülnek majd a 3D mozgatás beépített lehetőségeinek is.

Dreamveawer CS4 - sajtóanyag

Míg a nyomdaipari programok fő fejlődési iránya a keresztplatformos szolgáltatások felé hajlik, a két fő internetes program, a HTML szerkesztő Dreamweaver és a vektoros animációkészítő Flash, szerencsére megtartja vezető szerepét az internetes szakmában. Kérdéses, ha egyébként is rendelkezésre áll két ilyen jól használható program erre, miért kell a nyomdai programokat felszerelni hasonló vagy legalább kompatibilis kimenetekkel? Az internetes szerkesztőprogramok felől nézve nem teljesen haszontalan hogy bemenetként tudják fogadni a Photoshop és az Illustrator anyagait, hiszen ezekben sokkal könnyebb elkészíteni az oldal képi alapanyagát.

Származási hely: Adobe CS4

A Dreamweaver erőssége a többi hasonló próbálkozáshoz képest (Frontpage) a kompatibilitása, illetve hogy ezt beállítva odafigyel az oldalszerkesztés szabványos lehetőségeire, figyelembe véve a böngészők gyengéit is. Egy webszerkesztő számára mindenképpen ez a legfontosabb szempont (olvasgassuk gyakran a useit.com weboldalt oldaltervezéssel kapcsolatban). A korábbi CS3 verzió nem változott említésre méltóan a korábbi Macromédia verzióhoz képest, így felületét tekintve kicsit kilógott a sorból. Nézzük miért érdemes vagy nem érdemes a CS4 verzióra áttérni.

A Dreamweaver ma már nem csak egyszerű HTML szerkesztő. Erőteljesen támogatja a CSS eddig megjelent verzióit, most összekapcsolva a JavaSript és az Ajax lehetőségeivel. Mindezek a lehetőségek kétféle felületet is kaptak, varázslót az egyszerűbb kezelhetőséget kedvelőknek, és „Advanced” felületet a hozzáértőknek, vagy azoknak akik szerint ami egyszerű az unalmas. Az új Dreamweverben több erőteljes „SpryAsset” is belekerült, még az adatbázis-kezelést és bizonyos fokú interaktivátást is készíthetünk ezzel megspórolva a szerveroldali programozást. a program kompatibilitása a plug-int igénylő beágyazott Flash elemek eseté is javult, a kód leellenőrzi a Flash-lejátszó verziószámát, és ha régebbi elehetővé teszi a frissítést.

A felület

Ennek a programnak a felülete jelentős változáson ment keresztül, köszönhetően annak hogy a CS3 verzióba szinte a korábbi Macromedia MX verzió került be. A menüsor alatt itt is van egy „Workspace Switcher”, és a többi CS4-es Adobe programhoz hasonló elven működő ikonméretűvé zsugorítható oldalsó úszómenüket (paneleket) kapott a program. Megjelent a függőleges eszközsor is a menü alatti kontrolpalettával együtt. Így most már jelentősen több helyünk van a szerkesztésre miközben a látható eszközválaszték és bővült, másrészt a felület kezd hasonlítani a megszokott nyomdaipari programokra.

A programot funkciójából eredően többféle célra, többféle szemlélettel lehet használni. A felület választéka (azzal együtt hogy egyedire szabható és elmenthető tetszőleges név alá) ezt a célt is kiszolgálja. Fejlesztőknek, grafikus designereknek, codereknek, „dual screen” usereknek is kedvez az egyéni felületválaszték. Rengetek kódolást igénylő funkció kapott „varázslót” vagy könnyen kezelhető dialógusboxot. A LiveView és LiveCode módok pedig apró interaktív kódok szerkesztés közbeni megtekintését teszik lehetővé.

Saját munkafelület készítése és elmentése

1. Válasszuk a Windows > Snippets menüt.
2. Válasszuk a View > Split Vertically menüt. Ez a menüpont felosztja a munkaterületet vertikálisan, de a horizontális felosztás is lehetséges.
3. A munkaterület felosztása mellett a korábbi módon lehetséges a kódablak felosztása is.
4. A „Workspace Switcher” listából válasszuk a „New Workspace” menüpontot.
5. Adjunk nevet a saját munkafelületnek.
6. Arra is van lehetőség, hogy ha finomítunk kezdeti elképzeléseinken, módosítsuk a már elmentett munkafelület beállításait. Ehhez ugyan úgy kell eljárni mint a létrehozásnál, de a névadásnál a korábbi (felülírandó) munkafelület nevét kell megadni, így ezen név alatt az aktuális elrendezés lesz kiválasztható.

Miután a munkaterület elmentésre került, ideiglenesen megváltoztathatjuk azt, majd gyorsan visszakapcsolhatunk az elmentett verzióra.

1. Nyissunk ki egy tetszőleges (de éppen zárt) panelt a Window menüből.
2. Vigyük az oldalsó részre a többi panelhez. Itt tetszőlegesen dokkolhatjuk az új panelt oldalra, alulra, vagy a meglévő csoportok közé. Amennyiben több helyre dokkoljuk a paneleket, egyszerre több ilyen lehet nyitva (minden dokkból 1-1).
3. Amennyiben elvégeztük azt a munkát amihez az új panel is szükségeltetett, a „Workspace Switcher” listából válasszuk a „Reset ‘munkaterület neve’ menüpontot az eredetileg elmentett állapot visszaállításához.

A megjelenítés és kódolás fejlesztései

A weboldalba ágyazható kliensoldali és szerveroldali elemek nagy száma miatt az oldalkészítés ma már rég nem a html nyelvezetről szól. CSS, Javascript, PHP, SSI, több oldalhoz kapcsolódó azonos tartalmi vagy formai elemek, hogy csak a legnépszerűbbeket említsem. Ezek beépítését a HTML kódba és tesztelését az új CS4 jobban támogatja.

Kapcsolódó file-ok

Az oldalhoz már eddig is kapcsolhattunk olyan elemeket, amelyekre az oldal felől nézve csak egy hivatkozást láttunk, és most nem a képekre gondolok. Ezek kezelése, felderítése, editálása válik egyszerűbbé azzal, hogy a megnyitott oldal felső sorában ezek felsorolásra kerülnek. Ha például az oldalhoz CSS stylesheet tartozik, azt könnyedén egérkattintással elővehetjük innen. A CSS szöveges tartalma megjelenik a Code View ablakban, az oldal maga pedig függőlegesen szétosztott képernyőn a másik oldalon. Ha bármit megváltoztatunk a CSS-ben, az, ha nem is azonnal, de az F5 billentyű (frissítés) megnyomása után láthatóvá válik a design nézetben is.

Code Navigator

A Code navigátor egy kis ablak, amely az oldal kijelölt részének forráskódját mutatja meg. Ez bonyolult, összetett oldalaknál nagyon hasznos lehet. Ha például egy szövegrész CSS segítségével van megformázva, egyszerűen kattanjunk rá a Command+Option (Alt – PC) billentyűt lenyomva tartva. A megjelenő Code Navigator ablakba kattintva egyszerűen módosíthatjuk a kapcsolódó forráskódot. Itt dolgozhatunk a CSS kód egy-egy részével is, módosíthatjuk az alá tartozó tulajdonságokat, majd F5-el frissíthetjük a design nézetet.

Live View és Live Code

Új szolgáltatás a Live View és Live Code a CS4-es Dreamweaverben. A Live View arra szolgál, hogy az interaktivitást vagy XML kódot tartalmazó oldalakat ne kelljen a böngészőben leellenőrizni, hanem a munkafelületen megtekinthető legyen az eredmény. A Live Code a Live View kiegészítése. A kódszerkesztő ablakban azt a részt látjuk, amit a design ablakban kijelölünk. A Live Code bekapcsolt állapotában a forráskódot nem lehet szerkeszteni, a Design ablakban pontosan leellenőrizhető az eredmény kisebb interaktív megoldások esetén is.

CSS támogatás

Lassan elfelejthetjük a szövegformázó HTML kódokat, a „de-facto” szabvány a modern oldalaknál a CSS. A CS4 Dreamweaver ebben próbálja segíteni a designereket. Ennek megfelelően alakult a Properties panel, amely az oldalszerkesztés egyik legkézenfekvőbb eszköze. Most ez jelentős mértékben támogatja a CSS parancsokat, külön CSS és HTML szerkesztő felületet kapott.

A Properties panelnek két módja van, HTML és CSS. A HTML módban tudunk linkeket, #class neveket, egyéb hagyományos dolgokat definiálni. A többi (betűk, szövegigazítás, színek) a CSS panelre került.

CSS Properties panel

1. Vegyünk elő egy megszerkesztett oldalt.
2. Ha a Properties panel nincs nyitva, használjuk a Window > Properties menüpontot.
3. Jelöljünk ki az oldal tartalmi részéből egy tetszőleges szövegrészt.
4. A Properties panelen a HTML szerkesztési mód legyen aktív.
5. Itt a korábbihoz hasonló módon alkalmazhatjuk a hagyományos HTML parancsokat szövegformázás céljára.
6. Kapcsoljunk át a CSS módra. Itt megjelennek a már alkalmazható CSS szabályok, illetve mi magunk is itt állíthatunk elő ilyeneket a „New CSS Rule” parancs segítségével. Az alkalmazásuk és módosításuk is itt lehetséges. Az új CSS létrehozásánál a feljövő dialógusboxban a „Selector type” legyen „Class”, és adjunk neki lehetőleg .-al kezdődő nevet a „Selector name” mezőben.

CSS módosítása

1. Jelöljük ki az egyik, CSS-el már megformázott szövegrészt a design felületen. Ha nincs ilyen régebbről, készítsünk egyet.
2. A munkafelület tetején megjelenik az oldalhoz tartozó CSS szerkesztési lehetősége, az alsó palettán viszont a "targeted rule" mezőben felsorolja a kijelölt elemekre vonatkozó CSS szabályokat.
3. Ezeket a szabályokat (illetve egy részüket, mint betűtípus, szín, stb...) könnyedén megváltoztathatjuk a Properties paletta jobboldali részében.
4. Amennyiben nem elegendő a változásokhoz a paletta jobb oldalán látható pr lehetőség, úgy használjuk a baloldali részben található "Edit rule" gombot, így a teljes CSS szabályrendszert elérhetjük módosítás céljából.

Előfordul, hogy nem egy nagyobb terület esetlegesen több szabályrendszerét szeretnénk módosítani, hanem egyetlen részletét, netán egy link-ét. Ekkor a szövegszerkesztő eszközzel csak kattanjunk a kérdéses szövegbe mintha írni szeretnénk hozzá.

5. A Properties panel segítségével könnyedén módosíthatjuk azokat a szabályokat, amelyek az aktuális részre vonatkoznak, illetve könnyedén létrehozhatunk egy új szabályrendszert is csak erre a részre vonatkoztatva. Amennyiben az aktív részlet több CSS szabályt is tartalmaz, a CSS Rule dialógus boxban a Detector Type lista Compund módba kerül. Ez akkor következik be, ha a kijelölt területen több CSS definíció keveredik.
6. Adjunk nevet a szabálynak. Alatta láthatóvá válik, hogyan épülnek egymásba a CSS elemek.
7. Előfordulhat, hogy nem akarjuk az egymásra épülő CSS definíciók mindegyikét megváltoztatni. Ekkor használhatjuk a "More specific" Less Specific" gombokat. Ezeket a gombokat többször is meg lehet nyomni egymás után, így lehet elérni, hogy mely elemekre akarjuk alkalmazni a CSS szabályrendszert. Ezt mind a "Selector name" mezőben nyomon követhetjük, az alatta lévő mező tájékoztat minket az így kialakuló struktúráról, vagyis arról, hogy a "Selector name" mezőben létrehozott stílus mely oldalelemekre lesz hatással (bekezdések, linkek, táblázatok, stb...).

Photoshop Smart Objects

A Photoshop központi szerepe mind a nyomdai, mind az internetes programoknál egyértelmű. A képanyag nagy része abban készülhet el. De míg a nyomdai programokban elképzelhető az a megoldás hogy Photoshop PSD file-okat is helyesen dolgoznak fel, addig az internet oldalon ezek a böngésző szintjén már nem jelenhetnek meg. A Dreamweaver egy olyan megoldást kínál, hogy a beillesztett PSD képanyagot maga a program alakítja át megfelelő JPG képpé, amely azt is biztosíthatja, hogy egyazon képanyag két teljesen mást igénylő kimeneten jelenjen meg az adott platformnak megfelelő méretben és felbontásban. Ez a megoldás szinkronizálásra is lehetőséget ad. Ha a beágyazott Photosohop kép megváltozik, a Dreamweaver figyelmeztethet, illetve a képet könnyedén upgradelhetjük.

1. Szúrjunk be egy Photoshop képet egy tetszőleges oldalra. Insert > Image.
2. A program felkínálja a lehetőséget, hogy a PSD képet webes formátumra konvertálja.
3. Az "Image Preview" dialógus boxban a file formátumát, minőségét lehet meghatározni. Itt lehet vágni és átméretezni is a képet.
4. Miután a "Save Web Image" dialógus box megjelenik, mentsük el az így képzett képet az oldal számára elérhető helyre.
5. Az így beimportált kép bal felső sarkában találjuk meg a szinkronizáció állapotát jelző ikont. Ha ez zöld, az eredeti Photoshop kép és a beillesztett (abból konvertált) JPG kép egyforma.
6. Amennyiben a forrásként szolgáló PSD file-t módosítjuk, a szinkronizáció állapotát egy felül zöld alul piros nyíl jelzi.
7. A képen jobb egérgomb, és módosíthatjuk a képet magában Photoshopban, de nem a beillesztett JPG-t hanem az eredeti PSD-t.
8. A módosítás után a Properties panelen a "Update from Original" parancs fogja frissíteni a weboldalba ágyazott képet.
9. A frissítés során a program figyelembe veszi az előző kép beállításait, méretét, minőségét, vágását.
10. Amennyiben egy kép többféle verzióban is beágyazásra került, (az Image Preview dialógusboxban más-más méret vagy vágás történt ugyan arra a PSD forrásra), és a forrásként szolgáló kép mérete is megváltozik, úgy a Dreamweaver átmértezi az összes képet amelyek az eredeti PSD-ből származnak az import során megadott paraméterek szerint.

Ez a képkezelési mód elvileg lehetővé teszi hogy egyazon forrást felhasználjunk több célra is több programban, és a forrás frissítésével nem csak egy, hanem ha úgy hozzák az igények több, többféleképpen felhasznált kép is generálódjon illetve frissüljön.

Dinamikus adatkezelés

Az adatbázisokból kiolvasott tartalom megjelenítése ma már szinte kötelező nagyobb és kisebb tartalomkezelő rendszerek, blogok, portálok számára. Az adatbázis kezelés vagy adatbázis szerver üzemeltetés, illetve olyan programok üzembe helyezése amelyek ezekkel dolgoznak, netán az adatbázis karbantartása, már komoly szakértelmet igénylő feladat, nem HTML szerkesztés. Nem beszélve arról, ha egy nyers adatbázisból szeretnénk tartalmat kinyerni, rendszerezni, keresni, vagy ilyet formába önteni, szerveroldali megoldás.

Gyakori, hogy a nyersanyag egyszerűen szöveges táblázat formájában áll rendelkezésre. Ezt még az elterjedt adatbázis szerverek sem eszik meg, bár van amelyik Excel táblát elfogad bemenetként. Ha emlékszünk rá, az Indesign is képes XML bement fogadására, és abból oldalt generálni ha a paraméterek és a nyersanyag megfelelően elő vannak készítve.

A Dreamweaver egyszerű lehetőséget biztosít arra, hogyha HTML táblázat az adatforrás, azt dinamikusan kezelje az oldal tartalmi részében, lehetőséget adva a formai módosításokra és beillesztésekre. Az importhoz használható varázsló lehetővé teszi az adatok sorbarendezését, külső adatokkal való együttműködését (képek linkjei például). Az adatbement lehet RSS hírforrás is.

1. Készítsük el a nyers adatforrást egyszerű HTML táblázatként. Minden sor legyen egy rekord, egy cella egy adat. A cellák tartalmazhatnak képet illetve ezek elérési útvonalát is. Könnyebbséget jelent, hogy ilyen egyszerű HTML táblázatot szövegszerkesztőkből és táblázatkezelőkből is exportálhatunk, illetve ha txt formában álla rendelkezésre, ezt könnyen táblázattá alakíthatjuk akár egy Word-ben is.
2. Nyissunk egy üres HTML oldalt és mentsük el rögtön.
3. A mentésnél lehetőségünk van a "Spry Data Set wizard" használatára: "Insert > Spry > Spry Data Set."
4. A varázsló 3 lépésen keresztül teszi lehetővé az adatforrás beillesztését. Elsőként a "Detect" listát állítsuk "Table" módba, a "Select Data Type" pedig HTML legyen, majd válasszuk ki az adatokat tartalmazó táblázatot. XML nyersanyagot is feldolgozhatunk ha az áll rendelkezésre.
5. Az adatforrásként szolgáló táblázat a site-ról elérhető útvonalon legyen, mert frissítésnél a végeredmény is megváltozik ha újra tudja olvasni.
6. A "Data Container" listából válasszuk a "Calendar List"-et.
7. Forrásként nem csak egy, hanem több táblázat is megadható.
8. Next.
9. A következő oldalon válasszunk ki egy-egy oszlopot, és definiáljunk rá adattípust. Lehetnek dátum, szöveges, numerikus, HTML típusú oszlopaink. Itt van lehetőség a táblázat oszlopai szerinti sorbarendezésre is.
10. Next.
11. Az utolsó oldalon dönthetjük el, hogyan jelenjen meg a táblázat végső formája. Alapvetően három forma közül választhatunk: Table, Master/Detail, Stacked. Saját egyedi Layout készítésére is lehetőség van, illetve letilthatóak a HTML kódot tartalmazó oszlopok. A kiválasztható Layoutokról ikon tájékoztat.
12. Set Up.
13. Ezután a "Spry Data Set – Insert Master/Detail Layout" dialógus box megjelenik, itt kattanjunk az "Add" gombra a "Master Columns" terület felett.
14. Az "Add Columns" dialógusban válasszuk ki a szükséges oszlopokat a Shift billentyű segítségével.
15. Sorrendbe rendezhetjük a kiválasztott oszlopokat a "Master Columns" listában.
16. Hasonlóképpen rendezhetjük a "Detail Columns" területet is.
17. OK, Done.
18. Válasszuk a "Live View" módot. Ebben a módban a szerkesztőfelületen elvégzett akciók megjelennek az oldalon. Vigyük az egeret a létrehozott táblázat azon elemére (a "master item"), amelynek hatására megváltozik az oldal összeállítása.
19. Változtassuk meg a forrásként szolgáló egyszerű HTML táblázatot, lehetőleg valamely olyan elemét amely szerint rendezési szempont is ki van adva (dátum pl.)
20. Mentés után kacsoljunk vissza a késznek tekinthető táblázatra, és használjuk a "Refresh Design view"-t a Document Toolbar-ból.
21. A frissítés után a módosított mező nem csak tartalmilag változik, hanem a sorbarendezés korábban megadott szabályai szerint is előrébb vagy hátrébb kerül a táblázatban az adott sor.

InContext Editing szolgáltatás

Az InContext Editing szolgáltatással a szerkesztés során kijelölhetünk egy régiót az oldalból, amit a látogatók szerkeszthetnek (böngészőn keresztül). Az oldal többi részét csak a tulajdonosa szerkesztheti. A látogatók által bevitt tartalmat CSS stílusokkal előre meg lehet formázni. Készítsünk egy ilyen módosítható régiót tartalmazó oldalt, és ellenőrizzük le hogyan lehet a kijelölt részt böngészőben szerkeszteni.

1. Készítsünk egy olyan oldalt formailag, amibe blogbejegyzéseket lehet felvinni. Készíthetünk olyan szerkeszthető régiót amibe több terület is módosítható, vagy olyat ami a szerkesztések során megismételhető.
2. Válasszuk a Window > Insert menüpontot.
3. Itt az objektumok kategóriái állnak rendelkezésünkre.
4. Az Insert panelből válasszuk az InContext Editing elemet.
5. Elsőként készítsünk olyan elkülönített területeket, amelyeket a látogató szerkeszthet. Itt három választási lehetőség áll rendelkezésre: ismétlődő régió létrehozása, egy szerkeszthető régió létrehozása, és az oldalra vonatkozó CSS szabályok managelése, kezelése, beleértve a látogató által szerkesztett területet is.
6. A módosítható tartalmat egy olyan részbe kell (lehet) beszúrni amelyet

tag definiál.
7. Az "Insert" panel "InContext Editing" kategóriájából válasszuk a "Create Editable Region" elemet.
8. Az oldalon egy kék fül és keret fogja jelezni, hogy az adott régió szerkeszthető lesz (mint DIV-es Layerek esetén). A Properties panelen beállítható, hogyan legyen szerkeszthető a kijelölt terület. Mint az oldal készítője lehetőség van korlátozásokra.
9. A Properties panelen, válasszuk azt „Uncheck all” parancsgombot. Ekkor kikapcsoljuk a szövegformázás összes korábban bekapcsolt ezáltal engedélyezett lehetőségét.
10. A szerkeszthető régióhoz hozzárendelhetünk egy CSS-t, de engedhetünk egy kis beleszólást a látogatónak. Az "Options" felirat melletti ikonok közül azokat a lehetőségeket pipáljuk ki, amelyeket engedélyezni akarunk.
11. Több ilyen területet is kijelölhetünk, amelyek egymástól függetlenül működnek majd. Más és más engedéllyel láthatjuk el őket a Properties paletta értelemszerű használatával.
12. A fent leírt módosíthatóság csak DIV-tagen belül engedélyezhető. Ettől függetlenül előfordulhat, hogy egy nem DIV utasítással formázott régiót választunk erre a célra. Ekkor egy dialógus boxot kapunk amiben eldönthetjük hogy a szelekcióra akarunk-e egy új DIV-taget definiálni, vagy a "szülő" tag-et akarjuk használni és módosíthatóvá tenni.
13. Egy ilyen művelet után is a Properties palettán kell beállítani mindazt amit tiltunk vagy engedélyezünk a user számára.
14. Ha elkészítettük az összes módosítható területet egyenként a megfelelő paraméterekkel, ki kell jelölni egy olyan területet, amely ismételhető régióként működik. Ebbe a területbe beletartozhat több egyenként módosítható terület is. Egy blog-szerű oldal esetén a téma, szerző, dátum, tartalom, cikkek esetén cím, közcím, bevezető, törsz, stb... Ha ezeket egyenként meghatároztuk, az egészet kijelölve tehetjük megismételhetővé az előzőekhez hasonlóan DIV-tag segítségével.
15. Az "Insert" panel "OnContext Editing" régiójából a " Create Repeating Region" elemet válasszuk. A kiválasztásnál fontos, hogy a " Repeating Region" tartalmazza az összes szükséges "Editable Region"-t.
16. Az "InContext Editing" szekcióból válasszuk a "Manage Available CSS Classes" elemet.
17. A feljövő dialógus boxban megjelennek a rendelkezésre álló CSS stílusok, azok amelyeket külső file-ban definiáltunk illetve csatoltunk az oldalhoz. Innen válasszunk egyet, és OK.
18. Mentsük el az oldalt. A publikálás után a kijelölt régió módosítható lesz, amennyiben nem felejtjük el feltölteni a szükséges JavaScripteket és CSS stílusokat.

SWF file-ok beszúrása

Az SWF file-ok az Internet oldalak népszerű elemei. Reklámok, nyomógombok, menürendszerek, komplett site-ok épülnek fel belőle. Az ilyen animációk beszúrása egyszerű drag-and-drop módszerrel is lehetséges. Problémát okozhat viszont, ha a kliensoldalon egy régebbi verziójú Flash lejátszó van üzembe helyezve. Ekkor előfordulhat hogy a beszúrt animáció nem működik vagy meg sem jelenik (képzeljük el ezt egy menürendszer esetében). Erre kínál olyan megoldást a Dreamweaver, ami leellenőrzi a Flash lejátszó verziószámát, és ha kell frissít illetve felajánlja a frissítést.

1. Készítsünk egy oldalt amibe Flash grafikát vagy animációt szeretnénk beszúrni. Mentsük el.
2. A Window menüpből válasszuk az "AP elements" menüpontot. AP: Absolutely Positioned.
3. Szúrjunk be a megfelelő helyre egy SWF file-t: Insert > Media > SWF. A beszúrt rész könnyedén lejátszható ellenőrzés céljából a szerkesztőfelületen. A Properties panelen ezt a célt szolgálja a Play és a Stop gomb. A Dreamweaver az oldalhoz csatolta a szükséges file-okat.
4. Mentsük el az oldalt.
5. Feltöltésnél a program rákérdez, feltöltse-e a működéshez szükséges csatolt elemeket is.

Végül...

Míg a nyomdaipari programoknak megfelelő fejlődési irányt biztosít az Internet felé történő nyitás, addig az Internetes programok számára a fejlődés alternatívája az interaktivitás. Az ezt szolgáló kliensoldali megoldások szépen fejlődnek, és egyszerű esetekben kisebb látogatottsággal számolva vagy belső vállalati célokra megfelelő megoldást kínálhat erre a célra a program által generált JavaScript. A Dremveawerben ez fejlődött leginkább a CSS kezeléssel párhuzamosan. Mindemellett az arra való törekvés is látszik, hogy ezek a korábban komoly szakértelemmel, szinte csak szerveroldalon megvalósítható interaktív funkciók, a HTML szerkesztők vagy designerek számára is érthetőek és használhatóak legyenek.