Cool Flash Effect konsultācijas!

Kopsavilkums

Šajā apmācība jūs uzzināsiet, kā izveidot kubu pārejas ietekme uz peles apgāšanās.

Lūk gala rezultāts:

Prasības

CS3 Flash vai Flash CS4.

Piezīme: Šajā apmācība screenshot tiek veikts Flash CS3. Tas darbojas tieši tāpat Flash CS4.

Solis 1 - instalēšana efekts sastāvdaļa

Pirkums Cube pārejas efekts šeit . Lūdzu, izpildiet instalēšanas norādījumus un velciet sastāvdaļu no komponents paneļa uz bibliotēku portāls. fla failu.

Step 2 - Izveidojiet jaunu slāni

Lai saglabātu lietas sakārtot jums vajadzētu izveidot jaunu slāni par galvenajiem laika un piešķir tai nosaukumu. Dariet to, kā parādīts attēlā zemāk.

Solis 3 - Izveidot fona

Tagad jums izveidot fona ar gradientu. Lai gan tas nav nepieciešams, lai ietekme darbs tas parāda, ka ietekme arī strādā ar pārredzamiem saturu (vairāk par šo vēlāk).

Atlasiet pirmo rāmja "BG" slāni un izdarīt forma ar taisnstūra rīku audekla. Atlasiet taisnstūri un pielāgot krāsu iestatījumus, lai ir jauka gradientu (var izmantot arī jebkuru citu krāsu).

Solis 4 - Izveidot poga

Kuba efekts būtu jāreaģē dinamiski lietotājiem peles stāvokli (pagarināšanu / izvēršana). Tā ir labākā prakse NAV pievienot notikumu klausītājs par to pašu un tā vietā lietot "tukšu" pogu.

Noklikšķiniet uz pirmās rāmja slāni btn "un izdarīt taisnstūris ar izmēru audekla (krāsa nav mater jo poga nebūs redzama). Atlasiet taisnstūri un konvertēt to uz pogas ar [nospiediet F8] vai tiesības, noklikšķiniet uz MovieClip -> "Convert to Symbol ...".

Iestatīt nosaukumu pogu "btn" un pārliecināties, ka tips ir "Pogas".

Veiciet dubultklikšķi uz pogas. Tagad velciet pirmais keyframe "Up", kas pēdējo rāmja "Hit". Tas padara pārliecināts, ka poga būs interaktīvs, bet nav redzams.

Atgriezties uz galveno grafiku un noteikt, piemēram nosaukuma pogu "btn".

Solis 5 - Izveidojiet sākums MovieClip

Ietekme vajadzībām ir divi MovieClip, kurā vizuālā ziņām tiek veikti no. Jūs šobrīd izveidot MovieClip pāreja sāksies ar.

Noklikšķiniet uz pirmo kadru par slānis "img1". Importēt attēlu ar izmēru audekla, nospiežot [nospiediet Ctrl-R] jeb "File" -> "Imports" -> "Import uz skatuves ...".

Tagad pārvērst šo attēlu uz MovieClip un nosaukums tam "img1".

Iestatiet instancē nosaukumu tikko izveidota MovieClip uz "img1".

Step 6 - Izveidot End MovieClip

Beigas MovieClip saturēs teksts, nevis attēls. Sasniegtu jums būs nepieciešams nedaudz atšķirīgu pieeju.

Atlasiet pirmo rāmja slānis "img2" (ok, slikta vārda, justies brīvi, lai labotu šo ), Un izdarīt taisnstūris ar izmēru audekla. Jūs vēlaties pārliecināties, ka beigas MovieClip ir tāds pats izmērs kā Start MovieClip. Tas ir kāpēc jūs vispirms izdarīt neredzams forma ar tāda paša izmēra kā Start MovieClip.

Atlasiet formu un noteikt alfa vērtību 0 (forma joprojām ir tur, bet neredzama).

Pārvērst formu MovieClip [preses F8] vai tiesības, noklikšķiniet uz MovieClip -> "Convert to Symbol ..." un nosaukt to "img2".

Veiciet dubultklikšķi uz tikko izveidota MovieClip, izveidojiet jaunu tukšu slāni un izvirzīti daži tekstu, ka jaunizveidotā slāņa.

Dodies atpakaļ uz galveno grafiku un noteikt, piemēram nosaukuma MovieClip uz "img2".

Step 7 - Pievienot apgāšanās ActionScript

Izvēlēties slānis "skriptu" un atveriet "Darbības" logu ar "Windows" -> "Darbības", vai [nospiediet F9].

