Progression 学習ノート

学生用に逆引きリファレンスを作ってみます。※少しずつ追記します。

→ 続きを読む

CSS Nite in FUKUI, Vol.3のミニセッションで、「これからWebデザインをはじめたい人向けの学習プラットフォームについて」と題し、短大での実践と地元のコミュニティについてお話させていただきました。

その中で、短大での授業で採用させていただいているProgressionについても紹介させていただきました。

（10月31日に参加させていただいたWCAN mini ActionScript Vol.13「名古屋でProgression！」では、本発表の一部（短大での実践部分）を拡充し「Webデザイン・ビギナー向けプラットフォームとしてのProgression」というタイトルで発表させていただきました。）

→ 続きを読む

YouTubeのアノテーション機能を使って、コンポーネントスタイルでのビデオチュートリアルを作ってみました。

ビデオチュートリアルの制作手順

• QuickTimeの画面収録機能で、画面操作を記録保存。 ※Snow Leopard (Mac OS 10.6)の 新機能
• QuickTime 7 Pro で編集
  • 余分な箇所をカット
  • 早送りで見せたいところは、該当部分を1秒1フレーム程度で連番画像に書き出し。連番画像を読み込み倍速動画を得る。
  • 音声は別途aifで書き出し、Audacityでピッチを調整
  • 編集が完了したら、QuickTime形式で書き出し。※YouTubeがHDに対応しているので、サイズ変更せずそのまま書き出す。今回のサイズは幅1280px・高さ800px
• YouTubeにアップロード
  • アノテーション機能を使って、ビデオ内にコメントを追加

できたもの

YouTube - Progression3 (component style) で3ページのシンプルなサイトを作る

→ 続きを読む

コンポーネントスタイルで作ってみた3ページのシンプルなサイトと同じ構成のものを、クラススタイルで作ってみました。

手探り状態のところもあるので、「こうした方がいいよ！」というアドバイスがありましたらぜひお願いいたします。 m(_ _)m

→ 完成サンプル

Progression公式サイトの「クラススタイルガイド」を参考にさせていただきました。

制作環境

• Flash CS3 ... UIの作成
• FlashDevelop + Progression 4 beta ... コーディング、コンパイル
  • 独学ActionScriptさんによる「FlashDevelop用 Progression 4.0.1 Public Beta 1.1 プロジェクトテンプレート」

↓FlashDevelop用 Progression 4 プロジェクトテンプレートの最新版はこちらからダウンロードできます
Downloads - flashdevelopjp - Project Hosting on Google Code

制作手順

1. 画面の設計、UIの作成
2. プロジェクトの新規作成、初期化
3. シーンの作成
4. イベントにコマンドを設定
5. ボタンの作成
6. UIの表示、ブラウザでの表示位置の調整

→ 続きを読む

ボタンにマウスポインタが重なったときに、ボタンの色が変化するアニメーションを追加します。

完成サンプル

手順

1. up点、over点、current点の設定
2. ボタンのデザイン

→ 続きを読む