Macromedia Fireworks MX

</p>Macromedia Fireworks MX je součástí balíku Macromedia Studio MX se zaměřením na webovou grafiku. Jedná se tedy o grafický editor s cílem ulehčovat webdesignérům práci při tvorbě grafiky – prostředí stránek, tlačítka, klikací mapy, animované GIFy a další.

ilustrator.cz web o Adobe Illustratoru a vektorové grafice Na adrese ilustrator.cz jsem spustil nový web o Adobe Illustrátoru a tvorbě vektorové grafiky (včetně diskuzního fóra), který pravidelně zásobuji novými tutoriály, tipy, triky a odkazy na zajímavé zdroje, které by se vám při práci mohly hodit.

Jelikož FMX pochází z rodiny MX, obsahuje velmi podobné (a nutno podotknout i velmi zdařilé) pracovní prostředí jako ostatní aplikace z tohoto balíku. Pracujete-li tedy například s Dreamweavrem MX či s Flashem MX, nebude vám činit žádné potíže vyznat se ve FMX. Velkým kladem prostředí je jeho přehlednost, možnosti nastavení, množství klávesových zkratek (ty si můžete samozřejmě změnit k obrazu svému), skriptování, dávkové zpracování dat a kvalitní nápověda.

FireWorks MX a jeho přehledné prostředí klasické pro všechny aplikace z balíku MX.

Jak už bylo řečenov úvodu, FMX je grafický editor a to plnohodnotný, lze jej tedy používat nejen na webovou grafiku (i když ta je jeho základním cílem). Umožňuje pracovat s bitmapami, ale i s vektorovými objekty, zvládá práci ve vrstvách, používání masek, cest, textů, filtrů a mnohé další.

Rozřezávání obrázků

Při vytváření grafického návrhu webu se většinou nakreslí jeho vzhled, poté se rozřeže na malé kousky a za pomocí jazyka HTML (zejména tabulek) se tyto kousky sešijí a vytvoří tak výslednou kompozici. Malé obrázky vzniklé rozřezáním mají několik výhod: opticky rychlejší načítání stránek (návštěvník vidí, jak se stránka postupně načítá. V případě, že by byla vytvořena pouze za pomocí jednoho velkého obrázku, nevidí nic, až po načtení celého velkého obrázku se tento naráz zobrazí.) a použití různých formátů pro jednotlivé kousky a tudíž lepší optimalizace a menší výsledná velikost. Hlavním důvodem je možnost snadno přiřadit každému úlomku nějakou akci (odkaz) a vytvořit tak například animované tlačítka.

Máme-li podkladový obrázek, můžeme přistoupit k jednoduché operaci – rozřezání. Stačí zvolit „Slice Tool“ a začít řezat (označovat aktivní obdélníky ze kterých budou tlačítka). Tímto nástrojem vytvoříme obdélník označující hranice (je označen zelenou barvou). Zvolenému výřezu lze nastavit některé parametry, které se objeví ve výsledném HTML souboru (název obrázku, cíl a typ odkazu, alternativní text) a také způsob jeho optimalizace.

Jiný způsob vytváření aktivních ploch obrázku se skrývá pod klikacími mapami. V takovém případě se obrázek nerozřezává, pouze se na něm definují aktivní oblasti za pomoci nástroje „Hotspot Tool“.

Všechny útržky a aktivní plochy se zapisují do speciálních vrstev obrázku, které se řadí do vlastní složky vrstev. Není proto problém dále upravovat obrázek či hranice aktivních oblastí.

Po vytvoření aktivních tlačítek by to chtělo ještě trochu vylepšit jejich vzhled – například vytvořit animaci promáčknutí při najetí myši. Fireworks toto zvládne levou zadní. Stejně jako přiřazení dalších akcí (zpráva ve stavové řádce prohlížeče, Nav bar, popup menu, rollover…). Výsledek se opět zapíše v podobě HTML. FMX umí využívat i JavaScript, proto není divu, že při vytváření výsledné stránky nabízí přednačtení obrázku do cache prohlížeče (to se implementuje právě výše zmíněným JavaScriptem v kódu stránky).