Ja jūs vienkārši vēlaties būt pāreju uz apgāšanās (un bez muguras pāreja uz Izvēršot) kopēt šādus rindiņas koda logā.

 btn.addEventListener (MouseEvent.ROLL_OVER, _onOver);

 funkcija _onOver (e: MouseEvent) (
  var myFilter: CubeTransitionEffectAS3 = jauns CubeTransitionEffectAS3 ();
  myFilter.mouseEnabled = false;
  myFilter.mouseChildren = false;
  addChild (myFilter);

  myFilter.init (img1, img2, 75, "l-> r", 2 "easeInOutCubic", nepatiesu);
 )

Pirmajā rindā jūs pievienojat apgāšanās gadījumā klausītājs uz pogas. Funkcijā "_onOver" (līnija 3) vispirms izveidot instances CubeTransitionEffectAS3 pirms jūs atslēgt peles interaktivitāti komponenta (līniju 4 un 5). Atcerieties, ka poga jūs izveidojāt agrāk ir rūpēties par peles efektu un jūs nevēlaties ietekme iejaukties šajā.

Atbilstīgi 9 beidzot jūs sāktu ietekmi ( šajā dokumentācijā parametrs ). Nozīmīga daļa ir pirmās divas parametrs. Jūs definētu, ka pāreja sākas ar "img1" un beidzas ar "img2".

Eksportēt savu fla failu. Kā redzat, efekts sastāvdaļa strādā perfekti ar pārredzamu fona "img2".

Step 8 - sarežģītāki ActionScript

OK, ar iepriekšējo kodu apgāšanās darbu tikai naudas sodu. Bet ja jūs arī vēlaties, lai būtu izvēršanas funkcija, kas apvērš pāreja no "img2" uz "img1"? Lai to panāktu, ka jums ir nepieciešams vairāk sarežģītu kodu. Dzēst skriptu un ievietojiet šādu tekstu:

 btn.addEventListener (MouseEvent.ROLL_OVER, _onOver) btn.addEventListener (MouseEvent.ROLL_OUT, _onOut) var darboties = false; var goin = false; var goOut = false; funkcija _onOver (e: MouseEvent) (if (! darbojas) (_createAnimation ("in"); darboties = true;) else (goin = false; goOut = true;)) funkciju _onOut (e: MouseEvent) (if (! ekspluatācijas) (_createAnimation ("out"); darboties = true; ) else (goin = true; goOut = false;)) funkciju _inAnimationDone (e: Event) (e.target.removeFilter (); img1.visible = false; ja (goin) (_createAnimation ("out");) else ( rādīt = false; goOut = false;)) funkciju _outAnimationDone (e: Event) (e.target.removeFilter (); img2.visible = false; ja (goOut) (_createAnimation ("in");) else (darbības = false ; goin = false;)) funkciju _createAnimation (Dir: String) (var myFilter: CubeTransitionEffectAS3 = jauns CubeTransitionEffectAS3 (); myFilter.mouseEnabled = false; myFilter.mouseChildren = false; addChild (myFilter), ja (Dir == "in" ) (myFilter.init (img1, img2, 24, "l-> r", 2 "easeInOutCubic", viltus), myFilter.addEventListener (CubeTransitionEffectAS3.ANIMATION_DONE, _inAnimationDone);) cits ja (dir == "out") (myFilter.init (img2, img1, 24, "R-> l", 2 "easeInOutCubic", viltus), myFilter.addEventListener (CubeTransitionEffectAS3.ANIMATION_DONE, _outAnimationDone);)) 

Ir svarīgi zināt, ka jūs nevarat mainīt virzienu pārejas laikā efekts darbojas. Tā vietā jūs varat "atcerēties" darbību lietotājam, pagaidiet, līdz ietekme ir darīts, un piemērot revers pāreju.

Mainīgo lielumu "goin" un "goOut" (līnija 5 un 6) tiek izmantoti šim mērķim. Jūs noteikt tos, kad funkcijas "_onOver" un "_onOut" (līnijas 8 un 18) ir izpildīti. Bet tikai tad var darboties, ir taisnība, ja tā ir nepatiesa (līnija 9 un 19), sākat pāreju uzreiz (pozīcija 10 līdz 20).

Funkcija "_createAnimation" (līnija 52) ir Jūsu palīgs funkcija sākt animācijas atkarībā no virziena "dir", tu nodots kā parametrs.

Ievērojiet, ka pēc zvana "removeFilter" metodi (līnija 29 un 41), gan Sākt MovieClip un End MovieClip ir iestatīts redzami (no efekts). Tas ir kāpēc jūs noteikti MovieClip redzamība - pāreja sākās ar - lai viltus (pozīcija 30 līdz 42).

Lejupielādēt

Uzklikšķināt šeit , lai lejupielādētu fla šo pamācību. Piezīme:. Fla nav iekļauta ietekme sastāvdaļa. Lai padarītu fla darbu, jums ir nepieciešams iegādāties Cube pārejas efekts šeit .

Šeit jūs varat atrast video pamācību par to, kā īstenot atšķirīgu efektu .