あゆたジャーナル @ayuta-tech - Tumblr Blog

Posts

Leap MotionとUnityを連携して簡単なゲームを作ってみました。

こんにちは。

@mouri45です。

Leap Motionがやっと使えるようになったので、デモレベルのものですがUnityと連携した簡単なゲームを作ってみました。

センサーの部分はサンプルのソースを流用して割と簡単に連携できました。

あと、7/27にゆるめの勉強会をしようと思ってます。

ご興味がある方はご参加いただければ幸いです。

http://atnd.org/events/41813

Preparation of the marker (Fantastic Christmas AR)

Instructions for use:

To use this application, it is necessary to download the dedicated marker and print it on the printer.

1.Download the marker.

Marker image data:

MS-Word format: [Large Size]　[Middle Size]　[Small Size]

PDF format:[Large Size]　[Middle Size]　[Small Size]

2.Download the marker and then print it on paper.

3.Cut out the marker.

4.When passing the app over the marker, a Christmas gift appears.

5.When tapping the Christmas gift, a fairy flies out of it with a Christmas tree and snowman appearing and a Christmas song played.

6.After that, remove the app from the marker. You can see the fairy and Santa Claus flying around.

70種以上のランキングをまとめて閲覧できるアプリ『ランキングステーション』のAndroid版をリリースしました！

注目のニュースや流行を押さえるのに、最適なアプリです！

Android版は、Google Playから無料でダウンロード可能です。

Android版ダウンロード

iPhone版はこちら！

アプリ紹介文

———————————————————-

ランキングステーションは、いろんなジャンルのランキングが一度にみれるランキングまとめアプリです！注目のニュースやキーワード、売れ筋商品、運勢、人気の動画などなど！７０個以上のランキングを掲載！これさえあれば、世の中の関心事や売れている商品などが一目瞭然です！！

【こんな時におすすめ】合コン、デート、世間話など、話題作りおすすめ通勤、通学の電車の中など暇つぶしに最適自宅のリビングやベッドでまったり情報収集商品開発などで、ユーザのニーズを日頃からチェックしたいとき

【アプリの特徴】サイト一覧では、1位から3位までの情報が表示されるため、一覧の流し読みだけでもランキングの把握が可能！！！また、好きなジャンルのランキングをお気に入りに追加することで、自分だけのランキング集として閲覧することもできます。情報の更新頻度が高いので、情報はいつも新鮮。だから、いつみても飽きません！

【アプリの機能】いろんなジャンルのランキングを一覧表示(カテゴリ別/サイト別) ランキング表示ランクインした情報の詳細情報表示注目のランキングを毎日順位付け（注目サイト）お気に入り閲覧履歴無料アプリ紹介

【コンテンツ内容詳細】・取り扱いカテゴリ　ニュース／検索ワード／ CD ／ DVD ／本／ゲーム／動画／グルメ／つぶやき／株／占い／その他現在７０種以上。コンテンツは増減する場合があります。

クリスマス向け ARアプリ『ファンタスティッククリスマス AR 』をリリースしました！

クリスマス向けのARアプリをリリースしました！

ARを使った幻想的な演出とオルゴール調の音楽がクリスマスのムードを盛り上げます！

Google Play、AppStoreからダウンロードし、無料でご利用いただけます。

Google Play

AppStore

ご利用になるには、マーカーをダウンロードしてください。

マーカーの利用方法を見る

『ファンタスティッククリスマス AR』のマーカー用意方法と使い方

『ファンタスティッククリスマス AR 2012』は、マーカーにかざして使用するタイプのARアプリです。(アプリ紹介ページ)

リンクから、いずれかのマーカーをダウンロードして、印刷してご利用ください。

Word形式：【大】　【中】　【小】

PDF形式：【大】　【中】　【小】

下記の画像をパソコン、またはアプリを実行する以外のスマートフォンなどで表示し、アプリをかざしても、試すことが可能です。

70種以上のランキングをまとめて閲覧できるiPhoneアプリ『ランキングステーション』をリリースしました！

注目のニュースや流行を押さえるのに、超便利なアプリになってます。

iPhone版はAppStoreから無料でダウンロードできます！

iPhone版ダウンロード

Android版はこちら！

11/7 iPhone版バージョン1.1をリリースしました！

バージョン1.1では、Twitter投稿機能、セクションの折りたたみなどに対応しました。

リリース２日目にAppStoreアプリランキング、無料ニュースカテゴリで５位になりました！

アプリ紹介をされてるサイトにてレビューを掲載していただきました！ありがとうございます！

AppLiFE様

アップス！様

インターネットコム様

ミートアイ様

ビジネスマン向けおすすめiPhoneアプリ紹介様

SPApp!様

iPhone女史様

Woman Apps Magazine様

RainbowApps様

アプリ紹介文

---------------------------------------

Adobe Edge Animateもくもく勉強会開催のお知らせ

Adobe Edge Animateのもくもく会やります。

http://atnd.org/events/32840

秋葉原Unityもくもく勉強会 #2 開催のお知らせ

9/30にUnityのもくもく会をやります。各々好きな物を作ったり勉強したりする、ゆるい会です。主催者と面識のない方の参加も大歓迎です。

お申し込みはATNDからどうぞ。 http://atnd.org/events/32501

