ウィンドウサイズに追随する

ウィンドウサイズに追随するActionScript

トップページのFlaファイルを開けてみたら、怖いくらいにActionScriptを忘れていることに気づいてしまいました。

久しぶりのFlashとはいえ、理解・記憶するよりも忘れていく方が多いなると、そもそも「学習」が成立しません。

備忘録のために、恥を忍んでコメント付きのScriptを晒しておくことにします。

//基本設定////////////////////////////
//左肩揃え
Stage.align = "LT";
//拡大縮小無し
Stage.scaleMode = "noScale";
//任意のマージンの設定
var margin = [32, 32, 32, 32];
//写真サイズ変更の関数////////////////////////////
//元々の写真のサイズを変数に収める。
var pw = photo_mc._width;
var ph = photo_mc._height;
//画面いっぱいに写真を表示する。
function scalePhoto() {
//写真が足りるよう、拡大率の大きい方を使用。
scaleW = Stage.width/pw;
scaleH = Stage.height/ph;
theScale = Math.max(scaleW, scaleH)*100;
photo_mc._xscale = theScale;
photo_mc._yscale = theScale;
//写真の中央部分を優先して表示。
photoX = (Stage.width-photo_mc._width)/2;
photoY = (Stage.height-photo_mc._height)/2;
photo_mc._x = photoX;
photo_mc._y = photoY;
}
//アイテム配置の関数////////////////////////////
function layoutItems() {
//リンク「blog/」を右下に配置。
blog_mc._x = Stage.width-blog_mc._width-margin[1];
blog_mc._y = Stage.height-blog_mc._height-margin[2];
}
//ボタン関連////////////////////////////
//リンク「blog_mc」の反応
blog_mc.onPress = function() {
blog_mc._y += 1;
};
blog_mc.onRelease = function() {
blog_mc._y -= 1;
this.getURL("http://blog.coluli.net/");
};
blog_mc.onReleaseOutside = function() {
blog_mc._y -= 1;
};
//やることをやる////////////////////////////
//ロゴを左肩に固定
logo_mc._x = margin[3];
logo_mc._y = margin[0];
//最初に一回。
this.layoutItems();
this.scalePhoto();
//リサイズされる毎に。
this.onResize = function() {
scalePhoto();
layoutItems();
};
Stage.addListener(this);
//参考資料
//ActionScript逆引きクイックレファレンス(2005年末版)Q*144
//等

XHTML+Flash全画面

フラッシュの全画面表示をきちんとするには多少の工夫が必要。cssで解決できる。

トップページをxhtml(XHTML 1.0 Transitional)で書き直したら、中に埋め込んだ全画面表示のFlashが表示されなくなってしまいました。

ちょっとググったら、原因はすぐわかりました(ホントにすぐに。改めて、検索は便利だなぁ……)。

高さおよび幅が 100 パーセントに設定された Macromedia Flash Player ムービー (SWF) が以下のブラウザで正常に表示されないことが確認されております。

(中略)

XHTML コードで定義されている doctype および DTD がブラウザのレンダリングに影響を与えているのが原因です。

(中略)

回避策としては、HTML ファイルの上部に以下のような XHTML コードがあります。この XHTML コードを削除して対処してください。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

メモ: この回避策を適用したファイルは、XHTML に準拠したファイルでなくなりますのでご注意ください。

Adobe – Flash TechNotes : 100 パーセントに設定されている Flash Player ムービーが正常に表示されない

おいおい 、Adobeがそれでいいのか……。

いろいろ調べてみたら、
swffit
を使えば、簡単に全画面表示ができるようでした。使ってみると確かに解決しますが、
swfobject

日本語訳
)とあわせてふたつ、たかだかswfを埋め込むだけのために使うのもスマートでない気がしたので、もう少し調べると、cssに追加で記述すれば回避できることがわかりました。

cssにこちらを追加することで、あっさり解決しました。

body {
margin: 0;
padding: 0;
position: absolute;
width: 100%;
height: 100%;
}

以上です。

調べる途中でこちらのサイトも参考にさせてもらいました。

APS-Cの計算式

備忘録。デジタル一眼レフの焦点距離を正確に換算する式。

135(35mmフルサイズ)の画面サイズ。

36mm×24mm

Canon EOS Digital XのCCD(CMOSセンサー)のサイズ(は他社と微妙にサイズが違う……)。

22.2mm×14.8mm

36÷22.2=1.6216216…

焦点距離に定数1.6216216…を掛ければ35mm相当の焦点距離が割り出せる。

  • 17mm → 28mm相当
  • 24mm → 39mm相当
  • 28mm → 45mm相当
  • 30mm → 49mm相当
  • 35mm → 57mm相当
  • 50mm → 81mm相当
  • 85mm → 138mm相当
  • 100mm → 162mm相当

