Flash Archive

Firefox3.6にアップデートしたら、100%表示のフルフラッシュサイトで、ウィンドウサイズが指定した最小サイズ以下になっていないのに、常にスクロールバーが表示されてしまう現象が発生。Firefox3.5では問題なく表示できていたし、他のブラウザでも正常に表示できるようなので原因を調べてみたら、swffitが問題だったみたいです。swffitのバージョンを2.1から2.3.3（2010年1月18日リリース）にアップデートしてみたところ、スクロールバーは消えて正常に表示できるようになりました。

• swffit – Smart Flash Resize Script – 100% Width and 100% Height

Progressionで作成したFlashコンテンツが、Firefoxだけ表示できなく困っていたのですが、Page Saverというアドオンが原因だったみたいです。Page Saverを外してみたところFlashコンテンツが正常に表示できました。根本的な原因はよくわからないし、ProgressionとPage Saverの問題ということでもない気もしますが、念のためそれぞれのバージョンもメモしておきます。

• Mac OS X 10.6.2
• Flash CS3
• Progression 3.1.82
• Firefox 3.5.7
• Page Saver Basic 2.5

MAMPとMacPortsを使って、Macのローカル環境にMovableType4をインストールしようと思ったら、以前にWordPressをインストールした時とは違って、モジュールなどのインストールが必要だったりと、なかなか大変な作業だったので大まかな手順をメモ。インストール時のそれぞれのバージョンは、Mac OS X 10.6.2、MacPorts 1.8.1、MAMP1.8.3、Movable Type 4.261。以下のサイトを参考にさせて頂きました。

【参考にさせて頂いたサイト】

• Mac OS Xのローカル環境(MAMP+MacPorts)で、Movable Typeを動かしてみよう – 準備編
• Mac OS Xのローカル環境(MAMP+MacPorts)で、Movable Typeを動かしてみよう – 設定編
• Mac OS X Snow Leopard 10.6.1のローカル環境 – Under Construction Blog

MAMPをダウンロードしてインストール

MAMPのサイトから、アプリケーションをダウンロードしてインストール。

Movable Type4をダウンロード

Movable Type4をダウンロードして、MAMPのDocument Root以下のディレクトリに設置。Document Rootは、MAMPをアプリケーションフォルダに置いた場合、「/Applications/MAMP/htdocs/」。

XCodeとX11をインストール

XCodeとX11をインストールしておく必要がある模様。XCodeとX11は、OS Xのインストールディスクからインストール可能です。

MacPortsをダウンロードしてインストール

The MacPorts ProjectよりMacPortsをダウンロード。Snow Leopard、Leopard、Tiger、それぞれのバージョンが用意されているので、自分の環境にあったものをダウンロードしてインストール。

MacPortsの初期化と設定

MacPortsのインストールが完了したら、Terminal.appを起動して以下のコマンドを一行ずつ実行。これで、MacPortsの初期化と設定が行われる模様。

echo 'export PATH=$PATH:/opt/local/bin:/opt/local/sbin/' >> ~/.bashrc
echo 'export MANPATH=$MANPATH:/opt/local/man' >> ~/.bashrc
echo 'source ~/.bashrc' >> ~/.bash_profile
sudo port -d selfupdate
sudo port -d sync

ImageMagick（PerlMagick）をインストール

以下のコマンドを実行して、ImageMagickをインストールする。結構時間がかかる。

sudo port install ImageMagick +perl

DB関連モジュールのインストール

データベースをインストールする。今回は、MySQLを使用するので、SQLiteとSQLite2は不要かもしれないけど、良くわからないのでとりあえずインストールしてみる。これも結構結構時間がかかる。

sudo port install p5-dbi
sudo port install p5-dbd-mysql
sudo port install p5-dbd-sqlite
sudo port install p5-dbd-sqlite2

Perlのパスを変更

Perlのパスを、MacPortsのインストールディレクトリへ変更する（シンボリックリンクというものらしい）。

cd /usr/bin/
sudo mv perl perl.bak
sudo ln -s /opt/local/bin/perl /usr/bin/perl

Movable Typeの設置

