paiza開発日誌

IT/Webエンジニア向け総合求人・学習サービス「paiza」(https://paiza.jp ギノ株式会社)の開発者が開発の事、プログラミングネタ、ITエンジニアの転職などについて書いています。

JavaScript初心者に最適!パラパラ漫画アニメーションをプログラムで制御できる「Wick Editor」を使ってみた!

f:id:paiza:20170419113253j:plain
どうも、まさとらん(@0310lan)です。

今回は、誰でも気軽にブラウザ上で「パラパラ漫画」のようなアニメーションを作成できるWebエディタのご紹介です!

このエディタが面白いのは、JavaScriptで動きを制御できるところで、活用次第ではインタラクティブなWebコンテンツやゲームなども制作することが出来ますよ!

Wick Editor

f:id:paiza:20170419113607j:plain

■基本的な使い方!

それでは、実際に「Wick Editor」を使いながら、どのようなサービスなのかを見ていきましょう!


まずは、サイトにアクセスして「Launch Editor」ボタンをクリックします。
f:id:paiza:20170419113637j:plain


すると、すぐに専用のエディタが起動します!
f:id:paiza:20170419113814j:plain
面倒な「ユーザー登録」などは一切不要です。

このページをブックマークしておけば、いつでも即座に作業を始められるのでオススメです。


最初に、このエディタの使い方を簡単にご紹介しておきます!

画面上部にあるのが、アニメーションの「シーン」を構成する「タイムライン」と「レイヤー」になります。
f:id:paiza:20170419113827j:plain
それぞれ、横軸が「タイムライン」で縦軸が「レイヤー」になっており、「+」アイコンをクリックすることでどんどん追加していくことが可能です。


画面左にあるのが「ツールバー」で、一般的なお絵描きソフトではお馴染みの機能ですね。
f:id:paiza:20170419113842j:plain
テキストやシェイプ画像、フリーハンドでのお絵描きも可能です。


さらに、各「シーン」や「オブジェクト」には、それぞれJavaScriptによるコードを追加することが可能です!
f:id:paiza:20170419113855j:plain
コードエディタが搭載されており、この画面上でほぼすべての作業が行えるのは非常に便利です。

■簡単なアニメーションを作ろう!

それでは早速ですが、簡単なサンプルとして「シェイプ画像」を使った簡易的なアニメーションを作ってみましょう!


まずは、「円」のシェイプ画像だけを使って、次のような「顔」を作ります。
f:id:paiza:20170419113934j:plain


「Ctrl + A」かマウスのドラッグで、全部のパーツを選択します。
f:id:paiza:20170419113946j:plain
選択できたら、「Ctrl + C」でコピーしておきましょう。


次に、タイムラインの「+」アイコンをクリックして、新しい「シーン」を追加します。
f:id:paiza:20170419114023j:plain
シーンを追加したら、「Ctrl + V」で先ほどコピーしたパーツを貼り付けます。


同じ作業を繰り返して、6枚の「シーン」を追加しましょう!
f:id:paiza:20170419114039j:plain


それぞれの「シーン」で、目を少し移動させたり、口の形状を変えたりしておきます。
f:id:paiza:20170419114102j:plain
パラパラ漫画のように、前後のシーンが繋がるように変化を付けるとスムーズになりますよ。


変化を付け終わったら、画面上部にある「Run」ボタンをクリック!
f:id:paiza:20170419114120j:plain


すると、こんな感じにアニメーションします!
f:id:paiza:20170419114135g:plain
適当にシェイプ画像をいじっただけですが、立派に動いてくれますね。


ちなみに、「Wick Editor」は「GIF」ファイルはもちろんのこと、Webコンテンツ用として「HTML」ファイルへの書き出しにも対応しているので便利です!
f:id:paiza:20170419114207j:plain

インタラクティブなWebコンテンツを作ろう!

Wick Editor」の基本的な使い方を把握したところで、今度はJavaScriptも使ったインタラクティブなアニメーションに挑戦してみましょう!


簡単に作れるサンプルとして、「おみくじ」コンテンツを作ってみます。

ボタンをクリックすると、「おみくじ」がアニメーションして結果をランダムに表示するというものです。


こんな感じ!
f:id:paiza:20170419114228g:plain
簡単な作りですが、「Wick Editor」を使ったJavaScriptプログラミングとしては、良い勉強になるサンプルとなっています!


それでは「新規プロジェクト」を作り、最初に「シェイプ画像」と「テキスト」を組み合わせて「スタートボタン」を作ってみましょう!
f:id:paiza:20170419114329j:plain


そして、タイムラインの2フレーム目以降に「おみくじ箱」を作り、上下に動かすアニメーションを作ります。
f:id:paiza:20170419114340j:plain
コツとしては、PCのキーボードにある「矢印キー」を使って、少しずつ上下に移動させると良いでしょう。


次に、「おみくじ箱」の下から「棒」を出す「①アニメーション」を作ります!
f:id:paiza:20170419114350j:plain
この時に、シェイプ画像が重なり合うと思いますが、この「重なり順序」は右クリックで表示されるメニューから指定することができます!


そして、「おみくじ」の結果画面も作成しておきましょう!
f:id:paiza:20170419114400j:plain
今回は、「大吉」「中吉」「小吉」の3つにしていますが、お好みで追加・編集してみてください!


これでアニメーションの部分は完成なので、あとはJavaScriptによるプログラムを書いていきましょう!

まず、1フレーム目に戻り、「スタートボタン」を右クリックして「Convert to Button」を選択します。
f:id:paiza:20170419114411j:plain
これにより、ボタンとしての機能を組み込めるようになります。


画面右の「スクリプトボタン」をクリックします!
f:id:paiza:20170419114445j:plain


すると、コードエディタが表示されるので、ここにボタンをクリックした時の処理を書いていきます!
f:id:paiza:20170419114456j:plain


処理の内容としては、ボタンをクリックしたら「おみくじ」のアニメーションを再生すれば良いので、2フレーム目に画面遷移すればOKです!

//ボタンをクリックした時の処理
function mousedown() {


    // 2フレーム目に移動して再生
    gotoAndPlay(2);


}

フレームを移動するために「gotoAndPlay()」メソッドが使えるようになっています。

また、このままだとボタンをクリックしなくても、自動的にフレームを移動してアニメーションしてしまうので、1フレーム目で停止させておく必要があります。


そこで、1フレーム目をクリックすると、このフレームだけに適用されるJavaScriptコードを書くことができます。
f:id:paiza:20170419114524j:plain


この状態で、次のようなコードを書いておけば良いでしょう!

//フレーム全体に共通の変数を定義する
parent.count = 0;


//このフレームを停止する
stop();

「stop()」メソッドを使うことで、この1フレーム目は停止するため、ボタンをクリックしない限りアニメーションが再生されることはないというわけです。

また、変数定義に「parent」を付与すると、このフレームだけでなく、すべてのフレームで共通して利用できる変数が作れます。
(ここで作成した「parent.count」については後述します…)


次に、「おみくじ箱」を上下に振るアニメーションの最後のシーン(6番目)をクリックします!
f:id:paiza:20170419114606j:plain
この上下に振るアニメーションを3回繰り返したいので、「IF文」を使ってループさせています。


コードは次のとおり!

//parent.countの数値を比較する
if(count > 3) {


    //3回繰り返したら7フレーム目から再生する
    gotoAndPlay( 7 );


}
else {


    //3回未満なら、カウントアップして2フレーム目から再生する
    count += 1;
    gotoAndPlay( 2 );


}

ここでは、1フレーム目に定義した「parent.count」の数値を比較させており、3回アニメーションを繰り返すまで「count」の数値をカウントアップさせて条件分岐させています。


「おみくじ箱」から棒が出て来る最終フレームは、ランダムに結果を表示するプログラムを作ります!
f:id:paiza:20170419114639j:plain


乱数の生成には「random.integer()」というメソッドが提供されているので、こちらを使って「大吉・中吉・小吉」それぞれのフレームに振り分けていきます!

// 1〜3の乱数を生成
var rnd = random.integer( 1, 3 );


if( rnd == 1 ) gotoAndStop( 12 ); // 大吉
if( rnd == 2 ) gotoAndStop( 13 ); // 中吉
if( rnd == 3 ) gotoAndStop( 14 ); // 小吉

生成した乱数を変数「rnd」に代入し、それを「IF文」で振り分けるという流れです。

ポイントは、「gotoAndPlay()」で画面遷移するのではなく、「gotoAndStop()」メソッドを使う点です。これは、目的のフレームに移動した後に再生を停止するという機能があるためですね。


結果が表示されたフレームで、もう一度「おみくじ」を実行するために、最初に定義していた変数「count」を初期化しておきましょう!
f:id:paiza:20170419114706j:plain


これは、単純に「count」へ0を代入するだけで良いでしょう。

count = 0;


また、「もう1回!」ボタンをクリックしたら、再度「おみくじ」が実行できるように次のコードを「ボタン」にプログラムしておきます!

// ボタンがクリックされた時の処理
function mousedown() {


    // 2フレーム目に移動して再生する
    gotoAndPlay(2);


}

これで、「もう1回!」ボタンをクリックすれば、「おみくじ箱」を振るアニメーションからスタートするというわけですね!


これで、今回の「おみくじ」コンテンツは完成です!
f:id:paiza:20170419114749g:plain

今回のサンプルをHTMLファイルに書き出して、GitHubにアップロードしているので、ぜひダウンロードして試してみてください!

「おみくじ」コンテンツのファイル|GitHub


また、プログラミングに興味のある方は、「Wick Editor」で利用できるメソッドをまとめたリファレンスガイドもあるので、参考にしてみてください!

リファレンスガイド|Wick Editor

■まとめ

Wick Editor」は、まだ「Alpha版」のため現在も活発にバージョンアップが繰り返されています。

エディタのUIなども今後もっと改良されていくと思いますが、今回の記事で解説した本質的な部分は変わらないと思いますので、ぜひオリジナルのアニメーションをJavaScriptでコントロールしてみてください!

Webサイトなどで使うGIFアイコンを自作しても良いし、Webゲームや教育用のコンテンツとしても大活躍するでしょう!

JavaScript講座も好評公開中「paizaラーニング


paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数用意しております。

もちろん今回の記事で使用したJavaScriptなど、言語ごとに基礎を学べる入門講座も好評公開中です!

↓詳しくはこちら
paiza.jp

そして、paizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。
paiza.jp
スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。

ITプログラマ・エンジニア向け転職・就活・学習サービスのpaiza