Poradniki Flash Effect Cool!

Streszczenie

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

O końcowy wynik:

Wymagania

Flash CS3 albo Flash CS4.

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

Krok 1 - Instalacja wpływ składnika

Zakup efekt przejścia Cube tutaj . Postępuj zgodnie z instrukcjami instalacji i przeciągania elementu z komponentu panel do biblioteki pliku. fla.

Krok 2 - Utwórz nową warstwę

Aby zachować porządek rzeczy, należy utworzyć nową warstwę na głównej osi czasu i nadaj mu nazwę. Tym, jak pokazano na screenie poniżej.

tło Krok 3 - Tworzenie

Teraz utworzyć tło z gradientem. Chociaż nie jest to konieczne, aby efekt pracy pokazuje, że wpływ również z przejrzystego treści (o tym później).

Zaznacz pierwszą ramkę w "BG" warstwę i narysuj kształt prostokąta z narzędzia na płótnie. Zaznacz prostokąt i dostosować ustawienia kolorów, aby mieć ładny gradient (można również użyć innych kolorów).

przycisk Krok 4 - Tworzenie

Efekt kostki powinna reagować dynamicznie na myszy użytkowników państwa (rollover / wejścia na rynek). To jest najlepsze praktyki, aby nie dodać wydarzenie słuchacza w ten sposób siebie i zamiast korzystać z "pustego" guzik.

Kliknij na pierwszą ramkę w warstwie "btn" i narysuj prostokąt o wymiarach płótnie (kolor nie ma uczelni, ponieważ przycisk nie jest widoczny). Zaznacz prostokąt i przekształcić go z przycisku naciśnij [F8] lub prawym przyciskiem myszy na MovieClip -> Convert to Symbol ... ".

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

Kliknij dwukrotnie przycisk. Teraz przeciągnij pierwszą klatkę kluczową "Up" do ostatniej ramce "Hit". Daje to pewność, że przycisk ten jest interaktywny, ale nie widoczne.

Powrót do głównej osi czasu i ustawić nazwę instancji przycisku "btn".

Krok 5 - Tworzenie start MovieClip

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

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

Teraz przerobić to zdjęcie do MovieClip o nazwie "img1".

Określić nazwę instancji MovieClip stworzony tylko do "img1".

Krok 6 - Tworzenie MovieClip End

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

Zaznacz pierwszą klatkę warstwy "img2" (ok, nazywania zła, nie krępuj się prawdą, że ) I narysuj prostokąt o wymiarach płótna. Chcesz, aby upewnić się, że koniec MovieClip ma takie same wymiary, Start MovieClip. To dlaczego najpierw zwrócić niewidzialny kształt samej wielkości, co Start MovieClip.

Zaznacz kształt i ustawić wartość alpha na 0 (kształt nadal istnieje, lecz niewidoczny).

Przekonwertować kształt MovieClip] [naciśnij klawisz F8 lub prawym przyciskiem myszy na MovieClip -> Convert to Symbol ... "i nadaj mu nazwę" img2 ".

Kliknij dwukrotnie nowo utworzony MovieClip, utwórz nową warstwę i umieścić jakiś tekst na tej nowo utworzonej warstwy.

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

Krok 7 - Dodaj rollover ActionScript

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

Jeśli chcecie mieć możliwość przejścia na refinansowanie (a nie wstecz, przejście na wprowadzenie ") skopiować poniższe linie do okna kodu.

 btn.addEventListener (MouseEvent.ROLL_OVER, _onOver);

 _onOver funkcji (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 dodać słuchacza zdarzenia rollover przycisku. W funkcji "_onOver" (linia 3) najpierw utworzyć wystąpienie CubeTransitionEffectAS3 przed wyłączeniem interaktywność myszy elementu (linia 4 i 5). Pamiętaj, że wcześniej utworzony przycisk jest dbanie o skutki myszy i nie chcemy ingerować w życie na tym.

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

Wyeksportować plik fla. Jak widać, części efekt doskonale współpracuje z przezroczystego tła "img2".

Krok 8 - Bardziej złożone ActionScript

OK, z poprzedniego kodeksu rollover działa dobrze. Ale co jeśli chcesz mieć funkcję przewracać, że odwraca przejścia z "img2" na "img1"? Aby to osiągnąć potrzebny jest bardziej skomplikowany kod. Usuń skrypt i wstawić następujący:

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

 var działa = false;
 var Goin = false;
 var goOut = false;

 _onOver funkcji (e: MouseEvent) (
  if (! jazdy) (
  _createAnimation ("w");
  kolejny = true;
  ) Else (
  Goin = false;
  goOut = true;
  )
 )

 _onOut funkcji (e: MouseEvent) (
  if (! jazdy) (
  _createAnimation ("out");
  kolejny = true;
  ) Else (
  Goin = true;
  goOut = false;
  )
 )

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

  if (Goin) (
  _createAnimation ("out");
  ) Else (
  kolejny = false;
  goOut = false;
  )
 )

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

  if (goOut) (
  _createAnimation ("w");
  ) Else (
  kolejny = 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łań użytkownika, poczekaj na efekt odbywa się stosować przejścia i rewers.

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

Funkcja "_createAnimation" (linia 52) to czynność pomocnika początku animacji, w zależności od kierunku "dir" ty przekazywane jako parametr.

Zauważ, że po wywołaniu "removeFilter" metody (linia 29 i 41) zarówno Start i End MovieClip MovieClip są ustawione na widoczne (z efektem). To dlatego tak ustawić widoczność MovieClip - przejście zaczęło się - na false (linia 30 i 42).

Pobierz

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

Tutaj można znaleźć wideo wychowawczy, w jaki sposób zastosować inną mocą .