creator note

• Flash Sample
• このサイトについて
• プロフィール

10-28-09

ウィンドウの全体もスクリーンショットできるIE用アドオンSnapCrab for IE

見ているページの表示領域、全体、指定範囲をスクリーンショットでPNGに保存できるInternet Explorer用のアドオン、SnapCrab for IEというのがあります。Sleipnir（スレイプニール）で有名なフェンリル社が、Sleipnirでつかえる機能をIEに移植したもので、ツールバーにあるアイコンをクリックするだけでスクリーンショットが撮れます。また、マウスカーソルに合わせた場所のRGB値を取得できる、カラーピッカー機能もついてます。便利ですねー！

▼SnapCrab for IE
配布元：フェンリル | フリーソフト | SnapCrab for IE

10-27-09

IE5.5、IE6、IE7、IE8を同時に表示確認できるフリーアプリIETester

Internet Explorerに合わせたCSSコーディングほど手間がかかる事はありません。古いWindowsPCをそろえて古いInternet Explorerで確認するのもわずらわしいですよね。。

IETesterというアプリを使えば、IE5.5、IE6、IE7、IE8での表示確認が一度にできます。Windows用ですが、無料で使えるのでダウンロードして損はないと思います。ボクはとても助かってます！＾－＾

▼IETester
配布元：My DebugBar | IETester

10-24-09

ActionScriptでスペクトラムのサンプル

※↑リンク先はポップアップします。音量に気をつけてください。
ここにあったスペクトラムのサンプルをちょこっと改造。コピペしてmp3のパスを書き換えたらとりあえず動きました。ByteArrayクラスがバイナリデータを読み取ったり操作したりすることができるみたいです。
▼参考サイト
ByteArray

http://livedocs.adobe.com/flex/3_jp/langref/flash/utils/ByteArray.html

Flash 9 Sound Spectrum!

http://theflashblog.com/?p=181

SoundMixer.computeSpectrum() stretchFactor変化デモ

http://dev.ekndesign.com/2008/02/16/soundmixercomputespectrum-stretchfactor%E5%A4%89%E5%8C%96%E3%83%87%E3%83%A2/

▼サンプルダウンロード
spectrum.zip

▼このエラーが出たときは、mp3ファイルのパスが間違っていると思います。

Error #2044: ハンドルされていない IOErrorEvent : text=Error #2032: ストリームエラー。
	at spectrum_fla::MainTimeline/frame1()

var s:Sound = new Sound();
var sc:SoundChannel;
var ba:ByteArray = new ByteArray();
var array:Array;

s.load(new URLRequest("my.mp3"));
sc = s.play(0,1000);

this.addEventListener(Event.ENTER_FRAME, spectrum);

var a:Number = 0;
var al:Number = 0;

function spectrum(event:Event) {
	a = 0;
	al = 0;
	graphics.clear();
	SoundMixer.computeSpectrum(ba,true,0);
	for (var i=0; i < 180; i=i+10) {
		a = ba.readFloat();
		al = Number(a.toFixed(3));
		var num:Number = a*360;
		graphics.lineStyle(num/15,0x003333|(num << 8),al);
		graphics.drawCircle(stage.stageWidth/2,stage.stageHeight/2,i);
	}
}

10-23-09

Flashの周りに出る点線を消す方法

かなり限られた条件だと思いますが、ボクが見ているFirefoxではFlsahコンテンツを触ると周りに点線が出るという現象が起きてます。その点線は、テキストリンクや画像リンクに対してクリックしたときと同じ点線が表示します。

点線が出てしまう条件の予想

・Windows XP
・Firefox（Mac版 Firefoxでは出ませんでした。）
・swfobject v2.2　でFlashを表示。

点線を消す方法

根本的解決になるかどうかはわかりませんが、swfobjectでも最終的にはobjectタグをdocument.writeしているので、objectタグに対してoutline: none;としてあげると、ボクの環境でFlashの周りの点線は消えました。

コレでいいのかなー＾－＾；

object{
	outline: none;
}

追記：この点線は、Firefoxでフォーカスがあたっているところに対しての点線でした。見てくれを重視するために、この点線自体を消したい場合は、全体に対してCSSでoutline:noneｔ;とするといいと思います。

10-20-09

ActionScriptのトゥイーン制御ライブラリTweenerの使い方

Tweener（トゥイーナー）とは

例えば、１秒かけてX座標に100pxゆるやかにだんだん加速しながら移動後に、”テスト”と出力する場合。

