このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。

Archives Details

Flashフレームワーク オーサリングツール Progression Vol.2

Flash

2011.11.05

この記事は最終更新日から1年以上が経過しています。

前回のFlash フレームワーク、オーサリングツール Progressionの続きとなります。

ではコンテンツの制作を行っていきます。

写真を表示させるスライドショーを作成していきましょう。

前回の復習もかねて、作成までのステップ

1.メニューバーのウィンドウ>[他のパネル]>[Progressionプロジェクト]を選択しProgressionパネルを立ち上げましょう。

2.プロジェクト>新規プロジェクトを作成 or 新規作成 を押しプロジェクトの設定等を行いましょう。

今回は 横幅600px 縦35opxに設定します。種類:コンポーネント(Easyasting)を選択。

3.メニューバーのウィンドウ>[他のパネル]>[Progressionシーンエディタ]を選択しシーンエディタウィンドウを出します。

4.シーンにキャストを挿入していきます。

5.ツール>シンボルに書き出すを押し、Flashのライブラリに反映させる。

6.シンボルを編集し、 コンポーネントを追加していきコンテンツを作成する。

と大まかな流れになります。

では、3番目までは問題ないかと思うので、4番目から進めていきます。

4.シーンにキャストを挿入していきます。

まず構造としては、index>photo01〜photo04を入れていきたいので、

indexの中にシーンphoto01〜photo04をそれぞれリネームし作成します。

それぞれにシーンに写真を表示させるためのキャストを追加していきます。

さらに全ページに表示させるためのナビゲーションnavをindexに作成。

そのnavをコピーしphoto01〜photo04の中にペーストしていきます。

同名であることが注意点です。

5.ツール>シンボルに書き出すを押し、Flashのライブラリに反映させる。

それでは、Flashのライブラリに反映させます。

前回、説明させていただいたとおり、ツール>シンボルに書き出すを押すとFlashのライブラリに反映させます。

6.シンボルを編集し、 コンポーネントを追加していきコンテンツを作成する。

それでは、書き出されたシンボルにコンテンツを入れていきましょう。

indexには、タイトル表示をさせたいと思います。

indexシンボルを選択し、タイトルを記述。

つづいてナビゲーションのボタンをnavシンボルに作成していきます。

navシンボルを選択し、ボタンを配置していきます。


ボタンのデザイン等は任意で作成して下さい。

ではこのボタンにコンポーネントを追加していきます。

コンポーネントとはProgressionが用意しているアニメーションを実行出来るパーツになります。

メニュー > ウィンドウ>コンポーネントで開く事が出来ます。

ここではボタンにRollOverButtonを追加します。

コンポーネントパネルからRollOverButtonを選択し、

ドラッグ&ドロップでステージに配置します。

配置し、メニュー > ウィンドウ>コンポーネントインスペクタを選択しコンポーネントインスペクタパネルを開きます。

対象のボタンのパスを

scenePathに記述していきます。

このときのscenePathに記述するパスはシーンエディタで作成した構造となり、

/index から始まります。

photo02の場合だと、/index/photo02 となります。

また、最後に/を付けないように注意です。

パスの記述が完了したら対象のボタンとコンポーネントを選択し、

ムービークリップのシンボルに変換します。

それぞれのボタンに設定を行います。

これでボタンによるページの切り替えは可能となっています。

あとは、それぞれのページに写真を配置していきます。

それぞれのページのシンボルをダブルクリックし、ステージに写真を配置。

するとボタンで切り替わるスライドショーの完成です!

しかし、これだけだと、切り替わりが味気ないのでアニメーションを付けましょう。

コンポーネントパネルのProgression Effectsから選ぶ事ができます。

適応させたいページ(シンボル)にグラッグ&ドロップで配置し

アニメーション効果をつけることができます。

色々なコンポーネントを配置しパブリッシュをして確認しましょう。

またこれらのファイルは プロジェクト名>bin-debug フォルダ内に作成され、

index.htmlを開く事で確認出来ますが、

開発用ファイルとなるので、公開を行う場合は

メニュー>ウィンドウ>その他のパネル>Progression プロジェクト

を選択し、リリースビルドを書き出すボタンを押す事によって

プロジェクトフォルダ内に「bin-release」というフォルダが作成されますので

この「bin-release」内のファイルをすべてサーバーにUPしましょう。

これが公開用データとなります。

デモ
デモページはこちら

Comment

Related Article

フルFlashサイト FireFoxで表示しない場合

2012.02.06

Flashフレームワーク オーサリングツール Progression

2011.11.05

Flashフレームワーク オーサリングツール Progression Vol.2

2011.11.05

Flash swfプレイヤー Elmedia Player(mac)

2011.10.12

Flash 基礎 シンボル インスタンスの関係

2011.01.10

Flashを背景に

2010.11.27

CATEGORY LIST

LATEST NEWS

インターネットにて世論調査を行う「世論Web」サービスを始めてみました。

JavaScript

2020.01.31

まだ間に合う!!ラズベリーパイ購入なら「RSコンポーネンツ」で!最大40%オフの年に1度の大特価期末セール中!

RaspberryPi

2020.01.25

年末のレトロゲーム熱の際、ファミコンソフト一覧パッケージ作ってました。

JavaScript

2020.01.24

TSUKUMO の初売りでNAS (Synology DiskStation DS218j)購入!!

イベント

2020.01.04

Mac用 エミュレーター 「OpenEmu」が、V2.2リリース!GameCube対応して更に神アプリ進化!

Game

2020.01.01

この時期になると、やたらレトロゲームをやりたくなるのはなんですかね?ハードオフに向かうの巻その2

Game

2019.12.31

この時期になると、やたらレトロゲームをやりたくなるのはなんですかね?ハードオフに向かうの巻

Game

2019.12.14

MacでWindowsアプリ(TeraPad)を動かす(Wine 4.0.3)

mac

2019.12.08

kindleストア7周年記念セール中!技術書なども40%OFF以上でお買い得!(11/7まで)

イベント

2019.10.28

あと10日で「jsdo.it」のサービスが終わってしまう!! ソースダウンロードまだの方は急げぇ〜!

JavaScript

2019.10.21

Arduino IDEとArduino接続して、サクッと設定。

電子工作

2019.08.15

ついに、M5Stack Gray 購入!! その他諸々、購入したボードの振り返りなど。

電子工作

2019.08.12

RANKING

Follow

SPONSOR

現在、掲載募集中です。



Links

About Us

WEBデザイナーの、WEBデザイナーによる、WEBデザイナーの為のサイト。「みんなで書こう!」と仲間を募ってみたが、結局書くのは自分だけとなってしまいました。日々のメモを綴っていきます。

Entry Profile

Graphical FrontEnd Engineer
- Daisuke Takayama

MAD CITY 北九州市で生まれ育つ。20代はバンド活動に明け暮れ、ふと「webデザイナーになりたい。」と思い、デジタルハリウッド福岡校入学。卒業後、数々の賞を受賞、web業界をざわつかせる。
現在、主に、ゲーム制作中心に港区六本木界隈で活動中。

FOLLOW US