今後のFlashの動向について現状から考えてみる

1月 31st, 2010

HTML5に食われるぞFlash的なことをちらほら聞いたりするようになったので、ここいらでその動向を少ない知識なりに考えてみた。

現状のwebページ観覧デバイスはpc or 携帯電話(スマートフォン含む)であるが、これに新しくiPadが加わってどうなるのかという所だと思う。
当たり前のことだが、これはiPadの普及率に大きく関わる問題で、appleが考えている武器が”iBooks”。
ここは、Kindle VS iPadなのでこの議題としてはパス(本当は最も面白い部分なのですが…)。
コンテンツ制作はpcでそれ以外はiPadもしくは携帯電話でといった状況が近い将来あるとしたらそもそものコンテンツの提供のしかたも考えなくてはいけない。
もし全ての観覧デバイスのことを考えてwebページを作るのであれば、静的表現html5が最適であるのは間違いない(環境依存に最も影響されないという点で)。
この時点でFlash危うい。。

重要なのは需要であるが、、今後ユーザーがITメディアに対して何を求めるのか。
webページ観覧→htmlで十分
リッチコンテンツを楽しむ→それぞれの環境に合わせたアプリをdl
そもそもwebページにおいてリッチなコンテンツである必要がなくなってくる。

ではでは、hotなソーシャルアプリケーションはどうだろう。
ソーシャルアプリケーションは、mixiでの成功?からも伺えるように今後ますます加速するかと。
で、そのソーシャルアプリの場はますますpcから離れてモバイル端末にシフトするのは間違いない気がする。
となってくると、FlashPlayer仕込む気がないApple製品が普及するならFlashいらなくなってきますね〜。
やばいFlash。

html5がFlashの代用としてというよりは必然的にFlashのRIA的表現がWebページからいらなくなる状況がやってくるかと。
で、html5がRIAの再現できるようになるのであればなおよしですね。
といってもまだYouTube再生がやっとくらいのレベルなので、html5のFlash再現はもう少し先の話になるでしょう。
となると、その間の補完としてFlash現行もしくはJsがあり得てJsに関して言えばecma5になったことでより安定するかと。
ここでFlasherの出番。
ecma4に唯一対応できたAs3からのJs(ecma5ver)は対応しやすいかと。

まぁ、先のことなんて予測は出来てもやっぱりわからないけれど、予測して行動していくことは大事。
少しずつでも、考えてアウトプットしていかねばと思ったのでentryしてみました。

jsf(Fireworksのスクリプト)ディレクトリ単位でpng8を生成

12月 16th, 2009

結構前から気になっていた技術adobe系のスクリプトを勉強してみました。

こちらからダウンロードできます。

内容はFireworksを使ってjpg,gif,pngファイルをpng8に変換するものです。(サイズはそのままです)
流れは

1,書き出すpng8の詳細設定をする。
2,書き出し先のディレクトリを指定する。
3,バッチ元のディレクトリを指定する。

最初のアラートでpng8の詳細設定ができるようになっています。(色数は64でマットカラーはffffffでとかです)
そのままでも使えますが、もしFireworks画面から開く場合は

C:\Documents and Settings\user\Application Data\Adobe\Fireworks CS4\Commands

ここあたりにファイルを入れるとFireworksのメニュー画面のコマンドから見れるようになるはずです。(こちらの場所は、各々のコンピュータによって設定が違うようですが大概はここです)
また、ディレクトリを選択するデフォルトの場所を変えたい場合はjsfファイルの1行目にディレクトリの場所を指定する変数がありますのでこちらで設定できます。

ソースを見ていただければ何てことない普通のjsですが、fwとかいう独自の関数がありますね。
fw.とかdoc.とかのリファレンスはこちらで参照できます。

えっと、こちらのjsfは会社の先輩が作ったものをかなり使わせていただいています。
この場を借りて、
めっちゃ勉強になりました!あざす!!

flashとpythonでのクラスマッピング(AMFを用いてgoogle app engineを用いて)

11月 17th, 2009

