Cool Flash Tutorials Effect!

Podsumowanie

W tym tutorialu dowiesz się jak stworzyć efekt przejścia kostki na refinansowanie myszy.

Oto wyniki końcowe:

Wymagania

Flash CS3 lub Flash CS4.

Uwaga: zrzut ekranu w tym kursie jest w Flash CS3. To działa dokładnie tak samo w programie Flash CS4.

Krok 1 - Instalacja części efekt

Zakup efekt przejścia Cube tutaj. Należy postępować zgodnie z instrukcjami instalacji i przeciągnąć element z panelu części do biblioteki w pliku. Fla.

Krok 2 - Tworzenie nowej warstwy

Aby utrzymać wszystko uporządkować należy utworzyć nową warstwę na głównej osi czasu i nadaj jej nazwę. Do tego w sposób pokazany na poniższym zrzucie ekranu.

Krok 3 - Tworzenie tła

Teraz możesz stworzyć tło z gradientu. Chociaż nie jest to konieczne do prawidłowego działania efektu to pokazuje, że życie również z przejrzystych (więcej o tym później).

Wybierz pierwszą ramkę w "bg" warstwę i narysuj kształt prostokąta z narzędziem na płótnie. Zaznacz prostokąt i dostosować ustawienia koloru mieć ładne gradientu (można też użyć innych kolorów).

Krok 4 - przycisk Utwórz

Efekt kostki powinna reagować dynamicznie na myszy użytkowników państwa (refinansowanie / szerokopasmowych). To najlepiej jest nie do słuchacza dodać wydarzenie do skutku siebie i zamiast tego "pustego" guzik.

Kliknij pierwszą klatkę na warstwie "btn" i narysuj prostokąt o wielkości płótna (kolor nie Mater ponieważ przycisk nie będzie widoczny). Zaznacz prostokąt i przekształcić ją w przycisku [naciśnij klawisz F8] lub prawym przyciskiem myszy na MovieClip -> "Convert to Symbol ...".

Określa nazwę przycisku na "btn" i upewnij się, że jest typu "Button".

Dwukrotnie kliknij przycisk. Teraz przeciągnij pierwszej klatki "w górę" do ostatniej klatki "Hit". Daje to pewność, że przycisk ten jest interaktywny, ale nie są widoczne.

Wracamy do głównej osi czasu i ustawić nazwę instancji przycisk "btn".

Krok 5 - Tworzenie rozpocząć MovieClip

Życie musi mieć dwa MovieClip gdzie wizualne informacje zostały zaczerpnięte z. Będziesz teraz stworzyć MovieClip przejścia rozpocznie się.

Kliknij na pierwszą klatkę na warstwie "img1". Importowanie obrazu do rozmiaru płótna, naciskając klawisz [Ctrl naciśnij-R] lub "Plik" -> "Import" -> "Import na scenie ...".

Teraz przekonwertować tego obrazu MovieClip o nazwie "img1".

Ustaw nazwę instancji utworzonego MovieClip do "img1".

Krok 6. - Tworzenie Koniec MovieClip

Koniec MovieClip zawiera tekst zamiast obrazu. Osiągnięcie tego celu będzie trzeba nieco inne podejście.

Wybierz pierwszą klatkę warstwy "img2" (ok, złe nazwy, zachęcamy do poprawienia tego ) I narysuj prostokąt o wielkości płótna. Chcesz, aby upewnić się, że koniec MovieClip ma takie same wymiary, Start MovieClip. Thats dlaczego najpierw zwrócić niewidzialny kształt tego samego rozmiaru jak Start MovieClip.

Wybierz kształt i ustawienie wartości alfa na 0 (kształt jest nadal istnieje, lecz niewidoczny).

Konwersja kształtu [MovieClip naciśnij klawisz F8] lub prawym przyciskiem myszy na MovieClip -> "Convert to Symbol ..." i nazwij ją "img2".

