Animate CC html5 書き出したものをワードプレスに貼り付けてみた!

Animate CC html5 書き出しで簡単なゲームを作ってみた!
まったく再生されなくて泣けるから見てほしい…!
友達にシェアしてみてください…

Animate CC html5 書き出しで簡単なゲームを作ってみた!

練習も兼ねて作ってみました!


脳内でたまに遊ぶオリジナルのUSAゲームをHTML5でゲームにしてみました。

ボタンを押して文字をランダムに変えてるだけの簡単なものです…!

ゲームとしてはかなりレベルが低いものですが…

Animate CCのHTML5書き出しの練習も兼ねて作ってみました!

スネゲゾンビ
本当にレベル低いな…
スネゲゾビコ
それは自分が一番分かってるから…

動画でも解説してます

自分で遊んでみました

HTML5 canvasで新規作成をする

  1. WEBを押す
  2. サイズを選ぶ
  3. 作成ボタンを押す

まずはHTML5用のキャンバスを作成します。

テキストとボタンを作る

  1. テキストを配置する
    ⇒プロパティからダイナミックテキストにする
    ⇒インスタンス名を入力する
  2. 四角い絵を配置する
    ⇒ムービークリップシンボル、またはボタンシンボルに変換する
    ⇒インスタンス名を入力する

変更するテキストを用意する

テキストはプロパティからダイナミックテキストに変更するだけでOKです。

ダイナミックテキストにする理由は、ソースコードの命令から文字を変換できるようにするためです。

ダイナミックテキストに変換すると、インスタンス名の入力欄が表示されます。

後でソースコードから指名する時用の名前を入力しましょう!

テキストを変更するためのボタンを用意する

ボタンは四角い絵を描いて[右クリック>シンボルに変換]か[F8キー]でシンボルに変換しましょう。

↓シンボルについての詳細はコチラの記事をお読みください!

シンボルに変換すると、インスタンス名の入力欄が表示されます。

こちらも後でソースコードから指名する時用の名前を入力しましょう!

スネゲゾンビ
名前決める理由ってなんだ?
スネゲゾビコ
名前なきゃ命令できないからね

ソースコードを簡単に追加する方法

四角い絵をクリックしてから[ウィンドウ>コードスニペット]を表示しましょう。

次に、HTML5 Canvasにある「マウスクリックイベント」をダブルクリックしてコードを追加しましょう。

ダブルクリックするとアクションウィンドウが表示され、コードが追加されています。

スネゲゾンビ

これでクリックした時の命令を追加できたのか

コードが追加されたシンボルがあるフレームはαマークが付きます。

ちなみにHTML5 CanvasなのにActionScriptにあるコードを追加すると、動かした際にエラーが起こりますので注意です!

お粗末すぎるソースコードを一応公開【動けばいいや】

とりあえず期待している動作をすることを目的としているので、ソースコードは適当に書きました。

先ほどのインスタンス名は、最後の行で呼び出してます。

スネゲゾンビ
お、名前ここで使うのか…!
スネゲゾビコ
そゆこと

動きを確認する&HTML5書き出し

スネゲゾンビ [Ctrl + Enter]でブラウザが開き、動きを確認することができます。

HTML5書き出しは「ファイル>パブリッシュ」からできます。

html、js、imagesフォルダが出力されています。

これをサーバーにおいて、HTMLで呼び出すだけでOKです。

ちなみに、出力する内容は細かい設定ができます。

私の場合今回は上記のように設定してみました。

HTML5で書き出したファイルをWEBサイトで呼び出す

スネゲゾンビ

サーバーに画像のようにフォルダを作りました。

HTML5で書き出したファイルを、アップロードしましょう。

HTMLではiframeタグを使って呼び出します。

今回はこんな感じで呼び出しました。

スネゲゾビコ
サーバーにアップロードしてHTMLタグで呼び出すだけだよ
スネゲゾンビ
なるほど(分かってない

スマホで暗くなる問題の解決

スネゲゾンビ

スマホからタップした際に画面が暗くならないようにするコードはコチラを使いました。

種まきのタネ.blogさんありがとうございます。

参考にしたサイト:種まきのタネ.blog

まとめ

スネゲゾンビ

みんなもオリジナルゲームを作ってみて!

HTML5書き出しの練習ということで、1作品目はショボイ感じになりました…

とりあえず、HTML5で動いたので感動!

みんなもオリジナルゲーム作ってみてくださいね!

スネゲゾンビ
本当にショボイ…
スネゲゾビコ
それ以上言わないで!

>>Adobe Animate CCの公式サイト

Adobe学習サービスまとめ



YOUTUBEでアニメを公開中です!


YOUTUBE「メイドインハシモ」を見に行く

コメントを残す

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