Labs

CSS3から扱えるエフェクト機能。

2010.01.09 / Labs

CSS
CSS3

CSS3から新たに利用できる機能を、いくつか試してみます。
ボックスの角丸やシャドウを追加できたり、かなり実用的な機能が使えるようになります。Firefox、Safariなどのモダンブラウザでは、すでにいくつかの機能は実装されていますが、残念ながらIEでは次のバージョン以降での対応になりそうです。

ボックスのコーナーを丸くする

ボックスの角丸では、Firefoxを代表とするmozillaと、Safari、Chromeを代表とするweb-kitを別々に記述する必要があります。

Box Round

.box-round {
	width: 300px;
	height: 200px;
	text-align: center;
	color: #ffffff;
	background: #999999;
	-moz-border-radius: 5px; /* Firefox */
	-webkit-border-radius: 5px; /* safari, Chrome */
}

.box-round {

width: 300px;

height: 200px;

text-align: center;

color: #ffffff;

background: #999999;

-moz-border-radius: 5px; /* Firefox */

-webkit-border-radius: 5px; /* safari, Chrome */

}

ボックスにシャドウを付ける

ボックスのシャドウも角丸と同じく、mozillaと、web-kitを別々に記述します。

Box Shadow

.box-shadow {
	width: 300px;
	height: 200px;
	text-align: center;
	color: #cccccc;
	border: 1px solid #e6e6e6;
	background: #ffffff;
	-moz-box-shadow: #e6e6e6 0px 3px 5px; /* Firefox */
	-webkit-box-shadow: #e6e6e6 0px 3px 5px; /* safari, Chrome */
}

.box-shadow {

width: 300px;

height: 200px;

text-align: center;

color: #cccccc;

border: 1px solid #e6e6e6;

background: #ffffff;

-moz-box-shadow: #e6e6e6 0px 3px 5px; /* Firefox */

-webkit-box-shadow: #e6e6e6 0px 3px 5px; /* safari, Chrome */

}

テキストにシャドウを付ける

X軸、Y軸の距離と、ぼかしの幅、カラーを指定できます。

Text Shadow

.text-shadow {
	text-shadow: #cccccc 3px 3px 5px;
}

.text-shadow {

text-shadow: #cccccc 3px 3px 5px;

}

テキストを光らせる

テキストのシャドウを応用して、光らせるような効果もできます。シャドウを多重にすることで、より濃いグローになります。

Text Glow

.text-glow {
	color: #ffffff;
	text-shadow: #ac4343 0px 0px 5px, #ac4343 0px 0px 5px;
}

.text-glow {

color: #ffffff;

text-shadow: #ac4343 0px 0px 5px, #ac4343 0px 0px 5px;

}

ボックスを透過させる

要素に対して透明度を0〜1の間で指定できます。

Opacity

.opacity {
	width: 150px;
	height: 200px;
	text-align: center;
	color: #666666;
	background: #ffffff;
	opacity:0.5;
}

.opacity {

width: 150px;

height: 200px;

text-align: center;

color: #666666;

background: #ffffff;

opacity:0.5;

}

ブラウザでFLASHを再生中、デバッグのためにパラメータなどを出力する方法です。
ActionScriptを制作中によく利用するtraceですが、ブラウザで再生中には実行することができません。そこでJavaScriptとの連携を利用して同様のことを実現します。
はじめにHTML内にJavaScriptで、引数を受け取りダイアログで表示するスクリプトを記述します。関数名は「flashTrace」としておきます。

<script type="text/javascript">
function flashTrace($str) {
alert($str);
}
</script>

function flashTrace($str) {

alert($str);

}

</script>

次にActionScriptでは、JavaScriptの関数を実行するたスクリプトを記述します。引数の一つ目がJavaScriptの関数名で、二つ目が出力したいパラメータです。

ExternalInterface.call("flashTrace", "デバッグのテスト");

1	ExternalInterface.call("flashTrace", "デバッグのテスト");

