Cool Flash Effect Rehberler!

Özet

Bu eğitimde nasıl fare rollover bir küp geçiş efekti oluşturmak için öğreneceksiniz.

İşte sonuç:

Gereksinimleri

Flash CS3 veya CS4 Flash.

: Bu derste screenshot Flash CS3 yapılır unutmayın. Bu aynı Flash CS4 çalışır.

Adım 1 - Install etkisi bileşen

Satın Cube Geçiş Etkisi burada . Lütfen aşağıdaki talimatları kurmak ve kütüphane sürükleyin bileşen içine bileşeni panel senin. fla dosyası.

Adım 2 - Yeni bir katman oluşturun

şeylerin ana zaman çizgisinde yeni bir katman oluşturmanız gerekir derli toplu tutmak ve bir isim vermek. Yapmak bu screenshot aşağıda gösterildiği gibi.

Adım 3 - yaratmak arka plan

Şimdi bir eğim ile bir arka plan oluşturun. Bu gerekli bu etkisi de şeffaf içerik (on daha sonra daha fazla çalıştığını göstermektedir) etki çalışması için olmasa da.

Seç "bg" katmanı ilk çerçeve ve tuval üzerine dikdörtgen aracı ile bir şekil çizin. Select dikdörtgen ve) aynı zamanda başka renk kullanabilirsiniz güzel bir gradient (olması renk ayarlarını.

Adım 4 - Oluştur düğmesi

Küp etkisi dinamik kullanıcı fare devlet (rollover / rollout için) tepki gerekir. Bu butonu "en iyi etkiyi olay dinleyicisini eklemek uygulama DEĞİL için kendini boş ve yerine kullanın.

Tıklayın katmanda ilk kare "btn" ve tuval (renk düğmesi görünmez başlangıç değil mater boyutu ile bir dikdörtgen çizin). Select dikdörtgen ve Button için [F8 tuşuna basın] veya MovieClip sağ tıklayın -> "Convert Symbol ..." ile dönüştür.

Set "btn" ve bu tip "olduğundan emin olmak için düğmeye adını Button".

Çift tıklatın düğmesini tıklatın. Şimdi ilk keyframe sürükleyin "Up" son kare "Hit ekledi. Bu emin, o düğme ama görünmez interaktif vermez.

geri ana timeline gidin ve "btn" için düğmeye örnek adını koymak.

Adım 5 - yaratmak başlamak MovieClip

Etkisi görsel bilgiler alınır iki MovieClip sahiptirler. Artık başlayalım MovieClip geçiş oluşturacaksınız.

Tıklayın katman "img1" ilk frame üzerinde. İthalat bir görüntü tuval boyutu ile Dosya "[Ctrl-R] veya" tuşuna basarak -> "Alma" -> "Sahne üzerinde Al ...".

Şimdi MovieClip Bu resmi dönüştürmek ve "o" img1 isim.

Set sadece MovieClip için yaratılmış "img1" nin örnek adı.

Adım 6 - End MovieClip oluşturun

Son MovieClip yerine bir görüntü metin içerir. Bunu biraz daha farklı bir yaklaşım gerekir ulaşmak.

Katmanı seçin "img2" (ok, kötü adlandırma ilk karesini, doğru çekinmeyin ki ) Ve tuval büyüklüğünde bir dikdörtgen çizin. Bunu End MovieClip Start MovieClip aynı boyutlara sahip emin olmak istiyorum. Başlangıç MovieClip aynı boyutu ile Thats ilk çizmek neden görünmez bir şekil.

Seçmek şekil ve 0 için alfa değeri (şekil set hala orada ama görünmez) olduğunu.

bir MovieClip [F8 tuşuna basın] veya MovieClip sağ tıklayın -> "Convert Symbol ..." için dönüştürme şekli ve adı "img2".

Çift tıklatın Oluşturduğunuz MovieClip, yeni bir boş katman oluşturun ve yeni oluşturulan katman üzerinde bir metin koydu.

Baş geri ana timeline için ve MovieClip örneğinin adı "img2".

Adım 7 - ActionScript rollover ekle

Katmanı seçin "yazısı" ve "Windows" -> "Eylemler" veya [F9 tuşuna basın] ile "İşlemler" penceresini açın.

sadece rollover bir geçiş var isterseniz (ve rollout hiçbir arka geçiş) kod penceresine aşağıdaki satırları kopyalayın.

 btn.addEventListener (MouseEvent.ROLL_OVER, _onOver);

 fonksiyonu _onOver (e: MouseEvent) (
  var myFilter: CubeTransitionEffectAS3 = new CubeTransitionEffectAS3 ();
  = False myFilter.mouseEnabled;
  myFilter.mouseChildren = false;
  (MyFilter) addChild;

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

İlk satır size düğmeye aktarma etkinliğini dinleyici ekleyin. fonksiyonu olarak "_onOver" (satır 3) Eğer bileşeni (line 4 ve 5 fare etkileşimi devre dışı önce ilk CubeTransitionEffectAS3 bir örneğini oluşturur). , Daha önce fare etkileri bakımı oluşturduğunuz düğme unutmayın ve bu konuda müdahale etkisi istemiyorum.

Sonunda ise hat 9 siz (initialize etkisi burada parametre belge ). Önemli bir bölümü ilk iki parametresi vardır. Bunu geçiş "img1" ve "ile biter başlar define img2".

Export FLA dosyanızın. Gördüğünüz gibi, etki bileşen mükemmel "img2" nin şeffaf arka plan ile çalışır.

Adım 8 - Daha karmaşık ActionScript

Tamam, önceki kodu ile rollover gayet güzel çalışıyor. Ama sen de istersen ne img2 "ile" img1 "adresinden geçiş ters bir rollout işlevi var mı? sen daha karmaşık kodu gerekir ulaşmak. Sil komut ve yazım aşağıdaki gibidir:

 btn.addEventListener (MouseEvent.ROLL_OVER, _onOver);
 btn.addEventListener (MouseEvent.ROLL_OUT, _onOut);

 var koşma = false;
 var Goin = false;
 var goOut = false;

 fonksiyonu _onOver (e: MouseEvent) (
  If (! Koşma) (
  _createAnimation ("in");
  koşma = true;
  ) Else (
  Goin = false;
  goOut = true;
  )
 )

 fonksiyonu _onOut (e: MouseEvent) (
  If (! Koşma) (
  _createAnimation ("out");
  koşma = true;
  ) Else (
  Goin = true;
  goOut = false;
  )
 )

 fonksiyonu _inAnimationDone (e: Olay) (
  e.target.removeFilter ();
  = False img1.visible;

  if (gidiyorsun) (
  _createAnimation ("out");
  ) Else (
  koşma = false;
  goOut = false;
  )
 )

 fonksiyonu _outAnimationDone (e: Olay) (
  e.target.removeFilter ();
  = False img2.visible;

  if (goOut) (
  _createAnimation ("in");
  ) Else (
  koşma = false;
  Goin = false;
  )
 )

 fonksiyonu _createAnimation (dir: String) (
  var myFilter: CubeTransitionEffectAS3 = new CubeTransitionEffectAS3 ();
  = False myFilter.mouseEnabled;
  myFilter.mouseChildren = false;
  (MyFilter) addChild;

  (Dir == "in") (if
  (Img1, img2, 24, "l-> myFilter.init r", 2 "easeInOutCubic", false);
  myFilter.addEventListener (CubeTransitionEffectAS3.ANIMATION_DONE, _inAnimationDone);
  ) Else if (dir == "out") (
  (Img2, img1, 24, "r-> myFilter.init l", 2 "easeInOutCubic", false);
  myFilter.addEventListener (CubeTransitionEffectAS3.ANIMATION_DONE, _outAnimationDone);
  )
 )

Bu bilmek önemlidir, sizin geçiş yapabilirsiniz yönünü değil ters etki sırasında çalışıyor. Bunun yerine ", etkisi kadar yapılır ve ters dönme geçiş uygulamak bekleyin kullanıcının eylem hatırlıyorum.

Değişkenler "olayı" ve "goOut" (satır 5 ve 6) bu amaçla kullanılır. Sen 8 ve 18) yürütülmektedir onları işlevleri "_onOver" ve "_onOut" (çizgi dizi. Ama yanlış (line 9 ve 19), hemen (line geçiş start eğer sadece var koşma doğru, 10 ve 20).

"Fonksiyonu _createAnimation" (line 52) için yardımcı fonksiyonu başlatmak yönünü "dir" Eğer parametre olarak geçti bağlı animasyon.

Dikkat ederseniz "removeFilter" yöntemi (satır 29 ve 41) hem Start MovieClip ve Son MovieClip çağırdıktan sonra ayarlanır görünür (out etkisi). Bu yüzden size MovieClip görünürlük set - geçiş başladı - yanlış (satır 30 ve 42) için.

Download

Burayı öğretici bu fla ve indirin. Not:. Fla bileşeni etki etmez içerir. amacıyla çalışma fla yapmak, size satın almalısınız Geçiş Etkisi burada Cube .

Burada bulabilirsiniz video etkisi farklı bir uygulamaya yazının nasıl .