花火をぶつけて、エイリアンを倒せ！iPhone,iPadアプリ「エイリアンVS花火職人」をリリースしました！(無料)

こんにちは。

@mouri45です。

iPhone,iPad対応のシューティングゲームをリリースしました。無料でお試しいただけるので、是非遊んでいただければ幸いです。

本作品は、シューティングゲームですが、敵や敵の玉をよけるといった操作はありません。敵はすべて、撃ち落とします。その結果、ひたすらタップして、敵を倒すことに集中できる、超シンプルなゲーム性になっています。また、花火のエフェクトや音にこだわり、爽快感のあるシューティングゲームに仕上げました。是非、iPhoneの音をONにしてお楽しみください。

AppStore http://itunes.apple.com/jp/app/id557521627?mt=8

プロモーションビデオ：

プレイ動画：

ーーーアプリ紹介文ーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

花火をぶつけて、エイリアンを倒せ！

爽快花火シューティングゲーム

「エイリアンVS花火職人」

【特徴】

・【爽快感】美しい花火エフェクトと効果音による、ついつい遊び続けたくなる爽快感

・【臨場感】三味線ベースの軽快なBGM

・【超シンプル】敵をよける必要なし。タップしてひたすら敵を撃ち落とす、超シンプルなゲーム性

・【やり込み要素】普通モードが終わったら、無制限モード。いくらでも、遊び続けられるやり込み要素

【ストーリー】

2X13年、宇宙からエイリアンが来襲。

エイリアンの侵略から地球を守るため、花火職人たちが立ち上がった！

【遊び方】

----通常モード----

ステージをクリアしていく通常のゲームモードです。

タップすると、タップした場所の垂直方向に花火が発射されます。

エイリアンに花火をぶつけることで、エイリアンを倒すことができます。

エイリアンが地球にぶつかると、ライフが減ります。

ライフが０になると、ゲームオーバーです。

----無制限モード----

ゲームオーバー無しで、エイリアンを倒し続けスコアを競うモードです。

タップすると、タップした場所の垂直方向に花火が発射されます。

エイリアンに花火をぶつけることで、エイリアンを倒すことができます。

エイリアンを倒し続けると、スコアがあがっていき300pointごとにレベルが上がります。

レベルが上がるとエイリアンのスピードがあがっていきます。

エイリアンが地球にぶつかると、点数が減りレベルも下がります。

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

エイリアンVS花火職人プレイ動画

エイリアンVS花火職人プロモーションムービー

「あゆたジャーナル」はじめました。

こんにちは、@mouri45です。

会社のブログをはじめました。

技術ネタ、ビジネスネタ、会社の活動などを掲載して行く予定です。

既に何件か、記事を公開しました。

Adobe Edge Animate入門

HTML5アニメーションツール「Adobe Edge Animate」のご紹介

Adobe Edge Animateを使って簡単なアニメーションを作ってみる

Adobe Edge AnimateのSymbolを使ってみる

Sprite画像を利用したアニメーション

Javascriptできれいなグラフがかけるライブラリ Highcharts JS

[PhantomJS]ブラウザを使わずにWebページの画面キャプチャを取る方法

今後も、記事を増やしていきたいと思います。お楽しみに！

#ayuta

Adobe Edge Animate入門

こんにちは、@mouri45です。

@roothybrid7がAdobe Edge Animateの記事を書いてくれたので目次ページを作ってみました。

Adobe Edge AnimateはHTML5やCSS3などを使ったインタラクティブなコンテンツ制作するオーサリングツールです。このジャンルでは、これまで決定版といえるツールが無かったように思いますが、私はAdobe Edge Animateが、このジャンルのスタンダードなると期待しています。

下記の記事が、Adobe Edge Animateを始める方の学習の一助になれば幸いです。また、今回の記事は少し技術者寄りですが、もうすこし軽めの記事も追加して行けたらと考えています。

HTML5アニメーションツール「Adobe Edge Animate」のご紹介

Adobe Edge Animateを使って簡単なアニメーションを作ってみる

Adobe Edge AnimateのSymbolを使ってみる

Sprite画像を利用したアニメーション

#Adobe #EdgeAnimate #HTML5 #Javascript #CSS3

[Adobe Edge Animate] Sprite画像を利用したアニメーション

Sprite画像を用意して、CSSで画像位置の変更と切り抜きを利用してアニメーションを作成します。

前提環境

本記事は、Adobe Edge Animate preview 7 をベースにしています。またサンプルは、MacOSX環境で作成したので、Windowsをお使いの場合、コマンド操作に違いがあるかもしれませんので、適宜読みかえてください。

動作サンプル

このサンプルでは、Sprite画像をシンボル化し、Timelineで切り抜きと画像位置の変更を駆使して、アニメーションしているように見せます。また、シンボル化したSprite画像を別のSymbolで組み合わせて移動アニメーションを新たに作ります。

サンプルが表示されない場合はこちらからアクセスしてみてください。

ソースコードは下記からダウンロードできます。

SpriteImageダウンロード(zip)

SpriteImageダウンロード(tar.gz)

SpriteImageソースコード(github)

Sprite画像

下記は一枚の画像で、これをそれぞれ切り抜いてアニメーションに使います。通常は、CSSを使い表現するのですが、Edge Animateでも同じように、切り抜きと位置の変更、そしてTimelineを使って表現することができました。

