< « 2009年02月 | main| 2009年04月 » >

Flashバナーのデザイン作成時の留意点

FLASH勉強

2009年03月24日

ポータル系サイトなどでよく見かけるFlashバナーですが、バナー制作規定にある「容量(swfファイルサイズ)」にたびたび泣かされます。何も考えずオーサリングすれば必ず容量オーバーするという悪夢。下手すりゃ構成案段階まで逆戻りして作り直しなんてことになるかもしれないので、「構成案とデザイン」時の留意点をメモしておこうと思います。
※オーサリング担当者からデザイン担当者へ向けての留意点という視点で。

オブジェクト数に気をつける

オブジェクト数と比例して容量が増える

bnrCreate_obj.jpg

異なるオブジェクト1個配置より異なるオブジェクト3個配置の方が容量が大きい。
※同じ形のオブジェクトであれば、Flashオーサリング時にシンボルとして扱えるので問題なしです。

オブジェクトの大きさにもよるが、単純な考え方として、異なるオブジェクトが増えるとその分、Flashに配置する素材が増えるので、swf容量も大きくなる。

訴求したいものを絞るとオブジェクト数も減るはず。



■補足

ビットマップの場合は、面積(大きさ)が大きくなるほどと容量が増える。「10px × 10px」のビットマップ3個と「100px × 100px」の画像1個なら、後者の方が容量が大きい。

ベクターの場合は、パスの複雑差などが容量に関係してくる。

背景とかカットシーン数に気をつける

背景を変える

bnrCreate_haikei1.jpg

単純に背景を変えるとその分、Flashに配置する素材が増えるので容量が増える。

背景を変えない

bnrCreate_haikei2.jpg

背景を統一すると容量が少なくて済む。



シーンをどのようにカット割りするかが大事。出来る限り少ないカットシーン数で済む表現方法を考えるのが大事。かもしれない

単色の背景を用いる&色数を少なくする

オブジェクト(↓ではキャラクター)の容量について。

単色の背景の場合

bnrCreate_gradi2.jpg

アルファチャンネル(透明エリア)を保持しないgif形式を使用することにより、容量が小さくて済む。また、gif書き出しの時に色数を削ることが出来るので更に容量を減らすことが出来る。

単色の背景でない場合(グラデーションとか)

bnrCreate_gradi1.jpg

アルファチャンネル(透明エリア)を保持するpng形式となるので、容量が大きくなる。一つや二つのオブジェクトなら構わないが、数が膨れ上がると容量の差は歴然となってくる。。かもしれない。




気がついたら書き足し&修正していきます。

javascript開発環境をとりあえず作っておく。

Ajaxメモ

2009年03月18日

javascriptはコピペだけで何とかなるから大丈夫!?
と逃げ逃げの姿勢でやってきたんですが、
↓みたいなのを見せられるともう無視できんなと思い始めた次第でございます。

Javascript Super Mario

Wario Land: Shake It

仕事でもFlashで作った後で、javascriptで作ればよかった!って思うことがたまにあるんで少しずつjavascriptに慣れていこうと思います。
※簡単ながらも細かな修正が何回もやってきて、Flashでコンパイルするのがめんどくさい。などなど。

aptanaとjQueryでやっちゃおう

aptana

aptanaとはEclipseベースのWebオーサリングツールです。javascriptやらphpやらhtmlやら色々カバーしてて便利のようです。※個人的にEclipseベースのFlex Builderに慣れてしまってるので使いやすいだろう!という願望。

aptana01.jpg

jQuery

jQueryとはJavaScriptライブラリの1つのようです。まだ使い慣れてないけど、jQueryを使えば簡単にjavascriptが組める!&ブラウザの互換性が保てる!ってな部分を期待してみます。
※aptanaをインストールすればjQueryをインポートできるのでDLする必要なし。


aptanaでjQueryをインポート

プロジェクトウィンドウの該当プロジェクトを右クリックより、

【インポート】 > 【Ajaxライブラリ・インポート・ウィザード】

からjQueryのcheckboxをチェックすればOK

aptana03.jpg


aptanaでjQueryのコードアシストを設定

メニュー部分の【ウィンドウ】>【設定】より、

【Aptana】 > 【エディター】 > 【JavaScript】 > 【コードアシスト】

と選択し、jQueryのチェックボックスをcheckすればOK

aptana02.jpg

$と打ってコード補完されていればOK!

Flex BuilderやFlash DevelopでActionscriptを書く時もそうだけど、コードアシストによってエディタ様様様が言語をご教授してくれる気がします。良いエディタを使えばより勉強になると思います。コードアシストは自分にとって生命線なんです。。

さてjavascriptを勉強しようか!

下記2つの記事を見たら、javascript恐怖症が少し和らいだのでメモ

jQueryを使ってNews Tickerプラグインを作ってみよう[前編][1]

javascript初級者のオブジェクト指向とかプロトタイプとか

インターフェースって食べれるの?

FLASH勉強

2009年03月16日

大阪てら子 21 「AS3教えて!えらい人」にいってきました。

色々と勉強になる質問が飛び交い、先生達が勉強になる解答を示してくれて、私にとって、とっても有意義な時間になりました。

自分はinterface(インターフェース)について質問させてもらったんで、その内容をちょちょいとまとめておきます。

インターフェースってなに?

