tranzicion Cube mbi mouse rollover
2 Komente 8 prill, 2009
Përmbledhje
Në këtë tutorial do të mësoni se si të krijoni një efekt të tranzicionit kubike në mouse rollover.
Ja rezultati final:
Kërkesat
Flash CS3 ose Flash CS4.
Shënim: screenshot në këtë tutorial është bërë në Flash CS3. It works të njëjtë në Flash CS4.
komponent Hapi 1 - Instalo efekt
Blerje Efekti Tranzicionit Cube këtu . Ju lutemi ndiqni udhëzimet e instaloni dhe terhiq komponent nga paneli komponent në bibliotekën e juaj. fla file.
Hapi 2 - Krijimi i një shtresë të re
Për të mbajtur gjërat e pastra, ju duhet të krijoni një shtresë të re në afatin kohor kryesore dhe t'i jepte një emër. A këtë siç tregohet në screenshot më poshtë.
Hapi 3 - Krijo sfond
Tani keni krijuar një sfond me një gradient. Edhe pse kjo nuk është e nevojshme për të bërë punën efekt kjo tregon se efekti gjithashtu punon me përmbajtje transparente (më shumë se më vonë).
Zgjidhni kuadër të parë në "shtresa bg" dhe vizatoni një formë me të mjet drejtkendesh ne hapesiren. Zgjidhni drejtkëndësh dhe rregulluar parametrat ngjyra të ketë një gradient bukur (ju gjithashtu mund të përdorni ndonjë ngjyrë tjetër).
Hapi 4 - butonin Krijo
Efekti kubike duhet të reagojnë në mënyrë dinamike ndaj shtetit përdoruesit miut (rollover / rollout). Kjo është praktika më e mirë për të shtuar NUK dëgjues rast për efekt vetë dhe në vend të përdorin një "bosh" button.
Klikoni kuadër të parë në shtresa "btn" dhe vizatoni një drejtkëndësh me madhësinë e hapesiren e (ngjyrë nuk Mater që butonin nuk do të jetë i dukshëm). Zgjidhni drejtkëndësh dhe kthyer atë në një Button me [shtyp F8] ose të drejtë të klikoni në MovieClip -> "Convert simboli ...".
Vendos emrin e buton për të "btn" dhe sigurohuni që lloji është "Button".
Double-klikoni butonin. Tani drag keyframe parë "Up" në kuadër të fundit "Hit". Kjo e bën të sigurt, se butonin do të jetë interaktive, por jo të dukshme.
Kthehet në afatin kohor kryesore dhe vendosur emrin shembull i buton për të "btn".
Hapi 5 - filloni Krijo MovieClip
Efekti duhet të ketë dy MovieClip ku informatat merren nga vizuale. Ju tani do të krijojë MovieClip tranzicionit do të fillojë me.
Kliko në kuadrin i parë në shtresa "img1". Importi një imazh me madhësinë e hapesiren e duke shtypur [Ctrl-R shtypni] ose "File" -> "Import" -> "Importi në skenë ...".
Tani kthyer këtë imazh të një MovieClip dhe emri i tij "img1".
Vendos emrin shembull i krijuar vetëm MovieClip të "img1".
Hapi 6 - Krijo MovieClip Fund
MovieClip Fundi do të përmbajë tekst në vend të një imazhi. Të arritur këtë ju duhet një qasje paksa të ndryshme.
Zgjidhni kuadrin e parë e shtresës "img2" (ok, emërtimin e keqe, të ndjehen të lirë për të korrigjuar atë
) Dhe vizatoni një drejtkëndësh me madhësinë e kanavacë. Ju dëshironi që të sigurohet se MovieClip Fundi i ka të njëjtat dimensione si MovieClip Start. Thats pse keni nxjerrë një formë të padukshme me të njëjtën madhësi si MovieClip Start.
Zgjidhni formën dhe vendosur vlera alfa në 0 (formë është ende atje, por të padukshme).
Convert formë të një [F8] MovieClip shtyp ose drejtë të klikoni në MovieClip -> "Convert simboli ..." dhe emrin ajo "img2".
Double-click MovieClip krijuar vetëm, të krijojnë një shtresë të re bosh dhe të vënë një tekst në atë shtresë të sapo-krijuar.
Shef përsëri në afatin kohor kryesore dhe vendosur emrin shembull i MovieClip për "img2".
Hapi 7 - Shto rollover ActionScript
Zgjidhni shtresa e "shkrimit" dhe të hapur "Veprimet dritare" me "Windows" - "Veprimet>" ose [shtypni F9].
Nëse ju doni thjesht të ketë një tranzicion të rollover (dhe jo prapa-tranzicionit në rollout) kopje linjat e mëposhtme në dritaren e kodit.
btn.addEventListener (MouseEvent.ROLL_OVER, _onOver); _onOver funksion (e: MouseEvent) ( myFilter var: CubeTransitionEffectAS3 CubeTransitionEffectAS3 = reja (); myFilter.mouseEnabled = false; myFilter.mouseChildren = false; addChild (myFilter); r myFilter.init (img1, img2, 75, "l->", 2, "easeInOutCubic", false); )
Në rreshtin e parë që ju i listener ngjarje rollover në butonin. Në funksion "_onOver" (linjë 3) keni krijuar një shembull i CubeTransitionEffectAS3 para se të çaktivizoni interaktive miun e komponentit (linjë 4 dhe 5). Mos harroni, butonin e keni krijuar më parë është duke u kujdesur të efekteve të miut dhe ju nuk dëshironi fuqi për të ndërhyrë në këtë.
Në linjë 9 fund ju nisja efekt ( dokumentacionin e parametri këtu ). Pjesë e rëndësishme janë parë dy parametër. Ju define se kalimi fillon me "img1" dhe përfundon me "img2".
Eksporti dosjen tuaj fla. Siç e shihni, komponenti efekt punon përkryer me ngjyrë të tejdukshme të "img2".
Hapi 8 - Më shumë komplekse ActionScript
OK, me kodin e mëparshëm rollover punon vetëm gjobë. Por, çfarë nëse doni të kenë një funksion rollout që shfuqizon kalimi nga "img2" për "img1"? Për të arritur që keni nevojë për një kod më të ndërlikuar. Fshije shkrimit dhe futur në vijim:
btn.addEventListener (MouseEvent.ROLL_OVER, _onOver); btn.addEventListener (MouseEvent.ROLL_OUT, _onOut); drejtimin var = false; goin var = false; goOut var = false; _onOver funksion (e: MouseEvent) ( në qoftë se (! running) ( _createAnimation ("në"); drejtimin e = e vërtetë; () Tjetër goin = false; goOut = e vërtetë; ) ) _onOut funksion (e: MouseEvent) ( në qoftë se (! running) ( _createAnimation ("nga"); drejtimin e = e vërtetë; () Tjetër goin = e vërtetë; goOut = false; ) ) _inAnimationDone funksion (e: Event) ( e.target.removeFilter (); img1.visible = false; nëse (goin) ( _createAnimation ("nga"); () Tjetër drejtimin = false; goOut = false; ) ) _outAnimationDone funksion (e: Event) ( e.target.removeFilter (); img2.visible = false; nëse (goOut) ( _createAnimation ("në"); () Tjetër drejtimin = false; goin = false; ) ) _createAnimation funksion (dir: String) ( myFilter var: CubeTransitionEffectAS3 CubeTransitionEffectAS3 = reja (); myFilter.mouseEnabled = false; myFilter.mouseChildren = false; addChild (myFilter); if (dir == "në") ( r myFilter.init (img1, img2, 24, "l->", 2, "easeInOutCubic", false); myFilter.addEventListener (CubeTransitionEffectAS3.ANIMATION_DONE, _inAnimationDone); ) Tjetër në qoftë se (dir == "nga") ( l myFilter.init (img2, img1, 24, "r->", 2, "easeInOutCubic", false); myFilter.addEventListener (CubeTransitionEffectAS3.ANIMATION_DONE, _outAnimationDone); ) )
Është e rëndësishme të dini, se ju nuk mund të ndryshojë drejtimin e tranzicionit gjatë efekt po kandidon. Në vend të kësaj ju mund të "kujtohet" veprimin e përdoruesit, prisni deri sa efekti është bërë dhe zbatuar tranzicionit revers.
Variablave "goin" dhe "goOut" (linjë 5 dhe 6) janë përdorur për këtë qëllim. Ju vendosur ata kur e funksioneve "_onOver" dhe "_onOut" (linjë 8 dhe 18) janë ekzekutuar. Por vetëm nëse var running është e vërtetë, nëse është e rreme (line 9 dhe 19), ju filloni të tranzicionit menjëherë (linja 10 dhe 20).
Funksioni "_createAnimation" (line 52) është funksion juaj ndihmëtar fillimin animacion në varësi të drejtimit "dir" ju keni kaluar, si parametër.
Vini re që pas duke e quajtur removeFilter "" metodë (linja 29 dhe 41) të dy MovieClip Fillimi dhe Fundi MovieClip janë të vendosur të dukshme (nga efekt). Thats pse keni vendosur të shikimit MovieClip - tranzicion filloi me - të rreme line (30 dhe 42).
Shkarko
Kliko këtu për ta shkarkuar fla të këtij studimi. Shënim:. Fla nuk përfshin komponentin efekt. Në mënyrë që të bëjë punë të fla, ju duhet të blini Efekti Tranzicionit Cube këtu .
Këtu ju mund të gjeni nje video tutorial se si të zbatojë një efekt të ndryshme .





















