Facebook RSS feed
Zveme vás v pátek 31.10. na vánoční sraz komunity itnetwork.

Tvorba jednoduchého webu ve Flashi (AS3)

Zpět do sekce Flash - AS3

Často se jistě shledáváte s weby, které disponují jistými animacemi a mají jakési kouzlo designu - jsou vytvořené ve flashi. Já vám zde ukážu jak takový jednoduchý web vytvořit.

Budeme potřebovat:

Adobe Flash CS5 - trial verzi možno stáhnout zde
(pozn. příklad budu prezentovat na anglické verzi)

Produkt nainstalujete jednoduchým klikáním na ‘next‘ a odsouhlasením licenčních podmínek.
Po instalaci program spusťte.

Obrázek1

Z nabídky zvolte ActionScript 3.0 a pustíme se do práce.

Obrázek2


Uživatelské prostředí (pozn. Vy jej máte jinak rozložené pouhým kliknutím a tažením lze nabídky přesunout dle libosti)

  1. - Tool Bar - Panel nástrojů - zde jsou nástroje, které budeme používat při kreslení a modifikování našich budoucích objektů na webu.
  2. - Time line - časová osa - zde budeme rozkládat snímky, které se budou v naší animaci přehrávat a pomocí action scriptu jim budeme říkat, kdy se mají přehrát a dávat jim pokyny.
  3. - FPS (fraps per second) - počet snímků za sekundu - optimálně tak 30 (podle toho na jakou animaci na náš web může být i standardních 24).
  4. - Size - velikost plátna na které budeme kreslit. Zvolil bych velikost úměrnou naší stránce animace se roztáhne na celou plochu resp. můžeme její velikost měnit.  Např. 640 x 480 nebo ponechte původní hodnotu záleží na tom, jak moc se chcete roztahovat a jak velké objekty chcete kreslit.
  5. - Plátno - zde budeme kreslit a umísťovat aktivní prvky našeho flashového webu.


Pozadí - jsou dva způsoby (doporučuji přečíst oba, ale udělat to tím druhým)

1. Způsob
Vezmeme z lišty nástroj Rectangle tool Obrázek3 napravo u plechovky (Fill color) vybereme barvu pozadí - zvolte takovou jakou uznáte za vhodnou, já volím modrou.  (pozn. Symbolem Obrázek4 si můžete namíchat vlastní odstín). U Stroke color (obrys) zvolte přeškrtlý obdélník (žádná barva).  A poté roztáhněte přes plochu obdélník.

Nyní klepněte na černou šipečku v panelu nástrojů Selection tool (V) klepněte jí na pozadí které jste nakreslili tím jej označíte a stiskněte F8.

Obrázek5

Name - název - např. pozadi
Type - typ (aneb k čemu hodláme objekt použít)
Movie Clip (MC) - animovatelný objekt s možnostmi akce (ActionScriptu - AS)
Button - tlačítko - normální tlačítko s možnostmi akce (AS) a stylováním že se při přejetí myši změní nebo při kliku atd ...
Graphic - grafika - žádná akce jen stojí :)
My vybereme Graphic a klepneme na OK.

To byl ten složitý :D ale také se dá upotřebit když potřebujete speciální pozadí např. obrázek či nějaké klikyháky...

2. Způsob

Pod rozlišením je Stage- tam jednoduše vyberete barvu pozadí a done :)

Nyní si rozvrhneme design webu. Já bych to viděl tak, že nahoru dáme obrázek doleva menu a napravo bude obsah. Jednoduché a prosté :)

Obrázek6

Vložíme logo.

Nahoře v nabídce zvolíme záložku INSERT - New symbol

Name -např. logo_webu
Type -MC (po kliku na logo nás přesměruje na hlavní stránku u graphic by to nešlo)

Nyní se nám objevilo prázdné plátno.

Máme dvě možnosti - Naimportujeme obrázek ze souboru - FILE - IMPORT - Import to stage (zk. Ctrl + R).
Nebo něco nakreslíme - Rectangle tool (R), Pencil tool(Y), Text tool(T).... ve můžeme použít je to na vás.
(pozn. U text tool si dejte pozor na nastavení nejlepší je nastavit - Classic text, Static Text  a dole anti-alias for Readabiliry)

