개요

이 튜토리얼에서 여러분은 어떻게 마우스 롤오버에 큐브 전환 효과를 만드는 방법을 배웁니다.

여기에 최종 결과 :


요구 사항

플래시 CS3의 또는 CS4를 플래시.

:이 튜토리얼에있는 스크린샷은 플래시 CS3의에서 만든됩니다. 그것은 정확히 같은 플래시 CS4에서 작동합니다.

1 단계 - 설치 효과 구성 요소

구입 큐브 전환 효과 여기를 . 제발는 다음 지침을 설치 및 라이브러리에서 드래그로 구성 요소를 구성 요소 패널 네. FLA에 파일을.

라이브러리에 구성 요소를 드래그

2 단계 - 새 레이어

가지 기본 타임 라인에 새 레이어를 만들어야합니다 깔끔한 유지하고 이름을 제공하십시오. 마이 화면 아래에 표시합니다.

메인 타임 라인에 레이어 만들기

3 단계 - 배경 만들기

이제 당신은 그라디언트로 배경을 만들 수 있습니다. 이것은 필요한 그것은 효과도 투명 콘텐츠 (그 나중에 좀 더 함께 작동 표시) 효과를 개선시키기 위해선 아니지만.

선택 "bg"레이어에있는 첫 번째 프레임과 캔버스에 사각형 도구로 모양을 그립니다. 선택 직사각형와) 당신은 또한 다른 색상을 사용할 수있는 좋은 그라디언트를 (필요에 컬러 설정을 조정합니다.

생성 배경 모양

색상 그라디언트 설정

4 단계 - 버튼 만들기

큐브 효과가 동적으로 사용자가 마우스 상태 (롤오버 / 공개)에 반응한다. 그것은 버튼은 "최고의 효과 이벤트 리스너를 추가 연습하지 않도록 자체를 공백 대신 사용합니다".

클릭 레이어의 첫 번째 프레임 "BTN"과 캔버스 (컬러 단추 표시되지 않습니다 이후 않습니다 가든 가지고 다녀의 크기와 사각형을 그리는). 선택 직사각형과 버튼에 [F8 키를 누릅니다] 또는 MovieClip을 마우스 오른쪽 클릭 -> "변환 심볼 ..."로 그것을 변환합니다.

버튼을 변환 모양

세트 "BTN"와 그 유형은 "확인 버튼의 이름 버튼".

버튼의 설정 이름

더블 클릭 버튼을 누릅니다. 이제 첫 번째 키프 레임을 드래그 "위로"의 마지막 프레임에 ""때려합니다. 이것은 확실히, 그 버튼이 표시되지 않을 수 인터랙티브 수 있습니다.

버튼 내부에 변경 키프 레임

다시 메인 타임 라인으로 가서 "BTN"로 버튼의 인스턴스 이름을 설정합니다.

버튼의 설정 인스턴스 이름

5 단계 - 만들기 시작 Movieclip

효과는 시각 정보가 가져온 두 Movieclip가 필요합니다. 이제부터 시작됩니다 Movieclip을 전환 만들어드립니다.

클릭 레이어 "img1"에 대한 첫 번째 프레임을 클릭합니다. 가져오기 이미지 캔버스의 크기와 파일 "[Ctrl 키를 누르십시오 - R에] 또는"을 눌러 -> "가져오기"-> "무대에서 가져오기 ...".

이미지 가져오기

지금 Movieclip이 이미지를 변환하고 "그것"img1 이름을.

Movieclip으로 변환 이미지

Movieclip의 설정 이름

설정 방금 Movieclip하기 위해 만든 "img1"의 인스턴스 이름입니다.

설정 인스턴스 이름

6 단계 - 최종 Movieclip 만들기

최종 Movieclip 대신 이미지 텍스트가 포함됩니다. 이 당신이 약간 다른 접근이 필요합니다 달성.

선택 레이어 "img2"(그래, 나쁜 이름의 첫 번째 프레임, 해결하기 위해 언제든지 그 :) )와 캔버스의 크기와 사각형을 그립니다. 당신은 최종 Movieclip가 시작 Movieclip와 같은 크기를 가지고 있는지 확인 싶어. 시작 Movieclip 같은 크기로 한게 당신이 먼저 그리는 이유는 눈에 보이지 않는 모양.

그리기 모양

선택 모양과 0으로 알파 값 (모양 집합은 아직 거기에 있지만 보이지 않는)입니다.

모양 설정 알파

Movieclip [국가 F8 키를 누릅니다] 또는 MovieClip을 마우스 오른쪽 클릭 -> "변환 심볼 ..."하는 방법 변환 모양과 그 이름이 "img2".

변환 Movieclip에

두 번 클릭하여 방금 만든 Movieclip, 새로운 빈 레이어를 만들고 그 새로 만들어진 레이어에 텍스트를 넣어.

Movieclip에 텍스트를 추가합니다

머리가 뒤로 주 타임 라인과 Movieclip의 인스턴스 이름을 설정 "img2".

설정 인스턴스 이름

7 단계 - ActionScript 롤오버 추가

선택 레이어 "스크립트"와 "윈도우"-> "작업"또는 [F9를 누르십에] "작업"창을 엽니다.

열기 ActionScript 창

