WEBデザイン : Flash×3D

投稿者 トピック
ぽお
サイトマスター
  • 登録日: 2007-10-25
  • 居住地:
  • 投稿: 24
Flash×3D
Web上でアニメーションなどに使われるFlash♪
あんまり触ったことないけど3Dに挑戦してみよう!

というわけで、
▼ネットで集めてきた情報をまとめてみましたφ(・ω・。)

まず、Flashで3Dをするには今はActionScript 3.0が主流らしい。
ということはMacromedia Flash8以前のActionscript 2.0対応のソフトは使えないの(´・ω・`)?
いいえ。Actionscript 2.0で3Dができないわけじゃないけど、
コードの書き方が違うので新しいのを勉強した方が良いということらしいです。

ここ1, 2年でゲーム世界はもとより、
Webデザインも3D化が進んできております(*'ω')
絵を描いたり、写真加工のソフトだったPhotoshopも
CS4では3Dデザインができるように。

でも、Adobeのソフトや3DCGを作るソフトはめちゃ高い!
何度も買い換えるのはたいへん!
ということで、無料のソフトを集めてみました▼

・「FlashDevelop」
http://www.flashdevelop.org/community/
ActionScript 3.0のコードが書けるソフトです。
バージョンがいろいろあるのですが英語版のみorz
現バージョンは3.00 RC3
ダウンロード〜インストールは画面通りに進めて問題ないと思います(*'ω')~゜
exeファイルを実行→Next→I Agree→Next→
インストールする場所をC:\Program Files\FlashDevelop\
などに決めてInstall

別の方が日本語化パッチを作られているのでご参考に。
http://www.logicalyze.net/blog/?p=2273
こちらで配布されているファイルをダウンロード、解凍し、
FlashDevelopをインストール後、
C:\Program Files\FlashDevelop\Settingsの中にある
同名のファイルを置き換えるとメニューバーなどを日本語化できます!ありがたや〜ヽ(・ω・)ノ

あと、FlashDevelopを動かすにはJavaと
http://www.java.com/ja/download/
Microsoft.NET Frameworks 2以上のインストールが必要らしいので、
http://www.microsoft.com/downloads/details.aspx?familyid=333325FD-AE52-4E35-B531-508D977D32A6&displaylang=ja
これらはFlashDevelopのインストール前か、後にそれぞれ
ダウンロード、インストールします。

また、FlashDevelopは初期状態ではasファイルに日本語を書くと化けるので、
起動したら、メニューバーから
「ファイル」→「文字エンコーディング」をUTF-8に変更してから書きます(`・ω・)

8 Bitsてなんだっけ(-ω-;)?とか思っちゃいました。

・他には、よくわからないけど必要らしい「Flex SDK」
FlashDevelopとリンクさせる?と動くらしいです。
最新バージョンはflex_sdk_3.3.0.4852
配布元はAdobeでオープンソース(無料)です。
http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+3

AdobeにはFlex SDKが入っているFlex Builder3というソフトがありますが、
こちらはStandard版でも3万円します(-ω-;)
Adobe(元Macromedia)のFlashがデザイナー向けのFlash作成ソフトとすると、
Flex Builderはプログラマー向けのFlash作成ソフトという感じです。

Flex SDKだけではFlashは作れず、コード入力にはテキストエディタが必要ですが、
その役目をFlashDevelopがしてくれます。
(テキストエディタでも作れるhtmlをDreamweaverやHPビルダーで作る、
という感じでしょうか。。。)
Flex SDKのzipファイルは解凍してもインストール用のexeファイルなどは入っていません。
Readmeを開くと英語orz。。。
FlashDevelopでFlex SDKを使えるようにするには、
まず、CドライブなどにC:\flex_sdk_3というフォルダを作って
Adobeからダウンロードして解凍してできたフォルダの中身(ant, asdocフォルダなどをとりあえず全部)
をコピーします。

それから、FlashDevelopのメニューバーの
ツール→プログラム設定(Settings)を開き、
左側の、AS3Contextをクリックし、
右側に表示されるLanguageのFlex SDK Locationを
C:\flex_sdk_3にし、
次に左側のFlashViewerをクリックし、
右側に表示されるExternal Player Pathを
C:\flex_sdk_3\runtimes\player\10\win\FlashPlayer.exe
にして閉じ、これで設定は完了です。