Poté objekt nebo symbol jak chcete :) vycentrujeme - záložka napravo nahoře - Align. (pozn. Pokud ji tam nemáte tak záložka - window - Align (zk. Ctrl + K)).

Obrázek7


Horizontálně a vertikálně ke středu.
Align to stage - zarovnává se absolutně přímo ve stage - pokud nemáte zašrtnuté zarovná se jen relativně.

Nyní máme logo hotové a tak se pod časovou osou překlikneme zpět na Scénu 1.

Naprav nahoře vybereme Library (pokud není - WINDOW nebo Ctrl + L).
A přetáhneme objekt logo_webu a umístíme jej nahorů na plochu.

Můžete si jej pomocí align zarovnat na top a horizontálně vycentrovat.

LOGO je hotové. (později poupravíme pomocí AS)

Nyní menu.

Zase vložíme symbol - MC. (INSERT - New Symbol (zk. Ctrl + F8)).

Zvolíme si rectangle tool , vybereme barvičku třeba i okraje a nakreslíme menu o rozměrech asi tak 150 x 50 (š. v.). (můžete pak vybrat ctrl + a dát záložku info a rozměry si změnit).

Horizontálně vycentrujeme a zarovnáme vertikálně na TOP.

Poté na časové ose klepneme na snímek 10 pravým myšítkem a zvolíme Insert keyframe. To samé uděláme u snímku č. 20.

Obrázek8

Nyní klepneme na snímek 10 levým myšítkem klepneme do pole stiskneme Ctrl + A a napravo zvolíme záložku transform (ctrl + T).

Obrázek9

Zkontrolujte Constrain (mění velikosti souměrně musí být rozpojeno)
U šipeček nahoru a dolu přepíšeme hodnotu na 300% a potvrdíme enterem.
V align zarovnáme na TOP.
A nyní uděláme kouzlo :D.
Klepneme mezi 1 - 10 snímek pravým tlačítkem a zvolíme Create shape tween, to samé uděláme mezi 11 - 20 snímkem.

Obrázek10

Časová osa se nám takto změní a pokud zmáčkneme ENTER tak se nám menu krásně rozkládá a skládá. Pokud nefunguje zkontrolujte zda máte v záložce Control  - povoleno -Enable live preview.

Nyní budeme chtít přidat na scénu tlačítka.

Ctrl + F8 a vytvoříme čtyři MC (v závorkách jsou uvedeny texty které u nich vytvořte) - menu_button (otevřít menu), close_menu (zavřít menu), test_button (zobrazit text), hyperlink_button (hyperlink).
Pozn. V Properties u textu lze nastavit schopnosti - Readonly - text nelze vybrat lze jen číst (nejde označit myší), Selectable - text lze vybrat, Editable - text lze vybrat a editovat

Je lepší doplnit samotné písmo ještě barevným nebo průhledným obdélníkem aby tlačítko lépe kolidovalo s myší.

Nyní když máme tlačítka vrátíme se zpět k menu - Library a poklepeme na menu. (pozn. Klepejte tam jak je ta ikonka)

Vytvoříme novou vrstvu

Obrázek13

Vložíme do ní dva prázdné keyframy (Insert - Blank KeyFrame) u snímku 1 a 10

Poté klepneme na Vrstvu 2 a snímek č. 1 a přetáhneme z library menu_button.

Poté na Vrstvu 2 a snímek 10 a tam vložíme test button.

Klepneme na Vrstvu 2 a snímek 1 pravým myšítkem a dole zvolíme actions.
Otevře se nám okno kde můžeme psát Action Scriptem.
Napíšeme jednoduché - stop();
To samé uděláme u Vrstvy 2 a snímku 10.

Tento jednoduchý příkaz zajistí že ve výsledné animaci se přehrávání zastaví na začátku když jej pak donutíme aby se přehrála tak se zastaví na 10 a pak až jí dovolíme pokračovat skončí zase u prvního snímku.

Nyní se vrátíme na scénu 1 a vložíme menu do pole, stiskneme (V) a v properties napište do instance name - menu .

Obrázek14

Vytvoříme další symbol - text_area , typ - MC

Nakreslíme čtverec o rozměrech např. 250 px a zarovnáme jej horizontálně ke středu a vertikálně k topu.

Pomocí text tool napíšeme text např. Vítej

Na časové ose vytvoříme keyframe u snímku 2 a text přepíšeme na TEST.