MAMPをアプリケーションフォルダに置いた場合、デフォルトでは「/Applications/MAMP/htdocs/」がDocument Rootになるので、ダウンロードして解凍した、MT-4.261-jaフォルダをコピーして、フォルダ名を「mt」などに変更しておく。

この時点で、mt-check.cgiを実行してみたところ、CGIが実行されずソースが表示されてしまったので、とりあえずmt-check.cgiのパーミッションを「755」から「700」へ変更してみたら、無事に「Movable Type システムチェック」が表示された。そのあと、mt-check.cgiのパーミッションを「755」に戻してみたけど、普通にシステムチェックが表示されるみたいで、このあたりの原因はよくわからなかったです。

オプションモジュールのインストール

システムチェックでは、以下の項目が足りないと表示されてるので、ひとつずつインストールしていく。

• Crypt::DSA
• IPC::Run
• Archive::Zip
• HTML::Entities
• Crypt::SSLeay
• GD
• Archive::Tar
• IO::Uncompress::Gunzip
• Digest::SHA1
• IO::Compress::Gzip
• XML::Atom
• Mail::Sendmail
• HTML::Parser

ひとつのコマンドで複数のモジュールがインストールされる場合もあるみたいだけど、以下のコマンドをすべて実行した段階で、システムチェックですべての項目が「インストールされています」になった。

sudo port install p5-gd
sudo port install p5-crypt-dsa
sudo port install p5-archive-zip
sudo port install p5-xml-atom
sudo port install p5-mail-sendmail
sudo port install p5-ipc-run

htaccessの設置

MAMPを使用する場合、CGIを実行できるディレクトリが「/Applications/MAMP/cgi-bin/」のみに制限されているようなので、htaccessで制限を解除する。以下をコピペして、テキストデータとして保存する。ファイル名はあとでリネームするので、とりあえず適当でよい。保存したテキストデータを、MAMPのDocument Rootで指定してあるディレクトリに置いて、TransmitなどのFTPクライアントからファイル名を「.htaccess」に変更する。

Options +ExecCGI
AddType application/x-httpd-cgi .cgi .pl

データベースの作成

MAMPを起動してスタートページを開き、メニューよりphpMyAdminをクリック。今回インストールするMovable Type用のデータベースを作成する。「新規データベースを作成する」というところに、作成したいデータベース名を入力（今回はmt）、照合順序は「utf8_general_ci」を選択して、「作成」ボタンをクリック。これでデータベースが作成される。

mt-config.cgiの修正

/Applications/MAMP/htdocs/mtの中に、mt-config.cgi-originalというファイルがあるので、複製して「mt-config.cgi」にリネーム、テキストエディタで開き、以下の項目を修正する。

CGIPath    http://localhost:8888/mt/
StaticWebPath    http://localhost:8888/mt/mt-static
# MySQL
ObjectDriver DBI::mysql
Database mt（Movable Type用に作成したデータベース名）
DBUser root
DBPassword root
DBHost localhost

上記の修正の他に、以下の二行を追記する。

DBSocket /Applications/MAMP/tmp/mysql/mysql.sock
DBPort 8889

POSTGRESQLとSQLITEの部分は、行の先頭に「#」を付けてコメントアウトしておく。これを忘れるとエラーになってしまうので注意。

##### POSTGRESQL #####
#ObjectDriver DBI::postgres
#Database DATABASE_NAME
#DBUser DATABASE_USERNAME
#DBPassword DATABASE_PASSWORD
#DBHost localhost
 
##### SQLITE #####
#ObjectDriver DBI::sqlite
#Database /path/to/sqlite/database/file

Movable Typeの設定

MAMPを起動した状態で、ブラウザから「http://localhost:8888/mt/」にアクセスするとMovable Typeの設定ウィザードが表示されるので、Movable Type 4 ドキュメントを参考に設定を完了させる。

以上の流れでなんとかローカル環境でMovable Typeを起動することができました。

FlashコンテンツでSWFや画像データを外部から読み込む際に、ブラウザでキャッシュさせない方法をメモ。頻繁に更新する必要のあるFlashコンテンツでは、更新した内容が反映されない可能性あるので、キャッシュ対策が必要。

