Flash(); - lastdigsound.spiraldelight.com

http://lastdigsound.spiraldelight.com


flash習作、の続き。
仕事の合間とかに作ってました。
Last.fmのサービス使った音楽検索。
自分のLast.fmアカウント入力→アーティストサムネイルクリック→レコ屋などへリンク。

index.html?User=以下に自分のLast.fmのユーザー名入力すると入力が省けます。
■サンプル
http://lastdigsound.spiraldelight.com/index.html?User=spiraldelight

Flash(); - [FL] BackupWin.jsfl

今度はFlash版を作成。


Flash(); - [AS3,PHP,XML]BlogParts制作のメモ

ブログパーツでやってる事の備忘録を色々。

■レコ屋リサーチ
お気に入りから色々開いてパラメータなどを確認。
http://www.spiraldelight.com/blogparts/recordShop/recordShop.html
これはエクセルのデータを作ってHTMLに書き出したもの。
まだまだ他にも世界中たくさんあって、
とりあえず日本語 Recordシートとmp3_データの上から15個を入れてます。

以下勉強メモになります。
■Flash→PHP→XML
サーバーサイド絡みを少しやってみました。
Flashの方でsendToURLでPHPに文字列を送りそれをxmlで保存。
「search」か「open」の検索ボタン押した後
そのxmlをFlashでまた読み込んでカウントを動的に表示。
下記はアナログバージョンだけのデータの保存の仕方。

○01_Flash
AS2だとsendAndLoadでAS3だとsendToURL。
スクリプトはタイムラインとクラスで混合してます。
下記はフレームアクション。

文字列をPHPに渡すソース
var pathPHP:String = "データ送るPHPのアドレス.php";
var request:URLRequest = new URLRequest(pathPHP);
var variables:URLVariables = new URLVariables();
//phpに渡す変数入れる。phpでdiggedArtistとarShopNameの文字列を受け取る。
variables.diggedArtist = digArtist;
variables.arShopName = arShopName[urlNum];
request.data = variables;
request.method = URLRequestMethod.POST;
sendToURL(request);

sendToURLでヘルプ調べると書いてありますが、
「URL リクエストをサーバーに送信しますが、応答は無視します。」
URLLoader.load() メソッド使ってイベント経由で
進捗具合とかを調べるのが確実っぽいです。

○02_XML
<?xml version="1.0" encoding="UTF-8"?>
<dig>
</dig>
XML宣言とルートエレメントだけ書いてとりあえずサーバーにあげます。
パーミッションは666。
下記のPHPで文法を組んでくれます。

○03_PHP
ソース
<?php
$file_name="書き込むXMLのPATH.xml";
$file = fopen($file_name, "r+") or die("error");
flock($file, LOCK_EX);
//flashからPOSTで受け取る
$string = $_POST["diggedArtist"];
$string2 = $_POST["arShopName"];
flock($file, LOCK_UN);
$data = "";
//1行づつ調べて正規表現
for($i=1;!feof($file);$i++){
$line = fgets($file);
if(!preg_match("/<¥/dig>/", $line)){
$data .= $line;
}
}
//XMLで吐き出す形、ここでXMLの文法を組みます。
$data .= "¥t<searchlist>"."¥n"."¥t¥t<artist>".$string."</artist>"."¥n"."¥t¥t<shop>".$string2."</shop>"."¥n"."¥t</searchlist>"."¥n";
//最後にdigタグ閉じ
$data .= "</dig>";
rewind($file);
fwrite($file, $data);
fclose($file);
?>


会社のサーバーサイドやるプログラマーの人に色々聞いて、
使うユーザーがたくさんいる場合
ファイルが壊れる事があるから注意と言われました。
ユーザーが多数使う場合、phpのライブラリがあるからそれ使用した方が
安全かつ便利らしいです。
何千何万人とかいったらDB使用なのかな。
でもこのブログパーツ需要無さそうなんでとりあえずこれで使用してます。
一応正常に動いてる。


○04_XML
Flashの方で表示してないですが後でやろうとしてる事があるので
アーティスト名と選択したお店も取得してます。
XMLではこんな風に追加されていってます。
<?xml version="1.0" encoding="UTF-8"?>
<dig>
<searchlist>
<artist>minilogue</artist>
<shop>Thirtytree</shop>
</searchlist>
<searchlist>
<artist>afx</artist>
<shop>Guinness</shop>
</searchlist>
<searchlist>
<artist>timmy</artist>
<shop>Amazon</shop>
</searchlist>
</dig>



