Cum a fost si cazul Facem Soft, multi dintre noi avem nevoie de o pagina de start pe care sa o afisam pana cand e gata in totalitate site-ul/blog-ul. Fie ca vorbim de un cronometru care ne arata cat mai avem de asteptat pana pagina e gata, fie de o simpla imagine animata/neanimata care sa ne spuna ca site-ul e in constructie, ar fi bine sa avem asa ceva si sa nu lasam sa apara pagina de apache sau o pagina default a firmei de unde avem host-ul, pagina care de altfel poate alunga viitori vizitatori fideli.

O pagina de start formata dintr-o imagine statica nu e foarte greu de facut si necesita doar niste cunostinte de baza de HTML. Insa ce facem cand vrem mai mult de atat, eventual ceva care sa iasa in evidenta.

Aici ar fi cam doua solutii: prima, mai simpla, presupune ca in locul pozei statice sa folosim un GIF animat, solutie insa destul de limitata si a doua, mai complicata, pe care am ales-o si noi, construirea in Flash a unei animatii pe care sa o inseram in HTML, eventual CSS.

Ca sa va faceti o idee despre cum a aratat pagina de start Facem Soft inainte de lansare, ea mai este inca disponibila aici, cu precizarile ca am inlocuit “Au mai ramas” cu “Au trecut” si cronometrul cu unul ce numarul timpul trecut de la lansare, nu pana la lansare.

Asadar sa purcedem la treaba:

1. Deschidem Adobe Flash CS… (a se inlocui cu versiunea de care dispunem). Noi am folosit CS3 deoarece pentru acela aveam licenta (Jucati cinstit si folositi intotdeauna software licentiat. Intr-adevar produsele Adobe nu sunt deloc ieftine si la indemana oricui, insa mai bine respectati munca programatorilor si il inlocuiti cu variante freeware. O varianta de flash delveloper gratuit este FlashDevelop care poate fi descarcat de aici. Cu toate acestea tutorialul de fata va fi continuat in Adobe Flash CS3 Professional. Daca folositi FlashDevelop cautati in meniu optiunile similare).

2. Selectam Create New -> Flash File (ActionScript 2.0). Astfel va aparea fereastra principala a aplicatiei care arata cam asa:

Asadar in centru avem scena, unde se va derula animatia, in stanga avem uneltele (Tools) necesare construirii animatiei, iar in partea de sus avem straturile (Layers) care se suprapun pentru a crea animatia si cadrele (Frames) care derulate cronologic anima scena.