Dalšími objekty, které lze vytvářet, jsou tlačítka. U těch se definují čtyři základní stavy (normální, najetí myší, zmáčknutí a zmačknutí s myší nad ním). Snadno se vytvoří základní šablona a od ní se odvodí jednotlivé instance tlačítek, kterým se pouze pozmění nápis. Když je potřeba později změnit jejich vzhled, není nic snazšího – postačí zeditovat šablonu. Z tlačítek se tak snadno vytvoří navigační pruh a od něj je to jen kousek k PopUpMenu. Jeho výroba je ještě jednodušší. Postačí nadefinovat jednotlivé položky, jejich vzhled a akce, které se mají vykonat.

Animace

Mezi základní kameny webové grafiky patří animované GIFy. FMX podporuje a zpříjemňuje tvorbu i těchto grafických objektů. Kdo zná Flash MX, jistě si vzpomene, jak se v něm vytváří animace. A velmi podobně to funguje i ve FMX. Jedním ze způsobů je nadefinování objektu a určení vlastností jeho animace – odkud kam se má přesouvat, jak rotovat či měnit svou viditelnost a velikost. Druhým způsobem je animace krok za krokem, obrázek za obrázkem. I k této náročnější práci je k dispozici několik vylepšení. A to zejména „Onion skinning“, kdy pod editovaným rámečkem animace prosvítají předchozí (nebo i následující snímky), možnost editace kroků animace (přesouvání a mazání a snímků, či objektů v nich umístěných) a práce s vrstvami. Animace je možné exportovat a importovat do různých formátů (včetně několika souborů, kde každý představuje jeden snímek).

Optimalizace

Jelikož se jedná o grafiku pro web, bylo by slušné (alespoň vůči modemistům), všechny používané obrázky náležitě zoptimalizovat aby byly co nejmenší (mám na mysli velikost výsledného souboru a nikoliv rozměry obrázku). K tomu slouží paletka „Optimize“, kde se nastavují příslušné parametry optimalizace. Základem je určení formátu obrázku (gif nebo jpg), jeho vlastností (například u jpg stupeň komprese) a počtu barev (týká se zejména souborů typu gif). Méně znalejší uživatelé můžou použít exportního kouzelníka, který se jich vyptá na několik detailů (k čemu ten obrázek má být použit, jak velká by měla být jeho velikost) a nabídne pak výsledek v podobě náhledu, kde si můžou dále upravovat parametry výsledných formátů a porovnávat, který z nich je lepší. Při editaci jsou vždy k dispozici tři záložky. První slouží k náhledu a uvádí se zde výsledná velikost souboru (a také doba, jak dlouho se bude stahovat). Další dvě záložky obsahují okno s dvěmi či čtyřmi náhledy – originální obrázek a obrázky se zvolenými formáty a parametry optimalizace.

Další vymoženosti

Vytvořenou grafiku lze snadno otestovat v praxi, stačí si nastavit ve kterém prohlížeči (případně ve kterých) se má výsledek zobrazit. Součástí aplikace je i knihovna již vytvořených tlačítek, animací a dalších grafických objektů. FMX lze propojit s dalšími aplikacemi nejen od firmy Macromedia (Dremweaver, Flash, FreeHand, …) ale například také s Adobe Photoshopem.

Závěr

FMX je výborný grafický editor nejen pro webovou grafiku, který využijí jak profesionálové tak i začátečníci, kteří neovládají JavaScript ba ani jazyk HTML. Přesto můžou díky tomuto produktu snadno navrhovat interaktivní grafický design HTML stránek. Profesionálové více využijí pokročilejších možností programu jako je například optimalizace, dávkové zpracování, skriptování a další.

Plusy

  • Intuitivní, přehledné prostředí
  • Snadné vytváření interaktivní webové grafiky
  • Generování HTML a JavaScriptového kódu
  • Možnosti importu a exportu.

Mínusy

  • Možnosti animace by se daly ještě rozšířit.

Požadavky na systém