Sprite画像でCSSスプライトと同じようなことをする

Edge AnimateでCSSスプライトと同じようなことをするには、Sprite画像をシンボル化してTimelineに切り抜き画像を並べることでできました。やることとしては、プロパティパネルの背景イメージの位置と切り抜きサイズを決定すること、そしてこの切り抜き画像のTimeline上の位置を決めることです。

使うときには、下記のようにJavascriptからEdge APIのstopとラベルを使ってアクセスすることになります。

// Stageや親SymbolのTriggerやEventのアクション関数内でのコード例 // running画像にアクセスする場合 sym.getSymbol("blackcatSprite").stop("running"); // Javascriptで猫を左へ移動 sym.getSymbol("blackcatSprite").$("cat").animte({left: "-=50px"}); // OR: 事前定義したEdge Timelineで再生 sym.play("catRun"); // 猫はrunning画像にした上で、catRunというラベル位置から定義してあるアニメーションを再生する

左から1番目の画像のプロパティの設定とTimelineの位置を決定します。

背景イメージの位置は、(0,0)

猫画像のサイズで切り抜き

Timelineの位置を決め、ラベルsittingを追加します。

これによって、この画像は下記のコードでアクセスできるようになりました。

// sitting画像の位置で停止する sym.getSymbol("blackcatSprite").stop("sitting");

左から2番目の画像のプロパティの設定とTimelineの位置を決定します。

背景イメージの位置は、(-90, 0)

猫画像のサイズで切り抜き

Timelineの位置を決め、ラベルrunningを追加します。

これによって、この画像は下記のコードでアクセスできるようになりました。

// running画像の位置で停止する sym.getSymbol("blackcatSprite").stop("running");

左から3番目の画像のプロパティの設定とTimelineの位置を決定します。

背景イメージの位置は、(-205,0)

猫画像のサイズで切り抜き

Timelineの位置を決め、ラベルstandupを追加します。

これによって、この画像は下記のコードでアクセスできるようになりました。

// standup画像の位置で停止する sym.getSymbol("blackcatSprite").stop("standup");

左から4番目の画像のプロパティの設定とTimelineの位置を決定します。

背景イメージの位置は、(-300, 0)

猫画像のサイズで切り抜き

Timelineの位置を決め、ラベルstandingを追加します。

これによって、この画像は下記のコードでアクセスできるようになりました。

// standing画像の位置で停止する sym.getSymbol("blackcatSprite").stop("standing");

切り抜き画像の切り替え用コード例

サンプルでは、白い四角の中でTimelineのTriggerで4種類のSprite画像を2秒毎に切り替えを行っていますので、確認してみてください。

Symbol.bindTriggerAction(compId, symbolName, "Default Timeline", 0, function(sym, e) { sym.getVariable("switchPose")("sitting"); }); //Edge binding end Symbol.bindTriggerAction(compId, symbolName, "Default Timeline", 2000, function(sym, e) { sym.getVariable("switchPose")("running"); }); //Edge binding end Symbol.bindTriggerAction(compId, symbolName, "Default Timeline", 4000, function(sym, e) { sym.getVariable("switchPose")("standup"); }); //Edge binding end Symbol.bindTriggerAction(compId, symbolName, "Default Timeline", 6000, function(sym, e) { sym.getVariable("switchPose")("standing"); }); //Edge binding end Symbol.bindTimelineAction(compId, symbolName, "Default Timeline", "complete", function(sym, e) { sym.play(0); }); //Edge binding end Symbol.bindSymbolAction(compId, symbolName, "creationComplete", function(sym, e) { /** * Switch cat pose * @param {string} label A edge timeline label. */ function switchPose(label) { sym.getSymbol("blackcatSprite").stop(label); sym.$("Text").html(label); } sym.setVariable("switchPose", switchPose); }); //Edge binding end

Sprite画像のSymbolを使って移動アニメーションを作る

この画像を使って地面を走るアニメーションを作ってみます。先ほどは、各画像を表示するのに、Javascriptで切り替えてましたが、実はTimelineエディタで停止位置をスタティックに設定することも可能です。

Edge AnimateでTimelineのプレビューをする場合、Javascriptでアニメーションコードを記述してしまうと、Edge Animateの再生プレビュー機能では確認できず、ブラウザプレビューを使うしかなくなってしまうので、使い分けるとよいでしょう。

地面を走るアニメーションとしてSprite画像のSymbolと地面の図形をシンボル化します。

そして、このSymbolのTimelineをTimelineエディタで定義します。

下記で、左右の移動とSpriteの各画像きりかえを設定します。行きと戻りを表現するため伸縮(x)を100% -> -100% -> 100% で左右反転を設定しています。

なお、TimelineエディタでのSymbolの停止位置の設定方法は下記の通りです。

猫が地面を走るアニメーションを再生する

最後に猫が走るアニメーションをボタンクリックで再生するように設定します。これは単にボタンのclickイベントが発火したら、Edge APIで再生するだけです。

// Button click. var catRunAction = sym.getSymbol("catRunAction"); if (!catRunAction.isPlaying()) { catRunAction.play(0); }

終わりに

CSSを書かずに、CSSスプライト風な機能をEdge Animateで作ってみました。アイデア次第でいろいろなアニメーションを作成することが可能です。

