tsukalogo0000


 

alt

flashとz-indexの関係
全くタイムリーでもないマイタイムリーな話題デス。
通常htmlでは下に書かれた要素程、上部に配置されるのだがz-index はブロックレベル要素の描画レイヤーの上下を設定できるプロパティです。(数字が大きいほど手前になる。)
※レイヤー関係を反映させるには、通常どおりの位置に表示させたい要素も、position: relative; と指定する。無指定(position: static)のままではダメ。
●z-index指定なし z-index : 1 ; z-index : 2 ; z-index : 3 ; 重なりの順序が反映された表示(図)
特にjoomlaなんかのCMSは、メニューを設定した場合かこれで引っ掛かる場合も多ししかし、flash要素はCSSの指定だけでは下の素材として認識されずツリーメニューなんかが隠れてしまう事が多い。この問題は、Flashが透過モードでない場合、最上位に表示されるため起こる。しかも、macのfirefoxはかしこ過ぎて、CSS通りに描画するがMacのgoogleはじめ、Windowsに関してはIEはもちろん、firefoxに至るまで全滅。
つまりflash要素だけ浮いちゃうのですねそんな場合は、flashのソースに以下を追加して、表示順序を揃える。

▲上部のメニューをクリックしてもFlashの下に隠れてしまう


▲正常にメニューがフラッシュの上に表示された状態

<p><div id="swf">
 <!-- ここにFlashを(不)透明表示設定で挿入 -->
 <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000">
 <param name="movie" value="main.swf" />
 <param name="wmode" value="transparent" />
 <embed src="main.swf" wmode="transparent" type="application/x-shockwave-flash" />
 </object>
</div>
</p>

Flashを挿入するとき、<param>タグや表示用のJavaScriptで、wmode を transparent(または opaque)と設定すること。最初は、単純な記述ミスだと思ってたがいやはや、HTML+CSSは奥が深いです。

 

 

alt

Flash or jQueryについて考える

良く両者が比較されているがここにきてやや情勢が変わってきた。5年ほど前ならスマホもiphone全盛で(厳密にはアンドロイドをスマホと呼ぶ)flashはやや排他的だった。スマートフォンアプリの登場とその可能性でFlashがまた無視出来なくなってきた。本来、サイト構築にのみ考えるならダウンロードさせたり、端末等Flashは見る側を選ぶケースがある。そもそも開発目的からして両者を比較するのもおかしいが


《Flashの利点として》

●動きが滑らかでユーザーの操作に合わせ複雑に組み立てが出来る
●音声を入れる事が可能
●内部のスクリプト構造が見えないので、ギミックが盗まれにくい
●ページにスクリプトが干渉せずエラーがおきにくい
●比較的データを軽く出来る
●Flashのみでサイトを作る場合自由度が非常に高い。
●スマホアプリやyoutubeなど含め将来性が見えてきた
(サンプル)


こちらでFlash用ガジェットが開発されています。
これは楽ですね使い方は単純にswfのアドレスを入力してコードを取得するだけ。しかも禁止タグにも引っかかりませんこれは誰でも設置できます。

 

●Flashが読めない端末用の代替えタグ
<object width="840" height="375" 
data="/templates/tsukapiko/images/tsukapikoflash_mainvisual.swf"
 
type="application/x-shockwave-flash">
 
<param name="src" value="/templates/tsukapiko/images/tsukapikoflash_mainvisual.swf" />
 
<img src="http://tsukapiko.minibird.jp/images/stories/fishing/IMG_1208.jpg" 
width="840" height="375">
</object>
 

parmの後ろに画像のタグを挿入するとflashが描画できない端末やブラウザではあらかじめ用意された静止画像が入る。


《ヘッドにFlashを使った当サイトのサンプルベージ》

※iphoneではflashが表示されません

軽やかな展開でフラッシュらしい効果音&タイミングの演出。今やローディングが必要かは疑問
bassfishing/popper.html

マウスに感応して波紋がおきるタイプこれもjqueryだと無理。
bassfishing/clankbait.html