これでブラウザで再生中に、ダイアログでActionScript内のパラメータを出力することができます。
ですが、このままだとFLASHで制作中のときには、traceも併記する必要が出てしまいます。その場合、下記のようにブラウザで再生かどうかを判定して、どちらか実行する関数にしておくと便利です。

ft("デバッグのテスト");

function ft(str:String):void {
	
	//サーバへのアクセスを判定してJavascript、またはtraceを実行
	if (loaderInfo.url.indexOf("http") == 0) {
		ExternalInterface.call("flashTrace", str);
	} else {
		trace(str);
	}
}

ft("デバッグのテスト");

function ft(str:String):void {

//サーバへのアクセスを判定してJavascript、またはtraceを実行

if (loaderInfo.url.indexOf("http") == 0) {

ExternalInterface.call("flashTrace", str);

} else {

trace(str);

}

ちなみにサーバへのアクセス（http://）ではなく、ブラウザで直接HTMLファイルを開いた場合（file://）には、FLASHのセキュリティでJavaScriptが実行されません。外部サーバではなくローカルで実行するには、Webサーバをローカル環境に構築する必要があります。

Codaのプラグイン作成。

2010.01.04 / Labs

Codaで制作効率をアップさせる、ちょっとしたプラグインの作成方法です。
プラグインを作成するには専用のツールが必要になります。Panicサイトの Codaデベロッパゾーンで「Coda Plug-in Creator」が配布されているので、こちらをダウンロードします。サンプルプラグインも同時に配布されていて、初めてプラグインを作成する際に参考になります。

「Coda Plug-in Creator」を起動すると新規ウィンドウが開かれます。

今回はシンプルに、選択したテキストに対して<p>、<div>などの任意のタグで囲むだけのプラグインを作成します。実は、サンプルプラグインにも同様のものが含まれていて、それをもとに作成しています。
CodaのプラグインのスクリプトそのものはPHP（またはCocoa）で書かれていて、上記のウィンドウではそれらを管理し、プラグインを構成していきます。

プラグイン編集中のウィンドウです。編集の大まかな流れは以下のようになります。

コマンドの作成
プラグイン内のコマンドを作成します。作成したコマンドは左ペインに登録されて、右ペインで編集が可能になります。左ペインの「Shortcut」の箇所をクリックしてショートカットを設定することもできます。
スクリプトの作成、または編集
作成したコマンドを選択すると、「Script」がアクティブになり、スクリプトを作成することができます。すでに作成されていると編集になります。スクリプトファイルはプラグインファイルに内包されます。
入力テキスト
入力テキストの扱いを指定します。選択テキストのみ、ドキュメント全体、選択なしなど。
出力テキスト
スクリプトを実行した後の、出力テキストの扱いを指定します。選択テキストを置き換え、ドキュメント全体を置き換えなど。
ポインターの位置
スクリプトを実行した後の、テキストポインターの位置を指定したい場合にチェックします。その場合スクリプト内に記述する「$$IP$$」にポインターが移動します。

作成したスクリプトファイルには、このように記述しています。（<p>で囲む場合）

#!/usr/bin/php
<?php
$fp = fopen('php://stdin', 'r');
echo '<p>'.fgets($fp, 1024).'</p>';
fclose($fp);
?>

#!/usr/bin/php

<?php

$fp = fopen('php://stdin', 'r');

echo '<p>'.fgets($fp, 1024).'</p>';

fclose($fp);

プラグインの作成が完了したら、保存して書き出されるプラグインファイルを「Application Support/Coda/Plug-ins」フォルダに入れます。これでメニューの「Plug-ins」から実行可能になります。

FLASHでビットマップのフルスクリーン表示。

2010.01.02 / Labs

外部ビットマップデータを読み込んで、ウィンドウ全面に表示されるように拡大・縮小を行います。ウィンドウのサイズが変更されたら、それに合わせてビットマップもリサイズします。
サンプルはこちら

package {
	
	import flash.display.Bitmap;
	import flash.display.BitmapData;
	import flash.display.Loader;
	import flash.display.LoaderInfo;
	import flash.display.PixelSnapping;
	import flash.display.Sprite;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	import flash.events.Event;
	import flash.net.URLRequest;	

	public class Main extends Sprite {
		
		public function Main() {
			var loader:Loader = new Loader();
			var info:LoaderInfo = loader.contentLoaderInfo;
			
			//ビットマップデータの読み込み
			loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onComplete);
			loader.load(new URLRequest("image.jpg"));
			
			//ステージのスケールを固定で、原点を左上に
			stage.scaleMode = StageScaleMode.NO_SCALE;
			stage.align = StageAlign.TOP_LEFT;
			
			//ビットマップの読み込みが完了した時
			function onComplete(event:Event):void {
				var bmd:BitmapData = new BitmapData(info.width, info.height);
				var bm:Bitmap = new Bitmap(bmd, PixelSnapping.NEVER, true);
				
				//ビットマップを描画
				bmd.draw(loader);
				stage.addChild(bm);
				adjustBitmap(bm);
			}
			
			//ビットマップをステージのサイズに合わせる
			function adjustBitmap(bm:Bitmap):void {
				var inner:Number = bm.width/bm.height; //ビットマップの縦横比
				var outer:Number; //ステージの縦横比
				
				//ステージのサイズが変更された時
				stage.addEventListener(Event.RESIZE, transSize);
				transSize();
				
				//ビットマップを拡大・縮小
				function transSize():void {
					var size_x:uint = stage.stageWidth;
					var size_y:uint = stage.stageHeight;
					
					outer = size_x/size_y;
					
					//ビットマップ、ステージの縦横比を比較してサイズを変更
					if (inner >= outer) {
						size_x = size_x*(inner/outer);
					} else {
						size_y = size_y*(outer/inner);
					}
					bm.width = size_x;
					bm.height = size_y;
				}
			}
		}
	}
}

