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 カテゴリー 一覧はこちら








nice!(1)  コメント(4)  トラックバック(10) 
共通テーマ:パソコン・インターネット

nice! 1

コメント 4

momo

アスペクトさま、こんばんは♪

ほんとにすごいですよね!
FreeHand、ばんざーいヾ(≧ω≦)ノヒャッホーィ♪

…とか言いつつ、
Illustratorを使ってみるまでは、
そのすばらしさに全然気づいていなかった私です(;^ω^)タリタリ~
私の職場ではFreeHandをあがめているわりに(笑)、
仕事柄使っている機能は限られているので、
ASPECTさまのブログを読んで、
「こんなこともできるんだ…」と目からうろこなこともしばしばです。
ほんとうにいつもありがとうございます(*^ω^*)♪

ASPECTさまのようなデザインのプロにとってはもちろんですが、
アナログな白黒線画が基本の特許図面の分野でもFreeHandはすごい威力を発揮してくれます。
設計図やデザイン画などとは違って、
図面が厳密で正確であることや、
うつくしさにこだわってつくりこむ…というよりも、
特許図面は発明の内容の説明に必要な概念図なので、
発明のコンセプトをわかりやすく、
しかも技術者の要請に応えていかに能率よく描くか…ということが重視されます。
なので、FreeHandの操作性の良さ、
大量のページをかるがると扱える能力は
仕事の効率をあげるうえでなくてはならないものです。
デザインではない、こういう仕事の分野でもこれだけの能力を発揮してくれるソフトは、やはりFreeHandをおいてはないのではないかと思います。
by momo (2010-05-01 21:03) 

aspect

momoさま、昨日はお誕生日おめでとうございます!
お誕生日がゴールデンウイークって素敵ですね。

momo様は、日本テクニカルイラストレーション協会ってご存知でしょうか?
現在は名称が変わっていて、日本ビジュアルコミュニケーション協会って言いますが。

その協会の旧くからのメンバーの多くは FreeHand ユーザーなんですよ。
FreeHand で特許図面を描いている人も多いです。
関東が本拠の協会ですが、FreeHand つながりで、大阪在住の私もメンバーになっています。

テクニカルイラストの分野でも、FreeHand が圧倒的に使いやすいのは定説ですね。
両方知っている人で、Illustrator の方が良いという人は誰一人としていません。
ただ、取引先との関係で、泣く泣く Illustrator に鞍替えする人が続出しているのも現実で、それは本当に残念なことです。


他に、有名なところでは「ミリオンマップ」の市街地図も FreeHand で描かれていたんですよ。サンプルを持っていますが、凄まじいです。さすが FreeHand。
 (ただ、FreeHand が無くなった現在は自社開発の地図専用ソフトに代えたそうです。
  Illustrator に替えたのでないのはせめてもの救いですね。
  まぁ、Illustrator では、あれだけのものは描けないんでしょう。時間的にも。)
FreeHand のことは、今でもいいソフトだったのを思い出すって言ってました。
過去形の話なのが残念ですが..。


今日の記事のサンプルデータは是非ダウンロードしてお試し下さいね。
フォトギャラリーの他に、特許図面でもお使いいただけます。
ベクトルのまま拡大も出来ますから、お客様へのプレゼンに使っていただいたり、
また、おまけ納品として利用していただいても喜ばれるかもしれませんね。

ただ、あまり描き込んでパスが多いと FLASHの表示速度が落ちますので、
そのような場合はラスタライズしてみて下さい。
また、バックグラウンドを黒に指定してありますが、白にした方が使いやすいかもしれませんね。

by aspect (2010-05-02 02:20) 

momo

ASPECTさま、こんばんは♪

>momo様は、日本テクニカルイラストレーション協会ってご存知でしょうか?

わああ、知ってます~(≧▽≦)♪
私はズブズブのしろうとからこの仕事をはじめたのですが、
同僚のなかにはちゃんと機械図面の勉強をして、テクニカル・イラストレーション技能士の資格を持っている人もいます。
私の場合は仕事をしながら独学の無手勝流(笑)で描き方をどうにかこうにか覚えた…という感じなのですが、
「実践テクニカルイラストレーション」という本にはほんとうにお世話になりました。
ASPECTさまはこちらにもつながりを持っていらっしゃったんですね!
TIにたずさわる人たちがIllustratorよりもFreeHandを使いやすいと思う気持ち、私も実感としてよくわかるような気がします。

私ははずかしながら、かなりのデジタル音痴。
ASPECTさまのお話も正直に白状すると、わからないところもいっぱいです。
FreeHandはすばらしい!!…と思っていたけれど、
私はほんとうにそのごくごく一部しか使いこなしていなかったんだなあ…と痛感しています。
せっかくFreeHandを通してつながったご縁なので、
少しは自分なりに勉強してみようかなあ…と思っています。
ASPECTさまのデータ、ありがたくいただきました(*^ω^*)♪

by momo (2010-05-02 19:02) 

aspect

momoさま
やっぱり、テクニカルイラストレーション協会のことはご存知だったんですね。

私は、現会長が雑誌の取材で、自分の強みは、Illustrator ではなく、
FreeHand を使っていることだ、と言い切っている記事を見かけたのがきっかけで、
連絡を取ったところ意気投合して以来のお付き合いなんです。
もう、12、3年前の話になります。
Macromedia の FreeHand 担当の方もご紹介いただいたり、大変お世話になりました。


ところで、当ブログでは Illustrator との違いを明確にするために、
ついつい先進的な機能に重点を置いて解説しているところがありますが、
実は、momo様がおっしゃる通り、FreeHand の最大の美点は基本操作体系の使いやすさ、
完成度の高さにあるのは間違いありません。

Illustrator が、いかに FreeHand の先進機能を吸い上げようとも、
基本操作体系との間に整合性がとれていないから、なにをするにも手間が多くかかり、
いちいち操作に時間がかかってしまうんですね。

世界中の FreeHand ユーザーが Illustrator を使いたがらないのは
実はその部分なんですが、ADOBE 首脳陣をはじめ、Illustrator しか知らないユーザーには、その辺りの違いが、まるで理解出来ないようです。

私のオフィスに Illustrator ユーザーの方もよく見学に来られ、
FreeHand の操作体系をひととおりデモすると、ここまで違うものなのかと絶句されますが、
目の当たりにするまでは、その違いが解らないのが現実なんですよね。

この部分でも、momo様がおっしゃる通り、
これはもう、慣れの問題ではなくて、ソフトが持ってる理念の問題なのだと思います。

「ソフトが描き手に寄り添うのではなく、「まずソフトありき」で、描き手がソフトの機能にあわせて描き方を限定される感じ」

ADOBE には、いいかげんその辺りの違いを学習してほしいものですが、無理なんでしょうね。FreeHand の基本操作体系に近づけるということは、Illustrator の操作体系を否定してしまうということになりますから。

やはり、FreeHand と、Illustrator は、水と油のように馴染まないものなのだと思います。
これは、初期のバージョンの頃から言われていたことですが。

FreeHand の機能を取り入れてきた CS3、CS4が、評判が上がるどころか、不満ばかり聞こえてくるのも、整合性も考えずに機能移植ばかりに躍起になって、
挙げ句、使いにくくて、動作の鈍いソフトになっているからだと思います。

by aspect (2010-05-03 02:17) 

コメントを書く

お名前:
URL:
コメント:
画像認証:
下の画像に表示されている文字を入力してください。

トラックバック 10