下のバナーをクリックする上部の画像が入れ替わるこれもマウスに感応して動くタイプ単純なものだとjqueryで可能。
webdesign/webdesginflash/185.html

jqueryのパターンフラッシュっぽくここまでできる。もちろんコマのコントロールが出来る仕様にもできる。
bassfishing/worm.html


AU(KDDI)がiphone5から端末の採用を決定したり、googleが端末開発を独自で行う準備を始めたりとめまぐるしく変化してきている。


Flash Player 11」で巻き返しを図るアドビ--その戦略を探る
Adobe Systemsが「Flash Player」のウェブ上での地位を当たり前と思えた日々が過ぎ去って久しい。しかしAdobeは、「Flash Player 11」を近日中に公開し、このブラウザプラグインへの反対と代替製品の存在という強力な組み合わせに反撃しようとしている。10月初旬の開発者向けカン ファレンス「Adobe Max」で予定されているFlash Player 11のデビューは、プログラマーに、あるメッセージを伝えるためのものとなっている。それは、Flashはいまだに有意義なものであり、Adobeは Flashに投資し続けているというメッセージだ。Flash 11の目玉である、ハードウェアアクセラレーションに対応した3Dおよび2Dグラフィックスのための「Molehill」インターフェースを理由に、 Flashが徐々にウェブから姿を消すことを期待している人々の考えが変わることはないだろう。また、Flashに反対しているAppleや Microsoftが態度を覆すこともないだろう。しかしMolehillは、ゲームにとって強力な新機能であり、そしてゲームは、Adobeが守ろうと しているFlashの最後のとりでの1つだ。Adobeのプラットフォーム担当ゼネラルマネージャーのDanny Winokur氏は「GPUに直接アクセスすることで、Flashの従来バージョンよりもレンダリングがはるかに高速化している」と語る。非常に多数のオ ブジェクトを1秒間に50フレームというリフレッシュレートで動かせるため、「Xbox 360」や「PlayStation 3」のゲームのような「家庭用ゲーム機品質のゲーム」がウェブブラウザ上で登場するのを期待できる。同時にAdobeは、Flashのクロスプラットフォームという特徴が持つプログラミング上の魅力を保つために、別の戦略を用意している。 Flashが禁止されていたり、単にインストールされていなかったりするのが原因でFlashアプリケーションを実行できない場合のため、Adobeの 「AIR 3」は、Flashアプリケーションをスタンドアロンのアプリケーションとしてパッケージできるようにしている。言い換えれば、Flashがインストールされているのを期待できない場合に備えて、開発者がFlashをアプリケーションに直接組み込めるようにしたということだ。また、新たに64ビットをサポートする。これはFlashが、新しいプロセッサに近づきつつあるブラウザとの互換性を保つのに役立つ。批判的な人々は異議を唱えるかもしれないが、Adobeの動きは本物だ。Flashには、経験豊かなプログラマーが多数いる上、このプラグインは デスクトップブラウザの98%にインストールされている。Flashがアプリケーションを書く唯一の方法でないことは明らかだが(Adobeでさえ、競争 を受け入れている)、Flashがまだ多くの人に使われていることも同じように明らかだ。