17mmの単焦点レンズがあれば、28mm風に使えるのに……。

////////////////////////////

(090513追記)

おお、各社のAPS-Cのサイズはこんなに違うのか。

APS-Cサイズ – Wikipedia

デジタルカメラで使用されているセンサーサイズの比較図

α200の撮像素子、同じAPS-Cなのに、自分のEOSに比べてでかいなぁ……。
え、(DP1とかの)Foveonって、ほとんどフォーサーズのサイズと一緒だ。APS-Cクラスだと思ってたのに、ちょっとだまされた気分……。

結構興味深いです。

Firefox 3.0beta5

いままで何度も検証したので、結論のみをよりわかりやすく書きます。

Firefox(3.0b5)Macintosh版 は、

  • ファミリーネームによるfont-family指定を理解する。
  • フルフォントネームによる指定を受け付けない。

Firefox(3.0b5)Windows版 は、

  • Windows用ファミリーネームを認識する。
  • Postscriptネーム(=フルフォントネーム英)を認識する。
  • ボールドウェイトのPostscriptネーム指定をレギュラーウェイトとして誤認識する。

※上記検証はOpenTypeによるものです。Windowsの大半のブラウザはTrueTypeしか認識しないので、あくまでも参考程度にしかなりません。

正式版が出たら、TrueTypeも含め、検証してみることにします。

VistaのClearType用欧文フォント

Vista搭載の新しい欧文フォントがなかなかいい。

Windows Vistaの新しい欧文フォントがなかなかいい。

どれもClearTypeでの表示に最適化してあるはずなのだが、やっぱりSafari(webkit)のレンダリングの方がキレイなので、Safari 3.1Windows版での表示をキャプチャーした。

上から、
ルーク・デグルートの「Calibri(カリブリ)」
ジェレ・ボスマの「Cambria(カンブリア)」
ガリー・ムンクの「Candara(カンダラ)」
ルーク・デグルートの「Consolas(コンソラス)」
ジョン・ハドソンの「Constantia(コンスタンティア)」
ジェレミー・タンカードの「Corbel(コーベル)」
ユーザーインターフェイス(UI)フォントの「Seoge(シーゴー)」

解説は丁寧にまとめられたこちらを見ていただいた方がよいので省略。ほとんどこちらの内容を書き写したようなもの。

ちなみに、Windows Vistaで閲覧できる方は画像でなくこちらのhtmlもご覧ください。IEとSafariの文字レンダリングの違いがよくわかります。

WindowsとMacintosh両方で使える欧文フォント

Macintoshには、Windowsの欧文フォントがいくつかインストールされている。そのおかげで、Mac/Win両方で使える欧文フォントがそれなりにある。リストアップした。

Macintoshには、Windowsの欧文フォントがいくつかインストールされいます。そのおかげで、Mac/Win両方(≒web)で使える欧文フォントはそれなりにあります。

厳密な資料(※)が意外となく、ちょっとググってみただけでは出てこないようなので、自分でまとめてみました。

ここのデータがオフィシャルなものですが、いまいち正確でない気がします。

まずは、アプリケーション「Font Book」でしらべてみました。

「コレクション|Web」を選択した状態です。OSはLeopardです。(追加などを行なっていない)限りなくデフォルトに近いものですが、Arialファミリーなど、ウィンドウズ標準の欧文フォントが既に入っています。

  • Andale Mono
  • Arial
  • Arial Black
  • Brush Script MT
  • Comic Sans MS
  • Georgia
  • Impact
  • Times New Roman
  • Trebuchet MS
  • Verdana
  • Webdings

次に、「すべてのフォント」を選択し、キーワードで絞り込んでみます。

「Microsoft」で絞り込むと、Microsoftがライセンスを持っている書体が現れます。どういうわけか上と異なる部分もあるようです。

  • Comic Sans MS
  • Georgia
  • Microsoft Sans Serif
  • Stencil
  • Tahoma
  • Trebuchet MS
  • Verdana
  • Webdings
  • Webdings 2
  • Webdings 3

※差分を太字にしています。

2つを統合すると次のようになりました。

  • Andale Mono
  • Arial
  • Arial Black
  • Brush Script MT
  • Comic Sans MS
  • Georgia
  • Impact
  • Microsoft Sans Serif
  • Stencil
  • Tahoma
  • Times New Roman
  • Trebuchet MS
  • Verdana
  • Webdings
  • Webdings 2
  • Webdings 3

さて、これですべてでしょうか。そもそもこれらはWindowsに搭載されているのでしょうか。調べてみたところ、微妙に違うようです……。

“WindowsとMacintosh両方で使える欧文フォント” の続きを読む