CreateJS実践講座

読込んだ画像の位置を整える

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
読込んだ画像の大きさを調べて、ステージに置く位置を調整します。
講師:
07:56

字幕

このレッスンではPreloadJSで 読み込み終えた画像の位置を調整します この画像はPreloadJSで読み込んで 読み込み終わった後 その画像のサイズから どこが中心になるかを決めて ちょうどStageの真ん中に 画像が来るようにしています Dreamweaverで開いたこのHTMLドキュメントは まだ画像の位置調整はしていません 読み込み待ちを addEventListener fileload eventで リスナー関数を加えて そのリスナー関数はStageの描画の更新 updateメソッドの呼び出しだけ行っていますので 描画はされるんですけど 位置は変えていません では今どういう状態か確認しましょう ファイルメニューから ブラウザでプレビューします デフォルト位置ということになるんですけど この画像の左上角がステージの 左上角に合うように配置されています これをちゃんと真ん中に 持ってきたいと思います Bitmap objectの位置 XY座標はプロパティXYで変えられますから 簡単な処理なんですけど あとあと使いまわしがしやすいように 関数として定めたいと思います FunctionでsetAppearance そして引数をとります 位置を変えてほしい instance objectですね そして設定するX座標Y座標ということで 何をやるかというのは非常に簡単ですね InstanceのXYのプロパティ まずXから行きましょう Xのプロパティを引数で受け取った Xにすればいい Yも同様ですね YもInstanceのコピーをして Y座標をYにすればいい ついでですからaddChild stageに加えるという処理も こちらに加えてしまいましょう そしてこの関数を呼び出せばいい ということですね ちょっと長い名前なので 安心のためコピーをしましょう そしてInstanceはBitmapです Bitmapをステージの中心に持ってきたいですね 中心というのはキャンバスから調べられます キャンバスのwidth heightが 幅 高さになりますから それをそれぞれ半分ずつにすればいいですね コピーを持ってきます そしてwidthを半分にすると幅の真ん中 水平方向の真ん中ですね 同様にキャンバスのコピーを持ってきて heightを半分にすれば 垂直方向の真ん中ということになります これでBitmap objectが ステージの中心に配置されるはずです ファイルを保存して確認してみましょう ブラウザでプレビューします 真ん中にきました 真ん中になってないと思うかもしれませんが Bitmap objectの原点というのは 左上角なんですね ですからBitmao objectの左上角が ステージの真ん中に来てますから 確かに言われた通りにはやっています ただ作った私たちが思った通りではないですね これを調整しましょう さて位置を調整するには 画像の幅をしらなければいけません 画像というのはmyBitmapという 変数に入れてましたね そして調整するとすれば このevent listener ロードし終わった場合のevent listenerの所で 調整するべきでしょう BitmapのObjectが入っている myBitmapという変数 コピーしてきました 幅を調べようと言って じゃあ.widthかというと これはCreateJSを使う場合は 気をつけてください 多くのobjectが幅や高さをとれません おそらく負荷を軽減するための 配慮だと思うのですが 幅や高さは当然にはとれないと 覚えておいたほうがいいです じゃあ困ったと思うかもしれませんが Bitmap objectは読み込んだ画像の入れ物です 読み込んだ画像そのものを プロパティで取り出すことができます それはimageです imageというプロパティで 読み込んだ中のobject 中の画像ですね Bitmapが取り出せます これはIMG要素でHTMLの中に入れるのと同じ派の イメージ要素がとれますので それなら幅と高さがわかります まずはimageを変数にとっておきましょう myImageとして とっておけばこの幅と高さがわかります myImage.width myImage.heightです それでそのobjectの半分を割り出して 後はX座標Y座標をどのように計算しようかと X座標Y座標を計算してもできるんですが 1つ便利なプロパティがあります それは Bitmapのプロパティなんですけど regXあるいはregYというプロパティです これはさきほどデフォルトでは Bitmap objectの左上角が 原点になると言いました その原点となる場所をずらしてください ここが原点だと思ってくださいと そういう指定がここにできます ですから真ん中に原点があれば 一番扱いやすいですね ということなのでこのregXに myImage image objectの幅の半分を 入れてしまえばいいということになります ということでmyImageの幅ですね 幅はwidthです 半分をいれてしまいます これで確認してみましょう ファイルを保存して そしてブラウザでプレビューします 縦はおかしいですけど 水平にはちゃんと中央に来ました これでよさそうですね ですからY軸についても Y軸方向についても同様の処理を行います もうY軸方向の処理は コピーを使っちゃいましょう これをコピーして次にペーストします そしてXはYに変える widthはheightに変える これでいいでしょう 保存して確認しましょう ブラウザでプレビューです ちゃんと真ん中に来ましたね X軸Y軸ともに中央に ステージの中央に画像が配置されました このレッスンでは PreloadJSのPreloadが終わったとき 読み取り終わった時の処理ですね fileloadのリスナー関数で 画像の位置を調整しました その時にいくつかのプロパティを使ったのですが まずBitmap objectからは幅 高さはとれないので image objectで中の image classのobjectを取り出しました 次にbitmap objectのデフォルトの 原点というのは左上角なんですけど その基準をずらすということでregXregYという プロパティを使って 画像をステージの中央に配置しました

CreateJS実践講座

CreateJSは、これまでFlashでしかできなかったようなインタラクティブなコンテンツや多彩なアニメーションを作ることができるJavaScriptライブラリです。このコースではチャプターごとにJavaScriptコードのサンプルをひとつずつとりあげながら、その制作方法を一歩一歩段階的に解説します。

3時間26分 (37 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2015年07月07日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。