플래시 효과 자습서 쥑인다!

요약

이게 당신이 어떻게에 마우스를 롤오버 큐브 전환 효과를 만드는 방법을 배웁니다 입문서합니다.

여기에 최종 결과 :

요구 사항

CS4 또는 Flash CS3의 플래시.

참고 :이 튜토리얼에서 플래시 CS3의 화면에서 이루어집니다. 그것은 정확히 같은 플래시 CS4에서 작동합니다.

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

구입 큐브 전환 효과는 여기에. 제발 지시를 설치 및 구성 요소 패널에서. FLA에 파일의 라이브러리에 구성 요소를 드래그하십시오.

2 단계 - 새 레이어 만들기

것들을 당신은 메인 타임 라인에 새 레이어를 생성해야하고 이름을 지어 주어라 깔끔한 상태로 유지하려면. 이렇게 아래의 스크린샷에 표시된 마십시오.

3 단계 - 배경 만들기

이제 그라디언트로 배경을 만듭니다. 비록 그 효과는 투명 콘텐츠와 (그 후) 더 많은 작품을 보여주는 효과가 작업을 할 필요가없습니다.

"bg에서 첫 번째 프레임을 선택합니다"레이어와 캔버스에 사각형 도구를 사용하여 모양을 그립니다. 선택 직사각형 및 색상 설정을 조정할 좋은 그라디언트를 (도) 다른 색상을 사용할 수있습니다.

4 단계 - 버튼 만들기

큐브 효과를 동적으로 사용자가 마우스를 상태 (롤오버 / 롤아웃)에 반응한다. 그것은 영향을 자체와 이벤트 리스너를 추가하는 대신 ""버튼을 사용하여 최상의 빈되지 않습니다.

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

"BTN"로 버튼의 이름을 설정하고 있는지 확인하십시오 종류는 "버튼".

더블 클릭 버튼을 누릅니다. 이제 ""최대의 마지막 프레임에 "히트는"첫 번째 키프 레임 끕니다. 이것은 물론, 그 버튼이 표시되지 않을 것입니다 인터랙티브 수있습니다.

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

5 단계 - 시작 Movieclip 만들기

효과가 두 Movieclip 영상 정보가 어디에서 가져옵니다이 필요합니다. 이제 Movieclip 전환 시작된다 만들어 드리겠습니다.