Preview7では、可変レイアウトにも対応できるようになりましたし、今後が楽しみなツールです。

参考

サンプルコード

サンプルアプリ

#Adobe #EdgeAnimate #HTML5 #Javascript #CSS3

Adobe Edge AnimateのSymbolを使ってみる

Symbolで要素をまとめると、アニメーションを独立したTimelineで再生でき、複数インスタンス化して再利用することが可能になります。

前提環境

動作サンプル

Symbolを使っていろいろなカラーのボールを落とすサンプルを作成してみました。サンプルが表示されない場合はこちらからアクセスしてみてください。

赤・緑・青の三種類のボールがシンボルになっていて、ランダムに一つのボールをEdge APIで動的にインスタンス化してアニメーションを再生するようになっています。ボールのSymbolでは上から下へ移動するアニメーションを設定しているだけで、ボールを落とす図形が移動することによって、若干左右に揺れ動いています。

このアニメーションは下記のように動作します。

ボールを落とす図形は、左上から左右に移動するアニメーションを繰り返す。

図形アニメーションが動作している間、赤・緑・青のボール図形のいずれかのSymbolインスタンスを作成し、下に向かって落とす。

ボールが下に落ちたら、そのSymbolインスタンスが削除される。

ボールを落とす図形をクリックすると、図形アニメーションが停止し、ボールのSymbolインスタンス作成も停止する。

サンプルコードは下記のURLでチェックアウト可能です。Edge Animateをインストールしている場合は、symbolballs.edgeファイルがプロジェクトファイルとなっていますので、確認することができます。

SymbolBallsサンプルダウンロード(zip)

SymbolBallsサンプルダウンロード(tar.gz)

SymbolBallsサンプルコード(github)

ボールを落とす図形の繰り返しアニメーション

今回は、Triggerを使わず、一連の左右に移動するアニメーションが完了したあとに再度再生するため、Stageのcompleteイベントのアクション中でsym.play(0)を呼び出して再度再生しています。

// Stage timeline complete. sym.play(0);

要素のシンボル化

シンボル化したい要素を一つまたは複数選択して変換することで作成できます。

Symbol変換後、Symbolはdivコンテナとなっているので、その中に選択した要素が入り、そのSymbolのTimelineが一つ作成されます。下記は、Stage上にスタティックに配置しています。

動的にインスタンス化する場合は、エレメントパネル等で配置せず、Edge APIをJavascriptで呼び出すことでインスタンス化できます。

シンボルの作り方

シンボルの作り方は、シンボル化したい要素を選択して、ステージパネルかエレメントパネルの選択要素を右クリックして、シンボルに変換で作成することができます。変換したあとは、再利用が可能になっているのでStage上から削除しても問題ありません。改めて配置したい場合は、ライブラリパネルのシンボルからD&Dすればよいです。

各ボールのSymbolアニメーションについて

上から下へ落ちるアニメーションを設定しています。下まで行ったら透明になり、イージングも設定しています。

アニメーション後にシンボルを削除するので、再生完了後のアクションでEdge APIを使って自分自身を削除しています。

Symbol.bindSymbolAction(compId, symbolName, "creationComplete", function(sym, e) { sym.$("Ellipse").css({position: "absolute"}); }); //Edge binding end Symbol.bindTimelineAction(compId, symbolName, "Default Timeline", "complete", function(sym, e) { sym.deleteSymbol(); }); //Edge binding end

動的なSymbolインスタンスの作成について

SymbolはStageやSymbolにスタティックに配置することも可能です。ただ今回は、Edge APIを使って動的にSymbolインスタンスを生成して、アニメーションを再生するようにしました。

下記のコード例では、乱数でボールSymbolをランダムに選んでインスタンス化し、その場でアニメーション再生しています。

// creationComplete /** * Ball symbol names. * @type {Array.<string>} */ var balls = ["redBall", "blueBall", "greenBall"]; /** * Drop a ball at random. */ function drop() { var ballIndex = Math.floor(Math.random() * 9999) % balls.length, ball = sym.createChildSymbol(balls[ballIndex], "RoundRect"); ball.play(); }

Symboleの動的生成のコード例

compositionReady(読み込み後Edgeコンポジションの再生準備が整った状態)のところで、

ボールを落とす処理を行う関数を実行しています。ボールを落とす図形が左右に移動するアニメーションが動いているときは、ボールを落とし、図形が止まったときは、ボールを落とすのを中止しています。

Stage: TimelineのTriggerでボール作成

// Stage triggers function. sym.getVariable("updateDrop")();

Stageコード全体

Symbol.bindTimelineAction(compId, symbolName, "Default Timeline", "complete", function(sym, e) { sym.play(0); }); //Edge binding end Symbol.bindSymbolAction(compId, symbolName, "creationComplete", function(sym, e) { /** * Ball symbol names. * @type {Array.} */ var balls = ["redBall", "blueBall", "greenBall"]; /** * Drop a ball at random. */ function drop() { var ballIndex = Math.floor(Math.random() * 9999) % balls.length, ball = sym.createChildSymbol(balls[ballIndex], "RoundRect"); ball.play(); } function updateDrop() { if (sym.isPlaying()) { drop(); } } sym.setVariable("updateDrop", updateDrop); }); //Edge binding end Symbol.bindElementAction(compId, symbolName, "${_RoundRect}", "click", function(sym, e) { if (sym.isPlaying()) { sym.stop(); } else { sym.play(); } }); //Edge binding end Symbol.bindTriggerAction(compId, symbolName, "Default Timeline", 1000, function(sym, e) { sym.getVariable("updateDrop")(); }); //Edge binding end Symbol.bindTriggerAction(compId, symbolName, "Default Timeline", 3500, function(sym, e) { sym.getVariable("updateDrop")(); }); //Edge binding end