○05_Flash(フレーム)
カウントをとる処理。
XMLの読み込みのやり方はたくさんあると思いますが、
AS3でとりあえず初めてやってみました。
searchlistタグのlength取得してます。
ここには書いて無いですが、
最後にアナログとデジタルの検索数を足して表示させてます。
var xml:XML;
var pathXml:String="読み込むXMLのpath.xml";
var urlXml:URLRequest=new URLRequest(pathXml);
var xmlLoader:URLLoader=new URLLoader(urlXml);
var Count:int;
xmlLoader.addEventListener(Event.COMPLETE,onLoadXml);
function onLoadXml(e : Event) {
xmlLoader.removeEventListener(Event.COMPLETE,onLoadXml);
xml=new XML(xmlLoader.data);
Count=xml.searchlist.length();
}

これで配列traceすれば一応アーティスト・お店を取得できる事が確認できました。
for (var i:int =0; i<xml.searchlist.length(); i++) {
arArtistXML.push(xml.searchlist.artist.children()[i]);
arShopXML.push(xml.searchlist.shop.children()[i]);
}



■Player10のFileReference

カヤックさんの逆音で使われてる「mp3 upload」部分だったり、
Flash+αで使われてるの見ました。
boreal-kissさんのところで
FlexibleFactoryの簡単にmp3をロードできるパッケージを発見。
ここのMP3FileReferenceLoaderLib.zipを一式ダウンロードして
MP3FileReferenceTest.asを少しいじり、
SoundChannelクラスのstopを追加して使用してるだけです。
下記ソースではmcSoundsにクラスを割り当ててます。
スタート、ストップはフラグで制御。
あまりよくないと思いますが、
mcのstartとstopの表示切り替えはvisibleでやっちゃってます。
フラグはボタン押した後では無く、
音源をロードしてから変えてます。

この機能は検索に意味が無いのですが、
音楽繋がりでなんとなく追加した機能です。
一応ソース。
package {
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.net.FileFilter;
import flash.net.FileReference;
//
import flash.media.SoundChannel;
//
import org.audiofx.mp3.MP3FileReferenceLoader;
import org.audiofx.mp3.MP3SoundEvent;
public class MP3FR extends Sprite {
private var loader:MP3FileReferenceLoader;
private var fileReference:FileReference;
public var isPlaying:Boolean=false;
public var channel:SoundChannel;
public function MP3FR() {
mcSounds.mcStop.visible=false;
loader=new MP3FileReferenceLoader();
loader.addEventListener(MP3SoundEvent.COMPLETE,mp3LoaderCompleteHandler);
fileReference=new FileReference();
fileReference.addEventListener(Event.SELECT,fileReferenceSelectHandler);
mcSounds.addEventListener(MouseEvent.CLICK,clickHandler);
mcSounds.buttonMode=true;
}
private function clickHandler(ev:MouseEvent):void {
if (isPlaying) {
isPlaying=false;
channel.stop();
mcSounds.mcStop.visible=false;
mcSounds.mcPlay.visible=true;
} else {
fileReference.browse([new FileFilter("load mp3 file","*.mp3")]);
}
}
private function fileReferenceSelectHandler(ev:Event):void {
loader.getSound(fileReference);
}
private function mp3LoaderCompleteHandler(ev:MP3SoundEvent):void {
isPlaying=true;
mcSounds.mcStop.visible=true;
mcSounds.mcPlay.visible=false;
channel=ev.sound.play();
channel.addEventListener(Event.SOUND_COMPLETE, soundCompleteHandler);
}
private function soundCompleteHandler(ev:Event):void {
isPlaying=false;
channel.stop();
mcSounds.mcStop.visible=false;
mcSounds.mcPlay.visible=true;
}
}
}




■正規表現、置換メモ
スペースを+に変換。
var digArtist:String= "ユーザーが入力した文字列";
var artistPattern:RegExp = new RegExp(" ");
digArtist = digArtist.replace(artistPattern, "+");