抽象的なクラスです。っと説明つきにくいので、↓を参照してください。

Java入門 | インタフェース

Javaの資料ですが、概念はActionScriptでもほとんど変わらないはずです。自分もモヤモヤっとしか理解してません。。。

もう少し具体的にどういう時に使うの?

インターフェースを実装 (implements)したクラスはインターフェースで定義されたメソッドを必ず実装しなければならない。(しなければコンパイルできない)

ってことは、複数人でコードを書く時にインターフェースを決めておけば、クラスが綺麗に統一されていくよー。みたいなことはググっていけば何となく理解できました。

ただし、システムのように大人数で開発することは余りなく、一人で実装することが多いFlashでは、インターフェースは必須ではないんじゃない?って疑問がふつふつと。

ということで、別な部分での利点を教えてください!

っていうことを質問したわけであります。

で、そのまとめを文章で説明しにくいので以下のasを!!

※車に無理矢理例えてみた。
※メソッドのok_wakattaYo1とok_wakattaYo2を見てなるほど!っと道が開ければ。。

teraco_osiete.as

package {
	import flash.display.DisplayObject;
	import flash.display.Sprite;

	public class teraco_osiete extends Sprite
	{
		public function teraco_osiete() {
			ok_wakattaYo1();
			ok_wakattaYo2();
		}
		
		public function ok_wakattaYo1():void {
			//var car:Car = new Car();
			//っとするところを抽象的に
			//var car:IMachine と変数宣言してみる。
			var car:IMachine = new Car();
			
			//そのままcarをaddChildするとIMachineはDisplayObjectでは
			//ないので怒られる。なんでキャストする。
			addChild(DisplayObject(car));
			
			//上記2つと同様。
			var carlogo:IMachine = new CarLogo();
			addChild(DisplayObject(carlogo));
		}
		
		public function ok_wakattaYo2():void {
			//Car(Sprite)とCarLogo(TextField)をインスタンス化して、配列にぶっこむ。
			var machines:Array = [];
			var car:Car = new Car();
			var carlogo:CarLogo = new CarLogo();
			machines.push(car);
			machines.push(carlogo);
			
			//配列の中身をfor eachでまわす時、受け取る変数をIMachineと定義する。
			//IMachineにはdrawが定義されているので問題なくdrawできる。
			//※抽象クラスを使うことによりSpriteを継承しているCarでもTextFieldを継承しているCarLogoでも
			// 変数に格納できる。
			for each (var obj:IMachine in machines) {
				trace(obj);//1ループ目[object Car] , 2ループ目[object CarLogo]
				obj.draw();
			}
		}
	}
}

import flash.display.Sprite;
import flash.text.TextField;
import machine1.IMachine;

/**
 * 抽象クラス「IMachine」を実装 (implements)したCarクラス
 */
class Car extends Sprite implements IMachine {
	public function draw():void {}
}

/**
 * 抽象クラス「IMachine」を実装 (implements)したCarLogoクラス
 */
class CarLogo extends TextField implements IMachine {
	public function draw():void {}
}

/**
 * 抽象クラス「IMachine」
 * 抽象メソッド「draw」のシグネチャを定義
 */
interface IMachine {
	function draw():void;
}

私と同じぐらいのas理解度の人はなるほどー!!ってなるはず。

shadowboxでHTML表示のメモ

Ajaxメモ

2009年03月03日

Lightbox風なやつで、HTMLやswfを表示できるjavascriptを探してたわけですが、
LightWindow →同じドメインのHTMLが開かない(IE6)
multibox →IE6で上手く開かない
MOOdalBox →IE6で上手く開かない
と、ことごとく玉砕されたため、
今流行りのshadowboxに目をつけてみました

がしかし、 shadowboxでHTML表示を行うことだけに約2、3時間ハマることに。。

失敗:'iframe'無し

  1. Shadowbox.loadPlayer(['html'], 'js/player');

成功:'iframe'有り

  1. Shadowbox.loadPlayer(['html' , 'iframe'], 'js/player');

ここでいう、「iframe」の意味がいまいち分からないのだが、「iframe」つけたらshadowboxで上手くHTML表示が出来たのでめでたしめでたし。

< « 2009年02月 | main| 2009年04月 » >
Adobe Flash CS3 詳細! ActionScript 3.0 入門ノート (DVD-ROM付)
クラスで書けるようになった。配列のpushとかspliceとかsliceとかややこしい部分の辞書代わりにも使ってます。XML関係もこれで覚えた。
ActionScript 3.0 アニメーション
vx,Math,cos,sinとか???な数学的な部分をこの本で理解できた気がします。逃げたいジャンルだけどFLASHに必須なジャンルなのよね。。
Adobe Flash CS3 詳細! ActionScript3.0入門ノート2 (CD-ROM付)
ActionScript応用への第一歩。ただこれを読む前に入門ノート1を先に読んでおいた方がよさそう。ASの世界が広がった気がする本です。
Flash Creative Workshop
FLASHを始めて右も左も分からない時に救世主となった本。FLASHサイト制作法がなるほど!っと。ActionScriptバリバリの人はスルー。
FLASH OOP for ActionScript 3.0
FLASHの「今の主流」を知ることが出来る本。筆者の方々は総勢10人以上でかつ現在活躍中の方々ばかりなんでミーハー的な読み方もありかも。