「FlashDevelop と Flex SDK3」があれば、
Adobe Flash CS3やAdobe Flex Builderと同等のものが
作れるようになるらしいです(*´ω`*)がんばり次第?

FlashDevelop 3.0.0 RC3でFlashを作る方法は、たとえば、
ソフトを起動し、StartPageに表示されるNew Projectをクリック、
またはメニューバーのProject→New Projectをクリックし、
Installed TemplatesのActionScript3のAS3 Projectを選び、
Nameはこれから作るFlashのためのProjectのフォルダ名で、
Location(保存場所)はマイドキュメントにでもしておきます。
そうすると、右側のウィンドウにProject名のフォルダ下に、
bin, lib, srcというフォルダができるので、srcフォルダを開いて、Main.asファイルを開きます。
このファイルのpackege { }で囲まれた部分にActionScriptのコードを書き込んでいきます。
ActionScriptのコードができたら、
F5キー(メニューバーでいうとProject→Test Movieのショートカット)を押すと、
binフォルダの中にWebでFlashを表示するためのファイル(swfファイルと付属のhtml, jsフォルダの中にjsファイル)が作られますヽ(・ω・)ノ

・そして、ActionScriptで3Dを簡単に作れるようにしてくれるのが「Papervision3D」
3Dエンジンというものらしい。。。
これはGoogle Codeの以下のホームページで配布していますが、
http://code.google.com/p/papervision3d/
TortoiseSVNというソフトを使ってダウンロードする(仕組みはよくわかりませんが…)
と丸ごと?落とせるらしいので、まず、
http://tortoisesvn.net/downloads
からTortoiseSVNをダウンロード、インストールします。

それから、Papervision3Dをダウンロードするため空のフォルダ(名前は好きなように)を用意し、
そのフォルダを右クリックしてSVN CheckoutをクリックするとCheckout画面が開くので、
RepositoryのURL of repositoryに
http://papervision3d.googlecode.com/svn/trunk/
と入力し、
Checkout DepthはFully recursive, Omit externalsにチェック、
RevisionはHEAD revisionでOKをクリックするとダウンロードが始まるので終わるまでしばらく待ち、
OKボタンが押せるようになったらクリックしてダウンロード完了です。
TortoiseSVNを使ってダウンロードしたフォルダには、なにやら緑色の丸にチェックがついたマークが
付きますが気にしないことにします|ω=)ジー

それから、C:\flex_sdk_3\frameworksの中に
sourcesというフォルダを作って、
ダウンロードしてきたPapervision3Dフォルダの中にある
branches→cs4→srcフォルダに入っていって、
その中身(com, fl, nochump, orgのフォルダ)をsourcesにコピー?
この辺はよくわからないです。。。
詳しく解説してるサイトがあまりないですし、
Papervision3Dのフォルダ構成もバージョンによってさまざまなので(-ω-;)
as3→trunk→srcフォルダの中身をコピーでもよさそう?と思いやってみましたが、
cs4→srcの時は表示された3Dが出ず、理由はわかりませんがだめなようです。
as2→trunk→srcフォルダのほうはActionScript2用ぽいので、
Flash8でも動くかな?と思ったりしました。。。

それぞれ、インストールなどは全て自己責任で行なってくださいませっ(⊃ω⊂)

as2やas3フォルダ内にはあちこちexamplesフォルダがあり、
サンプルのswfファイルが入っているので、ためしに見てみると参考になります(・ω、・ )

ほとんどの人はFlash CS4や3ds Maxなど、有名どころの高価なソフトに
Papervision3Dを入れて使っているようでそれらの解説サイトは多いですにゃ(ノω\*)

Papervision3Dの設定のつづきですが、、
C:\flex_sdk_3\frameworksの中にあるflex-config.xmlを
TeraPadなどのテキストエディタで開いて、
32〜34行目付近でコメントアウト<!-- -->されている以下の部分を
<source-path>
<path-element>sources</path-element>
</source-path>
と書き換えて上書き保存します。
それから、FlashDevelopのツール→Global Classpathsに
C:\flex_sdk_3\frameworks\sources
と追加(Add Classpath)しておくと良いらしいです。


なんだか初期設定だけで頭がパニくりますが、
これでひとまずFlashDevelopでPapervision3Dが使えるようになったです(-ω-;)?

ちなみに、
Papervison3Dのコードだけで立体を表示させる機能はあるですが、
Papervision3Dはobjectsとしてdaeファイルも読み込めます。
なので、フリー3DソフトのBlenderから出力したdaeファイルはもちろん、
フリー版のGoogle SketchUp 6でも、エクスポート形式をGoogle Earth 4にして出力したkmzファイルを
右クリックして解凍※したフォルダのmodelsフォルダの中にある
daeファイルをFlashDevelopで作ったProjectのbinフォルダ内に入れておき、
srcフォルダ内のasファイルにそのdaeファイルを読み込むコードを書くと、
F5キーで出力したFlash(swfファイル)で表示できます(・ω、・ )

※この操作は圧縮解凍ソフトのLhaplusなどを事前にインストールしておく必要があるかもです。
http://www.vector.co.jp/soft/win95/util/se169348.html

Papervision3Dのorg→papervision3d→objets→
parsersフォルダの中にはDAEのほかにも、
Sketchupというファイルが用意されているので、
わざわざdaeにしなくても読み込めるのかも?しれないですが、
自分には設定方法がわからないです(-ω-;)
また、Sketchupでライトや影を設定しても、
Papervision3Dを経由させるとFlashでは表示されないです。

Papervison3Dのコードでライトや影を設定できるようなのですが、
詳しいサイトがなかなか見つからなく、
方法がわからないです(⊃ω⊂)

FlashDevelopもPapervision3Dも元が英語のものですし、
プログラミング知識ゼロのデザイナーでもわかる親切丁寧な本やサイトというのはほとんどありません。。。
また、Papervision3Dを使わずにActionScriptだけでも3Dモデルは作成できますが、
点座標の全入力になるのでかなり長くなります。。。
とりあえずは、asファイルのpackage { }のコード部分に、他の方がネット上で公開しているものに置き換えてみたりして勉強するしかないです。。。
ただコピペするだけだとエラーもしょっちゅう出まくりですが。。。
千里の道になろうともっ(`・ω・)

