lifepad2

上記の広告は１ヶ月以上更新のないブログに表示されています。新しい記事を書く事で広告が消せます。

やっぱりFC2では限界があったっす。

色々とカスタマイズしようとすると、Google Mapsの表示とかコードをハイライト表示させたり等、無理なことがたくさんでてくるので終了することに。

これからはMTでがんばっていきます。
再構築がえらくめんどくさいけど。

Google Maps API for FlashをFlash CS3で試してみました。
Google様でGoogle Maps API for Flashをサクッと調べると、Flex SDKでパブリッシュしているパターンが多いので、Flash CS3なら記事を書く意味があるかなと。

ただし内容は英語のサイトを無茶読みして作成したもので、しかも私のスキルの問題もあり間違っている部分があるかもしれません。ご了承ください。
本家サイトのチュートリアル

【1】APIキーとSDKをゲットします。　⇒Google Maps API for Flash

APIキーは注意事項を読み（右上のEnglishを日本語に変えれば見れます）、同意してキーを入手します。
その次に最初のページに戻って、SDKをダウンロードします。


【2】Flash CS3のセットアップ

・Flashを起動しているなら終了してね。

・ダウンロードしたファイル内に「map_1_8a.swc」があるのを確認してね。
（ファイル名はバージョンにより変わる可能性があります）
（SDK/lib/内にあるファイルです。「map_flex_1_8a.swc」はFlex用）

・MacならMacintosh HD/Applications/Adobe Flash CS3/Configuration/Components
って感じの場所に"google"フォルダを作って、その中に「map_1_8a.swc」を入れてね。


【3】Hello Worldをやってみよう。

・Flash CS3を起動し、AS3.0ファイルを新規作成。

・するとどうでしょう。[ウィンドウ→コンポーネント]ウィンドウにGoogle→GoogleMapsLibraryが追加されているではありませんか。この時点で「もしかしてかなり簡単？」と思ってしまいます。

・GoogleMapsLibraryをステージにドラッグします。するとステージに青い枠のオブジェクトができるわけですが、これはステージから消してしまってもいいです。そのまま残しても問題ありません。

・以下のコードをタイムラインにペーストします。
（"取得したAPIキー"部分は【1】で入手したキーを入力します）

import com.google.maps.LatLng;
import com.google.maps.Map;
import com.google.maps.MapEvent;
import com.google.maps.MapType;

var ViewSize = new Point(300,240);//300が幅、240は高さです。
//↑マップの大きさを設定します。

var map:Map = new Map();
map.key = "取得したAPIキー";//入手したAPIキーを入力してね。（ローカルの場合は適当な文字でも動きます）
map.setSize(ViewSize);
//↑サンプルでは:map.setSize(new Point(stage.stageWidth, stage.stageHeight);
//となっていましたが、動かないので書き換えました。

map.addEventListener(MapEvent.MAP_READY, onMapReady);
this.addChild(map);

function onMapReady(event:Event):void {
map.setCenter(new LatLng(40.736072,-73.992062), 14, MapType.NORMAL_MAP_TYPE);//"40.736072,-73.992062"の部分はもちろん座標
}

これでパブリッシュすればローカルでは見れるはずです。わ～い。


【4】ブログで公開してみる



実際にブログ（FC2）で公開する場合はAPIキーの問題があってできない感じです。
上記の画像はまさにAPIキーの問題で”API確認してや”という状態です。

FC2ではできそうにないので、別のアドレスでやってみました。

Google Maps API for Flashのサンプル。

【注意事項】
※ステージにコンポーネントをドラッグしオブジェクト名を設定しても、結局クラスをnewする必要がある。リンケージでクラス名を設定することもできません。

※今回はFlash側にAPI Keyを入れる形でできましたが、この場合swfを解析するソフトでAPIキーが判明される・・・ことがあるかも。

xmlファイルの読み込みの手順。

【1】URLLoaderクラスを使ってテキストを読み込む。
　ここまでは通常のテキストと同じ。

