前回の jQuery Corner に関するエントリですが、ChromeとSafariで一部不具合がありました。すみません。

今回リベンジをかけて、下記のブラウザで使えるものを書きました。
Windows IE6～、FF3～、Opera9～、Chrome3～
Macintosh FF3～、Opera9～、Safari4～

サンプルを見る
div重ねなくて済むし、リキッドでいけます。

■解説
1) CSSで、Firefox向けに　-moz-border-radius:14px;　を指定します
2) CSSで、SafariとChrome向けに　-webkit-border-radius:14px;　を指定します
3) CSSだけだとIEとOperaが言うことを聞かないので jQuery-Corner を使う

■注意点
・paddingは角丸半径より大きいものを指定します
・残念ながらborderは実装しておりません

シェイプトゥイーンの動く様はかわいいので、組み合わせたらシンプルな時計が作れるのではと思いました。数字は奥が深くて面白い。
デジタル時計は切り替わりの表現として見がちだけど、時間は本当は曖昧な線として存在するのではと思います。

シェイプの組み合わせで作る時計

スクリーンセイバーもあります。zipを解凍してインストーラーをご利用ください。

シェイプの組み合わせで作る時計：スクリーンセイバー

Smartyのテンプレートでみんな大好きFizzBuzzしたいと思ってやってみた。
あんまり意味はないです。
sectionをfor文のように使う。

コード

{section name=cnt start=1 loop=101}
{if $smarty.section.cnt.index is div by 15}
<span style="color:#a60a0a;font-weight:bold;">{$smarty.section.cnt.index}</span>
{elseif $smarty.section.cnt.index is div by 5}
<span style="color:#9ecf27;font-weight:bold;">{$smarty.section.cnt.index}</span>
{elseif $smarty.section.cnt.index is div by 3}
<span style="color:#0a9ebf;font-weight:bold;">{$smarty.section.cnt.index}</span>
{else}
{$smarty.section.cnt.index}
{/if}
{/section}

実行結果

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100

処理が遅いのは毎回loopを通すからか？もうちょっとスマートな書き方があるなら知りたい。
Smartyでは「割り切れるとき」をis div by...と直感的に書けるので便利です。

文字サイズ可変でも使える角丸のメニューボタンは、jQuery Cornerを使えば簡単に実装出来ます。
ボックスにマウスオーバーの処理をするとなお使いやすい。

jQueryで作る角丸とマウスオーバーのメニューボタン

背景画像の形を変えたり、半透明のpngにしたり、アニメーションGIFにしたりすると、かわいいんじゃないかと思います。

背景画像を工夫したもの

検証ブラウザ：InternetExplorer6～8、Firefox3、Opera9（※cursorの処理がイマイチ）

-----------------

身の程知らずにも応募した会社に受かって、とても嬉しかった。

仕事は好きだし、これからも続けていきたいし、
その中で成し遂げたいことが、どんどん出てきた。
社会人3年目。面白くなってきた。すごくよい波が来ていると思う（そして過ぎ去るのが怖い）。

辞める前、送別会であったかい言葉をいっぱい貰った。
取引先や職場の全員に、ひとりひとり違う文面でメールを送り、
たくさんの返信をもらった。
決して嫌で辞めたわけでなく、辞める際にはたくさん迷惑をかけてしまって申し訳なかったけど、
狭い業界だからまたどこかで、この大好きな人たちと絡んで仕事したいと思った。
誠実に接した（と自分では思っている）相手からは
（もちろん全員じゃないにしろ）誠実さが返ってくることを
身に沁みて実感した。

目の前の仕事を精一杯こなす、これまで通りの当り前のことをしながら、それだけではなくて
もっと広い所に目を向けてやっていきたいと思う。
ウェブに、もっと愛を。

PhotoshopやIllustratorで作った作品をまとめました。
まだ数は少ないですが、増やしていきたいです。

apartment 409

ActionScript2.0から3.0に移行しようとして試行錯誤中。せっかく3.0でやるのだから3Ｄ的なものを作りたかった、実験です。

----------------------------------------

