So-net無料ブログ作成
検索選択

あっぱれ! FreeHand -3 <iPhone, iPod Touch 風 FLASH> [FreeHandで行こう!]

FreeHandで行こう!(番外編)その48 <あっぱれ! FreeHand その3> です。

このシリーズでは、FreeHand の優位性を紹介しています。
FreeHand の情報を求めている方や、Illustrator ユーザーの方にも、お役に立てれば幸いです。

現在、 番外編としてざっくばらんに話を進めています。
初めてお越しの方は、総集編か カテゴリーTOPからご覧になられるのをお薦めします。

       → FreeHand _総集編はこちら    → FreeHand _カテゴリーTOPはこちら

画像が表示されない等、表示がおかしい場合はこちらから再読み込みして下さい。
また、FLASH、及び iframe に対応していないブラウザではご覧になれませんので、表示出来ない場合はご容赦ください。


***

前回予告から ずいぶん日が経ってしまいましたが、FreeHand 実践テクニック、今回はサンプルデータ付きで公開です!
今回は、FreeHand ならではのマルチページ機能との複合技で、iPhone、iPod Touch 風のドラッグ操作が可能な複数ページコンテンツをパブリッシュしてみました。

まずは、下の画面を操作してみて下さい。

緊急情報:2011.10
表示されるはずの FLASHが上手く表示されない場合は、こちらの情報をご確認ください。


●ドラッグ移動可能

DRUG は FLASH の基本操作の一つですが、その操作感はマウスにピタリと張り付くようなもので、iPod Touch のような浮遊感はありませんでした。今回、より気持ち良く操作出来るよう、DRUG操作に浮遊感を持たせました。マウスに張り付く感じではなく、寄り添う感じの柔らかでスムーズな操作感です。
また、地下鉄路線図とオープンカー画像はトリミングされているため視点移動仕様にしていますが、それ以外のページは、等倍時のドラッグ操作ではデフォルト位置に戻るようにしています。(拡大時は視点移動


●ドラッグページ切替可能

ドラッグ中にマウスを加速させると、そのままページが流れ、スムーズに次ページに移動します。
4方向、どちらにドラッグしても、ドラッグした方向にページが流れ、ページ切り替えします。
(キーボードの、矢印キーも使用出来ます。)


●ダブルタップZoom可能

e-Zoom搭載。タッチパネルインターフェースに合わせ、ダブルクリックにのみ反応し、拡大時視点移動もドラッグタイプに仕様変更しました。2P目の地下鉄路線図では、Google Map のような操作感をお試しください。
(キーボードの、プラス・マイナスキーも使用出来ます)


当コンテンツは、PC対応版<FLASH>です。勿論、タッチパネルでも、マウスでも操作可能です。
学校に普及し始めた電子黒板にも対応しています。(実証済み)
タブレットPCのタッチ操作にも対応していますが、ブラウザによっては、ドラッグ操作をブラウザのスクロールに限定してしまうものがありますので、そのような場合はフルスクリーンで表示させる必要があります。
また、iPod Touch、iPhone、iPad では、FLASH非対応のためご覧いただくことが出来ません。


追記:20100510
表示中のページNo.を確認出来るようにしました。(中央下部 枠中に、控えめに表示しています)
数字入力 + enter で直接ページジャンプも可能です。ダウンロードファイルも更新しました。

追記:20100520
e-Zoom の仕様を若干変更しました。拡大直後は静止させずにマウス操作で視点移動可能、クリックで静止後、ドラッグで視点移動可能となります。e-Zoom本来の使い勝手とタッチパネル仕様の両立を図りました。
また、ドラッグ視点移動後にズームの中心がずれることがありましたので修正しました。
ダウンロードファイルも更新しました。

追記:20100609
タブレットPCでの操作の様子を映像にしてみました。

あわせて、タブレットPC(Wacomパネル採用のFujitsu製PC)仕様にあわせ、若干プログラム微調整しました。ダウンロードファイルも更新しました。

追記:20100722
バリエーションとして、iPad 風に センターからズームインするトランジションのものを追加しました。

追記:20110109
YouTube を読み込んでの表示が可能ですが、昨年のいつ頃からか YouTube の仕様が変更されていたようで、しばらくの間 読み込み出来なくなっていましたが、対応しました。 注)またまた仕様変更があったようで、現在表示していませんが、そのうち対応させます....。201202