http://www.jetsetrecords.net/index.php?P=search&L=JP&mode=from_top&select=artist&search_key=Aphex+Twin
jetsetRecordsの例だと「Aphex Twin」とアーティスト名入力して、
search_key=Aphex+Twinと「+」でパラメータを送っていたので「+」に変換。
置換しなくても勝手に「%20」とかにしてくれて検索できるのですが、
ほとんどのレコ屋は+で文字列繋いでたので一応対応しておきました。


「/」を「」に変換(なくす)。
var digArtist:String= "ユーザーが入力した文字列";
var artistPattern2:RegExp = /(¥n*)¥/(¥n*)/ig;
var result2:Object = artistPattern2.exec(digArtist);
while (result2 != null) {
result2 = artistPattern2.exec(digArtist);
digArtist = digArtist.replace(artistPattern2, "");
}

他にもXMLのタグに影響する「<」「>」は禁止にしています。

こちらのブログを参考にさせてもらいつつ作成。


■navigateToURLでいっぱいウィンドウ開く

普通にforループで大丈夫かと思ったら、たまにXMLの書き込み時に失敗してました。
PHPの処理が間に合ってないのかも。一度XMLのパーサエラーになりました。
エンターフレームでカウントさせて
時間差でリンク先を開いて対応してます。

Flash(); - [AS3]Last.fm API 2



(内容)
前回のに加え、エフェクトモードや世界地図を追加。
「send」ボタンを押した後、
そのユーザーが住んでる地域に世界地図がズームイン。
「effect」ボタン押すと色が変化。
ユーザー画像クリックでLast.fmのそのユーザーページに飛ぶ。
スクリプトモーションもエフェクトが目立つようにちょっと調整。
など追加。


(制作メモ)
Last.fmの画像はLoader使って動的に読み込めるけど、
そのままだとBitmapDataのdraw()を使用できない。
■ASで別ドメインの画像を読み込むときの注意点
http://d.hatena.ne.jp/nitoyon/20071112/crossdomain_img
http://blog.boreal-kiss.com/2008/05/09185722.html

Last.fmのcrossdomain
世界のcrossdomainたくさん

対策としては一回PHPを経由して画像を読み込む。
あたかも自分のサーバーにあるかのように見せかけるやり方。
Fla読み込みの部分、
var phpPath:String = "http://www.spiraldelight.com/blog_file/flash/as3/lastfm/"
var thumbnail : URLRequest = new URLRequest(phpPath+"lm.php?image="+artistdata.artists[i]['thumbnail']);
こんな感じでimageパラメータを渡して読み込む事ができた。
PHPの方は会社の先輩に教えてもらいました。


ユーザーの国情報はこれで取得できる、
世界地図がズームする値と座標は自分で調べて直接入力。
国はJapan、United States、United Kingdom、France、、238ヶ国もある。
かなり量あるんでまだ30ヶ国くらいしか設定してない。
とりあえずヨーロッパ単位にしたりブラジルとチリを同じ座標とサイズにまとめて設定。
世界地図はスムージングかけたらめちゃくちゃぼけたのでかけてない、
でも大きい画像にしたらマシンにかかる負荷が大きい。

エフェクトについてはブラーかけてColorTransformで色をいじって
ブレンドモードしてるだけです。
自分の環境だと問題無いけどBitmapDataが横1400px縦1100pxもあって処理重いかも。

アーティストとユーザーの画像はトリミングされた状態ではこない。
今ユーザーの画像は縦と横のサイズを無理やり設定。
今後はマスクかけて対応したい。
他にもまだまだやりたい事があってこのLast.fmのサービス使って
レコ屋とかmp3販売してるサイトと絡めていきたいと妄想中。
ソースも整理しないと、ローディングとかもやってない。

音についてはダブミニマルみたいなループを作成。

それとFlashPlayer10、すごいなぁ。
色々と機能取り上げてるブログ見させてもらいました。


※とりあえずβ版



Flash(); - [AS3]Last.fm API



(内容)
ユーザー名(Username)を入力後「send」ボタンを押す。
デフォルトはspiraldelightを入れてます。
そのユーザーが聞いてるTOP50のアーティストのサムネイルをロード。
これ使ってますが、artistdata.artistsの配列の中身は
50個までしかひっぱってこれないようです。
登録さていないユーザー名を入力するとエラーになります。
サムネイルが登録されてないアーティストは画像無し。
最高で3ユーザーのTOP50のアーティストのサムネイルがロードできます。