Adobeが「Flash Player 11」「AIR 3」を発表、iOSもサポート
Impress Watch 9月22日(木)12時0分配信
米Adobe Systemsは21日、「Flash Player 11」と「AIR 3」を発表した。10月初めに提供を開始する予定だ。Flash Player 11とAIR 3は、AppleのiOSにもAIRを通じて対応するほか、AndroidやBlackBerry、Windows、Mac OS、インターネットテレビなど、さまざまなプラットフォームをサポートする。特に高速な2D/3Dグラフィックを実現したことで、ゲームプラットフォームとしての位置付けを強調しており、ゲーム会社がほぼすべての端末に高品質な2D/3Dゲームを配信できると説明。また、コンテンツ保護機能、HD画質動画配信などにより、メディア企業にもアピールしている。64ビットのサポートも注目される。ゲームに関連したグラフィック機能では、前バージョンと比較して、2D/3Dグラフィックスレンダリングパフォーマンスは「1000倍」高速になったとしている。ハードウェアアクセラレーションにより、数百万のオブジェクトを毎秒60フレームでレンダリングでき、Windows、Mac、インターネットテレビなどに対して、ゲームコンソール端末に匹敵する高品質ゲームを配信できるとしている。なお、10月の提供開始時には、Android、iOS、BlackBerryに関してはプレリリース版として対応するかたちになり、正式公開版としてのサポートは「近い将来」と言及するにとどまった。動画再生機能も強化された。iOSではAIRアプリケーションの中という制限はあるものの、H.264のハードウェアデコードによって、HD画質動画をフルフレームレート、7.1チャンネルサラウンドで配信できるとしている。iOSだけでなく他の端末でも、AIRランタイムをアプリとともにパッケージするCaptive Runtimeによって、ユーザーのインストールプロセスを容易にできるほか、ユーザーが別途ランタイムをインストールしたり、後にアップグレードする手間をなくすことができる。AIRはネイティブエクステンションをサポートし、さまざまな端末のソフトウェアとハードウェアの機能を生かすことができる。これらにはバイブレーション制御、磁力計、光センサー、デュアルスクリーン、NFCなどの機能も含まれており、端末に合わせたアプリ開発が可能となる。
コンテンツ保護に関しては、Adobe Flash Access 3を使用した動画コンテンツの保護が可能だ。Adobe Flash AccessとAdobe Passをサポートしていることから、コンテンツのレンタルやサブスクリプション制のビジネスモデルの採用も可能になっている。また、Windows、Mac、Linuxにおいて64ビットを新たにサポートしたことから、これまで利用できなかった64ビット版のブラウザーでも、Flash Playerを利用できることになる。

 

alt

外部ファイル読み込み型flashの設置


サムネイルバナーが横スクロールで流れてそれをクリックすると上部の外部取り込み画像が変わりさらにイラストを描いた時のameblo記事や外部ファイル読み込みflash関連リンクが張られているというFlashです。ちなみに上部画像はリンクがあるのでhtmlとしてダイナミックテキストから変数を使って読み込んでいます。レイアウトに関してはcssを読み込んでもいいのだがcssも使えるタグに限界があるらしく今回は変数を複数作って配置。(その際全ての変数を書き込んでおかないと別のページを読み込むと要素が残ってしまう)

※iphoneではflashが表示されません

●外部ファイルを読込みフェードインさせる。
まずこのMovieClipが初めてロードされた時、透明度=0(this._alpha=0)にします。つぎに「onClipEvent(enterFrame)」で「もし、このMovieClipの透明度が100以下なら、透明度10ずつ濃くする」と いった感じです。「this._alpha<100」と設定しているので、透明度100に達した時点でこのActionScriptは以後無視されます。もちろんこのままだと初期のロードにしかフェードインがかからないので、下部のバナーをクリックした時点でアルファが0になるasを事前に書いておく必要がある。なんにしてもflashのアクションスクリプトはなんでもありといった感じでほとんどの事が可能なかわりいかに解り易く整理出来るかがポイント。
Flashのお勉強〜(9)マウスに反応する画像スクロールの作り方〜
外部ファイルを読込みフェードインさせる

●パーミッションにはまった

 

FLASH内の画像素材パーツを外部ファイル化して、データをアップした場合、サーバーに よって上手くいかない場合が多い。
いや、CMSの場合か?当然外部ファイルは同じ階層に入れてのお話。ここでパーミッション=権限の問題が出てくる。以前EC-CUBE系で引っかかったケースでは、ファイルから掘り出し て全てのデータを第一階層に持っていったりした。(それ以前にブラウザによっ てアクションスクリプトが動かなくて困ったが…。その際単純に該当するCMS用のflashタグで表示すると描画が可能)
パーミッションをイタズラにいじると、結構面倒で階層に合わせて解放しない と、ページが見れない事も。あんまりややこしくなると再インス トールってことも…よって権限ナンバーはメモすべき。

 

 

