Progression 学習ノート
本サイトの更新について
- 2012年8月23日 14:04
- トピックス
本サイト「Progression学習ノート」の更新は終了しております。ご了承ください。
- Comments (Close): 0
- TrackBack (Close): 0
CSS Nite in FUKUI, Vol.3 ミニセッション「これからWebデザインをはじめたい人向けの学習プラットフォームについて」
- 2009年11月29日 17:30
- Progression3 | トピックス
CSS Nite in FUKUI, Vol.3のミニセッションで、「これからWebデザインをはじめたい人向けの学習プラットフォームについて」と題し、短大での実践と地元のコミュニティについてお話させていただきました。
その中で、短大での授業で採用させていただいているProgressionについても紹介させていただきました。
（10月31日に参加させていただいたWCAN mini ActionScript Vol.13「名古屋でProgression！」では、本発表の一部（短大での実践部分）を拡充し「Webデザイン・ビギナー向けプラットフォームとしてのProgression」というタイトルで発表させていただきました。）
- Comments (Close): 0
- TrackBack (Close): 0
ビデオチュートリアル：3ページのシンプルなサイトを作る
- 2009年11月29日 09:55
- Progression3 | コンポーネントスタイルでの制作
YouTubeのアノテーション機能を使って、コンポーネントスタイルでのビデオチュートリアルを作ってみました。
ビデオチュートリアルの制作手順
- QuickTimeの画面収録機能で、画面操作を記録保存。 ※Snow Leopard (Mac OS 10.6)の 新機能
- QuickTime 7 Pro で編集
- 余分な箇所をカット
- 早送りで見せたいところは、該当部分を1秒1フレーム程度で連番画像に書き出し。連番画像を読み込み倍速動画を得る。
- 音声は別途aifで書き出し、Audacityでピッチを調整
- 編集が完了したら、QuickTime形式で書き出し。※YouTubeがHDに対応しているので、サイズ変更せずそのまま書き出す。今回のサイズは幅1280px・高さ800px
- YouTubeにアップロード
- アノテーション機能を使って、ビデオ内にコメントを追加
できたもの
- Comments (Close): 0
- TrackBack (Close): 0
シンプルなウェブサイトを作る その1 - ページを切り替える
- 2009年11月16日 22:02
- FlashDevelopではじめるProgression | Progression4 | クラススタイルでの制作
コンポーネントスタイルで作ってみた3ページのシンプルなサイトと同じ構成のものを、クラススタイルで作ってみました。
手探り状態のところもあるので、「こうした方がいいよ！」というアドバイスがありましたらぜひお願いいたします。 m(_ _)m
→ 完成サンプル
Progression公式サイトの「クラススタイルガイド」を参考にさせていただきました。
制作環境
- Flash CS3 ... UIの作成
- FlashDevelop + Progression 4 beta ... コーディング、コンパイル
↓FlashDevelop用 Progression 4 プロジェクトテンプレートの最新版はこちらからダウンロードできます
Downloads -
flashdevelopjp - Project Hosting on Google Code
制作手順
- 画面の設計、UIの作成
- プロジェクトの新規作成、初期化
- シーンの作成
- イベントにコマンドを設定
- ボタンの作成
- UIの表示、ブラウザでの表示位置の調整
- Comments (Close): 1
- TrackBack (Close): 0
ボタンにマウスオーバーを設定する
- 2009年11月11日 11:35
- Progression3 | みんなのプログレッション - コンポーネントスタイル
ボタンにマウスポインタが重なったときに、ボタンの色が変化するアニメーションを追加します。
手順
- up点、over点、current点の設定
- ボタンのデザイン
- Comments (Close): 0
- TrackBack (Close): 0
シーンに合わせてボタンの表示を変える
- 2009年10月14日 13:28
- Progression3 | みんなのプログレッション - コンポーネントスタイル
現在表示されているシーンが分かりやすいように、ボタンに濃淡をつけて区別します。
現在のシーンに対応するボタンは濃く、そうでないときのボタンは薄く設定します。
手順
- フレームを挿入する
- currentの設定
- ボタンのデザイン
- Comments (Close): 0
- TrackBack (Close): 0
フレームアニメーションを追加する
- 2009年9月30日 16:35
- Progression3 | みんなのプログレッション - コンポーネントスタイル
シンプルなウェブサイトにフレームアニメーションを追加してみます。
「トップページを表示したとき」「他のページへ移動するとき」のアニメーションを設定します。
手順
- コンポーネント「InOutMovie (IOボタン)」を配置
- フレームの挿入
- in点、stop点、out点の設定
- Comments (Close): 0
- TrackBack (Close): 0
HelloWorldを表示する2
- 2009年9月25日 00:01
- FlashDevelopではじめるProgression | Progression4 | クラススタイルでの制作
Flash CS3で作成したシンボルをキャスティングしてみる。Flashのブラシツールで「HelloWorld」と描いたものをキャスティングする。
- Comments (Close): 0
- TrackBack (Close): 0
HelloWorldを表示する1
- 2009年9月23日 20:10
- FlashDevelopではじめるProgression | Progression4 | クラススタイルでの制作
クラススタイルの学習を Progression 4 ではじめてみる。執筆時のバージョンは4.0.1 Public Beta 1.1。
Progression - Framework for Flash >>> クラススタイルガイド を参考に「HelloWorld」を表示してみる。
※コンポーネントスタイルでの制作経験有を前提知識とする。
- Comments (Close): 0
- TrackBack (Close): 0
![Web Designing (ウェブデザイニング) 2009年 08月号 [雑誌]](http://ecx.images-amazon.com/images/I/512rkaSlQDL._SL160_.jpg)
](http://ecx.images-amazon.com/images/I/41cN9vfNSZL._SL160_.jpg)
![Flash Math & Physics Design:ActionScript 3.0による数学・物理学表現[入門編]](http://ecx.images-amazon.com/images/I/51vM6bM1sbL._SL160_.jpg)
