2008.02.23一味違うFlashサイトの作り方
講師：大雅氏 フリーのWebディレクター兼デザイナーの大雅氏に、Flexをディレクター＆プロデューサー向けに分かりやすく、ご説明いただきました。本セミナーをまとめた大雅氏の詳しいレジュメは、F-site 発表資料として、下記でご覧いただけます。スライドのデータ、サンプルデータもダウンロードできます。 http://blog.taiga.jp/archives/2008/02/25/014500/ Flexとは XML文章のMXML、ActionScript、CSSを使った、RIA(リッチインターネットアプリケーション)のためのフレームワーク。多彩なビジュアルコンポーネントライブラリ、高性能なデータサービスを提供してくれる。 Flexで作れるものは、 HTMLの一部に埋め込むタイプのコンテンツ フルFlashコンテンツ いずれも、アウトプットはSWFなので基本的にはFlashと変わりない。
同一レイヤー内のムービークリップ名を一括で設定
F-siteセミナー運営に携わっている小野田さんより、「同一レイヤー内のムービークリップ名を一括で設定」できる自作JSFLを公開していただきました。 基本的な使い方は、簡単。 対象のムービークリップのあるレイヤーを選択した後、コマンドメニューから「setInstanceNames」を選択、インスタンス名を入力してOKを押すだけ。 --以下、小野田さんによるJSFLの説明です。 概要： 同一レイヤー内のムービークリップ名を一括で設定します。 インストール方法： 下記リンク先のファイルをクリック、または右クリックからリンク先のファイルをダウンロードして、 setInstanceNames.mxpを実行してください（要Extension Manager）。 動作環境： Flash Ver8以上 Windows Vista, Mac 0S両方で動作を確認しています。 XPでも動くとは思いますが、確
SWFファイルの外部読込みとMovieClip.attachMovie()メソッド
リンケージ設定された[ライブラリ]のMovieClipシンボルは、SWFに関連づけられるようです。 つまり、外部SWFファイルを読込んだとき、ロード対象のMovieClipインスタンスをターゲットにしてMovieClip.attachMovie()メソッドを呼出すと、引数に渡したリンケージ識別子はそのSWFファイルの[ライブラリ]に設定されていなければなりません。 サンプルを作成して確認する 以下のような手順でサンプルムービーを作成して、MovieClip.attachMovie()メソッドの動作を確かめてみましょう。 手順 新規flaファイルをふたつ用意し、それぞれ"main.fla"、"sub.fla"という名前で同階層に保存します。 ふたつのflaファイルに、ひとつずつMovieClipシンボルを作成し、リンケージ[識別子]を設定します。識別子名は、"main.fla"のMovieC
Papervision3D - ゲーム風サンプル
KURAGEです。 3Dモデリングデータの表示を目標に制作した、Papervision3D(PV3D)によるリバーシ風サンプルをご紹介致します。 最適化は考えずに表示優先でコーディングしましたが、それなりの速度で動いており、AS3+PV3Dのポテンシャルの高さが伺えます。 説明 PV3Dでは「ASE形式」「COLLADA形式」の3Dモデリングデータを読み込む事が可能です。 (テクスチャ画像はJPG/GIF/PNG等のFlashが扱える形式に限定されます) 本サンプルではメタセコイアでモデリング＆UVマッピングしたデータを、Autodesk 3ds Max+ColladaMaxを用いてCOLLADA形式に変換して読み込んでいます。 無償でモデリング環境を整えたい人にはBlenderがオススメです。 3Dならではの視点変更をお楽しみ下さい。 [view1]～[view4]･･･視点の変更 [H
デバイスフォントにアンチエイリアス
TextFieldでデバイスフォントを使用した場合、通常アンチエイリアスを設定する事は出来ませんが、 ActionScript+BitmapDataでアンチエイリアス処理を行う事が可能です。 一連の処理を汎用クラスに纏めましたので、以下サンプルを交えてご紹介致します。 BitmapAAText.as TextFieldをアンチエイリアス処理されたBitmapDataに変換するクラスです。 // 使い方サンプル import flash.display.BitmapData; var myAABitmap:BitmapData = BitmapAAText.getAAText(myTextField); myMovieClip.attachBitmap(myAABitmap, 100); サンプル ダウンロード サンプルfla(zip) BitmapAAText.as 既知の不具合 フォント
現在位置より1つ上もしくは下のレイヤーを選択するFlashコマンド
現在選択しているレイヤーより、1つ上、もしくは1つ下のレイヤーを選択するFlashコマンドを公開します。 概要 現在選択しているレイヤーより、1つ上、もしくは1つ下のレイヤーを選択するFlashコマンドです。 前後のキーフレームにジャンプするFlashコマンドと組み合わせて使用すると、便利かもしれません。オススメショートカットは、Alt+Shift+↑、Alt+Shift+↓です。 ダウンロード go2lowerLayer.mxp go2upperLayer.mxp ダウンロード後、それぞれのMXPファイルを実行してください（要Extension Manager）。 動作環境 Windows XP、Flash 8 Professionalで動作を確認しています。Macintosh、Flash MX 2004などでは確認していませんが、おそらく動くと思います。 使用方法 [コマンド]メニュー
ダイナミックに作成するインスタンスの型指定
タイムラインに配置するMovieClipやTextFieldインスタンスについても、ActionScript 2.0の型指定を行うことが可能です。型指定を行うと、型のシンタックスチェックが行われるほか、コードヒントを表示することができて便利です。しかし、インスタンスをダイナミックに作成する際には、注意が必要です。 MovieClipインスタンスmy_mcを予めタイムラインに配置しておいた場合、以下のスクリプトは問題なく動作します。なお、Flash(SWF)ファイルと同階層に、外部JPEGファイル"test.jpg"が配置してあるものとします。 スクリプト001■ロード用のターゲットMovieClipを予めタイムラインに配置 // フレームアクション // タイムラインにMovieClipインスタンスmy_mcを配置 var my_mc:MovieClip; my_mc.loadMovie(
笠居トシヒロの“おしえて!! Flashバナー”[2006.11.11 - 01]
Report 2006 >> [11.11] [08.26] [05.13] [02.25] 2005 >> [11.26] [08.27] [05.14] [02.05] 2004 >> [11.13] [08.07] [05.15] [02.07] 2003 >> [11.08] [08.24] [05.31] [02.01] 2002 >> [12.08] [09.07]
前後のキーフレームにジャンプするFlashコマンド
選択したレイヤーに含まれる、前後のキーフレームにジャンプするFlashコマンドを公開します。 概要 選択しているレイヤーに含まれる、次もしくは前のキーフレームに、再生ヘッドの位置を移動するFlashコマンドです。 アニメーション制作などで、複雑なフレーム編集作業を行う際に、威力を発揮します。ショートカットキーに割り当てると、さらに便利！（私はCtrl+Shift+←、Ctrl+Shift+→に割り当てています） ダウンロード go2next_key_frame.mxp go2prev_key_frame.mxp ダウンロード後、それぞれのMXPファイルを実行してください（要Extension Manager）。 動作環境 Windows XP、Flash 8 Professionalで動作を確認しています。Macintosh、Flash MX 2004などでは確認していませんが、おそらく動
AS2HTML - ActionScriptをHTMLに変換する
ActionScriptをカラーシンタックスの適用されたHTMLに変換するツール「AS2HTML」をご紹介致します。 AS2HTMLは、Flashに組み込まれているカラーリング設定ファイル(AsColorSyntax.xml)を利用し、Flashのコードエディタとほぼ同等のカラーシンタックスを施したHTMLを生成するWEBツールです。 使い方は簡単で、変換したいActionScriptソースを貼り付け、変換ボタンを押すだけでカラフルなHTMLを生成出来ます。 また、行番号を付加したり、出力するタグ形式を設定する事も可能です。 ブログやフォーラムにActionScriptソースを投稿する際にお役立て下さい :-p → AS2HTML Flash版 → AS2HTML JavaScript版 この記事にコメントを書く 記事に対するテクニカルな質問はご遠慮ください（利用規約）。 名前（必須）：
OnEnterFrameBeaconクラスを使う
Flash MX 2004およびFlash 8には、OnEnterFrameBeaconというクラスがあります。このクラスのOnEnterFrameBeacon.init()というメソッドを呼出すと、MovieClipにリスナーオブジェクトが登録でき，MovieClip.onEnterFrameイベントを受取れるようになります。 その場合の利点としては、第1にMovieClip以外のオブジェクトを使ったスクリプトで、MovieClipインスタンスをつくらずにMovieClip.onEnterFrameイベントが受取れることです。第2に、複数のfunction(関数)を組合わせてMovieClip.onEnterFrameハンドラで処理をしたいとき、MovieClipインスタンスをいくつも使いたくないという場合も考えられます。本稿では、第1の場合のサンプルスクリプトをご紹介します。 1. O
#includeが正しく動作しない
マニュアルどおりに書いたなら マニュアルはきちんと読みましょう。これが開発の基本です。さらにつぎのステップは、マニュアルを鵜呑みにするのはやめましょう。「ActionScript辞書」で#includeの項には、そのシンタックスがつぎのように記載されています。 #include "filename.as"; このとおり正確に記載してスクリプトを実行すると、エラーになります。「#include指示子の書式が間違っています」というのです。こう書けといわれたとおり書いたのに、「間違っています」というのは納得いきません。最初にこのエラーに遭遇すると、ハマりがちです。実は、正解はオンラインヘルプでは、「ActionScriptリファレンス」の方にあります。オンラインヘルプあるいは『ActionScriptリファレンスガイド』に、「ActionScriptについて」という章があり、「アクションパネルの
ケシコミのテクニック
この記事へのコメント ●1.うきわかもめ（2005年12月07日 18:25） ケシコミは以前から知ってる手法だったので、特に興味が湧かなかった(申し訳ないです)が、実際のテクニックをみてすごく勉強になりました。 やっぱり、いろんな方法で書き込むことができるんだと改めてFlashの奥深さも感じました。 ありがとうございました。 ●2.Adol（2005年12月07日 21:42） Flashでの表現の仕方までは知っていましたが、 タイミングの調整が難しくて、思ったようには出来ませんでした。 実際に手書きで書いて見るところからはじめるとは・・・。 私もまだ修行が足りないですね。 興味深い記事を。ありがとうございました。（・∀・）ノシ ●3.とと（2005年12月27日 18:47） ありがとう、分かりました
【XML連携】円グラフの描画
現場で使えそうシリーズ。外部XMLと連携した円グラフの描画です。 XMLを読み込んで表示しています。最初、全てスクリプトで作ってみたのですが、描画にやたらCPUを使わせてしまって重かったので、3.6度(1%分）の扇型MCを作りそれをattachMovieで使いまわすことで動作を軽くすることが出来ました。 XML側では、要素名、グラフの色、数値を指定できるようにし、FLA側では初期設定部分で、円グラフの半径、中心点、影つけるかを設定できるので割りと使い回しが効くと思います。但し、実際使う場合はXMLのキャッシュ対策は必要です。 //========== //data.xml <?xml version="1.0" encoding="utf-8"?> <items> <item id="1" name="Firefox" num="53" color="ffffff" /> <item id
F-site | クロスOSなマウスホイールアクション
MX 2004にて追加されたonMouseWheelですが、MACでイベントを取れないという致命的な面があり、対応策としてaddCallbackの使用法を紹介します。 手法としてはJavaScriptで値をaddCallbackに渡します。 公開直前微調整で不具合が出てしまっていたようです。 現在復旧完了しました。 使用したサンプルはこちら http://www.muraken.biz/f-site/scroll JavaScriptに関してはこちらをご参照ください。 ▽AS側の記述▽ import flash.external.*; var methodName = "handleScrollEvent";//JavaScriptからの呼び出し名 var instance = null; var method = scrolling;//実行function名 var wasSucces
FLASHレイヤーの可能性を考える。その１
先日発表した”レイヤーを使用したFull Flash”のスクリプトをさらに応用してマルチメディアプレーヤーにしてみました。 前回の記事を知らない方は、今回はそれの応用ですのでこちらを先にお読みください。 前回も文頭で触れましたが、僕はレイヤーの復権はPOPUPに変わるものだと考えます。 ですから、POPUPと言えば・・・と、まず考えてみます。 写真・・・音楽・・・メディアプレーヤーが立ち上がるのもそうか。。。 お、待てよ？これ全部FLASHで外部読み込み出来るじゃん！ というわけで、今回の製作物はマルチメディアプレーヤー（おまけ付き）です。 何がおまけ付かというと、せっかくFLASHなのでテキストの読み込みもつけてみました。（いらないだろ と、いうわけでまずはこちらをご覧ください。 （今回、外観、動きなどは時間省略のため割愛気味です。最後にソース公開するので、好きなようにいじってみてくださ
レイヤーを使用したFull Flash
最近PopUpに変わって需要の出てきたレイヤー。写真を載せるのはよくありますが、そのFlash版を誰でも簡単に使用できるスクリプトを組んでみました。 最近写真をレイヤーで見せるのが流行ってますよね。（POPUPブロックの影響によるPOPUP代わりみたいなものでしょうが。） そういうものはJavaScriptが結構公開されているのですが、FLASHはないですよね。（使用したもの自体、見ることもまだあまりないですね。） そういうわけで組んでみました。 まずは下記URLをご覧ください。 http://www.muraken.biz/overlay/overlayflash.html（”ここをクリック"のところをクリックしてみると、実行されます。） 今回、これを簡単に作れるスクリプトを組みました。 JavaScriptに関しては文末にてソースを置いておきますが、説明するとかなり長くなるので割愛いた
FlashLiteな便利マップ
8/26のF-siteセミナーで、「はじめてのFlash Lite」の講師で評判だった梅原＠水玉製作所さんから、Flash Liteをぐんと身近に感じるコンテンツが届きました。太っ腹なサンプルデータも付いているので、ぜひ挑戦してみてね。 梅原＠水玉製作所さん presents 「FlashLiteなマップ」 http://mztm.jp/umhr/f-site/map.swf 仕様 ・参宮橋駅、代々木八幡駅からの 国立オリンピック記念青少年総合センターまでの地図 ・案内通りにテンキーを押していくと、正門まで迷わないよ！ ・「＃」で順路、「＊」でundo 生Flashデータ 使用上のご注意： ご使用は自己責任にてお願いいたします。 本データの利用、あるいは利用できないことによって発生した損失や損害に対して著者ならびにF-siteは一切責任を負いません。 この記事へのコメント ●1.ヒスオ（2
リバーシ for FlashLite1.x
F-siteセミナーの超常連さんが今週（2006.8.26開催）のF-siteセミナーネタにあわせて、FlashLiteで作ったリバーシ(オセロ)をリメイクしてくれました。PC用もあるので、ぜひ試してみてね。 KURAGE(´ー｀)is e.さん presents 「リバーシ for FlashLite1.x」 特徴 ・４人対戦 FL1で複雑な思考ルーチンを組むのは至難なので、 複数CPU対戦で高難易度を実装。１ターンで死ぬ。 ・携帯とPC両対応 テンキー上下反転するだけだけどな。 遊ぶ ・ＰＣから http://qurage.net/labo/fl1/data/reversi.html ・携帯から http://qurage.net/labo/fl1/data/reversi.swf ・携帯(au)から http://qurage.net/labo/fl1/
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
