Documente Academic
Documente Profesional
Documente Cultură
Flash - Incepatori
In acest tutorial vei invata un lucru de baza, si anume cum sa schimbi culoare de fundal.
1. Pentru inceput deschide un nou document : File - New.. - Flash File(sau utilizand
scurtatura CTRL+N)
2.Selecteaza Text Tool din meniul din stanga, sau apasa tasta T ,culoarea negru, click pe
scena si scrie un text.
3.In Timeline adauga un KeyFrame la frame-ul numarul 10 - click pe frame-ul 10 si
apasa tasta F6. La fel, adauga KeyFrame-uri pe frame-urile 20 si 30.
*Daca nu apare fereatra Properties, probabil nu este activata. Se activeaza simplu din
meniul de sus : Window - Properties - Properties.
Observati in panoul Properties butonul Color, selectati din lista Alpha , setand
opacitatea 0 %.
6. La fel se executa click pe frame-ul 30, apoi click pe text, si se modifica Alpha la 0 %.
Acum efectul este complet. Pentru a-l vizualiza : File - Publish Preview - Flash sau
CTRL + ENTER.
Poti schimba viteza animatie executand un click in afara scenei, tot din panoul Properties
de la Frame Rate , de ex 25 fps.
2.Deschide un nou document in Flash - File - New - daca folosesti Flash CS3/CS4
selecteaza Flash File(ActionScript 2.0) - OK
3.Imaginile fotografiei sunt: Inaltime: 300px, Latime: 2734px. Inaltimea trebuie sa se
pastreze iar pentru latime vom folosi o valorea mai mica.
Asadar apasa CTRL + J si modifica la Dimensions: 450px (width) x 300px (height), si
pentru Frame Rate modificam la valoarea 25fps.
8.De sus, din panoul Timeline (CTRL + ALT + T) selectam primul frame dupa care
apasam tasta F9 pentru a deschide panoul Actions:
9.Copiem urmatorul cod:
this.onMouseMove = function() {
constrainedMove(imagine_mc, 3, 1);
};
10.Acum pentru a vedea rezultatul fie apasam CTRL + Enter sau de sus File - Publish
Preview - Flash.
Rezultatul:
Acest tutorial va va arata cum sa folositi php cu flash pentru a trimite mail dintr-un
document .swf
<!--[if !supportLineBreakNewLine]-->
on (release) {
} else if (!comentarii.length) {
} else if (!nume.length) {
Iata acum partea PHP a tutorialului. Completati campurile recipient cu adresa dvs de
mail si subiectul. Salvati acest fisier cu numele de “mailform.php” si uploadati-l pe
server.
<?php
$VariabilaText = '&rezultate=';
echo $VariabilaText;
echo $raspuns;
$recipient .= "" ;
/* Subiectul mesajului */
/* mesaj */
Email: $email
Comentarii: $comentariin";
?>
max_snowsize = 6; // pixeli
for (i=0;i<snowflakes;i++) {
t = attachMovie("snow","snow"+i,i);
function mover() {
}
}
O sa detaliez putin randurile codului pentru a putea intelege cum functioneaza acest efect
max_snowsize = 6; // pixeli
t = attachMovie("snow","snow"+i,i);
Loopul creaza o variabila temp numita ‘t’ pe care o atasam la fulgul de zapada creat.
Aceasta varabila distribuie opacitate intre 20 si 80 la suta fiecarui fulg. Urmatoarele doua
linii pozitioneaza fulgul intr-o pozitie intamplatoare (random). Pozitia x pune fulgul putin
peste fiecare margine astfel incat cand cade o face in directia in care bate vantul. Apoi
marimea fulgului. Observati linia: t._xscale = t._yscale Asta inseamna ca forma
fulgului este un cerc perfect. Urmatoarele doua variabile: k este pentru
viteza cu are cade fulgul. Loopurile care spun fulgului sa execute
functia mover in fiecare frame. Acest loop se repeta in functie de cati
fulgi s-au setat. In acest exemplu 75
function mover() {
this._y += this.k;
this._x += this.wind;
if (this._y > height+10) {
this._y = -20;
}
if (this._x > width+20) {
this._x = -(width/2)+Math.random()*(1.5*width);
this._y = -20;
} else if (this._x < -20) {
this._x = -(width/2)+Math.random()*(1.5*width);
this._y = -20;
}
}
Aceasta este ultima portiune din cod si face ca fulgii nostrii sa cada
this._y += this.k;
this._x += this.wind;
Aceasta portiune aplica vantul si viteza de cadere pe axa x si y:
Aceste 3 loopuri inlocuiesc zapada daca si-au terminat calatoria sau nu s-au comportat
cum trebuie in drumul lor. Primul loop verifica daca fulgul a ajuns jos si daca trebuie sa il
inlocuiasca cu altul care sa cada din nou. Celelalte doua, un if..else schimba zapada din
susul ecranului cu o noua pozitie x daca fulgul iese din animatie
1. Deschide un fisier Flash File > New (Ctrl N)
2. Seteaza marimea si culoarea documentului Flash Modify > Document (Ctrl J)
<!--[if !supportLineBreakNewLine]-->
10. Click dreapta pe Frame-ul 70 si pe layerul text selecteaza: Insert Blank
Keyframe
11. Click dreapta pe Frame-ul 9 al layerului Blur si selecteaza: Insert Blank
Keyframe
12. Selecteaza unealta de dreptungi si deseneaza un dreptunghi de aproximativ
aceeasi dimensiune cu aceea a textului folosit in stanga scenei, in afara acesteia
13. Cu selection tool dublu click pe Stroke (marginea dreptunghiului) si apasa: Delete
14. Deschide Color Mixer: Window > Design Panels > Color Mixer (Shift F9)
15. Aplica un gradient dreptunghiului creat: Gradient Fill
Pentru a adauga mai multe culori apasati pe gradient bar in color mixer:
Daca este nevoie modifica dreptunghiul astfel incat sa apara ca in imaginea de
mai jos:
16. Click dreapta pe forma care doar ce ai colorat-o cu gradient si selecteaza Convert
to Symbol...
17. Selecteaza: Movie Clip
18. Denumeste-l
19. Click: OK
20. Click dreapta pe frame 11 din layer Blur (un frame inaintea textului din Text
layer) si selecteaza Insert Keyframe
21. Muta forma blur de la Frame 11 astfel incat sa fie aproximativ deasupra textului
Va trebui sa repeti acelasi proces, de la etapa 20 pana acum astfel incat gradientul sa
se mute catre partea dreapta a Stage-ului. De data asta procesul incepe de la frame-ul
70 in loc de frame 9
Vei crea o fereastra a frame-urilor 9 – 11 astfel incat textul sa iasa catre dreapta:
Andrei Mihailescu
http://www.melbo.ro
Exista mai multe modalitati de a face acest efect in Flash, eu incerc sa vi-l prezint pe cel
mai simplu. In exemplul nostru, cursorul customizat este un simbol Movie Clip fiind tras
de cursorul normal care este ascuns.
Incepe prin a crea un nou fisier flash. Dimensiunile fisierului si a backgroundului nu sunt
importante. Cu toate astea este de recomandat sa schimbi frame rate-ul la 30 sau chiar
mai mult pentru a crea un efect mai impresionant. Poti schimba frame rate-ul din
Properties Inspector (Window>Properties>Properties sau Ctrl+F3).
Acum va trebui sa desenzi cursorul pe scena. Poti utiliza unealta creion sau alte unelte de
desenat. Este de recomandat sa faci cursorul indreptat catre stanga sus.
Selecteaza cursorul folosind unealta de selectare sau apasand Ctrl+A pentru a selecta tot
ce este pe scena. O data selectat converteste desenul intr-un simbol. Simbolurile poti fi
controlate prin ActionScript fata de formele primare si desenele care nu pot fi controlate
in acelasi fel. Pentru a converti desenele intr-un simbol, du-te la Modify>Convert to
Symbol sau apasa F8 in timp ce obiectul este selectat. In fereastra "Convert to Symbol"
selecteaza 'Movie clip' ca tip de simbol. Asigura-te ca ai selectat coltul superior stanga ca
punct de inregistrare. Punctul de inregistrare seteaza centrul Movie Clipului. Apasa
“OK”.
In timp ce Movie Clip-ul nou creat este selectat, acceseaza Properties Inspector si
denumeste Movie Clip-ul cu un instance name. Numele de instanta sunt folosite ca
referinta pentru a controla Movie Clipul folosint Action Script. Foloseste numele de
‘cursor_mc’ cand denumesti instanta.
Scena noastra este acum setata. Tot ce trebuie sa facem este sa scriem codul ActionScript
pentru a face cursorul sa functioneze. In Layer panel creaza un nou layer apasand pe
butonul “Insert Layer”. Poti redenumi acest layer cu numele de "ActionScript". Right
click pe primul frame al layerului si selecteaza “Actions” pentru a accesa panelul
ActionScript
ActionScriptul nostru ca avea doua functii. Initial facem ca movie clipul sa urmareasca
mouse pointerul, apoi facem ca mouse pointerul sa dISPara. Acest lucru se poate face
doar prin doua linii:
cursor_mc.startDrag("true");
Mouse.hide();
Copy paste aceste randuri in Panelul Action. Apasa Ctrl+enter pentru a testa animatia si
vei vedea cum cursorul customizat va functiona.
Andrei Mihailescu
http://www.melbo.ro
Configurarea scenelor
4. De la Color Mixer (Window > Color Mixer) selecteaza culoarea apasand pe small
bucket icon, daca nu este deja selectat
Pe dunga de la josul acestei ferestre, apasati pe patratul mic din stanga si tastati #000000
(negru) iar in patratul din dreapta alege culoarea #003399
6. Deschide Scene panel (Window > Other Panels > Scene). Dublu click pe label-ul
scenei curente, care este singura in momentul de fata si redenumeste-l loader.
7. Click pe butonul Duplicate scene pentru a copia intreaga scena in intregime. Acest
procedeu este unul care te poate ajuta foarte mult atunci cand doresti sa copiezi o scena
cu tot cu desene, animatii, layere si actionscript.
Redenumeste aceasta scena cu denumirea site. Inchide Scene panel. Acum esti pe scena
site.
8. Creaza un nou layer si denumeste-l continut. Pune o imagine pe aceasta scena. Ai grija
ca dimensiunea imaginii sa fie ceva intre 60 KB si 100 KB.
Layerul este aproape gata, tot ce trebuie sa faci este sa mai adaugi ceva pentru a crea un
continut. In mod contrar nu vei putea vedea cum functioneaza preloaderul pentru ca scena
se va incarca instant. Cand vei folosi preloaderul pe un site adevarat atunci vei pune
continutul pe care il vei dori, bineinteles.
9. Creaza un nou layer si denumeste-l actiuni. Click pe primul keyframe al acestui layer.
Deschide Actions panel: (Window > Actions) si insereaza un simplu cod aici:
stop();
Crearea preloaderului
10. Du-te inapoi la scena loader. Poti face asta apasand pe iconita situata
deasupra timeline-ului, pe partea dreapta,.
Alege Text tool. In Properties panel selecteaza Dynamic Text din stanga. Seteaza
marimea caracterului la 16 sau chiar mai mare. Apoi alege un font.
In acest mod fiecare utilizator va vedea fontul exact in acelasi mod in care tu il vezi pe
calculatorul pe care lucrezi. Asta pentru ca informatiile despre dimensiune si caractere
vor fi stocate in fisierul SWF. Si nu va fi un impediment in stabilirea marimii fisierului
pentru ca 11 caractere nu vor conta foarte mult in marimea fisierului. Click OK.
12. Apasa si muta catre stage pentru a crea un camp de text. Fa astfel incat sa fie loc
pentru 3 caractere. Poti verifica tastand trei caractere la intamplare si le stergi dupa
aceea.
14. Cu campul de text selectat alege Modify > Convert to Symbol pentru a-l converti in
Movie Clip. Denumeste-l preloader text sau cu oricare alta denumire. Selecteaza movie
clip ca tip si apoi click OK.
15. Inca o data in Properties panel, denumeste movie clip-ul creat: loaderCursor
Cu tot continutul la locul lui, sa va explic cum sa folositi actionscript pentru a face acest
preloader sa functioneze
17. Selecteaza keyframe-ul (primul si singurul) si deschide Actions panel (F9). Scrie
urmatorul cod:
stop();
Mouse.hide();
loaderCursor.onMouseMove = function() {
this._x = _xmouse;
this._y = _ymouse;
updateAfterEvent();
};
loaderCursor.onEnterFrame = function() {
movieLoaded = Math.round(this._parent.getbytesLoaded()/1024);
movieTotal = Math.round(this._parent.getBytesTotal()/1024);
percentage = Math.floor(movieLoaded/movieTotal*100);
if (percentage<10) {
this.loadingText.text = "00"+percentage;
} else if (percentage>=10 && percentage<100) {
this.loadingText.text = "0"+percentage;
} else if (percentage>=100) {
this.loadingText.text = percentage;
gotoAndPlay("site", 1);
Mouse.show();
delete this.onMouseMove;
delete this.onEnterFrame;
}
};
Acest efect se poate folosi atat in preloaderele interne cat si in cele externe. Sper sa va fie
util. Puteti sa faceti modificari adaugand alte efecte cum ar fi schimbarea opacitatii
animatiei in relatie cu miscarea de mouse, marimea sau culoarea. Aveti atasata mai jos
sursa acestui fisier.
Creaza 3 keyframeuri, unul dupa celalalt (1, 2, si 3). Dublu click pe frame-ul 1 sa poti
vedea fereastra de ActionScript.
Eu am folosit niste versuri dintr-o melodie de la Parazitii, dar puteti scrie orice text doriti
in interiorul ghilimelelor, nu are importanta. Acesta va fi textul pe care se va aplica
efectul de tiparire litera cu litera.
Aceste comenzi adauga cate o litera de la "text" catre "ctext", scotand-o apoi din "text".
Continuam cu frame-ul 3
Aceasta comanda va crea un loop cu cele doua actiuni. Poti schimba viteza cu care
tipareste
a) Modificand fps (frames per second)
b) Adaugand spatiu intre keyframe-uri
Voila! Iata ce mi-a iesit la ora aceasta tarzie din noapte :))
Puteti si downloada si sursa tutorialului acesta, atasat la acest articol