< « 2008年08月 | main| 2008年10月 » >

大阪てらこ17 おまけ　自己紹介用のやつ

FLASH勉強

2008年09月23日

teraco_syokai1.jpg

※開いてからクリックでスタートです。

「文字が散らばって集合して文章を作る」みたいなのを試してみたくて、良い機会だったんで、大阪てら子１７の発表時に自己紹介用として↑なものを作っていきました。

ちょっとした解説

フォントの読み込み

ダイナミックテキストを使用しているのですが、パブリッシュ時の遅さにストレスが貯まるので、
CS3版　フォントのダイナミックなローディング@_level0.CUPPY
を参考にフォントを読み込んでます。

テキストのビットマップ化

文書を一文字一文字に分解し、テキストフィールドに一度入れてから、ビットマップ化（BitmapData.drawにて）しています。こうすることで、テキストを回転、アルファなど色々可能に。

奥行きを持たせて表示（Z軸）

プロパティとして、デフォルトの[x],[y]に加え[z]を追加し、

  1. var scale:Number = fl / (_fl + z値 )

と、scaleをZの値により変更しています。
Papervision3Dを使うまで大袈裟にするのはめんどくさいなー。って時に便利。

深度の変更

このままでは、物体が被さった時に後ろにあるはずのものが手前に表示されたりと、おかしな現象がおきるので、

  1. temp.sortOn( "z" , Array.DESCENDING | Array.NUMERIC );
  2. for (var i:int = 0; i < temp.length; i++) {
  3.     sp = temp[i];
  4.     _textContainer.setChildIndex( sp , i );
  5. }

配列をソートし、深度の設定しなおす方法でリアル？な空間にしてます。




後はあーだこーだと動け！！を目指しコーディング。


なんちゃってソースUP

大阪てら子 17 Flash で時計大会

FLASH勉強

2008年09月22日

大阪てら子 17 Flash で時計大会に参加してきました。

teraco_clock.jpg

今回はTeraClock公開と共にテーマとして「時計」とあったんですが、「時間」が関わるものであるなら何でもいいってことで、ドラムマシーン的なものを作りました。

注) ドラムマシーンながらもリズムがガダガダにずれます。

レポ的なものは、
Mr.littleBIGのUSKさん
stid blogのカッシーさん
ちゃぶ台メモのちゃぶ台さん
がまとめてくださってるのでご参照あれ。

作ったものの解説的なもの

テンポ（BPM）を計算してイベントを発生

60 / テンポ（四分音符） * 音符の長さ

例えば、BPM60で、4分音符とした場合、

  1. Math.round(60 / 60 * 1 * 1000)

となります。

1000をかけてるは、Timerクラスに突っ込むためです。音符の長さに関しては、4分音符を1、8分音符を0.5、16分音符なら0.25といった具合。今回は8分音符のタイミングでTimerイベントを発生させてます。

バスドラ、スネア、ハイハットが配置されてるかチェック

８分音符ごとに発生させたイベントに対して、それぞれバスドラ、スネア、ハイハットの位置に♪が配置されていたら、それぞれのイベントを発生させる。

音の出力とアニメーション

バスドラ、スネア、ハイハットそれぞれのイベントに対して、音の出力とアニメーションを追加してます。アニメーションに関しては、右に貼っているActionScript 3.0 アニメーションより、フォーワードキネマティクスという章を見ながらあーだこーだと。

実装

あとは、とにかく動け（笑）をモットーにあーだこーだとスパゲティーなアクションスクリプトを書き書きしました。

今回の大阪てら子の感想

「時計」といっても人によって作ってくるものは多種多様で、それを見ているだけで楽しかったです。今回はちゃぶ台メモの人がとっても魅力的なものを作ってきていたのが印象です。※そのうちUPされると思います。
※追記 ホネホネUPされました。

アイデアというのが凄い重要なわけですが、アイデアだけに注目していたら勉強会に出てる意味がないので、自分の場合はしっかり技術や制作方法を盗んでいかないと！って思いました。

ってことで参加した皆様是非是非ソースのUPをご期待しております。





見なきゃ良かったよママンと思うスパゲティーsrc一式(zip)

hostsファイル設定のメモ

PHP/システム関連

2008年09月17日

hostsファイルってなに？

hostsファイル（ホスツ-）とは、TCP/IPを利用するコンピュータにおいて、ホスト名とIPアドレスの対応を定義するためのテキストファイル。
テスト環境を本番環境と同じホスト名で表示したい時に便利。
注）FTPのIPアドレスとは異なるらしいので注意。アイルを使用した時にMovable Typeのインストール絡みでhostsファイルを設定したんですが、IPに関しては問い合わせしてくださいとのこと。

