Adobe Edge Animate入門その6 タッチイベントに対応する

日曜日 , 8, 9月 2013 Leave a comment

 Adobe Edgeでスマートフォンのタッチイベントに対応する方法を紹介します。

 タッチイベントでは以下のアクションを指定します。

 

  • touchstart : タッチが開始されたタイミング
  • touchmove : タッチした上でポイントが移動したタイミング
  • touchend : タッチイベントが終了したタイミング

 

 「アクション」(JavaScriptでイベントを記述する)を編集するには、アクションを編集したいオブジェクトを右クリックして「アクションを開く」を選択するか、または「Ctr+E」でエディタを起動します。

 

001

 

 

002

 

 

 コードはイベント毎に表示して編集するか、全文を表示して編集する方法があります。

 簡単な処理を記述するだけならイベント毎に表示で構いませんが、ガリガリ書く場合は全文を表示したほうが書きやすいと思います。

 

003

「アクションを開く」だとこのようにイベント毎に編集する

 

004

Ctr+Eでエディタを開くと全文かイベント毎か選択可能

 

イベントを記述する

 

 タッチイベントのコードは以下です。

 

      Symbol.bindElementAction(compId, symbolName, "${_rect}", "touchstart", function(sym, e) {
         // ユーザーがオブジェクトに触れたときに実行されるコードを挿入します(タッチデバイスの場合のみ)
         e.preventDefault();
         

      });
      //Edge binding end

      Symbol.bindElementAction(compId, symbolName, "${_rect}", "touchmove", function(sym, e) {
         e.preventDefault();
         
         // ユーザーがオブジェクトをドラッグしたときに実行されるコードを実行します(タッチデバイスの場合のみ)
         var x = e.originalEvent.touches[0].pageX;
         var y = e.originalEvent.touches[0].pageY;
         
         sym.$("rect").css({top: y, left: x}); 

      });
      //Edge binding end

      Symbol.bindElementAction(compId, symbolName, "${_rect}", "touchend", function(sym, e) {
         // ユーザーがオブジェクトに触れるのを止めたときに実行されるコードを挿入します(タッチデバイスの場合のみ)
         e.preventDefault();

      });
      //Edge binding end

 

 イベント毎に記述する場合は一部エディタ側で省略されて以下のように記述します。

 

 「touchstart」

// ユーザーがオブジェクトに触れたときに実行されるコードを挿入します(タッチデバイスの場合のみ)
e.preventDefault();

 

 「touchmove」

e.preventDefault();

// ユーザーがオブジェクトをドラッグしたときに実行されるコードを実行します(タッチデバイスの場合のみ)
var x = e.originalEvent.touches[0].pageX;
var y = e.originalEvent.touches[0].pageY;

sym.$("rect").css({top: y, left: x});

 

 「touchend」

// ユーザーがオブジェクトに触れるのを止めたときに実行されるコードを挿入します(タッチデバイスの場合のみ)
e.preventDefault();

 

動作テストする

 

 PCがタッチ対応していない場合、ブラウザでプレビューしてもイベントが発生しないので、Webに上げてスマートフォンでデバッグしました。

 AdobeのEdge InspectorがあるとPCで表示したサイトをスマートフォンで自動で遷移表示することが可能なので便利です。

 (シュミレーターなどでデバッグする方法がありそう。)


Please give us your valuable comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です