Edge AnimateのEventアクション

creationComplete Stageが作成され初期化が完了した後に発火されます。このサンプルではアニメーション再生に必要な関数を定義しています。シンボル変数に関数を設定していますが、変数の値は何でもOKなので問題ありません。主に別のEventやTriggerで関数を実行したい場合に使います。

// creationComplete function updateDrop() { // sym.getLabelPosition("moveEnd") OR sym.getDuration() var timeout = Math.random() * sym.getLabelPosition("moveEnd") / 4; if (sym.isPlaying()) { drop(); } setTimeout(updateDrop, timeout); } sym.setVariable("updateDrop", updateDrop);

compositionReady Edgeコンポジションの再生準備が整ったときに発火されます。このサンプルでは、DOMReadyのような使い方で、creationCompleteで事前定義された関数を使って、ボールを落とすアニメーションを再生開始しています。

// document.compositionReady // シンボル変数から関数を取得して実行 sym.getVariable("updateDrop")();

Symbolインスタンス作成と削除 API

Symbolインスタンス生成と削除に関するAPIは、下記のものがあります。

sym.createChildSymbol(symbolName, parentElementName, index) Symbolインスタンスを作成し、指定した親要素に追加します。symbolNameには、定義したSymbol(ライブラリパネルのシンボル)の名前を指定します。parentElementNameには、親となるDOM要素を指定します。SymbolコンテナもDOM要素なのでシンボルの中に指定することも可能です。

sym.deleteSymbol(options) Symbolインスタンスを削除します。サンプルでは、ボールアニメーションの再生が完了した時に自分自身を削除する時に使用しています。

// redBall, greenBall OR blueBall Timeline complete. sym.deleteSymbol();

Symbol Animation API

sym.play(position, executeTriggers) Timelineを再生します。引数のpositionなしの場合、Playheadの位置から再生します。PlayheadがTimelineの最後にある場合は、はじめから再生を開始します。positionはラベルも指定できます。これによって、繰り返しアニメーションを再生したり、任意の位置に飛んで特定のアニメーションを再生したりすることが可能です。 executeTriggersは、再生開始位置にあるTriggerを実行するかしないかを設定できるようです。

sym.stop(position) Timelineを停止します。引数のpositionなしの場合、Playheadの位置で停止します。playの場合と同じく、positionはラベルも指定できます。

sym.isPlaying() Timelineが、再生中かどうかを確認することが可能です。サンプルでは、Stageのボールを落とす要素アニメーションの再生状態によって、ボールを落とすアニメーションを実行するのに使いました。

sym.getPosition() Timeline上のPlayheadの位置がどこにあるかを確認する場合に使います。

sym.getDuration() Timelineの長さ(時間)を取得します。

sym.getLabelPosition(aLabel) Timeline上に設定したラベルの位置を取得します。ラベル位置の時間が取得できるので、時間計算などにも使用できます。

まとめ

Symbolを使うことで、アニメーションを再利用することが可能です。今回のように多数ボールを生成するような場合に使えると思います。また、Edge APIを使用することでアニメーションの再生/停止の制御も行えます。次回は、Sprite画像とSymbolを使ったアニメーションを作成する方法をご紹介します。

参考

Edge API

サンプルコード

サンプルURL

#Adobe #EdgeAnimate #HTML5 #Javascript #CSS3

Adobe Edge Animateを使って簡単なアニメーションを作ってみる

前回概念編ということで、簡単に機能のご紹介をしました。

前提環境

動作サンプル

今回は、Edge Animateを使って、四角形を四隅に動かすアニメーションサンプルを作ってみました。サンプルが表示されない場合は、こちらから確認してみてください。

表示されない

このアニメーションは下記のように動作します。

1. 再生ボタンをクリック

2. 真ん中から登場

3. 左上に回転しながら移動

4. 右上に四角形幅を1.5倍しながら移動[Easing: EaseOut_Exponental]

5. 右下に移動[Easing: Swing]

6. 左下に四角形幅を1倍に戻しながら移動[Easing: EaseIn_Exponental]

7. 左上に移動[Easing: Linear]

8. 番号に回転しながら近づき、カウントアップ

9. 左上に回転しながら戻る

10. 4.に戻る

サンプルコードは下記のURLでチェックアウト可能です。Edge Animateをインストールしている場合は、startEdge.edgeファイルがプロジェクトファイルとなっていますので、確認することができます。

このサンプルは下記のリンクからダウンロード可能です。

startEdgeサンプルダウンロード(zip)

startEdgeサンプルダウンロード(tar.gz)

startEdgeサンプルコード(github)

背景画像を置く

最初に背景画像を追加します。

背景画像追加

画像追加ボタンをクリック

ファイル追加ダイアログで画像選択