hostsファイルがある場所

XP,Vistaともに↓にあるはず。

C:\Windows\System32\drivers\etc

テストしてみる

http://www.yahoo.co.jp/を開くとgoogleのページを開くようにする

  1. 64.233.167.99 yahoo.co.jp
  2. 64.233.167.99 www.yahoo.co.jp

↑をhostsファイルに記入
※64.233.167.99はgoogle.co.jpのIP

Vistaにてhostsファイルを開く方法

Vistaは管理者権限がどうたらこうたらと怒られてしまうので、

アクセサリ - メモ帳（右クリック） - 管理者として実行

として開く。

hostmemo.jpg

メモ帳を開いたら、

ファイル - 開く※すべてのファイルにしないとhostsファイルは出てこない。

これでVistaでもメモ帳にて編集できる。

FPS2008 in大阪にいってきましたレポ

FLASH勉強

2008年09月14日

FPS2008というFLASHのセミナーイベントいってきました。スピーカーを担当された方々はFLASH界の有名人ばかり！？といっても、実はわたくし業界のことを余り知らなくて誰がどんな作品を作っているとかほとんど知りません。。。ということで業界を知る目的もありつつ参加してきました。

スピーカーの方々の発表内容メモ

まつむら　まきお氏

FLASHを使ったお絵かきについて。ブレンドモード+画像テクスチャーを使うと味のある絵が描けますよっという内容

まつばら　あつし氏

FLASHを使ったお絵かきについて。筆圧OFF、スムージング１００でいい感じのラインが描けますよという内容。

笠居トシヒロ氏

FLASHを使ったお絵かきについて。ペンタブに挫折した方々を救済しますよって内容。FLASHって元々はお絵かきツールから始まったのを初めて知った。

青木イチロウ氏

実績紹介と貴重なFLAファイルを見せてくださりました。フレーム直にスクリプトを記載する制作手法が意外だった。

大重美幸氏

AS3.0のイベントまわりについて。僕は大重さんのActionScript3.0入門ノートでASを覚えた人なんで実物が見れて嬉しかった。※名前ですが「ヨシユキ」と読むそうです。「ミユキ」だと思ってた人は僕だけじゃないはず。

木曽　隆氏

iPhoneとFLASHの連携。移動平均。xmlSocketなどなど。この辺の分野はなかなか手がだしずらい。FLASH以外の技術の勉強も必要だなーと感じた。

A.e.suck氏

モーションキャプチャ。動画から手書きトレースしてアニメーションを作る方法。凄い手の込んだ作業になってしまうけど、使えるTipsだなと思った。

森 巧尚氏

Box2DFLASHAS3の説明。ちらっと触ったことがあるのでなるほどーっと理解できた。

寺井　周平氏

1年前、FLASHがさっぱり分らなかった僕は、trick7のブログアーカイブを全部読んで勉強したこともあり、結構神様的存在。モチベーションについて語られていた。アイデアノートを少しご披露されていたが、自分もアイデア浮かんでは3日後には忘れてるのでアイデアノート作ろうと思った。

西田　幸司氏

一人で制作するにあたっての苦労や戸惑いなど。AS3でのクラス制作手法にコンプレックスを感じていたなど。こんな偉大な作品を作られる方でもやっぱり悩むのだなっと。HPF←このサイト見た時、凄いショック受けたんですが、西田さんが作ってたんですね。やっぱ凄いや。

サブリン氏

タッチパネル（タッチではなく空間センサー）とFLASHの開発について。制作の裏話が面白かった。さらさらと技術的な話をされていたが半端ない技術力だ。。

野中　文雄氏

