2008年4月29日
フォントシンボルのライブラリ共有化
SWF上のテキストフィールドに入力した内容を、別のテキストフィールドに特定のフォントで表示させる実験。
今回の実験では、下記の項目をあえて必須要素としました。
- 埋め込みフォントを使用し、フォントがインストールされていないPCでも、見た目が変わらないようにする。
- フォントシンボルを共有ライブラリとして外部SWFに置く。つまりテキストフィールドに入力させるSWFと、フォントシンボルの入ったSWFをそれぞれ別々にする。
■制作上の注意点
- フォントシンボルを共有ライブラリSWFにする必要がある。
- 共有ライブラリのシンボルの読み込みは、それが配置される直前のフレームである。
- つまりムービーがロードし終わっても、共有ライブラリのフォントシンボルはまだ読み込まれていない。
- それを回避するため、間にもう一つ共有ライブラリを読み込むためだけのSWFをはさむ。
- 結局、合計3つのSWFが必要となる。
- フォントシンボル共有ライブラリSWF
- 共有ライブラリSWFをからのMCに読み込み、キャッシュさせるSWF
- テキストフィールドに入力、表示させるSWF
■フォントシンボル共有ライブラリSWFの作成
- 空のテキストフィールドを作成、使用したいフォントを埋めこむ。「例:A-OTF 新ゴ Pro M」
- 識別子:myFont
- リンケージは下記のようにチェック
- ActionScriptに書き出し
- ラインタイム共有用に書き出し
- 最初のフレームに書き出し
- SWFにパブリッシュ
■キャッシュさせるSWFの作成
- 先に作成した、外部ライブラリの読み込みでmyFontを読み込み。
- 識別子:myFont
- リンケージは下記のようにチェック
- ラインタイム共有用に読み込み
- ステージ上に配置
- SWFにパブリッシュ
■テキストフィールドに入力、表示させるSWFの作成
空のMCを作成してステージ上に配置。インスタンス名「emptyMC」とする。
メインのタイムラインの1フレーム目に下記のスクリプトを記述。
var loaderListener:Object = new Object();
loaderListener.onLoadInit = function() {
_root.nextFrame();
}var loader:MovieClipLoader = new MovieClipLoader();
loader.addListener(loaderListener);
loader.loadClip("./キャッシュさせるSWFのファイル名", emptyMC);
2フレーム目に下記のスクリプトを記載
this._txt.border = true;
this._txt.type = "input";
this._txt.selectable = true;
this._txt.multiline = true;
this._txt.wordWrap = true;
this._txt.text="テキストフィールドができました";var my_fmt:TextFormat = new TextFormat();
my_fmt.font = "A-OTF 新ゴ Pro M";
this.createTextField("_txt2″, this.getNextHighestDepth(), 10,10, 200, 120);
this._txt2.border = true;
this._txt2.wordWrap = true;
this._txt2.embedFonts = true;
this._txt2.setTextFormat(my_fmt);
テキストフィールド1「_txt」に入力した内容を、テキストフィールド2「_txt2」に表示するボタンを作成する。
_txt2.text = _txt.text;
_txt2.setTextFormat(my_fmt);
}
今回のスクリプトの例では、フォントは「A-OTF 新ゴ Pro M」を埋め込んでいるが、別に何のフォントでもかまいません。
ただし、日本語フォントは文字数が多く、それだけ容量が大きくなるので注意が必要です。
投稿者 lepracaun : 09:15
| コメント (0)
| トラックバック
2007年3月17日
JavascriptとActionScriptの連携その1
JavascriptとActionScriptの連携をいくつかのケースに分けて実践してみたいと思います。
最初のケースは、別のHTMLに埋め込まれているswfの特定のタイムライン(ラベル)にジャンプさせる方法です。
今回のケースでは下記の条件を設定しました。
1.リンク先のHTMLファイルは一つ、swfファイルも一つとする。
2.swfのタイムラインにラベルを記載。リンク元のHTMLから、リンク先swfの特定のラベルのあるタイムラインを最初に表示するようにする。
リンク元HTMLファイル名を、index.html
リンク先HTMLファイル名を、jsas.html
リンク先HTMLに埋め込まれたswfファイル名をjsas.swfとします。
サンプルソースは下記の通り。
まず最初に、リンク元のHTMLからリンク先のHTMLにパラメータを渡してやります。
<a href="jsas.html?scn1">ラベルscn1を表示させる</a><br />
<a href="jsas.html?scn2">ラベルscn2を表示させる</a><br />
<a href="jsas.html?scn3">ラベルscn3を表示させる</a><br />
<a href="jsas.html?scn4">ラベルscn4を表示させる</a><br />
リンク先HTMLのファイル名の後ろに?+ラベル名を記述します。
リンク先HTMLからリンクを貼っている外部jsファイルに下記のJavascriptを記述します。
{
var strTemp = new String();
var strArg = new String();
var nLength;
strTemp = location.search;
nLength = strTemp.length;
strArg = strTemp.substring(1, nLength);
document.write('<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/ cabs/flash/swflash.cab#version=6,0,29,0" width="320" height="240" id="index">')
document.write('<param name="allowScriptAccess" value="always" />')
document.write('<param name="movie" value="jsas.swf?goJump='+strArg+'">')
document.write('<param name="quality" value="high">')
document.write('<param name="bgcolor" value="#ffffff">')
document.write('<embed src="jsas.swf?goJump='+strArg+'" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="320" height="240" name="index">')
document.write('</object>')
}
<body>~</body>タグ内のswfを表示したい箇所に上記のjavascriptを呼び出すスクリプトを記述。
<script language="javascript">
<!--
Check();
// -->
</script>
呼び出されるswfのルートのタイムラインに下記のActionScriptを記載。
※注意点
swfファイルは完全にパラメータ等が読み込まれてからでないと、動作しないケースがあります。
ローディングバーをつけるなどして、FLASHで使用するデータを完全に読み込んでから実行します。
gotoAndPlay(_root.goJump);
以上で完了です。
仕組みとしては非常にシンプルです。
1.リンク元HTMLファイルからパラメータをつけて、リンク先HTMLへリンク。
2.リンク先HTMLでパラメータの文字列を取得、FlashVarsでswfファイルに変数goJumpを送信。
3.swfファイルで変数goJumpに該当するラベルにジャンプ。
投稿者 lepracaun : 14:03
| コメント (0)
| トラックバック
Flash表示用Javascript「SwfTagWriter」
2006年4月のパッチ以降、Internet ExplorerでFlashなどのアクティブコンテンツ上にマウスカーソルを持っていくと「このコントロールをアクティブ化して使用するにはクリックしてください」 と表示されます。
様々な解決方法がありますが、現在のところ最もスマートと思われる方法がありましたので紹介します。
cyanoというサイトの
「2006年4月のActiveXパッチがあたったIEでFlashなどを従来通り表示させるためのJavaScript(Flashのバージョン検出機能付き)」
で公開されていた、swfTagWriter.jsです。
Windows XPのIE6.0、IE7.0、Firefox2.0、Opera9.0、Mac OSX safari2.0などで動作検証しましたが、全く問題ありませんでした。
同様のことをするスクリプトにSWFObjectがあるとのことですが、SwfTagWriterは日本語で詳細な説明がされていますし、大きな違いがないのであれば、こちらのスクリプトを使用していきたいと思います。
投稿者 lepracaun : 12:48
| コメント (0)
| トラックバック
2007年2月13日
FLVエンコード画質調査
FLVエンコードの画質チェックを実施しました。
調査したFLVエンコーダおよびエンコードソフトは下記の通り。
【調査したFLVエンコーダ】
Sorenson Spark (Flash 7形式)・・・Flash Professional 8にてエンコード
On2VP6 (Flash 8形式)・・・Flash Professional 8にてエンコード
Riva FLV Encoder
各エンコーダの詳細な説明に関しては、今回は割愛します。
【エンコード設定】
元ファイル:wmv形式 (8.39MB)
ムービーのサイズ:480x264
フレームレート:30fps
ビデオ ビットレート:400kbps
オーディオビットレート:80kbps(stereo)
オーディオ サンプリングレート:22050hz
【変換後のFLVのサイズ】
Sorenson Spark (Flash 7形式)・・・7.91MB
On2VP6 (Flash 8形式)・・・8.50MB
Riva FLV Encoder・・・8.16MB
【画質確認URL(各リンクをクリック)】
Sorenson Spark (Flash 7形式)
On2VP6 (Flash 8形式)
Riva FLV Encoder(Flash 7対応)
同一条件にてエンコードするとその違いが一目瞭然ですが、やはりOn2VP6が最も良好です。
際立って画質が悪いのがSorenson Spark。特に動きのある部分のブロックノイズが酷い。
Riva FLV Encoderはその中間ですが、On2VP6と違い、Flash Player7で再生できる強みがあります。