2009-05-08

flashコンテンツを呼び出すhtmlの書き方

このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク
http://coderepos.org/share/wiki/suzunari
を参考にさせていただきました。

今回は、以下のような感じです。

<object type="application/x-shockwave-flash"
id="http___sobarco_blog_parts_swf"
data="swfファイルの置き場所を指定" style=""
height="194" width="120">
<param name="wmode" value="transparent">
<param name="allowScriptAccess" value="always">
<param name="scale" value="noScale">
<param name="flashvars" value="aaa=val1&bbb=val2">
</object>

objectタグ内のdataでflashファイルが置いてある場所を指定します。
読み込んだflashの表示サイズをwidthとheightで指定します。
idの値は適当でよいとは思うのですが、blogパーツの場合は人様のサイトに貼っていただくのでありがちなidにするとサイトで利用しているcssの影響を受けるかもしれないので、いい感じにかぶることのなさそうな名称がいい気がします。


<param name="wmode" value="transparent">

で読み込んだflashの背景を透明にするようにしています。


<param name="flashvars" value="aaa=val1&bbb=val2">

で読み込んだflashに対してパラメータを与えています。

後のparamタグのallowScriptAccessとscaleに関しては、正直よくわかりません。

htmlに記載されたパラメータをActionScriptで受け取る

このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク
flashを呼び出すHTMLには、パラメータを記載できます。
以下のような感じで記載します。

ActionScriptで利用するには、

var flashvars:Object = loaderInfo.parameters;
var a:String = flashvars["aaa"]; //val1
var b:String = flashvars["bbb"]; //val2

という感じです。
スクリプトが実行されるとloaderInfoという値が勝手にセットされるようで、ここにhtmlから読み込んだ値が設定されているようです。

flash内に事前に用意した画像を埋め込む

このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク
ブログパーツには、事前に用意した画像をいくつか埋め込んでいます。
ActionScriptでこの画像を利用するには、
Embed
というのを使うようです。
参考になるのは、
http://gihyo.jp/dev/feature/01/box2d/0006
です。
いい感じで普通のオブジェクトとして利用できます。

ブログパーツの通信終了待ちのグルグル回転

このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク
今回のブログパーツは、サイトと通信をしています。
なので通信が終わるまでは表示されないものが多く殺風景なため、よくあるflashサイトのようになんかしらのloading中のアクションを入れてみようと思って検索したところ
http://blog.garden-place.jp/oborobeer/item_198.html
がいい感じでしたので利用させていただきました。

こちらのサイトで紹介されているスクリプトをコピーして、ブログパーツ用のaction scriptファイルが置いてある場所と同じ場所に
LoadingPicture.as
という名前で保存しました。

そして、サイトの例にあるとおりLoadingPictureのインスタンスを作成して、ブログパーツ用クラスのコンストラクタでshowメソッドとstartメソッドを呼んでいます。
そして通信の完了イベントがイベントリスナーで検知して、イベント検知後に呼ばれる関数内でLoadingPictureのremoveメソッドを呼んでグルグルを消しています。

大雑把に書くと、以下のような感じです。

package
{
import flash.display.*;
import flash.events.Event;
import flash.events.IOErrorEvent;
import flash.text.TextField;
import flash.net.URLLoader;
import flash.net.URLRequest;

public class BlogParts extends Sprite {
private var loading : TextField = new TextField();
private var loadPic : LoadingPicture = new LoadingPicture(30, 10, 9, 12, 0xC79810, 0xDDEEDD);

public function BlogParts() {
loadPic.show(this,stage.stageWidth/2,stage.stageHeight/2);
loadPic.start();
loading.text = "loading...";
addChild(loading);
loading.x = stage.stageWidth/2 - loading.textWidth/2;
loading.y = stage.stageHeight/2 - loading.textHeight/2;
loadXML();
}

private function loadXML():void {
var myLoader:URLLoader = new URLLoader();
myLoader.addEventListener(Event.COMPLETE, loadCompleteHandler);
myLoader.addEventListener(IOErrorEvent.IO_ERROR, errorHandler);
var urlPath:String = "http://aaaaa";
myLoader.load(new URLRequest(urlPath));
}

private function removeLoading():void {
removeChild(loading);
loadPic.remove();
}

private function errorHandler(e:IOErrorEvent):void {
removeLoading();
//以下でエラー処理を行う
}

private function loadCompleteHandler(event:Event):void {
removeLoading();
var loadedXml:XML = new XML(event.target.data);
//以下で読み込んだxmlを処理する

}
}

}