追記:20110505
このインターフェースを利用して 弊社ホームページ を新しく作り替えてみました。 覗いてみてください。



***


FreeHand の進歩的な機能の一つに、「.swfファイルの読み込みと実行・再書き出し」があります。
それは、単に .swfアニメーションを読み込んで表示出来るというだけでなく、記述されている Action Script をそのまま実行出来、さらには読み込んだ Action Script を実行可能なまま(または加工して)、FreeHand から再パブリッシュ出来るという強力なものなのです。

今回の実践テクニックでは、上記機能をマルチページのマスターページに組み込んで活用しています。
上記のような命令コマンドを実行する Action Script を FLASH で記述し、そのファイルを FreeHand のマスターページに読み込ませれば、あとはDTPの要領で各ページに画像などをレイアウトするだけで上記のようなコンテンツがパブリッシュ出来てしまうのです。
ちなみに、FreeHand の FLASH プレビューは、FLASH と同じ Command + Return(MACの場合)です。
操作も全く違和感無いでしょ。


下の画像は、当コンテンツの FreeHand マルチページドキュメント。

TouchPanel_page.jpg

当ページコンテンツは全10ページで、右 又は下向きにドラッグした場合、1ページ目から順番に表示します。左 又は上向きにドラッグすれば10ページ目から逆に表示しますが、通信環境によっては、後半ページがダウンロード出来ていない場合、途中のページが表示される場合があります。


当仕様の FreeHand MX 生ファイルは、こちらからダウンロード出来ますので、FreeHand ユーザーの方は、是非お試しください。(このような機能は使ったことがないという方は、是非 FreeHand の新しい可能性に触れてみて下さい。ますます使い出のあるソフトと見直されることでしょう。
ダウンロードファイル名は:Touch_Panel_FreeHand.zip です。)

FLVビデオや、FLASHアニメーション、縦スクロールなどのコンテンツを使いこなすには、さらに細かなノウハウが必要ですのでサンプルからは割愛していますが、画像を並べるだけでも iPod Touch 風のフォトギャラリーが簡単に作成出来ます。(初めて FreeHand を使ってみようという方で、画像の読み込み方が解らない方は、使い方-5 をご覧下さい。いきなり Illustrator より使いやすいことに驚かれるはずです。)
フォトギャラリーで飽き足らない人は、色々チャレンジしてみて下さい。.swf ファイルを配置する場合は、バージョン6でパブリッシュしたものを使用します。(ActionScript 2 の知識がそのまま活かせます)

また、6ページ目のフラッシュアニメーションは、FreeHand だけで作成出来るものです。(Tips-4入門編-10参照)FreeHand からパブリッシュしたものを、もう一度 FreeHand に読み込ませることも出来ます。慣れてくれば、タイミングを合わせたり、インタラクティブにすることにも挑戦してみて下さい。




前回、Dear ADOBE と題して、Illustrator CS4 + InDesign CS4 + Flash CS4 < FreeHand MX と書きました。
PostCard1.jpg
まさに今回のようなコンテンツは、その通りだと思いませんか?

最新の CS5 シリーズを総動員すれば、同様のものもできるのでしょうが、時間が何倍かかることやら....
FreeHand なら、サンプルファイルのような雛形を用意しておけば、誰でも数分で作成出来る訳ですから、生産性の高さは恐るべきものと言えます。(7年前から実現していた機能なんですよ!)

ADOBE は Macromedia 買収以降、Illustrator や InDesign に Macromedia STUDIO の技術を移植することに躍起になっているようですが、FreeHand は7年前に STUDIO の中核ソフトとして自在に連携してハンドリング出来る能力を持っていました。(.swf や、.png、アルファレイヤーなどの仕様に対して。Illustrator は、未だに対応出来ていません。)


