단계별로 복잡한 플래시 롤오버 만들기 (루프> 롤오버 애니메이션> 시간있는 애니메이션)

Question

좋아, 이제 상황이 조금 복잡해지고 있습니다. 추가 콘텐츠를 제공하기 위해 이미지 구석에 앉을 수있는 Flash 개체를 만들어야합니다. 그건 내 플래시 기술 수준을 넘어, 내 작품은 일반적으로 포토샵과 일러스트 레이터에서 인쇄 작업에 국한되므로 다음 중 하나라도 명확하지 않은 경우 실례합니다. 그래도 나는 배우려고 노력 중이므로 올바른 방향으로 나아가는 조언을 주시면 감사하겠습니다.

그래서이 모든 것이 내 문제와 함께 작동해야합니다. 이미지 & 플래시 항목이 작은 루프 애니메이션/눈을 그릴 상호 작용 등의 항목을 보여주기 위해 재생됩니다로드

1. . 사용자가 롤오버를하면 모퉁이가 벗겨집니다. 마우스 오버/마우스 오프 및 초기 애니메이션 반복에 반응하는 롤오버 작업 peelback 애니메이션이 있지만 마우스 오버 시까 지 초기 루프를 만드는 방법을 배울 수 없습니다. 마우스를 끝내면 peelback을 재생합니다. . 그리고 사용자가 벗어나면 초기 애니메이션 루프로 돌아갑니다. (이들 각각의 애니메이션은 라이브러리에 무비 클립으로 저장됩니다.)

2. 다음은 더 복잡해집니다. 사용자가 완전히 벗겨 질 때까지 모서리에 머물러 있으면 작은 카운트 다운을해야합니다. (예 : 3, 2, 1 상황)을 보여주기 전에 라이트 박스를 실행하기 전에 (브라우저에서 jQuery가 필요하거나 플래시에서 수행 할 수 있습니까?) 컨텐츠를 제공해야합니다.

누구나 제공 할 수있는 도움에 감사드립니다. 내가 말했듯이, 나는 모든 것을 설명해 주실 수 있도록 최선을 다하고 있습니다.

Answer 1

업데이트 : OP의 의견을 바탕으로 새로운 제안 솔루션이 아래에 요약되어 있습니다.

수정 된 (그러나 테스트되지 않은) 솔루션을 아래에 작성했습니다. 여러분이 Flash에 비교적 익숙하지 않기 때문에 ActionScript 3의 일부분, 특히 이벤트 처리와 관련하여 명확한 부분을 명확하게 알려주는 몇 가지 "우회로"를 추가했습니다. 바닥 에 순서 상단에, 행동, 핫스팟, 루프, 및 컬 -

1. 이 기본 타임 라인에 4 층 만들기 :
   이 끝난부터, 이것은 내가 주 FLA 타임 라인을 설정하는 것이 방법이다
2. 핫스팟 레이어에서 클립의 "마우스 가능"영역을 덮는 사각형을 만듭니다. 사각형의 색상을 alpha = 0으로 설정하고 테두리를 제거합니다. 그런 다음 MovieClip 심볼로 변환하고 스테이지 인스턴스 이름을 "hotspot_mc"로 지정합니다.
3. 루프 MovieClip을 루프 레이어에 넣고 이름을 "loop_mc"로 지정합니다.
4. curl MovieClip을 컬 레이어에 놓고 이름을 "curl_mc"로 지정합니다.
5. 는이 라인을 따라 액션 레이어의 첫 번째 키 프레임에 코드를 추가합니다 :

---

import flash.external.ExternalInterface; 
import flash.events.MouseEvent; 
import flash.events.Event; 

//Stops the main timeline on the first frame 
stop(); 

//Makes the curl_mc invisible 
//(Note: alpha varies from 0 to 1, so for instance you can make any 
//clip half-transparent by typing clipName.alpha = 0.5) 
curl_mc.alpha = 0; 

//Stop the curl_mc clip from playing initially, we only want it to begin 
//playing on rollover 
curl_mc.stop(); 

//Make your hotspot look like a button when users mouse over it 
//by setting these properties on it 
hotspot_mc.useHandCursor = true; 
hotspot_mc.buttonMode = true; 

//We attach our event handlers to the hotspot. Because the hotspot is a 
//rectangle of specific position and size it lets us control exactly where 
//mouse actions will trigger events. You *could* attach the handlers to 
//loop_mc instead, so a hotspot clip isn't strictly necessary, but it's 
//handy. You can also make the shape in the hotspot_mc any shape you 
//want, it does not need to be a rectangle. 

hotspot_mc.addEventListener(MouseEvent.ROLL_OVER, onLoopRollover, false, 0, true); 
hotspot_mc.addEventListener(MouseEvent.ROLL_OUT, onLoopRollout, false, 0, true); 

//Lastly, to be extra fancy, let's trigger your lightbox when 
//the user clicks the hotspot OR when the curl_mc dispatches 
//the 'curlComplete' event (which you will set up yourself on 
//the last frame of the curl_mc timeline). 