A u obou napíšme do actions - stop();

Vrátíme se na scénu 1 a vložíme text_area do pole.

Pomocí nástroje Free transform tool  (zk. Q) si jej můžete převzorkovat.

Poté v properties napište do instance name - text_area

Nyní dáme web do chodu poklepeme na logo a dole na ose klepneme na 1. snimek a dáme actions.

function logo_webu(evt:MouseEvent):void {
  Object(root).text_area.gotoAndStop(1);
}

addEventListener(MouseEvent.CLICK, logo_webu);


Příkaz říká - po klepnutí - objekt.text_area - zobrazí snímek č. 1 z jeho časové osy a u něj se zastavý

Ikona zaměřovače se hodně hodí když hledáte cestu nemusíte přemýšlet (dole si můžete vybrat mezi relativní a absolutní cestou jen krátce příklad na adresách - http://itnetwork.cz/…a/soubor.php - absolutní, slozka/soubor.php - relativní - použít můžete co chcete záleží na situaci když se např změní název devbook.cz se přejmenuje na itnetwork.cz a použijete absolutní tak to nebude fungovat a pokud použijete relativní a změní se složka tak to taky nepůjde např (http://itnetwork.cz/…a/soubor.php, soubor je ve slozce slozka2 a odkazuje na soubor ve slozce slozka - ../slozka/sou­bor.php) pokud slozku2 umístíte např do dalšího adresáře nebude směrování fungovat)

Obrázek15

Nyní poklepeme na menu a napíšeme trochu kódu do něj.

Dáme první snímek a poklepeme na tlačítko menu (klepnete mimo pole a pak na tlačítko) a dole na ose dáte actions.

function menu_button(evt:MouseEvent):void {
   Object(root).menu.gotoAndPlay(2);
}

addEventListener(MouseEvent.CLICK, menu_button);

Description - Po klepnutí bude pokračovat v animaci (zastaví se u desítky kde je stop();)

Vrátíme se zpět dáme snímek 10

  • menu_close - actions
function menu_close_button(evt:MouseEvent):void {
   Object(root).menu.gotoAndPlay(11);
}

addEventListener(MouseEvent.CLICK, menu_close_button);


(no comment šak víte :) kdo ne je to o pár řádek výše)

Do hyperlink-button :

function test_button(evt:MouseEvent):void {
  var url:String = "http://www.itnetwork.cz/";
  var request:URLRequest = new URLRequest(url);
  navigateToURL(request, '_blank');
}

addEventListener(MouseEvent.CLICK, test_button);

A do test_button dáme to samé jako do logo_webu:

function logo_webu(evt:MouseEvent):void {
   Object(root).text_area.gotoAndStop(2);
}

addEventListener(MouseEvent.CLICK, logo_webu);


Krása :) nyní vítězoslastně stiskněte CTRL + ENTER a pokochejte se vaším výtvorem.

Můžete udělat úpravy přidat nějaký text grafiku pohrát si s tím co jsme se naučili a web dovést k dokonalosti.

Export

Prvně web uložíme jako *.fla projekt - Ctrl + S

A poté dáme File - Publish - web se vyexportuje do složky do které jsme uložili *.fla projekt.

Ve File - Publish Settings si můžete nastavit co se má vyexportovat a nějaké parametry.

Najďete soubor jmeno_projektu.html a otevřete jej v textovém editoru.

Všem mezi tagem <object ... ></object> je naše flashová animace takže pokud budete někdy chtít vložit na stránky něco co vytvoříte ve flashi stačí zkopírovat vše od tohoto tagu až po konec tohoto tagu včetně tohoto tagu a vložit to do zdrojového kódu vašich stránek.

Pokud chcete web roztáhnout přes celou stránku najděte si v tagu object - width a height a hodnoty změňte na ‘100%‘. Ale moc to nedoporučuji zejména pokud používáte bitmapové obrázky stratí při deformování kvalitu.  Web vycentrujte připsáním align=“center“ do tagu <div> který je před object a nebo jednoduše napíšeme nad tag <object ...> tag <center>a pod </object> zase center ukončíme </center>.

Tak a teď pokud jste to dokázali si můžete říct sakra sem dobrý/á umím dělat jednoduchý weby ve Flashi, cheche :D.
Vám co se něco nevyvedlo přidávám zdrojové kód jako soubor ke článku, abyste se mohli podívat, kde je chyba.


 