//ActionScript2
import caurina.transitions.Tweener;
Tweener.addTween([instance],{_x:100, time:1, transition:'easeOutQuint', onComplete:handler});
function handler(){
	trace("テスト");
}

TweenerはActionScript3.0とActionScript2.0で使用する事ができ、インスタンスに対して「だんだんゆっくり止まる」「どんどん勢いよく移動」「びょーんびょーん（？）」と、いろんなイージングが設定できるトウィーン制御ライブラリです。とても簡単なScriptで実現できます！

導入手順

▼まずはGoogle Codeに公開されているライブラリをダウンロード。
配布元：http://code.google.com/p/tweener/
ダウンロードしたzipファイルを解凍すると、「caurina」というフォルダができると思います。それをflaファイル直下、またはFlashの環境設定でクラスパスを追加します。これで準備は完了しました。

Tweenerの使い方サンプルを簡単に説明

import caurina.transitions.Tweener;

この1行は、Tweenerを使うために、ダウンロードしたTweenerライブラリをimportする記述です。ライブラリを管理している環境によって左右されますが、Flashの実行ファイルがある場所に「caurina」フォルダーを置いたら、「caurina」からの階層になります。

Tweener.addTween([instance],{

この1行の[instance]は、トゥイーンして動かしたいインスタンス名をいれます。[] ←括弧は必要ないので、例えば、「myInstance」というインスタンス名のムービークリップを動かすとした時の最初の1行は、

Tweener.addTween(myInstance,{

このようになります。

Tweenerの書き方、ActionScript3.0

import caurina.transitions.Tweener;
Tweener.addTween([instance],{
	x:100,
	y:100,
	scaleX:1,
	scaleY:1,
	rotation:0,
	alpha:1,
	time:1,
	delay:0,
	transition:'easeOutQuint',
	_Blur_blurX:20,
	_Blur_blurY:20,
	_Blur_quality:3,
	_color:0x330066,
	onComplete:onCompleteHandler,
	_bezier:[{x:115,y:115},{x:200,y:200},{x:285,y:285}]
});

Tweenerの書き方、ActionScript2.0

import caurina.transitions.Tweener;
Tweener.addTween([instance],{
	_x:100,
	_y:100,
	_scale:1,
	rotation:0,
	_alpha:1,
	time:1,
	delay:0,
	transition:'linear',
	_color:0xffffff,
	onComplete:onCompleteHandler,
	_bezier:[{x:115,y:115},{x:200,y:200},{x:285,y:285}]
});

トゥイーンの逆再生

import caurina.transitions.Tweener;
Tweener.removeTweens([instance],{
	_x:100,
	_y:100,
	_scale:1,
	rotation:0,
	_alpha:1,
	time:1,
	delay:0,
	transition:'linear',
	_color:0xffffff,
	onComplete:onCompleteHandler,
	_bezier:[{x:115,y:115},{x:200,y:200},{x:285,y:285}]
});

Tweenerのパラメータ

パラメータは必要に応じて足したり減らすことができます。

x:100,  //移動後のX座標
y:100,  //移動後のY座標
scaleX:1,  //X座標への大きさ
scaleY:1,  //Y座標への大きさ
rotation:0,  //回転
alpha:1,  //透明度
time:1,  //何秒かけるか
delay:0,  //トゥイーン開始までの待ち時間
transition:'easeOutQuint',  //トゥイーンのトランジション
_Blur_blurX:20,  //X座標へのぼかし
_Blur_blurY:20,  //Y座標へのぼかし
_Blur_quality:3,  //ぼかしのクオリティ
_color:0x330066,  //着色
onComplete:onCompleteHandler,  //トゥイーン後の処理
_bezier:[{x:115,y:115},{x:200,y:200},{x:285,y:285}]  //ベジェ曲線状にトゥイーンする通過点

BlurをつかってぼかすTweenを使う場合

ブラーを使ってぼかしをTweenさせる前に、フィルター用のライブラリをimportして、いったん初期化をする関数を実行します。

//▼ぼかしフィルターのimport
import caurina.transitions.properties.FilterShortcuts;
//▼ぼかしフィルターの初期化
FilterShortcuts.init();
//▼ぼかしTween
Tweener.addTween([instance],{alpha:1,
	transition:'easeOutQuint',
	time:5,
	_Blur_blurX:20,
	_Blur_blurY:20});

エラーコード

## [Tweener] Error: The property 'x' doesn't seem to be a normal object property of [object Object] or a registered special property.

例えばコレの場合だと、「The property ‘x’」プロパティのXが間違ってますよ。ということですね。これが出たときは、「_x」と「x」の記述違いでした。AS2とAS3とではアンダーバーがいるいらないがありますので、コピペしたサンプルでエラーがでたら、プロパティを見てみましょう。

トゥイーンする動きのトランジションチートシート

どういう動きでトゥイーンするか、transitionに設定する名前が載っているチートシートです。「transition」のパラメータに「easeInSine」とか「easeInOutSine」をコピペしてつかってください。

10-20-09

AfterEffectsでアナモルフィックスのコンポジット設定

友人の結婚式の２次会で流すために動画編集をちょくちょくします。今回は、その素材がアナモルフィックスだったときに、AfterEffectsのコンポジットの設定方法を紹介します。紹介するってことでもないんですけどね＾－＾；

依頼は写真をスライドショーにするのと、コメントに対して字幕をつける内容だったんですが、オープニングのテキストだけをAfterEffetsで装飾しようと思いました。どういうカメラで撮影してきたのかわかりませんが、キャプチャーした動画の素材がアナモルフィックスでした。DV-NTSCは720×480の0.9ピクセル 4:3アスペクト比で、アナモルフィックスの場合も同じなんですが、アナモルフィックス素材自体が16:9に引き伸ばされること前提で撮られている。ということで、カメラのレンズがアナモルフィックスレンズだったということです。見た目は縦長に写ってしまってますが、それは結局出力するものによります。DVDプレイヤーで4:3のテレビで再生すると、上下に黒帯、レターボックスが出ますが、ワイドテレビの場合はぴったり出力されるか、プロジェクターとかも同じで、出力側の設定で今度は左右に黒帯ができるのを避ける事ができます。

この図いうと、１番の画像が通常のDV-NTSCで撮影したCCDの写り方とします。その素材をアナモルフィックスワイドスクリーンにすると、２番の画像みたいに横に伸びてしまいます。３番の画像が、DV-NTSCでアナモルフィックスのレンズやCCDの設定で撮影した素材とします。プレビューする画面によっては縦長に伸びて見えてしまいますが、実際にノンリニア編集ソフトで編集する場合は、４番の画像のように、圧縮されていた左右が横に伸びて、正しい形に出力されます。

Final Cut や Premireなどのノンリニア編集ソフトへ持っていく素材を作るときに気をつけなければなりません。AfterEffectsで設定するとき、コンポジット設定は以下の通りです。
プリセット：NTSC DV ワイドスクリーン
ピクセル縦横比：D1/DV NTSCワイドスクリーン（1.2）
この場合、AfterEffectsで見える正方形ピクセルでの縦横サイズは864×486です。
ピクセル縦横比にアナモルフィックス（2.1）とありますが、プリセットでどれを選んでも選択される事はありませんでした。何に使うんでしょうね＾ー＾；

10-17-09

WordPressでソースコードに色をつけるプラグインの使い方：SyntaxHighlighter Evolved

ソースコードの種類に応じて、部分的にテキストの色を変えるSyntaxHighlighterというライブラリがありますが、WordPressにはプラグインがあるので簡単に導入する事ができます。
▼WordPress以外でSyntaxHighlighterの使い方
ソースコードに色をつけるSyntaxHighlighterの導入方法

使うまでの手順

１．プラグイン新規追加で「SyntaxHighlighter Evolved」をインストール。
２．インストール後「使用する」を押してとりあえず完了。
３．ソースコードに対して、［html］ソースコード［/html］とマークアップ。
※［　］←これは半角で
４．プレビューしてみてください。できましたか？
※この段階で表示できてなかったら、WordPressの外観からheader.phpに<?php wp_header(); ?>と、footer.phpに<?php wp_footer(); ?>が入っているか確認してみてください。もし、入ってなければ、<?php wp_header(); ?>は</head>の直前、<?php wp_footer(); ?>は</html>の直前に記入してください。

通常のSyntaxHighlighterはpreタグに対してnameとidをつけましたが、WordPressのSyntaxHighlighter Evolvedは［　］←この括弧に種類を書いてパラメータを書いていきます。

通常表示

［html］

<html>
<head>
<meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=shift_jis&quot;>
<title>test</title>
</head>
<body>
ほげほげ
</body>

開始する行数の指定

［html firstline=”10″］

<html>
<head>
<meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=shift_jis&quot;>
<title>test</title>
</head>
<body>
<a href=&quot;http://creator.cotapon.org&quot;>Creator Note</a>
</body>

自動でリンク設定されるURLテキストの解除

［html autolinks=”false”］

<html>
<head>
<meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=shift_jis&quot;>
<title>test</title>
</head>
<body>
<a href=&quot;http://creator.cotapon.org&quot;>Creator Note</a>
</body>

右上に出るツールバーの解除

［html toolbar=”false”］

<html>
<head>
<meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=shift_jis&quot;>
<title>test</title>
</head>
<body>
<a href=&quot;http://creator.cotapon.org&quot;>Creator Note</a>
</body>

行数を非表示にする

［html gutter=”false”］

<html>
<head>
<meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=shift_jis&quot;>
<title>test</title>
</head>
<body>
<a href=&quot;http://creator.cotapon.org&quot;>Creator Note</a>
</body>

シンプル設定

［html light=”true”］

<html>
<head>
<meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=shift_jis&quot;>
<title>test</title>
</head>
<body>
<a href=&quot;http://creator.cotapon.org&quot;>Creator Note</a>
</body>

折り畳んで表示

［html collapse=”true”］

<html>
<head>
<meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=shift_jis&quot;>
<title>test</title>
</head>
<body>
<a href=&quot;http://creator.cotapon.org&quot;>Creator Note</a>
</body>

行を強調させる。カンマで複数設定可能

［html highlight=”4,6,8″］

<html>
<head>
<meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=shift_jis&quot;>
<title>test</title>
</head>
<body>
<a href=&quot;http://creator.cotapon.org&quot;>Creator Note</a>
</body>

ルーラを表示させる

［html ruler=”true”］

<html>
<head>
<meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=shift_jis&quot;>
<title>test</title>
</head>
<body>
<a href=&quot;http://creator.cotapon.org&quot;>Creator Note</a>
</body>

Tabの横幅の大きさをかえる

［html tabsize=”10″］

<html>
<head>
	<meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=shift_jis&quot;>
	<title>test</title>
</head>
<body>
	<a href=&quot;http://creator.cotapon.org&quot;>Creator Note</a>
</body>

行数なくしてシンプルに、自動でつくリンクを解除

［html autolinks=”false” light=”true” highlight=”4,6,8″］

<html>
<head>
	<meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=shift_jis&quot;>
	<title>test</title>
</head>
<body>
	<a href=&quot;http://creator.cotapon.org&quot;>Creator Note</a>
</body>

Action Scriptも設定できるかな。

［as3］

mc.onRelease = function(){
	this.gotoAndPlay(10);
}

ActionScriptのバージョンは関係なさそうですね。

package{
	public class test{
			public function test(){
				trace("test");
			}
		}
	}
}

各言語の brush と対応JavaScript（SyntaxHighlighter ver.2.0.320）

10-17-09

Flash Liteのバージョン別docomo、au、softbank対応端末一覧

▼docomo
作ろうiモードコンテンツ：Flash®
▼au
KDDI au: 技術情報 > 機種別情報一覧
▼softbank
softbank MOBILE CREATION

iPhoneにしてからすっかりFlash Liteの情報にアンテナを張ることが少なくなってしまいました。最新のFlash Liteのバージョンは3.1になってるんですねー。＾－＾；

とはいうものの、Flash Lite 1.1でコンテンツを作らざるを得ないのが現状だと思います。しかし、ちょっと凝ったコンテンツを作ろうと思ったらFlash Lite 2.0からじゃないと表現できなかったりします。なんと、docomoはFlash Lite 2.0の端末がないんですよねー。いち早く導入した変わりに、Flash Lite 2.0をとばしてFlash Lite 3.0に対応したみたいです。

10-17-09

ソースコードに色をつけるSyntaxHighlighterの導入方法

いろんなブログをみていると、HTML、JavaScript、CSS、XMLやPHPのソースコードを、列番号が割り振られて、かつ部分にフォントカラーが設定されているのを見かけます。「ハイライト」って言うんですね。

▼WordPressプラグインSyntaxHighlighter Evolvedの使い方はこちら
WordPressでソースコードに色をつけるプラグインの使い方：SyntaxHighlighter Evolved

まさか人力で設定しているわけでもなさそうですし、どうやってるのか調べてみると、SyntaxHighlighterというJavaScriptとCSSで簡単に導入できるみたいなのでさっそく試してみました。

SyntaxHighlighterのライブラリをダウンロード

▼ダウンロードはこちらから。
配布元：syntaxhighlighter – Google Code

▼解凍したフォルダー構成。
・Uncompressed
・Styles
・Script

この３つのフォルダーをアップして、
導入したいサイトのheadに下記を書きます。

<link type="text/css" rel="stylesheet" href="http://testblog.com/Styles/SyntaxHighlighter.css" />
<script type="text/javascript" src="http://blog.caraldo.net/Script/shCore.js"></script>

<!-- 表示したい言語に応じて書きます -->
<script type="text/javascript" src="http://blog.caraldo.net/Script/shBrushJScript.js"></script>
<script type="text/javascript" src="http://blog.caraldo.net/Script/shBrushCss.js"></script>
<script type="text/javascript" src="http://blog.caraldo.net/Script/shBrushPhp.js"></script>
<script type="text/javascript" src="http://blog.caraldo.net/Script/shBrushXml.js"></script>

<!-- window.onloadの時に実行される、表示させる為の関数 -->
<script type="text/javascript">
window.onload = function () {
	dp.SyntaxHighlighter.ClipboardSwf = 'js/clipboard.swf';
	dp.SyntaxHighlighter.HighlightAll('code');
}
</script>

↑これは、普通のpreタグで挟んでます。
preタグに対してnameとclassを指定してあげます。

<pre name="code" class="html:collapse">
ここにソースコード
</pre>

さっきのheadに書く記述に挟んだpreタグnameとclassを設定してあげると、もうお気付きかもしれませんが、classの部分を書き換えると、その種類のソースコードにハイライトが変わります。下記はそのリストで、左側がclassに入力する種類で、右側は使用する際にheadに書き足すJavaScript名です。

cpp        => shBrushCpp.js
c          => shBrushCpp.js
c++        => shBrushCpp.js
c#         => shBrushCSharp.js
c-sharp    => shBrushCSharp.js
csharp     => shBrushCSharp.js
css        => shBrushCss.js
delphi     => shBrushDelphi.js
pascal     => shBrushDelphi.js
java       => shBrushJava.js
js         => shBrushJScript.js
jscript    => shBrushJScript.js
javascript => shBrushJScript.js
php        => shBrushPhp.js
py         => shBrushPython.js
python     => shBrushPython.js
rb         => shBrushRuby.js
ruby       => shBrushRuby.js
rails      => shBrushRuby.js
ror        => shBrushRuby.js
sql        => shBrushSql.js
vb         => shBrushVb.js
vb.net     => shBrushVb.js
xml        => shBrushXml.js
html       => shBrushXml.js
xhtml      => shBrushXml.js
xslt       => shBrushXml.js

view plain、copy to clipboard、print、?、のテキストを日本語にしてみる。

Scripts/shCore.js　をテキストエディタで開いて、「label:’」と検索してみると４箇所ヒットすると思います。それぞれを下記のように書き換えてみました。

label:'view plain'	=>	label:'プレーン表示'
label:'copy to clipboard'	=>	label:'クリップボードにコピー'
label:'print'	=>	label:'プリント'
label:'?'	=>	label:'コレは何？'

すると文字化けして表示されてしまいました。。orz　これらSyntaxHighlighterのファイルコードは全てShift_JIS形式になっています。ブログやサイトに設定している文字コードに引っ張られるので、headタグに書いているshCore.js”のところに、

<script type="text/javascript" src="http://blog.caraldo.net/Script/shCore.js" charset="Shift_JIS"></script>

「charset=”Shift_JIS”」と書き足しました。

SyntaxHighlighterにActionScritpを対応させる方法

▼こちらのサイトから、ActionScriptをハイライトさせるJavaScriptをダウンロード
配布元：AS3 Syntax Highlighting (with SyntaxHighlighter)
▼解凍したフォルダー構成。
・Scripts
・Styles
StylesのなかにあるSyntaxHighlighter.cssに差し替えて、Scriptsの中にあるCompressedとUncompressedの中にある、shBrushAS3.jsをそれぞれのディレクトリにアップして、

<pre name="code" class="as:collapse">
ここにソースコード
</pre>

これでActionScriptのハイライトが可能になります。

10-14-09

Flashのボタンアクションでマウスカーソルを矢印にする方法

ActionScript2を相変わらず使っています。制作業界はもうActionScript3が主流なんですかね。。
ボタンの上にボタンが来るようなコンテンツを作るとき、下のボタンが反応してしまう時があります。それ以外のときでも、onRollOverハンドラで動くモノの上にマウスカーソルを持ってくると、人差し指カーソルになってしまい、矢印カーソルのままにしたい時があります。

そんな時に使うのがuseHandCursorです。マウスカーソルが人差し指になってほしくない所にMovieClipをおいて、そのMovieClipに対してuseHandCursor = false;としてあげるとマウスカーソルは矢印のままになります。ただし、そのMovieClipにonRelease、onRollOverなどのイベントハンドラを設定していることが条件です。

mc.useHandCursor = false;
mc.onRollOver = function(){
 trace("ほげほげ")
}