Cuprins
1.Informatii generale
2.Pagina principala
3.Butoane
4.Efecte
5.Date informative
6.Codul sursa
7.Macromedia Flash
8.Bibliografie
1.Informatii generale
Atestatul este realizat integral in Macromedia Flash 8. El reprezinta o sursa de informatii privind vanzarea/cumpararea masinilor noi cat si second-hand. Contine date informative privind fiecare model in parte, pretul, poze, toate structurate din punct de vedere al marcii si dotarilor.
El contine butoane, poze si text, toate legate intre ele prin link-uri actionate in aceiasi pagina parincipala.
2.Pagina principala
Prima pagina contine date si poze privind oferta cea mai avantajoasa a momentului pe piata de vazari in domeniul auto.
Din pagina principala, prin intermediul butoanelor desfasurate vertical in stanga se pot accesa celelalte marci de masini , fiecare continand la randul lor informatii despre fiecare model in parte.
Constructia interactiva a paginii principale este realizata in flash. Poza de fundal, chenarul cat si butoanele sunt realizate motion tween.
Butoanele pe parcursul a 20 de frame-uri trec de la brightness 0% pana la 100 %, pe cand poza de fundal trece trece de la Tint Alfa 0% pana la 20% urmand sa ramana asa tot restul parcurgerii paginii web.
Imaginea de fundal a paginii principale ramane pe Frame (63) , uramand de aici a fi accesate prin intermediul butoanelor din stanga paginii. Action Scriptul este reprezenatat mai jos.
Inainte de compilarea comenzii de Stop(); a fost selectat in prealabul frame-ul necesar opririi paginii cat si a butonului Home.
Pentru butonul Home, pe parcursul intregii paginii, a fost selectat sa raspunda in urma accesarii lui cu trimitere la Frame (63);
3.Butoane
Butoanele au fost create si compilate in Flash. Cele 7 butoane sunt reprezentate in stanga paginii principale si fac legatura prin interlink-frame cu restul paginii web.
Ele sunt pozitionate in partea stanga a paginii urmand a fi accesate pentru a face conexiunea cu restului paginii web dezvoltandu-se o utilizarea mai usoara a sa.
Au fost create mai intai 7 dreptunghiuri rotunjite in colturi cu x=45 de grade, urmand a fi introduce textele ce descriu actiunea lor. Folosind comanda Select All -> Convert to Symbol -> Ok. Astfel fiecare imagine creata cu dreptunghiul si text in interiorul sau a fost transformata intr-un buton.
Selectand un Frame aleatoriu s-a schimabt la Button->Actions in tabloul de comanda Action Script ceea ce trebuie sa afiseze in urma accesari butonului respective ca in figura de mai jos.
Comanda de actiune data in Action Script trebuie integrate in algortimul paginii web o data cu selectarea separate a butoanelor. Pentru fiecare buton in parte sunt introduse comenzi de actiuni, legate inter-link intre ele.
Pentru selectarea si folosirea comenzii specifice butoanelor s-a folosit comanda reprezentata mai jos din Action Script.
Astfel in urma selectarii butonului HOME, lista de frame-uri se opreste la Frame (63), aceasta din urma reprezentand pagina principala.
Dupa algoritmul de mai sus s-a procedat la fiecare buton in parte, bineinteles pentru fiecare fiind alt frame la care sa se opreasca.
Pozele din pagina principala au fost create ca si butoanele pentru a putea fi selectate de catre utilizator. Cele principale nu isi schimba culoarea diferite de cele din paginile deschise prin intermediul butoanelor.
4.Efecte
In componenta paginii web au fost folosite efecte interactive acestea fiind reprezentate de intro-ul paginii principale, efectul o data cu trecerea cursorului pe deasupra butoanele cat si efectul ce apare in urma trecerii cu cursorul mouselui pe deasupra pozelor.
-------
Efectul de intro pentru pagina principala s-a realizat plecand de la poza de fundal cu luminozitate 100%. A urmat introducerea a 5 frame-uri , pe fiecare dintre ele fiind poza transferata alternant de la Brightness 100 % pana la Brightness 0%.
O data cu trecerea cursorului pe deasupra pozelor incluse in site acestea din urma isi schimba culoare in diferite tente pentru a sugera prezenta mouselui asupra lor.
Acestea au fost realizate cu comanda OnMouseOver -> Change Color (Green); (comada data exemplu schimband culoarea in verde a pozei).
---- (Green);
Linia verticala ce delimiteaza spatial butoanelor de cel informational tot interactive a fost construita. S-a pornit de la o linie verticala egala cu inaltima chenarului paginii web cu urmatoarele caracateristici :
- Luminozitate 0 ( Brightness();0% )
- Tint Alfa (25%);
- Position (125,0);
Linia pleaca din dreapta paginii web pana cand intalneste limita butoanelor , aici oprindu-se iar proprietatile transformandu-se de la 0% la 100% par pozitia de la (125,0) la (0,0)
5.Date informative
Site-ul contine date informative despre fiecare model pus spre vanzare structurate pe domenii specificate.Ele contin datele tehnice ale fiecarui model in parte, pretul precum si o poza sugestiva a masinii.
Toate informatiile despre modele prezentate in site sunt luate dupa site-urile oficiale ale constructorilor de masini, fie dupa autovit.ro.
6.Codul sursa
Codul sursa al paginii web create este prezentat mai jos. Acesta reprezinta traducerea din Flash in Html a intregului site.
Cod Sursa
7.Macromedia Flash
1. Introducere
1. 1. Elemente de baza în Flash
Fereastra Flash se prezinta ca în figura 1. Scena este spatiul de lucru. Scena poate fi marita sau micsorata folosind caseta Zoom, aflata deasupra scenei, sau din meniul View, optiunea Magnification.
Figura 1. Fereastra Macromedia Flash
Tot în meniul View, exista doua instrumente folositoare: grila (Grid) si liniile de ghidare (Guides) care pot fi utilizate pentru alinierea obiectelor si imaginilor[1]. Optiunea Edit Grid permite configurarea culorilor grilei si spatierea liniilor acesteia. Liniile de ghidare sunt similare grilei, doar ca pot fi plasate oriunde în scena. Mai întâi, se selecteaza optiunea Rules din meniul View. Se executa apoi clic pe una din rigle, se tine apasat mouse-ul si se traseaza pe scena o linie orizontala sau verticala. Pentru îndepartare, acestea se trag înapoi pe rigla (figura 2). Un film în Flash poate contine una sau mai multe scene. Adaugarea unei scene se face din meniul Insert, optiunea Scene - stergerea unei scene se realizeaza prin optiunea Remove Scene.
Figura 2. Rigle si linii de ghidare
Configurarea scenei si a altor proprietati ale filmului se face din meniul Modify, optiunea Document (figura 3). Pot fi stabiliti parametri ca:
Figura 3. Proprietatile unui film
Caseta de instrumente contine toate instrumentele de desenare din program. Este formata din mai multe sectiuni: Tools, View, Color si Options. Sectiunea Tools permite crearea si editarea imaginilor si textului. Sectiunea Color ofera control asupra culorii obiectelor desenate. Sectiunea Options pune la dispozitie elemente suplimentare de modificare pentru anumite instrumente[2].
Fereastra Timeline contine succesiuni de cadre ce formeaza o animatie si poate contine, de asemenea, mai multe straturi de animatii.
Casetele sunt instrumente speciale, care ofera posibilitatea de a vizualiza si modifica aproape toti parametrii în timpul lucrului. Acestea pot fi activate sau dezactivate din meniul Window.
Tipuri de fisiere
Programul Flash permite realizarea a doua tipuri de fisiere importante. Unul dintre acestea este fisierul sursa cu extensia .fla. El poate fi deschis si editat numai daca este instalat programul Flash. Dupa realizarea unui film, a unei animatii în Flash, se va face exportarea acestuia sub forma unui fisier cu extensia .swf. Un asemenea fisier poate fi vizualizat cu un browser Web, prin intermediul unui program Flash Player. Utilizatorul nu poate edita un fisier .swf, ci poate doar sa-l "vizioneze". Exportarea se realizeaza din meniul File prin optiunea Export Movie. Pentru publicarea unui film Flash în Web exista optiunea Publish, aflata tot în meniul File.
4. Concluzii
Grafica realizata în Flash este considerata vectoriala, spre deosebire de cea de tip rastru sau bitmap. Fisierele de grafica vectoriala contin numai formule matematice, necesare pentru reproducerea formelor, spre deosebire de fisierele bitmap în care sunt stocate informatii despre fiecare pixel. Avantajul fisierelor vectoriale consta în faptul ca sunt mult mai mici, iar dimensiunile imaginilor sunt usor scalabile.
8.Bibliografie
Macromedia Flash 8 - Help
www.audi.ro , www.bmw.ro, www.porsche.com etc.
Tutoriale Flash 8
Action Script - Help
|