【2】XMLクラスのインスタンスを作り、URLLoaderオブジェクトをXML()で読み込む。
　【1】の手順で読み込まれたテキストは、まだXMLとして扱っておらず、
　そのままTraceするとXMLがブラウザでの表示内用と同じになる。
　これを、StringTo()とかと同じ感覚で”XML(URLLoaderオブジェクト)”としてXMLにする。

【3】xmlのタグ名＋配列で読み込み。

//textfieldの生成
var text01:TextField = new TextField();
text01.border = true;
text01.borderColor = 0x554499;
text01.width = 300;
text01.height = 300;
text01.x = 20;
text01.y = 20;
addChild(text01);//ステージにテキストフィールド”text01”を配置でもオッケー。

//XMLのURLとLoaderの生成
var xmlURL:URLRequest = new URLRequest("xmlstart.xml");//URLを作成
var xmlLoader:URLLoader = new URLLoader();//URLLoaderインスタンスを生成してURLを読み込み
xmlLoader.load(xmlURL);

var myXML:XML = new XML();//XMLインスタンスの生成

xmlLoader.addEventListener(Event.COMPLETE, xmlLoadStart);
function xmlLoadStart(e:Event):void {
myXML = XML(xmlLoader.data);//XMLインスタンスにXMLを突っ込む
trace("XMLの読み込み完了！");
text01.text = myXML.entry[0].minename;
}

実際に使うにはflashの1フレーム目に上記のコードをペーストして、別途同階層にxmlファイルを用意する必要があります（当たり前か）。

今までのデザインはテンプレートだったので、これから色々と実験も兼ねてカスタマイズしていこうと思います。

デザインのカスタマイズは順次リアルタイムで行なっていくとして、「osxの起動中画面のアレ」を無理矢理as3でやりました。
flashでやるのであれば普通はタイムラインを使った方が楽だとは思いますが、せっかくなので勉強も兼ねて。

var degree:uint = 0;
var radian:Number;

function otherRad(degree:uint):Number {
var sinalpha:Number;
radian = degree * Math.PI / 180;
sinalpha = Math.abs(Math.sin(radian));//0～1までの絶対値を取得

return sinalpha;
}

//常にアルファの値を取得
addEventListener(Event.ENTER_FRAME, getAlpha);
function getAlpha(e:Event):void {
degree += 15;
if(degree > 360) {
degree -= 360;
}
lc01.alpha = otherRad(degree);//関数を実行
lc02.alpha = otherRad(degree + 15);
lc03.alpha = otherRad(degree + 30);
lc04.alpha = otherRad(degree + 45);
lc05.alpha = otherRad(degree + 60);
lc06.alpha = otherRad(degree + 75);
lc07.alpha = otherRad(degree + 90);
lc08.alpha = otherRad(degree + 105);
lc09.alpha = otherRad(degree + 120);
lc10.alpha = otherRad(degree + 135);
lc11.alpha = otherRad(degree + 150);
lc12.alpha = otherRad(degree + 165);
}

かなり無茶なコード＆本人もちょっと理解不能なのですが、otherRad()という0～1までの数を生成してくれる関数を作って、それをENTER_FRAMEでステージに配置した各MCインスタンス（lc01～ic12）のalphaプロパティに適用させてやります。

無茶なコードだ。

Tweenerの特殊プロパティを設定したことが無かったので、やってみたら色々と知らないことがあったのでメモ。

特殊プロパティを使うにはショートカットのクラスを読み込む必要があるようで、例えばブラー効果のある"_Blur_blurX"を使おうと思ったら、
./caurina/transition/property/FilterShortcutsをインポートして、

FilterShortcuts.init();

と記述する必要がある。

例）ステージに"mc"ムービークリップを配置して。

import caurina.transitions.Tweener;
import caurina.transitions.properties.*;

//これ
FilterShortcuts.init();

start_mc.addEventListener(MouseEvent.CLICK,blurstart);
function blurstart(e:MouseEvent):void {
Tweener.addTween (mc, {
transition:"easeOutCubic",
time:10,
delay:1,//1秒待ってから
_Blur_blurX:100,
_Blur_blurY: 100
});
}

start_mc.buttonMode = true;

サンプル

もちろん特殊プロパティはブラーだけではないので、それ以外はこちらの特殊プロパティ一覧をご覧ください。一覧の作者さんに感謝！