まずは練習台となる素材データをダウンロードしましょう。
iPhone/iPad/iPod touchではフラッシュムービーを表示することができません。このようなフラッシュが閲覧できない端末で、代わりの画像を表示させる方法をご紹介します。HTMLの文法としては、<object>と</object>の間に、Flashが表示出来ない場合の処理を書くように規格されています。Dreamweaverでフラッシュを配置した場合、下の写真のようなソースコードが自動挿入されます。
ややこしい構文ですが、平たく言うとFlashが表示できるブラウザではswfムービーを表示し、Flashプレイヤーがインストールされていないか、またはFlashムービーを表示出来ない端末では、最新のFlashプレイヤーをインストールするように促す設定になっています。現状、Flashプレイヤーがインストールされていない環境は考えられないですし、そもそもFlashが表示できないiPhone系の端末で、Flashのインストール画面が表示されるのは好ましくありません。ここでは、ブラウザにフラッシュプレイヤーがインストールされていない場合に表示されるメッセージ部分を、代替画像の表示コマンドに置き換えます。まずは、Flashプレイヤーのインストール画面を表示させないように、赤塗りした部分のコードを削除します。
次に、iPhoneでFlashの代わりに表示させる画像を設定します。下の写真の赤塗りした部分に<img>タグを設置します。
<img src="images/top_flower.jpg" />
なお、フラッシュの代替画像には、別項でご紹介するアニメーションGIFも使用することができます。また、画像の大きさはフラッシュの幅・高さと同じにすることが大切です。iPhone系端末用の画像を設定したら、必ず実際の端末で正しく表示されることを確認しましょう。
補足ですが、2011-11-04の段階では、iPhone系端末でFlashアニメーションが表示できないことへの対策として、そもそもFlash自体を使用せず、jQueryという外部JavaScriptライブラリを使用した動的コンテンツが盛んに使用されています。ここではjQueryを使用したシンプルなスライドショーの一例を挙げておきます。jQueryを用いた外部ライブラリはネット上に無数に配布されていますので、「コリス」「Design Walker」等のデザイン情報サイトや、Googleでキーワード検索をして、ご自分が必要としているjQueryプラグインを探してみられるといいでしょう。