Stáhnout

Tvorba jednoduchého webu ve Flashi (AS3) 211x (369.32 kB)

Aplikace je včetně zdrojových kódů v jazyce Flash

 

Článek pro vás napsal David Jančík (sczdavos)
Avatar
Autor je vášnivý programátor v .NET C# a PHP. Nezná slovo "nelze", nebojí se zkoušet nepoznané a pronikat do nových technologií. Studuje střední školu informačních technologií v Brně.

Jak se vám líbí článek?
Celkem (2 hlasů):
4444 4


 


Všechny články v sekci
Flash - AS3
Flash - ActionScript 3, hry, programy, příklady se zdrojovými kódy v Adobe Flashi.
Další článek
Vlastní spořič obrazovky za pomocí Flashe
Tutoriál na vlastní spořič obrazovky za pomocí mocného Adobe Flashe, vytvoříme si animaci motorkáře, kterou následně převedeme programem InstantStorm.


 

 

Vaše komentáře:
Zobrazit starší komentáře (2)

Avatar
Raiper34
Redaktor
Avatar
Raiper34:

Ouh to je fakt blbá rýchlosť, ja tu nemám prístup skoro na žiaden net ale chytám tu mobilný net na 1 paličku XD ale rýchlosť má 4000 kbps

Odpovědět 10.12.2011
Posledná vydaná hra: http://www.islandsoft.cz/index.php?art=hra-akcna-space-resistance
Avatar
Darkmagic
Redaktor
Avatar
Darkmagic:

Vim, alůe mám smlouvu...

Odpovědět 10.12.2011
Nejhorší je, když myslíš, že víš
Avatar
Darkmagic
Redaktor
Avatar
Darkmagic:

Závidim,
hele, ty skripty jsou dost podobný Game makeru

Odpovědět 10.12.2011
Nejhorší je, když myslíš, že víš
Avatar
Darkmagic
Redaktor
Avatar
Darkmagic:

Dík, zatim to rozjíždim. Má to problém- na konci instalace se stahuje nějaký 200Mb balíček, což je pro mě dost zabíjející... :D . Ale na to že mám tak vymáklej komp s win7 je to dost divný... Jednou, (to ke mě byla asi nakloněná družice) jsem dosáhl rychlosti 200kbps. To bylo maximum, víc se mi nikdy nepovedlo...

Odpovědět 10.12.2011
Nejhorší je, když myslíš, že víš
Avatar
Darkmagic
Redaktor
Avatar
Darkmagic:

No, přátelé, nový stahovací rekord:
Bylo to 40 bajtů/s
a klesalo... nakonec 10bajtů/s
9,8,7,6,5,4,3,2,1 a nakonec 0 a bylo to v pr**** ;(

Odpovědět 10.12.2011
Nejhorší je, když myslíš, že víš
Avatar
Odpovídá na Darkmagic
David Jančík (sczdavos):

Nemyslíš, že tohle není úplně vhodné místo pro rozebírání připojení k internetu? Myslím tím psát pod tutoriál o testování rychlosti.

Odpovědět 10.12.2011
Čím více času dostaneš, tím méně ho máš.
Avatar
adam
Člen
Avatar
adam:

a to je placený prodram ne ? :(

a ještě odkud jsi stáhl Adobe Flash Professional CS6 ?

děkuji za odpověď :)

 
Odpovědět 5.6.2012
Avatar
adam
Člen
Avatar
adam:

to mě se to stáhlo za chvíly

[IMG]http://www­.speedtest.net/re­sult/1991773288­.png[/IMG]

ale chce to po mě licenci ! :(

 
Odpovědět 5.6.2012
Avatar
adam
Člen
Avatar
adam:

to mě se to stáhlo za chvíly :)

<img border="0" src="http://w­ww.speedtest.net/re­sult/1991773288­.png">

ale chce to po mě licenci !:(

 
Odpovědět 5.6.2012
Avatar
adam
Člen
Avatar
adam:

rychlost měho půřipojení je zde :http://www.speedtest.net/…91773288.png

 
Odpovědět 5.6.2012

 

Zobrazeno 10 z 12 zpráv

Zobrazit všechny komentáře k článku

Přidat novou zprávu

Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlaš. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.