ライブラリパネルのアセットに画像が追加される

D&Dしてステージに追加

背景画像は、Edge Animateに取り込んで、画像をD&DでStageに配置します。

まず、ライブラリパネルのアセット横の画像追加ボタン"+"をクリックすると、ファイル選択画面が現れますので、そこで画像ファイルを選択(複数選択可)すると取り込むことができます。

次に、取り込まれた画像をアセットからStageパネル(画面中央のパネル)へD&Dで配置します。Dragしている最中にガイドが表示されますので、(0,0)の位置にあわせるとちょうどStageの左端にあわせることが可能です。

画像プロパティ

画像の位置やサイズを微調整するには、プロパティパネルを使います。

Preview Version 7から、Local(親DIVからの相対)で位置とサイズを調整できるようになりましたので、それを使って調整します。

レイアウトプリセットで「背景画像を伸縮」にすると、画像と画像コンテナ(div)のサイズを%指定にできます。Stageのサイズと同じにする場合、100%と設定するとよいです。

Timelineの再生について

Edge AnimateのTimelineはSymbol毎に定義されています。また、Timelineは自動再生するかしないかを選択できます。

自動再生を有効にした場合ですが、

Stage(ルートSymbol)の場合は起動時に再生が始まります。

それ以外のSymbolのTimelineの再生は、親SymbolのPlayheadが、子Symbolの再生位置を通過したところから、再生が開始されます。

SymbolのTimelineは親Symbolとは独立して定義できるので、自動再生はOFFにして作成することが多いでしょう。

逆に、自動再生を無効にした場合は、自分で再生のタイミングを決めることが可能です。

下記の2通りの方法で再生タイミングを設定できます。これに関しては次回方法をご紹介します。

親SymbolのTimeline上に再生の設定をする。

JavascriptのTriggerやEventsの関数で、Edge APIを使って再生します。

ちなみに、自動再生のON/OFFは各Symbolのプロパティパネルで変更可能です。

図形を配置する

図形や文字をStageに配置するには、ツールバーの所から選択して使います。好きな形の図形を選んでStage上で描画すると作成できます。下記のように兄弟要素の重なりは上にいくほど前面に配置されます。

また、注意点としては、Timelineエディタの自動キーフレームモードを有効になっていると、Timeline上に編集したプロパティが記録されてしまうので、ツールや画像をスタティックに配置する場合は無効にしておいた方がいいです。

Web fontを使って文字の見た目を変える

Edge Animateでは、Web fontが使えます。

ライブラリパネルのフォント横の"+"ボタンで追加します。追加後、Web fontを適用したいテキスト要素のプロパティパネルで追加したWeb fontを使うことができます。

Timelineの記録モードについて

自動キーフレームモード

Stage上のグラフィカルな操作やプロパティパネルでの編集をTimelineに記録します。

Stage上に単に配置するだけの場合は、Timelineに記録されないようにOFFにすることをおすすめします。

Timeline上に記録されている菱形がキーフレームです。

自動トランジションモード

先ほどの自動キーフレームモードに加えて、自動トランジションモードを有効にすると、キーフレーム間の段階的な遷移を作成できます。黄色のPlayheadを少しずつずらしていって順にキーフレームを記録していくと記録されたプロパティの値に応じて、自動的に段階的な遷移が追加されます。

Timelineに記録する必要があるので、自動キーフレームモードをONにする必要あり

Playheadをずらしていって、キーフレーム間の変化量を段階的なトランジションとして記録する

キーフレームを点として、その点と点を結んだ変化量を記録する

Pinによる記録

Pinによるトランジションの記録は、主に移動元と移動先の2点にキーフレームを同時に作成する場合に使います。

自動キーフレームモードと自動トランジションモードを使用するため、両方ともONにします。

自動トランジションモードとの違いは、Pinの場合は2点のキーフレームを同時に記録できます。

対して自動キーフレームモードのみの場合は、1点ずつ記録するので2点以上の段階的な変化を記録するときに使用します。

トランジション(遷移)の2点間の移動用キーフレームを記録するのは、Pinを使ってD&Dで記録するのが簡単

Pinによる記録や2点間の移動遷移が簡単に記録できるのですが、2通りありややこしいので少し説明します。基本的には、Pinのある位置が現在位置になります。Playheadのある位置は、D&Dで移動した要素の位置が記録されます。

1. PlayheadがTimelineの移動元でPinが移動先にある場合

Stage上の要素のD&Dで移動すると、その位置が移動元のキーフレームとして記録されます。また、移動先のキーフレームは最初に配置していた場所が記録されます。そして、それら2点の段階的な遷移が記録されます。

2. PinがTimelineの移動元でPlayheadが移動先にある場合

Stage上の要素をD&Dで移動すると、その位置が移動先キーフレームとして記録されます。また、移動元キーフレームは、最初に配置していた場所が記録されます。そして、それら2点の段階的な遷移が記録されます。

繰り返しアニメーションする

繰り返しアニメーションを作成するには、JavascriptでEdge APIの play(position, executeTriggers) を使います。このときTimeline上にラベルを設定しておくと、再生開始位置をラベルで指定することが可能です。

// Timelineの最後のTrigger // function(sym, e) sym.play("loop"); // ラベル: loopの位置から再生

シンボル変数を使う