入力後そのユーザーのご近所さん(入力したユーザーの聞いてる音楽の趣味が近い人)の
ユーザー名(Neighbours)を取得。
これを使用していて、テキストフィールドにご近所さん5人を表示します。
これコピペしてUsernameに入力すると
またその人のご近所さんの5人のユーザー名を返します。

「change」ボタンでサムネイルの並びが変わる。
「play」・「stop」で音楽の再生・停止。音にサムネイルが反応します。
音は適当に作りました。
「kill」ボタンでデータをアンロード。


(メモ)
最近音楽SNSのLast.fmを始めた。
AS3ライブラリがあって、仕事も落ち着いてきたので勉強がてら触ってみました。
XMLデータをひっぱってきて表示。
ソースはhttp://code.google.com/p/lastfm-as3/にあります。
「kill」ボタンの処理がはまった。
ガベージコレクション、メモリリークの問題とかちゃんと覚えないとまずいなぁ。
Adobe AIR コンテスト2008でFlex賞取ったJukingAirっていう
めちゃくちゃすごいのありますが、これとは視点変えて今度また触ってみる予定。


※とりあえずβ版


Flash(); - [AS3]SoundSpectrum


(内容)
「play」で音再生。
マウスを左右に持っていくとパンできる。
RCAのオーディオケーブルと一緒でRed(右)、White(左)となってます。
ステージの真ん中にマウス持ってくると音が小さくなる。
ステージクリックすると丸と線の切り替えができる。

(メモ)
試してる人はちょこちょこ見るけど覚えたかったのでやってみました。
Last.fmのサンプルにも絡めたかったし。
参考にしたのはActionScript3 Cookbookのチャプター15のサンプル
ここのExampleを触ってみる。ただこれこのままだと動かない。
import忘れとかいきなりエラーでる。
いきなり出だし不調で初心者に厳しい本だ。
他のサンプルもしかり、この本なんなんだろ。

SoundMixerクラスのcomputeSpectrum()メソッド、
ヘルプ見つつ勉強。

■第一引数_outputArray:ByteArray
ByteArray オブジェクト。
ByteArray オブジェクトのサイズは 512 に固定され (値は浮動小数値)、
最初の 256 個は左チャンネル、次の 256 個は右チャンネル。

■第二引数_FFTMode:Boolean
デフォルトはfalseでtrueにするとフーリエ変換をする。
サンプルはフーリエ変換はしてません。
正直これ見てもよくわからない。
この変換の中身は複雑過ぎる、
ブラックボックス的なところとスルーして実装。

フーリエ変換すると、
周波数スペクトルを返す。低周波数は左、高周波数は右。
ByteArrayのreadFloatをtraceすると 0.0〜1.0の値が返ってくる。
※追記
0 〜 およそ1.414 (2 の平方根) までみたいです。
http://faces.jp/2008/08/soundmixercomputespectrum10.html


フーリエ変換しないと、
未処理のサウンド波形。周波数は謎(?)。
ByteArrayのreadFloatをtraceすると -1.0〜1.0の値が返ってくる。

■第三引数_stretchFactor:int
サンプリング解像度。
値が0の場合 、サンプリングレートは44.1 KHz
1の場合は22.05KHz
2の場合は11.025KHz
3の場合は5.5125KHz...

44.1KHzは、1秒間を44100個に区切り振幅の値を取得する
(この中では一番正確に表示)。
値を大きくしていくとサンプリングレートが下がるみたいで
結果どうなるのかよくわからないので試してみた。
フーリエ変換して値を大きくしたら波形の振幅が大きくなる。
フーリエ変換しないで値を大きくしたら波形の振幅が小さくなる。
値を大きくすると振幅が大雑把になってくる。
でもなんでフーリエ変換で振幅が変わるんだ。。なんだかいまいち腑に落ちない。
これASの知識とか別の知識になってきてる。


(音系参考)
■「AS3で扱うサウンド」
FlashOOPのサイト、バスキュールの方の解説。すごい丁寧にまとまっています。
留意点のところかなり致命的だなぁ。試したけど音は鳴ったままで描画が止まった。
※下記の音鳴らすとswfの音は再生されたままで動きが止まる。
Go to Beatport.comGet These TracksAdd This Player