hotspot_mc.addEventListener(MouseEvent.CLICK, showLightbox, false, 0, true); 
curl_mc.addEventListener('curlComplete', showLightbox, false, 0, true); 

//When we roll over the hotspot, hide the loop and show the curl 
function onLoopRollover(e:MouseEvent):void 
{ 
    //Hide the loop animation so we can see the curl beneath it 
    loop_mc.alpha = 0; 
    loop_mc.stop(); 

    //Show the curl animation and play it 
    curl_mc.alpha = 1; 
    curl_mc.gotoAndPlay(1); 
} 

//When we roll out of the hotspot, hide the curl and show the loop 
function onLoopRollout(e:MouseEvent):void 
{ 
    loop_mc.alpha = 1; 
    loop_mc.gotoAndPlay(1); 

    curl_mc.alpha = 0; 
    curl_mc.stop(); 
} 

//Shows the JavaScript-based lightbox 
function showLightbox(e:Event = null):void 
{ 
    ExternalInterface.call('JS_ShowLightbox'); 
} 

을 ...마지막으로, curl_mc 타임 라인의 마지막 프레임에 (당신의 카운트 다운 순서 후), 그 타임 라인의 액션 레이어의 키 프레임에 코드를 추가합니다

이

import flash.events.Event; 
dispatchEvent(new Event('curlComplete')); 
stop(); 


//dispatchEvent() is a function that sends an event out to be 
//handled by any listening handler functions (like the ones on 
//frame 1 of the main timeline). dispatchEvent() accepts an Event 
//as a parameter, which we create new for this purpose. In turn, 
//when creating a new Event, you pass in the name of the event so 
//that handlers can tell them apart. This matches the event name 
//passed in to addEventListener(eventName, eventHandler, false, 0, true). 

//This is how event handlers basically work in AS3. By putting this 
//code on the last frame of curl_mc, we use a new event to signal to 
//our application that the curl animation is done. 

물론,이 상황을 코딩이 하나의 방법보다 더있다. 그러나이 방법을 사용하면 응용 프로그램의 한 영역에서 이벤트를 만들고 "디스패치"하고 다른 위치에서 작성한 함수로 이벤트를 처리하는 방법을 알 수 있습니다.

HTH!

ORIGINAL 답변 :

그때, 마우스 오버 할 때까지 초기 루프를 만들 마우스가 위에있을 때 필백을 재생하는 방법을 작동하지 않을 수 있습니다. 그리고 사용자가 벗어나면 초기 애니메이션 루프로 돌아갑니다.

gotoAndPlay() 및 gotoAndStop() ActionScript 함수를 사용하십시오.

이 두 함수를 사용하여 루프를 만들고 애니메이션 재생을 제어 할 수 있습니다. 예를 들어 키 프레임을 만들 경우, 그것을 선택하고 작업 창을 열고 들어, 다음 ActionScript를 추가 할 수 있습니다

gotoAndPlay(1); 

즉시 재생 헤드가이 키 프레임에 도달 한, 타임 라인으로 이동하고 프레임 1에서 재생됩니다 이렇게하면 프레임 1에서 키 프레임까지 무한 재생 루프가 생성됩니다. 재생 헤드가이 키 프레임을 누를 때마다 뒤로 건너 뛰고 다시 시작됩니다.

gotoAndPlay('rolloverStart'); 

사항 gotoAndStop()는 주어진 프레임으로 이동하고 거기에 애니메이션을 중지합니다 제외하고 같은 방식으로 작동합니다 : 그들은 타임 라인에 정의 된 경우

또한 같은 프레임 레이블을 사용할 수 있습니다.

사용자가 완전히 난 작은 카운트 다운 쇼 (3, 2, 1 개 상황의 종류)를 만들 필요가 다시 박리 될 때까지 구석에 남아있는 경우

, 라이트 박스를 (시작하기 전에이 jQuery를 할 것 , 또는 Flash에서 할 수 있습니까?) 브라우저에서 콘텐츠를 제공합니다.

사용자가 코너 ("핫 스팟") 위로 마우스를 가져 가면

1. , 보조 애니메이션을 재생하고 가지고 시작합니다 :

그냥 수행하는 두 가지 기능이있다, 명확하게 플래시는 웹 페이지

재에 라이트 박스를 제기해야한다

이 완료되는 조치 : 기능 # 1, 가장 간단한 방법은 롤오버 애니메이션 끝 부분에 카운트 다운 애니메이션을 추가하는 것입니다. 이렇게하면 끝 부분에 하나의 긴 롤오버 애니메이션이 효과적으로 생성됩니다.

Re : function # 2, 라이트를 사용하여 Javascript 기능을 호출 할 수 있습니다.당신의 카운트 다운 애니메이션의 끝에서 당신은 키 프레임을 추가하고이 액션 스크립트 3 코드를 사용할 수 있습니다

import flash.external.ExternalInterface; 
ExternalInterface.call('JS_ShowLightbox'); 

당신이 JS_ShowLightbox (라는 웹 페이지)에 자바 스크립트 기능이있는 경우,이 호출 될 플래시이 키 프레임에 도달 할 때 .

로스