Fare rollover Doğum Küp geçiş

Özet

Bu nasıl fare geçişi bir küp geçiş etkisi yaratmak öğreneceğiz eğitimle,.

Burada nihai sonucu:

Gereksinimleri

CS3 veya Flash CS4 Flash.

Not: Bu eğitimde ekran Flash CS3 yapılır. Tam olarak Flash CS4 aynı çalışır.

Adım 1 - Kurun etkisi bileşeni

Satın Küp Geçiş Etkisi burada. Lütfen talimatları yüklemek ve bileşen panelinden. FLA dosyasının içine kütüphane bileşeni sürükleyin izleyin.

Adım 2 - Yeni bir katman oluşturun

Şeyler ana zaman çizgisinde yeni bir katman oluşturmalı ve bir ad vermek derli toplu tutmak için. Bu aşağıdaki ekran gösterilir musunuz.

Adım 3 - arkaplan yaratmak

Şimdi bir degrade bir arka plan oluşturun. Ancak bu o efekt, şeffaf içerik ile (on daha sonra) daha fazla çalıştığını göstermektedir etkili çalışması için gerekli değildir.

"Bg seçin ilk kare" katman ve tuval üzerine dikdörtgen aracı ile bir şekil çizin. Seçin dikdörtgen ve ayarlamak renk ayarları güzel bir renk geçişi için (de) başka bir renk kullanabilirsiniz.

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

Küp etkisi dinamik kullanıcı fare devlet (rollover / Rollout) tepki gerekir. Bu etki kendini ve olay dinleyicisini eklemek yerine, bir "boş düğmesini kullanarak en iyi uygulama değildir.

Katman tıklayın ilk kare "btn" ve tuval büyüklüğü ile dikdörtgen çizin (renk) değil Mater başlangıç düğmesi görünmez yok. Seçin dikdörtgen ve Düğme için [F8 tuşuna basın ile dönüştürmek] veya MovieClip sağ tıklayın -> "değiştirmek için Sembol ...".

"Btn" için düğmeye adını ayarlayın ve emin olun türü "olduğunu Düğme".

Çift tıklatın düğmesini tıklayın. Şimdi "Up" son kare "Hit için" ilk ana kare sürükleyin. Bu emin, bu düğme ama görünmez interaktif olacak hale getirir.

Geri ana zaman çizelgesine alın ve "btn" için düğmeye örnek adı ayarlayın.

Adım 5 - MovieClip başlamak oluşturun

Etkisi iki MovieClip nerede görsel bilgiler alınmış olması gerekir. Şimdi MovieClip geçiş ile başlar oluşturabilirsiniz.

Katman "img1 tarihinde ilk kare tıklayın. -R] veya "Dosya" -> "Al" - Sahnesi'nde> "Al ..." [Ctrl basarak tuval boyutu ile İthalat bir görüntü.

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

Bir örnek adı ayarla sadece MovieClip img1 "için oluşturulan".

Adım 6 - Son MovieClip oluşturun

Son MovieClip yerine bir görüntü metni içerir. Bu size biraz farklı bir yaklaşım gerekmektedir ulaşmak.

Katman "img2 seçin ilk kare" (Tamam, kötü adlandırma doğru çekinmeyin ki ) Ve tuval boyutu ile bir dikdörtgen çizin. Sen emin Son MovieClip Anasayfa MovieClip aynı boyutlara sahip olmasını istiyorsanız. Thats neden ilk Anasayfa MovieClip olarak aynı boyutu ile görünmez bir şekli çizin.

Seçin şekli ve 0 için alfa değeri (şekil ayarlamak hala orada ama görünmez is).

Bir MovieClip [F8 tuşuna basın için şekil dönüştürme] veya MovieClip sağ tıklayın -> "değiştirmek için Sembol ..." ve ismini "img2".

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

Baş geri ana zaman çizelgesine ve img2 "için MovieClip örneğinin adını ayarlamak".