package {

import flash.display.Bitmap;

import flash.display.BitmapData;

import flash.display.Loader;

import flash.display.LoaderInfo;

import flash.display.PixelSnapping;

import flash.display.Sprite;

import flash.display.StageAlign;

import flash.display.StageScaleMode;

import flash.events.Event;

import flash.net.URLRequest;

public class Main extends Sprite {

public function Main() {

var loader:Loader = new Loader();

var info:LoaderInfo = loader.contentLoaderInfo;

//ビットマップデータの読み込み

loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onComplete);

loader.load(new URLRequest("image.jpg"));

//ステージのスケールを固定で、原点を左上に

stage.scaleMode = StageScaleMode.NO_SCALE;

stage.align = StageAlign.TOP_LEFT;

//ビットマップの読み込みが完了した時

function onComplete(event:Event):void {

var bmd:BitmapData = new BitmapData(info.width, info.height);

var bm:Bitmap = new Bitmap(bmd, PixelSnapping.NEVER, true);

//ビットマップを描画

bmd.draw(loader);

stage.addChild(bm);

adjustBitmap(bm);

}

//ビットマップをステージのサイズに合わせる

function adjustBitmap(bm:Bitmap):void {

var inner:Number = bm.width/bm.height; //ビットマップの縦横比

var outer:Number; //ステージの縦横比

//ステージのサイズが変更された時

stage.addEventListener(Event.RESIZE, transSize);

transSize();

//ビットマップを拡大・縮小

function transSize():void {

var size_x:uint = stage.stageWidth;

var size_y:uint = stage.stageHeight;

outer = size_x/size_y;

//ビットマップ、ステージの縦横比を比較してサイズを変更

if (inner >= outer) {

size_x = size_x*(inner/outer);

} else {

size_y = size_y*(outer/inner);

}

bm.width = size_x;

bm.height = size_y;

}

photo by : Josefrén

Almondlab

Labs

CSS3から扱えるエフェクト機能。

ボックスのコーナーを丸くする

ボックスにシャドウを付ける

テキストにシャドウを付ける

Text Shadow

テキストを光らせる

Text Glow

ボックスを透過させる

ブラウザ上でActionSctiptの簡易デバッグ。

Codaのプラグイン作成。

FLASHでビットマップのフルスクリーン表示。