Macromedia STUDIO MX(後期パッケージ)や、STUDIO MX 2004 をお持ちなのに、FreeHand MX は使ったことが無いという方も多いようです。
「何とも、もったいない!」
Illustrator を持っているから FreeHand は必要ない、なんて、FreeHand のことも良く知らずに放ったらかしていませんでしたか?

当ブログで何度も書いてきたように、Illustrator の CS3、CS4、CS5 の新機能の多くは、FreeHand からそのまま移植されたものです。Illustrator が FreeHand に近づくためのバージョンアップ料金を、皆さんはずっと払い続けていますよね。より優れたソフトが目の前にあったのに...。
「何とも、もったいない!」


7年前の FreeHand MX には、最新の Illustrator にも、まだまだ真似出来ない機能がたくさん残っていますよ。Illustrator ユーザーは、なぜ知ろうとしないんでしょうね。せめて今回のような機能をきっかけに、一度 FreeHand をお使いになられてはいかがでしょうか?
勿論、こういった先進機能だけでなく、基本操作体系の完成度の高さこそが FreeHand の真骨頂であるということを同時に感じてほしいというのも本音にあります。

最新の Illustrator でも、まだまだ FreeHand に追いついていない部分がどれほどあるのかは、当ブログシリーズを一通りご覧いただければ、すぐにお解りになるでしょう。

そして、FreeHand に少しでも興味が湧いたなら、ADOBE から FreeHand を解放させ、再び切磋琢磨するライバル関係に戻れるように応援して欲しいのです。
昨年末には、FreeHand 復活を望む世界中のユーザーが立ち上がっています。→ Free FreeHand.org
左のリンク集に翻訳もありますのでぜひご覧になって下さい。

現在、FreeHand は ADOBE に拉致監禁されている状態ですが、Free FreeHand .org では、CS5発表に合わせたタイミングで、FreeHand の版権を取り戻すべく交渉に入りました。
ADOBE は、FreeHand の開発は今後一切行わないと発表したにもかかわらず、版権はそのまま保有するの一点張りのようです。Illustrator がまだまだ FreeHand に追いついていない以上、出せない立場は容易に想像出来ますが、FreeHand の代わりにならないようなモノを使うべしと押し付けられた世界中の FreeHand ユーザーは困窮しています。いくら機能を移植しても、似非ものは FreeHand の代わりには成り得ないのです。
手前勝手でユーザー無視な ADOBE に対し、法に訴えてでも FreeHand の版権を奪取する意向です。

もし ADOBE から版権奪取出来たならば、Linux や JAVA のように誰でも自由に使えるオープンソースとして公開したい意向とのことです。(まさしく、Free FreeHand ですね)
そうすれば、FreeHand は全ての人にとっての素晴らしい財産となるはずです。
是非とも応援宜しくお願いします。




今回は、サンプルファイル付きで FreeHand 実践テクニックを紹介しました。
あっぱれ! FreeHand はまだまだ続けます。 To be continued.

  → あっぱれ! FreeHand その4 <Illustration & SWF Publish(iPad風)> アップしました。
  → iPad 風操作の電子カタログ <Flash 版 e-Book> もアップしました。





追記:20100502
ダウンロードファイルのファイル構成がよく解らないとの連絡がありましたので、追記します。
Touch_Panel_File.jpg
上記が解凍後のファイル構成です。WINDOWS の場合、見え方が変わると思います。
また、圧縮ファイルは .ZIP 以外に、.SIT 形式も用意しました。MAC の方は .SIT 形式の方が確実だと思いますので .SIT をご利用ください。
使用方法とファイル構成は Read_Me.pdf で解説しています。

追記:20100523
パーセント及びズームエリア表示用の外部 swfファイルを追加しました。



追記:20100510
momoさまが、最新ニュースを翻訳して下さいました。
Illustrator ユーザーの方も、真剣に考えてみて下さい。
「競争の欠如は Adobeの Illustrator ユーザーのためにもならないと言えます。なんら技術の革新がなされているわけでもないのに、価格がコントロールされるということは、とどのつまり Illustrator のユーザーが脆弱な製品をいちいちアップブレードしなくてはならなくなるということを意味するのであり、たとえIllustrator を使うのがいやになったとしても、ほかにどうすることもできないということなのです」

