図8: スタイルパレットを使ってスタイルの管理・閲覧を行います。
複数のオブジェクトのスタイルを変更したい場合は、単に1つのオブジェクトのスタイルを変更して「スタイルを再定義」を選べば、すべてのオブジェクトが新しいスタイルに更新されます(図9)
スタイルは他のオブジェクト用にも記録され、別の開いたドキュメントにあるオブジェクトも使うことができます。
似たような見た目のスタイルだと、スタイルパレット上の小さなアイコンでは区別しにくいのですが、その場合はパレットの下側に表示されるラベルをみるといいでしょう
図9: オブジェクトを変更してスタイルを再定義すると、ドキュメント内のすべてのオブジェクトが更新されます。
シンボルの編集
インタラクションデザイナーがしっかりとシナリオファイルをセットアップしていれば、頻繁に使うオブジェクトはシンボル化されているはずです。シンボルを編集モードにするには、ダブルクリックするだけです。周りの背景が半透明になり、その場でシンボルを編集することができます。
キャンバスをダブルクリックすると、編集内容が確定し、元の画面に戻ります(図10)
図10: 長方形のシンボルをダブルクリックして開き、その場で編集します。
ベクターとパスパレットを使ったピクセル精度
Fireworksはベクターベースのプログラムなので、アイコンをデザインするツールとしては最適です。シンプルなものから、グラフィカルなもの、かなり緻密なものまで、すべてのタイプのアイコン作成に使えます。
しかし、PhotoshopからFireworksに乗り換えたばかりの頃は、パスパレットの手助けがないと、ピクセルでの作業にフラストレーションを感じるでしょう
このパスパレットは、Fireworksでピクセル精度の作業を行う上で最も重要なツールの1つです(図11)
パスパレットの効果を実感していただくために、仮に図12のようなフォルダアイコンを作成しました。32ピクセルの標準的なアイコンです。この16ピクセルバージョンを作成するとします。アイコンをスケールダウンすると、シェイプのアウトラインがぼやけてしまいます。もともとパスはソフトなラインであり、エイリアス(ギザギザ)になるようになっています。それをスケールダウンすると、ポイントがピクセル端の正確な位置にないため、ラインがぼやけてしまうのです。そこで、オブジェクトのポイントを選択し、パスパレットから「ポイントをピクセル単位に丸める」ツールを選ぶと、ラインがシフトして再びシャープでエイリアスなラインになります。図12: 正確なラインを描画するには、パスパレットの「ポイントをピクセル単位に丸める」ツールを使います。パスパレットの選択ツールは非常に役に立ちます。すべてのポイントをピクセル単位に丸めるときは、まず「すべてのポイントを選択」ツールを使えばいいのです。
角丸ボタンのようなオブジェクトの幅を広げたいときには、「右のポイントを選択」ツールを使って、ボタンの右端のポイントを選択するだけです(図13)
あとは、右カーソルボタンだけを使って、素早くボタンの幅を広げることができます(Shiftキーを押しながらだと、10ピクセル単位で広がります)
図13: ポイント選択ツールを使えば、オブジェクト上のポイント選択を素早く行うことができます。
また、キーボードショートカットダイアログボックスで、これらの作業にショートカットを割り振れば(たとえば、「Ctrl+6」で右側のポイントを選択)、さらに便利でしょう
また、「ポイントをまっすぐに」ツールや「ポイントのスムージング」ツールを使えば、複雑なシェイプもシンプルにすることができます。パスパレットの中には、私はそれほど使っていませんが、他にも便利なツールがあります。
共有ライブラリパレットと9スライスでコントロールにパワー注入
それは、共有ライブラリパレットです。これは、ライブラリパレットを拡張したもので、共通UIコントロールが入っています。UIコントロールのラベルやステートはキャンバス上で直接操作することができます。com* からダウンロードできます。標準的なUIコントロールが多数入っており、キャンバス上にドラッグして使うことができます。WinXPフォルダからチェックボックスを選んで、キャンバス上にドラッグしてみてください。すぐにラベルとチェックボックスが表示されます。シンボルプロパティパレットを開いて、使用可能ステートを trueからfalseに変更して、チェックボックスを不能にすることができます。
また、Textフィールドをクリックしてラベル名を変更したり、stateフィールドのメニューを変更してチェックボックスをチェック済み状態にすることもできます(図15)
図15: シンボルプロパティパレットでは、ラベルやテキストスタイル、カラー、ステートなどを編集することができます。インタラクションデザイナーは、見た目を気にせず、このUIコントロールを使ってシナリオを作成することができます。また、これらのシンボルには9スライスが実装されているので、実際のオブジェクトを触ることなく、テキストフィールドの幅などを編集することができます。こうした柔軟性があるおかげで、インタラクションデザイナーは、見た目を気にすることなく、素早くコントロールを追加していくことができるのです。これら共有ライブラリのシンボルは好きなスタイルにカスタマイズできますし、オリジナルのアイテムを共有ライブラリに入れることもできます。ただし、それぞれの共通シンボルは、特別な名前を付けたオブジェクトを含んでおり、その名前をコードから参照しているので、変更しないように注意してください。素早く、ライブフィルタで洗練させる。デザインを洗練させていく課程で、色やテクスチャといったビジュアル要素は何度も調整するものです。うれしいことに、Fireworksにはライブフィルタという機能があり、こうした調整作業を手助けしてくれます。プロジェクトの最後の仕上げの作業の1つとしてよくあるのが、ボタンの状態作成です。
ノーマル/デフォルト/マウスオーバー時/不能時/マウスクリック時など
各状態を一から作っていくのは面倒です。
そこで、ライブフィルタを使って、ノーマル状態のボタンにフィルタを追加/削除して各状態を作ります(図16)
たとえば、ドロップシャドウを付けた白いボタンがあるとします。このボタンの不能時の状態を作るには、まずドロップシャドウのフィルタを取り除いて、透明度を高くするだけです。図16: ライブフィルタ(ドロップシャドウ、色相・彩度、レベル補正、カーブなど)を使って、見た目を素早く調整し、各種状態を作成することができます。デザインを洗練させていく課程で、デザインが変わってしまうことはしかたのないことです。
こうしたツールがあれば、デザイン調整によりスムーズに行え、新しいアイデアをチームやクライアントと共有して検討することができるでしょう
構造やビヘイビアのドキュメント化
デザインの形が見えてきたら、細心の注意を払って、そのデザインがどのように機能するのかをドキュメントとしてまとめます。
デザインコミュニケーターは、シナリオのフローに沿ってインターフェイスのビヘイビアを議論する立場にいます(図17)
シナリオのフロー、そしてインターフェイスやそのビヘイビアを文書にまとめています。私たちは、デザインをドキュメント化するにはInDesignを使用しています。そうして、情報たっぷりの分厚い冊子ができるわけです。書き出しコマンドを使えば、ドキュメントやプレゼンテーション用にデザインの最終結果を取り入れるのは簡単です。
メニュー「ファイル>書き出し」を選んで、書き出しメニューから「フレーム(ステート)をファイルに変換」を選ぶだけです(図18)
また、イメージプレビュー(Ctrl+Shift+X))からも書き出すことができ、その場合、クオリティを確認しながら書き出すことができます。
スタイルガイドのドキュメント化
その内容には、ブランド、色、タイボグラフィー、イメージなどの情報が含まれています(図19)
図19: ビジュアル要素のドキュメント
レイアウト、ブランド、色、タイポグラフィ、アイコングラフィ、コントロールなどのビジュアルスタイルガイドを解説しています。Fireworksは、効率的にグラフィックを生産できることでも有名です。通常、ドキュメント用にはフル画面で書き出しますが、個々のパーツで依頼されることもよくあります。もし、ファイル内で几帳面にしっかりとグラフィックパーツのシンボル化を行っておけば、ドキュメントライブラリから簡単に書き出すことができます。特に、スライスなどが必要のないアイコンなどのグラフィックには最適です。
書き出しの方法は簡単で、ライブラリパレットのオプションメニューから「シンボルの書き出し」を選ぶだけです(図20)
図20: ライブラリパレットのオプションメニューから「シンボルの書き出し」を選んで書き出します。
Java SwingやWebなどの特別なメディアに最適化する必要があるグラフィックが大量にある場合は、バッチ処理を使うといいでしょう
Photoshopのコピースタンプツールを使ったフォトレタッチ能力には他にはない優れたものですが、他のレタッチ能力(レベル補正、カーブ、マスク)についてはFireworksの方が管理しやすく、フィルタのおかげもありアンデュも簡単です。Fireworksのずっと指摘された弱点として「タイプエンジン」がありますが、CS3ではアドビタイプエンジンを実装し弱点を克服しています。
さらに学習したい方へ
Cooperでは、ベストなツールを使うために、何年にも渡り、競合製品も含めて評価・再評価を繰り返してきました。インタラクションデザインやビジュアルデザインにおいては、Fireworksを使えば生産作業を最低限に抑えることができ、その分クライアントにとって素晴らしいプロダクトをデザインすることにフォーカスすることができます。Cooperの手法をもっと知りたい方は、以下のリンクを参考にしてください。ガイドパネルを使ってオブジェクトを完璧なピクセル単位でレイアウトする方法や、リッチシンボルを使ってFireworksドキュメント内の要素を素早く作成・編集する方法を解説してます。
著者について
Cooperの主任ビジュアルデザイナーとして、デジタルプロダクト/Webサイト/デスクトップアプリケーションにおいて魅力ある印象的な経験を企業に提供している。また、ビジュアルデザインに関する教育/研究/執筆も手掛ける。
ただ、一番楽しんでいるのは、小売り/ポートフォリオマネージメント/患者管理/写真共有など幅広い領域で企業が永続的な結果を築けるように手伝うこと
趣味はランニング
日々、世界が少しでもよりよい場所となるように努力している。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
印刷用に表示
CSS スプライト作成に便利な拡張機能
CSSスプライトは、複数の画像を1つにまとめてCSSのスタイルで部分的に表示し使い回す手法です。
CSSスプライトの仕組み
CSSスプライトはたいてい、今まで独立した1枚画像にしていた部分や画像置換※で表示していた画像と置き換えることができます。
※ 画像置換:HTMLにテキストだけを記載しておいて、CSSのスタイルで文字を隠し、その代わりに画像を表示しているように見せる手法
画像をHTMLからimg要素で呼び出している時とは違い、CSSでデザインを変更したときに一緒に見た目を変えることができるのでデバイスに合わせた幅で表示したい場合にもHTMLを変更する必要がないので便利です。例えば、既存のサイトにCSSスプライトを適用する場合、サイト内のどの画像をCSSスプライトの対象にするか決定し、選択した画像を1枚の画像になるように並べ、画像の一部分を表示するためのHTMLとCSSを記述します。
図:CSSスプライトの適用イメージ
コード:画像を切り取るCSSの例
コードをみてわかるように、CSSスプライトのCSSスタイルでは表示ターゲットになる画像の配置位置と幅・高さをそれぞれのスタイルに記述する必要があります。通常Webサーバはファイル1つに対して1回以上のリクエストを受け取るので画像の数を1枚にして使いまわせば、Webサーバの負荷が減り、リクエストをしなくて済み、ブラウザ側の表示も速くなるので、Webサイトの表示速度を上げるのに大変有効です。ニュースなどで実際に使われており注目を集めています。
CSSスプライトまとめ
画像の枚数が減ってサーバへのリクエスト回数が減る。読み込み済みの画像を使いまわせるので、表示も速くなる。
CSSのスタイルを定義するとき、それぞれの座標とサイズが必要になり設定が大変
メンテナンスが大変になりがち
やり方によっては、CSSが有効で画像を非表示にしている環境で何も表示されなったり、検索エンジン最適化で不利になる場合がある。実際にCSSスプライトを使用するには、大量の画像を重ならないように配置をしたり、デザイン変更や差し替えによって配置や大きさが変わった数だけCSSスタイルを再び記述します。大きなメリットがある一方で、CSSスプライト用CSSや画像の作成・メンテナンスは、手作業で行うには大変な作業が必要なことがわかります。
このような作業のうち、特に機械的にできるCSSスタイルの記述が自動で書き出せたり、ある程度画像を自動的に配置できれば、作業上のミスも減り速度アップできるのではないでしょうか
著者について
2000年からいくつかの企業に在籍し、Webサイト制作、運営、ディレクションを経験し、制作を中心に活動したくなり2005年にフリーランスとして開業
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
プロジェクトファイルの編成と準備
jsfファイルの更新
Flexコンポーネントの書き出しとカスタマイズ
このチュートリアルの前の節では、RichTextEditorという新しいシンボルを追加して共有ライブラリを更新しました。次は、このシンボルを編集して、Flex 2のカスタムコンポーネントの作成を開始します。カスタムシンボル/RichTextEditorシンボルを新しいドキュメントのキャンバスにドラッグ&ドロップします。
キャンバスのRichTextEditorシンボル(左)と、レイヤーパネルのレイヤー1に表示されたレイヤー要素とシンボルの小さいアイコン(右)
レイヤーパネルに相当するシンボル要素が表示されます。Fireworks CS3のリッチシンボル/Widgetの要素は、ユーザベースの要素のインタラクティビティの一部を新しいシンボルプロパティパネルに表示します。リッチシンボルのシンボル/Widgetの要素から直接アクセスして、Flex 2の特定のビジュアルコンポーネントのプロパティやスタイルとのインタラクションを更新することができます。この例では、シンボルの要素を編集してリッチテキストエディタを更新できます。ビットマップのシンボル/Widgetのレイヤー要素は単なるバックグラウンドグラフィックで、非インタラクティブな要素です。このチュートリアルでは、ダウンロードして利用できるサンプルファイルに含まれている簡単なビットマップイメージで十分です。描画ツールを使用して、リッチテキストエディタFlexコンポーネントのインタフェース用に独自のバックグラウンドイメージを作成できます。ただし、次の3個のレイヤー1シンボル要素は、ユーザインタラクティビティを提供するために更新できるFireworksのテキストオブジェクトです。タイトルシンボル要素はコントロールラベルに対応します。htmlTextシンボル要素はインタラクティブなプロパティで、リッチテキストエディタのTextAreaサブコントロールを反映します。シンボルを編集ウィンドウペインの上部にある「Done」ボタンをクリックして終了し、ドキュメントビューに戻ります。
シンボルの要素を確認したら、スタータースクリプトを作成したり編集したりして、3つのFireworksテキストオブジェクト要素をシンボルプロパティパネルで設定できます(図5を参照)
RichTextEditorシンボル(左)のテキストオブジェクト要素にインタラクティビティを追加するシンボルプロパティパネル(右)
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
Fireworks 8 には最新のクリエイティブツール、インタラクティブデザイン機能、モバイル用アセットなどが含まれ、Web デザイナー / デベロッパーが Web サイトやモバイルコンテンツのための画像をさらに素早く作成、編集、最適化することを支援します。Fireworks に搭載されている業界最先端の最適化ツールは、画質と圧縮効率の絶妙なバランスを提供します。プロフェッショナル仕様の Web グラフィックや、ロールオーバー、ポップアップなどのアニメーション効果は、プログラミング知識なしでも Fireworks の視覚的なツールを利用して簡単に作成できます。CSS 形式のポップアップメニューを作成できます。Fireworks 8 を利用すれば、CSS (カスケーディングスタイルシート) 形式のインタラクティブポップアップメニューが作成できます。できあがったコードは、体裁が整い、容易にカスタマイズできるだけでなく、Dreamweaver で作成したサイトに素早く統合できます。大幅にパワーアップしたブレンドモードで、まったく新しいクリエイティビティに挑戦できます。オブジェクトが重なったときの色の見え方を変化させるブレンドモードが新しく 26 種類以上も追加されています。これにより、今まで Fireworks だけでは不可能だったビジュアル表現にも、思いのままにチャレンジできます。また、Flash にオブジェクトを取り込む際、ブレンドモードがそのまま維持されるようになりました。
26 種類以上もの新たなブレンドモード
焼き込み (カラー)
焼き込み (カラー反転)
焼き込み (ソフト)
覆い焼き (カラー)
覆い焼き (カラー反転)
覆い焼き (ソフト)
画像のバッチ処理機能を改善しました。バッチ処理では、要望の多かったいくつかの機能を改善しています。ファイル名を容易に変更するプロセスや、画像サイズのバッチ処理中に画像の寸法を確認する機能、新たなステータスバーとログファイルなどを新たに搭載しています。Fireworks と Flash の間でオブジェクトをやりとりする際、塗り、線種、フィルタ、ブレンドモードといったベクター形状の属性がそのまま維持されるようになりました。作業の流れがさらにスムーズになります。頻繁に繰り返されるワークフローにさまざまな改良を加えているので、生産性がさらに向上します。[名前を付けて保存] コマンドを利用して、さまざまなファイル形式が保存できます。テキストのレイヤー名には、打ち込んだテキストが自動的に設定されます。最近使用したフォントがフォントリストの上部に表示されます。また、最適化の設定は、前回使用したものが自動的に表示されます。グリッドが Flash の作業環境同様に色の薄い点線で表示されるようになりました。パスにテキストを結合してからでも、パスを再編集できるようになりました。QuickTime 経由でさらに多くのファイル形式を読み込めるようになりました。数値を入力してオートシェイプをより正確に制御できます。[オートシェイプのプロパティ] パネルが追加されているので、「ドーナツ」「星型」「矢印」などのオートシェイプの形状を数値で詳細にコントロールできます。
新搭載の [オートシェイプのプロパティ] パネル
より直感的にパス、フィルタ、各種設定を選択できます。選択したアイテムを編集可能なベクターパスに変換することと、その逆の操作が可能です。また、選択したアイテムに適用したフィルタや各種設定はその場でプレビューできます。さらに高速に作業を進められます。特殊文字の挿入と画像編集のための新たなパネルや、作業スペースをカスタマイズするためのより多くのオプションを搭載しています。また、ボタン、アニメーション、テーマ、モバイル開発のための最新のサンプルコンテンツが、コンテンツ制作時により豊富な選択肢を提供します。
新搭載の [イメージ編集] パネル
シャドウエフェクトを利用して洗練されたグラフィック効果を追加できます。新しいシャドウコマンド([コマンド] - [クリエイティブ] - [シャドウを追加])を利用すれば、パスやテキストオブジェクトにも影がつけられます。また、ソリッドシャドウ([コマンド] - [クリエイティブ] - [シャドウを追加])を利用すれば、オブジェクトを背後に何度もスタンプしたような効果が得られ、擬似 3D のようなデザインが容易に作成できます。Fireworks と Flash 間のベクター形状の互換性を強化しているので、ドロップシャドウの付いた画像をそのまま両アプリケーション間でやりとりできます。
新たなシャドウエフェクト
その他の新機能については、Fireworks の製品ページを参照してください。また、製品のリリースにあわせて新機能に関するチュートリアルを公開する予定ですので、Fireworks デベロッパーセンターも忘れずにご覧ください。
著者について
Mac インターネットサービスのプロダクトマネージャーの一員を務める。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
森房 卓史(もりふさたかし)
Fireworks CS4は、パフォーマンスの向上、そして痒いところに手が届く数々の新機能、機能強化が含まれ飛躍的に品質向上を目指して開発が進められております。今日におけるRIA(リッチ・インターネント・アプリケーション)の開発におけるデザイナー・デベロッパーワークフローでは、Fireworksは無くてはならない存在になっております。現在ベータ版ですので、機能の中には正確に作動しない個所もございます。また、最終的な製品版では機能の仕様変更などがあるかも知れませんので、ご了承ください。
よりハイレベルのプロトタイプ制作
日本のwebグラフィック・デザインの現場にてインタラクティブなプロトタイプデザインをされている方は少ないかもしれません。今後益々、RIA(リッチ・インターネント・アプリケーション)の需要が高まっていく中、クライアントに静止画像のプロトタイプで説明するのでは余計に時間がかかったり、自分の意図するニュアンスをうまく伝えるのは難しくなってきております。入札コンペなどでライバルに差をつけるためには、インタラクティブなプロトタイプデザインの重要性は日々増しております。
一度デザインしたものを多方面で再利用
Webサイトデザインの工程で、いきなりグラフィック・アプリケーションを立ち上げて絵を描き始めることはまずないでしょう
クライアントと協議中にノートに書くラフな手書きのスケッチ、プレゼンテーション用のプロトタイプ画像、設計書用のワイヤーフレーム、そして実際にプロダクション作業にかかると、納品用の画像の制作などがあると思います。それぞれの工程のために違ったアプリケーションを使用したり、ファイルを1から作り直したりするのは、非常に非効率的です。ページ構成や、ワイヤーフレームについてクライアントからコメントを頂いたり、印刷書類を生成するのに便利な「PDFへの書き出し」が可能です。そして、最終的な納品用の画像では、Photoshopのファイルの読み込み、書き出し機能の強化が挙げられます。
プレゼンテーション、設計図作製の強化
ブラウザーで、再生、早送り、巻き戻しの制御が可能です。勿論、「PDFに書き出し」したファイルにもそのリンク情報がそのまま残りますので、インタラクティブなプレゼンテーション資料をクライアントに配布も可能です。PDFでは、パスワード制御により、ファイルの印刷、編集制限もできるので、機密保持には重宝します。「PDFへの書き出し」ができることにより、EメールにPDFを添付して送り、先方にフィードバックのコメントを付けて頂いてEメールで送り返して頂き、修正するというワークフローも可能になりました。
クライアントからカラーマネージメントされたPhotoshopのPSDファイルを送られて来ることもあるでしょう
納品用のグラフィックファイルも、PSDファイルを要求されることもあるかもしれません。もちろんPhotoshopとほぼ同じアンチエイリアス効果も再現できますので、特に日本語の小さいフォントサイズの文字でも奇麗に表示できます。それから、ICCプロファイルを埋め込まれカラーマネージメントされたPSDファイルを読み込んだ場合でも、きちんと色を再現し表示できるようになりました。
これらのプレゼンテーション、ワイヤーフレーム制作、PDFへの書き出し、Photoshop PSDファイルとの親和性の強化により、Fireworks CS4は、一度作ったファイルをどんどん熟成させて行くことにより無駄になる工程を大幅に減らし、作業効率を飛躍的に向上するのに貢献できるでしょう
迅速に、正確に、簡単に、ワクワク楽しくお仕事
それだけでなく、Fireworksは、使っていて心の底からワクワク楽しいツールです。
ロジカルな部分での効率は計れますが、やはり人間生き物ですから、心理的な部分が効率に影響する部分も大きいのではないでしょうか
現在のFireworks CS3では、Flashでおなじみのシンボルを使い9スライスを設定して角の四隅のグラフィックに変更せずに、拡大・縮小できることは、迅速にプロトタイプを制作するのに便利になりました。特に角丸の四角形をリサイズしても、角丸が崩れないので、一度使うと病みつきになってしまうツールです。角丸については、今までパーセントでしか指定できなかったですがpxで指定できるようになりました。共有ライブラリーに、ボタンやチェックボックスなどのコンポーネントがあり、コンタクトフォームのプロトタイプを作るのに便利なものが揃っております。「Smart Guides」は、オブジェクトをより迅速に簡単に思った通りのレイアウトを構成するのに頼もしい機能です。ちょうどよい塩梅にスナップするので、「お弁当箱に具を詰め込む」感覚でwebサイトのレイアウトデザインをお楽しみください。「Styles panel」は、フォルダ構成により制御がしやすくなり、スタイルを書き出してチームメンバーで共有することにより、一括した作業環境を構築することも可能です。
「グラデーション」では、グラデーションのハンドルをカンバス上でマウスでドラッグするとライブで描画されるので思った通りのグラデージョンを視覚的に確認しながら作ることができるので、大幅に時間を節約することができるでしょう
これらの新機能、機能改善により、一層使いやすくなり、そして新たな使い方の増えた Fireworks CS4 パブリック・ベータ版を是非お試しください。現在ベータ版ですので、機能の中には正確に作動しない個所もございます。また、最終的な製品版では機能の仕様変更などがあるかも知れませんので、ご了承ください。
著者について
森房 卓史(もりふさたかし)
常に「お客様第一」を唱えつつ、品質改善、パフォーマンス向上、使い易さを最重視した製品作りを心がけています。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
アイデアをワイヤーフレームにまとめる。
最初のデザインの作成
印刷用に表示
このチュートリアルでは、Adobe® Fireworks® CS4 を使用して、ページの最初のデザインの草案作成から、ワイヤーフレームの作成、最終的なデザインの作成に至るまでの Web サイトアプリケーションを作成する手順について説明します。必要なツールと使用方法がすべて掲載されているので、本チュートリアルをお読みいただければ、すぐに Fireworks CS4 を使用した Web サイトの作成を始められます。同社はカーシェアリングサービス会社で、車を予約をして数時間または数日間車を共同利用できるサービスを同社の会員に提供しています。Web サイトでは、見込み客に対するカーシェアリングサービスの紹介を掲載したり、会員が車の予約やアカウントの管理を行えるインターフェイスを提供したりする必要があります。
Fireworks で作業を始める前に、インターフェイスに慣れておきましょう
慣れるには、インターフェイスを使いやすいように自由にカスタマイズしておくと効果的です。Fireworks を使用していくにつれ、独自のワークフローでの必要性に合わせてインターフェイスを調整し、さらにカスタマイズを行っていくことが必要になる場合もありますが、ここでは作業を始めるためのヒントをいくつかご紹介します。「一般」カテゴリで、「最大取り消し回数」の回数を 80 以上に変更します。ブラシでストロークを描画するなどの細かい編集を行っている場合に、編集を取り消そうとしてもすぐに設定した回数を超えてしまいます。「最大取り消し回数」の数値を高く設定することで、柔軟に操作を行えるようになります。「編集」カテゴリで、「シンプルカーソル」を選択します。これを選択すると、すべてのツールに対してカーソルが標準型のアイコンではなく、十字型に切り替わります。これにより、作業の精度を高めることができます。
パネルの整理
利用できるすべてのパネルを理解することで、より効率よく作業を行うことができます。
パネル名のみが表示されているアイコンモードを実行してみましょう
画面の右上隅のグレーのバーにあるドロップダウンメニューから、「アイコンモード(パネル名付き)」を選択します(図 2 を参照)
「展開モード」の横にある下向き矢印をクリックして、「アイコンモード(パネル名付き)」を選択します。このモードでは、標準のパネルがすべて表示され、必要に応じて選択できます。作成するデザインの種類により、頻繁に使用するパネルは異なります。カラーパレットパネルは、カラーを操作する際に便利な、高度なインターフェイスです。パスパネルは、ベクトルを使用する際に役立ちます。情報パネルとパスパネルは、頻繁に使用するので、アクセスしやすい場所に配置してください。チュートリアルの後半では、ワークスペースの整理について、他の推奨される方法について説明します。定規を表示すれば、ドキュメント上でドラッグしてガイドを表示することができます。ガイドは優れたデザイン支援ツールですので、Fireworks で作業する際は、定規を表示させておくことをお勧めします。Fireworks でドキュメントを開いていないと、定規が表示されないことがありますのでご注意ください。定規を表示するには、表示/定規を選択します。
著者について
この記事は、アドビ システムズ社の著作物です。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
アイデアをワイヤーフレームにまとめる。
最初のデザインの作成
アイデアをワイヤーフレームにまとめる。デザインはアイデアから生まれます。アイデアを紙にスケッチする場合もあれば、頭で想像するだけの場合もあります。どちらの場合でも、ワイヤーフレームの形式でアイデアをまとめてから、デザインし始めるのが得策です。ワイヤーフレームを使用すると、デザインの細部まで気にせずに、柔軟に変更を加えることができます。また、早い段階でデザインの方向性に関してクライアントの承認を得ることも可能になります。この節では、アイデアをラフスケッチにして、そのスケッチをシンプルでありながら柔軟なワイヤーフレームに変換する手順を説明します。それと同時に、Fireworks CS4 に備わっている、生産性を向上させて制作時間を短縮させる新しい機能をいくつか紹介します。
新規ドキュメントの作成
ファイル/新規作成を選択します。新規ドキュメントダイアログボックスで、カンバスの幅を 1024 ピクセル、高さを 640 ピクセルに設定します。カンバスカラーを白に設定します。
スケッチの読み込み
ファイル/読み込みを選択します。
サンプルファイルがあるフォルダを指定し、sketch
jpg ファイルを選択します。カンバス上の左上隅の位置(0,0)で直角型のカーソルをクリックし、読み込んだスケッチをその場所に配置します。スケッチがカンバスの水平方向の中央に配置されます。
また、ファイルシステムからファイルをカンバスにドラッグ&ドロップすることもできます(図 3 を参照)
読み込んだスケッチがカンバスの水平方向の中央に配置されます。
ガイド、スマートガイドおよびツールヒントの使用
正確なレイアウトを簡単に作成するには、ガイドとツールヒントを使用します。表示/定規を表示を選択して、定規を表示します。表示/ガイド/ガイドにスナップを選択して、ガイドへのスナップを有効にします。表示/スマートガイドを選択して、スマートガイドを有効にします。「スマートガイドを表示」および「スマートガイドにスナップ」を選択します。表示/ツールヒントを選択して、ツールヒントを有効にします。上部の定規から、横方向のガイドをカンバスにドラッグします。ツールヒントを使用して、ガイドを 76 ピクセルの位置に正確に配置します。2本目の横方向のガイドをカンバスにドラッグして、604 ピクセルの位置に配置します。ヒント:ガイドをドラッグしながら(またはガイドをカンバスに配置した後)Shift キーを押すと、現在のガイドとその他すべてのガイドと、カンバスの端の間の距離が表示されます。読み込んだスケッチを選択して、メインコンテンツエリアの上下が、直前にカンバスに配置した 2 本のガイドの間におおよそ収まるようにスケッチを配置します。
レイヤーパネルで、スケッチオブジェクトの隣の 2 列目をクリックし、レイヤーをロックします(図 4 を参照)
ワイヤーフレームの要素を配置する際に、このスケッチのレイヤーを背景として使用します。左から 2 列目をクリックして錠前アイコンを表示させ、レイヤーをロックします。
ワイヤーフレームのレイアウトの作成
ワイヤーフレームの作成では、基本の長方形の描画とテキストを使用します。まず全体的なレイアウトを決定してから、完全なデザインを追加します。レイヤーパネルの下部にあるレイヤーの作成/複製ボタンをクリックして、新規レイヤーを作成します。ツールボックスで、「ベクトル」グループの長方形ツールを選択します。プロパティパネルの塗りの種類ドロップダウンメニューで、リストから「なし」を選択します。ストロークのカラースウォッチをクリックして、表示されるカラーピッカーからダークグレーを選択します。カンバス上でドラッグして、前述の 2 本のガイド間のエリア(カンバスの大部分)に長方形を描画します。カンバスの左右両端に長方形があるため、約 6 ピクセルが塗りつぶされずに残ります。長方形が完全に水平方向中央揃えになっているのを確認します。確認するには、整列パネル(ウィンドウ/整列)を開きます。
位置アイコンを選択してから、水平方向中央揃えアイコンを選択します(図 5 を参照)
整列パネルで、位置アイコンを選択してから、長方形を水平方向に中央揃えするアイコンを選択します。ボタンを表す小さい長方形を右上隅に描画します。スマートガイドを使用して、小さい長方形の右側をコンテンツボックス(大きい長方形)の右側に揃えます。
ドラッグして長方形を描画しながら上向き矢印キーを押すと、長方形の角が少し丸くなります(図 6 を参照)
ドラッグで長方形を描画しながらキーボードの上向き矢印キーを押して角を丸くします。2 つの長方形の間隔は少し空けておきます。
この手順を繰り返します(編集/複製を繰り返し)
これにより、2 つのコピーの間隔が同じになる 2 番目のコピーが作成されます(図 7 を参照)
角丸長方形を 3 つ作成します。手順 4 から 7 までを繰り返し、ドキュメントの左下の領域に 4 つの小さいボタンを作成します。テキストラベルを追加します。ツールボックスで、「ベクトル」グループのテキストツールを選択します。プロパティパネルで、「塗りのカラー」ボックスをクリックして黒っぽいカラーを選択します。
テキストを左揃えにして、テキストサイズを 24 に設定します(図 8 を参照)
テキストを選択した状態で、プロパティパネルでテキストの表示方法を定義します。上部の列の左端のボタンをクリックします。テキストを選択した状態で、プロパティパネルでテキストサイズを 16 に変更します。テキストを変更するには、テキストボックスをダブルクリックして、変更するテキストをハイライトし、新しいテキストを入力します。テキストサイズは 10 を指定します。スケッチの画像をカンバス上で非表示にするには、レイヤーパネル(「ページ」タブにグループ化される場合があります)を選択して、「レイヤー 1」が表示されるまで下にスクロールします。
「レイヤー 1」の隣にある目の形をしたアイコンをクリックして、非表示にします(図 9 を参照)
スケッチの画像を含むレイヤーは表示されなくなります。スケッチの画像を隠す目の形をしたアイコンをクリックして、レイヤー 1 を非表示にします。スケッチのレイヤーを非表示にすると、画像は図 10 のようになります。
ワイヤーフレームの他のページの作成
ここまで、サイトのレイアウトの基本的なワイヤーフレームを作成しました。次の手順では、様々なコンテンツを表示するページを作成します。Fireworks CS4 では、各ページで共有できる独自のアイテムを用いて、必要な分だけページを作成することができます。ワークスペースの右側にページパネルが表示されていない場合は、ウィンドウ/ページを選択して表示します。現在のページを選択した状態で、パネルのオプションメニューをクリックします。
表示されるリストから、「マスターページとして設定」を選択します(図 11 を参照)
パネルのオプションメニューを使用して、ページ 1 をマスターページとして設定します。ページパネルの下部にあるページを追加アイコンを 3 回クリックして、空白のページを 3 ページ追加します。各ページの背景にはマスターページが表示されています。ページパネルで新規のページを 3 ページ作成し、サイトの各ページに対応した名前を付けます。ページパネルでマスターページを選択し、ページを移動します。マスターページで、ドキュメント上部の「Find Cars」テキストの背面にある長方形を選択してコピーします。ページパネル(マスターページではありません)で Find Cars ページをクリックして選択します。プロパティパネルで、サイトの閲覧者がこのページがアクティブであると判断できるように、塗りのカラーをライトグレーに変更します。マスターページに戻り、「Find Cars」テキストラベルを選択してコピーします。ページパネルで Find Cars ページをクリックして、コピーしたテキストラベルを新しく作成したライトグレーの長方形にペーストします。「Find Cars」ボタンの背景をライトグレーにすることで、このページがアクティブであることを示します。
共有ライブラリアセットを使用したワイヤーフレームの完成
これで、ワイヤーフレーム全体の構造とページが追加されたので、次に各ページのコンテンツを完成させましょう
このアプリケーションは、スクロールバー、ドロップダウンメニュー、テキスト入力フィールドなどの使い慣れたインタラクティブコントロールで構成します。Fireworks CS4 に備わっている共有ライブラリアセットを使用して、コンテンツの見本を簡単に作成できます。png をページに挿入します。このファイルは、グラフィックアウトラインで地図を描いたものです。
地図要素を選択した状態で、整列パネルを開きます(ウィンドウ/整列)
水平方向中央揃えアイコンをクリックして、マップを水平方向の中央に配置します。垂直方向の中央揃えについては、チュートリアルの後半で説明します。
共有ライブラリパネルを開きます(ウィンドウ/共有ライブラリ)
共有ライブラリパネルから、ボタンとコンボボックスのそれぞれのインスタンスを 1 つずつドキュメントにドラッグします。コンボボックスの左側とマップの左端が揃うように、コンボボックスを配置します。このとき、スマートガイドをオンにすると便利です。
また、整列パネルを使用して、2 つの左端を揃えることもできます(位置アイコンがオフになっていることを確認してください)
ツールボックスで、「選択」グループの拡大・縮小ツールを選択します。コンボボックスの右側中央の拡大・縮小ハンドルをドラッグして、幅が約 400 ピクセルになるようにします。拡大・縮小ツールをもう一度選択し、右側中央の拡大・縮小ハンドルをドラッグして、2 番目のコンボボックスの幅が約 160 ピクセルになるよう大きさを調整します。2つのコンボボックスの右側にある横方向の余白にボタンを移動します。拡大・縮小ツールを使用して、必要に応じてボタンのサイズを変更します。テキストツールを選択します。テキストサイズを 16 に設定します。コピーしたテキストを 2 番目のコンボボックスの上部に配置します。テキストツールを使用して、テキストを City に変更します。
シンボルプロパティパネルを開きます(ウィンドウ/シンボルプロパティ)
1番目のコンボボックスを選択します。2番目のコンボボックスを選択します。シンボルプロパティパネルで、ラベルを Boston に設定します。ボタンを選択します。
シンボルプロパティパネルで、ラベルを Go に設定します(図 14 を参照)
コンボボックスとボタンを共有ライブラリから追加した Find Cars ページ
この手順を繰り返して別の共有ライブラリ UI アセットを追加します。png という名前のファイルを開き、その他のワイヤーフレームページを表示します。
インタラクティブ PDF の書き出し
これで、アプリケーションのフローと構造の基本的なワイヤーフレームが作成できました。ドキュメント全体を複数のページドキュメントとして書き出しておくと、レビューの目的でクライアントに送信する場合のやり取りに便利です。ページパネルでマスターページを選択して、マスターページに移動します。ツールボックスで、「Web」グループのホットスポットツール を選択します。上部にある 1 番目のボタンの上にホットスポットを描画します。さらに 2 つのホットスポットを 2 番目のボタンと 3 番目のボタンの上に描画します。選択ツールで 1 番目のホットスポットを選択します。ファイル/書き出しを選択します。「オプション」をクリックします。これは簡単なワイヤーフレームなので、「画質」は「中」に設定し、「グレースケールに変換」オプションを選択します。「書き出し後 PDF を表示」のチェックボックスがオンになっていることを確認します。「書き出し」をクリックします。これで、PDF を閲覧できるようになりました。インタラクティブ PDF では、クライアントがサイトのフローをクリックして確認できるため、クライアントレビュープロセスでの利用に最適です。クライアントは、サイトの閲覧者が完成した製品を使用するときと同じページレイアウトを使用できます。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
ワークフローにおけるMXMLとイメージの書き出し
書き出しの仕組み
隠し設定について
印刷用に表示
Adobe Flexは、最近大きな注目を集めているまったく新しいテクノロジです。この記事では、MXMLとイメージの書き出しの使用方法とその仕組みについて説明します。この機能で実行できることとできないこと、およびこの機能のワークフローへの最適な組み込み方法を示します。この記事を効率良くフォローするには、次のソフトウェアやファイルが必要です。
この記事に必要な予備知識
著者について
以前は、別の制作会社で、さまざまな種類のマルチメディアやWebベースのコンテンツを作成する開発者として活躍していました。comなどの人気の高いFlash関連のサイトで、フォーラムを開催しています。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
ショートカットキーで作業スピードをアップさせよう | デベロッパーセンター
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
山田あかね氏
ショートカットキーで作業スピードをアップさせよう
パソコンでアプリケーションを操作するにあたって、ショートカットキーを覚えておくと格段に作業スピードが向上します。みなさんご存じでしょうか、Fireworksでは、あらかじめ用意されているショートカットキーを利用するだけでなく、特定の作業に自分好みのショートカットキーを割り当てて使うことができます。アプリケーション名の項目を選ぶと、そのアプリケーションでのショートカットキーが再現されます。
この中で使いやすい(慣れた)セットを選びましょう
例えば、Web制作の現場では、「デザインカンプをおこす→デザインを仕上げる→HTML/CSSで利用するためにスライスする」というワークフローの中で、ズームイン/ズームアウト機能は結構頻繁に使っていると思います。
もし、自分好みのショートカット設定になっていない、よく使うメニュー項目にショートカットキーが割り当てられていないという場合には、自分で割り当ててみましょう
キーの組合わせを考えるときに、どれがいいのか迷うかもしれませんが、すでに割り当てられている組合せを設定しようとすると、図2のようにアラートが出るようになっています。図2 すでに割り当てられている組合せを設定しようとすると、アラートが表示されます。また、ショートカットキーの一覧はHTMLファイルに書き出しが可能なのも魅力です。HTMLファイルに書き出すには、キーボードショートカット表示画面の右上にある「HTML形式でセットを書き出し」アイコンをクリックします。図3 キーボードショートカット表示画面の右上、ゴミ箱のアイコンの左隣をクリックすることで、HTML形式でセットを書き出すことができます。
図4 書き出した「ショートカットキー一覧」HTMLファイル
今、自分の作業環境ではどのようなショートカットキーが用意されているのか、一度HTMLファイルに書き出して確認してはいかがでしょうか
新たな発見があるかもしれません。
それをもとに、新たなショートカットを検討してもいいでしょう
著者について
山田あかね氏
のWebデザイナーとして転職
自社サービスのデザイン・CodeEXPRESSの企画運営・ウェブサービスコンサルティング・デザイン制作全般に携わっている。
講演活動・専門誌の執筆など多数
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
印刷用に表示
SmartCSS拡張機能を使えば、簡単にプロ現場レベルのHTMLファイルとCSSファイルを書き出すことができます。
それでは、SmartCSS拡張機能の使い方を詳しく紹介していきましょう
みなさん、ギアを一段上げたくらい生産性が向上しますよ
Webサイト開発プロセスの現状
現在のWebページデザインの開発プロセスといえば、以下のような工程で行われているのではないでしょうか
なぜ、このようなプロセスになっているのでしょうか
「Webページを1枚の大きなビットマップ画像で制作する」、モックアップならそれでもいいでしょう
でも、それをWebページとして公開するとなると、ダウンロードに時間がかかりますし、到底プロの仕事とは見なされません。
6ページボリュームのWebサイトの案件を受けて、6枚のビットマップ画像を納品しても、クライアントは納得してくれないでしょう
それにダイナミックコンテンツを含むWebページとなれば、ダイナミックに変化するコンテンツボリュームに柔軟に対応できるデザインでなければなりません。そうした場合は、1枚の画像でページを作るのは不可能です。コンテンツの拡張性を保持しながら、ファイルサイズをスリム化し、グラフィカル要素を抑えるには、HTMLとCSSを使うしかありません。CSSは、HTML文書のビジュアル面を制御するための技術で、コンテンツとビジュアル制御を分離するために開発されました。コンテンツのコードとビジュアル制御のコードを1つにまとめてしまうと複雑になり、扱いが面倒です。コンテンツとビジュアル制御を分離することで、制作効率だけでなく、運営効率も向上します。そうしたメリットが注目され、最近では商業WebサイトでもCSSデザインが採用されるようになっています。理想を言えば、コンテンツとビジュアル制御を“完全に”分離させたいところです。しかし、目的のデザインを達成するために、HTMLコード内にビジュアル制御用のdiv要素を使用しているケースも少なくありません。手間をかけてもいいから完全な分離を実現した後にWebサイトを公開するという人もいます。私の場合はというと、CSSの知識とスキルはあれども、そこまで手をかけていられません。
みなさんも同じ状況にいるのではないでしょうか
もし、Fireworksでデザインして、それがボタンをクリックするだけで、プロ現場レベルのHTMLファイルとCSSファイルに変換されるとしたら、すごく素敵な話ですよね
いろいろな機能を持っており、その基本的な特徴を以下にあげておきましょう
画像の使用を抑えた書き出し
サイズ、カラー、行間、整列などのテキスト属性を保持したテキスト書き出し
矩形はdiv要素のブロックに変換
ボーダーや塗りのスタイルは維持される。
イメージスライスのサポート
ダイナミックコンテンツに対応できるリサイズ可能なデザインとなるように、絶対配置を使用しない。
モダンWebブラウザで使用されるデザインパターンをサポート
私がこのSmartCSS拡張機能を開発しようと思った理由は単純です。私自身が、こういう機能が欲しかったからです。SmartCSS拡張機能を利用するには、以下の手順に従ってください。mxp)をインストールします。メニューから「ファイル/書き出し」を選択します。
書き出しダイアログボックスで、「書き出し」項目で「CSSレイヤー(「書き出し」ボタンをクリックする。
それでは、次のページから具体的に説明していきましょう
図1 書き出しダイアログボックスで、「書き出し」項目で「CSSレイヤー(この記事では、以下のソフトウェアとサンプルを使用しています。
事前に必要な知識
著者について
1980年代初期からプログラミングを行っている、UK出身のソフトウェアデベロッパー
自称プログラミング中毒で、モバイル、デスクトップ、Web、エンタープライズアプリケーションなどあらゆる環境に向けて、さまざまなプログラム言語を操っている。
現在は、ソフトウェアベンダー兼コントラクターとして活動しており、随時仕事を受付中
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
SmartCSS拡張機能を使えば、簡単にプロ現場レベルのHTMLファイルとCSSファイルを書き出すことができます。
それでは、SmartCSS拡張機能の使い方を詳しく紹介していきましょう
みなさん、ギアを一段上げたくらい生産性が向上しますよ
Webサイト開発プロセスの現状
現在のWebページデザインの開発プロセスといえば、以下のような工程で行われているのではないでしょうか
なぜ、このようなプロセスになっているのでしょうか
「Webページを1枚の大きなビットマップ画像で制作する」、モックアップならそれでもいいでしょう
でも、それをWebページとして公開するとなると、ダウンロードに時間がかかりますし、到底プロの仕事とは見なされません。
6ページボリュームのWebサイトの案件を受けて、6枚のビットマップ画像を納品しても、クライアントは納得してくれないでしょう
それにダイナミックコンテンツを含むWebページとなれば、ダイナミックに変化するコンテンツボリュームに柔軟に対応できるデザインでなければなりません。そうした場合は、1枚の画像でページを作るのは不可能です。コンテンツの拡張性を保持しながら、ファイルサイズをスリム化し、グラフィカル要素を抑えるには、HTMLとCSSを使うしかありません。CSSは、HTML文書のビジュアル面を制御するための技術で、コンテンツとビジュアル制御を分離するために開発されました。コンテンツのコードとビジュアル制御のコードを1つにまとめてしまうと複雑になり、扱いが面倒です。コンテンツとビジュアル制御を分離することで、制作効率だけでなく、運営効率も向上します。そうしたメリットが注目され、最近では商業WebサイトでもCSSデザインが採用されるようになっています。理想を言えば、コンテンツとビジュアル制御を“完全に”分離させたいところです。しかし、目的のデザインを達成するために、HTMLコード内にビジュアル制御用のdiv要素を使用しているケースも少なくありません。手間をかけてもいいから完全な分離を実現した後にWebサイトを公開するという人もいます。私の場合はというと、CSSの知識とスキルはあれども、そこまで手をかけていられません。
みなさんも同じ状況にいるのではないでしょうか
もし、Fireworksでデザインして、それがボタンをクリックするだけで、プロ現場レベルのHTMLファイルとCSSファイルに変換されるとしたら、すごく素敵な話ですよね
いろいろな機能を持っており、その基本的な特徴を以下にあげておきましょう
画像の使用を抑えた書き出し
サイズ、カラー、行間、整列などのテキスト属性を保持したテキスト書き出し
矩形はdiv要素のブロックに変換
ボーダーや塗りのスタイルは維持される。
イメージスライスのサポート
ダイナミックコンテンツに対応できるリサイズ可能なデザインとなるように、絶対配置を使用しない。
モダンWebブラウザで使用されるデザインパターンをサポート
私がこのSmartCSS拡張機能を開発しようと思った理由は単純です。私自身が、こういう機能が欲しかったからです。SmartCSS拡張機能を利用するには、以下の手順に従ってください。mxp)をインストールします。メニューから「ファイル/書き出し」を選択します。
書き出しダイアログボックスで、「書き出し」項目で「CSSレイヤー(「書き出し」ボタンをクリックする。
それでは、次のページから具体的に説明していきましょう
図1 書き出しダイアログボックスで、「書き出し」項目で「CSSレイヤー(この記事では、以下のソフトウェアとサンプルを使用しています。
事前に必要な知識
SmartCSS拡張機能を効果的に使うためにも、以下の4つのルールを覚えてください。テキスト、矩形、イメージスライスだけが書き出される。テキスト、矩形、イメージスライスは矩形ブロックとして扱われる。SmartCSS拡張機能がデザインのカラム構造を認識できるようにする。ドキュメントは2次元として扱われる。それでは、1つづつ解説していきます。ルール1:テキスト、矩形、イメージスライスだけが書き出される。
このルールを聞くと、Fireworksでは豊富なシェイプやエフェクトを使うことができるだけに、「書き出せるオブジェクトが限られている」と思ってしまうでしょう
でも考えてみてください、HTMLで表示されるのもこの3種類のオブジェクトだけです。制限があるからといって、あなたのデザインクリエイティビティを十分に発揮できないということはありません。
むしろ、図2のようにイメージスライスを使って、簡単な操作で行えるというメリットの方が大きいでしょう
図2:Fireworksのシェイプやエフェクトを使って作成したマルチレイヤーのロゴ
ロゴ全体を1つの画像として書き出すためにイメージスライス処理を行う(図3)
図3: 1つの画像として書き出すためにイメージスライス処理を行います。この名前が書き出す際にファイル名として使用されます。ノート: SmartCSS拡張機能を使用した書き出しでは、イメージスライス処理を行った画像しか書き出されません。処理を行っていない他の画像は無視されます。図4を見てください。画像オブジェクトがあります。
図4: イメージスライス処理を行っていない画像オブジェクト
TSmartCSS拡張機能は、イメージスライス処理を行っていない画像オブジェクトを認識できません。そのため、図4のようなオブジェクトを書き出すと、図5のようになります。図5: イメージスライス処理を行っていない画像オブジェクトは無視されます。画像を書き出すには、イメージスライス処理を行い、SmartCSS拡張機能に画像の存在を認識させます。図6: SmartCSS拡張機能に画像を認識させるには、イメージスライス処理を行います。
ルール2: テキスト、矩形、イメージスライスは矩形ブロックとして扱われる/h4>
SmartCSS拡張機能は、各オブジェクトのサイズを分析して、オブジェクト同士の間隔やレイアウトのパターン(縦カラム、横カラムの構造)を認識します。思い通りのデザインを実現するには、SmartCSS拡張機能が認識しやすいように、各オブジェクトの境界線を明確にしておかなければなりません。特にテキストは紛らわしいので注意が必要です。図7のように実際のテキスト部分よりもバウンディング・ブロックが大きいことはよくりあります。図7: 見た目は重なっていなくても、バウンディング・ブロックで見ると重なっています。図7ではテキストブロックとイメージスライスが重なっています。この場合、SmartCSS拡張機能は、この2つのオブジェクトをHTML上で隣り合う要素として配置すべきかどうか判断できません。Tip: すべてのオブジェクトのバウンディング・ブロックを表示するには、メニューから「選択/すべて選択」を選びます。重なりがある場合は、バウンディング・ブロックを調節したり、オブジェクトを再配置する必要があります。図7の重なりを調節したのが図8です。図8: テキストブロックのバウンディング・ブロックを調節して、重なりを避けます。ルール3:SmartCSS拡張機能がデザインのカラム構造を認識できるようにする。あなたのデザインレイアウトが縦横どのようなカラム構造になっているのか、それをSmartCSS拡張機能に認識させる必要があります。図9は、ヘッダ、3つのカラム、フッタからなる典型的なレイアウトです。ヘッダ、3つのカラム、フッタから構成されています。央エリアは、3つのカラムで構成されています。通常、各カラムはコンテンツのボリュームに応じて縦方向に拡縮し、それに合わせてフッタも上下移動するようにします。
このレイアウトを見て、みなさんの目には、どこがエリアやカラムの境界線になるかは明らかでしょう(図10)
図10: エリアやカラムの境界線
SmartCSS拡張機能も同じようにレイアウトを分析します。オブジェクト間やオブジェクトのグループ間にどのような境界線が引けるかを探します。まず最初に、左から右へと横断的に分析して、横カラムを探します。横カラムを特定したら、各横カラム内を縦カラムに分割できるかどうかを分析します。図10では、3つの横カラムを認識して、次に中央の横カラム内で3つの縦カラムを認識します。図10のようなレイアウトだと、SmartCSS拡張機能にも分かりやすく、思い通りの書き出し結果が得られると思います。
では、図11のようなレイアウトだとどうでしょうか
図11: 中央エリアのレイアウトが異なるデザイン
この場合、4つの横カラムが認識されます(図12)
図12: 4つの横カラムが認識されます。4つの横カラムが認識されるのは、中央エリアを上下2つに区別できるためです。この状態で書き出すと、中央の上の方のセクションにダイナミックコンテンツを追加しても下の方のセクションを下に追いやる柔軟なデザインとはありますが、これは望んでいるいるデザインではありません。この問題を解決するには、中央エリアに矩形を追加して、中央エリアが2つの横カラムに分断されるのを防ぎます。ここでは、中央エリアの真ん中カラムを囲む矩形を追加します。
追加する矩形はデザインの邪魔にならないように、背景色と同じ色にして見えなくするといいでしょう
図13は、矩形を追加したところです(青い枠線)
これで、真ん中の2つのセクションは1つのカラムとして認識されます。図13: 矩形(青い枠線)を追加することで、真ん中の2つのセクションは1つのカラムとして認識されます。ノート: SmartCSS拡張機能にカラム構造を認識させる上で、オブジェクト間に大きな間隔がなくても構いません。真っ直ぐなラインが引けるところは、自動で区別されます。図14のようにルーラガイドを使えば、デザインの横カラムや縦カラムを把握しやすくなります。図14: ルーラガイドを使って横カラムや縦カラムを把握します。ルール4:ドキュメントは2次元として扱われる。これは、ルールというよりも時間節約の手段としての仕様です。SmartCSS拡張機能の書き出しで、HTMLの入れ子構造を実現するにはどうすればいいのか悩みました。考えた方法の1つは、レイヤーとサブレイヤーを使って、オブジェクトの親子関係を定義する方法でした。ただ、これでは作業に時間がかかりそうです。そこで、より簡単に実現できる方法を考えました。Tip: デザインをフラットな2次元ドキュメントとして扱うことで、SmartCSS拡張機能は入れ子の親子関係を把握できます。フラットな2次元ドキュメントとして扱うというのはどういうことかというと、まず図15を見てください。ご覧の通り、テキストとイメージスライスが矩形の中に収まっています。SmartCSS拡張機能は、この状態を分析して、テキストとイメージスライスを矩形の子要素として認識します。このように自動で認識されるため、わざわざレイヤーで親子関係を必要はありません。この矩形の中身についても、ルール3と同じ方法で横カラム・縦カラム構造の分析が行われます。つまり、まず横カラムを認識して、次に縦カラムが認識されます。以上で、すべてのルールの説明は終わりです。
これらのルールを意識してデザインすれば、期待通りのHTML・CSSファイルが書き出されるでしょう
前述の通り、SmartCSS拡張機能は素晴らしい機能がたくさんあります。
テキストのハイパーリンク
グラデーションやパターンの塗り
変形させた矩形
テキストのハイパーリンク
Fireworksでは、画像のハイパーリンクは書き出せても、テキストのハイパーリンクを書き出すことはできませんでした。モックアップでは画像のリンクでも構いませんが、Webページとして公開するならテキストのリンクにしたいところです。このSmartCSS拡張機能には、テキスト状態でハイパーリンクを書き出せる機能がついています。その使い方は以下の通りです。図16は、サイドバーに置くシンプルなナビゲーションメニューです。
各テキストオブジェクトを選択して、そのバウンディング・ブロックを表示させます(図17)
図17: 各メニューのバウンディング・ブロックを表示させます。
次に各テキストオブジェクトをスライス処理します(図18)
図18: メニューをスライス処理します。ノート: スライスの領域は、テキストオブジェクトのバウンディング・ブロック内の75%以上を占めるようにします。
そうすることで、SmartCSS拡張機能は「このスライス領域をテキストとして書き出さなければならない」と認識します(図19)
最後に各スライスを選択して、プロパティダイアログボックスでリンク先を指定します(図20)
図20: プロパティダイアログボックスで各メニューのリンク先を指定します。以上で完成です。
グラデーションやパターンの塗り
図21は、グラデーションの塗り効果です。図21: グラデーションの塗りも書き出すことができます。このグラデーションを書き出す方法の1つは、グラデーションのエリア全体をスライス処理して、1枚の大きなビットマップ画像として書き出す方法です。
でも、プロのCSSデザイナーなら、もっと素晴らしい方法が思いつくのではないでしょうか
そうです、グラデーションの薄い断片を切り出して、それを背景画像として繰り返し配置するのです。
図21の薄い断片を水平方向に繰り返し配置してもグラデーションの見た目は変わりません(図22)
図22: 断片画像を繰り返し背景画像として使用します。SmartCSS拡張機能では、以下のようにしてこのトリックを実現できます。
グラデーションの一部にスライス処理を行います(図23)
図23: 繰り返し背景画像として使用する部分にスライス処理を行います。これで作業は完了です。部分的にスライス処理した画像が繰り返し背景画像として使用されます。ノート: 繰り返しの方向は水平方向だけでなく、垂直方向もあります。垂直方向に繰り返す場合は、図25のようにスライス処理を行います。図25: グラデーションの方向に合わせてスライス処理を行います。もし、水平・垂直の両方向に繰り返したい画像の場合は、図26のように使用する部分だけをスライス処理します。
図26: 水平・垂直の両方向に繰り返したい画像の場合のスライス処理
変形させた矩形
デザインをする上で、すべて四角形の要素ばかりで構成するよりは、違った形の要素も取り入れたいところです。SmartCSS拡張機能で矩形以外のオブジェクトを扱う方法は、以下の通りです。
まず矩形オブジェクトを作ります(図27)
図27; このグラデーションの矩形のエッジを変形させます。
塗りのあるパスオブジェクトを使って、パスの結合の型抜きでエッジを変形させます(図28)
図28: エッジを変形させます。
変形させたエッジ部分だけをスライス処理します(図29)
図29: エッジ部分をスライス処理します。図30が完成図です。図30: 完成したグラデーション矩形のエッジです。書き出したHTML/CSSファイルでは、このエッジは画像として矩形の端に配置されます。ルール1でSmartCSS拡張機能が書き出せるのは、テキスト、矩形、イメージスライスだけだと説明しましたが、少し補足します。線も書き出すことができるのです。水平線、垂直線、これらの線は手軽に使えるデザイン要素でもあります。図31を見てください。サンプルのメインナビゲーションメニューでは、メニュー項目の間を垂直線で隔てています。
図31: 垂直線を使って区分けしたメインナビゲーションメニュー
線が水平か垂直に配置されている限り、矩形として書き出されます。ただ、矩形といってもつぶれてどちらか一方の辺しか見えませんので、線として表示されます。線の書き出しにおいても同様のルールが適用されます。テキストオブジェクトなどと線と重ならないようにしなければなりません。
また、ナビゲーションメニューの例でいうと、テキストとの重なり以外にも、背景のグラデーション矩形オブジェクトのエリア内に線が収まるようにしなければなりません(図32)
図32: テキストと線が重ならないようにし、さらに背景のグラデーション矩形オブジェクトのエリア内に収まるようにします。Tip: 重なりをチェックするには、「すべて選択」を選んで境界線を表示させます。垂直線を点線にするには以下の手順で行います。図33: 点線にする垂直線を選びます。
プロパティダイアログボックスで「点線」を選択します(図34)
図34: プロパティダイアログボックスで「点線」を選びます。図35: これで垂直線に点線となりました。以上で完成です。この線は、HTML上でも点線として表示されます。同じように破線も適用できます。点線と破線は、矩形でも利用できます。
扱える矩形が四角だけじゃ物足りないという人もいるでしょう
SmartCSS拡張機能は、図36のような角丸デザインやドロップシャドウ付きのボックスにも対応できるようになっています。
図36: 角丸デザイン、ドロップシャドウ付きのボックス
単に四端をスライス処理するだけでは、静的なボックスとなり、ボックス内のコンテンツボリュームが増えた場合に対応できません。コンテンツボリュームに応じて、ボックスが拡縮するようにしたいものです。柔軟性のあるボックスを実現するためにデザイナーがよく使うテクニックは、ボーダーのないボックスの中に3つの画像を入れ込むテクニックです。
まず、そのテクニックを解説しましょう
1つ目の画像は、ボックスの上部です(図37)
図37: 1つ目の画像はボックスの上部
2つ目の画像は、ボックスの下部です。
図38: 2つ目の画像はボックスの下部
3つ目の画像は、中央の一部分です(図39)
この中央部分から抜き出した画像は、背景画像として繰り返し配置されます。このように中央部分の画像を利用することで、コンテンツボリュームに応じてボックスが拡縮するようにできます。そして、div要素の中にこれらの画像を配置します。ボックスの上下の画像は、それぞれdiv要素の上下に配置し、中央の画像は背景画像として繰り返し配置します。
では、SmartCSS拡張機能でこのテクニックをどのように実現するかというと、単に3カ所にスライス処理を行うだけです(図40)
そうするだけで、SmartCSS拡張機能は柔軟なボックスとして認識して書き出します。図40: 3カ所にスライス処理を行うだけで、柔軟な角丸デザイン、ドロップシャドウ付きのボックスが実現できます。
念のため、その手順を確認しておきましょう
角丸の部分がスライスの中にちゃんと収まっていることを確認します(図41と図42)
図41: ボックス上部の角丸は上部のスライス内に収めます。図42: ボックス下部の角丸は下部のスライス内に収めます。3つのスライスをすべて同じ幅にします。中央のスライスは、ボックス内のコンテンツと重ならない綺麗な部分を選択するようにします。先ほど、メインナビゲーションメニューについて解説しました。
サンプルを見ていただくと分かるように、メインナビゲーションメニュー部分は、左端は変形させ、テキストと線を右側に配置しています(図43)
図43: メインナビゲーションメニューの左端と右端
このメインナビゲーションメニューをHTML/CSSに書き出す上で1つ問題となることがあります。それは、WebブラウザやOSによってフォントの表示サイズが異なるということです。場合によっては、テキストブロックの合計サイズが、デザインの幅を超えてしまうかもしれません。最悪の場合、図44のようにテキストブロックがナビゲーションのエリアからはみ出して、他のコンテンツを下に追いやってしまうかもしれません。
図44: デザインが崩れた例
このような状態を避けるには、幅が可変のテキストブロックにするしかありません。このような解決方法には、CSSのfloatプロパティを使います。すべての要素を右側にfloatさせれば、巻き込みが起きず、見た目の問題は起きません。そして、左端の変形させた画像も左端にずっとあるようにしたいので左側にfloatさせます。では、SmartCSS拡張機能でこのfloat対策をどのように実現するかというと、実は自動で行ってくれるのです。何も心配は入りません。
ただ念のため、SmartCSS拡張機能がどのようにfloatの判断をしているかを説明しましょう
図45: エリア内で一番大きな間隔を調べます/p>
その大きな間隔の左側のオブジェクトは左float
その大きな間隔の右側のオブジェクトは右float
さらに学習したい方へ
SmartCSS拡張機能は、デザインファイルからハンドコーディングなしに、あっという間にWebページへと変換することができる革新的なツールです。みなさんにとっても役立つとうれしいです。SmartCSS拡張機能を利用する上で必要な情報は、すべてこの記事にあります。
もっと機能がほしいという人もいるでしょう
完成後は、 私のサイトで販売します。
SmartCSS拡張機能に関してご意見ご要望があれば、私のサイトからどうぞ
著者について
1980年代初期からプログラミングを行っている、UK出身のソフトウェアデベロッパー
自称プログラミング中毒で、モバイル、デスクトップ、Web、エンタープライズアプリケーションなどあらゆる環境に向けて、さまざまなプログラム言語を操っている。
現在は、ソフトウェアベンダー兼コントラクターとして活動しており、随時仕事を受付中
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
セマンティックを考慮したデザイン
背景画像のスライスと3スライステクニックの使用
標準規格に準拠したレイアウトの作成
印刷用に表示
「Web標準」とも呼ばれるこれらのテクノロジは、Webにパブリッシュされるあらゆるドキュメントの長期的な有効性を保証しつつ、より多くのWebユーザに、より優れたメリットを提供できるよう、綿密に計画・制定されています。デザイン段階からページ完成に至るまでの筆者のワークフローにおいて、Fireworksは長年重要な役割を果たしてきました。しかし、画像をスライスして書き出し処理を行った後に、生成されたマークアップ言語とCSSを手作業で編集せざるを得なかった経験があります。Fireworks CS4チームはこのようなケースが存在することを認識し、今回、CSS書き出し機能関連の問題を解決することに取り組んでいます。今日の業界においてCSSはとても重要なキーワードであり、このCSSが利用できるようになることは飛躍的な一歩とさえ言えます。しかし、CSSが完璧なWebサイトを構築するための決定的な答えと言うわけではありません。今日のWebを見渡しても、残念ながらCSSを用いた不適切なWebサイトは数多く存在します。完璧なWebサイトの構築を可能にする真の決定的な答えといえば、それはWeb標準に間違いありません。読者がまだWeb標準を採用していないのであれば、今こそWeb標準を始める絶好のタイミングです。Web標準を利用することのメリットをいくつか挙げてみることにします。
開発およびメンテナンスにかかる手間と費用の軽減・節約
既存および今後のWebブラウザにも対応するための継続的な互換性
より多くの人々、およびより多くのインターネットデバイスを対象としたアクセシビリティ
検索エンジンのランキングが高まることの可能性
残念なことに、筆者がCSS書き出し機能に対して感じた疑念は現実のものになっていました。CSSベースのWebページを書き出すために様々な努力が尽くされたものの、生成されるコードの意味論的な整合性、アクセシビリティおよび開発の簡素化は、やや見過ごされがちな結果となっています。そこで、FireworksとWeb標準のエバンジェリストである筆者は、読者の皆さんが、より優れた標準規格準拠のWebページを作成できるようにするために、Fireworksチームと共同してCSS書き出し機能の強化版を開発することにしました。この強化版に施された主な変更点は以下の通りです。
テキストオブジェクトにタグ付けを行うことで、意味論的な整合性の取れたマークアップが一段と手軽に生成可能に
ユーザがあらゆるデバイスおよびブラウザ上でテキストサイズを調整できるようにするために、すべてのフォントサイズをパーセント比率で指定
様々な量のコンテンツへの対応およびユーザによるテキストサイズの調整を可能にするために、Div要素の高さをmin-height(最低値)で指定することが可能に
1つのテキストオブジェクトから、改行を用いて単一の段落要素を作成するのではなく、適切なケースでは複数の段落要素を作成することが可能に
順不同リスト作成用のList Itemシンボルが含まれた、改良版の柔軟なHTMLコンポーネントシンボルライブラリを装備
すべてのボーダーの配置およびサイズを指定したDivを、厳密なサイズで、より正確な位置に配置することが可能に
他にも、様々なバグフィックスや改善点が含まれています。この記事では標準規格準拠のデザイン作成を支援する、強化アップデート版CSS書き出し機能の使用法について解説します。この記事を効率良くフォローするには、次のソフトウェアやファイルが必要です。
この記事に必要な予備知識
著者について
Matt Stowは標準規格準拠のアクセシブルなWebサイトのデザイン・開発を専門に手がけるWeb・ユーザインターフェイスデザイナーです。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
シンボルを使用して作業効率を高めよう | デベロッパーセンター
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
むらかみ けぃ氏
シンボルを使用して作業効率を高めよう
Fireworksには画像やパスデータ、テキスト等のオブジェクトをシンボル化するという機能が搭載されています。シンボル化はライブラリに登録され、ライブラリからいつでもキャンバスに配置することができます。シンボルはキャンバスに配置するとインスタンスというオブジェクトになります。オブジェクトのシンボル化は、制作作業に様々なメリットをもたらしてくれるのですが、中でも大きなメリットとして以下のようなものがあります。
インスタンスはオブジェクトのオリジナル情報を保持したままリサイズが可能
複数配置したインスタンスは一括修正が可能
今回はこの二つのメリットを利用したワークフローを紹介します。オリジナルを大きめに用意することで、デザイン時の効率化や後々の変更対応の効率化を目指す。写真などのビットマップデータは、拡大・縮小などの処理をするたびに劣化していきます。レイアウトデザインを行っているときに、写真の大きさなどを様々なサイズに変更して試すことは頻繁に行われると思いますが、写真をあらかじめシンボル化しておけば、納得いくレイアウトになるまで何度もリサイズを繰り返しても、画像が劣化することはありません。また、インスタンスをマスクすることも可能なので、これらを組み合わせることでオリジナルを保持したままレイアウトすることが可能です。オリジナルのデータがそのまま残ったまま製作できるのですから、後日サイズやトリミングの変更依頼が来た場合でも、また外部のオリジナルファイルを読み込みなおすこともなく、修正作業ができます。シンボル化すればレイアウトしてからの画像調整が楽にできる。拡大しても画像が劣化しない。
シンボルを半透明のエリアでマスクしているので、トリミング領域の変更も容易
シンボル化するオリジナルの画像は高解像度なほど、のちの対応幅が広いのですが、重いデータは、アプリケーションに動作不可がかかります。オリジナルデータのサイズも、ある程度まで調整することをお勧めします。共通のアイコンなどをインスタンスで作成することで、一度に変更する。webサイト制作において同ページに同じグラフィックを繰り返し使うことは多くありえることです。さらに、そのグラフィックを配置後に変更することも作業上多く発生します。すべてのアイコンをその都度変更するのはとても面倒で非効率ですが、はじめにシンボル化してインスタンスをレイアウトしておけば、あとはシンボルを編集するだけですべてのグラフィックを一度に変更することができます。サンプルの場合インスタンスにフィルターで着色することで、同じグラフィックでも色違いで配置できています。単色のグラフィックの場合は便利です。アイコンを変更したい。
シンボルを編集
同じシンボルを使用しているインスタンスがすべて変更される。
いかがでしたか
ここで紹介した特性を利用すればシンボルは様々な作業の効率化に役立ちます。また、複数のシンボルをさらにまとめてシンボル化することも可能です。あまり複雑なオペレーションを行うと逆に混乱が生じるので、使いどころは見極める必要はありますが、ちょっとした応用で作業効率が良くなることも多々あります。
これを機会に様々な機能を試してみてはいかがでしょうか
著者について
むらかみ けぃ氏
フリーランスでWeb制作を行う傍ら、契約会社ではディレクション業務メインで大きなサイトに携わるなど、幅広く活動中
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
入門および新機能ビデオチュートリアル
簡単な数式を使用して、推力と速度の効果を再現し、物体のリアルなアニメーションを作成します。
タイムライン派が注目するFlash CS5新機能ガイドツアー
タイムライン派アニメーター視点で、Flash CS5の新機能を紹介します。
swfファイルの容量を軽くするためのコツを紹介しましょう
最終回となる今回は実際に手を動かしてみましょう
テーマは、気楽に作れる「待ち受け時計」にしたいと思います。ActionScript 3の作法を身に付け、深い理解によってFlashオブジェクトに対するこれまでの考え方を変えることで、学習プロセスがさらにスムーズになります。
0エラーアーカイブス」より抜粋して紹介
このチュートリアルでは、Flash Catalyst ベータ版にて基本的なインタラクティブ デザインを習得できます。私たちは、動画コンテンツを提供する上で、動画閲覧環境における問題点を改善し、どのようなユーザーでも利用できるように取り組んでいます。本記事では、その取り組みについて説明します。このチュートリアルでは、Photoshop でデザインされたファイルを使用したインタラクティブなポートフォリオを作成します。本記事では、技術賞を授賞した「PRGEAIR」の開発者である青木大輔さんに、PRGEAIRの機能と使い方を解説していただきます。本記事では、FlashとPhotoshopの連携をもっとスムーズに、もっと便利にするスクリプト集を紹介します。
セミナーレポート Flashコンテンツをゲームプラットフォームへ展開する技術、ビジネス
このセミナーでは、Flashのコンテンツをコンシューマー・ゲーム機で表示させるサードパーティーエンジン「Scaleform」の技術、そしてそれを利用した事例として、任天堂Wii向けのエデュケーション系ゲーム「あいうえ・おーちゃん」について、制作の舞台裏が紹介されました。2行のスクリプトで3次元の消失点をコントロールする。今回は、いわば視線の方向が決まる「消失点」を、2行のスクリプトで動かしてみます。0の初級者向けの解説です。本記事では、PHPを使ったオリジナルCMSを実装した試行錯誤の過程と技術的なポイントを解説します。本記事では、画像ソースを解析してQRコードのビット列を生成するクラスを使った処理にについて紹介します。FlashでSVG形式のベクターグラフィックを利用する。本記事では、FlashでSVG形式のベクターグラフィックを利用する方法を解説します。モーションエフェクトをプログラムで作成し、Flashプロジェクトでムービークリップを簡単に移動、サイズ変更、トランジションおよびフェードする方法を学びます。
Flashのパターン描画ツールとスプレーブラシを使用した複雑な幾何学パターンの生成
0への移行に関するヒント
最新バージョンのActionScriptを使用して初めてFlashアプリケーションを構築するときに陥りやすい問題を回避するために、これら15のヒントを適用します。
初期状態でも使いやすいように配慮されている Flash
より効率的な環境にカスタマイズする方法を解説します。この機能を用いると、面に3次元の凹凸を加えたように表現することができます。
ボーンツールを活用したインタラクションの作成
ボーンツールによるボーン(インバースキネマティック)の作成と、IKArmatureクラスを用いたインバースキネマティックの制御の方法について、解説していきます。
0におけるパフォーマンス向上のヒント
0のスクリプティングで、パフォーマンスを高めるテクニックについて解説します。そのパフォーマンスを引出すポイントからスタートし、さまざまな小ネタをアラカルトで紹介します。
0でも活用できるでしょう
「ちょっとしたニーズを満たす機能をライブラリ化すれば、みんな便利かも」と思い、他の人でも簡単に機能を実装できるように汎用性をもたせたライブラリ「Recorder Lib」を作成しました。0」という作品は、デジタルアートフェスティバル東京2008に出展・参加している企業やクリエイターのプロフィールを紹介するインタラクティブコンテンツです。高性能な最新のグラフィックスプログラミング言語の概要を紹介するとともに、画像やベクトルグラフィックスをはじめとする様々な表示オブジェクトに、フィルタ、ブレンド、面の塗りを適用する方法を解説します。収録されたRADIOHEADのライブ映像を、12台のカメラから閲覧でき、さらにユーザー自身のスイッチングでオリジナルのライブ映像に紡ぎ合わせることのできる、インタラクティブなコンテンツ制作にあたって工夫(というか苦労)した点を、主に技術面から説明します。そこで、Matrix3Dクラスの変換行列を使い、マウスポインタの位置に合わせて3次元座標空間で平面を回転させるサンプルスクリプトについて解説します。アドビ特集」にスピーカーとして参加した際に、「イベント会場内で携帯電話から参加できるようなコンテンツを発表しよう」という企画をもとに開発したシステムです。comの概要と仕組みについて解説します。この記事では、Matrixクラスについて簡単なサンプルスクリプトをご紹介しながら解説していきます。
0 書き方教室
0の新たな考え方やこれまでと異なる点を確認していきます。
0 (そうめん) で非同期処理をスマートに
ActionScript Thread Library は、タスクシステムと Java のスレッドモデルをベースとした「疑似スレッド」を実現するライブラリで、複雑で冗長になりがちな、イベント処理や非同期処理、リアルタイム処理を、分かりやすくスマートに記述することを可能にします。
jp :「自分で花火を作って、打ち上げる」花火大会の仕組み
花火を作ったり、登録したり、打ち上げたりと、自分で好きなように花火大会を演出することができるのがFirework
jpの醍醐味です。それでは、どのようにして自分でデザインした花火を打ち上げているのか、その考え方と構造を解説していきます。
将来を見据えた、新たなHTML内SWF埋め込み用コードの考察
~パワードスーツが作りたいあなたへ~2万円でつくるマスタースレイブシステム
この記事では、Adobe Flash CS3を利用して、直感的な操作を体感できるフィジカルコンピューティングの世界に触れていただこうと思います。この記事では、HTMLコンテンツとFlashコンテンツを統合する方法を紹介します。
in:リアルな書き味と消し味を実現するテクニック
in」は、“黒板に落書き”という学生の頃に誰もが体験したことをWeb上で味わうことのできるお絵かきサービスです。
~コンポーネントやライブラリを利用する~
今回は、検索機能を追加し、条件を絞って店舗情報を探せるようにする手順をご紹介します。
~ウィンドウをカスタマイズする~
第三回となる本チュートリアルでは、ウィンドウの形をカスタマイズする方法をご紹介します。
~ホットペッパーAPIを利用する~
本チュートリアルでは、WebサービスとしてリクルートWebサービスの「ホットペッパーWebサービス」が提供するAPIを利用し、飲食店の店舗情報を取得、表示するAIRアプリケーションを作成します。本チュートリアルでは、FlashによるAIRアプリケーションの開発に必要な開発環境やAIRアプリケーション実行環境の準備、簡単なアプリケーションの作成から実行までの一連の流れをご紹介します。
伝(つて) まち・ひと・もの アーカイブプロジェクト
「伝(つて) まち・ひと・もの アーカイブプロジェクト」は、中部学院大学短期大学部経営情報学科による「地域人の育成を目指す」取り組みの一つとして立ち上げられたwebサイトです。
0の使用による、サーバ側ASPスクリプトを使用したMySQLデータの取得
XMLとサーバ側ASPスクリプトを使用してMySQLデータベースからデータを引き出すFlashアプリケーションの作成方法について説明します。
ラクラクかんたん
高性能な物理演算をFlash内で利用することができます。0向けに内容をバージョンアップしたものです。複数のビデオを1つのショーケースにまとめます。編集は簡単で、各ムービーのチャプター用にビジュアルサブナビゲーションと編集可能なキャプションも用意されています。制御された環境下で複数のユーザを対象にFlash Playerのインストール・使用状況を管理する、ITプロフェッショナルまたは管理専門職に役立つ、最新の情報を紹介します。
2007年を振り返り、クリエイティブ表現、テクノロジー、奇抜なアイデアといったさ まざまな点で突出したベストFlashサイトを紹介しましょう
パート2では、シンボル、アニメーションを作成し、バナーを機能させる簡単なActionScriptを作成します。0の世界を体験していただきたいと思います。
HTMLベースのAIRアプリケーション開発環境のセットアップ
HTMLベースのAIRアプリケーション開発環境のセットアップを解説します。0バージョンの相違点について学習します。
0への移行に関するヒント
最新バージョンのActionScriptを使用して初めてFlashアプリケーションを構築するときに陥りやすい問題を回避するために、これら15のヒントを適用します。
0を使った写真やビデオの反射効果
0ベースのカスタムクラスを作る方法を解説します。
Flash内のフレームにディープリンク 〜特定のページに直接リンクする〜
この記事では、FlashサイトあるいはFlashヘッダやナビゲーションの特定のパートに個別のURLでアクセスする方法を解説します。
0基本アクションコンポーネントの使い方
0ドキュメント用の基本的なアクション集
標準のUIボタンコンポーネントと組み合わせることで、インタラクティブなコンテンツがノンスクリプトで制作可能です。0用コンポーネントの作成方法をご紹介します。
キャプションがサポートされるFLVPlaybackコンポーネントスキンを使用したFlashビデオのキャプション設定*
Captionateまたはキューポイントを使用してFlashビデオプロジェクトにキャプションを追加し、それらのキャプションをSWFファイルで表示します。
これまでのデベロッパースポットライト*
その他のイベントを見る。
次のステップ
アドビRSSフィードについて*
製品間の連携*
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
印刷用に表示
0ドキュメント用の基本的なアクション集
標準のUIボタンコンポーネントと組み合わせることで、インタラクティブなコンテンツがノンスクリプトで制作可能です。
各コンポーネントの使用方法 (UIボタンコンポーネントと併用するアクション)
0ドキュメントでしか動作しません。0ドキュメントの場合はコンポーネントパネルに表示されません。0ドキュメントはプロジェクト内での混在は出来ません。このチュートリアルを完了するには、次のソフトウェアおよびファイルがインストールされている必要があります。
基本アクションコンポーネントのご紹介
この記事に必要な予備知識
この記事は、Flashオーサリング環境の基本を理解していること、およびActionScriptの使用経験があることを前提にしています。ボタンが押されたら、次のフレームラベルか、前のフレームラベルに移動します。UIボタンコンポーネントと併用します。
フレームラベルを複数設定
「UIボタンコンポーネント」をステージに配置
ボタンに任意のインスタンス名を設定
パブリッシュ時には見えなくなるので、配置場所はステージ上でもステージ外でもよい。ボタンが押されたら、再生または停止する。UIボタンコンポーネントと併用します。
「UIボタンコンポーネント」をステージに配置
ボタンに任意のインスタンス名を設定
パブリッシュ時には見えなくなるので、配置場所はステージ上でもステージ外でもよい。
著者について
ロクナナワークショップはアドビ認定トレーニングパートナー(ATC)のFlashの学校です。各種アプリケーションの講座運営、イベント企画運営などを行っています。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
url:リンク先を指定する変数
印刷用に表示
0用コンポーネントの作成方法をご紹介します。ライブラリパネルより先ほど作ったMCを選択して右クリックでプロパティを開きます。ActionScriptに書き出しにチェックを入れ、クラスにこれから作成する任意のクラスを指定します。
コンポーネントインスペクタで変更可能な変数をInspectableタグ(メタデータタグ)を使ってクラスファイルに定義します(getURL
今回は以下のような変数を定義します。
//必要なパッケージの読み込み
//指定したインスタンスにリスナーを登録する。
著者について
ロクナナワークショップはアドビ認定トレーニングパートナー(ATC)のFlashの学校です。各種アプリケーションの講座運営、イベント企画運営などを行っています。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
0におけるパフォーマンス向上のヒント | デベロッパーセンター
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
0におけるパフォーマンス向上のヒント
01 データ型を指定する。02 型指定した変数を活用する。03 条件判定を考える。
サンプルファイルのダウンロード
0のスクリプティングで、パフォーマンスを高めるテクニックについて解説します[*1]そのパフォーマンスを引出すポイントからスタートし、さまざまな小ネタをアラカルトで紹介します。
0でも活用できるでしょう
ときには、処理スピードは、可読性やメンテナンスのしやすさとトレードオフになります。また、短いコードが速いともかぎりません。そうした注意点も確認します。0におけるパフォーマンス向上のヒント」をもとに、基本説明や補足を加えて、新たにデベロッパーセンター向けの記事として書いたものです。01 データ型を指定する。0の処理を最適化するためのポイントが挙げられています[*3]それが下図001です。図001 型指定がバイトコードを最適化する。訳すと「型指定がバイトコードを最適化する。バイトコードの最適化というのは、ActionScriptの処理のパフォーマンスが高まることを意味する。その鍵になるのが、一にも二にも型指定だというのです。変数や関数に対するデータ型の指定の仕方を、簡単に確認しておきます。まず、変数はvar宣言時に、変数の後のコロン(:)に続けてデータ型を記述します[*4]変数の宣言と初期値の代入は、1行のステートメントで済ませることもできます。つぎに関数は、引数にコロン(:)をつけて、データ型を指定します。また、関数呼出しの括弧()の後にコロン(:)をつけると、戻り値の型指定ができます[*5]0でデータ型を指定すると、おもに3つの利点があります。
【型指定の利点】
処理が最適化される。型チェックによるエラーが返される。コードヒントが表示される。第1は、本稿のテーマでありChotin氏も強調していた処理が最適化されることです。AMV2が型の情報を用いてデータを扱うため、パフォーマンスが高まり、使われるメモリも少なく済みます[*6]第2に、指定したデータ型にもとづくエラーの確認が行われます。データ型はまずコンパイル(SWF書出し)時にチェックされ[*7]、さらにランタイム(SWFの実行)時にもエラーが検出されます。第3に、型指定した変数には、コードヒントが表示されます[*8]0では、型指定の情報がSWFに書出されません。0と異なるところがなく、バイトコードも基本的に同じです。データ型のチェックも、コンパイル時のみということになります[*9]それは、型指定とドットシンタックスにより得ることができます。
表001 強い参照と弱い参照
たとえば、整数を格納するaというプロパティが納められたオブジェクトは、Objectクラスを使えば簡単に生成することができます。しかし、プロパティaには、データ型が指定できません。つまり、整数以外のどのようなデータでも代入されてしまいます。そこで、少し面倒でもそのためのクラスを定義すると、プロパティのデータ型が指定できます。さらに、型指定により処理が最適化されるので、プロパティへのアクセスは速くなります。たとえば、整数を格納するaというプロパティが備わったクラスMyObjectは、つぎのように定義すればよいでしょう(スクリプト001)[*11]
スクリプト001 int型のブロパティをもったクラスの定義
図002 クラス定義で型指定したプロパティに異なるデータ型の値を入れようとするとコンパイルエラー
クラスにint型で宣言したプロパティに、フレームアクションから文字列の値を入れようとすると、[コンパイルエラー]が生じる。0で始めるオブジェクト指向スクリプティング」の第3回「変数を使う」の「変数の使い方」をお読みください。
0 のデバッグ]の「コンパイラ警告の制御」を参照)
[*8] コードヒントの表示の仕方については、「コードヒントの活用」をご覧ください。0」をご参照ください。0で始めるオブジェクト指向スクリプティング」の第18回「カスタムクラスを定義する」をご覧ください。
[*12] コンストラクタメソッドを定義しなければ、コンパイラが自動的に空のコンストラクタを作成します(前出注[*11]「カスタムクラスを定義する」の注※1参照)
02 型指定した変数を活用する。01「データ型を指定する」に述べたとおり、変数に型指定をすると処理が最適化されます。たとえば、ひとつの処理の中で何度もオブジェクトのプロパティにアクセスするときは、型指定した変数を活用できることが少なくありません。とくにアクセス回数が増えやすいforループの繰返し処理を例に取ります。配列エレメントを処理する。
forループで扱うオブジェクトの典型は、配列でしょう
配列(my_array)のエレメントすべてを取出して処理しようとするとき[*13]、参考書ではつぎのような例を紹介していることがあります。この記述でも、ことさら問題はありません。
また、forステートメントを使った文法の説明としては、これでもよいでしょう
けれど、最適化の観点からは、改善の余地があります。なぜなら、継続条件はループするたびに毎回確かめられるからです。lengthプロパティの値が、ループする回数分だけ参照されます。lengthプロパティの値は予め型指定した変数に納めておく。なお、forステートメントのカウンタ変数(i)は通常整数を用いますので、浮動小数値(Number型)でなく整数(intまたはuint型)で指定する方が処理は速くなります。textプロパティに演算子+=でテキストを追加すると警告が表示される。では、forループでTextFieldインスタンスに、文字列を連続して加える場合について考えてみます。
テストとしてたとえば、0から9までの数字をTextFieldインスタンスに続けて追加するなら、forステートメントをつぎのように記述すればよいでしょうか
確かに、加算後代入演算子+=を用いるよりは、ずっと処理は速くなります。けれど、TextFieldインスタンスに文字列を設定する操作そのものが、そもそも負荷の高い処理です。forステートメントで繰返すコードブロックからは、できるだけ重い処理を外す工夫が求められます。この場合でしたら、繰返す文字列の連結にはStringで型指定した変数を用い、forループが終わってからその変数の文字列をTextFieldインスタンスに加えればよいでしょう(スクリプト003)[*16][*13] 整数0から連続したn個の自然数のエレメントが納められた配列(my_array)は、以下のような短いスクリプトで生成することができます。forステートメントに続く中括弧{}で括られた繰返し処理のコードブロックがなく、セミコロン(;)でステートメントが終わっていることにご注目ください。pus()メソッドの戻り値により、配列のエレメント数を調べています。もっとも、本文に述べる理由から、この処理は効率的とはいえません。0でも、ローカル変数はタイムラインに宣言した(タイムライン)変数よりアクセスが速くなります。
したがって、関数内で配列エレメントをforループで処理する場合には、Array
lengthプロパティの値はローカル変数に納めておく方がよいでしょう
しかし、ヘルプの[コンパイラ警告]には3552と記載されています。
これはドキュメントの誤りでしょう
[*16] String型を指定した変数には必ず初期値、とくに値がなければ空文字列""を設定しましょう
初期値が設定されていないString型変数を文字列として扱うと、"null"という文字列に変換される。03 条件判定を考える。使うプロパティやメソッド、演算子などを変えることによる処理速度の違いというのは、後述のとおり環境によりかなりばらつきがあります。そう考えると、もっとも確実な最適化というのは、基本に戻って処理手順つまりアルゴリズムを磨くことだといえます。ここでは、条件判定の処理を採上げます。
たとえば、「うるう年かどうかを判定する関数」はどのように定義したらよいでしょうか
引数に渡した整数の年がうるう年であればtrue、そうでなければfalseを返す関数です。うるう年は、つぎのように定められています。
【うるう年の判定方法】
4で割り切れる年はうるう年
ただし例外として、100で割り切れる年は普通の年
さらに例外の例外として、400で割り切れる年はうるう年
すると、うるう年を判定する関数isLeapYear()は、条件に論理積&&や論理和||などの演算子を用いて、以下のスクリプト004のように定義されるかもしれません。
この関数は、うるう年を正しく判定します(図005)
なお、剰余演算子%は、右側の項(オペランド[*17])で割った余りを求めます。スクリプト004 複数の条件を組合わせて判定する。
図005 複数の条件をifステートメントに指定
関数はうるう年を正しく判定
ただし、条件がわかりくい
しかし、いくつもの条件を組合わせると複雑になりがちで、誤りを生みやすくなります。
また、最適化を考えるにも、分析しにくいでしょう
そして、最初にtrueと評価されたコードブロックを実行したら、ただちに処理を抜けます。いわば最近テレビ番組で流行っている勝抜けクイズのようなものです。
1問でも正解すれば、その人はその場で解答者席から抜け、あとの問題には答える必要がありません(図006)
条件判定も、ひとつtrueと評価されれば処理を抜けて、あとの条件については問われないということです。すると、条件の順序が大切になってきます。
図006 条件判定の処理は勝抜けクイズと同じ
1問でも正解すれば勝ち抜けで、あとの問題には答えない。
収穫したみかんを大きさによって仕分けるみかん選別機は、コンベヤーの先に大きさの異なる穴が空いていて、その落ちた穴によってSMLが分けられるそうです(図007)
そのとき、間違っても一番手前にLの穴を空けていけないことは、すぐにわかるでしょう
手前にSの穴があれば、まず小さいみかんがすべてその穴から落ちます。すると、その先は穴を通らなかったMとLとの選別になります。したがって、つぎにMの穴、そして最後にLの穴という順にすれば、正しく仕分けられます。手前ほど穴を小さくしないと、正しく仕分けできない。
うるう年の判定に戻りましょう
条件は例外から考えると、整理しやすいことが少なくありません。
つまり、例外の例外である400で割切れる場合から順に考えます(スクリプト005)
スクリプト005 例外から順に判定する。400で割切れれば、迷うことなくうるう年です。すると、400で割切れる年はこの条件で勝抜けます。よって、つぎの条件の100で割切れるというのは、400で割切れない数のうち100で割切れるということですから、例外で普通の年になります。これで、例外はすべて勝抜けました。あとは4で割切れるかどうかにより、うるう年と普通の年とを仕分けるだけです。
みかん選別機を思い浮かべながら見ていけば、処理の流れが理解しやすいでしょう
もっとも、この仕分け方は、あまり効率のよいものではありません。最初に勝抜けるのは、400年に1度のうるう年です。つづけて、100年に1度の例外的な普通の年が抜け、ざっと3/4を占めるであろうごく普通の年は最後まで残ってしまいます。つまり、普通の年たちは、3問すべてに回答しなければならないということです。処理効率を高めるには、できるだけ初めの方の問題で、より多くの勝抜けを出すべきです。そのためには、つぎのスクリプト006のように、条件を少しひねる必要があります。スクリプト006 初めに多くの勝抜けを出す。条件を否定形にしているので、少しわかりにくいかもしれません。けれど、選別機の考え方は同じで、仕分けを前掲スクリプト005とはちょうど逆の順序にしているだけです。スクリプト005よりはもちろんスクリプト004と比べても、処理の効率は高まっています。もっとも、スクリプト004のように複数条件を論理演算子&&や||で組合わせる場合にも、最適化は考えられます。評価が論理演算子の左辺(左オペランド)だけで判定できる場合、右辺(右オペランド)は評価されません。また、逆に引数nYearが4の倍数であれば、つぎに論理積演算子&&の右オペランドが評価されます。つまり、スクリプト004の条件の組合わせでは、少なくともふたつ以上の論理式を評価しなければ、条件判定ができないことになります。それに対してスクリプト006は、ひとつの論理式の評価だけで、3/4近くを占める普通の年を勝抜けさせてしまうのです。
[*17]「オペランド」とは、被演算子を意味します(「ドット演算子と配列アクセス演算子」の注釈[*1]参照)
ステージ上に表示されたインスタンスを画面から消すには、3つのやり方が考えられます[*18]alphaを0に設定すれば完全な透明になり、インスタンスは画面から消え去ります。
【インスタンスを画面から消すプロパティとメソッド】
3つのいずれを使っても、インスタンスは画面から消えます。
これら3つの手法の特徴と違いをまとめてみましょう
非表示になったインスタンスは、画面の描画には負荷として加わりません。もとどおりに表示したいときは、プロパティ値をtrueに戻すだけですので簡単です。注意しなければならないのは、インスタンスが表示リスト内には存在し続け、そのサイズの情報も残ったままだということです。hitTestObject()メソッドの呼出し)をすれば、表示されていなくても判定の領域には含まれることになります。また、表示リスト内のインスタンスすべてを処理しようとすると、非表示のインスタンスも対象となります。visibleプロパティをfalseに設定したインスタンスは、マウスイベントを受取りません。インスタンスのアルファを0にすれば、完全に透明になり、画面からは消え去ります。alphaプロパティを使って画面から消すことはお勧めしません。なぜなら、半透明のときとほどではないとはいえ、画面の描画負荷がかかるからです。
インスタンスが表示リスト内に存在し続け、サイズ情報に反映されることはDisplayObject
alphaプロパティを0にしても、マウスイベントを受取ることです。つまり、透明ボタンができます。このやり方であれば、描画負荷はかかりません。
alphaプロパティで画面から消さなければならない場合はあまりないでしょう
hitAreaプロパティに非表示のインスタンスを指定する。描画に負荷もかからなければ、サイズの情報もなくなります。もちろん、マウスイベントなど受取りようがありません。けれど、もとどおりに表示しようとすると、少々面倒です。インスタンスを表示リストから削除する前の情報が必要になります。
たとえば、インスタンス同士の重ね順、つまり表示リスト内のインデックスは覚えておかなければならないでしょう
表示・非表示を頻繁に切替える必要がなく、当分インスタンスが不要になるという場合に用いるのが適切だと考えられます。以上、3つの手法についてその違いをまとめたのが下表002です。
表002 画面からインスタンスの表示を消すプロパティとメソッド
サイズの情報
表示リスト内のインスタンス
なお、3つのいずれのやり方でも、MovieClipインスタンスのフレームアニメーションは止まりません。
無駄な処理をしないためには、原則として再生ヘッドは止めておくべきでしょう
[*19] インスタンスへの参照をすべて破棄しないかぎり、メモリには残りますので注意が必要です。Arrayクラスの配列インスタンスは、複数の値を納めて扱うことができ、さまざまな場面で活用されます。これらふたつのクラスについて、おもにパフォーマンスの観点から簡単に説明します。
Arrayインスタンスの扱いについては、第1に前述02「型指定した変数を活用する」でご説明したとおり、forステートメントですべてのエレメントを取出すときには、配列の長さであるArray
lengthプロパティの値は予め型指定した変数に取っておくべきでした。第2に注意しなければならないのは、配列エレメントには型指定ができないことです。したがって、型指定による最適化の恩恵を受けるには、取出したエレメントの値は型指定した変数に入れる必要があります。密というのは、エレメントがインデックス0から連番で納められていることを意味します。たとえば、つぎのようなArrayインスタンスを作成すると、インデックス0から2までは連番ですのでエレメントは密です。しかし、インデックス1000のエレメントは密ではありません。すると、インデックス0から2までのエレメントの方が、インデックス1000のエレメントより速くアクセスできます。Vectorクラスのインスタンスには、配列と同じように複数の値を納めることができます。第1に、すべてのエレメントをひとつのデータ型で指定します。したがって、他の型のデータをエレメントにすることはできません。第2に、エレメントのインデックスは連番、つまり密でなければなりません。lengthプロパティの値より大きいインデックスには、エレメントが加えられません。
【配列と異なる点】
エレメントにひとつのデータ型を指定
エレメントは密でなければならない。Vectorクラスのコンストラクタは、つぎのようなシンタックスでインスタンスを生成します。第1引数の長さには、エレメント数を指定します。デフォルトは0です。第2引数は、長さを固定するかどうかをブール(論理)値で渡します。デフォルトはfalseで、長さは固定されません。Vectorクラスを使うとエレメントにデータ型が指定されるため、エレメントに値を設定するときだけでなく、取出した値についても指定した型が有効です。また、エレメントへのアクセスは、配列と比べて高速です。Vectorインスタンスの生成とエレメントの値の追加、変更、取出しは、つぎのように行います。
エレメントのデータ型がひとつで、連番のインデックスに値を納めるときには、ArrayよりVectorクラスのインスタンスを使う方がよいでしょう
0に新たに備わるメソッドには、引数として複数の値をVectorインスタンスで渡す場合が増えると思われます[*22]エレメントのデータ型が指定できるので、引数値に確実さが増すからです。数値の演算について、処理速度が変わる例をいくつかご紹介します。ただし、数値演算にかぎらず、処理方法による速度の差は、環境によってばらつきのあることが少なくありません。オペレーティングシステム(OS)による違いはもちろん、[ムービープレビュー]とブラウザ、さらにブラウザの種類により、ときには結果が逆転することさえあります。こうした違いは、FlashコンテンツがFlash Playerとブラウザを介して処理を行っていることに起因すると考えられます。したがって、これらのアップデートにより、また結果も変わってくると予想されます。
ですから、03「条件判定を考える」にも述べたとおり、細かな差にかかずらうより、処理手順やそのロジックを重視した方がよいでしょう
Mathクラスのメソッドの多くは、処理スピードがあまり速くないようです。
たとえば、数値の2乗や絶対値の取得は、演算子で直接計算した方が速いという結果になります(表003)
表003 画面からインスタンスの表示を消すプロパティとメソッド
もっとも、Mathクラスの名誉のためにひとこと添えるなら、演算子による計算式が直接記述されていることは速さのうえで有利になります。この計算式を関数として定義すれば、その呼出しに負荷が生じ、処理速度の差は縮まります。もうひとつ、切捨ての処理を紹介しておきます。しかし、数値を整数に変換するグローバル関数int()が、小数点以下の数値を同じように切捨てます[*23]
掛け算と割り算
0の数値演算では、割り算よりも掛け算の方が少し速いようです[*24]たとえば、整数nに対するつぎのふたつの演算では、割り算より掛け算の方が速いという結果になります。ただし、2の累乗による割り算はFlash Playerで最適化されているらしく、掛け算との差がほとんどなくなります。
ですから、少しばかり速さに差があるからといって、割り算をすべて掛け算に書直す必要はないでしょう
もっともたとえば、つぎのような座標のイージング(イーズアウト)の処理では、減速率のパラメータとして筆者は5で割るより0
2で掛け算する方を好みます。しかし、それは処理速度が理由ではありません。割り算にするとパラメータは反比例の係数になり、演算値が双曲線を描いて変わります。
掛け算であれば比例の直線的な変化ですので、値の微調整がしやすいのです(図009)
図009 比例と反比例のグラフ
係数による演算値の変化が、比例は直線的で、反比例は双曲線になる。ビット演算は1と0の2進数に基づく演算で、CPUの処理に近いため、一般に高速とされます。とくにビット単位の演算は、他の桁に影響を与えませんので、処理の最適化が期待できます。もっとも、実際の処理結果を比べてみると、環境による違いも少なくありません。整数に対して2もしくは2の累乗で掛け算や割り算を行う場合、ビット単位のシフト演算を用いると速いといわれます[*25]10進数で数値全体をひと桁繰り上げれば10倍になり、逆にひと桁繰り下げれば1/10になります。ビット単位のシフト演算はこれを2進数で行いますので、整数を2倍もしくは1/2にすることができます。ビット単位の左シフト演算子<<は、左オペランドの整数(nNumber)を右オペランドの整数(n)の桁数左に繰上げます。したがって、2n(2のn乗)を掛け算したのと同じ結果になります。ビット単位の右シフト演算子>>は、左オペランドの整数(nNumber)を右オペランドの整数(n)の桁数右に繰下げます。したがって、2n(2のn乗)で割り算したのと同じ結果になります。ビット単位のシフト演算は、一般的には2または2の累乗による掛け算や割り算より処理が速くなります。ただ、筆者のテストしたかぎりでは、環境によるばらつきが目立ちます[*26]ビット単位の論理和演算子|は、ふたつのオペランドの対応する各ビット(2進数の各桁)の値の少なくとも一方が1であれば1を、そうでなければ0を返します。オペランドも0か1ですので、4とおりの組合わせが考えられ、ビット単位の論理和演算子|の演算結果は下表004のとおりです。
表004 ビット単位の論理和演算子|の演算結果
sortOn()メソッドの第2引数にソートオプションとして複数のArray定数を指定するとき、それらの定数は|演算子でまとめます。たとえば、配列my_arrayをフィールド名field_strで、数値の降順に並べ替えたいときは、つぎのようなステートメントを記述します。Array定数は次表005のとおり、2進数で表したとき値1を取る桁が重ならないようにフラグとして定められています。したがって、複数の定数値をまとめる場合、論理和|でなく加算+で演算しても同じ結果が得られます。けれど、2進数の桁をフラグとして用いるのは、ビット演算の考え方にもとづくものです。ですから、ビット単位の演算子を使うのが一貫しているでしょう[*27]
10進数で表した値
2進数で表した値
ビット演算を用いる典型は、カラー値の計算です。カラー値はRGB各成分値を0からFまでの16進数ふた桁の256階調で指定し、計6桁で表します。つまり、16進数ふた桁をひとつとみなせば256進法ということになります。
したがって、16進法のひと桁繰上げ/繰下げは、ビット単位で4桁シフトすればよいでしょう
256進法のひと桁繰上げは、256(=28)を掛けることで、ビット単位の演算で8桁左シフトになる。すると、RGBの各256階調の値がint型の変数nR、nG、nBにそれぞれ入っているとすれば、RGGカラー値はつぎのようなビット演算で求めることができます。
暗黙の型変換
forループのカウンタ変数について述べたとおり、整数の演算は変数をintまたはuint型で指定した方が処理は速くなります。しかし、だからといって、何でも整数で型指定すればよいという訳ではありません。たとえば、int型の変数にNumber型の浮動小数値を代入すれば、数値のデータ型が黙示的に変換されます。その処理が加わることにより、負荷はかえって増します。ですから、数値の型指定は適切に行う必要があります。[*24] 詳しくは、「掛け算と割り算の処理速度」をお読みください。しかし、戻り値はint型ですので、基本的には整数の演算を想定していると考えられます。[*27] 詳しくは、「複数のフラグをひとつの整数で表す」をお読みください。
著者について
独立系パソコン販売会社で、総務・人事、企画、外資系企業担当営業などに携わる。
その後、マルチメディアコンテンツ制作会社に転職
ソフトウェアトレーニング、コンテンツ制作などの業務を担当する。Web制作者に向けた情報発信プロジェクトF-siteにも参加する。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
03 コードヒントとコードスニペット
この記事を最大限に活用するには、次のソフトウェアとファイルが必要です。けれど、落着いてドキュメントを確かめていけば、派手さはなくても、表現力や使い勝手を高める機能が加わっています。その中から7つご紹介します。
[ツール]パネルから[テキストツール]を選ぶと、[プロパティ]インスペクタのテキストエンジンとして[TLFテキスト]が選択できます(図001左図)
[テキストツール]を選ぶと、[プロパティ]インスペクタで[TLFテキスト]が選択できる(左図)
[詳細な文字設定]のセクションでは、細かな文字の設定ができる(右図)
たとえば、これまでのTextFieldインスタンス([クラシックテキスト])をタイムラインに動的に配置して、その文字を設定するときは、つぎのようなフレームアクションを書ききました。たとえば、テキストを動的に縦書きにすることです。つぎのフレームアクション(スクリプト001)は、タイムラインにTLFTextFieldインスタンスを配置して、テキストを設定します。
そして、そのインスタンスをクリックするたびに、横書きと縦書きが切替わります(図002)
たとえば、テキストを動的に縦書きにすることです。ですから、マウスクリックのようなインタラクティブなイベントが受取れます。
// フレームアクションに追加
前掲スクリプト001に上記の書式の設定を加えたのが、つぎに示すスクリプト002です(図003)
[ツール]パネルから[テキストツール]を選ぶと、[プロパティ]インスペクタのテキストエンジンとして[TLFテキスト]が選択できます。[TLFテキスト]はとくに[詳細な文字設定]を使うと、まるでInDesignのような細かな文字の設定が行えます。0でコントロールするときも、IKアーマチュアは予めムービー内に作成しておきます。設定がわかりやすいように、ごくシンプルなつくりにしました。スプリングは[プロパティ]インスペクタの[スプリング]セクションで設定できます。けれど、今回は[スプリング]はなしのまま、スクリプトでこの設定を行います。ここでは[スプリング]を設定していない。なお、このIKアーマチュアは、SWF上でインタラクティブに操作できるようにします。
そのためには、[プロパティ]インスペクタでIKアーマチュアの[オプション]セクションの[種類]を[実行時]に設定しておく必要があります(図005)
[実行時]に設定すると、SWF上でインタラクティブに操作できる。IKボーンにスプリングを設定するには、IKジョイントの参照が必要です。これでIKJointインスタンスにスプリングが設定できます。
[プロパティ]インスペクタの[スプリング]セクションには、[強さ」と[減衰]のふたつのコントロールがありました(前掲図004)
つぎのスクリプト003は、スプリングの強さと減衰をともに50に設定しました。スクリプト003■IKJointインスタンスにスクリプトでスプリングを設定する。これでスプリングが設定されました。
IKアーマチュアは[実行時]の設定ですので、棒のインスタンスをマウスでドラッグして動かせば、ペンギンのインスタンスがバネあるいはゴムでつながれたように間隔を伸び縮みさせながらついてきます(図006)
図006■マウスのドラッグでスプリングの効果が現れる。IKアーマチュアを[実行時]に設定したので、インタラクティブなアニメーションにスプリングの効果が適用される。あまり激しく動かし過ぎると、ペンギンが振り回されて回転してしまいます。
納得のいく動きにするには、IKアーマチュアをもっと細かくつくり込み、動きの制限なども加える必要があるでしょう
[*2] インバースキネマティクスの基本については、「ボーンツールを活用したインタラクションの作成」をお読みください。
03 コードヒントとコードスニペット
スクリプトを書く環境についても、便利な機能が加わっています。まずは、[コードスニペット]からご紹介します。これは、いわばそのまま使えるスクリプトのライブラリです。
[コードスニペット]パネルに、さまざまなスクリプトが用途により小分けされて納められています(図007)
さまざまなスクリプトが用途ごとに分類されている。
たとえば、インスタンスに「アニメーション」の中の「キーボードの矢印キーで移動」を設定するとしましょう
そのときは、インスタンスに名前をつけたうえで選択して、[コードスニペット]パネルの選びたい項目をダブルクリックします。
それだけで、インスタンス名も正しく設定されたフレームアクションが、[アクション]パネルに自動的に記述されます(図008)
図008■[コードスニペット]パネルで設定されたフレームアクション
インスタンス名も正しく設定されて、インスタンスの配置されたフレームにスクリプトが自動的に記述される。
初心者は[コードスニペット]のスクリプトを学習に役立てることができるでしょう
また、中・上級者は、自分や他の人たち向けにスクリプトを[コードスニペット]に加えることもできます。まず、[コードスニペット]に登録したいスクリプトを準備します。たとえば、「キーボードの矢印キーで移動」のスクリプトは、移動ピクセル数が決め打ちのため修正が面倒なので、変数に変えてみます。図009■[コードスニペット]に登録するスクリプトを準備して選択する。
そのうえで、登録したいステートメントを選んだ状態で、[コードスニペット]パネルのオプションポップアップメニューから[新規コードスニペットを作成]を選択すると、[新規コードスニペットを作成]ダイアログボックスが開きます(図010)
図010■[新規コードスニペットを作成]ダイアログボックスを開く。
[コードスニペット]パネルのオプションポップアップメニューから[新規コードスニペットを作成]を選択
まず、ダイアログボックスの[自動読込み]ボタンをクリックすると、選択しておいたステートメントが[コード]のフィールドに読込まれます(コピー&ペーストも可能です)
そして、[タイトル]と[ツールヒント]を入力したら[OK]ボタンをクリックします。スクリプトは[コードスニペット]パネルの「カスタム」フォルダに登録されます。登録したスクリプトは「カスタム」フォルダに納められる。しかし、もっと気が利くようになりました。第1に、パッケージのクラスを用いると、importステートメントが自動的に入ります。
とくにクラス定義をするときには、とても手間が省けるでしょう(図012)
第2に、コンストラクタの呼出しにもコード補完が利きます。しかし、そのあとコンストラクタの呼出しは長い名前を慎重にタイプするか、せいぜいデータ型からコピー&ペーストするくらいしか手がありませんでした。ところが、これからはコンストラクタもコードヒントから選べます。図012■import宣言は自動的に挿入されてコンストラクタにもコードヒントが現れる。
new演算子をタイプすれば、変数に宣言したデータ型のコンストラクタがコードヒントから選べる
第3に、カスタムクラスもコードヒントに含まれるようになりました。データ型に指定できるのはもちろん、コンストラクタがコードヒントから選べます。
さらに、カスタムクラスで型指定していると、カスタムクラスのプロパティやメソッドがコードヒントに含めて表示されます(図013)
図013■カスタムクラスもコードヒントに含まれる。
カスタムクラスに定義したプロパティやメソッドが、コードヒントから選べる
ひとつ注意しなければいけないのは、パッケージのクラスはimport宣言をしていないと、そのクラスのコードヒントが表示されないということです。
これは、クラス定義でしたら問題ないでしょう
けれど、フレームアクションでは、これまで少なくとも通常の(flashパッケージの)クラスは、明示的にimportステートメントを書かなくても済みました。もっとも、前述のとおり、変数をvar宣言しさえすれば、クラスが自動的にimportされます。問題が残るとするなら、クラス定数です。
たとえば、イベントリスナーに指定するイベント定数Event
ひとつの小技は、暫定的に変数を宣言してしまうということです。以下のようにEventでデータ型指定した変数を仮に宣言すれば、improtステートメントが加えられます。これでコードヒントが出るという訳です。ただ、配列と異なり、コンストラクタでインスタンスを生成するとき、同時にエレメントを加えることはできませんでした。クラス名であるVectorの記述がなく、呼出しの括弧()も書かないという奇妙なスタイルです。最後のエレメントの後のカンマ(,)は省けます。たとえば、0から2までの整数をエレメントとするVectorインスタンスは、つぎのステートメントで生成できます。地味に便利です。ただし、このシンタックスでは、今度は引数でVectorインスタンスの長さが固定できなくなります。
fixedプロパティで行いましょう
0におけるパフォーマンス向上のヒント」をご参照ください。残る3つの項は、いずれも新たなイベントのご紹介です。sampleDataイベントで、マイク入力からサウンドのサンプリングデータが得られます。このサンプリングデータから、サウンドの波形を描いたり録音することができるようになります。本稿では、そのイベントの扱いについて簡単にご説明します。gainによりゲイン(増幅率)を定めます。dataプロパティにバイナリデータでByteArrayオブジェクトとして納められています。
// 以降サンプリングデータの処理
それでは、試しにリスナー関数で、サウンドのサンプリングデータから波形をグラフのように描いてみましょう
サンプリングデータは、±1の範囲の浮動小数点数値の集まりです。スクリプト004■マイクから受取ったサンプリングデータを波形として描く。具体的には、マイクからサンプリングデータを受取るたびに、横軸はデータのポインタ位置として、縦軸に各値を線グラフのように結んで描きます。
すると、そのサウンドの特徴を表す波形になりました(図014)
もっとも、これは取出したデータをそのまま並べただけです。目的によって、このデータをさらに変換・加工して扱うことになります[*4]
図014■マイクから受取ったサンプリングデータにより描かれた波形
リスナー関数が受取ったサンプリングデータの各値を、線グラフ状に結んでできた波形
タッチパネルに対応したマルチタッチやジェスチャーも、インタラクティブな(InteractiveObjectクラスの)イベントとして受取れるようになりました[*5]0の原則どおりです。1以降では、インスタンスに対するこれらのイベントに、リスナー関数を登録して扱えます。
イベントを発生させる操作
タッチポイントを移動
タッチしてタップ
タッチして回転のジェスチャ
2箇所に同時にタッチ
タッチの開始
タッチの終了
タッチ位置を移動
タッチ位置をインスタンス外に移動
タッチ位置をインスタンス上に移動
タッチ位置をインスタンス外に移動
タッチ位置をインスタンス上に移動
タッチしてタップ(押して離す)
1とマルチタッチ」をお読みください。
通常エラーを受取るには
以下のふたつの処理を組み入れます。
【エラーの検出方法】
catchステートメントでエラーを切り分ける。エラーのイベントにリスナーを登録して処理する。ユーザー側でエラーダイアログが出るのを避けたり、予想しなかったエラーの情報を得るためなどに用いられます。[*6]「エラーの種類」をご参照ください。
著者について
独立系パソコン販売会社で、総務・人事、企画、外資系企業担当営業などに携わる。
その後、マルチメディアコンテンツ制作会社に転職
ソフトウェアトレーニング、コンテンツ制作などの業務を担当する。Web制作者に向けた情報発信プロジェクトF-siteにも参加する。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
スクリプトアシストについて
0言語の詳細
データの理解
シンタックスとステートメントについて
イベントの処理
高度なリソース
印刷用に表示
取り上げる素材の多くは、Flashドキュメンテーションに含まれるものです。新しい機能の使用方法を学ぶ際には、最初にFlashヘルプまたはLiveDocsを必ず参照してください。また、単純なアニメーションの作成から、豊富なデータを含む複雑でインタラクティブなアプリケーションインタフェイスの設計に至る、Flashでのさまざまな作業を効率的に行うことができます。0の2つのバージョンがあります。ほとんどの一般的なニーズやFlash Playerの旧バージョンへの対応にご利用いただけます。
ユーザがボタンをクリックしたときに単純なインタラクティブ操作を行う場合、またはモバイルデバイス用のアプリケーションを作成する場合は、ActionScript 1
0を使用します。0の方が適しています。0は、完全なクラス継承と開発者が高機能言語に求めるすべての機能をサポートしているオブジェクト指向プログラミング言語です。より柔軟性のあるプログラミング環境とより高いデバッグ能力を提供します。0は、慣れ親しんだ本格的なオブジェクト指向プログラミング(OOP)手法を用いており、クラス、継承、インタフェイスなどのOOPの一般的な概念をすべてサポートしています。0は、変数のデータ型の指定、関数パラメータと戻り値の型、包括的なデバッグ情報など、ActionScriptプログラミングを拡張する機能も備えています。開発者にとっては、プログラミング構造の改善と、コーディングおよび維持にかかる時間を短縮できる利点もあります。
堅牢な機能を持つ本格的なプログラミング言語を使用したコードを作成するには、ActionScript 2
0を使用します。0の方が簡単で手早いソリューションかどうかを判断するには、次のリソースを参照してください。それによって、この重要な決定を下し、それぞれのプロジェクトを最も効率的に進めることができます。0の学習」を選択し、「データおよびデータ型」および「シンタックスと言語の基礎」の2つのセクションをお読みください。0への移行」を参照してください。0におけるオブジェクト指向コーディングの利点を比較するには、次を参照してください。0でのオブジェクト指向プログラミング」を参照してください。0の学習』の「クラス」を参照してください。0およびオブジェクト指向プログラミングの基本概念の一部を紹介します。この後のセクションでは、一般的な用語について説明し、Flashアプリケーションの構成方法、FlashのActionScript言語およびスクリプティングの学習方法、さらなる情報や例を見つけることができる場所を示します。0の学習』マニュアルの「シンタックスと言語の基礎」を参照してください。0を使ったクラスの作成を始めたい場合は、同じマニュアルの「クラス」に掲載されている「カスタムクラスの記述」の例を参照してください。この習得ガイドに沿って操作を実際に行うには、次のソフトウェアとファイルをインストールする必要があります。FlashおよびFlashワークスペースについての基礎知識が必要です。
著者について
IMDは、ユーザがMacromedia製品の使用方法を習得するために役立つオンラインヘルプシステム、マニュアル、チュートリアル、および例を著しています。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
スクリプトアシストについて
0言語の詳細
データの理解
シンタックスとステートメントについて
イベントの処理
高度なリソース
データの理解
データとは、Flash内で操作できる数値、ストリングやその他の情報を指します。アプリケーションやWebサイトの作成時に、データの使用は通常欠かせません。高度なグラフィックやスクリプトで生成したアニメーションの作成時にも、データを使用しますが、エフェクトの駆動に使用する値を操作する必要があります。Flash内の変数でデータを定義したり、XML、Webサービスなどを使用して外部ファイルやサイトからデータをロードしたりできます。データをデータベースに格納してから、その情報をいくつかの方法でSWFファイルで表現することもできます。その中には、テキストフィールドやコンポーネントでの情報の表示、ムービークリップインスタンスでのイメージの表示などがあります。データの種類で最も一般的なものとしては、ストリング(名前やテキストの一節など、一連の文字)、数値、オブジェクト(ムービークリップなど)、ブール値(trueとfalse)などがあります。データ型とは、1つのデータおよびその上で実行できる操作の種類を示すものです。データは変数(後述の「変数」セクションを参照)に格納します。データ型は、変数、オブジェクトインスタンスおよび関数定義の作成時に使用して、作業するデータの型を割り当てます。データ型を使用して各種のデータを分類すると、データの使用方法を知ることができます。例えば、数値データでは演算を実行できますが、数値を回転しても無意味です。一方、ムービークリップは回転できますが、ムービークリップを別のムービークリップで乗算しても無意味です。0では、変数のデータ型、パラメータおよび関数の戻り値の型を正式に指定し、そのコンテキストで使用できるデータの分類をFlashに通知できます。例えば、ある変数をストリングデータ型として宣言すると、その変数にストリングのみ割り当てることができます。この変数に数値を割り当てようとすると、Flashではコンパイラエラーが表示されます。プリミティブ値(またはプリミティブデータ型)とは、ActionScriptで最下位レベルで抽象化されて格納される値です。つまり、プリミティブデータ型での操作は、一般的に複合データ型で実行される操作より速く効率的です。例えば、ブール値、数値およびストリング値は、null値や未定義値と同様、すべてプリミティブデータ型です。複合値(または複合データ型)とは、非プリミティブ値でプリミティブ値を参照する値です。リファレンスデータ型とも呼ばれます。複合値は、オブジェクトデータ型またはオブジェクトデータ型に基づくデータ型に属します。複合値のセットを定義するデータ型には、配列、日付、ボタン、ムービークリップ、XMLなどがあります。0リファレンスガイド』の該当する項目を参照してください。プリミティブデータ型を含む変数の動作は、状況によっては、複合型を含む変数の動作と異なることがあります。
「変数について」
0の学習/データおよびデータ型/変数について)
0の学習/データおよびデータ型/変数について/プロジェクトでの変数の使用)
Flashアプリケーションで使用できる基本的なデータ型については、「プリミティブデータ型および複合データ型について」を参照してください。
0の学習/データおよびデータ型/データ型について/プリミティブデータ型および複合データ型について)
0リファレンスガイド』を参照してください。変数は情報を保持するコンテナです。この変数は数値を保持します。前述のコードでは、:Numberを使用して、変数が保持する値のタイプを割り当てています。これはデータ型指定と呼ばれます。データ型指定について詳しくは、後述の「データ型の割り当て」を参照してください。スクリプト内の変数の値は、必要に応じて何回でも変更できます。SWFファイルの再生中に変数の値を変更すると、ユーザが行った操作に関する情報の記録と保存、SWFファイルの再生中に変わる値の記録または条件がtrueかfalseかの評価を行うことができます。Flashゲームでプレーヤーの得点が変わる際など、SWFファイルの再生中に変数を絶えず更新する必要があります。SWFファイルにユーザのインタラクションを作成し処理する場合、変数は欠かせません。変数にはさまざまなデータ型を保持できます。0の学習/データおよびデータ型/データ型について)を参照してください。変数が格納するデータ型は、スクリプトで変数値を割り当てるときに、その値の変わり方に影響します。各SWFファイルとオブジェクトインスタンス(ムービークリップなど)には変数のセットがあり、それぞれの変数には、他のSWFファイルやムービークリップ内の変数と独立した値が設定されています。変数の値を表示するには、trace()ステートメントを使用して値を出力パネルに送信します。テスト環境でSWFファイルをテスト時に、値が出力パネルに表示されます。変数の値は、テスト環境のデバッガでも確認し設定できます。
0の学習/データおよびデータ型/変数についてで利用できます)
変数の宣言について
値の割り当てについて
変数の命名について
アプリケーションでの変数の使用
変数とスコープについて
変数のロードについて
プロジェクトでの変数の使用
データ型の割り当て
変数の作成時に、変数のオブジェクト型を明示的に宣言できます。これは厳密な型指定と呼ばれます。項目を数値、ストリングまたは別のデータ型を保持するものとして明示的に定義しない場合、Flash Playerでは、割り当て時(実行時)に項目のデータ型を判別しようとします。
0の学習/データおよびデータ型/データ型についてで利用できます)
「データ型の割り当てと厳密な型指定について」とそのサブセクション「データ型の割り当て」
「型チェックについて」
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
取り上げる素材の多くは、Flashドキュメンテーションに含まれるものです。新しい機能の使用方法を学ぶ際には、最初にFlashヘルプまたはLiveDocsを必ず参照してください。また、単純なアニメーションの作成から、豊富なデータを含む複雑でインタラクティブなアプリケーションインタフェイスの設計に至る、Flashでのさまざまな作業を効率的に行うことができます。0の2つのバージョンがあります。ほとんどの一般的なニーズやFlash Playerの旧バージョンへの対応にご利用いただけます。
ユーザがボタンをクリックしたときに単純なインタラクティブ操作を行う場合、またはモバイルデバイス用のアプリケーションを作成する場合は、ActionScript 1
0を使用します。0の方が適しています。0は、完全なクラス継承と開発者が高機能言語に求めるすべての機能をサポートしているオブジェクト指向プログラミング言語です。より柔軟性のあるプログラミング環境とより高いデバッグ能力を提供します。0は、慣れ親しんだ本格的なオブジェクト指向プログラミング(OOP)手法を用いており、クラス、継承、インタフェイスなどのOOPの一般的な概念をすべてサポートしています。0は、変数のデータ型の指定、関数パラメータと戻り値の型、包括的なデバッグ情報など、ActionScriptプログラミングを拡張する機能も備えています。開発者にとっては、プログラミング構造の改善と、コーディングおよび維持にかかる時間を短縮できる利点もあります。
堅牢な機能を持つ本格的なプログラミング言語を使用したコードを作成するには、ActionScript 2
0を使用します。0の方が簡単で手早いソリューションかどうかを判断するには、次のリソースを参照してください。それによって、この重要な決定を下し、それぞれのプロジェクトを最も効率的に進めることができます。0の学習」を選択し、「データおよびデータ型」および「シンタックスと言語の基礎」の2つのセクションをお読みください。0への移行」を参照してください。0におけるオブジェクト指向コーディングの利点を比較するには、次を参照してください。0でのオブジェクト指向プログラミング」を参照してください。0の学習』の「クラス」を参照してください。0およびオブジェクト指向プログラミングの基本概念の一部を紹介します。この後のセクションでは、一般的な用語について説明し、Flashアプリケーションの構成方法、FlashのActionScript言語およびスクリプティングの学習方法、さらなる情報や例を見つけることができる場所を示します。0の学習』マニュアルの「シンタックスと言語の基礎」を参照してください。0を使ったクラスの作成を始めたい場合は、同じマニュアルの「クラス」に掲載されている「カスタムクラスの記述」の例を参照してください。この習得ガイドに沿って操作を実際に行うには、次のソフトウェアとファイルをインストールする必要があります。FlashおよびFlashワークスペースについての基礎知識が必要です。
スクリプトアシストについて
ActionScriptコードやシンタックスの記述に不安がある場合、アクションパネル(ウィンドウ/アクション)のスクリプトアシストモードを使用してみることもできます。スクリプトアシストは、スクリプトを作成する際に便利なツールです。スクリプトを作成するには、アクションパネルで選択を行い、テキストフィールドに入力してスクリプトペインでステートメントを自動的に作成します。スクリプトアシストは通常大きなアプリケーションには使用しませんが、Flashアプリケーションへのインタラクティブ操作の追加、プロトタイプのモックアップなどに非常に便利です。スクリプトアシストを使用すると、アクションツールボックス(アクションパネルの左側にあるリスト)から項目を選択してスクリプトを作成できます。追加(+)ポップアップメニューからアクションを選択することもできます。アクションツールボックスでは、項目がアクション、プロパティ、オブジェクトなどのカテゴリに区分されており、すべての項目をアルファベット順にリストするインデックスカテゴリも用意されています。項目を一度クリックすると、パネルの右上にその説明が表示されます。項目をダブルクリックすると、スクリプトペインのパネルの右側にあるスクロールリストにその項目が追加されます。スクリプトアシストモードでは、スクリプトペインでのステートメントの追加、削除または順序の変更を行うことができます。スクリプトペインの上にあるテキストボックスにアクションのパラメータを入力することもできます。スクリプトアシストモードでは、アクションパネルの標準機能を使用することもできます。例えば、テキストの検索と置換、スクリプトの行番号の表示、スクリプトの固定(オブジェクトやフレームからクリックするだけでスクリプトをスクリプトペインに保持)などを行うことができます。アクションをFlashドキュメントに追加するには、ボタンやムービークリップまたはタイムラインのフレームに関連付ける必要があります。アクションパネルでは、アクションの選択、ドラッグ&ドロップ、再配置および削除を行うことができます。ウィンドウ/アクションを選択します。アクションパネルが表示されます。「スクリプトアシスト」ボタンをクリックします。アクションパネルがスクリプトアシストモードに移行します。メモ:「スクリプトアシスト」ボタンのクリック時にアクションパネルにActionScriptコードがある場合、既存のコードが検証されます。コードにエラーがある場合、現在のコードの選択範囲を修正(またはコメントアウト)しない限り、スクリプトアシストを使用できません。スクリプトアシストを有効にすると、アクションパネルのユーザインタフェイスとビヘイビアが次のように変更されます。追加(+)ボタンの機能は、スクリプトアシストモードの場合と異なります。フォーカスがアクションツールボックスにある場合、現在選択されているテキストブロックの後に選択範囲が追加されます。フォーカスがスクリプトペインにある場合、該当するテキストブロックに選択範囲が追加されます。削除(-)ボタンを使用すると、スクリプトペインの現在の選択範囲を削除できます。上下の矢印ボタンを使用すると、スクリプトペインの現在の選択範囲をコード内で前後に移動できます。「シンタックスチェック」、「自動フォーマット」、「コードヒントの表示」、「デバッグオプション」の各ボタンおよびアクションパネルに通常表示されるメニュー項目は、スクリプトアシストモードには適用されないため、無効になります。「ターゲットパスの挿入」ボタンを使用すると、アクションのターゲットとして、ステージ上の(またはステージ上のオブジェクト内でネストされている)ムービークリップ、ボタン、テキストフィールドまたはビデオオブジェクトを選択できます。このようなターゲットとして想定される編集ペイン内のフィールドを編集中でない限り、このボタンは無効になります。Flashドキュメンテーション(FlashヘルプとLiveDocsの両方)には、スクリプトアシストの使用方法を説明する演習例が用意されています。スクリプトアシストを使用した小さなアプリケーションの作成方法を示すチュートリアルについては、Flashチュートリアル/ActionScript:スクリプトアシストモードの使用を参照してください。
0言語の詳細
0には、クラス、継承、インタフェイスなど、いくつかのプログラミングキーワードや概念が導入されています。これらの概念は、一般的にはオブジェクト指向プログラミングと呼ばれるものから構成されています。0の学習/クラス/オブジェクト指向プログラミングとFlashについて/オブジェクト指向プログラミングの基礎を参照してください。0の学習/用語を参照してください。0には次の機能があります。
広く知られているオブジェクト指向プログラミング(OOP)モデル
0の主要な機能として、オブジェクト指向プログラム作成用の一般に知られているモデルが挙げられます。0には、クラス、インタフェイス、パッケージなどのオブジェクト指向概念がいくつか実装されています。これらの概念については、Javaや他のオブジェクト指向言語でプログラミングの経験がある方ならば、よく知っているはずです。このモデルは、オブジェクトを作成し継承を確立するために、Flash MXなど以前のバージョンのFlashで使用されるプロトタイプ連鎖方法を「構文的に形式化」したものです。0では、カスタムクラスを作成し、Flashのビルトインクラスを拡張できます。
厳密な型指定
0ではまた、変数のデータ型、関数のパラメータおよび関数の戻り値の型も指定できます。
コンパイラの警告とエラー
前述の2つの機能(OOPモデルと厳密な型指定)によって、オーサリングツールとコンパイラでは、コンパイラの警告とエラーメッセージを出力できるため、アプリケーションのバグを以前のFlashより早く見つけられます。0を指定してください。これはFlash 8で作成されるファイルの初期設定となっています。0に変更します。変更しない場合、FLAファイルのコンパイルが正しく行われず、エラーが生成されません。タイムライン上のフレーム(フレームスクリプト)でクラスを作成したり、ムービークリップやボタンインスタンスに関連付けたりすることはできません。クラスファイルに関する重要ないくつかのポイントを次に示します。各ASクラスファイルには1つのクラスしか定義できません。クラスを格納しているファイルの名前は、そのクラスの名前と一致する必要があります。フォルダ内の複数のクラスを組み合わせてパッケージを作成できます。0の学習/クラス/例 : カスタムクラスの記述のセクションの手順を試してみてください。
「クラスパスの設定と修正について」
0の学習/クラス/アプリケーションでのカスタムクラスの使用について/クラスファイルの読み込みについて/クラスパスの設定と修正について)
「パッケージについて」
0の学習/クラス/オブジェクト指向プログラミングと Flash について/パッケージについて)
0のベストプラクティスとコーディング規則」
0のベストプラクティスとコーディング規則)
Flashで新しいドキュメンテーションまたはアプリケーションを開始する場合、関連するファイルの編成方法を決定する必要があります。複雑なアプリケーションの作成時など、一部のプロジェクトではクラスを使用することもあります。ただし、すべてのドキュメントでクラスを使用するわけではありません。例えば、Flashのドキュメントにある多数の短い例では、クラスを使用していません。小さなアプリケーションや簡単なFLAファイルでは、クラスを使用して機能を格納することが最も簡単または最適なソリューションとは言えません。小さなプロジェクトを作成する場合、クラスや外部コードファイルを使用してActionScriptを構成すると、FLAファイル内にActionScriptを追加するより大変な作業量や労力になることがよくあります。この場合、タイムライン上のすべてのコードをできる限り少ないフレームに配置し、コードをFLAファイルのインスタンス(ボタンやムービークリップなど)に配置しないようにしてください。0を使用する必要はありません。
コードをFLAドキュメント内に配置した上で、厳密なデータ型指定機能や新しいメソッドとプロパティを持つActionScript 2
0を使用することもできます。0には、他のプログラミング言語の標準に従うシンタックスも用意されています。これにより、この言語の学習がより簡単で価値のあるものになります。例えば、構造とシンタックスの規格が同じ別の言語を使用したことがある場合、ActionScriptに違和感を感じません。または、その知識を将来学習する他の言語に適用することもできます。0では、言語エレメントの追加セットを使用することで、アプリケーション開発にオブジェクト指向のアプローチを採用できます。これはアプリケーション開発にとって有利です。場合によっては、使用するActionScriptのバージョンを選択できないこともあります。0を使用する必要があります。大文字と小文字の区別における一貫性の確保、コード補完機能の使用、読みやすさの強化、インスタンス名でのキーワード使用の防止、一貫した命名規則の維持など、多くのプラクティスはどちらのバージョンにも適用されます。0、クラスおよびバージョンコントロールを使用して、アプリケーションの更新と変更をしやすくしておく必要があります。クラスファイルについて詳しくは、「オブジェクト指向プログラミング」セクションを参照してください。0コードへの更新で最初に理解しておく必要があることは、ほとんどの場合において、更新が不要であるということです。0に移行すると役に立つのは、主に次の場合です。
大量のコードを含む大規模なFlashアプリケーションやプレゼンテーションの場合
0より多くのデバッグ情報を得られます。0を使用すると、コードの保守と変更がより簡単になります。
OOPに興味があり、使い慣れたオーサリング環境でOOPについて学習したい場合
0やV2コンポーネントの利点や機能の一部を活用するために、クラスファイルを記述する必要がないことも覚えておいてください。0コード(データ型の注釈を変数に適用するコードなど)を記述できます。0を使用できますが、使用するAPIがターゲットのPlayerのバージョンでサポートされていることを確認する必要があります。0のいずれも大文字と小文字を区別しません。
データの理解
データとは、Flash内で操作できる数値、ストリングやその他の情報を指します。アプリケーションやWebサイトの作成時に、データの使用は通常欠かせません。高度なグラフィックやスクリプトで生成したアニメーションの作成時にも、データを使用しますが、エフェクトの駆動に使用する値を操作する必要があります。Flash内の変数でデータを定義したり、XML、Webサービスなどを使用して外部ファイルやサイトからデータをロードしたりできます。データをデータベースに格納してから、その情報をいくつかの方法でSWFファイルで表現することもできます。その中には、テキストフィールドやコンポーネントでの情報の表示、ムービークリップインスタンスでのイメージの表示などがあります。データの種類で最も一般的なものとしては、ストリング(名前やテキストの一節など、一連の文字)、数値、オブジェクト(ムービークリップなど)、ブール値(trueとfalse)などがあります。データ型とは、1つのデータおよびその上で実行できる操作の種類を示すものです。データは変数(後述の「変数」セクションを参照)に格納します。データ型は、変数、オブジェクトインスタンスおよび関数定義の作成時に使用して、作業するデータの型を割り当てます。データ型を使用して各種のデータを分類すると、データの使用方法を知ることができます。例えば、数値データでは演算を実行できますが、数値を回転しても無意味です。一方、ムービークリップは回転できますが、ムービークリップを別のムービークリップで乗算しても無意味です。0では、変数のデータ型、パラメータおよび関数の戻り値の型を正式に指定し、そのコンテキストで使用できるデータの分類をFlashに通知できます。例えば、ある変数をストリングデータ型として宣言すると、その変数にストリングのみ割り当てることができます。この変数に数値を割り当てようとすると、Flashではコンパイラエラーが表示されます。プリミティブ値(またはプリミティブデータ型)とは、ActionScriptで最下位レベルで抽象化されて格納される値です。つまり、プリミティブデータ型での操作は、一般的に複合データ型で実行される操作より速く効率的です。例えば、ブール値、数値およびストリング値は、null値や未定義値と同様、すべてプリミティブデータ型です。複合値(または複合データ型)とは、非プリミティブ値でプリミティブ値を参照する値です。リファレンスデータ型とも呼ばれます。複合値は、オブジェクトデータ型またはオブジェクトデータ型に基づくデータ型に属します。複合値のセットを定義するデータ型には、配列、日付、ボタン、ムービークリップ、XMLなどがあります。0リファレンスガイド』の該当する項目を参照してください。プリミティブデータ型を含む変数の動作は、状況によっては、複合型を含む変数の動作と異なることがあります。
「変数について」
0の学習/データおよびデータ型/変数について)
0の学習/データおよびデータ型/変数について/プロジェクトでの変数の使用)
Flashアプリケーションで使用できる基本的なデータ型については、「プリミティブデータ型および複合データ型について」を参照してください。
0の学習/データおよびデータ型/データ型について/プリミティブデータ型および複合データ型について)
0リファレンスガイド』を参照してください。変数は情報を保持するコンテナです。この変数は数値を保持します。前述のコードでは、:Numberを使用して、変数が保持する値のタイプを割り当てています。これはデータ型指定と呼ばれます。データ型指定について詳しくは、後述の「データ型の割り当て」を参照してください。スクリプト内の変数の値は、必要に応じて何回でも変更できます。SWFファイルの再生中に変数の値を変更すると、ユーザが行った操作に関する情報の記録と保存、SWFファイルの再生中に変わる値の記録または条件がtrueかfalseかの評価を行うことができます。Flashゲームでプレーヤーの得点が変わる際など、SWFファイルの再生中に変数を絶えず更新する必要があります。SWFファイルにユーザのインタラクションを作成し処理する場合、変数は欠かせません。変数にはさまざまなデータ型を保持できます。0の学習/データおよびデータ型/データ型について)を参照してください。変数が格納するデータ型は、スクリプトで変数値を割り当てるときに、その値の変わり方に影響します。各SWFファイルとオブジェクトインスタンス(ムービークリップなど)には変数のセットがあり、それぞれの変数には、他のSWFファイルやムービークリップ内の変数と独立した値が設定されています。変数の値を表示するには、trace()ステートメントを使用して値を出力パネルに送信します。テスト環境でSWFファイルをテスト時に、値が出力パネルに表示されます。変数の値は、テスト環境のデバッガでも確認し設定できます。
0の学習/データおよびデータ型/変数についてで利用できます)
変数の宣言について
値の割り当てについて
変数の命名について
アプリケーションでの変数の使用
変数とスコープについて
変数のロードについて
プロジェクトでの変数の使用
データ型の割り当て
変数の作成時に、変数のオブジェクト型を明示的に宣言できます。これは厳密な型指定と呼ばれます。項目を数値、ストリングまたは別のデータ型を保持するものとして明示的に定義しない場合、Flash Playerでは、割り当て時(実行時)に項目のデータ型を判別しようとします。
0の学習/データおよびデータ型/データ型についてで利用できます)
「データ型の割り当てと厳密な型指定について」とそのサブセクション「データ型の割り当て」
「型チェックについて」
シンタックスとステートメントについて
ActionScriptのシンタックスとステートメントの学習は、単語を組み合わせて文章を作成し、それらの文章をまとめて段落にする方法を学習するのと似ています。例えば、英語の場合、ピリオドで文章を終了します。ActionScript言語では、ムービークリップインスタンスまたはSWFファイルの再生ヘッドのループを停止するために、stop()アクションを入力できます。または、数千行のコードを記述して、インタラクティブなバンキングアプリケーションを動作させることもできます。「データの理解」セクションでは、ActionScript言語でのデータの使用方法およびシンタックスのフォーマット方法について学習しました。このセクションでは、シンタックスを使用したActionScriptでのステートメントの作成方法について説明します。ここでは、基本的な言語概念を説明する多くの短いコードやいくつかの例を取り上げます。以降のセクションでは、この章で学習する基本概念を組み合わせて発展させた、もっと長く入り組んだコード例を示します。0 のベストプラクティスとコーディング規則)を参照してください。
言語エレメントの確認
正しいActionScriptシンタックスを使用してステートメントを作成し、コードがFlash内で正しくコンパイルされ実行される必要があります。この場合、シンタックスでは、プログラミングに使用する言語の文法とスペリングを参照します。コンパイラは不正なシンタックスを理解できないため、テスト環境でドキュメントをテストすると、出力パネルにエラーや警告が表示されます。このため、シンタックスは、ActionScriptの正しい作成を支援する規則とガイドラインの集まりとなります。ステートメントとは、特定のアクションの実行など何らかの操作を実行するためにFLAファイルに与える命令です。例えば、条件式を使用すると、何らかの項目がtrueか、または存在するかを判別できます。その後条件がtrueかどうかに基づいて、関数や式などの指定したアクションを実行できます。ifステートメントは条件式で、条件を評価してコードで実行する次のアクションを決定します。式は、ステートメントとは異なり、値を表すActionScript記号を適正に組み合わせたものです。式には値があり、値とプロパティには型があります。式は、演算子とオペランド、値、関数およびプロシージャで構成できます。例えば、次のコードは式です。前述の式のxと2はオペランドであり、+は演算子です。0の学習/シンタックスと言語の基礎/演算子についてのセクションを参照してください。0の学習/データおよびデータ型/データ型についてのセクションを参照してください。例えば、インデントやコメントを含まないFLAファイルまたは一貫性のないフォーマット規則や命名規則を含むFLAファイルのロジックは、読みにくくなります。ActionScriptのブロック(ループやifステートメントなど)にインデントを設定すると、問題が発生した場合に、コードが読みやすくデバッグしやすくなります。0 のベストプラクティスとコーディング規則/ActionScriptシンタックスのフォーマットのセクションを参照してください。
ActionScriptでは、ステージ上のオブジェクトやインスタンスに属するプロパティやメソッドにアクセスするために、ドット()演算子(ドットシンタックス)を使用します。ドット演算子を使用すると、インスタンス(ムービークリップなど)、変数、関数またはオブジェクトへのターゲットパスを特定することもできます。ドットシンタックス式は、オブジェクト名またはムービークリップ名で始まり、次にドットが続き、指定するエレメントで終了します。次のセクションでは、ドットシンタックス式の記述方法について説明します。ムービークリップ、ロードしたムービーまたはボタンを制御するには、ターゲットパスを指定する必要があります。ターゲットパスとは、SWFファイル内のムービークリップインスタンス名、変数およびオブジェクトの階層アドレスです。ムービークリップまたはボタンのターゲットパスを指定するには、ムービークリップやボタンにインスタンス名を割り当てる必要があります。ムービークリップインスタンスに名前を付けるには、インスタンスを選択し、プロパティインスペクタでインスタンス名を入力します。ActionScriptを使用してインスタンスを作成した場合は、コードでインスタンス名を指定することもできます。ターゲットパスを使用すると、アクションをムービークリップに割り当てたり、変数やプロパティの値を取得または設定することができます。
インスタンス名の割り当て方法とドットシンタックスによるインスタンスのターゲット指定方法について詳しくは、Flash LiveDocsの「ドットシンタックスを使用したインスタンスのターゲット化について」(ActionScript 2
0の学習/シンタックスと言語の基礎/ドットシンタックスとターゲットパスについて/スコープとターゲット化について)のセクションを参照してください。つまり、大文字の使用方法が少し異なる変数は、お互いに別の変数と見なされます。Flashには複数の区切子があります。0の学習/シンタックスと言語の基礎/言語区切子について )を参照してください。定数とは、変更不可の固定値を持つプロパティであり、アプリケーションを通じて変わらない値です。Flashには、アプリケーション開発の単純化に役立つ定義済みの定数がいくつか用意されています。定数の例はKeyクラスにあります。PGDNなど多数のプロパティがあります。定数を使用すると、EnterキーとPage Downキーのキーコード値がそれぞれ13と34であることを覚えておく必要がなくなります。定数を使用すると、開発やデバッグが容易になるだけでなく、作成するコードが同僚の開発者にとって読みやすくなります。0の学習/シンタックスと言語の基礎/定数およびキーワードについて)のセクションを参照してください。ActionScriptのキーワードは、特定の種類のアクションを実行するために使用されます。これらは予約語でもあるため、識別子(変数、関数、ラベル名など)としては使用できません。0の学習/シンタックスと言語の基礎/定数およびキーワードについて/キーワードについて)のセクションを参照してください。配列とは、そのプロパティが構造内の位置を表す数値で特定されるオブジェクトです。配列は、基本的には項目のリストです。一部の言語と異なり、ActionScriptでは、配列内の各エレメントを同じデータ型にする必要はありません。数値、日付、ストリングおよびオブジェクトを混在させたり、各配列インデックスでネストされた配列を追加することもできます。0の学習/シンタックスと言語の基礎/配列について)のセクションを参照してください。演算子とは、式内の値の組み合わせ、比較または変更方法を指定する文字です。式とは、Flashで評価できる任意のステートメントで値を返します。式を作成するには、演算子と値を組み合わせるか、関数を呼び出します。0の学習/シンタックスと言語の基礎/シンタックス、ステートメント、および式について)のセクションを参照してください。例えば、数式は、数値演算子を使用して使用する値を操作します。式は演算子とオペランドから構成され、値を表すActionScript記号を適正に組み合わせたものです。オペランドとは、演算子がアクションを実行する対象となるコードの一部です。例えば、x + 2という式では、xと2がオペランドで、+が演算子となります。0の学習/シンタックスと言語の基礎/演算子について)のセクションを参照してください。シンタックスとステートメントについては、Flash LiveDocsの次のセクションを参照してください。
ステートメントについて
0の学習/シンタックスと言語の基礎/ステートメントについて)
ドットシンタックスとターゲットパスについて
0の学習/シンタックスと言語の基礎/ドットシンタックスとターゲットパスについて)
イベントの処理
イベントとは、SWFファイルの再生中に発生するアクションです。マウスクリックやキープレスなどのイベントは、ユーザイベントと呼ばれます。直接的なユーザインタラクションの結果として発生するためです。ステージ上のムービークリップの最初の外観など、Flash Playerで自動的に生成されるイベントは、システムイベントと呼ばれます。ユーザによって直接生成されないためです。アプリケーションがイベントに対応するには、イベントハンドラ、つまり特定のオブジェクトとイベントに関連付けられたActionScriptコードを使用する必要があります。例えば、ユーザがステージ上のボタンをクリックしたときに、再生ヘッドを次のフレームに進めることもできます。または、ネットワーク経由でXMLファイルのロードが完了したときに、そのファイルの内容をテキストフィールドに表示することもできます。ActionScriptでのイベントの処理方法は、イベントのタイプに応じて変えることができます。次の方法すべてが、すべてのイベントタイプに適用されるわけではありません。
イベントハンドラのメソッドの使用
イベントリスナーの使用
ボタンとムービークリップのイベントハンドラの使用(特にonハンドラとonClipEventハンドラ)
コンポーネントインスタンスからのイベントのブロードキャスト
ボタンとムービークリップのイベントハンドラを使用することは、コードをオブジェクトに関連付ける必要があるため、お勧めできません。代わりに、ベストプラクティスとして、可能な限りイベントハンドラのメソッドを使用して、コードをタイムライン上のフレームスクリプトまたはクラスファイルに配置します。onPressハンドラなどのイベントハンドラメソッドを使用して動的ハンドラを作成してから、loadMovie()を呼び出す場合、新しい内容のロード後にイベントハンドラが使用できなくなります。ただし、onClipEventハンドラまたはonハンドラを使用してイベントハンドラをムービークリップに関連付けてから、ムービークリップ上でloadMovie()を呼び出す場合、新しい内容のロード後でもイベントハンドラは使用できます。
イベントハンドラのメソッド
イベントハンドラのメソッドは、該当するクラスのインスタンス上でイベントが発生したときに起動される、クラスのメソッドです。例えば、MovieClipクラスは、ムービークリップオブジェクト上でマウスが押されたときに常に起動される、onPressイベントハンドラを定義します。ただし、クラスの他のメソッドとは異なり、イベントハンドラを直接起動することはしません。イベントハンドラを定義するクラスの例としては、次のActionScriptクラスがあります。0リファレンスガイド』の各クラスのエントリを参照してください。各イベントハンドラのタイトルには、handlerという語を追加することに注意してください。デフォルトでは、イベントハンドラは未定義です。特定のイベントが発生した場合、対応するイベントハンドラが起動されますが、アプリケーションはそれ以上イベントに応答しません。アプリケーションがイベントに応答するようにするには、関数ステートメントで関数を定義してから、その関数を該当するイベントハンドラに割り当てます。そうすると、イベントの発生時に常にイベントハンドラに割り当てた関数が自動的に起動されます。イベントハンドラは、イベントがオブジェクトのイベントハンドラメソッド名を適用するオブジェクト、イベントハンドラに割り当てる関数、およびコードの3つの部分で構成されています。次の例は、イベントハンドラの基本的な構造を示しています。
// イベントに応答するコードをここに記述
例えば、ステージ上にnext_btnという名前のボタンがあるとします。次のコードは、関数をボタンのonPressイベントハンドラに割り当てています。この関数は、再生ヘッドを現在のタイムラインの次のフレームに進めます。関数参照の割り当て、イベントハンドラに渡されるパラメータの受け取り、関数のイベントハンドラへの割り当ておよびメソッドのオーバーライドを行うことができます。
0の学習/イベントの処理/イベントハンドラメソッドの使用)
イベントリスナーを使用すると、リスナーオブジェクトと呼ばれるオブジェクトが、ブロードキャストオブジェクトと呼ばれる別のオブジェクトによってブロードキャストされるイベントを受け取ることができます。ブロードキャストオブジェクトは、ブロードキャストにより生成されるイベントを受け取るリスナーオブジェクトを登録します。例えば、ステージからonResize通知を受け取るムービークリップオブジェクトを登録するか、ボタンインスタンスでテキストフィールドオブジェクトからonChanged通知を受け取ることもできます。1つのブロードキャストからイベントを受け取る複数のリスナーオブジェクトを登録したり、複数のブロードキャスターからイベントを受け取る1つのリスナーオブジェクトを登録したりできます。イベントのリスナー/ブロードキャスターモデルでは、イベントハンドラのメソッドとは異なり、複数のコードで競合なしに同じイベントをリッスンできます。onLoad()などのリスナー/ブロードキャスターモデルを使用しないイベントモデルでは、各種のコードが同じイベントをリッスンしている場合、問題を起こす可能性があります。onLoadコールバック関数参照の制御で競合します。リスナー/ブロードキャスターモデルを使用すると、コードのボトルネックを心配せずにリスナーを同じイベントに簡単に追加できます。0リファレンスガイド』の各クラスのエントリを参照してください。イベントリスナーのイベントモデルは、次の2つの大きな違いを除き、イベントハンドラ(「イベントハンドラのメソッドの使用」を参照)のモデルと似ています。イベントハンドラは、イベントをブロードキャストするオブジェクトでなく、リスナーオブジェクトに割り当てます。このメソッドは、イベントを受け取るリスナーオブジェクトを登録します。次のコードは、イベントリスナーモデルの概要を示しています。
// コードをここに記述
リスナーオブジェクトとしては、ステージ上の既存のオブジェクト、ムービークリップ、ボタンインスタンスなど任意のオブジェクトまたは任意のActionScriptクラスのインスタンスを指定できます。例えば、カスタムムービークリップで、ステージリスナーのリスナーメソッドを実装することもできます。複数のタイプのリスナーをリッスンする1つのオブジェクトを持つこともできます。1つのイベントブロードキャストに複数のリスナーを登録できます。関数は、イベントに何らかの方法で応答するイベントリスナーに割り当てます。イベント受け取るリスナーオブジェクトの登録を解除するには、ブロードキャストオブジェクトのremoveEventListener()メソッドを呼び出し、削除するイベント名とリスナーオブジェクトを渡します。0の学習/イベントの処理/イベントリスナーの使用)のセクションを参照してください。0の学習』の「イベントの処理」セクション内を参照してください。
「コンポーネントでのイベントリスナーの使用」
「コンポーネントインスタンスからのイベントのブロードキャスト」
「ボタン状態を持つムービークリップの作成」
「イベントハンドラのスコープ」
0は完全なオブジェクト指向プログラミング(OOP)言語で、特に大規模なFlashアプリケーションやプレゼンテーションの作成時にいくつかの利点があります。OOPでは再利用を促進できます。0で作成したクラスを再利用するには、そのクラスの機能を他のクラスで継承します。OOPのモジュール性によって、アプリケーションの構造を変更せずに、アプリケーションのコンポーネントを置き換えまたはスワップできます。最後に、OOP設計の基本的なメタファーによって、自然界(内部状態を持ち特定の事項を実行できるオブジェクト)が綿密にミラーリングされるため、アプリケーションの設計プロセスが速く簡単になります。クラスは、一連のオブジェクトを区別するすべてのプロパティ、オブジェクトのカテゴリを定義します。クラスは、オブジェクトのプロパティ(データ)とメソッド(ビヘイビア)を記述します。建築用の設計図がビルの特性を記述しているのとよく似ています。Dateクラスを使用すると、多くのインスタンスを作成できます。各インスタンス、つまりDateオブジェクトは、異なる(または同じ)日付を表すことができます。各オブジェクトは、Dateクラスから同じ機能を継承します。ただし、各インスタンスは、同じ設計図で建てられた2つのビルがそれぞれ固有のインスタンスであるように、独立したオブジェクトです。
クラスはデータ型を定義します(「データの理解」セクションを参照)
アプリケーションに既存のデータ型と相容れないデータの新しい論理的分類がある場合は、新しいクラスを記述できます。例えば、Tシャツを陳列するアプリケーションを作成する場合、色やスタイルなどそのデータ型の特性を定義するTShirtクラスを記述できます。クラスを定義するには、外部スクリプトファイルでclassキーワードを使用します。このプログラミング言語を使用すると、再利用可能で拡大/縮小でき、信頼性の高い保守可能なプログラム構造を構築できます。ユーザに完全なコーティング支援とデバッグ情報を提供することで、開発時間を短縮することもできます。0を使用すると、オブジェクトを作成して継承を確立し、カスタムクラスを作成してFlashでトップレベルクラスとビルトインクラスを拡張できます。これらのクラスには、中核のデータ型(Array、Boolean、Dateなど)からカスタムエラーやイベントまでのすべてと共に、外部コンテンツ(XML、イメージ、変数など)をロードするいくつかの方法が用意されています。独自のカスタムクラスを記述してそれらをFlashドキュメントに統合するか、トップレベルクラスを拡張して独自の機能を追加したり、既存の機能を変更したりできます。0の学習/クラス/アプリケーションでのカスタムクラスの使用について/クラスメンバーについてのセクションのチュートリアルを参照してください。このチュートリアルは、人物のnameとageのカスタムプロパティを含む、カスタムPersonクラスの作成方法を説明しています。その後、このカスタムクラスをドキュメントの新しいデータ型として扱って、new演算子を使用してクラスの新しいインスタンスを作成できます。カスタムクラスを外部ActionScript(AS)ファイルに記述し、FLAファイルのコンパイル時にアプリケーションに読み込むことができます。クラスは、大規模なFlashアプリケーションの作成時に非常に役に立ちます。アプリケーションにある多数の複雑な部分を外部クラスファイルに整理できるためです。たくさんのロジックをカスタムクラスに移動すると、コードの再利用を容易にできるだけでなく、一部のメソッドやプロパティをActionScriptコードの他の部分から「隠す」こともできます。これにより、チームの他の開発者が機密情報にアクセスしたり、変更不可のデータを変更したりするのを防止できます。クラスを使用する場合、既存のクラスを拡張して、新しい機能を追加したり既存の機能を変更したりできます。例えば、3つの非常によく似たクラスを作成する場合、まずベースクラス(抽象)を記述し、その後ベースクラスを拡張した3つのクラス(実装)を記述します。これら3つのサブクラスはメソッドやプロパティを追加できるため、同じコードとロジックをすべて複製した3つのクラスファイルを作成する必要はありません。クラスを使用するもう1つの利点は、コードの再利用性です。例えば、Drawing APIを使用してカスタムのプログレスバーを作成するカスタムクラスを作成する場合、プログレスバークラスをクラスパスに保存し、カスタムクラスを読み込むことですべてのFlashドキュメントで同じコードを再利用できます。クラスパスの設定について詳しくは、「クラスファイルの読み込みについて」および「クラスパスの設定と修正について」を参照してください。0の学習/クラス/オブジェクト指向プログラミングと Flash について/オブジェクト指向プログラミングの基礎)のセクションを参照してください。0の学習」の「クラス」の次のトピックを参照してください。
「カスタムクラスファイルの記述」
「アプリケーションでのカスタムクラスの使用について」
「アプリケーションでのカスタムクラスの使用について」/「クラスファイルの読み込みについて」
「例:カスタムクラスの記述」
「クラスのコンパイルと書き出し」
次のステップ
次の書籍とリソースは、ActionScriptの高度なトピックやオブジェクト指向プログラミングについて学習する際に役立ちます。
デベロッパーセンターの記事:
書籍の抜粋:
推奨される書籍:
著者について
IMDは、ユーザがMacromedia製品の使用方法を習得するために役立つオンラインヘルプシステム、マニュアル、チュートリアル、および例を著しています。
お問い合わせ
不正コピー防止について
著作権と商標について*
当Webサイトをご利用のお客様は、利用規約およびプライバシーポリシー(2009年7月14日更新)にご同意いただいたものとみなされます。
0基本アクションコンポーネントの使い方
XML を利用したインタラクティブな円グラフの作成 | デベロッパーセンター
記事のアーカイブ*
ユーザグループの検索*
ユーザグループについて*
ムービークリップを用意する。xml データの読み込み処理を作成する。読み込んだデータを計算し、内容を画面に表示する処理を作成する。円グラフの表示処理を作成する。