2016-09-14 108 views
0

我有一個項目,我需要將Flash電影製作爲互動遊戲。因爲,大多數瀏覽器已經(或即將)對Flash進行過濾,所以我決定這款遊戲必須基於HTML5/JS。由於大多數圖形和動畫已經在這部Flash影片中完成(我有它的源代碼),我正在使用Adobe Flash和CreateJS技術(HTML5 + Canvas + JS)進行開發。到目前爲止,我非常喜歡這個解決方案,儘管我有一個我還無法解決的問題。 該遊戲是一個簡單的拖動&下降匹配遊戲。這個問題我已經在這個問題標題簡短地描述,我會盡量在這裏更詳細的解釋:當mousedown/pressmove播放目標電影時,CreateJS上傳/點擊不會觸發

label.on('mousedown', function() { 
    //this.image.bg.gotoAndStop(2); 
}); 

label.on('pressmove', function(evt) { 
     this.x = getStageX(evt.stageX); 
     this.y = getStageY(evt.stageY); 
     currentStage.setChildIndex(this, currentStage.getNumChildren() - 1); 
     stage.update(); 
}); 

label.on('pressup', function(evt) { 
    console.log('Hi! I'm mouseup event!') 
    this.x = labelInitX; 
    this.y = labelInitY; 
    this.image.bg.gotoAndStop(0); 
}); 

上面,你可以看到簡單的3事件處理程序我使用。一切工作正常,直到我取消註釋第二行 - //this.image.bg.gotoAndStop(2);。當我這樣做時,pressup事件大多不會觸發,這很奇怪,因爲有時會觸發(10次中的2-3次),所以標籤粘貼指針,直到再次按下按鈕。 這是一些錯誤,或者我只是不明白關於CreateJS及其事件處理程序的一些東西。我嘗試了不同的組合。使用click代替pressup,將this.image.bg.gotoAndStop(2);置於pressmove處理程序內。用stage.on('stagepressmove', handler)替換pressmove處理程序。沒有沒有工作。 this.image.bg.gotoAndStop(2); - 這個東西只是更新時間範圍(更改標籤的背景圖片)。我可以以編程方式更改此圖像(無需播放時間範圍),我幾乎可以確定問題將得到解決,但我想了解自己這裏出了什麼問題,或者我在做什麼錯誤的事件處理程序。

另一個不那麼重要的事情,但將需要了解的是爲什麼當pressmove事件正在運行,CreateJS對象停止接收事件觸發約rollovermouseover?在DOM中,默認情況下事件冒泡正在運行,直到您停止使用stopPropagation。它如何與CreateJS一起工作?似乎默認情況下,冒泡只是在這裏關閉。我怎樣才能打開它?

回答

2

我想我可能會揭示什麼,我認爲正在發生的一些情況。

正常的鼠標事件「點擊」,「鼠標移動」,「滾動」,「鋪開」等都由舞臺決定,默認情況下鼠標事件的「目標」是什麼,目標是最低級別與之交互的東西。如果在鼠標關閉時內容發生更改,則在發生鼠標移動時,它不會被視爲相同的目標。由於不移動鼠標就不重新檢查位置,鼠標懸停,鼠標懸停,滾動和卷展事件也可能會奇怪地起作用。

相反,「pressmove」和「pressup」事件並不關心一旦按下某個按鈕時鼠標下的內容。目標將始終是按下的內容,這允許您將鼠標移出對象(甚至移除對象),並仍然接收來自對象的事件。這也確保即使您在對象外釋放,也會收到新聞上傳事件。

作爲@RandyPrad提到,hitArea可以解決您的問題。通過指定命中區域,您將覆蓋剪輯的內容,因此您的目標應始終是容器(MovieClip)而不是其內容。這樣,無論在動畫片段內按下什麼,它在釋放時都是相同的目標。您還可以使用mouseChildren屬性獲得相同的效果。

movieClip.mouseChildren = false; 

希望有幫助!

+0

這件事情完美無缺!非常感謝! – nostop

相關問題