Matrix(行列）について。僕は行列さっぱりなんですが、何だか理解できそうな気がした。さすがFLASHの大先生。FLASHを触り初めて最初に知った有名人だったのでちょっと感動した。

よしだ　ゆたか氏

FLASH LITEを使った携帯コンテンツ。トリをかざるにふさわしい笑いをゲットされていた。アイデアの出し方がやっぱり上手いなーと思った。

その後懇親会

シャイは僕は、誰とも喋らず一人ポツンと隅っこで。。。。っとならないように勇気だして色んな人に話しかけたりしてみた。名刺交換してくださった皆様ありがとうございます。

スピーカーの皆様、スタッフの皆様、参加された皆様、お疲れ様でした！

flashlog.txt やっと出力できた。

FLASH勉強

2008年09月11日

flashlog.txtが上手く出力できなくて困ってたんですが、原因は単純なことでした。

出力されなかった原因

そもそもflashlog.txtを理解していなかった。

flashlog.txtに何も出力されねー＞＜と嘆いていたんですが、flashlog.txtにはtraceコマンドにてトレースされたものが出力されるという基本的なことを見逃していた。

trace("ごろにゃん");

これでflashlog.txtには「ごろにゃん」と出力される。


debug playerを使ってるつもりで使っていなかった。

DL先：http://www.adobe.com/support/flashplayer/downloads.html

↓下３つのMac用はとりあえず置いといて、上３つはそれぞれ、IE用、Firefox用、ローカルのswf用となっています。この3つ目のローカルのswf用で大きなミスを犯していました。

debugplayerDLpage.jpg

swf右クリック→プロパティより使用するプログラムをダウンロードしてきたsa_flashplayer_9_debug.exeに変更してやらないといけない。
※通常デフォルトのflash playerになってるはずです。debug playerが表示されない場合は、参照ボタンよりプログラムを指定。

swfnoprop.jpg

ちなみにFirefox用にて、Firebugのコンソールを利用中にしていると、flashlog.txtには出力されない模様。Flash Switcherを使用している場合は、ちゃんとdebug playerを選ばれていないという単純ミスもよくあること。。。

debug playerダウンロード後の設定について

mm.cfgファイルの配置

debug playerをダウンロードしてきたらmm.cfgというファイルを設定しなくてはいけない。
http://livedocs.adobe.com/flex/201_jp/html/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Book_Parts&file=logging_125_04.html#40735

mm.cfgというファイル名でテキストエディタにて

  1. ErrorReportingEnable=1
  2. TraceOutputFileEnable=1
上記2行をつけたせばOK
  1. ErrorReportingEnable=1
  2. TraceOutputFileEnable=1
  3. PolicyFileLog=1
  4. PolicyFileLogAppend=1
ポリシーファイルの取得をしたい場合は上記のように2行つけたしで。


mm.cfgの配置場所については、上記adobe公式にあるようにOSによって異なる模様。

Vistaの配置場所が記載されてないようですが、

C:\Users\ユーザ名
にmm.cfgを配置します。

flashlog.txtが出力される場所

C:\Users\ユーザ名\AppData\Roaming\Macromedia\Flash Player\Logs
です。

ログが出力されてるかテスト

LogTest.jpg

↑を開いてflashlog.txtが出力されていればOK!

ThunderBoltAS3Consoleでログをキレイに見る

ThunderBoltAS3Console v2.01betaでFlashのデバッグ@SCRATCHBRAIN

AirアプリのThunderBoltAS3Consoleを使ってかっこよくデバッグしたいなーと思ってたんですが、どうも上手くログ取得できない。。とりあえず保留。

CSSハック　メモ

WEBデザインメモ

コーディング完成！！と喜ぶも毎度ながらIEだけがぁぁぁぁ！！っということでメモ。

スターハック

  1. /* IE6以下に適用 */
  2. * html ○○○○ {
  3. }

小粋空間に載ってたハック

  1. /* IE7に適用 */
  2. *:first-child+html ○○○○ {
  3.  
  4. }

アンダースコアハック

  1. /* IE6に適用IE7?? */
  2. ○○○○ {
  3.     margin:10px;
  4.     _margin:10px;
  5. }

崖っぷちWEBデザイナーブログ　リニューアル！！

ブログ構築過程

2008年09月06日

重い腰をあげてブログリニューアルしました。

Windows Vista

Firefox3.01
IE7
Safari3.1.2
Google Chrome0.2

Windows XP

Firefox2.0
IE6
Safari3.1.1

一応上記のブラウザと環境でチェックしましたが、見れる程度には表示されてるぽいです。 なんかおかしいぞ！ってところあれば是非ご一報をよろしくお願いします。

リニューアル作業にあたって

デザイン

FireWorksでデザインを仕上げました。PhotoShop好きっ子だったんですが、今はFireWorks好きっ子です。普段デザインはやらないのでかなり苦戦でした。2,3個没にしてキリがない！これでいいや！って感じで今に至ります。

コーディング

久々１からHTMLやらCSSをさわりました。IE6だけ問題児。ハミ子。IEが製作者から嫌われる理由がよくわかった。。。

Movable Type

システムテンプレートが非常にめんどくさい。。。「Movable Typeなら簡単にCMSが出来ますよ！」っていう売り文句が未だ信じられない。。

drecom RSS ブックマーク

ブログ構築過程

ブログカスタマイズ中

ブログ構築過程

ちょっとの間大崩れするかもです。 old_y-tti_blog.jpg
画像テスト

h3テスト

あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ

h4テスト

あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ

コード表示テスト
  1. package classes
  2. {
  3.     import flash.display.Sprite;
  4.     import flash.text.TextField;
  5.     import flash.text.TextFormat;
  6.     import flash.utils.getTimer;
  7.     import flash.events.Event;
  8.     
  9.     public class Fps extends Sprite
  10.     {
  11.         private var time :Number;
  12.         private var frameTime :Number;
  13.         private var prevFrameTime :Number = getTimer();
  14.         private var secondTime :Number;
  15.         private var prevSecondTime :Number = getTimer();
  16.         private var frames :Number = 0;
  17.         private var fpsnum :String = "...";
  18.         private var tf:TextField;
  19.         private var iBar:Sprite;
  20.         
  21.         public function Fps()
  22.         {
  23.             init();
  24.         }
  25.         
  26.         private function init():void
  27.         {
  28.             
  29.             iBar = new Sprite;
  30.             iBar.graphics.beginFill(0x990033 , 1);
  31.             iBar.graphics.drawRect(0 , 0, 100 , 15);
  32.             iBar.graphics.endFill();
  33.             addChild(iBar);
  34.             
  35.             tf = new TextField();
  36.             tf.defaultTextFormat = new TextFormat(null , 9 );
  37.             tf.textColor = 0xFFFFFF;
  38.             
  39.             addChild(tf);
  40.             
  41.             
  42.             addEventListener(Event.ENTER_FRAME,onEnterFrameHandler);
  43.         }
  44.  
  45.         private function onEnterFrameHandler(event:Event):void
  46.         {
  47.             time = getTimer();
  48.  
  49.             frameTime = time - prevFrameTime;
  50.             secondTime = time - prevSecondTime;
  51.             
  52.             if(secondTime >= 1000) {
  53.                 fpsnum = frames.toString();
  54.             // if( VERBOSE ) trace( "FPS: " + fps );
  55.                 frames = 0;
  56.                 prevSecondTime = time;
  57.             }
  58.             else
  59.             {
  60.                 frames++;
  61.             }
  62.             
  63.             prevFrameTime = time;
  64.             tf.text = ((fpsnum + " FPS / ") + frameTime) + " MS";
  65.             iBar.scaleX = iBar.scaleX - ((iBar.scaleX - (frameTime /10)) / 5);
  66.         }
  67.     }
  68. }
あああああstrongテストあああああ
blockquotetest

ブログカスタマイズ中の続きを読む

Bitmapdataのお勉強をしたかった。

FLASH勉強

2008年09月03日

Bitmapdataのお勉強。
BitmapTest2.jpg
※クリックで写真爆破→写真配置→爆破→配置・・・

今年の1月に行われた第11回てらこにて、
さくーしゃさんがライブコーディングしたやつ
当時、ソース見てもサッパリ？？？？？？だったので
今になってもう一度見返してみた。

おお。何となく分かるぞ～！！ちょっと嬉しい。


で、それぞれのパーティクルをピクセルではなく、
Bitmapdataに置き換えてやってみました。


ん～。なかなか気持ちい。



■追記
BitmapTest2_2.jpg
どうもIEだけフレームレートが遅い。
私のIEがダメなのかどうか。。
FirefoxとGoogle Chromeは普通に速度出てるぽい。


src

< « 2008年08月 | main| 2008年10月 » >
Page Top
Adobe Flash CS3 詳細! ActionScript 3.0 入門ノート (DVD-ROM付)
Adobe Flash CS3 詳細! ActionScript 3.0 入門ノート (DVD-ROM付)
クラスで書けるようになった。配列のpushとかspliceとかsliceとかややこしい部分の辞書代わりにも使ってます。XML関係もこれで覚えた。
ActionScript 3.0 アニメーション
ActionScript 3.0 アニメーション
vx,Math,cos,sinとか???な数学的な部分をこの本で理解できた気がします。逃げたいジャンルだけどFLASHに必須なジャンルなのよね。。
Adobe Flash CS3 詳細! ActionScript3.0入門ノート2 (CD-ROM付)
Adobe Flash CS3 詳細! ActionScript3.0入門ノート2 (CD-ROM付)
ActionScript応用への第一歩。ただこれを読む前に入門ノート１を先に読んでおいた方がよさそう。ASの世界が広がった気がする本です。
Flash Creative Workshop
Flash Creative Workshop
FLASHを始めて右も左も分からない時に救世主となった本。FLASHサイト制作法がなるほど！っと。ActionScriptバリバリの人はスルー。
FLASH OOP for ActionScript 3.0
FLASH OOP for ActionScript 3.0
FLASHの「今の主流」を知ることが出来る本。筆者の方々は総勢10人以上でかつ現在活躍中の方々ばかりなんでミーハー的な読み方もありかも。