AMFを用いてpythonとflashのクラス同士をクラスマッピングしてみる。(Google App Engineを利用という想定で話を進めていきます。。)

まずは、AMFをPythonで実現させる為のライブラリpyamfをインストール。
こちらがとても参考になりました、ありがとうございます!
以下、主要3ファイルをのせておきます。

gateway.py(flashとの連携用py)
Main.as(flashのドキュメントクラス)
Entry.as(クラスマッピングするクラス)

appspot

[gateway.py]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
import wsgiref.handlers
import pyamf
from pyamf.remoting.gateway.wsgi import WSGIGateway
from django.http import HttpResponse
 
class Entry(object):
    asmsg = ""
    pymsg = ""
 
pyamf.register_class(Entry,"amfobject.Entry")
 
class AMFClass(object):    
 
    def entry(self,entry):
        entry.asmsg = entry.asmsg
        entry.pymsg = "pythonmsg"
 
        return entry
 
 
services = {
    'myservice.entry': AMFClass().entry
}
 
def main():
    application = WSGIGateway(services)
    wsgiref.handlers.CGIHandler().run(application)
 
 
if __name__ == '__main__':
    main()

[Main.as]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
package  {
	import flash.display.MovieClip;
	import flash.events.MouseEvent;
	import flash.net.NetConnection;
	import flash.net.ObjectEncoding;
	import flash.net.registerClassAlias;
	import flash.net.Responder;
 
	public class Main extends MovieClip{
		private var entry:Entry;
		private var netConnection:NetConnection;
		private var responder:Responder;
 
		public function Main() {
			btn0.buttonMode = true;
 
			netConnection = new NetConnection();
			netConnection.objectEncoding = ObjectEncoding.AMF3;
			netConnection.connect("http://helloworldanditao.appspot.com/gateway");
			btn0.buttonMode = true;
			responder = new Responder(onComplete, onFail);
			registerClassAlias("amfobject.Entry", Entry);
			entry = new Entry();
 
			btn0.addEventListener(MouseEvent.CLICK , btn0click);
		}
 
		private function btn0click(e:MouseEvent):void {
			entry.asmsg = inputtxt.t.text as String;
			netConnection.call("myservice.entry", responder, entry);
		}
 
		//サーバーの呼び出しが成功して結果が返された場合に呼び出される
		private function onComplete(results : Object):void {
			txas.t.text = results.asmsg;
			txpy.t.text = results.pymsg;
 
		}
 
		//サーバーがエラーを返したときに呼び出される
		private function onFail(results:*):void {
			for each (var thisResult:String in results) {
				trace(thisResult);
			}
		}
	}
 
}

[Entry.as]

1
2
3
4
5
6
7
8
9
10
11
12
13
package  {
 
	public class Entry{
		public var asmsg : String;
		public var pymsg : String;
 
		public function Entry() {
 
		}
 
	}
 
}

AMFの部分にだけ焦点をあてて解説します(google app engine部分は割愛しますのであしからず。。。)

Main.asがgateway.pyを読みに行きます。

python側では、7~9行目
as側では、Entry.asで
今回のターゲットとなるクラス”Entry”
を初期化しています。

そして、
gateway.pyの11行目と
Main.asの22行目で、互いにEntryというクラスを結びつけています。
これによって、Main.asの35,36行目のようなドットシンタックスでプロパティを指定するような記述ができます。

クラスマッピングされた各々のプロパティの型はこちらを参考にするといいと思います。
あとは、Datastoreを用いてごにゃごにゃするだけですね!

携帯でのswfインライン表示とリンクについて

10月 20th, 2009

携帯でのswfインライン表示の際、リンク先の記述方法を調べていたのですが、どうやら”au”,”docomo”,”softbank”3社共通の記述はできないみたいですね。
調べてみましたが、「au用」、「docomo、softbank用」で分けてhtmlを作るのが打開策みたいです。

docomo、softbankの場合はobjectタグをaタグで囲む

1
2
3
4
5
6
7
<a href="リンク先url">
<object data="sample.swf" type="application/x-shockwave-flash" width="100" height="100">
    <param name="bgcolor" value="#FFFFFF">
    <param name="loop" value="on">
    <param name="quality" value="high">
