構想雑文

DREAMWEAVER、FLASH、JavaScriptなど WEBデザインとMacに関すること中心の、自分向けメモ主体のブログです。

FLASH

Flash CS4でAndroidアプリを作るための手順

Flash CS4からAdobe AIRの書き出しに対応しているので、一応、コマンドラインを使えば、Androidアプリを作れるという話です。

Flash CS5以降では標準でAndroid for AIRがあるので、それを使えば、一発でAndroidアプリが作れます。ところが、Flash CS4ではデスクトップ向けのAIRはワンクリックで作れますが、Androidは無理です。
でもコマンドライン(ターミナルやDOSプロンプト)を使えば、まぁ、なんちゃってAndroidアプリが作れてしまうという優れもの。

事前に必要なモノ
  • Adobe AIR SDK
  • Android用のAIR設定をしたXMLファイル
  • 証明書ファイル(.p12のファイル)
  • アイコン画像(Android表示用)
  • Androidアプリにしたいswfファイル
Adobe AIR SDKのダウンロード
Adobe AIRは以下からダウンロードします。2013年7月現在バージョンは3.7です。
http://www.adobe.com/devnet/air/air-sdk-download.html

なお、Adobe AIRのバージョンが2.6以降であれば、Androidアプリを作成できます。
CS4を持っている場合は、一度、Adobe AIR 1.5形式で書き出し、その際作成されるXMLファイルを修正してもよいです。

XMLファイルの作成
AIR 3.3以降設定項目が多いので、2.6ぐらいのXMLファイルの記述が楽なので以下にAIR 2.6の場合のXMLファイルの記述例を示します。
赤文字の部分は必要に応じて、修正する部分です。

<?xml version ="1.0" encoding="utf-8" ?>
<application xmlns="http://ns.adobe.com/air/application/2.6">
<id>id名を記載します。com.adobe.example.helloAndroidのようなカタチで記述することが多いです。</id>
<versionNumber>1.0.0 アプリのバージョンを3桁で区切った数字で記載します</versionNumber>
<filename>ファイル名。ディレクトリで表示される名前を記述します</filename>
<description>アプリの説明を記述します</description>
<name>アプリ名。実際にAndroidで表示される名前です</name>
<copyright>著作者名を記載します</copyright>
<initialWindow>
<content>読み込みswfファイル名を記載します</content>
<systemChrome>standard</systemChrome>
<transparent>false</transparent>
<visible>true</visible>
</initialWindow>
<supportedProfiles>mobileDevice</supportProfiles>
<customUpdateUI>false</customUpdateUI>
<allowBrowserInvocation>false</allowBrowserInvocation>
<icon>
<image36x36>アイコンファイル名を記載します</image36x36>
<image48x48>アイコンファイル名を記載します</image48x48>
<image72x72>アイコンファイル名を記載します</image72x72>
</icon>
<android>

<manifestAdditions>

<![CDATA[

<manifest>
この部分は、必要なエレメントだけを記載する 

<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />

<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />

<uses-permission android:name="android.permission.CAMERA" />

<uses-permission android:name="android.permission.DISABLE_KEYGUARD" />

<uses-permission android:name="android.permission.INTERNET" />

<uses-permission android:name="android.permission.READ_PHONE_STATE" />

<uses-permission android:name="android.permission.RECORD_AUDIO" />

<uses-permission android:name="android.permission.WAKE_LOCK" />

<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

</manifest>

]]>

</manifestAdditions>

</android> 

</application>
なお、<android>の部分は記載しなくてもコンパイルできますが、もしもコンパイルしたときに、

Warning: Application has not specified its permission requirements in application.xml

などのエラーが出る場合は、<android>の部分も記述したほうが良いです。

<android>内の<uses-permission>の部分はすべて記述する必要はなく、最低でも一つの記述があれば問題なくコンパイルできます。
詳しくはAdobe AIRのリファレンス「Android の設定」を参考にしてください。


電子証明書ファイルを作成
Adobe AIR SDKをダウンロードし、binフォルダ内にある「adt」「adl」が必要なコマンドです。
証明書は以下のコマンドで作成します。赤字部分を半角英数字で各自設定します。

adt -certificate -validityPeriod 25 -cn SelfSigned 1024-RSA ○○.p12 パスワード

証明書ファイルは、Adobe AIRのファイルを作成するために必要です。パスワードは作成した証明書ファイルのものです。

Androidアプリの作成
swfファイルやアイコン画像ファイルを用意したら、コマンドでAndroidアプリを作成します。
以下のコマンドを入力します。赤字の部分を半角英数字で各自設定します。
Androidアプリの名前には必ず.apkがつきます。

adt -package -target apk-emulator -storetype pkcs12 -keystore ◯◯◯.p12 ◯◯◯.apk ◯◯◯.xml ◯◯◯.swf

もしもアイコンがある場合はアイコンはフォルダを作ってまとめてそのフォルダにいれてください。
たとえば、hello.apkというAndroidアプリをつくるために、setup.xmlとhello.swf、そして証明書ファイルにmycert.p12を用意し、アイコンファイルをicnsというフォルダにいれた場合、以下のようにコマンドを書きます。赤字の部分が設定した部分です。

adt -package -target apk-emulator -storetype pkcs12 -keystore mycert.p12 hello.apk setup.xml hello.swf icns

以上でアプリが完成です。
ちなみにCS4で作成するswfファイルではタップやピンチインなどスマートフォン特有の動作に対応できないので、作れるものはタッチするだけのもの限定になるので注意です。

作成したアプリをAndroidに入れるときは、DropboxやSkydriveなどを使うと便利です。
なお、自作したアプリをAndroidに入れるときは、「設定」の「セキュリティ」の項目で「提供元不明のアプリのインストールを許可する」にチェックが必要です。

Adobe AIRでAndroidアプリを作れるのはあくまでもswfファイルのみです。
HTMLとJavascriptのファイルをAndroidアプリにしたい場合は、PhoneGapなどを使う必要があります。この辺ちょっと注意が必要かも。


そういえば、以前このブログにコマンドまとめ書いててその2をアップし忘れていたことに今頃 気がついた。

Adobe AIR SDKまとめ【コマンド その1】


せっかくまとめたコマンド例、どこにやったかなぁ... 無くさないためのブログになのに...トホホ...


ブログの反応がどれくらいあるか、知りたいので、ランキングサイトに入ってみました。よろしければクリックお願いします。

にほんブログ村 デザインブログ Webデザインへ


Adobe AIR SDKまとめ【コマンド その1】