(1)とりあえずステージ上にランダムにMovieClipを配置する処理。
見る

import flash.display.*;
import flash.events.*;
import flash.utils.*;

var ballS:Sprite = new Sprite();//ballSというスプライトを作って
addChild(ballS);//表示リストに加える。
var timer:Timer = new Timer(40, 0);//0.04秒ごとに永遠に繰り返します
timer.addEventListener(TimerEvent.TIMER,onTick);
function onTick (evt:TimerEvent):void {
 var ball:ballInstance = new ballInstance();//ballInstanceはあらかじめリンケージされてる。
 
 var xMax:int = 24;//0から24のランダムな整数を取得する。
 var xMin:int = 0;
 var xRandomInt:int = Math.floor(Math.random()*(xMax-xMin+1))+xMin;//厳密に計算したランダム
 var ballX:Number=xRandomInt*25;//ballInstanceの横幅は25px。
 
 var yMax:int = 16;
 var yMin:int = 0; 
 var yRandomInt:int = Math.floor(Math.random()*(yMax-yMin+1))+yMin;
 var ballY:Number=yRandomInt*25;
 
 ball.x=ballX;
 ball.y=ballY;
 ballS.addChild(ball);//表示リストにボールを加える。
}
timer.start();

----------------------------------------

(2)それを移動させる。
見る

import flash.display.*;
import flash.events.*;
import flash.utils.*;

var ballS:Sprite = new Sprite();
addChild(ballS);
var timer:Timer = new Timer(40, 0);
timer.addEventListener(TimerEvent.TIMER,onTick);
function onTick (evt:TimerEvent):void {
 var ball:ballInstance = new ballInstance();
 ball.x=ball.y=-100;
 
 var xMax:int = 10;
 var xMin:int = -10;
 var xRandomInt:int = Math.floor(Math.random()*(xMax-xMin+1))+xMin;
 var ballX:Number=xRandomInt*100;
 
 var yMax:int = 10;
 var yMin:int = -10;
 var yRandomInt:int = Math.floor(Math.random()*(yMax-yMin+1))+yMin;
 var ballY:Number=yRandomInt*100;
 
 ballS.addChild(ball);
 
 ball.alpha=0;//ballの透明度の初期値を0（全部透明）に設定。
 ball.addEventListener(Event.ENTER_FRAME, alphaChange);
 function alphaChange(event:Event):void {//フレームに入るたびに0.08ずつ加算
  ball.alpha+=0.08;
 }
 
 var ballZ:Number=1000;//3Dっぽい処理をさせるための変数
 var scale:Number;//3Dっぽい処理をさせるための変数
 var fl:Number=100;//3Dっぽい処理をさせるための変数
 ball.addEventListener(Event.ENTER_FRAME, zahyoChange);
 function zahyoChange(event:Event):void {
  ballZ-=20;//どんどんballZの値を減らして
  scale=fl/(fl+ballZ);//scaleっていう変数にぶち込む
  ball.x=ballX*scale+300;//ballのx座標の位置
  ball.y=ballY*scale+200;//ballのy座標の位置
  ball.scaleX=ball.scaleY=scale*5;//ballの横幅・縦幅。
  if(ballZ<-100){
   ball.removeEventListener(Event.ENTER_FRAME, zahyoChange);
   ball.removeEventListener(Event.ENTER_FRAME, alphaChange);
   ball.alpha=0;
  }
 }
}
timer.start();

----------------------------------------

(3)さらに色変更の処理。その上にマウス位置による処理。たのしい。
見る

import flash.display.*;
import flash.events.*;
import flash.utils.*;