</object>
</a>

 

auの場合はimgタグをaタグで囲む

1
2
3
<a href="リンク先url">
<img data="sample.swf" />
</a>

の記述でリンク先へ飛ぶことができました。
ちなみに
・auの記述だたdocomo,softbankはswfを読み込めない。
・docomo,softbankの記述だとauがリンク先へ飛べない。

以上の動作確認でした。

MacPython2.5 IDLEでフォントサイズとかが変更できないバグ

9月 22nd, 2009

Google appengineを始めようとおもってついでならPythonも覚えちゃえということになりました。
Google appengineはPython2.5しか対応していないので、2.5シリーズの最新版MacPython2.5をダウンロードしました。

で、どうやら付属のIDLEというエディターが調子いいみたいなので早速使ってみる。
が、フォントサイズが異常に小さい。
タダでさえPCのせいで目が悪くなったのにこれ以上悪くしたくないのでフォントサイズを変更しようと思ったらどこにも変更する所がなくて困ったので検索するもtipsが見当たらず、唯一英語のQ&Aであったのでそれを参考にやってみたらできました。

ターミナルで
/Library/Frameworks/Python.framework/Versions/Current/bin/idle2.5
を直接たたくとメニューに今までなかったoptionという項目があるIDLEが立ち上がり設定できます。
 

090922
 

多分option付きのIDLEを立ち上げる為にはこの手法しかないくさいので、設定したい時はターミナルから立ち上げて設定しなきゃっぽいです。

Flash mobileの作り方

9月 16th, 2009

最近、仕事がFlash mobile祭りです。
流れがつかめてきたので主にFlash mobile初挑戦の方向けにpostしてみます。

Flash mobile制作の流れ
(0)この記事の対象者
(1)素材の切り抜き
(2)新規ドキュメントの作成
(3)取り込んだデータの整頓
(4)パブリッシュ
(5)調整
 

(0)この記事の対象者
この記事の対象者はFlash Lite 1.1でFlash mobileコンテンツを作りたい方向けです。
最近の携帯電話に搭載されているFlash liteのバージョンは3.0ですが、Flash lite1.1を使っているユーザーにも見せたいというクライアントはまだ多く、mobileコンテンツは全て1.1で行っています。
 

(1)素材の切り抜き
まずは、psdなどの素材を部品ごとに切り抜きます。
このとき、最初は容量をあまり気にせず一番いい形(png24)で保存するのがお勧めです。
容量の軽減は、最後にバランスを見ながら調整するのが一番早いからです。
また、透過データの場合素材のサイズぎりぎりで切り取ると表示がおかしくなる問題がありますので、四方に1pxずつ余白を与えます。

a0 ギリギリのサイズで切り取った場合(注:左端)

a1 上下左右1pxずつ余白
 

(2)新規ドキュメントの作成
Flashで
新規ドキュメント→Flashファイル(モバイル)
プレーヤーバージョン : Flash lite 1.1
スクリプトバージョン: ActionScript 1.0
コンテンツタイプ :スタンドアローンプレーヤー
にします。

b0

ステージのサイズはFlash liteのバージョンによって決定します。
今回の場合はFlash lite 1.1なので240×266というサイズが推奨されています。
 

(3)取り込んだデータの整頓
データを取り込んだあと最初に確認するのが、pngのビットマッププロパティの圧縮がjpegになっていないかです。
これは取り込み時に、圧縮が勝手にjpegになってしまうことがあるのでもしなっていたら”劣化なし(PNG/GIF)”に直します。(直さないとパブリッシュ画面ではそのままですが、実際の携帯電話でその素材は赤く表示されてしまいます)

c0

チェックし終わったら、取り込んだ素材を全てMovieClipにくるみます。素材は全てMovieClipを扱うようにします。(こうしておくと後々変更が楽だから)
—–制作—–
 