このサンプルでは、図形のアニメーション回数をカウントアップしていますが、回数をどこかに保存しておかなければなりません。グローバル変数を使ってもよいとは思いますが、Edge Animateには、シンボル変数という値を保存する仕組みが用意されています。

これを使うとSymbolに値を保存しておくことが可能です。

// document.compositionReady(Edgeコンポジションが読み込まれた直後)でアニメーションカウントの変数を用意する // fucntion(sym, e) sym.setVariable("count", 0);

// 四隅のアニメーションが終わったタイミングのTriggerでカウントアップし、画面のカウンタも更新 // function(sym, e) var count = sym.getVariable("count"); count++; sym.$("Count").html(count); // jQuery風にDOM要素にアクセス可能 sym.setVariable("count", count);

ボタンクリックでアニメーション再生を開始する

このサンプルでは、再生ボタンをクリックするとアニメーションが開始されるようになっています。これはDOM要素にClickイベントをバインドすることによって実現しています。symオブジェクトは、Stageを指しています。

// play.click // function(sym, e) sym.play(); // アニメーション再生を開始

まとめ

Adobe Edge Animateを使えば、凝ったアニメーションを簡単に作成することが可能です。 TriggersやEventsを駆使することで、アニメーションの制御も可能です。次回は、Symbolを使ったアニメーションと動的にアニメーションを追加する方法をご紹介します。

参考

サンプルURL

サンプルコード

#Adobe #EdgeAnimate #HTML5 #Javascript #CSS3

HTML5アニメーションツール「Adobe Edge Animate」のご紹介

Adobe Edge Animateは、HTML5/CSS3/Javascriptを使用したアニメーションコンテンツを直感的に作成することのできるAdobeがリリースしたツールです。CSSを書かなくても、Edgeでプレビューしながらアニメーションを作成できます。

また、プロパティパネルでマウスオーバーすると、どのようなCSSプロパティを使うか確認できるので、CSSアニメーションの勉強にもなります。

ここでは、Edge Animateの構成要素とフォルダ構造に関してご紹介します。

前提環境

Edge Animate構成要素

Edge Animateで作成したアニメーションは下記のCompositionを構成要素の一つの単位として作成されます。Compositionの中にStageをルート要素として、Edgeアニメーションの構成要素を配置していきます。

Edge Animateランタイムは、Symbolというコンセプトでまとめられていて、Symbolはイベント発生時のアクション定義や独立したアニメーションのTimeline、Symbol内の構成要素として振る舞う子要素のセットをグループ化したものです。StageもまたSymbolでCompositionのルートSymbolとなっています。

Composition

Stage

Symbol

Timeline

Actions(Triggers, Events)

Edge Animate構成要素

Stage(ルート)

Symbol

Edge Animate画面構成

エレメントパネル

Edge AnimateのコンポジションのSymbolコンテナ内部の要素の一覧表示や編集などで使用します。要素は入れ替えたり、入れ子にしたりすることができます。画面中央の描画領域とあわせて使うことになると思います。

静的HTMLとしてpublishすると、下記のようなHTMLが出力されます。

publishされたHTML

<body style="margin:0;padding:0;"> <div id="Stage" class="EDGE-6121832 edgeLoad-EDGE-6121832">  <div id="Stage_bg" class="edgeLoad-EDGE-6121832"></div>  <div id="Stage_Count" style="display:none;">0</div>  <div id="Stage_Caption" style="display:none;">Animation Count</div>  <div id="Stage_RoundRect" class="edgeLoad-EDGE-6121832"></div> <div id="Stage_play" class="edgeLoad-EDGE-6121832"></div> </div> </body>

描画領域

StageやSymbolなどに配置する要素やアニメーションのトランジションなどをツールや画像、Symbolを使って、グラフィカルに編集する時に使います。アニメーション再生プレビューなどの確認にも使います。

ツールバー

図形/文字描画、要素の選択/切り抜き/変形などのツールがあります。

プロパティパネル

選択した要素のCSSプロパティを定義します。設定できるプロパティは、画像や図形、文字などの要素別に異なります。アニメーションの自動キーフレームモード時の記録にも使われます。

ライブラリパネル

Edge Animateコンポジションで使用する画像やシンボルを管理するパネルです。画像とシンボルは描画領域にD&Dすることで追加できます。フォントの場合は、テキストツールのプルダウンメニューで選択することで使うことができます。

アセットインポートされた画像ファイル一覧を表示します。

シンボルユーザが定義したシンボル一覧を表示します。

フォントユーザが定義したWebフォント定義などを表示します。

Timeline

アニメーションのTimelineを定義するのに使います。要素毎に再生タイミングやプロパティなどを定義します。

Composition

Edge Animateで作成したアニメーションをコンポジションといいます。作成したコンポジションにはIDが割り当てられ、ルートSymbolのStageにマッピングされています。また、作成されたHTMLのStage要素のクラス属性としても使われています。

Edge Animateで自動生成されたHTML

<head> [...]  <script type="text/javascript" charset="utf-8" src="gamescreen_edgePreload.js"></script> <style> .edgeLoad-EDGE-42247708 { display:none; } </style>  [...] <head> <body style="margin:0;padding:0;"> <div id="Stage" class="EDGE-42247708"> </div> </body>