당신은 단순히 회전에 변화를 원한다면 (및 공개에 아무런 백 전환) 코드 창에 다음 줄을 복사합니다. 

 btn.addEventListener (MouseEvent.ROLL_OVER, _onOver);

 함수 _onOver (전자 : MouseEvent) (
  var에 myFilter : CubeTransitionEffectAS3 = 새로운 CubeTransitionEffectAS3 ();
  = false를 myFilter.mouseEnabled;
  myFilter.mouseChildren = 거짓;
  (myFilter) addChild;

  (img1, img2, 75, "나는 -> myFilter.init 연구", 2, "easeInOutCubic", 허위);
 )

첫 번째 라인에서는 버튼에 롤오버 이벤트 리스너를 추가합니다. 함수에서 "_onOver"(라인 3) 구성 요소 (선 4와 5의 마우스 상호 작용을 해제하기 전에 먼저 CubeTransitionEffectAS3의 인스턴스를 만듭니다.) , 당신은 이전에 마우스 효과를 돌보는가 생성 버튼을 기억하고 그에 간섭 효과를 싶지 않아.

결국에는 9 호선 당신은 (초기화 효과 는 여기에 매개 변수 설명서의 ). 중요한 부분은 처음 두 매개 변수가 있습니다. 당신은 그 전환은 "img1"및 "으로 끝나는로 시작하는 정의 img2".

FLA에 수출하여 파일을 찾습니다. 당신이보다시피, 효과 구성 요소가 완벽하게 "img2"의 투명 배경으로 작동합니다.

8 단계 - 기타 복잡한 ActionScript

좋아, 이전 코드 롤오버은 아주 잘 작동합니다. 하지만 당신 또한 원한다면 img2 "를"img1 "에서"전환을 반대 공개 기능을 가지고? 당신은 좀 더 복잡한 코드가 필요 달성하십시오. 삭제 스크립트 삽입은 다음과 : 

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

 var에 실행 = 거짓;
 var에가는 = 거짓;
 var에 goOut = 거짓;

 함수 _onOver (전자 : MouseEvent) (
  (있다면! 실행) (
  _createAnimation ( "년");
  실행 = 진정한;
  다른) (
  아무데 = 거짓;
  goOut = 진정한;
  )
 )

 함수 _onOut (전자 : MouseEvent) (
  (있다면! 실행) (
  _createAnimation ( "아웃");
  실행 = 진정한;
  다른) (
  아무데 = 진정한;
  goOut = 거짓;
  )
 )

 함수 _inAnimationDone (전자 : 이벤트) (
  e.target.removeFilter ();
  = false를 img1.visible;

  면 (가는) (
  _createAnimation ( "아웃");
  다른) (
  실행 = 거짓;
  goOut = 거짓;
  )
 )

 함수 _outAnimationDone (전자 : 이벤트) (
  e.target.removeFilter ();
  = false를 img2.visible;

  면 (goOut) (
  _createAnimation ( "년");
  다른) (
  실행 = 거짓;
  아무데 = 거짓;
  )
 )

 함수 _createAnimation (말일세 : 문자열) (
  var에 myFilter : CubeTransitionEffectAS3 = 새로운 CubeTransitionEffectAS3 ();
  = false를 myFilter.mouseEnabled;
  myFilter.mouseChildren = 거짓;
  (myFilter) addChild;

  (말일세 == "에") (면
  (img1, img2, 24, "나는 -> myFilter.init 연구", 2, "easeInOutCubic", 허위);
  myFilter.addEventListener (CubeTransitionEffectAS3.ANIMATION_DONE, _inAnimationDone);
  ) 다른면 (말일세 == "아웃") (
  (img2, img1, 24, "r에 -> myFilter.init 난", 2, "easeInOutCubic", 허위);
  myFilter.addEventListener (CubeTransitionEffectAS3.ANIMATION_DONE, _outAnimationDone);
  )
 )

그것이 알고 중요, 당신은 전환 수있는 방향의 반대하지 효과 중에 실행됩니다. 대신 ""효과까지 완료하고 revers 전환을 적용 기다려 사용자의 동작을 기억하실 수 있습니다.

변수는 "가는"및 "goOut"(5 호선과 6) 그 목적을 위해 사용됩니다. 당신은 8과 18)를 실행하는 기능은 "_onOver"및 "_onOut"(라인 설정합니다. 하지만 그것은 거짓 (라인 9 19), 바로 (라인 전환을 시작할 경우에만 실행 var에 사실은 10 및 20).

함수 "_createAnimation"(라인 52) 귀하의 도우미 함수의 시작 방향의 "말일세"당신이 매개 변수로 전달 따라 애니메이션이다.

공지 사항은 "removeFilter"방법 (라인 29와 41) 모두 시작 Movieclip와 최종 Movieclip를 호출 이후로 설정되어 있습니다 보이는 (아웃 효과). 한게 왜 Movieclip의 가시성을 설정 - 전이 시작 - 거짓 (라인 30와 42)합니다.

최종 결과

다운로드

여기를 클릭 튜토리얼이 FLA에이의를 다운로드합니다. 참고 :. FLA는 구성 요소를 효과 않습니다 포함되어 있습니다. 하기 위해서는 작품을 FLA에 정보 수 있도록, 당신은 구입해야 전환 효과를 여기에 큐브 .

여기에서 찾을 수 동영상 효과를 구현하는 다른 튜토리얼의 방법 .

  • 공유 / 북마크