impressjs design  操作方法スライド

8
impress.js design v1.1.4 操作マニュアル http://php5.xoop.jp/impress/ Demo: http://php5.xoop.jp/html/ Chrome or Safari

Upload: daisuke-yamazaki

Post on 31-May-2015

332 views

Category:

Design


4 download

DESCRIPTION

impress.js をGUI(マウス操作だけで)で、レイアウトや各ページのエフェクトなど作成できるツールの操作案内。

TRANSCRIPT

Page 1: Impressjs design  操作方法スライド

impress.js design v1.1.4

操作マニュアル

http://php5.xoop.jp/impress/

Demo: http://php5.xoop.jp/html/

Chrome or Safari

Page 2: Impressjs design  操作方法スライド
Page 3: Impressjs design  操作方法スライド

Slide[add]:スライド追加&設定

BackColor: 背景を付けるか選択RotateY: 縦軸を中心として回転RotateX: 横軸を中心として回転Rotate: 中心を軸に回転Perspective: 奥行感(Z軸のような)Scale: 縮尺比率を指定TextEdit: スライド文章作成画面へ

Page 4: Impressjs design  操作方法スライド

Slide[add]:スライド文章作成

1.テンプレート選択が可能※文章の変更だけで効率良く作成できます。HTMLの知識があれば、”ソース”から修正したほうがいいことがあります。

2.画像をDrag&Dropで挿入。Chromeだけ使えます

(DataSchemeURLに変換されます)Safariの場合はこちら(ソースで打つのもありです。)

3「保存」ボタンを必ず押してください。

Page 5: Impressjs design  操作方法スライド

Check[View]確認画面

Page 6: Impressjs design  操作方法スライド

Check[View]確認画面

Page 7: Impressjs design  操作方法スライド

Build[Code]コード生成 (impress.js のindex.htmlコードを生成:コードをそのまま貼り付けてもらえば動作します)

Page 8: Impressjs design  操作方法スライド

Reset[AllData] データ削除

ブラウザを閉じてもデータが消えない。