今回、このメインHPで、上位ディレクトリの権限をオール0にしてしまった。当然一度これで設定したら最後FTPからもレンタルサーバー側からもアクセス不可になってしまう!という事はファイルの削除や再インストールさえ出来ない。
しかたなくサーバー管理者にMailしたら、日曜の昼下がりにもかかわら ず、パーミッションの0から705まで権限を戻してくれました!ミニバードさん格安なのになん て対応が早いのだろう。

という事で、jQuery等はクリアしてきたがここでflashにつまずく〜そういえばjoomla!テンプレートでは当然Flashで外部ファイル化した素材はあるはず…おそらくコンフィグ設定でメインビジュアルだとすぐにプレビュー可能なのかも。

基本的にあまりにも複雑だとCMSに組み込む意味がなくなり、簡単なものだとjQueryでやりたいのでFlashのhtml〜XMLの読み込みは魅力を感じていないのだがjoomla!CMSでの外部ファイルにおけるFlash設置はひとまずクリアしておかないと。

 

Flashが何故かうまく動かない時に疑うべき8つの要素→
http://blog.flair4.jp/2009/03/flash-debug-pattern.html


●外部フォルダ付きFlash設置法
まず、単純にタグでFlashを設置したら、前述の通りプレビューしない。かと言って権限や初期設定を触るのも気がひけたので、Flashを一旦CMS外のスクラッチhtml ページに設置、それをjoomlaで再度読んで行けば、すんなりいくのではと…。下記の様に展開すると容易いです。
※この場合リンク先がインフレーム内に展開するので、外部htmlを書き換えないと駄目なのか。

スライド型イラストFlash


●JCBプレビュー
このJCBタグのFlash読み込みも使ってみたが、CMSの範疇らしく外部ファイルが蹴られ、しかもhtmlの場合全面に展開されてしまうので上手くサイズ合わせがいかなかったりするので却下。

(画像表示サンプル)

<a class="jcepopup" href="http://○○○○○○○○.jpg" title="Nature::○○○○○○○○" rel="image">
<img src="http://○○○○○○○○.jpg" border="0" alt="○○○○○○○○.jpg" title="○○○○○○○○.jpg" width="150" height="112" style="margin: 0pt; 
padding: 0pt; float: none; border: medium none;" />
span style="top: -112px; 
background-position: right bottom;" 
class="jcemediabox-zoom-image"<>/span<>/a>
</a>

(Youtubeサンプル)

<a class="jcepopup" href="http://www.joomlacontenteditor.net/images/stories/○○○○○○○○.jpg" title="Nature::Water Lillies" rel="image"></a>
<a class="jcepopup" href="http://www.youtube.com/watch?v=000-000_00" target="_self" title="Tutorial::Joomla 1.5 Single Column Content" rel="image">Youtube popup</a>
 

(Flashサンプル)

<a class="jcepopup" href="http://○○○○○○○○.swf" target="_self" title="AdvLink 1.5.0" rel="image">Flash file</a>
 

(WEBサンプル-外部ドメイン)

<a class="jcepopup" href="http://○○○○○○○○○○○○○○○○.html/" target="_self" title="Apple::Source Browser" rel="image">Source Browser</a>
 

amebloブラウザを表示するサンプル

Art Inside→
http://www.insidenet.co.jp/index.php?option=com_content&view=article&id=83:jce-mediabox&catid=52:joomla-plugins&Itemid=69


●標準モジュールのラッパー