■trick7さんのブログもとても参考になります。
http://www.trick7.com/blog/2007/12/12-093919.php
http://www.trick7.com/blog/2006/06/30-101506.php

こちらのブログに「音程 と ビート しか (多分) とってない」と書かれている。
音ファイルは解析できないっぽい。Flight404はXMLに最初吐き出してたのを知りました。
てことはダイナミックレンジがでかい方が単純におもしろい絵になる。
それとブレイクビーツみたいのとかビートが複雑なもの。
と考えたけどサンプル音源は適当な4つ打ちを作ってテスト。

■ドイツ人Andre MichelleさんのLab。
この人TB303、TR909、TR808とかFlashで作ってる。すごすぎる。


こちらのブログの方がPlayer10で音生成をやっていました。
そのうちカオスパッドとかFlashで出てきそう。。
それと
AS3のSoundMixer.computeSpectrumの問題点と対処法
という記事も書かれていました。try/catchで回避。

■音のループに関してはこちらのブログに書かれてました。


(Processing版)

ProcessingSample

ついでにプロセッシングも超軽く触る。
プロセッシングの基本的な事も知らないので
かなり手探り状態でサンプルみながら動かしてみた。

ESSというサウンドライブラリを使用して、
Flashと同じような音に反応する簡単な波形を生成するサンプル。

読み込むファイルは[data]フォルダ作ってそこに入れる。
mp3ファイルも読めるみたい。
FlashとProcessingの音を一緒に鳴らしたら止まらなかった。
プレイヤー自体が違うからかな。

参考
http://hysysk.blogspot.com/2007/08/ess-vs-minim_09.html
http://d.hatena.ne.jp/tokobayashi/20080506

(ソース)

Flash(); - swfからScreenSaverを作るソフト比較

軽く比較してみました。
というのもいつも使ってるScreenTimeがLeopard未対応。

※<2009追記>
ScreenTime Mac OS X版(3.6.2J)がリリース。Leopard対応しました。


ScreenTime
日本語に対応。国内外で一番シェアがあると思うけど問題もいくつかある。
MacのLeopardには未対応。
未対応どころか実行するととても危険。
現状報告されているバグとしてはインストーラと同じ階層にあるファイルと、
インストーラを内包するフォルダが消えるため、
インストーラをそのままzip,sit,hqxなどのアーカイブにされますと、
ハードディスク内のデータを消失する可能性がございます
現状この問題への解消策はなく、…
http://www.screentime.jp/faq/index.html#FAQ1_07

Player対応状況は9.0.20までの動作確認済みでそれ以降はおかしくなるみたい。
AS3にも対応していないようなもの。



SWF2Saver
英語のみだけど使い方はシンプル。
Leopard (OSX 10.5)対応、実際Mac使って試したらちゃんと表示された。
Playerも9.0.124対応。
AS3も試したら動いた。TweenerやPV3Dも動作する。
ソフト自体がめちゃ安い。
Proは$34.95。Standardは$19.95。
Pro版はなぜかMACしかなくてWIN用とMAC用の
スクリーンセーバー両方書き出せるのでお得。

設定は簡単だけどScreenTimeほど色々カスタマイズができない。
インストール画面があまり好きじゃない。

一応海外のサイト、http://colettexgap.com/
実際にこのソフトで作成されたスクリーンセーバーも配布されてる。



GIZMO
ガジェット作成ツールだけどswfからスクリーンセーバーも作成できる。
近日公開予定と書いてある。
もう2年くらい前だけど会社の人が問い合わせた時予算が合わず却下。
なんかライセンスだけ買ってこっちで制作するのと、
ここの会社で作ってもらえたりしたりするようなのがあるそう。。
詳しくはわからない、今また値段も変わってると思うので問い合わせるのが早い。
有名なとこでユニクロと日清食品のFreedomもギズモ製だった。

対応環境は一番良い??
ユニクロの動作環境説明が超シンプル。



Instantstorm
英語のみ。
フリーソフト。使い方も簡単、Player9にも対応。
ただWINにしか対応してないので論外。



◎検証しきれてないけど無理やり結果。

FlashPlayer8以下,Leopard (OSX 10.5)未対応でOKな時。
→ScreenTime