var ballS:Sprite = new Sprite();
addChild(ballS);
var timer:Timer = new Timer(20, 0);
timer.addEventListener(TimerEvent.TIMER,onTick);
function onTick (evt:TimerEvent):void {
 var ball:ballInstance = new ballInstance();
 ball.x=ball.y=-100;
 
 var date:Date;
 date = new Date();
 var pikaN:Number;
 pikaN=Math.floor(date.milliseconds/10)%6;
 if(pikaN==1){//以下、やる気のないif文。一括で出したいところですね。
  var colorTransformA:ColorTransform = ball.transform.colorTransform;
  colorTransformA.color = 0x1b98a3;
  ball.transform.colorTransform = colorTransformA;
 }
 if(pikaN==2){
  var colorTransformB:ColorTransform = ball.transform.colorTransform;
  colorTransformB.color = 0x1b7ba3;
  ball.transform.colorTransform = colorTransformB;
 }
 if(pikaN==3){
  var colorTransformC:ColorTransform = ball.transform.colorTransform;
  colorTransformC.color = 0x1b5ea3;
  ball.transform.colorTransform = colorTransformC;
 }
 if(pikaN==4){
  var colorTransformD:ColorTransform = ball.transform.colorTransform;
  colorTransformD.color = 0x4e1ba3;
  ball.transform.colorTransform = colorTransformD;
 }
 if(pikaN==5){
  var colorTransformE:ColorTransform = ball.transform.colorTransform;
  colorTransformE.color = 0x7b1ba3;
  ball.transform.colorTransform = colorTransformE;
 }
 if(pikaN==0){
  var colorTransformF:ColorTransform = ball.transform.colorTransform;
  colorTransformF.color = 0xa31b98;
  ball.transform.colorTransform = colorTransformF;
 }
 
 var xMax:int = 10;
 var xMin:int = -10;
 var xRandomInt:int = Math.floor(Math.random()*(xMax-xMin+1))+xMin;
 var ballX:Number=xRandomInt*100;
 
 var yMax:int = 10;
 var yMin:int = -10;
 var yRandomInt:int = Math.floor(Math.random()*(yMax-yMin+1))+yMin;
 var ballY:Number=yRandomInt*100;
 
 ballS.addChild(ball);
 
 ball.alpha=0;
 ball.addEventListener(Event.ENTER_FRAME, alphaChange);
 function alphaChange(event:Event):void {
  ball.alpha+=0.08;
 } 
 
 var ballZ:Number=1000;
 var scale:Number;
 var fl:Number=100;
 ball.addEventListener(Event.ENTER_FRAME, zahyoChange);
 function zahyoChange(event:Event):void {
  ballZ-=20;
  scale=fl/(fl+ballZ);
  ballX+=(300-mouseX)/10;//マウス位置による処理うんぬん。
  ballY+=(200-mouseY)/10;
  ball.x=ballX*scale+300;
  ball.y=ballY*scale+200;
  ball.scaleX=ball.scaleY=scale*5;
  if(ballZ<-100){
   ball.removeEventListener(Event.ENTER_FRAME, zahyoChange);//ここの削除のやり方がイマイチ。
   ball.removeEventListener(Event.ENTER_FRAME, alphaChange);//本当はballをremoveChildしてnullにするんですよね。うーん。
   ball.alpha=0;
  }
 }
}
timer.start();

----------------------------------------

画面外に出たballをきちんと削除出来てないので、重いです。 CPUに大きい負荷がかかると思う。

参考にしたサイト
ActionScript3.0 でMovieClipの色を変更する
ActionScript3.0でattachMovie
AS3.0に対応するために覚えなければならない事
Lesson3　3D表現にチャレンジしよう！

今年の目標。
・ActionScript3.0を基礎から頑張る（既にある知識内のことで済ませようとするのが悪い癖。知識外にも勇気出して出ていく）色々作りたいものが出てきた。
・PHPのデータベースとかライブラリ云々
・企画とかプロジェクトマネジメントの勉強（いまの会社にもすごい人がいっぱいいるので色々盗む）
・クライアントや仕事仲間の信頼を益々得られるよう努力する
・アンテナを張る

「ふざけんなよ/弱いのが悪いんじゃんか/弱いから負けたんだよっっ/勉強しろよ/してねーの/わかんだよ/解ってるけど/できねーとか/言うんなら/やめろよ!!/来んな!!/こっちは全部/賭けてんだよ/他には何も/持てねーくらい/将棋ばっかりだ」

前回に引き続き、Math.sin(ラジアン)でサイン値を取得して波の動きを作った。最近流行のスムースなゆらぎ。