(4)パブリッシュ
ctrl+enterでパブリッシュすると、自動的にAdobe Device Centralが起動してエミュレータを通して画面を確認できます。
エミュレータの選択をします。
左上のデバイスセット→サンプルデバイスセット→flash lite 1.1 16
を選択すると、このバージョンの一番スペックが悪いやつが選べます。

d0
 

(5)調整
ファイル→パブリッシュ設定
のFlashタブにある詳細のサイズレポートの作成にチェックをつける。

e2

出力とAdobe Device Centralのファイル情報を見ながらswfファイルのサイズを100k以内にしていきます。
最高クオリティのpngで素材を作ったので、その素材を軸にPhotoshopでjpeg化したり(元のpngは絶対残しておいた方がいいですよ!!)して容量をへらしていきます。

e0

e1
 
 

このような流れで制作しています。
(5)はバランスを見ながら、大事な部分はなるべく画質を落とさないように、かつ一番容量食っているところから減らしていくと効率がよいです。

最後にAdobeDeveloperCenterから有益な日本の携帯電話事情
2009年5月の記事です
じっくり読むと為になります。

Wordpressでスマートに改行する

9月 16th, 2009

全角スペース

shift+enter
 
 
 
 
 
 
 
こんなに改行できるよぅ

RectangleでMouseEventを取得する

9月 3rd, 2009

今年は本当に冷夏ですね。
もう秋服の準備しなきゃって気分になるこのごろです。

あるクリックのイベントを取得したいターゲットにある範囲のマウスオーバーを取得したいとき、Spriteでその範囲を決定してマウスオーバーを取得するためにSpriteをそのままかぶせてしまうとターゲットのクリックのイベントが取れなくなってしまいます。

そこで便利なのが、短径領域の情報のみを扱うRectangleです。

rectangleでマウスオーバーを取得

使い方は簡単で

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
package {
	import flash.display.MovieClip;
	import flash.events.MouseEvent;
	import flash.geom.Point;
	import flash.geom.Rectangle;
 
	public class Main extends MovieClip{
		private var o1:Rectangle;
 
 
		public function Main() {
			////マウスオーバーを取得したい範囲を決定
			o1 = new Rectangle(200, 0, 200, 200);
			stage.addEventListener(MouseEvent.MOUSE_MOVE , mousemove);
		}
 
		private function mousemove(e:MouseEvent):void {
 
			////////マウスオーバーしているかどうかを確認
               if (o1.containsPoint(new Point(mouseX , mouseY))) {
				t1.t.text = "Over";
			}else {
				t1.t.text = "Target";
			}
			e.updateAfterEvent();
		}
 
	}
 
}

20行目の

20
 if (o1.containsPoint(new Point(mouseX , mouseY)))

でマウスポイントが短径領域内に入っているかどうかを確認しています。
重なりとかを気にしないですむのでいい感じですねー。

Google Maps API カスタムズームコントロール

8月 25th, 2009

久しぶりのエントリーになりました。
仕事でgoogle maps api をつかったのですが、カスタムズームコントロールについてのtipsが少なかったのでエントリー。

google maps api 導入は詳しいサイト沢山あります。(というか、google自体のドキュメントがかなり分かりやすくてgood)

Google Maps API カスタムズームコントロール

CusstomZoomというムービークリップクラスでコントローラーのボタンをドラックして動かしている間Eventを出し、値をこのクラス(Google.as)に渡して40行目のsetZoomでコントロールするようにしました。