3.  Selectam dimensiunea animatie de la butonul situat imediat sub scena (in cazul nostru 800×600 pixeli) si culoarea de background (noi am folosit #2E2E2E).

4. Importam pe scena o poza cu obiectul ce va fi animat. Astfel selectam File -> Import -> Import to stage alegem poza, apoi click pe Import. Sa zicem ca vorbim despre o bula din aceea ce iese din eprubeta. Odata adus obiectul pe scena, il selectam folosind Selection Tool din bara de instrumente si apasam tasta F8. Astfel ii dam convert to symbol. Lasam optiunile implicite si dam ok.

5. Incepem sa animam obiectul. In cazul nostru vrem sa miscam bula de aer in sus pe o traiectorie in zig-zag. Pentru aceasta selectam un cadru (frame) ce il succede pe cel curent, sa zicem 5, dam Click dreapta – > Insert Keyframe, apoi tot cu Selection Tools mutam obiectul (bula) mai sus, cam unde am dori sa apara dupa 5 cadre. Procedam similar, adaugand keyframe-uri pana cand iesim cu bula din scena.

6. Testand filmul (Control->Test Movie) vom observa ca bula nu are tocmai o traiectorie ci pur si simplu apare in locurile cheie unde am pus-o noi. Pentru a-i crea o traiectorie, vom folosi o optiune a Adobe Flash si anume inserarea automata de cadre intermediare pentru a crea efectul de animatie. Pentru acest lucru trebuie sa dam Click drepta intre oricare doua cadre (frame-uri) cheie, iar apoi folosim optiunea Create Motion Tween. Acum testand animatia vom observa ca bula chiar are o traiectorie si nu doar isi schimba pozitia dintr-un punct in altul.

7. Pentru a adauga mai multe bule putem importa mai multe obiecte pe scena la fel cum am procedat si pentru precendentul, cu precizarea ca fiecare obiect sa fie adaugat pe un strat (layer) nou. Asadar intai vom da Clik dreapta in sectiunea corespunzatoare layerelor, apoi Insert Layer. Dupa ce vom selecta acest layer nou adaugat vom putea da Import to stage noului obiect.

8. Cronometrul a fost creat in felul urmator: Dupa ce am adaugat un nou layer la fel ca mai sus, din unelte am selectat Text Tool. Am desenat o zona de text in care am scris “00:00:00:00”. Am selectat tipul textului Dynamic Text, iar instanta (instance name) a fost denumita time_txt.

9. Am dat Click dreapta pe primul frame corespunzator layer-ului in care am adaugat aceasta caseta de text, apoi Actions.

10. In caseta corespunzatoare am scris urmatorul cod:

this.onEnterFrame = function() {
 //Salvam data curenta
 var today:Date = new Date();
 //Salvam anul curent
 var currentYear = today.getFullYear();
 //Salvam ora curenta
 var currentTime = today.getTime();
 //Salvam data tinta (cea pana la care facem cronometrarea)
 var targetDate:Date = new Date(currentYear, 7, 25);
 var targetTime = targetDate.getTime();
 var timeLeft = targetTime - currentTime;
 var sec = Math.floor(timeLeft/1000);
 var min = Math.floor(sec/60);
 var hours = Math.floor(min/60);
 var days = Math.floor(hours/24);
 sec = String(sec%60);
 if (sec.length sec = "0"+sec;
 }
 min = String(min%60);
 if (min.length min = "0"+min;
 }
 hours = String(hours%24);
 if (hours.length0) {
 var counter:String = days+":"+hours+":"+min+":"+sec;
 //Scriem in campul text creat valoarea
 time_txt.text = counter;
 } else {
 trace("GATA");
 var newTime:String = "00:00:00:00";
 time_txt.text = newTime;
 delete (this.onEnterFrame);
 }
};

11. Inchidem editorul de cod. Apoi selectam File -> Save, alegem locatia, numele fisierului si apoi click pe Save. Cam asta e tot legat de partea de Flash.

12. Deschidem Notepad sau orice alt editor de text. Recomandarea noastra este ca atunci cand se scrie cod intr-un editor de text, acesta sa fie unul specializat, care recunoaste automat limbajul si ne coloreaza diferit cuvintele cheie. Un astfel de editor este si Programmer’s Notepad care poate fi descarcat gratuit de aici.

13. Scriem in editor urmatorul cod HTML (in comentarii gasiti explicatiile; pentru formatare folosim CSS inline, fiind o pagina foarte simpla ce nu necesita un CSS extern)

<html>
<head>
<title>Pagina de start</title>
</head>
<body style="background-color:#2E2E2E">
<table height="100%" width="100%" border="0">
<tr>
<td>
<div align="center">
<object width="800" height="600">
<param name="MOVIE" value="main.swf"/>
<param name="PLAY" value="true"/>
<param name="LOOP" value="true"/>
<param name="QUALITY" value="high"/>
<param name="SCALE" value="noborder"/>
<!--inlocuiti "main.swf" cu numele cu care ati salvat animatia Flash-->
<embed src="main.swf" width="800" height="600" play="true" loop="true" quality="high" scale="noborder" pluginspage="http://get.adobe.com/flashplayer"/>
</object>
</div>
<td>
</tr>
<tr>
<td>
<div align="center">
<!--Adaugam doua imagini "facebook.png" si "youtube.png" ce duc catre pagina de facebook, respectiv de youtube a site-ului; imaginile vor fi transparente atunci cand nu trecem cu mouse-ul peste ele-->
<a href="http://www.facebook.com/" target="_blank"><img border="0" src="facebook.png" style="opacity:0.2;filter:alpha(opacity=20)" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.2;this.filters.alpha.opacity=20"/></a>
  
<a href="http://www.youtube.com/" target="_blank"><img border="0" src="youtube.png" style="opacity:0.2;filter:alpha(opacity=20)" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.2;this.filters.alpha.opacity=20"/></a>
</div>
</td>
</tr>
</table>
</body>
</html>

14. Salvam (File->Save As) fisierul cu titlul “index.html” (atentia la tipul documentului alegem “All Files”, nu “Text File”).
15. Copiem acest fisier, impreuna cu swf-ul generat de Flash si cu cele doua poze (facebook.png si yutube.png) in directorul public_html de pe server.
16. Accesam domeniul corespunzator site-ului. Daca in loc de vechea pagina apare ce am creat, inseamna ca am reusit.

Comments

comments

Categorii: Blog

Lasă un răspuns

Adresa ta de email nu va fi publicată. Câmpurile obligatorii sunt marcate cu *