레이어 "img1에서 첫 번째 프레임에있는"를 클릭하십시오. - 연구] 또는 "파일"- ""가져오기 "- 무대에서" "가져오기 ..."[기자 Ctrl 키를 누르면 캔버스의 크기 가져오기 이미지입니다.

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

의 인스턴스 이름을 설정합니다 그냥 Movieclip img1 "만든".

6 단계 - 최종 Movieclip 만들기

최종 Movieclip 대신 이미지가 텍스트가 포함됩니다. 이게 당신이 약간 다른 접근 방식이 필요합니다 얻을 수있습니다.

레이어 "img2의 첫 번째 프레임을 선택합니다"(괜찮 아요, 나쁜 이름이 정확 무료 느낌이 )와 캔버스의 크기와 사각형을 그립니다. 당신은 확실히 최종 Movieclip 시작 Movieclip 같은 크기가 만들고 싶어. 넘어 왜 먼저 시작 Movieclip 같은 크기로 보이지 않는 모양을 그립니다.

선택 모양과 0으로 알파 값 (모양을 설정하지만, 아직 거기에 눈에 보이지 않는)입니다.

Movieclip [F8 키를 눌러 변환을 모양] 또는 MovieClip에 마우스 오른쪽 단추로 - ""로 변환 심볼 ... "하고 이름을"img2 ".

두 번 눌러 방금 만든 Movieclip, 새로운 빈 레이어를 만들고 새로 만든 레이어에 일부 텍스트를 넣어.

머리가 다시 메인 타임 라인 및 img2 "로 Movieclip의 인스턴스 이름을 설정".

7 단계 - 롤오버 ActionScript를 추가합니다

윈도우 "를 선택 레이어를"스크립트 "및"작업을 열고 "창"- ""작업 "또는 [F9 키를 누릅니다].

만약 당신이 단순히 롤오버에 대한 전환을 갖고 싶어 (그리고 다시는 - 롤아웃에서 전환) 코드 창에 다음 줄을 복사합니다.

 btn.addEventListener (MouseEvent.ROLL_OVER, _onOver);

 함수 _onOver (이메일 : MouseEvent) (
  var myFilter : CubeTransitionEffectAS3 = 새로운 CubeTransitionEffectAS3 ();
  = false를 myFilter.mouseEnabled;
  myFilter.mouseChildren = 거짓;
  addChild (myFilter);

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

첫 번째 라인에서 여러분은 버튼에 롤오버 이벤트 리스너를 추가합니다. 함수는 "_onOver"에서는 (행 3) 처음 전에 (행 4와 5) 구성 요소의 상호 작용을 해제 마우스 CubeTransitionEffectAS3의 인스턴스를 만듭니다. 앞서 마우스 효과를 돌보는인지 버튼을 만들어 기억하면 그걸 방해하는 효과가 싶지 않아요.

9 호선 마침내에서는 매개 변수를 여기 (문서) 효과를 초기화합니다. 중요한 부분은 처음 두 매개 변수가있습니다. 당신은 전환 img1 "와"시작 img2 "로 끝나는"정의할 수있습니다.

FLA에 내보내기 파일을 엽니다. 보시다시피, 효과가 구성 요소를 완벽하게 img2 "의 투명 배경으로"작동합니다.

8 단계 - 기타 복잡한 ActionScript를

좋아, 전복 잘 작동합니다 이전 코드와 함께. 하지만 만약 당신이 또한 "img1"에 img2 "에서 전환"역으로 롤아웃 함수를 갖고 싶어? 당신이 좀 더 복잡한 코드가 필요 해요 달성하십시오. 스크립트를 삭제하고 다음에 삽입 :

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

 실행 = false를 var;
 var 가는거야 = 거짓;
 var goOut = 거짓;

 함수 _onOver (이메일 : MouseEvent) (
  만약 (! 실행) (
  _createAnimation ( "") 안에;
  = true를 실행;
  다른) (
  가는거야 = 거짓;
  goOut = 진정한;
  )
 )

 함수 _onOut (이메일 : MouseEvent) (
  만약 (! 실행) (
  _createAnimation ( "아웃");
  = true를 실행;
  다른) (
  가는거야 = 진정한;
  goOut = 거짓;
  )
 )

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

  (가는) 만약 (
  _createAnimation ( "아웃");
  다른) (
  = false를 실행;
  goOut = 거짓;
  )
 )

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

  (goOut) 만약 (
  _createAnimation ( "") 안에;
  다른) (
  = false를 실행;
  가는거야 = 거짓;
  )
 )

 _createAnimation 기능 (만해 : 문자열) (
  var myFilter : CubeTransitionEffectAS3 = 새로운 CubeTransitionEffectAS3 ();
  = false를 myFilter.mouseEnabled;
  myFilter.mouseChildren = 거짓;
  addChild (myFilter);

  만약 (만해 == "1") (
  (img1, img2, 24, "나 -"연구 ", 2,"easeInOutCubic ", 허위); myFilter.init
  myFilter.addEventListener (CubeTransitionEffectAS3.ANIMATION_DONE, _inAnimationDone);
  ) 다른 경우 (만해 == "아웃") (
  (img2, img1, 24, "r에 -"나 ", 2,"easeInOutCubic ", 허위); myFilter.init
  myFilter.addEventListener (CubeTransitionEffectAS3.ANIMATION_DONE, _outAnimationDone);
  )
 )

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

변수 "간다"와 "goOut"(행 5와 6)은 목적을 위해 사용됩니다. 당신은 "과"_onOut "(행 8 기능을 할 때"_onOver 그들을 설정하고 18)가 실행됩니다. 면 (행 9, 19) 거짓의 그러나의 var 경우에만 실행이 사실이라면, 당신은 지금 당장 (한 줄에 10 ~ 20) 전환을 시작합니다.

함수는 "_createAnimation"(행 52) 귀하의 도우미 함수를 시작 방향의 매개 변수로 전달 "만해"에 따라 애니메이션입니다.

공지 사항은 "removeFilter"방법 (라인 29와 41)을 모두 시작 Movieclip 최종 Movieclip 호출 후에 표시하려면 (아웃 효과를 설정됩니다.) 왜 넘어 - 전환과 거짓 (라인 30와 42 -)로 시작 Movieclip 가시성을 설정합니다.

다운로드

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

여기 동영상 어떻게 다른 효과를 구현하는 방법에 튜토리얼을 찾을 수있습니다.