[メインとなるクラス、Google.as]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
package Mc {
	import flash.display.MovieClip;
	import flash.geom.Point;
	import flash.display.Stage;
 
	////google maps api
	import com.google.maps.LatLng;
	import com.google.maps.Map;
	import com.google.maps.MapEvent;
	import com.google.maps.MapType;
 
	////my classes
	import Mc.CusstomZoom;
	import Event.CusstomZoomEvent;
 
	public class Google extends MovieClip{
		private var map:Map;
		private var cusstomzoom:CusstomZoom;
 
		public function Google() {
			map = new Map();
			map.key = "your api key";
			map.setSize(new Point(550 , 400));
			map.addEventListener(MapEvent.MAP_READY , mapredy);
			this.addChild(map);
		}
 
		private function mapredy(e:MapEvent):void {
			map.setCenter(new LatLng(35.6938401, 139.7035494), 2, MapType.NORMAL_MAP_TYPE);
 
			cusstomzoom = new CusstomZoom();
			cusstomzoom.addEventListener(CusstomZoomEvent.ZOOMEVENT , zoomevent);
			cusstomzoom.x = 10;
			cusstomzoom.y = 10;
 
			addChild(cusstomzoom);
 
		}
 
		private function zoomevent(e:CusstomZoomEvent):void {
			//カスタムイベントのnumはズームの値
			map.setZoom(Number(e.num) , true);
		}
 
	}
 
}

map.setZoomでズームをコントロールします。

40
41
42
43
private function zoomevent(e:CusstomZoomEvent):void {
			//CusstomZoomEventのnumはズームの値
			map.setZoom(Number(e.num) , true);
		}

ポイント
MapのメソッドsetZoomの引数にZoomしたい値を入れればいいだけなので実装は簡単だと思います。
ただ、引っかかったのは、そのZoomレベルが場所によって違うせいかしっかり書かれていなかった部分です(パラメーターは0~19までですみたいな)
この例では0~19までをパラメータとして扱っていますが、さらにこのへんとかまでがんばればいけるみたいです(笑)

やっぱりAPIはすごいです、ちょっといじくるだけですごいことやっているように見えちゃう。
マッシュアップは結局アイデアなんだなーと感じました。

flashと扱うデータについて

8月 5th, 2009

“Flash内にデータを持ち込む”について、少しずつ知識が増えてきたのでメモ。

Flash内に持ち込む前にどのような形にしておくのが適切か考えてみました。
あくまでクオリティ重視、cs3向けに書いていきます。

Flashで扱うデータは主に
・写真
・ロゴなどのデータ
に分けられるかと思います。

写真は
Flashのライブラリに登録しているだけなら実際のswf容量にかかわってこないため、なるべく元の状態を維持しておきたいということから、
・透過データを持ちたい写真→png
・プレーンな写真→png
がベストでしょう。

ロゴも
・ビットマップ形式→png
がいいと思います。
Flash内のビットマップデータは全てパブリッシュ時にjpgとして変換されるため、なるべくpngでライブラリに登録がいいと思います。
また、ベクターデータの場合は、
・ベクター形式(イラレデータ)→Flash上にそのままコピペ後mc化
がいいでしょう。
cs3では、イラレのベクターデータを保持したままFlash内にコピペできるのでこれが一番良い方法だと思います。

ライブラリにインポートした後からパブリッシュ時に書き出す設定ができるので、ライブラリに登録する段階ではなるべく高品質なpngがベストだという現段階での結論です。

で、実際に持ち込んだ後の話ですが、
ライブラリに登録されたデータをダブルクリックすることでビットマッププロパティの設定画面に移ります。

09080402

これをダブルクリック

09080400

スムージング→アンチエイリアスを利かすかどうか
圧縮は写真画質とロスレスの2種類あります。
ロスレスはpngファイルをそのまま使うというイメージでOKです。
写真画質はパブリッシュ時にjpeg化しますよーってことで、これを選択すると”読み込んだjpegデータを使用する”のチェックボックスを選択できます。
で、チェックを外すとjpegの圧縮率が選べてswfファイルの容量の調整ができるという訳です。
ちなみに”読み込んだjpegデータを使用する”は、読み込んだデータがpngの場合一番ハイクオリティでパブリッシュ時jpg化するという設定です。

ちなみにパブリッシュ設定にある気になるこの項目は
09080401
ビットマップデータのパブリッシュ時のjpeg画質設定なので、pngで読み込んでいる場合あまり関係ありません。
(ステージ上にあるビットマップデータはパブリッシュ時に全てjpeg化されます)

ちょっと長くなってしまいましたが、今のところこのような認識でやっています。
もし間違えて解釈しているところがございましたら、ご指摘いただければ幸いです。。