FreeHand から HTMLパブリッシュ <ドラッグ対応!> [FreeHandで行こう!]
【 FreeHandで行こう!】その57 <番外編:FreeHand からHTMLパブリッシュ:ドラッグ対応!>
*ドラッグは、枠内(画像内)で行ってください。マウスが枠外に出たときは、戻って画像をクリックします。
*表示されていない場合は別ウインドウでお試しください。
このシリーズでは、FreeHand の優位性を紹介しています。
FreeHand の情報を求めている方や、Illustrator ユーザーの方にも、お役に立てれば幸いです。
現在、 番外編としてざっくばらんに話を進めています。
初めてお越しの方は、FreeHand をご理解頂くために 総集編か カテゴリーTOP もご覧頂ければ幸いです。
→ FreeHand _総集編はこちら → FreeHand _カテゴリーTOPはこちら
***
前回は、FreeHand の HTMLパブリッシュ機能を利用して、iPad で表示出来、しかも iPad らしい操作が可能なコンテンツということで試作しました。
iPadらしい操作という点では、拡大縮小・スクロール機能を駆使して大きなコンテンツを縦横無尽に見渡せるということを意図し、同時に 等間隔スクロール機能を持たせたため、パソコン上ではクリック操作で順送り出来るなど、両対応を強く意識して設計しました。
今回のものは、パソコン上でのクリック操作だけでなく iPad 風に、マウスドラッグ操作にも対応したため、より感覚的に操作出来るようになりました。
同様のものは Flash コンテンツでは早くから実現させていましたが、今回は HTMLでも対応可能となりました。
別ウインドウ、または iPad でご覧頂く場合はこちらから。
HTMLですから検索エンジンとの相性も良く、ページ繰りも素早く行えるため、電子マニュアルや技術解説用途などに最適です。 ←宣伝です(^^)
しかも、FreeHand のデザインデータをパブリッシュし、Javascript を追加するだけで制作出来るところがミソなのですね。FreeHand の活用用途が、ますます広がります。
追記:20120307
前回、制作方法について、画像の設定は PNG 形式をお勧めしました。 画質が良く、背景透明に対応出来るからですが、今回のように背景透明の必要がない場合は JPEG にした方が容量を軽く押さえることが出来ます。
当初 PNG形式としていましたが、現在は JPEG形式に変更しています。画像容量がかなり軽くなりました。
設定一つで画像形式を一気に変更出来るところなども、大変ありがたい機能ですね。
前回のコンテンツにも、ドラッグ機能を追加しました。こちらもお試し下さい。
追記:20120310
縦スクロールバージョンも作成しました。
縦方向のドラッグがしにくい場合を考慮して、横方向にドラッグしても反応するようにしてあります。
別ウインドウ、または iPad でご覧頂く場合はこちらから。
*上記が表示していない場合は別ウインドウでご覧ください。
なお、android 搭載ブラウザ(auケータイ MIRACHで確認)では、等間隔スクロールが上手く機能しなかったため、標準のスクロール操作(連続スクロール)で動作するようにしてあります。
***
シリーズを続けています。 初めてお越しの方は、総集編か、カテゴリーTOPからご覧下さい。
→総集編 では、FreeHand の真の実力をご覧頂けます。
→続・総集編 は、総集編の続編です。総集編と合わせてご覧下さい。
→FreeHand _カテゴリーTOP はこちら
→FreeHand_使い方 TOP はこちら
→FreeHand_INDEX はこちら
→付録編 では、ざっくばらんな情報をご覧いただけます。
→Tips編 小ネタ集です。
→FreeHand VS CS4 では、最新版の Illustrator CS4 と比較しています。どうよ。
→FreeHand VS CS5 では、最新版の Illustrator CS5 と比較しています。どうよ。どうよ。
→FreeHand_入門編 Illustrator の作業が、FreeHand ではこんな感じ。
→FreeHand_番外編 実践的に使える裏技テクニックほか、様々な情報を提供しています。
***
→FreeHand カテゴリー 一覧はこちら
*ドラッグは、枠内(画像内)で行ってください。マウスが枠外に出たときは、戻って画像をクリックします。
*表示されていない場合は別ウインドウでお試しください。
このシリーズでは、FreeHand の優位性を紹介しています。
FreeHand の情報を求めている方や、Illustrator ユーザーの方にも、お役に立てれば幸いです。
現在、 番外編としてざっくばらんに話を進めています。
初めてお越しの方は、FreeHand をご理解頂くために 総集編か カテゴリーTOP もご覧頂ければ幸いです。
→ FreeHand _総集編はこちら → FreeHand _カテゴリーTOPはこちら
***
前回は、FreeHand の HTMLパブリッシュ機能を利用して、iPad で表示出来、しかも iPad らしい操作が可能なコンテンツということで試作しました。
iPadらしい操作という点では、拡大縮小・スクロール機能を駆使して大きなコンテンツを縦横無尽に見渡せるということを意図し、同時に 等間隔スクロール機能を持たせたため、パソコン上ではクリック操作で順送り出来るなど、両対応を強く意識して設計しました。
今回のものは、パソコン上でのクリック操作だけでなく iPad 風に、マウスドラッグ操作にも対応したため、より感覚的に操作出来るようになりました。
同様のものは Flash コンテンツでは早くから実現させていましたが、今回は HTMLでも対応可能となりました。
別ウインドウ、または iPad でご覧頂く場合はこちらから。
HTMLですから検索エンジンとの相性も良く、ページ繰りも素早く行えるため、電子マニュアルや技術解説用途などに最適です。 ←宣伝です(^^)
しかも、FreeHand のデザインデータをパブリッシュし、Javascript を追加するだけで制作出来るところがミソなのですね。FreeHand の活用用途が、ますます広がります。
追記:20120307
前回、制作方法について、画像の設定は PNG 形式をお勧めしました。 画質が良く、背景透明に対応出来るからですが、今回のように背景透明の必要がない場合は JPEG にした方が容量を軽く押さえることが出来ます。
当初 PNG形式としていましたが、現在は JPEG形式に変更しています。画像容量がかなり軽くなりました。
設定一つで画像形式を一気に変更出来るところなども、大変ありがたい機能ですね。
前回のコンテンツにも、ドラッグ機能を追加しました。こちらもお試し下さい。
追記:20120310
縦スクロールバージョンも作成しました。
縦方向のドラッグがしにくい場合を考慮して、横方向にドラッグしても反応するようにしてあります。
別ウインドウ、または iPad でご覧頂く場合はこちらから。
*上記が表示していない場合は別ウインドウでご覧ください。
なお、android 搭載ブラウザ(auケータイ MIRACHで確認)では、等間隔スクロールが上手く機能しなかったため、標準のスクロール操作(連続スクロール)で動作するようにしてあります。
***
シリーズを続けています。 初めてお越しの方は、総集編か、カテゴリーTOPからご覧下さい。
→総集編 では、FreeHand の真の実力をご覧頂けます。
→続・総集編 は、総集編の続編です。総集編と合わせてご覧下さい。
→FreeHand _カテゴリーTOP はこちら
→FreeHand_使い方 TOP はこちら
→FreeHand_INDEX はこちら
→付録編 では、ざっくばらんな情報をご覧いただけます。
→Tips編 小ネタ集です。
→FreeHand VS CS4 では、最新版の Illustrator CS4 と比較しています。どうよ。
→FreeHand VS CS5 では、最新版の Illustrator CS5 と比較しています。どうよ。どうよ。
→FreeHand_入門編 Illustrator の作業が、FreeHand ではこんな感じ。
→FreeHand_番外編 実践的に使える裏技テクニックほか、様々な情報を提供しています。
***
→FreeHand カテゴリー 一覧はこちら