具体的には、読み込みたいデータのパスに「?=現時刻」をプラスしてあげて、常に別のデータとして読み込ませる。例えば、CASA FrameworkのMediaLoadを使用して、test.jpgを外部から読み込む場合のキャッシュ対策はこんな感じ（ほぼCASAのサンプルそのままです）。

this.stop();
Stage.align = "TL"; 
Stage.scaleMode = "noScale";
 
import org.casaframework.load.media.MediaLoad;
 
this.createEmptyMovieClip("loadZone_mc", this.getNextHighestDepth());
 
function onImageLoadProgress(sender:MediaLoad, bytesLoaded:Number, bytesTotal:Number):Void {
    trace(bytesLoaded + "/" + bytesTotal + " bytes have been loaded into " + sender.getMovieClip());
}
 
var nowDate:Date = new Date();//現時刻を取得してnowDateに設定
var mediaLoad:MediaLoad = new MediaLoad(this.loadZone_mc, "test.jpg" + "?=" + nowDate);
this.mediaLoad.addEventObserver(this, MediaLoad.EVENT_LOAD_PROGRESS, "onImageLoadProgress");
this.mediaLoad.start();

現時刻の部分は、ユニークな値であれば問題ないと思うので、乱数など他の値でもでも問題ないと思われます。ちなみに画像データだけでなく、swfやxmlなどでも同じ方法でキャッシュ対策可能。

【参考にさせて頂いたサイト】

• Flash周りのキャッシュ対策

Flashで、Flickr API経由で画像を表示するテストをしてみたら、ローカル環境では問題なく表示されるのに、サーバにアップロードしたら何も表示されない。いろいろ検証してみたところ、Flickrから取得した画像にスムージングをかけようとすると、何も表示されない模様。Flash Player8以上で、外部画像を読み込んだ場合、シャギーが出てギザギザの画像になってしまうので、スムージングを適用したかったのだけど、なかなかうまくいかなかったので、解決方法をメモ。スムージングについては、以前書いた、「[AS2]Flashで外部から読み込んだ画像データにスムージングを適用する」を参照。

System.security.loadPolicyFile("http://api.flickr.com/crossdomain.xml");
System.security.loadPolicyFile("http://farm1.static.flickr.com/crossdomain.xml");
System.security.loadPolicyFile("http://farm2.static.flickr.com/crossdomain.xml");
System.security.loadPolicyFile("http://farm3.static.flickr.com/crossdomain.xml");
System.security.loadPolicyFile("http://farm4.static.flickr.com/crossdomain.xml");

上記のスクリプトを追加すると、スムージングを適用しても問題なく表示可能でした。クロスドメインとかセキュリティーの問題と思われます。

【参考にさせて頂いたサイト】
鮭とプログラムとかサン「スライドショー 2」

Webカメラを使用するFlashサイトで、MacのiSightが動作しない場合の解決方法。OSのクリーンインストールとか、Flash Playerを何度も入れ直したりしてたら、設定方法を忘れてしまったのでメモ。

Flash Playerの「カメラとマイクへのアクセス」というダイアログで、[許可]を選択しても何も表示されないので、右クリックでFlash Playerの設定を開く。右下にあるWebカメラのアイコンをクリックして、「USB Video Class Video」を選択すれば、iSightが動くはず。

Final Cut Express 4.0で、FLV形式での書き出しがうまくいかずハマったのでメモ。FlashのバージョンはCS3。

ムービーの編集をFinal Cut Expressでやって、Final CutからダイレクトにFLV形式で書き出しを試してみたけどプログレスバーがまったく進まず、フリーズ。もしかして、Final Cut Proじゃないとできないの？と思ったりしながら、Appleサポートページを調べてみたら、下記の記事を発見。

Final Cut Pro：Flash への書き出しの際にクラッシュする

Flash CS3の環境だと無理みたいなので、一旦Final CutからQuickTime形式で書き出しして、「Flash Video Encoder」とか「QuickTime」などでFLVに変換する必要があるみたいです。

