Daudzi savās mājaslapās vēlas iekļaut bildes (tas taču ir loģiski, ne tā?). Šīs bildes ir iespējams apvienot vienā lielā kopā, ko sauc par galeriju vai albumu. Jūs noteikti esat redzējuši dažādus albumus, pasniegtus interesantos un radošos veidos.

Šajā pamācībā es parādīšu, kā to izdarīt pavisam elementāri un ar ļoti neliela koda daudzuma palīdzību.

*Pamācība ir veidota, izmantojot Adobe Flash CS5, kura CS6 bezmaksas 30 dienu izmēģinājuma versiju var iegūt šeit.

1. Startējam savu Flash versiju un pie jauna projekta izvēlnes, izvēlamies Create New - ActionScript 3.0.

 

2. Izveidojam pavisam vienkāršu albuma dizainu. Ja ir nepieciešams, varam nomainīt projekta platuma un augstuma vērtības iespēju logā (Window-Properties, vai Ctrl+F3). Visu patreiz zīmējam pirmajā kadrā (frame).

 

 

 

 

 

 

 

 

 

3. Izveidojam pogas, priekš šķirstīšanas uz priekšu un atpakaļ.

Lai to izdarītu, dodies uz Insert-New Symbol, vai arī spied Ctrl+F8. Nosaukumā rakstīsim btn1 un btn2, attiecīgi pogai, kuru vēlies izveidot.

Pie Type izvēlamies Button. Ieķeksējam Export for ActionScript un spiežam ok. Parādīsies brīdinājums, kuru arī varam droši apiet un spiest Ok.

Tagad mēs būsim pogas zīmēšanas logā, kurā arī izveidojam savu pogu (loģiski, viss process būs jāatkārto 2 reizes, jo mums ir nepieciešamas 2 pogas).

Kad tas ir paveikts, izvelkam abas pogas no savas bibliotēkas (library - Ctrl+L) un novietojam tās nepieciešamajās vietās.

Ei! Neaizmirsti saglabāt izmaiņas, ja nu notiek kas neparedzēts! Nosauksim savu projektu par galerija.fla4. Piešķiram pogām Instance Name!

 

Lai mēs varētu ar šīm pogām darboties, ir nepieciešams piešķirt tām speciālu nosaukumu. Lai to izdarītu, spiežam uz pašas pogas, tad veram vaļā iespēju izvēlni (Properties- Ctrl+F3).

Pogām norādam attiecīgo nosaukumu, manā gadījumā, tās ir btn_next un btn_prev (pogu nosaukumiem būtu jābūt saprotamiem un vienkāršiem. Tādiem, lai pēc 2 mēnešu prombūtnes jūs uzreiz atcerētos, kas tie par zvēriem).

 

 

 

 

5. Darbības ar kadriem.

Ir pienācis laiks nokopēt vairākus kadrus un sākt rakstīt minimālo daudzumu koda.

Galvenajā laika joslā (Timeline - Ctrl + Alt + T) nospiežam uz nākošā kadra ar labo peles klikšķi un spiežam Insert Keyframe. Šo procesu atkārtojam, kamēr jums ir nepieciešamais skaits kadru (būtu jāatbilst bilžu skaitam).

6. Importējam savus attēlus.

Failu importēšana ir elementāra. Tai ir divi veidi:

  • Nepieciešamos attēlus pārvelc uz bibliotēku
  • Spied File-Import-Import to Library

Ātrāks, protams, ir pirmais veids.

Ņem vērā, ka bildēm vislabākie formāti ir *.PNG vai *.JPEG, jo tie aizņems vismazāk vietas, tādējādi ātrāk ielādēsies aplikācija.

Kad visi nepieciešamie attēli ir importēti, ir laiks tos pievienot laika joslai. Tas ir tieši tik pat elementāri. Vienkārši nospied uz nepieciešamā kadra un pārvelc attēlu tam paredzētajā vietā. Ja attēla izmērs neatbilst, izmaini to ar Flash iebūvētajiem rīkiem, ko šajā pamācībā neapskatīšu.

7. Kods!

Kad viss iepriekšējais ir pabeigts, ir laiks ķerties klāt kodam!

Sākumā nospied uz paša pirmā kadra laika joslā, un tad nospied F9, kas atvērs rīcību (Actions) paneli.

Pašā sākumā ierakstīsim

stop();kas neļaus mūsu kadriem nemitīgi skriet uz priekšu.

Tālāk mūsu pogām ir nepieciešams pievienot "klausītājus", jeb listeners, kas gaidīs mūsu norādīto darbību:

btn_next.addEventListener(MouseEvent.CLICK, nextImage);

Apskatīsim kodu dziļāk.

btn_next.addEventListener - pie "klausītāja" pievienošanas ir jānorāda, kuram objektam mēs to vēlamies veikt. Šajā gadījumā - btn_next

(MouseEvent.CLICK, nextImage); - Ar MouseEvent mēs norādam to, ka šī rīcība būs saistīta ar peli, kur CLICK norāda konkrētu rīcību - klikšķi. nextImage ir funkcija, kura tiek izpildīta pēc rīcības.

Tālāk ir nepieciešams definēt funkciju:

function nextImage(e:MouseEvent):void{
    nextFrame()
}Domāju, ka šeit visam būtu jābūt skaidram, izņemot to, ka nextFrame() jūs aizvedīs uz nākošo kadru. Kadram atpakaļ ir jāizmanto prevFrame().

Tas ir jāizdara arī pogai, kura rāda iepriekšējo attēlu.

Kopējam kodam būtu jāizskatās aptuveni šādi:

stop();

btn_next.addEventListener(MouseEvent.CLICK, nextImage);
function nextImage(e:MouseEvent):void{
    nextFrame()
}

btn_prev.addEventListener(MouseEvent.CLICK, prevImage);
function prevImage(e:MouseEvent):void{
    prevFrame()
}Saglabājam visas izmaiņas, nospiežam Ctrl+Enter un vuala! Aplikācija ir pabeigta! galerija.swf fails tiek saglabāts tur pat, kur tu iepriekš saglabāji failu galerija.fla.

Demo : https://viesty.exs.lv/codeExs/demo1/

Sekos arī pamācība par to, kā galeriju nedaudz stilizēt.

Laboja Viesty, labots 2x