FlashコンテンツがHTML5とJavaScriptに置き換わりつつあるもののFlashでのコンテンツ制作は何かと面白いです。特にAdobe AIR SDKが最近、個人的に遊んでいます(汗

 Adobe AIR SDK(2012年11月現在バージョン3.5)
http://www.adobe.com/devnet/air/air-sdk-download.html

Adobe AIR SDKのいいところ
  1. デスクトップアプリを作れる
  2. Androidアプリを作れる(Android内にAdobe AIRのインストールが必要)
  3. iOSアプリを作れる(MacとiOS Developer Programへの参加が必要)
  4. Flash(ActionScript)で作ることができる
  5. HTMLとCSSで作ることができる(デスクトップアプリのみ)
とりあえず、Flash覚えていれば、スマートフォンアプリも作れるってことなんで使ってみると良いかも。

ただAdobe AIR SDKを使うときに、Javaが必要になるので、Javaをいれておく必要があります。
そしてAdobe AIR SDKを使うときの最初の難問は、コマンドです。

私は普段Macを使っているので、Macでのやり方をまとめますが
OS Xで Adobe AIR SDKのフォルダをユーザー名hogeの下にあったとしたら、 コマンドは以下のようになります。

/Users/hoge/AdobeAIRSDK/bin/adt
 

上記の例では「adt」がコマンドなんですが、そのままだとフォルダの場所によってはわかりにくい。
なので、.bash_profileに以下のように書いておけばコマンドにadtだけ入力すればOKで大丈夫なようになります。

export PATH=$PATH:/Users/hoge/AdobeAIRSDK/bin/


 Windowsもコマンドプロンプトで同じような感じで設定できるようですが、Windows使ってないので不明です(大汗

ダウンロードしたAdobeAIRSDKのフォルダ のbinフォルダの中には「adl」「adt」2つのコマンドがあります。

「adt」はAdobe AIRアプリやAndroidアプリのインストールファイルを作成する際に使うコマンド
「adl」はAdobe AIRのプレビューを作成するときに使うコマンド

FlashやFlashDevelopを使っていれば、プレビューは簡単なので「adl」を使うことは少ないですが、ASファイルをテキストエディタで書いて、プレビューする場合は「adl」コマンドもお世話になります。

ということで、続きの記事あたりで 簡単なHTMLファイルでデスクトップアプリを作ってみます。



ブログの反応がどれくらいあるか、知りたいので、ランキングサイトに入ってみました。よろしければクリックお願いします。
にほんブログ村 デザインブログ Webデザインへ

[jQuery][ActionScript3.0]Flashのボタンをクリックするとページ内の指定先へゆっくり移動する仕掛け

Flashのボタンをクリックして、ページ内の指定部分にスクロールする仕掛けを作るというやつです。

 →●サンプルはこちら

 ActionScript3.0ではいくつかの方法で、JavaScriptと連携できます。
ただし、JavaScriptと連携させるときは、ローカル環境で確認できません。
かならず、サンプルのように、サーバーにアップロードしないと動作の確認ができません。
ご注意ください。

通常のページ内リンクであればnavigateToURLへそのままアンカーポイント名を指定するという下記のような記述で問題ありません。

var sURL = new URLRequest("#point1");
navigateToURL(sURL,"_self");

jQueryに変数を受け渡すには、navigateToURLに javascript:hoge("#point1")のような記述でもいいんですが、ブラウザによっては、navigateToURLがjavaScriptを実行するまでに遅延が起きて、正しく動作しません。

そこで「ExternalInterface.call();」 を使います。「ExternalInterface.call();」を使うと、ブラウザが異なってもJavaScriptの遅延が発生しないようです。

下記はサンプルに記述した ActionScript3.0です。

import flash.external.ExternalInterface;

//ボタンの定義
s1_btn.addEventListener(MouseEvent.CLICK,s1link);
s2_btn.addEventListener(MouseEvent.CLICK,s2link);
s3_btn.addEventListener(MouseEvent.CLICK,s3link);
s4_btn.addEventListener(MouseEvent.CLICK,s4link);

//各ボタンの処理
function s1link(e:MouseEvent):void{
ExternalInterface.call("flashCLK", "#point1");
}
function s2link(e:MouseEvent):void{
ExternalInterface.call("flashCLK", "#point2");
}
function s3link(e:MouseEvent):void{
ExternalInterface.call("flashCLK", "#point3");
}
function s4link(e:MouseEvent):void{
ExternalInterface.call("flashCLK", "#point4");
}

赤文字の部分が異なるところです。 
「ExternalInterface.call();」内の文字列は、最初の"flashCLK"が関数名で必ず必須になります。
"#point1"は引数で、関数で設定された分、カンマ区切りで引数を記述できます。

実際のjQueryの部分の部分は下記のように記述します。
今回の例では「ExternalInterface.call();」に「flashCLK」という関数名を設定しました。
以下のJavaScriptの関数「flashCLK」は、jQueryのお約束の構文「$(function(){});」に記述しません。


//オリジナルソースコード
var PAGEUPTIME = 1000; //ページがスクロールするミリ秒時間

//Flashが参照する関数
function flashCLK(targetPoint){
var targetOffset = $(targetPoint).offset().top;
$("html,body").animate({scrollTop:targetOffset},PAGEUPTIME,"linear");
}


これで設定終了です。
サンプルを確認したところ、IE5では動作しないようでしたが(汗 それ以外のブラウザでは問題なく動くようです。

まぁ、Flashから動作させる状況って、最近は多くないんですけどね... 一応...。


ブログの反応がどれくらいあるか、知りたいので、ランキングサイトに入ってみました。よろしければクリックお願いします。
にほんブログ村 デザインブログ Webデザインへ

[AcrionScrip2.0]XMLなどのテキストデータを連続で読み込むためのソース

普通は事前にPHPやらPerlやらで一つのファイルにしたあとのほうが楽だと思うのですが、ActionScript 2.0で同じようなXMLファイルを連続して読み、あとでまとめて処理するためのソースです。

XMLの他にもテキストデータなら、このソースで応用できます。
以下のソースは、事前に読み込んでおくファイルを配列で用意し、一つのファイルが読み込み、処理が終わったら、次のファイルを読み、指定された回数同じ読み込み作業を繰り返すというソースです。

以下ソースです。ActionScript2.0です。

//読み込むファイルリスト
var sche = ["schedule1.xml",
"schedule2.xml",
"schedule3.xml",
"schedule4.xml",
"schedule5.xml",
"schedule6.xml",
"schedule7.xml",
"schedule8.xml",
"schedule9.xml",
"schedule10.xml"
];

var scheList = new Array(); //読み込んだXMLオブジェクトを入れる配列
var sXML:XML = new XML(); //XMLを読み込む定義
var i =0;

//XMLの読み込み処理部分
sXML.onLoad = function(success:Boolean) {
if(success){
 trace("読み込みファイル"+sche[i]+" "+i);
 scheList.push(sXML);

//次のXMLファイルの読み込み処理
 if(sXML.loaded){
  if(i<9){
   i++;
   sXML.load(pass+genre[i]);
  }
 }

} else {
 trace("読み込み失敗 もしくは読み込むファイルがありません");
}
};

//XML読み込み
sXML.ignoreWhite =true;
sXML.load(sche[0]);


このソースの問題点は、ファイルサイズが大きかったり、ファイルが増えたりすると処理が遅くなることです。なので、あまり実用的ではありません。
まぁ、苦肉の策なんですが(汗

久しぶりに、ActionScript2.0を書きましたが、なんとなく、ActionScript2.0のほうがお気楽です。
プログラムはそんなに得意ではないなぁ、という人向けだよね、と改めて思いました。
でも今からActionsScriptを学ぼうとしても書店には、ActionScript3.0の本しかないので、2.0ってなんですか? って言われそうで怖いですが、、、、(汗


ちなみに今、もしもActionScript3.0を学ぶにはどの本がお薦めですか? と聞かれたら、下記の本をお薦めします。特に「速習Webデザイン ActionScript 3.0」は、CD-ROMで素材がついているので、特にお薦めです。

速習Webデザイン ActionScript 3.0速習Webデザイン ActionScript 3.0
著者:林 拓也
販売元:技術評論社
発売日:2008-08-13
おすすめ度:5.0
クチコミを見る

基本からしっかりわかるActionScript 3.0 (Web Designing BOOKS)基本からしっかりわかるActionScript 3.0 (Web Designing BOOKS)
著者:森 巧尚
販売元:毎日コミュニケーションズ
発売日:2009-07-14
おすすめ度:4.0
クチコミを見る

標準ActionScript 3.0入門標準ActionScript 3.0入門
著者:吉岡 梅
販売元:ソフトバンククリエイティブ
発売日:2009-01-30
おすすめ度:4.5
クチコミを見る



ブログの反応がどれくらいあるか、知りたいので、ランキングサイトに入ってみました。よろしければクリックお願いします。

にほんブログ村 デザインブログ Webデザインへ

[書評]ActionScript 3.0辞典

個人的にようやく待ち望んでいたリファレンス本だったので、「.fla 2」と一緒に即買いしました。

翔泳社から出ていた前の「FLASH ActionScript辞典 第2版」がA5版サイズと小さいサイズなのはよかったんですが、文字が小さくて、あまり目に優しくない色だったので、今回は改善されているだろうと思ったら、確かに、若干、文字の大きさは変わっているようですが、目には優しくはない部分は変わっていません。

この「ActionScript 3.0辞典」を私個人が購入した理由のは、巻末の命令のインデックスです。

前回も探しきれたわけではないが、他のリファレンス本は、巻末の目次しかないため、「この命令に用意されている命令って、どういうのだっけ?」と思ったときに調べにくいのだけど、この本は、命令ごとに用意されている命令をおえるインデックスが巻末につくので、その部分をめくりながら、命令の使い方を深められるという点でも良いと思う。

そして、前回同様、大きさも邪魔にならないA5サイズぐらいなので、場所も取らずに、常に作業机の上においたままにして、重宝しそうです。

ActionScript 3.0辞典 [FlashPlayer10/9対応]ActionScript 3.0辞典 [FlashPlayer10/9対応]
著者:伊藤 のりゆき
販売元:翔泳社
発売日:2009-11-17
クチコミを見る

ブログの反応がどれくらいあるか、知りたいので、ランキングサイトに入ってみました。よろしければクリックお願いします。

にほんブログ村 デザインブログ Webデザインへ

[書評]ActionScript 3.0 エラーアーカイブス コンパイルエラー・コンパイラ警告・ランタイムエラーの解法

ActionScript 3.0 エラーアーカイブス コンパイルエラー・コンパイラ警告・ランタイムエラーの解法
ActionScript 3.0 エラーアーカイブス コンパイルエラー・コンパイラ警告・ランタイムエラーの解法
クチコミを見る

 

誰がこんな本買うんだよ(笑)

と思いながら、立ち読みして結局買っちゃったという本(汗)

たぶん、ActionScript3.0をプログラムしてて、エラーがでても、この本に書いてあるほとんどのエラーに遭遇する可能性が低いような気がします。立ち読み時点で「こんなエラー知らないぞ(汗)」というのばかりで、本当に役立つ日が来るのか、これ? と思いながらも買ってしまおい、ちょっと後悔しています。

どのプログラム言語でもそうですけど、何かプログラムしていて、エラーが表示されたときに、そのエラーの意味と対応方法がわからないと、作業は止まってしまうわけですが、こういう本は便利です。

しかも、エラーの出し方と対応方法が書いてあるので「こういう感じのプログラム箇所をどこかに書いているのはず」とエラーを探して、対処をすぐできそうなところが便利そうだなぁ、と現在のところ、思っている次第です。

ただ本当に ちょっと心配なのは、初めて遭遇するエラーで、この本を見て解決っていう流れが本当にできるのか ってことと、 果たして、この本で初めて見たエラー(?)を出すレベルな人(??)になれるのか自分 ってことです。

まぁ、講師として(Flashを)人に教えたりするので、受講される方のプログラムの出すエラーの原因を調べるときに使えるとは思っていますけど。

あと、この本の内容を、そのまま検索できるサービスが、ネットでもAIRでもいいからあると便利なのになぁ、、、。

 

 

ブログの反応がどれくらいあるか、知りたいので、ランキングサイトに入ってみました。よろしければクリックお願いします。

にほんブログ村 デザインブログ Webデザインへ

[書評]Adobe Flash CS4 詳細!ActionScript3.0入門ノート[完全改訂版]

ブログネタ
おすすめの本 に参加中!

Adobe Flash CS4 詳細!ActionScript3.0入門ノート[完全改訂版](CD-ROM付)
Adobe Flash CS4 詳細!ActionScript3.0入門ノート[完全改訂版](CD-ROM付)
クチコミを見る

CS3のころに発売した「 Adobe Flash CS3 詳細! ActionScript 3.0 入門ノート」「 Adobe Flash CS3 詳細! ActionScript3.0入門ノート2 」を新たに作り直した本でいいんですよね? どこらへんが改訂版なんだ? と「?」が最初にたくさんつくくらい内容が変わっています。

前作の2冊には、ソースを細かく見ないと、何がどうなっているんだよ?(泣) というと箇所が多く、入門書なのに、内容は中級者以上な本でした。

ところが、前回の反省かどうかわかりませんが、
今回の「Adobe Flash CS4 詳細!ActionScript3.0入門ノート[完全改訂版]」では、(以前の2冊に比べてると)一つ一つ丁寧に説明しているので、この本以外に2冊くらい入門書をこなしてから  ActionScript 3.0をより理解してこれから中級者以上になるぞ! 意気込みの人に特にお薦めしたい内容になってました。
※個人的には、CD-ROMにソースコードが入っているのがうれしいところです。授業の教材として、楽に使えます。

作者の大重さんのウェブサイトでは、書籍の内容をもっと優しいサンプルと文章でサポートしていたり、訂正もしていたりしますので、本と一緒に合わせてチェックすることをお薦めします。

oshige index
http://oshige.com/

でも、ActionScript3.0をこれからやります! っていう本当にはじめてはじめる人には、この本むきません。
本当に初心者の人に 私がお薦めしたいのはこの2冊ですかね。

以下の2冊のあとに、自分でつくりたいFlashコンテンツを考えながら(←これが大事!)「Adobe Flash CS4 詳細!ActionScript3.0入門ノート[完全改訂版]」を読めば、現時点では、ある程度のflashコンテンツが作れてしまいそうな気がしています。


初心者にお薦めの2冊。

基本からしっかりわかるActionScript 3.0 (Web Designing BOOKS)
基本からしっかりわかるActionScript 3.0 (Web Designing BOOKS)
クチコミを見る

この本でActionScript 3.0って、何ができるんだろ? っていうのが、理解できると思います。

次に、以下の本でウェブコンテンツの作ることを通して、理解すると、ActionScript 3.0の書き方のルールや、できること、できないことがわかってくるような気がします。

速習Webデザイン ActionScript 3.0
速習Webデザイン ActionScript 3.0
クチコミを見る


ブログの反応がどれくらいあるか、知りたいので、ランキングサイトに入ってみました。よろしければクリックお願いします。

にほんブログ村 デザインブログ Webデザインへ

[書評]Flash Liteで作る携帯コンテンツ実践教科書

ブログネタ
おすすめの本 に参加中!

夏は講師の仕事も一段落なので、ちょっとスキルを高めましょうということで、本を物色していると、今月はたくさん、良さげな本がでてますね(汗

Flash Liteで作る携帯コンテンツ実践教科書 (Web Designing BOOKS)
Flash Liteで作る携帯コンテンツ実践教科書 (Web Designing BOOKS)
クチコミを見る

4月前後、Flash Liteのコンテンツ制作をしたんですが、その際、困ったのが各携帯キャリアの機種でどのバージョンを採用しているのかとか、画面の大きさはどれくらいが良いのか、文字の大きさはどれくらいが適当かなどのという情報が少ないことでした。

この本では、各docomo、au、Softbank各携帯キャリアのFlash Liteのバージョンごとの仕様がまとまっているので、これだけでもFlash Liteでコンテンツ作成をする人は買っても良いと思います。

この本では、Flash Lite1.1で制作の仕方でまとめているんですが、Flash/Flash LiteでActionScriptを使って制作した人なら、理解できる内容です。

この「Flash Liteで作る携帯コンテンツ実践教科書」は、初めてFlash Liteコンテンツを始めるひと向きではないと思いますので、ActionScriptって何? プログラムって何? の人にはお薦めしません。

内容も基本的な「待ち受け」からはじまって、おみくじや携帯コンテンツのメニュー作成の例などよくよく携帯コンテンツでありそうなものばかりなので、参考になります。

あと個人的には、この「Flash Liteで作る携帯コンテンツ実践教科書」の最後にまとめられたトラブルシューティングは大変勉強になりました。

しかし、個人でFlash Liteコンテンツ作成は難しいですね。Device Centralで確認はオマケで、やはり実機で確認したほうが安全だとつくづく思います。私個人で仕事しているため、さすがに携帯電話3台保有するのは厳しいので、複雑なモノには挑戦できないよねぇ〜 なんて 改めて思ってしまいますが(汗

Flash Liteで作る携帯コンテンツ実践教科書 (Web Designing BOOKS)
Flash Liteで作る携帯コンテンツ実践教科書 (Web Designing BOOKS)
クチコミを見る


ブログの反応がどれくらいあるか、知りたいので、ランキングサイトに入ってみました。よろしければクリックお願いします。

にほんブログ村 デザインブログ Webデザインへ

[Flash]WindowsとMacで作業中、小塚ゴシック体、小塚明朝体の行間が異なる

Flashで 小塚ゴシック体、もしくは 小塚明朝体をテキストを使うと、MacとWindowsで静止テキストのときに、行間に違いがあることに気がつきました。
※文面は気にしないでください‥‥。

これがMacの表示

Macの場合

これがWindowsの表示

Windowsの場合

共同で作業するとき、OSが異なっても、フォントや色彩の管理が極力、共有できるようにするわけですが、Flashで小塚ゴシック体、小塚明朝体を使うと、微妙に行間がづれるようですので、注意が必要です。

なお、ダイナミックテキスト、テキスト入力のときはこの行間のずれはでません。そして、静止テキストでも「デバイスフォントを使用」にすれば、行間のズレはなくなります。

MacとWindowsで同じ行間に設定してもMacのほうが15pxぐらい余計に広く表示されるようです。

ちなみにメイリオや、TureType系の平成ゴシック体など他のフォントも行間の違いを確認しましたが、ほとんど違いはありませんでした。

小塚ゴシック体、小塚明朝体は同封されているフォントで、Mac版、Windows版どちらでも使えますが、この行間にはちょっと注意したいところです。

[書評]プロとして恥ずかしくないActionScript3.0の大原則

ブログネタ
コンピュータサイエンス全般 に参加中!

プロとして恥ずかしくないActionScript 3.0の大原則 CS3/CS4対応版 (インプレスムック エムディエヌ・ムック)
プロとして恥ずかしくないActionScript 3.0の大原則 CS3/CS4対応版 (インプレスムック エムディエヌ・ムック)
クチコミを見る

「プロとしてはずかしくないシリーズ」の久しぶりの新刊。

このシリーズは、個人的に広く浅くの内容だと思っています。
今回の「プロとして恥ずかしくないActionScript3.0の大原則」も広くあさく、これからActionScript3.0を勉強したいけど、どんなことができるのかをまずは押さえておきたい人にお薦めです。

前半のAcrionScript3.0の基礎の部分はわかる人向けにえらくあっさり書いている印象でした。これからAcrionScript3.0をはじめる人は第3章以降のソースと表示結果を見て「こういうことができるようになるのかー、これで何をしようかな?」と目標設定に読むといいのではないかと思います。

なお、この本では、ソースが出版社のページからダウンロードできるようになっています。
※説明されているコンテンツごとなので、ダウンロードが面倒ですが(汗


そういえば、考えてみると、FlashCS4から搭載された機能(3Dやインバースキネマテックなど)でアニメーション部分を作成したあとに、ActionScriptを追加しよう、とすると必然的にAcrionScript3.0を使うしかありません。

AcrionScript2.0がメインだったころにはビヘイビアで簡単に追加ができましたし、ちょっとした間違いでもなんなく動くので、アニメーション制作を中心にしている人でもAcrionScriptはそんなに敷居が高いものでもなかったんですが、急にCS4から(AcrionScriptを使うための)敷居が高くなったような気がします。

そういう意味でこの本に最低限しておくべきAcrionScript3.0の作法とかの章があってもよかったのになぁ、と思ったんですけど、そういう内容はないので、ちょっと残念です。

[AS2.0]マスクが適用されたムービークリップ内のダイナミックテキストに外部テキストを表示させるには-その2-

以前 書いた「[AS2.0]マスクが適用されたムービークリップ内のダイナミックテキストに外部テキストを表示させるには」の続きの記事です。

this.text_mc.setMask(mask_mc);

を使うことで、マスクがかかったダイナミックテキスト部分に、外部から読み込んだテキストデータを表示できるようになりますが、注意があります。

わかりづらいですが、以下のような場合です。

元のswf(ここにマスクあり) <- loadMovieで読み込まれたswf <- このファイルのダイナミックテキスト部分に読み込まれるテキストデータ

swf読み込み説明図
それぞれ試しにファイルを用意します。
※説明を簡素にするために余計なソースやオブジェクトは配置しません。

swf読み込み説明図差し替え


外部のSWFファイル「inframe.swf」をマスクをかけたtext_mcに読み込ませます。ActionScript2.0で次のように記述します。

this.text_mc.loadMovie("inframe.swf");
this.text_mc.setMask(mask_mc);

inframe.swfは次のような中身です。とりあえず、ダイナミックテキストの部分に外部テキストデータを読み込むようにまだしていません。

swf読み込み説明図3

では、上記のファイルを読み込んだ結果です。
わかりにくいので、マスクの部分をオレンジ色にして書き出し直しました(汗)ようは、マスクの部分のオブジェクトの色が表示されて、マスクそのものが再現されません。
※読み込んだswfファイルも右下にずらしています。

swf読み込み説明図4

これはこまったぞ、ということで、検索をかけてみると以下の記事が参考になります。

デバイスフォントが表示されない(Flash : テクニカルノート/FumioNonaka.com)
http://www.fumiononaka.com/TechNotes/Flash/FN0502002.html

テキストフィールドにマスク(にゃあプロジェクト)
http://www.project-nya.jp/modules/weblog/details.php?blog_id=415

ということで解決策は以下です。
まず、外部swfファイルを読み込むソースの部分を次のように変更します。

this.text_mc.loadMovie("inframe.swf");
mask_mc.cacheAsBitmap = true;
text_mc.cacheAsBitmap = true;

this.text_mc.setMask(mask_mc); は、削除し代わりにこの例では mask_mc.cacheAsBitmap = true; とtext_mc.cacheAsBitmap = true;を追加しました。
これでマスクは正しく読み込まれます。

推測ですがムービークリップに外部swfを読むと、その読み込むムービークリップに対してのsetMaskが無効になるようです。

それが、マスクするほうとマスクされるほうの両方にcacheAsbitmapを適用することで、読み込んだswfファイルの中にある正しくダイナミックテキストの部分が表示されるようになります。

意外とはまりそうなワナですね。では、AS3.0ではどうなのか、ちょっと検証してみたいと思います。

[AS2.0]マスクが適用されたムービークリップ内のダイナミックテキストに外部テキストを表示させるには

FLASHでマスクをかけたムービークリップ内にあるダイナミックテキストの文字列がうまく表示されません。

下記図は、ダイナミックテキストのあるムービークリップにマスクをかけた状態のものです。

マスクをかけたムービークリップ

静止テキストであれば、問題ありませんが、外部ファイルから文字データを読み込むときには、ダイナミックテキストを使わざる得ませんので、ちょっと悩ましい問題です。

ムービープレビューで確認すると、ダイナミックテキストは表示されません。

マスク内のダイナミックテキストが表示されない

ActionScriptがよくわからない場合は「埋め込みフォント」使うことで解決できますが、SWFのファイルサイズが最低でも10倍は大きくなるので、この解決方法はお勧めできません。

この状態は、Actionscriptの「setMask()」を使うとすぐに解決します。

設定は以下です。

  • マスク部分:ムービークリップ(この例では、インスタンス名をmask_mcにします)
  • マスクされるムービークリップ部分:ムービークリップ(この例では、インスタンス名を「text_mc」とします)

Actionscriptはタイムライン上に記述します。
上記のインスタンス名の場合は、以下のように命令を書きます。

this.text_mc.setMask(mask_mc);

以上、これだけで解決です。

なお、ActionScript3.0では以下のように書きます。

this.text_mc.mask = this.mask_mc;

ダイナミックテキストのある箇所へのマスクは、結構注意が多いので、気づいたら、また記事にまとめたいと思います。

この記事には以下の続きの記事があります。合わせてどうぞ。

[AS2.0]マスクが適用されたムービークリップ内のダイナミックテキストに外部テキストを表示させるには-その2-

ActionScriptで数学・物理表現を学ぶのに最適な「Flash Math & Physics Design」

Flash Math &amp; Physics Design:ActionScript 3.0による数学・物理学表現[入門編]

Flash Math & Physics Design:ActionScript 3.0による数学・物理学表現[入門編]

クチコミを見る


この本は、ほかの本を探していて偶然に見つけた一冊。

C言語で書かれた数学・物理表現のプログラム解説の本は多くあったけど、ActionScriptで、日本人が解説している本はこの本がはじめてだと思う。

Flash CS4では、ツールウィンドウでAS3.0でプログラムしなくてもある程度の物理表現ができるようになっているが、やはり、面白いトリッキーな動きや自然の動きをFlashでやりたいときは、ActionScriptは必須なので、こういう本があるとありがたい。

しかし‥‥‥「なんでこのスクリプトになるのか?」「なんでこういう書き方や宣言をするのか?」という説明が物理や数学の公式そのものがこの本に書かれていないので、図解されていても「なんでこの書き方?」という理解を自分で調べて考えないといけない箇所が何カ所かあるので、この本一冊では、応用のスクリプトを組むのが難しいと思う。

数学や物理をある程度理解している人、または、多言語で、それなりに公式で物理表現をやったことがある人がActionScriptで組む場合に参考にしたい一冊だと思う。

この本があれば_level0.KAYACが運営する「Wonderfl Build Flash Online」に投稿されたソースを理解できるきっかけになるかもしれません。

そして、この本のタイトルに「入門編」とついているので、次の本もでるのかなー とちょっと期待。

とりあえず、「Flash Math & Physics Design:ActionScript 3.0による数学・物理学表現[入門編]」は長い休みや時間があったときにじっくりと理解したい一冊です。

速習Webデザイン ActionScript3.0

速習Webデザイン ActionScript 3.0
速習Webデザイン ActionScript 3.0

ActionScript3.0学習の本もいくつかでてきて、を教えることになり、最終的にテキストに使おうと決めた一冊。

この本にした理由は、素材CD-ROMが付いていたからなのだけど、初心者中級者向けには、個人的には、やはり素材がすぐに使えるCD-ROMなどのメディアがついていたほうがいいと思う。

選択肢には「一週間でマスターするActionScript 3.0」も考えたのですが、素材CD-ROMがないので、やめてしまった。

この本の特徴は、章立てになっていて、かつ章の途中途中で学習したことの復習箇所があるので、自分がどこまで理解しているのか、自己分析しながらできるのがいいところだ。

でも、読み進めて思ったのは後半(とくに最後のところ)は文章を読み、ソースを見ても「なんでこうなるの?」と疑問が解決できない箇所がでてくるので、後半は消化不良気味になるかもしれない。

それでも、この本でActionScript3.0で押さえておくべき初歩的な箇所は学習できそうなので、お薦めではある。

あと、やっぱりこの本の他に、命令のリファレンス本が一冊欲しいところです。

速習Webデザイン ActionScript 3.0
速習Webデザイン ActionScript 3.0

Adobe CS4発表〜Flashはアニメーション作成部分が進化しています!

Adobeのアメリカ本国では、「Adobe CS4」が10月に発売されることがアナウンスされています。

10月中に発売するよ、ってことなんでしょうけど、βですでにだいたいの概要がわかっていたDreamweaverとFireworks、SoundBoothに対して、他の製品がどうなっているのか興味があったので、早速確認してみました。

噂レベルではFlashのアニメーション作成部分が変わるというのは前からでていましたが、「FlashCS4」の概要を見る限り、これまでの作り方とはまったく異なる、Flashという名の別の名前の印象を受けてしまいました。

FlashCS4の新機能紹介のページからこれは明らかに変わった!というところを抜粋すれば

  • これまでのモーショントゥイーン、シェイプトゥイーンの作り方と違いみたい
  • 3Dオブジェクトのアニメーションの動きが簡単に作成できるみたい
  • ボーン機能で、人とか動きを簡単に作れるみたい
  • アニメのモーションを記録して使え回せるみたい
と、詳細を読み込んでないので全部「みたい」でまとめていますが(汗 この部分だけでもこれまでのFlashと違います。
製品版を試せないので、今のところ憶測ですが、個人的にちょっと残念に思ったのは、どうも プロジェクトの部分でsubversionに対応してなさそうなところでしょうか。
Dreamweaverは対応したんだから、Flashもプロジェクトを使うときに、subversionが使えると複数の人で作業を進めるときに、バージョン管理できてよかったんだけどなぁ〜‥‥‥と個人的に思っていますが‥‥‥

あと、PhotoshopとIllustratorはよくわからない機能が追加されていますね‥‥‥、これは各情報サイトの詳細記事を待ってどういうものかを確認したいと思います。

1週間でマスターするActionScript3.0

一週間でマスターするActionScript 3.0 for Windows & Macintosh

個人的に後期日程の授業でActionScriptも扱うので、何かわかりやすい入門書はないか、と探しているときに手にした一冊。

文章量も多くなく、金曜日にあたる「オブジェクトを理解する」項目を除けば、ActionScript3.0をこれから覚えたい、プログラム初心者にはわかりやすい内容だと思う。

ただ素材はダウンロードしないといけないので、すぐにサンプルをどうこう‥‥とできないのが痛いですが、そもそも、この「一週間でマスターするActionScript 3.0」は学習向けにはちょうどいいんですが、本に載っているサンプルを、仕事にそのまま使えないので、仕事で急いでActionScript3.0で何か作るで、サンプルみたいに使いたい‥‥‥という人は、他の本を探したほうがいいです。

授業で使うには、もうちょっと補足は必要だと思いますが、教科書にするにはいいと思います。

一週間でマスターするActionScript 3.0」は入門の読み物としても読みやすいので最初のとりかかりにはお薦めですが、本当にActionScriptを習得するためには、もう一つ、実際のサンプルがたくさん載っていて、わかりたすい解説が書いてある本が欲しいところです。

一週間でマスターするActionScript 3.0 for Windows & Macintosh

FLASH CS3ユーザーガイドを購入

個人的にこの夏は本腰をいれて、FLASH CS3を勉強しなおしています。

色々な書籍でActionScript3.0については理解しているつもりなのですが、恥ずかしいことに、本家本元のユーザーガイドは読んだことがないので、まずはアドビシステムズ社のホームページからPDFになったFLASH関連のドキュメンテーションをダウンロードしました。

Adobe - ヘルプリソースセンター
http://www.adobe.com/support/documentation/jp/

ダウンロードしてわかったのですが、FLASH CS3のユーザーガイドだけで500ページ以上ありました。ちなみにActionScript3.0のものだけでも700ページ以上あります(汗

では早速読むぞ〜 と気合いを入れて読みはじめたのですが、どうもよみにくい。

DreamweaverやFireworksのユーザーガイドとは比にならないくらいFLASHのユーザーガイドとリファレンスが(なぜか)読みにくい。

一瞬プリンターで印刷も考えたのですが、さすがに500ページ以上は厳しいな、と思い、アドビストアで購入することにしました。

アドビストア
http://www.adobe.com/go/gntray_store_jp

アドビストアの「ユーザーガイド」に各種ユーザーガイドはそろっているのですが、残念ながら、ActionScript3.0のリファレンスをはじめとしたリファレンス系がなく、Flash CS3はユーザーガイドのみが販売されていました。

FLASH CS3ユーザーガイドが1,260円。
たぶん、プリンターで印刷するよりは安いのではないかと。

ユーザーガイドで新たに覚えたことは改めて、まとめたいと思います。

Dreamweaverテンプレートに埋め込まれたFLASHがうまく更新されないときの対処法

Dreamweaverのテンプレートファイル(拡張子.dwtのファイル)にFLASHコンテンツ(拡張子.swf)を埋め込んだも のを編集し、そのテンプレートで作成したファイルに更新をかけると、テンプレートに埋め込んでいるFLASHファイルがうまく表示されなくなることがあり ます。

この原因はFLASHを表示させるためのJavaScriptのソースコードの部分がテンプレートのものからうまく変更できないためです。

FLASHを埋め込んだテンプレートファイルを更新しても問題なく、更新できるようにす るための対処方法は全部で3つぐらいだと思いますので、まとめておきます。


その1の方法:FLASHコンテンツの部分も「編集可能領域」にしてしまう。

この方法が一番 楽です。
私はよくこの方法で対応しています。

FLASHコンテンツを埋め込んでいる部分を 「編集可能領域」しておくのがなんだかんだで楽です。
ただし、編集可能領域にしてしまうと間違って削除することもあるかもしれません ので、注意してください。


その2の方法:javascriptのタグを削除してしまう。

あまりこの方法はよくないかも しれません。
でも2008年4月以降はActiveXの例の問題は解決しているはずですので、XHTMLのstrictでコーディン グしてない限りは、別にこの方法でもいいんじゃないかなぁ、と私個人は思っています。

なお、この方法にするとテン プレートファイル(拡張子.dwtのファイル)を開くたびに「アクティブコンテンツの変更‥‥‥」とかいうメッセージウィンドウが表示されますので「いい え」を選択してください。

また、プレビューでも、一部のインターネットエクスプローラーでは「このコントロールを アクティブにするにはクリックしてください」と表示されるようになりますので、メニューにFLASHを使っている場合は利用者に優しくないです。

では以下、手順。

  1. Dreamweaverで、テンプレート ファイル(拡張子.dwtのファイル)を開き、画面はコードビューにします。
    以下のコードの部分を探し、削除します。

    <script src="../Scripts/AC_RunActiveContent.js" type="text/javascript"></script>

    ※AC_RunActiveContent.jsというファイル名を指定したコードの部分を探すといいです。
  2. 以下のコードの部分も削除します。

      <script type="text/javascript">
    AC_FL_RunContent( ...<略>... ); //end AC code
     </script>


    ※ ...<略>... の部分は長いので省略しました。
  3. <noscript>と</noscript>タグを削除します。

なお、間違っても<noscript>の間の<object>の部分は削除しないでください。これを削除するとFLASH が表示されなくなります。


その3の方法:FLASHコンテンツを表示するJavaScriptのソースコードを外部ファイルにする。

以下の手順で行います。

  1. 以下のコードの部分を探します。

     <script type="text/javascript">
    AC_FL_RunContent( ...<略>... ); //end AC code
     </script>


    ※ ...<略>... の部分は長いので省略しました。
  2. AC_FL_RunContent( ...<略>... ); //end AC code の部分をコピーして、別ファイルに貼付けます。
  3. AC_FL_RunContent( ...<略>... ); //end AC code の部分を貼付けたファイルを保存します。
    ※ファイルが行方不明にならないように、 「AC_RunActiveContent.js」と一緒のフォルダ内がいいと思います。
    ファイル名は、拡張子.jsがついていれ ば、どういう名前でもいいです。ここでは例として、flashconts.js という名前で保存したとします。
  4. 以下のコードの部分を

     <script type="text/javascript">
    AC_FL_RunContent( ...<略>... ); //end AC code
     </script>


    次のように変更します。

     <script type="text/javascript"
     src="../script/flashconts.js"></script>


    ※表示が収まらないので、属性srcの前で改行していますので、ご注意。
  5. また、さきほど 保存したflashconts.jsというファイルを変更します。
    例えば、サイト定義したフォルダのルートにあたる部分(つまり 「/」で表示されるところ)にFLASHコンテンツの名前がtest.swfで保存されているのならば コピーしたソースは以下のようになっていると思い ます。

    AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0',
    'width','550','height','400','src','../test','quality','high','pluginspage',
    'http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash',
    'movie','../test' );
    //end AC code


    ※表示が収まらないので適当におりかえしてます。
    このソースの ../test の部分(ここは、挿入しているFLASHコンテンツの名前で変わりますので、ご注意)を サイト定義 のルートからの絶対パスに書き換えます。
    説明の例では、/test と修正すればOKです。< br>※作成しているFLASHコンテンツの場所に注意。
以上で作業は終わりですが、これだと困った ことに(理由は省略しますが)パソコンでHTMLを確認するとFLASHの部分は表示されません。

必ず、 http://から始まるURLに確認するファイルをアップロードして確認するようにしてください。


以上で3つの方法の説明は終わりです。

他にもDreamweaverと、標準的な機能を使って回避する方法があるかもしれませんので、研究するといいかもしれません。

フリーウェアのFLASH逆コンパイラ Flare

この間、googleの「ratproxy」をインストールしたときに、一緒に入っていた逆コンパイラーソフトウェアのFlare。

本当は以下のウェブサイトで入手します。

no|wrap.de - Flare
http://www.nowrap.de/flare.html

FlareはActionScriptの抽出だけに特化したflashの逆コンパイラのようで、ホームページによると、Flash MX 2004とFlash8の(つまりはActionScript2.0までということでいいんでしょうかね?)ActionScriptが独自の拡張子「flr」をつけたテキストファイルで抽出されます。

本当にプログラムのソースコードだけ知りたい人には使えそうな感じです。

Windows、Mac OS Xのアプリ版があり、実際試してみると、ドラッグ&ドロップで、見事にActionScriptだけを取り出せました。

でも、Flash内のActionscriptが全部、一つのテキストにまとまっているわけなので、ソースレビューみたいなときは便利だと思いますが、ソースコードを見て勉強するみたいな、使い方はちょっと向かなさそうです。

とりあえず、ソースコードみたい! という人向けにお薦めのソフトウェアですけど。

no|wrap.de - Flare
http://www.nowrap.de/flare.html

SWFを解析するソフト「フラッシュデコンパイラー トリリックス」がact2から発売

以前の記事で(株)AHSが新しいSWF解析ソフト「Motion Decompiler 2」を紹介したんですが、VMWAREを販売しているact2からSWF解析ソフト「フラッシュデコンパイラー トリリックス」というソフトが販売されています。

フラッシュデコンパイラー トリリックス
http://www.act2.com/products/flashdecompiler/

Motion Decompiler 2」もそうですが、100%swfからfla形式に逆コンパイルを保証するものではありません。その点は注意してください。

act2のサイトでは、「フラッシュデコンパイラー トリリックス」の特長を以下のように紹介しています。

  • 完全なFlash9をサポート
  • ActionScript3.0をサポート
  • AS3ベースのコンポーネントサポート
  • SWFに埋め込まれたオブジェクトの抽出
  • 簡単な設定によるFLA形式に逆コンパイル
  • 50以上のオプションによる高品質な変換

最後の「50以上のオプションによる高品質な変換」が気になったので「フラッシュデコンパイラー トリリックス」の体験版をダウンロードして試してみました。

確かに書き出す前に、色々と設定がいじれるようです。これがきちんと機能するか、いくつか手元にあったファイルで試してみましたが、よくわかりませんでしたが、使いこなせれば、かなり使えそうなソフトではあります。

「Motion Decompiler 2」も「フラッシュデコンパイラー トリリックス」も体験版がありますので、購入したい方は、まず体験版を試してからをお薦めします。

私の使用感は以下なような感じです。両方とも体験版だとあまりにも制限が多くて、よくわからないなぁ〜って印象です。

ちなみに私の個人的な感想では「Motion Decompiler 2」がいいかなぁ、と思っていますが、あくまでも個人的な主観なので、体験版から必ず試してみることをお薦めします。

「Motion Decompiler 2」
http://www.ah-soft.com/md/index.html

良い点:

  1. 近くの量販店とネットでは、ベクターPCショップでも購入できる。
  2. ウィンドウズ版はライブラリにある画像がサムネールで表示される。
  3. 変換前に内容をある程度内容をみることができる

悪い点:

  1. 画像や音声だけを抽出する抜き出す方法が体験版ではわからない(製品版もわからなさそう‥‥)
  2. ライブラリがオリジナルの内容とまったく配置が変わってしまう。
  3. 30日限定の体験版なら、全機能を普通に使わせてほしい(体験版が中途半端すぎて困る‥‥)
  4. ソフトの起動が遅い。

フラッシュデコンパイラー トリリックス
http://www.act2.com/products/flashdecompiler/

良い点:

  1. Motion Decompiler 2と比べると起動がかなり速い
  2. 画像や音声だけを確実に抽出できる(ようだが、体験版では制限があって、どこまでできるか不明‥‥)
  3. 逆コンパイルする前に、細かい調整ができる(ようだが、体験版ではイマイチ不明‥‥‥)
  4. 機能制限はかなり多いが、体験版には使用期限がない。

悪い点:

  1. 2008年7月27日現在、act2ストアでしか購入できない。
  2. インターフェイスに癖があるので慣れるまで時間がかかりそう。
  3. 画像や音声だけを抽出できるが、どういうものが抽出されるかすべてを事前に確認できない
  4. ライブラリがオリジナルの内容とまったく配置が変わってしまう(これは「Motion Decompiler 2」も同じだしね)

良い点・悪い点を比較するとなんかどっちもどっちだなぁ〜‥‥‥。

両方ともFlash CS3までのActionScript3.0には対応しているようですので、色々便利ではあるんですけど。

FLASHコンテンツがもっと検索エンジンにインデックスされるの?

アドビが7月3日にプレスリリースで「アドビ システムズ社、Web上のリッチメディアコンテンツの検索結果を改善 (PDF: 103k)」というお知らせをだしてました。

これについて、Googleの開発者ブログのひとつ「Google Webmaster Central Blog」にこのことについて、書いた記事があります。

さすがに英語を読むのはしんどいと思っっていると「coliss(コリス)」の以下の記事に翻訳がありました。

GoogleにインデックスされやすいFlashコンテンツを制作するには|コリス
http://coliss.com/articles/seo/output/1249.html


もうひとつ。
Adobe Developer connectionに次のような記事がでています。

SWFコンテンツ検索に関するFAQ
http://www.adobe.com/jp/devnet/flashplayer/articles/swf_searchability.html

この記事の要約するとこういうことだと思う。

  • 制作者はとりあえず、SEOを気にせず、これまで通りに制作すればいい
  • アドビは、google、Yahooなどの検索で、Flashがもっと最適に検索にひっかかるように技術情報を提供している
  • すでにGoogleはこの技術情報を生かして、Flash検索の強化が行われている。Yahooもこれから始まる
  • ちなみに従来「検索エンジンはSWFファイル内の静的テキストやリンクの情報をインデックスする」ことができた。
  • 従来はFlash内の動的コンテンツ部分は、コンテンツ内容が変動するため、検索にインデックスすることが困難だったけど、今後はこの部分もインデックスされるようになる。
たぶん、記事を読むに静止テキストの部分とgetURL();の部分ぐらいは、これまでも検索情報にインデックスできたということだと思います。
単純に静止テキストとgetURL();だけとシンプルな構成であれば、検索にひっかかるページは作れた、ということなんでしょうね(気がつかなかったけど(汗))

これからAdobe的には、その部分に加えて、ダイナミックテキスト、ムービークリップへ外部ファイル、たとえば、XMLやSWFファイル、動画を読み込むようなコンテンツも検索でひっかかるようにしたいと思っているわけですね。

これは制作者としては嬉しいんですが、でも、FLASHでつくったものがHTMLと同じように検索にひっかかるとなった時点で、FLASHコンテンツにSEO対策を盛り込むテクニックとかそのうちでてきそうで、怖いですが‥‥

Mac版Firefox3でFLASHのテキストフィールドに日本が入力できない

Firefox3にも不具合というのがあるみたいですね。

Firefox3のMac版ではflashのテキストフィールドにうまく文字が入力できないらしいです。

「らしい」というのは検証してないからです(汗)

とりあえず、仕事でテキストフィールドのあるFLASHを作るときに気をつけることとして(汗

回避する方法を探していたら、「Unknown Quality」さんの以下の記事が大変に参考になるまとめ以上の情報になっていました。

Mac版Firefox3ではFlashに日本語入力ができないので(Unknown Quality)
http://un-q.net/2008/06/mac_firefox3_flash.html

アップデータがでると解消されるといいんですけどね‥‥‥どうなんでしょうか?

SWFファイルを解析できるソフト「Motion Decompiler 2」、Mac版もあわせて登場。

FreeMotion」を販売している(株)AHSが新しいSWF解析ソフト「Motion Decompiler 2」を販売しています。

これまでWindows版だけしかなかったんですが、今回はMac版も登場しています。


Motion Decompiler 2 for Mac

販売元の商品の詳細を見て、改めて知りましたが、これまであったActionScript2.0までのSWFからFLAの逆コンパイラだけでなく、ActionScript3.0で作成したSWFを解析する機能まであるようです。

制作が終わったFLASHファイルをよく無くして困ってしまう私のような人には大変便利なソフトです。

この手のソフトはある程度、FLASHコンテンツを作り込んでいる人には、他人のソースを覗くこともできるので、かなりの勉強になると思います。
(他人のソースはあくまでも参考程度にしましょう)

SWF解析ソフトはそれなりにありますが、きちんとメーカーから販売されているので、多分、それなりに使えるもんだと期待したいです。

ちなみに、商品紹介には以下のような注意書きもありますので、購入にはちょっと熟考の必要があるかもしれません。

※全てのFlashの完全解析を保障するものではありません。また、Flash8におきましては一部の独自機能等が含まれる場合、正しく解析内容が反映されない場合があります。

それでもFLASH制作者は持っていたいソフトですね。

ちなみに、店頭価格では約1,1000円〜1,48000円で販売しているようですが、ベクターPCショップでは9,800円以下で「Motion Decompiler 2」を購入できるようです。

[Flash]円周上にそってムービークリップを動かす

Actionscriptで円周上にそって、ムービークリップを動かす方法。

アドビのサポートデータベースに「角度と座標の計算 − Flash の三角関数を使う」という記事があるので、これを参照。

三角関数、とくにsinθとcosθで円周上のムービークリップの位置を決めます。

簡単に書けば場所を指定する式は以下のようになります。

ムービークリップのx軸の座標=sinθ(つまり、Y軸の距離/半径)
ムービークリップのy軸の座標=cosθ(つまり、X軸の距離/半径)

実際、これをActionScriptっぽく書くと以下。

ムービークリップのx軸の座標=Math.sin(角度)
ムービークリップのy軸の座標=Math.cos(角度)

ただし、このままでは半径1の円にしかならないので、必要な半径はsinθとcosθにかけ算する。例えばその半径をrとすると上記の式は以下になる。

ムービークリップのx軸の座標=Math.sin(角度)× r
ムービークリップのy軸の座標=Math.cos(角度)× r

これではステージの左上を中心に回ることになるので、ステージの中央に配置される座標を記述する。

そして角度は、Math.PI(つまりπ)360度は「角度と座標の計算 − Flash の三角関数を使う」によれば 2πラジアンと書けるらしいのです。
私はこの部分がよくわからないので、角度の部分を読み込むたびに 2度ずつ数字が変化するようにしました。

//ステージのx座標の半分の座標
stgX = 200;
//円運動の基準 y座標 の半分の座標
stgY = 150;
//円運動の半径の設定
rc = 100;
// 円座標(角度)の初期値を設定
rad = 0;
//以下、フレーム進む時間ごとに毎回実行
_root.onEnterFrame = function(){
    rad+=2;
    _root.mc._x = stgX+Math.cos(rad)*rc;
    _root.mc._y = stgY+Math.sin(rad)*rc;
}

かなりぎこちない動きになります‥‥多分、角度の問題だと思います。
角度をラジアンとか、πとか普通に使えば多分、きれいに動くんだろうな、と。

[Flash]loadVariablesで読み込んだテキストの中に半角の&を使いたいときなどに覚えておくこと

Flashの作成をした際、loadVariablesとかで読み込んだテキスト内に &などの特殊文字を使うとテキストが正しく読まなかったりすることがあります。

そのときの対処方法です。

Adobeのサポートデータベースにも記事がありました。

テキストファイルから特殊文字を読み込む時の表記方法

これによれば、ただ単純にURLエンコーディングすればいいみたいですね。
なので、&のときは、%26と変換した状態のものをテキストに書いておけばOKとのこと。

覚えておこう。

Flex3のβ版がでてました。

気がつくとAdobe Labsに「Adobe Flex Builder Linux Public Alpha」が追加されています。

合わせて「Adobe Flex Builder 3 Beta 3」もでています。

早いもんです(汗

AIR関係では「Adobe AIR update for Flash® CS3 Professional beta 3」がでたと思ったら、リンク切れでダウンロードできません(汗

ちょっとここに来て、ハイペースでFlexやAIR関連がでていますので、もしかすると年明けすぐには、PhotoShop Onlineが使えるかもしれませんね。

ちょっと、Flashじゃなくて、Flexを使った開発をしてもいいかも。と改めて考えてしまいました。

Adobe Flex 2プロフェッショナルガイド Windows &amp; Macintosh対応

[FLASH]_root._widthとStage.widthの違いについて

※ActionScript2.0まで確認。

ActionScriptでドキュメントのサイズ(大きさ)は「Stage.width」と「Stage.height」で取得する。

ちなみに、インスタンスの大きさは、「_width」と「_height」のプロパティで取得できるので、ドキュメントのサイズ(大きさ)も同じように「_width」と「_height」のプロパティで取得できると思うと実は違ったりする。

例えば

_root._widthl;
_root._height;

とすれば、ステージ上にある視覚できるインスタンスすべてを選択した際の左右を含めた幅、上下の高さの合計の数字を取得することになる。

なお、インスタンスのプロパティで確認できる幅と高さには、線の情報は含まれていない。あくまで塗りを基準にした幅と高さなので、「_width」と「_height」のプロパティで取得する値とは異なる場合があるので、制作の際には注意したい。

買いたいのに、断念した「FLASH Video & Sound テクニカルガイド」

FLASH Video & Sound テクニカルガイド

そういえば、FLASHで動画と音だけという内容に特化して日本人が書いた本というのは少ない。

そういえばかなりそれなりの値段で「Flash Video教科書―Flash Videoの基本から応用まで」という本もあったのだけど、比べると断然「FLASH Video & Sound テクニカルガイド」のほうがサンプルソースがAS2とAS3とそろっていて使いやすい、と思った。

が、しかし

書店で立ち読みして内容を確認したんですが、「印刷がずれてみずらいページ」が第1刷にはあり、これは出版社というか、印刷会社というかひどいと思いました。

たまたま手にとった一冊ではなく、その書店にあった全冊とも同じページで印刷がずれてよみにくいだけじゃなく、他のページも印刷がすれ、見難いところがありました。

せっかく良い本なのになぁ〜‥‥‥と購入は断念。
※たまたまだったのかなぁ〜‥‥‥

第2刷に期待したいと思います。
というか、出版社すぐに回収してFLASH Video & Sound テクニカルガイド」を第2刷で、刷り直してよね。

「ボロボロになるまで引かれたい」という帯が魅力的だ

翔泳社からDreamweaverとFlash、そしてIllustratorとphotoshopに「逆引きデザイン事典」シリーズみたいな感じなのがでてた。

Dreamweaver逆引きデザイン事典 」と「Flash逆引きデザイン事典」をそれぞれ立ち読みしたのだけど、初心者、中級者だと、操作に自身ないです。って人向けの本です。はい。

個人的に、帯の「ボロボロになるまで引かれたい」というのに惹かれて立ち読みだけじゃなくて、買おうと思ったのだけど、よくよく見るとだいたい解っていることのほうが多いので、別に購入しなくてもいいよね、と思い留まった。

Flash逆引きデザイン事典」はツールの使い方をほぼ網羅していて、初心者〜中級者向けの内容と言ったところ。
唯一無理があるな‥‥‥、と思ったのはActionScriptの箇所

執筆した人もCS3だけなら、ActionScript3.0だけで
もっと踏み込んだ説明できただろうに、MX2004と8も守備範囲なため、結構抽象的。でも、ターゲットになりそうな層には関係ないかもしれないから、まぁ、いいかと。

Dreamweaver逆引きデザイン事典 」のほうも、やはり中級者までの人はぜひ手元に置いておきたい内容

これも守備範囲がMX2004からなので、説明図と違うじゃんか‥‥というのがたまにあったりしたので、CS3だけでよかったんじゃないか、と思った。

MySQLとSpryの箇所は、この本の説明通りにやると、ハマる人がでそうな予感があるけど、ハマったほうが覚えると思うのでいいのかなぁ〜 と思ってみた。

どちらも「ボロボロになるまで引かれたい」という内容にピッタリで。使う場合に知っていたほうがいい、基本的な機能がほぼ書いてあるので、使いこなしている自身がない人は一冊持っていてもいいと思った。

Dreamweaver 逆引きデザイン事典 [CS3/8/MX2004対応]

Flash 逆引きデザイン事典 [CS3/8/MX2004対応]

Photoshop 逆引きデザイン事典[CS3/CS2/CS/7対応]

Illustrator 逆引きデザイン事典[CS3/CS2/CS/10/9/8対応]

FLASH開発環境

マイコミジャーナルの「【コラム】イマドキのIDE事情(18) オープンソースのFlash開発環境」という記事で、オープンソース環境でのAS開発が紹介されています。

なるほど、flexが値下げされたとはいえ、まだまだ高いですもんねぇ。オープンソース環境のほうがツールに慣れているという熟練度の関係もあり、とっかかりとしては楽なはず。

記事をまとめると紹介されていたのは以下の6製品。

  • FlashDevelop(.NETプラットフォームらしい)
  • ASDT(Eclipseプラグインらしい)
  • AIR GEAR(Eclipseプラグインらしい。AIR開発専用。日本語
  • SE|PY(ActionScriptエディタ。Pythonベース‥‥)
  • FLEXible(Flexの画面をグラフィカルに作成できるっぽい)
  • MTASC(ActionScript2コンパイラ)

う〜ん、私の場合、今のところ、Flash8のエディタで満足できるからなぁ〜(といいながら最近CS3のほうのエディタのほうが楽なので、好きですが‥‥‥なかなか使う機会がない‥‥‥)



「HTML5入門」絶賛発売中!


「DreamweaverではじめるWebサイト構築」という本を書きました。
現在絶賛販売中!

楽天市場


FaceBook
記事検索
訪問者数

    livedoor プロフィール

    ムラヒデ

    ブログランキング・にほんブログ村へ

    人気ブログランキングへ

    • ライブドアブログ