Flashで外部から画像データを読み込んで、リサイズしたり回転させたりして使用する場合、シャギーが出てギザギザが目立ってしまう。Flash Player7だと、何もしなくてもスムージングがかかった状態で表示されていたみたいで、問題なかったのだけど、8以上だとギザギザになってしまう。いろいろ調べてみたら、Flash Player8から仕様が変更になったらしく、ひと手間かけないとスムージングが適用できない模様。よく使いそうなのでメモ。

flaファイルと同じ階層に「photo.jpg」を用意して、メインのタイムラインの1フレーム目に、下記スクリプトを記述すれば、外部画像にスムージングを適用可能（AS2です）。

import flash.display.BitmapData;
 
this.createEmptyMovieClip("containerOriginal", this.getNextHighestDepth());
this.createEmptyMovieClip("containerSmoothing", this.getNextHighestDepth());
 
var listenerObj:Object = new Object();
listenerObj.onLoadInit = function(){
	bitmapSmoothing();
}
var mcl:MovieClipLoader = new MovieClipLoader();
mcl.addListener(listenerObj);
mcl.loadClip("photo.jpg", this.containerOriginal);
 
function bitmapSmoothing() {
	var smoothImage:BitmapData = new BitmapData(this.containerOriginal._width, this.containerOriginal._height, true, 0x000000);
	smoothImage.draw(this.containerOriginal);
	this.containerSmoothing.attachBitmap(smoothImage, 0, "auto", true);
	this.containerOriginal.removeMovieClip();
}

画像を読み込んで、読み込みが完了したら、BitmapDataに変換してスムージングを適用して元画像をリムーブという流れ。元画像の読み込みが完全に完了してから、スムージング処理をしないと、うまく動作しないみたいなので注意。このスクリプトの場合、onLoadInitでロード完了を取得して、bitmapSmoothing関数でスムージングを適用してます。

元画像をリムーブしないで、角度をつけて比較してみるとこんな感じ（左がスムージング適用前で、右がスムージング適用後）。

ライブラリから読み込む場合は、プロパティからスムージングの適用を選択できるので問題はないけど、スクリプトベースで外部から引っ張ってくる場合は、こんな感じで解決するみたいです。もっと簡単な方法とかあるのかもしれないけど、とりあえずこの方法で解決しました。

【参考にさせて頂いたサイト】
AS2で読み込んだ外部画像にスムージングを適用する
FLASH8-ビットマップスムージングをスクリプトで制御したい

Flash Playerのバージョンを簡単に切り替えることができるFirefox用のプラグイン「Flash Switcher」が、Macでなかなか正常に動かず困ったので、うまくいったときの流れをメモ。

1.アンインストーラーで現在インストール済みのFlash Playerを削除。
念のためアンインストール。必要ないかもしれないです。

2.Firefox3.0に、Flash Switcherをインストール。
この段階では、下記のFlash Playerがインストールされて、動作も切り替えも問題なし。

• Flash 9.0 r124
• Flash 9.0 r115

3.Flash Player 10のデバッグ版をインストール。
バージョン10.0 r22が追加されて、バージョン10に関しては問題なく動作するけど、デフォルトでインストールされていたバージョン9に、切り替えができなくなる。

4.「/Library/Internet Plug-Ins」ディレクトリの中にある、Flash Player.pluginを削除。
cellfusion blogさんの「Flash Switcher入れてみた（OSX版）」を参考にさせて頂き、「Flash Player.plugin」を削除。一旦すべてのFlash Playerが削除された状態になるけど、Flash Switcherから「10.0 r22」「9.0 r124」「9.0 r115」を選択することができて、それぞれのバージョンを再度インストールすることが可能。バージョンの切り替えもできるようになる。

その後、バージョン8などを追加しようと思ったら、インストール自体ができなくて、Flash Switcherで全てのバージョンの切り替えが、できなくなってしまったけど、再度、4の流れで「Flash Player.plugin」を削除すると正常に戻った。

よくわからないけど、バージョンの切り替えができなくなったら、「Flash Player.plugin」を削除して、それぞれのバージョンをインストールしなおせば、なんとかなりそうな感じ。現状、「9.0 r124」「9.0 r115」「10.0 r22」しか切り替えができないけど、バージョン8以前は動作確認する機会もあまりないと思うので、とりあえずこの状態で使ってみることにします。