ブログパーツのサイズ

このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク
ブログパーツのサイズを調べるとだいたい横が120pxか160pxが多い感じのようです。
googleのアドセンスが横120pxなので今回作成したブログパーツは120pxにしてみました。
縦のサイズに関しては、作るもの次第なのでしょうが今回作成したものは縦横比を黄金比にしてみようと思い194pxにしてみました。
ちなみに黄金比は、1:1.618です。

BLOGパーツを作るために作ったもの

このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク
今回のBLOGパーツを作ってみたさいに必要になったものは、以下のものです。
・ブログパーツ貼り付け用スクリプト紹介ページ
・ブログパーツ貼り付けスクリプトから呼ばれる、flashを表示するためのjava scriptを表示するページ
・ブログパーツ本体のflash
・ブログパーツが通信を行うページ
flash以外にも3つほど機能が追加になったのでした。

BLOGパーツを作ってみました

このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク
SOBARCO用のブログパーツをActionScriptで作ってみました。

本は、

がとてもわかりやすくてよかったです。
他の言語を知っていれば、それほどガッツリ読まなくてもダイジョブですが、ActionScript独特なこと(フレームの概念)とかが結構、しっくり理解できました。
つづけて

も読みました。こちらもとても参考になりました。
こちらは、具体的な事例集という感じで要所要所ブログパーツを作る際に参考にさせていただきました。

ActionScriptは、やっぱりプログラム言語とは違うノウハウは必要ですねぇという感じです。
イベントとかアニメーションの手法とかがあまり見てくれ系の経験がないので新鮮なことが多いです。
独特なものも多いですが、うまくクラス化されているのでクラスを理解すればいい感じではあります。

web上の資料では、やはりAdobeのサイトが一番役に立ちました。
http://help.adobe.com/ja_JP/Flash/10.0_Welcome/WS091A3800-D889-4425-B647-C44097B73F34.html

ブログパーツを作っていくうえで知ったこともまとめてご紹介していこうと思っています。

2009-05-02

ひもくるりん

このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク


新聞などを紐で束ねるときに、これを使うと簡単にしっかり束ねることができるらしいです。
どれくらい簡単にできるのかがキニナルのです。

筆ごこち

このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク


サインペンに見えますが、筆ペンです。
そして普通の筆ペンよりもペン先が硬く書きやすいため、字がうまくかけているような気がするらしいです。
そこがキニナル!

アドベンチャーワールド

このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク
http://aws-s.com/index2.html

アドベンチャーワールドは、和歌山県の南紀白浜空港から車で5分ぐらいの動物園と遊園地の複合施設です。

こちらはパンダがいっぱいいることで有名な動物園なわけですが、それ以外にもなかなかステキなところがあるオススメなスポットなのでした。

個人的なオススメポイントは、
動物との距離が近い
というところだと思います。

特に、サファリゾーンの餌やりタイムでは実際にゾウやキリンに餌をあげることができるのです。
特にゾウはオモシロいですよ。いい感じで鼻で餌を持っていきます。なかなか楽しいです。
200円で餌を売っていたのですが思わず追加購入してしまいました。

他にも、売りであるパンダもいっぱいいるので、とても良いです。パンダは同時にいっぱい見れる方が楽しいのねとも思わせてくれます。

あと、イルカショーも見れるのですが10匹以上が同時に出てくるショーを始めてみたのでこれも楽しかったです。

遊園地は特にこれという感じでもないのですが、動物園はとても楽しかったです。
だいたい丸一日は遊べます!