2 Komente
Faleminderit për këtë tutorial - gëzuar atë. Megjithatë, unë ende kam një pyetje, në qoftë se unë kam 3 imazhet e kubike për të treguar, se si duhet trajtuar atë? Mund ta përdorin thjesht shkrimin tuaj për Image1, pastaj të përsëritur atë (dhe të riemërtoni atë për të Image2.) Ndjekur nga shkrimin tuaj Image2 (riemëruar Image3)? Ose, do të ishte më mirë për të përdorur Mouse Kliko - vetëm të zëvendësojë me Mouse Mouse Over Kliko? Unë jam një Newbie dhe tryinfg për të mësuar Flash dhe Dreamweaver - emocionuese por Scripts janë të vështirë për mua. Unë ju falënderoj për ndihmën tuaj.
Kind regards
Valdis
Dashur tutorial tuaj. Por thonë se kam kërkuar të bëjë disa "raste" të kubike. Lloj të një galeri. Kështu që unë do të doja që të dal të gjitha shtresat në movieclips (quajtur cube1, cube2 etj). Si do të shkoj për të bërë ato punë nga afati kryesore? Unë jam shumë e re për të flash dhe AS. Thanks in advance.
Shkruani një Koment
1 ndjekëse dhe Pingbacks
[...] Tranzicionit kubike në [...] mouse rollover