前回の 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を使えば簡単に実装出来ます。
ボックスにマウスオーバーの処理をするとなお使いやすい。
背景画像の形を変えたり、半透明のpngにしたり、アニメーションGIFにしたりすると、かわいいんじゃないかと思います。
検証ブラウザ：InternetExplorer6～8、Firefox3、Opera9（※cursorの処理がイマイチ）
3/1日から、paperboy&co株式会社 クリエイティブホスティング事業部、
デザイナーとして就職いたしました。
憧れの会社だったので、頑張りたい。
以後もよろしくお願いします。
-----------------
身の程知らずにも応募した会社に受かって、とても嬉しかった。
仕事は好きだし、これからも続けていきたいし、
その中で成し遂げたいことが、どんどん出てきた。
社会人3年目。面白くなってきた。すごくよい波が来ていると思う（そして過ぎ去るのが怖い）。
辞める前、送別会であったかい言葉をいっぱい貰った。
取引先や職場の全員に、ひとりひとり違う文面でメールを送り、
たくさんの返信をもらった。
決して嫌で辞めたわけでなく、辞める際にはたくさん迷惑をかけてしまって申し訳なかったけど、
狭い業界だからまたどこかで、この大好きな人たちと絡んで仕事したいと思った。
誠実に接した（と自分では思っている）相手からは
（もちろん全員じゃないにしろ）誠実さが返ってくることを
身に沁みて実感した。
目の前の仕事を精一杯こなす、これまで通りの当り前のことをしながら、それだけではなくて
もっと広い所に目を向けてやっていきたいと思う。
ウェブに、もっと愛を。
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のデータベースとかライブラリ云々
・企画とかプロジェクトマネジメントの勉強（いまの会社にもすごい人がいっぱいいるので色々盗む）
・クライアントや仕事仲間の信頼を益々得られるよう努力する
・アンテナを張る
WEBには関係ないけど羽海野チカ「3月のライオン」で相当に沁みたセリフ。
「ふざけんなよ/弱いのが悪いんじゃんか/弱いから負けたんだよっっ/勉強しろよ/してねーの/わかんだよ/解ってるけど/できねーとか/言うんなら/やめろよ!!/来んな!!/こっちは全部/賭けてんだよ/他には何も/持てねーくらい/将棋ばっかりだ」
前回に引き続き、Math.sin(ラジアン)でサイン値を取得して波の動きを作った。最近流行のスムースなゆらぎ。
全部フレームアクションにしようとして挫折した。function()をもう少し上手に使いまわせるようにしたい。あとステージ狭すぎ（座標直すのがめんどくさいのでもういい）
ボーナスをはたいて清水の舞台から飛び降りる覚悟でCS4を買ったので、来年の目標はAS3.0と仲良くなること。コードは友達。
最近のコメント