FlashPlayer9,AS3やLeopard (OSX 10.5)に対応させなければならない時。
→SWF2Saver

予算さえあれば
→GIZMO


※<2009追記>
fla:ver購入しました。既に2、3個リリースしています。
srmさんありがとうございました。


Flash(); - [AS3]テスト

新年好。
AS3が発表されてからけっこう経つけど
今年から色々触り始めようと思って、
ちょっとテストとメモ。
良い書き方とかも全然わからず、
でも書かないと覚えないのでCS3のヘルプや本を読みながら
試行錯誤しながらやってみる。
□swf


AS3からプログラムで作成したモーションが
クイックタイムで動作するらしいのでそれもやってみた。
Tweener使って座標はMath.randomで設定してるからどうなるのかと思ったけど
毎回レンダリングする度に違うモーションになった。
ファイルが重かったのでサイズ縮小。
□mov


■ソースメモ
flaファイル、ドキュメントクラスにsample01。
リンケージのクラス部分にDefected、Fabric、BookaShadeと記述。
パッケージ、クラス、型とかから覚える事は山のようにあるなぁ。
今後よく使用すると思われるマウスイベントとかエンターフレームとか、、
あとは無駄にキーボードイベントとかステージとかフィルターをちょっとかけてみる。

Tweenerも今回初めて使ってみた。
今までEnterFrameでアニメーションとかしてたけど
楽だし、汎用性もあるし流行るはずだと思った。
配列ランダムでどれかのイージングがかかる。

↓sample01.as

Flash(); - [XML]flashへの読み込み注意点

Flashで外部XMLを使用するサイトの仕事が多くなってる。
確かに超楽で最初構成とか仕様考えるのが大変だけど、
更新が多いサイトは特にやるべきだと思います。
違いは変数を外に書くか、Fla内に書くかくらいなのか。
でもFlash触る人以外誰でもファイルを触れるっていう利点はでかい。
で注意点。
コメントは,下記のように記述。
<!--トータルの画像数..とか-->

変換しなければいけない文字
& → &amp;
< → &lt;
> → &gt;
" → &quot;
' → &apos;

改行コードはLF(0x0a)として扱われCRLF(0x0d0a)として扱いたい場合は,
&#xD;&#xA;と入力。
ただこの改行コードはHTMLの<p>の改行みたいになっちゃうから
<br>みたいな改行が欲しい場合は
ダイナミックテキストをHTMLとしてレンダリングして
&lt;br&gt;のように記述。
ただTextField.textよりTextField.htmlTextの方が
ちょっとファイル容量が重くなるから注意。


----------------↓2008年追記↓----------------

■改行
XMLの記述で簡単な改行のやり方。

例:)
<![CDATA[コートダジュールの空港。
フランス到着時。]]>

XML記述参考。(IEで閲覧)

Flashでの表示。

上記のように記述するだけでOKだった。
ただXMLファイルの改行コードを「CR+LF」にしちゃうと
2行改行されてはまる。
「LF」にだけにして保存。


XMLのキャッシュ対策も必要ですね。
こちらの方
が書いています。

Flash(); -

以前Flashサイトで使用するBGMを外注で頼んでFlash側で低めで設定していたら
クライアントからは何も言われてなかったけど制作者側から修正きた事がありました。
クライアントが容量にシビアな事もあって音質下げていたけど、
そこでは原曲と余りにも違いがあったし
容量の制限にまだ余裕があったのでので修正対応。
厄介なのがPC内臓スピーカーで音を再生される事、
イヤホンやヘッドフォンで聞くのとは全く別物になってしまう。
そのまま再生すると低音がほぼ聞こえず。

前の記事のmp3gainとかで音量は統一しておいた方がいいかと思います。
SoundクラスのsetVolumeやプロパティの音量編集で音量は調整できるけど、
上げ過ぎると音が割れちゃいます。
WEB標準の音量ってどうなんだろう、
いつも色んなサイトの音を聞いて
大体で設定している気がする。。

About
spiraldelight

Category
Flash(12);
Movie(14);
Sound(17);
Event(22);
Life(8);



RSS





ナウでヤングなレンタルサーバー!ロリポップ!
ソフトバンクBB my BBコミュニケーター // チカッパ! // ファーストサーバ // Speever

| 1/2PAGES | >>