Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
Pixateワークショップ
― アプリケーションの概要とPixateの使い方 初級編 ―
2015.10.10 @POLYLOGUE
Chiharu Kodama

(chocolu.net / @chiiiiiharu )

Designer
東京工業大学工学部卒。在学中よりデザイン事務所やWeb制作会社など
でデザイナー/コーダーとしての経験を積み、卒業後は深津貴之氏率い...
■ Pixateって?
レイヤー(オブジェクト)に対して、
インタラクションがあった場合に、
何かしらのアニメーションをつける
Pixateでできること
引用元:I Love Food https://vimeo.com/109032012
引用元:http://www.pixate.com/img/demos/video-yahoo-news-digest.mp4
■ サンプルのご紹介
by Yuka Namba
土に埋まっているニンジンを引っこ抜いて
収穫するゲームアプリのプロトタイプ
by Chiharu Kodama
一覧画面内の写真をタップして詳細画面に遷移し、
引っ張って閉じるインタラクションの...
■ Pixateを始めよう!
みなさん、ご自身のパソコンでPixateを起動しながらお聞きください
簡単にPixateの使い方をご紹介
レイヤーの操作
インタラクションと
アニメーションの追加
レイヤーのプロパティ操作
(位置やサイズ、背景画像の指定など)
アニメーションの操作
スクリーン上でのオブジェクトの操作
■ Pixateを始めよう!
1. 画面の構成
プレビューモードについて
クリッピングOFF クリッピングON
クリッピングするか
どうか指定ができる
作業画面上でのプレビューモードの切替
(クリッピングのON/OFF)
レイヤーの複製
レイヤーの削除
レイヤーの追加
レイヤーの表示/非表示...
ドラッグ&ドロップでレイヤー(オブジェクト)に対して指定
3. インタラクション・アニメーション
LAYERS
INTERACTIONS
ANIMATIONS
PROPERTIES
ANIMATIONS
■ Pixateを始めよう!
どのレイヤーのどのインタラクションに紐付けるか選択
アニメーション効果のプレビューでのON/OFF
このあたりにカーソルを持って行くと、
ゴミ箱マークが表示され、削除できる
4. アニメーションの詳細設定①
LAYERS
INTERACTION...
Animates:の指定
• Continuously to final value: 

最終値まで継続的に変化
• Continuously with rate: 