どうしてもCMS記事内にてFlashを稼働させたいのでjoomla!インフレームモジュールの応用を。wrapperモジュールの設定ではまず配置でモジュール名を直接書き込む。
そして貼付けたい場所に{ loadposition 任意のモジュール名 }とモジュール名を入れてやるとそのページに反映される。するとやっと、外部ファイルを読むことができた。ただここでもう一つアクシデントが!
以前から警戒してたが、プラグインのSystem - contentstaticだ、こいつはあらかじめペー ジを生成してプレビューさせjoomla!CMSのスピードをアップさせるものだが、これをonにすると変更や更新がすぐプリビュー出来ずに、今回のトラブル原因究明が遅れることとなった。 通常、インフレーム内のリンクだと、まずセルフは使わず、外にリンク先を展開させる。つまりblank→top target="_top"を使うという事。外部画像も含めhtmlの変更などすぐ更新されずこのプラグインも忘れ易いので気がつくまで苦労させられた〜。それともう一つ忘れてはならない事としてブラウザのキャッシュ更新は必須です。それとアンドロイド系のパットタイプのブラウザでは下のバナーが途中で消えてしまうという不都合があるみたいだ。

 

alt

Flash内でyoutubeを表示するには…

※iphoneではflashが表示されません

 

■下記の項目横の写真をクリックするとメインの動画が再生されます。
何の事はないyoutubeの拡張機能の再現だけどFlashと連動させるAPI(Application Program Interface)を使うと色々楽しめそうだ。

●GoogleにYouTube ActionScript 2.0 プレーヤー API リファレンスが公開。
●You Tube のサイトで、このプレイヤーで再生したい動画を表示し、動画のURLから、VideoIDを取得する(書き留めるなどする)。
たとえば、http://www.youtube.com/watch?v=b5chFESy0us の b5chFESy0us の部分

《1》Flashのstageにyoutubeを表示させるscreenを作成する。
《2》そのscreenのインスタンス名を youtubePlayer とする。
《3》Flashのstageにyoutubeを表示させるボタンを作成する。
《4》そのボタンのactionscriptは以下ーインデントなしー。

on (press)
{
function checkPlayerLoaded()
{
if (youtubePlayer.isPlayerLoaded())
{
youtubePlayer.addEventListener("onStateChange", onPlayerStateChange);
youtubePlayer.addEventListener("onError", onPlayerError);
loadIndicator._visible = false;
clearInterval(loadInterval);
}
}
function onPlayerStateChange(newState)
{
trace ("New player state: " + newState);
}
function onPlayerError(errorCode)
{
trace ("An error occurred: " + errorCode);
}
youtubePlayerLoaderListener = {};
var loadInterval;
youtubePlayerLoaderListener.onLoadInit = function ()
{
loadInterval = setInterval(checkPlayerLoaded, 250);
};
youtubePlayerLoader = new MovieClipLoader();
youtubePlayerLoader.addListener(youtubePlayerLoaderListener);
youtubePlayerLoader.loadClip("http://www.youtube.com/v/指定コード", youtubePlayer);
// 注: 指定コードとは表示させたいyoutubeのアドレス(ID)コード
// 例: http://www.youtube.com/watch?v=b5chFESy0us&amp;feature=channel_video_title
//    ↓
//    http://www.youtube.com/v/b5chFESy0us
youtubePlayer._xscale = 70; // screenヨコサイズ:任意に
youtubePlayer._yscale = 60; // screenタテサイズ:任意に
stop ();
}
 

●youtubeの再生を停止させたい場合 youtubePlayer.stopVideo();を追加しないとボタンを押すたびに再生したままになってしまう

●クリックして自動再生をonにする場合 &autoplay=1 をIDに追加する。

『Flashの素材』SSPlanning.NET→
http://www.ssplanning.net/flash_works/youtube_players_on_flash.html

FLASHのお勉強→http://www.flashiroha.com/script/as95.html

 
alt
Flashによるゴルフのチャート作成

※iphoneではflashが表示されません

全体の尺は1分25秒程をスローモーション動画でドライバーの後方、正面の解析を前編として後半は7番アイアンの解析。 まずパートとしては、それぞれドライバーとアイアンの冒頭にインデックスを切ってそれぞれのシーンにスイングのアドレスからフィニッシュまでの注意点を記入。 そして、そのインデックスから注意点が挿入されているコメント及び静止画まで飛びそこからも動画をスタートさせる様にしてある。

 
<< 最初 < 1 2 > 最後 >>
1 / 2 ページ