そうなのです。Illustratorファンのみなさん、聞いていますか? Adobe は FreeHand という鉱脈から10年も前に開発されたその独自の機能を掘り起こして、ただでさえコードがてんこ盛りの最愛の Illustrator に詰め込んで移植しているだけなのです。それにもかかわらず、それを「画期的な進歩」と称し、その実これといってなんの目新しい開発もなされていない製品をよりいっそう短いスパンでリリースし、みなさんにばかばかしい出費を課すことを保証しているにすぎないのです。これを悲しく残酷なことと言わないのなら、とんでもなくばかげた冗談としか言いようがありません。

われわれは、実際のところAdobe社の行いはいずれにせよなんらかのかたちでソフトウェア産業にかかわるすべての人々を傷つけるものであり、結局はこの明白な事実こそがわれわれの試みを最終的に成功に導きうるものであるということをIllustratorユーザーに確信させるものであると感じています。大きく息を吸ってください。われわれにはまだやらなければならない仕事がたくさんあります。けれど、みなさんは同時にいくぶんなりとも奮い立ち、気持ちをあらたにしたのではないでしょうか。世界はわれわれが主張する主眼点が妥当なものであり、FreeHandをめぐるいきさつが不当な事例のひとつであるということを理解しつつあるのです。
左メニュー【外部リンク集】翻訳-7参照。


追記:20111024
2011年10月4日にリリースされた、Flash Player 11 には、表示上の重大な欠陥があり、修正もされずに放置されたままになっています。Flash Player 11 の表示上の欠陥により、FreeHand からパブリッシュした .swf は、全て表示できなくなってしまいました。( Flash Player 11 未満では問題なく表示します。)
この件に関しての詳しい情報はこちらを参照してください。
なお、デコンパイルソフトなどを使用して表示可能に修正できたファイルは以前同様にご覧頂けるようにしましたが、修正できなかったファイルに関しては、黄色いアラートを表示させています。




***


シリーズを続けています。初めてお越しの方は、総集編か、カテゴリーTOPからご覧下さい。
   →総集編 では、FreeHand の真の実力をご覧頂けます。
   →続・総集編 は、総集編の続編です。総集編と合わせてご覧下さい。
   →FreeHand _カテゴリーTOP はこちら
   →FreeHand_使い方 TOP はこちら
   →FreeHand_INDEX はこちら
   →付録編 では、ざっくばらんな情報をご覧いただけます。
   →Tips編 小ネタ集です。
   →FreeHand VS CS4 では、最新版の Illustrator CS4 と比較しています。どうよ。
   →FreeHand_入門編 連載中!  Illustrator の作業が、FreeHand ではこんな感じ。
   →FreeHand_番外編 実践的に使える裏技テクニックほか、様々な情報を提供しています。
   →FreeHand VS CS5 では、最新版の Illustrator CS5 と比較しています。どうよ。どうよ。


***



   →FreeHand カテゴリー 一覧はこちら








FLASH !( iPad 風操作の 電子書籍) [FLASH !]

iPad に負けるな、FLASH版 e-Book!

なんとも、旧いカタログを復刻してみました。特に意図はございません。サンプルですので。


今日28日は、iPad 解禁日ですね。
iPad 発売記念 f^_^; って訳ではないですが、PC + FLASH で iPad 風操作の電子書籍はいかがでしょう?


従来の FLASH版電子ブックの操作性を、iPad に引けを取らないように改良してみました。
操作性の改良点は以下の通りです。



めくる操作:

従来の電子ブックは、本の四隅をクリックするか ドラッグしてページをめくりますが、新しい e-Book では、iPad のように、ページのどこでも、なぞるようにドラッグしてページがめくれるようになりました。(一定速度以上のドラッグ操作に対して反応します。反応しない場合は、ドラッグを加速して下さい。 追記:感度を高めましたので、僅かなドラッグ加速で反応すると思います)
勿論、従来通りの操作も可能です。っていうか、端を摘んでドラッグすると、iPad 以上のリアルさでページがめくれますよ。