これによって、一つのページで複数のコンポジションを使うことが可能になるので、別々に開発し動作させることが可能です。[Bootstrapping Edge Compositions]

Symbol

Dom要素、TimelineなどをまとめたEdge Animateランタイムのコアとなる構成要素です。

Symbolを使うことにより、アニメーションを実行する要素とTimelineをグループ化し、Symbolごとにアニメーションを独立して定義し、再利用することが可能となります。

Timeline

Edge Animateを使う上で欠かせないのが、Timelineを編集をグラフィカルに行えるTimelineエディタ機能です。アニメーションのTimelineをコードを書かずに動きを確認しながら構築することが可能です。

TimelineはSymbol毎に持つ

Labelを設定して、JavascriptからTimelineの任意の位置にアクセスすることが可能

Playheadは、Timeline上の現在位置をさす

Triggers

Triggersは、Timeline上の任意の位置(時間)でJavascriptを実行できる機能です。Edge Animateのコードパネルでは、@xxx秒の切り替えと表現されます。

繰り返しアニメーションを実装する場合は、Timelineの最後にTriggerを定義して、0秒後から再生をEdge APIを使って呼び出してやります。(※他にTimeline Eventsのcompleteを使用する方法もあります。Triggerを使った場合は、Playheadを0秒に移動してしまい、completeが呼び出されないのでお好みで使い分けるとよいと思います。)

function(sym, e) { // Trigger callback.(繰り返しアニメーションの例) sym.play(0); }

Events

Eventsは通常のclickなどのDOMイベントやTimelineイベントなどがあります。

Page-level

スクロールやキープレスイベントなどがあります。resizeやorientationChangeなどはprevew version7から追加されました。

scroll

keydown

keyup

resize(New!!)

orientationChange(New!!)

Composition-level

compositionReadyとonErrorがあります。onErrorはPreview version 7で追加されました。

compositionReady Edge アニメーションの再生準備が整った状態で、いわゆるDOM Readyと同じようなものです。

onError(New!!) Javascriptのエラーハンドラなのですが、渡ってくるイベントオブジェクトのe.compId(CompositionID)とe.originalEventsを確認することによって、どこのCompositionでエラーが発生したかわかるようになっています。

Timeline

Edge AnimateのTimelineで発生するイベントです。下記のようなイベントがあります。

update アニメーション再生中何度も呼び出されます。

play 再生を開始した時に呼び出されます。Edge APIを使った場合は、sym.play(position, executeTriggers)を呼んだときです。アニメーションを停止して、再開した場合も呼び出されますので、初回再生の時だけJavascriptを呼び出したい場合は、Triggersの@0秒後の呼び出しを使います。

complete Timelineの最後までアニメーションが再生されて完了したときに呼ばれます。ただし、Timelineの最後にTriggerが定義されている場合は、そちらが先に呼ばれます。

stop Timelineを停止した場合に呼ばれます。Edge APIを使った場合は、sym.stop(position)を呼んだときです。

Symbol

Symbolで発生するイベントです。下記のようなイベントがあります。

それぞれ、シンボルを作成されたときと削除された時に発生します。

creationComplete

beforeDeletion

Element DOMその他

その他としては、通常のDOM要素に対するclickなどのDOMイベント、touchstartなどのTouchイベントなどがあります。また、下記のjQueryEventsもPreview version 7から追加されました。

mouseenter

mouseleave

focus

Edge Animateフォルダ構成

Edge Animateのフォルダ構成は、下記のような構成になっています。

Edge共通ライブラリ(edge_includes/)

edge.x.x.x.min.js Edge Animateランタイムで、jQueryプラグインのような形で定義されています。

jquery.x.x.x.min.js

jquery.easing.x.x.js jquery.animate拡張で、イージングがたくさん用意されています。

json2_min.js

各コンポジションで用意されているファイル

xxx.edge プロジェクト本体

xxx.html Edgeアニメーションが動作するHTML

xxx_edge.js Edge Animateで定義したSymbolやWeb-fontなどのプロパティ定義(JSON形式)。

xxx_edgeActions.js TriggerやEventsのアクション関数を定義するファイル。Edge Animateのコードパネルで編集する。

xxx_edgePreload.js Require.jsのようなもので他の必要ファイルを読み込むためのもの

終わりに

下記は、Edge Animateを使って作成したゲームアプリです。サンプルが表示されない場合は、こちらにアクセスして確認してみてください。

Catbattle

このゲームのアニメーション動作はすべてEdge Animateでグラフィカルに定義しています。

TriggersとEventsのアクションでEdge APIを駆使することで、若干複雑なアニメーションも難なく動かすことができます。

また、Symbolを作成し、Symbol毎に独立したTimelineでアニメーションを定義することで、全体として様々な組み合わせのアニメーションを行わせることが可能になります。

ソースコードは下記からダウンロードできます。

download(zip形式)

download(tar.gz)

サンプルソース(github)

次回以降は、簡単なサンプルを使ってEdge Animateの機能をご紹介していきたいと思います。

参考

Adobe Edge Animate Showcase

Adobe Edge Runtime API - Version 0.1.7

Edge Animateの最近のブログ記事

#Adobe #EdgeAnimate #HTML5 #Javascript #CSS3

Trending Blogs

Recently Viewed Blogs

あゆたジャーナル