RsStudio 湯口りさ

CSS Nite LP14 2011/03/05

Photoshopper meets Fireworks

フォーム系の 共有ライブラリの活用

フリーランスのWeb屋さん

屋号：RsStudio Site ：http://web.r-studio.jp/

Flashのお仕事をメインに Webの企画・デザインから制作まで幅広く！

Favorite Tools

・

自己紹介

なずきのおと (株式会社NTTデータ)

キャンペーン、公式Tweetへの反応などを Web上や社内の文章から、 継続的に分析するサービス

・

最近のプロジェクト

Fireworksで全画面をデザイン

Flash ＆ HTML・JSで実装

なずきのおと (株式会社NTTデータ)・

最近のプロジェクト

Flash ＆ HTML・JSで実装

を、当初ほぼ一人で…

なずきのおと (株式会社NTTデータ)・

最近のプロジェクト

Fireworksで全画面をデザイン

なずきのおと (株式会社NTTデータ)・

最近のプロジェクト

Fireworksで全画面をデザインFlash ＆ HTML・JSで実装

フォームのような定形部分に 手は掛けたくない・・・

共有ライブラリを使おう

共有ライブラリはパネルから・

共有ライブラリはCS3で パネルにまとめられたシンボル群 CS4からは ドキュメントライブラリ と 同じタブグループに入って表に。

・

システムプロパティパネルを�使う�or�使わない

共有ライブラリを使おう

共有ライブラリのプリセットは�大きく分けて2種類

１

２

３３

共有ライブラリを使うメリット

ライセンスを気にせずに使える

複数のプラットフォームのフォーム要素が 揃っている

フォーム要素の大きさを変えられる デザインを変えても動く

１

２

３３

共有ライブラリを使うメリット

３

プリインストールの素材は使い放題！

３

ライセンスを気にせずに使える

複数のプラットフォームのフォーム要素が 揃っている

フォーム要素の大きさを変えられる デザインを変えても動く

１

２

３３

共有ライブラリを使うメリット

他の環境での見え方も確認できる！

プリインストールの素材は使い放題！ライセンスを気にせずに使える

複数のプラットフォームのフォーム要素が 揃っている

フォーム要素の大きさを変えられる デザインを変えても動く

１

２

３３

共有ライブラリを使うメリット

プリインストールの素材は使い放題！

他の環境での見え方も確認できる！

スクリーンショットよりも使いやすい！

ライセンスを気にせずに使える

複数のプラットフォームのフォーム要素が 揃っている

フォーム要素の大きさを変えられる デザインを変えても動く

DEMO1 配置と変更

作業手順

DEMO1 配置と変更

１

２

３

フォーム要素を配置

拡大縮小ツールでサイズ変更

初期値をセット

DEMO1 配置と変更

参考例・

たくさんの�要素を並べると…

→グループ化で�　すこし改善

Fireworks自体が重くなる

FlashやFlexのフォーム要素を 知らなくてもデザインできる

・

FlashやFlexのデザインにも！

ComboBox

FlashやFlexのデザインにも！

Button

同じ形＆たくさんあるパーツを�フォームパーツで代用

・

DEMO２ デザインを変えよう

DEMO２ デザインを変えたい

「ボタン(win)」をベースに作成・

設定条件が似てる

DEMO２ デザインを変えたい

「ボタン(win)」をベースに作成・

・

DEMO２ デザインを変えたい

「ボタン(win)」をベースに作成

オブジェクト数が多くない

→ボタンシンボルの代用

まとめ

他のプラットフォームのデザインも�最初から使える

デザインを変えて様々な用途に使える

・

・

→入力系のHTML静的モック

→JavaScriptと組み合わせて 独自デザインのフォーム

Fin.