Adım 7 - ActionScript geçişi ekle

Windows "seçin, katmanı" Script "ve" Eylemler açık "pencere" -> "Eylemler" veya [basın F9].

Eğer sadece rollover bir geçiş yapmak istiyorsanız (ve geri Rollout Doğum 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;
  addChild (myFilter);

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

İlk satır size düğmesini aktarma etkinliğini dinleyicisini ekleyin. Fonksiyonu "_onOver" (line 3) ilk önce (satır 4 ve 5) bileşenin sakatlar fare etkileşim CubeTransitionEffectAS3 bir örneğini oluşturur. , Önceki fare etkileri dikkat etmek size butonu hazırlandı unutmayın ve bu konuda girişimine etkisi istemiyorum.

Line 9 nihayet size parametresi burada (dokümantasyon) etkisi başlatılamadı. Önemli ilk iki parametre vardır. Bu geçiş img1 "ile başlar ve img2" ile biter "tanımlar.

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

Adım 8 - Daha karmaşık ActionScript

Tamam, geçiş gayet güzel çalışıyor önceki kodu. Ama ne eğer sen de "img1" için img2 "geçiş" ters bir tomar işlevi istiyorum? , Bir daha karmaşık kodu gerekir başarmak için. Script silin ve aşağıdaki yerleştirin:

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

 running = false;
 var goin = false;
 var goOut = false;

 fonksiyonu _onOver (e: MouseEvent) (
  if (! çalıştıran) (
  _createAnimation ( "") içinde;
  = true çalışan;
  ) else (
  goin = false;
  goOut = true;
  )
 )

 fonksiyonu _onOut (e: MouseEvent) (
  if (! çalıştıran) (
  _createAnimation ( "out");
  = true çalışan;
  ) else (
  goin = true;
  goOut = false;
  )
 )

 fonksiyonu _inAnimationDone (e: Event) (
  e.target.removeFilter ();
  = false img1.visible;

  (goin) (if
  _createAnimation ( "out");
  ) else (
  = false çalışıyor;
  goOut = false;
  )
 )

 fonksiyonu _outAnimationDone (e: Event) (
  e.target.removeFilter ();
  = false img2.visible;

  (goOut) (if
  _createAnimation ( "") içinde;
  ) else (
  = false çalışıyor;
  goin = false;
  )
 )

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

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

Bilmek, sizin değil etkisi sırasında geçiş yönünü ters olabilir çalıştıran önemlidir. Bunun yerine "kadar etki yapılır ve revers geçiş başvuru bekleyin kullanıcının eylem hatırlayabilir.

Değişkenler "Goin" ve "goOut" (satır 5 ve 6) bu amaçla kullanılmaktadır. Siz "ve" _onOut "(satır 8 zaman fonksiyonları" _onOver bunları ve 18) yürütülür. Eğer o (line 9 ve 19) yanlış ama sadece çalışan var, doğrudur, hemen (satır 10 ve 20) geçiş başlar.

Fonksiyonu "_createAnimation" (line 52) için yardımcı işlevi başlatmak yönünde size parametre olarak geçen "dir" bağlı olarak bir animasyon.

Fark "removeFilter" yöntemi (satır 29 ve 41) iki MovieClip Başlangıç ve Bitiş MovieClip çağırdıktan sonra görünür için (out etkisi) ayarlanır. Thats neden - geçiş ile yanlış (satır 30 ve 42 -) başladı MovieClip görünürlüğünü ayarlayabilirsiniz.

Indirmek

Tıklayın bu yazının FLA indirmek için. Not:. Fla değildir etkisi bileşen içerir. Amacıyla fla çalışması için, sen burada Küp Geçiş Efekt satın almalısınız.

Burada bir video nasıl farklı bir etkisi uygulamak için bir ders bulabilirsiniz.

Flash Effect Tutorials Cool!

Yorum Yaz Nisan 2009 8.