さらに、キーボードの矢印キー "←"、"→" を使用したり、右下にページ数入力してもページめくり出来ます。
SHIFT キーを併用すれば、より高速に操作することも出来ます。

追記:20100708
下部中央にナビゲーション用のページ送りスライドバーを追加しました。



ズーム操作:

ダブルクリックでズーム開始し、任意の倍率で止めることが出来ます。
テンキーの "+"、"ー" キーも使用可能。
1度目のズーミングで最大400%、一度止めてからの再ズームでは最大600%強までの任意の範囲で操作可能。
範囲指定ズーム(Illustrator の様なキーボード操作併用:Macの場合 Command+Space)では倍率無制限です。(但し、20000%以上は、画像としては表示出来ない場合があるようです。また、ブラウザによってはショートカットが機能しないものもあるようです。)
拡大中は視点移動、ドラッグ移動が可能です。但し、あまり速く動かすとページがめくれますので、慣れて使いこなして下さい。
(PCの処理能力によっては、反応が過敏になる場合もあるようですので、選択スイッチを付けてみました。
 表紙横の説明書きにある「ドラッグ加速で、ページ切り替えを...」のチェックを「行わない」にすると
 拡大中のドラッグ加速に対して、ページめくり機能を働かないようにすることができます。)



発売前なので まだ触っていませんが、iPad は、最新のハードウエアとソフトウエアに加え、指先だけで操作出来るインターフェースのため、実に使いやすく出来ているようですね。
一方、PC版 e-Book では、ハードウエアの仕様も様々で、マウスボタンを放すタイミングなども操作に影響する為、なかなか iPad のようにはいきませんでした。

でも、まぁなんとか、PC でも iPad に引けを取らない自然な操作感を実現出来るところまでこぎ着けられたかなということで、iPad 新発売に乗じて、新版 e-Book もよろしくね。です。(^^)


なお、当 e-Book は、電子黒板・タッチパネルディスプレイ・タブレットPCにも対応します。
但し、タブレットPCのブラウザには、ドラッグ操作をブラウザのスクロールに限定してしまうものがありますので、そのような場合は e-Book のみをフルスクリーンで表示させる必要があります。
また、FLASH が表示出来ない Apple 製デバイスでは、残念ながらご覧いただくことは出来ません。

フルスクリーンで表示すれば、よりリアルな操作感が楽しめます。 また、タブレットPCで上下にスクロールして操作出来ない場合は、フルスクリーンでお試しください。  →フルスクリーン表示はこちら


お知らせ:
 弊社では、PDFがあれば 当仕様の e-Book にデータ変換出来る技術を確立致しました。
 お問い合わせをお待ちしております。(^^)V


追記:
タブレットPCでの操作の様子を動画にしてみました。



追記:ファッションカタログにご採用いただきました!

   ※実際の操作はこちら



***



FLASH 非対応のブラウザで表示できない場合はご容赦ください。また、.xml、.rdf 記述ページでも表示できないようですので、そのような場合は再読み込みしてみて下さい。


通信環境によっては、ダウンロードに時間がかかる場合があります。ページが表示されていても、後ろのページがダウンロード中の場合、PCによっては動作が鈍くなる場合がありますので、そのような場合は少し待ってから操作して下さい。
ページの端が摘めない場合は、再読み込みしてみて下さい。

グレーエリアの外にマウスポインタが出てしまうと、マウスを認識出来なくなるブラウザもあるようですので、グレーエリア内で操作して下さい。その意味でもフルスクリーンの方が操作しやすいです。お試しください。



← FLASH! 前へ←  iPod Touch 風スクロールメニュー はこちら
→ FLASH! 次へ→  FLASH on Tablet-PC はこちら

← iPhone, iPod Touch 風 FLASH <あっぱれ! FreeHand -3> はこちら ←
→ iPad 風 FLASH 追加しました。<あっぱれ! FreeHand -4> はこちら →




タグ:Flash