インタラクションの変化値に対して倍率を指定して変化
• With dur...
指定したレイヤーに対して、
• 位置(x, y / right, bottom)
• 中心位置(cx, cy)
• スケール(scale, scaleX, scaleY)
• 透明度(opacity)
• 回転(rotation, rotati...
Thank you !!
2015.10.10 @POLYLOGUE
Prochain SlideShare
Chargement dans…5
×

Pixateワークショップ―アプリケーションの概要とpixateの使い方 初級編―.pdf

2 160 vues

Publié le

Pixate勉強会で使用した資料です。

Publié dans : Logiciels
  • Identifiez-vous pour voir les commentaires

Pixateワークショップ―アプリケーションの概要とpixateの使い方 初級編―.pdf

  1. 1. Pixateワークショップ ― アプリケーションの概要とPixateの使い方 初級編 ― 2015.10.10 @POLYLOGUE
  2. 2. Chiharu Kodama
 (chocolu.net / @chiiiiiharu )
 Designer 東京工業大学工学部卒。在学中よりデザイン事務所やWeb制作会社など でデザイナー/コーダーとしての経験を積み、卒業後は深津貴之氏率い るArt&Mobileへ入社。Webサイトの制作やモバイルアプリのUIデザイン に携わる。今年8月より独立し、プログラミングとデザインの両側面を活 かせる、UI設計、デザイン、フロントエンドの実装などを中心に活動 中。 2015.10.10 @POLYLOGUE
  3. 3. ■ Pixateって? レイヤー(オブジェクト)に対して、 インタラクションがあった場合に、 何かしらのアニメーションをつける Pixateでできること
  4. 4. 引用元:I Love Food https://vimeo.com/109032012
  5. 5. 引用元:http://www.pixate.com/img/demos/video-yahoo-news-digest.mp4
  6. 6. ■ サンプルのご紹介 by Yuka Namba 土に埋まっているニンジンを引っこ抜いて 収穫するゲームアプリのプロトタイプ by Chiharu Kodama 一覧画面内の写真をタップして詳細画面に遷移し、 引っ張って閉じるインタラクションのプロトタイプ
  7. 7. ■ Pixateを始めよう! みなさん、ご自身のパソコンでPixateを起動しながらお聞きください 簡単にPixateの使い方をご紹介
  8. 8. レイヤーの操作 インタラクションと アニメーションの追加 レイヤーのプロパティ操作 (位置やサイズ、背景画像の指定など) アニメーションの操作 スクリーン上でのオブジェクトの操作 ■ Pixateを始めよう! 1. 画面の構成
  9. 9. プレビューモードについて クリッピングOFF クリッピングON クリッピングするか どうか指定ができる 作業画面上でのプレビューモードの切替 (クリッピングのON/OFF) レイヤーの複製 レイヤーの削除 レイヤーの追加 レイヤーの表示/非表示 2. レイヤー操作 LAYERS INTERACTIONS ANIMATIONS PROPERTIES ANIMATIONS ■ Pixateを始めよう!
  10. 10. ドラッグ&ドロップでレイヤー(オブジェクト)に対して指定 3. インタラクション・アニメーション LAYERS INTERACTIONS ANIMATIONS PROPERTIES ANIMATIONS ■ Pixateを始めよう!
  11. 11. どのレイヤーのどのインタラクションに紐付けるか選択 アニメーション効果のプレビューでのON/OFF このあたりにカーソルを持って行くと、 ゴミ箱マークが表示され、削除できる 4. アニメーションの詳細設定① LAYERS INTERACTIONS ANIMATIONS PROPERTIES ANIMATIONS ■ Pixateを始めよう! アニメーションの紐付け レイヤーID 指定したレイヤーに対して紐付いているインタラクションに対して どう紐付けるか 例:指定したレイヤーにTapが紐付いていた時 例:指定したレイヤーにScrollが紐付いていた時 例:指定したレイヤーにRotationが紐付いていた時
  12. 12. Animates:の指定 • Continuously to final value: 
 最終値まで継続的に変化 • Continuously with rate: 
 インタラクションの変化値に対して倍率を指定して変化 • With duration to final value: 
 最終値までdurationを持って変化 0px 100px 50px 0.005x 0.5s 4. アニメーションの詳細設定② LAYERS INTERACTIONS ANIMATIONS PROPERTIES ANIMATIONS ■ Pixateを始めよう! インタラクションの変化に対してアニメーションをどう連携させるか (Based On:を選択後に候補が表示されます) 例:あるレイヤーに対してScrollというインタラクションを指定し、Scroll Positionと紐付けた場合
  13. 13. 指定したレイヤーに対して、 • 位置(x, y / right, bottom) • 中心位置(cx, cy) • スケール(scale, scaleX, scaleY) • 透明度(opacity) • 回転(rotation, rotationX, rotationY, rotationZ) • スクロール量(contentX, contentY) • スクロール速度(velocityX, velocityY) の数値を指定した条件式を設定することが可能。 ここをクリックすると、各パラメータの説明が表示される これを条件式に指定 (レイヤーの名前を変更すると自動的にIDも変更される) 5. アニメーションの条件設定 ex: layer01.cy > 300 && layer01.opacity < 0.4 レイヤーID レイヤーID Y軸スクロール量 透明度 LAYERS INTERACTIONS ANIMATIONS PROPERTIES ANIMATIONS ■ Pixateを始めよう! 「layer01がy軸に対して300px以上スクロールし、かつ、layer01の透明度が0.4よりも低い時」
  14. 14. Thank you !! 2015.10.10 @POLYLOGUE

×