Flash画面遷移フレームワーク「Progression 4」公式ガイド 第7回 コンポーネントスタイル(1) Twitterリスト 2010年7月9日 青木健至 Flash, フレームワーク, Progression この記事を読むのに必要な時間:およそ 5 分 1 2 3 4 5 外部リンク Webページに不可欠な外部リンクボタンを設置していきましょう。「index.fla」のライブラリ内に「ProgressionButton」シンボルを作成してください。「ProgressionButton」を選択し,[assets]→[home]内の「progressionButton.gr」を貼り付けます。 図36 「ProgressionButton」の設定 次にタイムライン上に「component」レイヤーを挿入します。「component」レイヤーの1フレーム目に「コンポーネント」から「AnchorButton」コンポーネントを設置します。「AnchorButton」コンポーネントは外部リンクを実現するためのコンポーネントです。 図37 「AnchorButton」コンポーネントの設置 「AnchorButton」コンポーネントを選択したままコンポーネントインスペクタを開いてください。「href」と書かれているところがあります。ここに設定した値が遷移先になるのですが,ここには直接URLを記述することが可能です。今回はProgressionの公式サイトである「http://progression.jp/」を設定しておきましょう。 図38 「ProgressionButton」の設定 設定が完了したら,ボタンを設置しましょう。メインのタイムライン上の「stage」レイヤーの1フレーム目を選択し,ステージに設置します。座標は[x:10 , y:446]です。 設定が完了したら,ムービーを書き出して確認してみましょう。 図39 実行確認 「ProgressionButton」を押すと,指定したURLのwebページに遷移するのが確認できます。 まとめ 今回はここまでで終了です。「トップ」ページと「サイトについての説明」ページを作成しました。今回制作中に使用したコンポーネントは「RollOverButton」「InOutMovie」「AnchorButton」コンポーネントです。次回も基本的には同じようなコンポーネントを使用する予定です。 なお,今回のソースはここからダウンロードできます。 1 2 3 4 5 Flash, フレームワーク, Progression 著者プロフィール 青木健至(あおきたけし) 株式会社CLOQUE. 所属。Flash歴半年。Progression歴半年。Progression無しでのFlash制作は不可。2009年にFlashの技術を会得するために上京し,Progressionプロダクトマネージャーの阿部氏に師事。日々精進中。 Twitter:http://twitter.com/ichikaku1 URL:株式会社CLOQUE バックナンバー Flash画面遷移フレームワーク「Progression 4」公式ガイド 第8回 コンポーネントスタイル(2) 第7回 コンポーネントスタイル(1) 第6回 タイムラインスタイル(2) 第5回 タイムラインスタイル(1) 第4回 Flex SDK環境における,Progressionを使ったWebサイト構築 第3回 フルパフォーマンス!クラススタイル(2) 第2回 フルパフォーマンス!クラススタイル(1) 第1回 はじめよう!Progression 関連記事 Androidアプリ3分クッキング with Flash 2011年3月第2週号 1位は,iPadの登場で変わったWebデザインのトレンド,気になるネタは,アドビ,FlashをHTML5に変換するツール「Wallaby」発表 ロクナナワークショップ「池田泰延のAIR for Android アプリ開発実践講座」新講座開講 2011年1月第1週号 1位は,CSS3メディアクエリによる可変レイアウトのサンプル集,気になるネタは,日本通信とイー・モバイルからSIMロックフリーAndroid「IDEOS」登場 CLOQUE.,Flashで制作されたファイルをHTML5形式に変換する「FL2HTML5(仮)」の技術開発に成功