基本的にソースを公開されてる人はある程度プログラミングがわかっていて、自分の復習用を兼ねてらっしゃるので、自分がわかっている部分の解説は省略されてるのが初心者のユーザーにはイタイところ。。。
まぁ、贅沢は言えませんっ(TωT)ヾ(・ω・`)マケナイデ

actionscript 3, papervision3D, flashdevelopなどで検索しまくり〜(@ω@;

このサイトはいろいろまとめられていて便利▼
http://kozy.heteml.jp/pukiwiki/index.php?FrontPage

あちこちネットサーフィングして情報集めした結論!
数学苦手なデザイナーにはActionScriptプログラミングは予想以上にむずぃですヽ(TωT)ノ

単語の意味すらわからず作ってる恐怖!
そりゃあエラーも続発する!

自分は、読み込んだdaeファイルをFlash上でくるくる回すところまで作って満足して燃え尽きました。。。orz

このFlashすごすぎΣ(・ω・)!
と思ったのは「脳の中の風船」さんのレースゲーム
http://phenotype.jpn.org/blog/archives/category/game-develop
いったいどんな勉強されたんだろうと超尊敬(⊃ω⊂)

単なるデザイナーだったらお絵かきソフトの扱い方で足りるけど、
本格的なWeb、Flashを扱うとなると数学や物理プログラミングの素養もかなり必要で、
つまり、Webデザイナーというのは文化系かつ理系な人で、
新しい技術取り入れたい人は英語も読める必要があるという、
た〜いへんエキスパートな世界の人なのですにゃっ!

もちろん、
自分はデザインだけしか作りません〜、
私はプログラムやコーディング専門です〜、
と分業制の場合は1人1人は少ない知識があれば間に合いますが、
「私は全部つくれます!」と言えると、
他の人よりワンランク上な気分かも(⊃ω⊂)?


テーマ選択
screenshot

(9 テーマ)

ログイン
ユーザー名:

パスワード:


パスワード紛失

サイトの最終更新日
2010年 2月 1日


ぽお プロフィール
ぽお

いろいろなデザインを考えながら
まったりするのが至福のひととき
(ρω-).。o○

3月6日生まれなA型 うお座

[デザインのこだわり]
シンプル・イズ・ベスト(・ω・)b

[趣味]
インターネットに関するもの全般
XOOPS用のテーマ創作
アニメ・映画鑑賞・読書など

[性格]
六星占術によると土星人+らしい
ほぼ占い通りの性格。
ふだんは温厚なクマですが、お酒がまわると毒舌になるので取扱い注意です(*ノωノ)

コミュニケーション嫌いではないが、孤高を持することに美を感じ、自分もかくありたいと思っています

知的好奇心を満たすことを好み、
体力、速さを競うことには無関心

ただし!知的なものは好きですが、
自分が知的であると主張する気はありませんし、
そう言う人は嫌いです(*ノωノ)

[好きな言葉]
「ヲタク」やめますか
それとも「人間」やめますか?

言わずもがな(-ω-`)

[目標]
オタクな芸術家(アーティスト)

[スキル]
WEBクリエイター、
ベジェイラストレーター

[使用するアプリ達]
Illustrator Photoshop
Dreamweaver Fireworks Flash
PHP MovableType XOOPS
Google Maps, SketchUpなど


mixi(ミクシィ)やってます!
[ mixi ] お友録はご自由に(・ω・)ノ

[ creco ] Myページはこちら
お問い合わせ
サイトマップ
リンク
XOOPS Cube PROJECT