Microsoft Windows

  • 300MHz Intel® Pentium® II Processor
  • Windows 98 SE, ME, NT® 4 (Service Pack 6), 2000, XP
  • 64 MB RAM (128 MB doporučeno)
  • 80 MB HDD
  • 800×600 256 barev
  • CD-ROM

Macintosh®

  • Power Macintosh G3 Processor
  • OS 9.1 nebo novější, OS X 10.1 nebo novější
  • 64 MB RAM (128 MB doporučeno)
  • 80 MB HDD
  • 800×600 256 barev
  • CD-ROM

Testováno na

  • 466 MHz Intel Celeron
  • Windows 2000
  • 256 MB RAM
  • 40 MB HDD
  • 1024×768 True Color
  • CD-ROM

Komentáře

1
7 listopad 2005, 16:02

Moc pěkný článek. S firefoxem pracuji již dlouho a jsem spokojený, proto vím o čem to je.

Nová verze ze Studia 8 je celkem zdařilá a myslím že při tvorbě webové grafiky může snadno konkurovat i photoshopu.

 
2
7 listopad 2005, 22:08

Mno to tedy nevím. Já si myslím, že PhotoPost má mnohem mnohem více možností, a že ho jen tak něco nenahradí. Ale to je také otázka toho, co člověk více zná, co používá každý den… Některé věci by se daly ve Firefoxu dělat stejně jako ve Photoshopu, ale mnohé bohužel ne.

 
3
9 listopad 2005, 11:25

Pravda, Petře. To je jen můj osobní názor.

Myslím, že Photoshop je na webovou grafiku dokonalý nástroj, ale většinou postačí i Fireworks, který je také specialista. Osobně ho používám raději, jen v nejnutnějších případech (složitá grafika) sáhnu po PS.

Pravda je, že Fireworks je stále ochuzen o některé funkce – nejvíc mi vadí nedokonalé vyhlazování hran (layout webu s kulatými rohy ve FW prostě skoro nejde udělat :-) ) Na to je Photoshop. Potom mi také vadí složité zvětšování objektů – opět kulatý layout a chcš jej zvětšit → hrany se „rozmažou“, posunují se barvy, prostě hrůza. Nebo dělám něco špatně.

 
4
cikorsky
9 leden 2007, 09:45

Zdravim,

chtel bych se zeptat – v praci delam taky nejakou grafiku ve FIreworks MX a jsme spokojeny – nicmene, nedavno mi program začal tuhnout – a to tak, že znenadani proste zatuhne a nejde s nim nic udelat než restartnovat počítač. Chtel jsme se zeptat, jeslti nevít, zda nejde nekde sehnat najeký patch, service pack, který by to rešil – hledám na netu jako blázen, ale zatim neuspešne. O tom patchi se zminil prodejce, od ktereho jsme program ofic. kupovali. V počítači problem nabude, u jinych aplikaci mi to nedela – jen u fireworksu. Myslel, jsme nejdrive, že je to tim, že oteviram velke soubory ale program dokaže zatuhnout i pri male webové grafice. Upgrade na nový Fireworks 8 mi zrejme neprojde, protože jsme zkoušel 30 trial verzi a zatuhla mi taky… takže nevim co s tim – Naučil jsem se ukladat do 5 minut, ale to asi neni rešení… neví nekdo, jak z toho ven?

 
5
9 leden 2007, 11:52

[4] asi bych to zkusil nainstalovat na jiný počítač a pokud by to nepomohlo, tak kontaktovat podporu od Macromedie. Nic lepšího mě nenapadá.

 

Přidej komentář

Pište prosím slušně, s diakritikou a k věci. Dodržujte pravidla a využijte možnosti formátování uvedená pod formulářem.

Email nebude zveřejněn

Pravidla a možnosti formátování

  • Nepoužívejte HTML značky, blog podporuje formátování texy. Nový odstavec získáte 2x odřádkováním, odkaz: "text odkazu":odkaz, **tučně**, *kurzíva*
  • Adresy začínající na http:// budou automaticky převedeny na odkazy
  • Jediné dvě povinné položky formuláře jsou Jméno a zpráva
  • Na předchozí komentáře odkazujte zápisem [2]

 

Sekce