全部フレームアクションにしようとして挫折した。function()をもう少し上手に使いまわせるようにしたい。あとステージ狭すぎ（座標直すのがめんどくさいのでもういい）

ボーナスをはたいて清水の舞台から飛び降りる覚悟でCS4を買ったので、来年の目標はAS3.0と仲良くなること。コードは友達。

見る

Math.sin();を使用してぐるぐるするインタラクティブを作りました。マウスに追随するオブジェクト（不可視）をひとつ作っておき、その座標を中心に回るようにしました。

でも違うんだ！作りたかったのはこれじゃないんだ。出来れば「透明な球体に星がたくさんくっついていて、それが回る」ような感じにしたかったのだ。奥行きとぼかしとアルファをいじればよいはず。改造する。

見る：sinとcosの練習

追記：
奥行きとアルファを入れた。

彼がしゃべるセミナーに今日行ってきて、やはり感情を揺さぶられて帰ってきた。

私はてっきり、彼はもっと芸術家気取りのひとだと思っていた。ずっとフリーでやってきたのだから、何もかも自分でしようとする人だと思っていた。
でも違った。なんていうか、彼の作品から感じる調和、冷静さ、バランスのよさ、そういうものを、彼の話や声や外見の中で感じた。
色々な若いアーティストを取り纏めるアートディレクターとして、作品のために、自分に出来ること（現場の雰囲気を肌で感じて作品に生かす、とか地味な情報の取り纏めも怠らない、とか、クリエイターを育てて達成感を味わわせるクリエイティブ、とか）を必死にやってる人だった。一番いい見せ方を模索して失敗しながら自分の力にして達成する人だった。

私はデザインをする。でもそれはクライアントが望むものしか作れない。それ以上のものを作れない。
私はタスクをこなす。それがどんなに無茶でも冷静に進めることができる。納期を破ったことは一度もない。でもやっぱり仕事の枠を超えることは出来ていない。
私はファイルリストやストラクチャを作る。情報を取り纏め画面を設計する。確認して管理して、クライアントの不安を取り除いて、プロジェクトの道筋を立てる。でも相手を驚かせて期待を良い方向に裏切る、そういうことが出来ていただろうか。

まったく反省だ。
才能以前だ。
自分がやりたいこと、好きなもの、アイディアを出し、膨らませる、枠から外れる、そういうことから逃げていた。「好きなものばかり数珠つなぎにするわけにはいかない」とかなんとか言って。

彼が一緒に仕事をしているという、若いクリエイターたちに激しく嫉妬した。これはもう恋に近い。
私は私自身を優等生だと思う。独学でこの世界に入って現場で揉まれて、これでお金を貰っているんだから。でもこのままではいけないと思った。業務にかまけて失っていた無邪気さ、16歳の頃、Photoshopを触り始めた頃の、あの熱っぽさをいまこそ取り戻さないと、と思った。

ずっとストーカーしますよ、と言ったらじゃあずっといい距離で前を歩いていきます、と笑ってもらった。
ちょっと泣きそうだった。
人材はプロジェクトの目的に合わせてアサインされるべきだ、という私の信念さえ彼は裏切った。いつか絶対に一緒に仕事がしたい。それが出来たらもう何もいらない。
最後に握手してもらった、あの感触を覚えていなければ。私の右手には魔法がかかったはずだ。

マスクレイヤーを使ってムービーを画面を出現させたいときのバリエーションいろいろ。丸いやつ（2番）が気に入ってる。

見る：マスクのバリエーション

マウス位置によってぐるぐるスクロールするメニューを作ってみました。動かしたオブジェクトがある一定位置まで来たとき、元の位置に戻すことで、無限スクロールに見えます。これを応用すると360度パノラマ写真ギャラリーなどが出来るはず。

見る：ぐるぐるする無限スクロールメニュー

ページのアクセントに使えるアイコンを自分で描ければ便利だなと思い、Photoshopで練習。モニタと紙束は遠近法効かせてポップにしてみた。

楽しかった＆使えそうなので、椅子、ペン、キーボード、扉、ノート、なども描きたい。溜まったら配布します。