Kliknij dwukrotnie nowo utworzony MovieClip, utworzyć nową pustą warstwę i umieścić jakiś tekst w tym nowo utworzonych warstw.

Szef powrót do głównej osi czasu i ustawić nazwę instancji MovieClip do "img2".

Krok 7 - Dodaj refinansowanie ActionScript

Wybierz warstwę "script" i otworzyć "Akcje" okno "Windows" -> "Akcje" lub [naciśnij klawisz F9].

Jeśli chcesz po prostu mieć możliwość przejścia na refinansowanie (a nie przejście z powrotem na szerokopasmowych) kopię następujące wiersze w oknie kodu.

 btn.addEventListener (MouseEvent.ROLL_OVER, _onOver);

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

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

W pierwszej linii należy dodać słuchacza zdarzenia rollover przycisku. W funkcji "_onOver" (wiersz 3) po utworzeniu instancji CubeTransitionEffectAS3 przed wyłączeniem interaktywność myszy element (linia 4 i 5). Pamiętaj, że przycisk do utworzonego wcześniej jest dbanie o skutki myszy i nie chcesz skutek ingerencji w tej sprawie.

W linii 9 w końcu można zainicjować działanie (dokumentacja parametru tutaj). Ważną częścią są dwa pierwsze parametru. Zdefiniować, że przejście zaczyna się od "img1" i kończy się na "img2".

Eksport do pliku fla. Jak widać, części efekt doskonale współpracuje z przejrzyste tło "img2".

Krok 8 - Bardziej skomplikowane ActionScript

OK, z poprzedniego kodeksu refinansowanie działa dobrze. Ale co jeśli chcesz mieć uruchamianiem funkcji odwraca przejście od "img2" do "img1"? Aby to osiągnąć potrzebne jest bardziej skomplikowanego kodu. Usuń skrypt i dodać następujące:

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

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

 _onOver function (e: MouseEvent) (
  if (! jazdy) (
  _createAnimation ( "w");
  running = true;
  ) else (
  goin = false;
  goOut = true;
  )
 )

 _onOut function (e: MouseEvent) (
  if (! jazdy) (
  _createAnimation ( "out");
  running = true;
  ) else (
  goin = true;
  goOut = false;
  )
 )

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

  if (goin) (
  _createAnimation ( "out");
  ) else (
  running = false;
  goOut = false;
  )
 )

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

  if (goOut) (
  _createAnimation ( "w");
  ) else (
  running = false;
  goin = false;
  )
 )

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

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

Ważne jest, aby wiedzieć, że nie można odwrócić kierunek przejścia w życie jest uruchomiony. Zamiast tego można "zapamiętać" działania użytkownika, poczekaj, aż efekt jest zrobione i zastosowanie przejścia rewers.

Zmiennych "Going" i "goOut" (linia 5 i 6) są wykorzystywane do tego celu. Je ustawić przy funkcji "_onOver" i "_onOut" (wiersz 8 i 18) są wykonywane. Ale tylko wtedy, gdy var jazdy jest prawdziwe, jeśli jest fałszywe (linia 9 i 19), uruchomieniu przejścia od razu (linia 10 i 20).

Funkcja "_createAnimation" (pozycja 52) jest czynność pomocnika początku animacji w zależności od kierunku "dir" zdałeś jako parametr.

Zauważ, że po wywołaniu "removeFilter" metoda (linia 29 i 41), obie Start MovieClip i koniec MovieClip są ustawione na widoczne (na skutek). Thats dlaczego ustawić widoczność MovieClip - przejścia rozpoczęła się - na false (linia 30 i 42).

Pobrać

Kliknij tutaj, aby pobrać fla tego podręcznika. Uwaga:. Fla nie obejmuje części efekt. W celu zapewnienia pracy fla, należy zakupić efekt przejścia Cube tutaj.

Tutaj znajdziecie video tutorial w jaki sposób zapewnić inny efekt.