サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
買ってよかったもの
www.akibahideki.com
僕らが手がけたのは第三章のデザインサンプルで、実際にCSS3を使って作ったサイトやその一部を紹介する実践的なセクションです。 アイデアを織り交ぜ、全てのサンプルがオリジナルのデザインなので、そこからの作り込みがとても大変だったので思い入れのある作品になっています、よかったら是非手に取ってみてくださいね。
最近Webkit系とMozilla系のCSS3グラデーションの記述がW3Cの規定に統一されるらしく、もうすぐ記述がひとつにまとまるって話を聞きました。
タイトルの通り、画像をモノクロに自動で変換して、マウスが乗ったらカラーに変化するってやつです。HTML5のcanvasを使ってます。 カラー画像をセピア調、ブルー調、コントラスト強めのグレー調など、「古い写真」のイメージに変換できる。モノトーンなのですが、CSSの16進数カラー値をそのまま使う事が出来るので、ぶっちゃけどんな色でも使える(カラーのフィルターをかぶせたような感じでとらえてくださいませ)「フワッと」変移するのか「パッと」変移するのか、スピードをミリ秒で指定出来る(ここはjQueryのアニメーションでおなじみのミリ秒をそのまま)「最初にモノクローム → (元の)カラー画像」だけでなく「最初に(元の)カラー画像→モノクローム」というように、変移の順番を逆にできる。
canvasで画像を歪ませる、例えばActionScript 3.0のdrawTriangleのような、メッシュを作ってマッピングするにはどうしたらいいんだろう?と思い調べてたら、やはりありました。
例えばリズムマシンみたいに、、と思って試しに作ってみました、正直この使い方が良いのかか分かりませんが、ChromeとSafariだったらダントツでSafariが安定しました。
ひとまず、この手のCSS3のプロパティや値を表示してくれるジェネレータは結構見かけますが、一番CSS3で取っ付きにくいその一つとしてグラデーションだと思う方も多いでしょう。 レンダリングエンジンによって書き方も変わってくるグラデーションはなかなか憶えにくいので、少なくともそこだけ作れたら良いなと思って、なにか作ってみようと思うのがキッカケでした。
普通にイラストレータの画面です。 戦闘機を作ってみました。 なんだか頼りない戦闘機ですが、まずはこれをcanvasに表示してみましょう。 PNG形式で透過付きの状態で保存します。 これをHTMLと同じ階層に「images」というフォルダを作ってそこに「player.png」と名付けて保存しましょう。 出来たら前回のJavaScriptコードの中にちょっと追加します。 window.onload = function () { var canvas = document.getElementById("shootingCanvas"); var ctx = canvas.getContext("2d"); ctx.fillRect(0,0,300,200); var player = new Image(); player.src = "images/player.png"; ctx.dra
で、話をさせてもらう内容ですが、Illustrator CS5とExtendScriptToolkit CS5を使って、スクリプトで模様を描いてみようという、ちょっとマニアックなお話だと思います。
あるWeb系セミナーイベントのおまけで作ったcanvasを使ったゲームです。 と言っても点数が出るわけでもなく、戦闘機を動かして、クリックしたら弾が出て敵のタコキャラを消していくって一連の流れを追って作っていきましょう。 まずcanvasですが、お決まりのパターンとして憶えておきます。 //HTML内 1200pxの横幅、800pxの高さのcanvasタグを書きます。 これをJavaScriptで読みにいきます。 これで、このあとはJavaScriptで変数「ctx」にドットシンタックス(ドット「.」で命令をつないでいく文法、JavaScriptやActionScriptでは定番)で書いていくことになります。 で、四角を描く方法は以下の通りです。(ソースをコピペしてcanvas対応ブラウザで見てください) canvas四角 ctxというキャンバスのスクリプトが書ける場所に「fil
CSS3やHTML5要素のコードヒント機能拡張を作っている丸山さん(兄さん)と、夜スカイプで話をして、「へえ」なんて聞いていたけど、自分でもやってみようかな?って、本当は全然自信がなかったんだけど、ちょっと触ってみたら、ここまで出来た。
あるWeb系セミナーイベントのおまけで作ったcanvasを使ったゲームです。 と言っても点数が出るわけでもなく、戦闘機を動かして、クリックしたら弾が出て敵のタコキャラを消していくって一連の流れを追って作っていきましょう。 まずcanvasですが、お決まりのパターンとして憶えておきます。 //HTML内 <canvas id="shootingCanvas" width="1200" height="800"></canvas> 1200pxの横幅、800pxの高さのcanvasタグを書きます。 これをJavaScriptで読みにいきます。 これで、このあとはJavaScriptで変数「ctx」にドットシンタックス(ドット「.」で命令をつないでいく文法、JavaScriptやActionScriptでは定番)で書いていくことになります。 で、四角を描く方法は以下の通りです。(ソースをコピペし
processing_no_use.html ←クリックして見てください、Safari,Chromeあたりが速いです、Mac版でしか見てませんが... この前書いたブログ記事のあと、「Flashとcanvasを比べるなんておかしい」なんて声をいただきました、、、すいませんすいません。。。 ただし、最近どこかのサイトで「Flashに取って代わる」、とか「Flashが要らなくなる」、とか、ずいぶんはっきりした書き方をしている所もあるから。。 で、、そのときの記事でJavaScriptのフレームワーク、「Processing.js」を使って1000個のドットを動かしたんですが、システムエンジニアの方に「フレームワークを使ったら処理も影響されるんじゃない?」って言われて、良く分かんない僕は「え?」って思いました。 で、1000個のドットを動かすのもやっとこさのProcessing.js+canva
最近特に、Apple iPadが発表されるニュースより、AppleがFlashをどんどん淘汰していくような動きの方がよっぽど気になります。 Appleはどうやら HTML5を推進しているとのこと。 確かにAppleのサイトはだいぶ前からリッチコンテンツな部分にもJavaScriptを導入していましたね。 最初は「どっちも良い所あるから仕様をしっかりと見据えて使い分けるべき」と捉えていました。 でもどうやらHTML5のcanvasという要素が、Flashみたいな表現も可能ということで、色々調べてみたら、どうもスゴい所までいってるらしい。 で、色々と試していたんですが、やはりブラウザで動くわけなので、当然描画速度ってブラウザによって違うんじゃないかな?って思います。 どれに優劣を付ける訳じゃないけど、パフォーマンスがどんなものか知っておきたかった。 ついでにFlashでも作ってみた。 canv
最近、Webデザインのトレンドとか言って、立体的なナビゲーションじゃなくて、平面でシンプルなナビゲーションがトレンド、なんて言う人が多いですね。 で、そうなりつつあるのはわかるんですが、だからといって、今の企業サイトもそうだし、クライアントが全てトレンドを求めてる訳ではなく、テイストは案件によって出し方を柔軟にする事が大事なんです、と思っています。 今回、アップルのサイトのグローバルナビゲーションをマネしてみましょう。 シンプルだけど、拡大してみると案外細かい線が凹凸感を出していて、心地よい立体感を演出してくれています。 ここで大事なのが、「溝」。だと感じました。 地味な存在で目立たないけど、ここもこだわってデザイナーとしてのクオリティを上げてみたいな、と。
2009年9月27日、アップルストア心斎橋で開催されたCSS Nite in OSAKA, Vol.19で、HTML5のcanvasを使った入門講座ということでスピーチしてきました。 canvasというのは、HTMLタグで、直接ブラウザに図形を表示させるためのタグで、まずは「線を引く」とか「塗りを入れる」など、シンプルな絵を描く方法を説明させていただいたあと、「HTML内のリスト化された数値を抜き取り、折れ線グラフを描画させる」とか、「ポイントをドラッグさせてベジェ曲線を操作する」など、canvasで出来る初歩的な仕様のご紹介をしました。 全てが自作のJavaScriptなので、勉強し始めて半月くらいしかない僕にとって「まだまだ」だとは思いますが、まだ知らない人にとって、お役に立てたら光栄です。 今日公開したスライドです、ダウンロードしてお使いください。 http://www.akibah
まだIEだと見れないと思います。 こちら、Mac版FirefoxとSafariのみでしか確認してません・・・(ちゃんとやれよっ・・・て?) Flashじゃないですよ。 さて、次世代のHTML5、新要素として結構アツいcanvas要素。 グラフを書いたり、ゲームを動かしたり・・・いままでFlashやJavaアプレットとかいう技術で表現していたものが遂にブラウザベースで実現出来るようになる、らしい。 で、canvas要素に使うJavaScriptで「とりあえず丸が描けたっ!やった〜」なんてよろこんでいるしょうもない大人ですが、世の中にはすごい人たちがいっぱいいますね? こんな人たちにはまだまだ追いつかないにしても、とっかかりで簡単な所からやってみました!! 参考サイトはこちらです。 HTML5.JP - 次世代HTML標準 HTML5情報サイト http://www.html5.jp/ Act
今度デジハリでセミナーがあるので、もう少し入門者ながら勉強してみたcanvas要素。 JavaScriptでベジェ曲線を描いてみました。 ポイントとなるメソッドは「bezierCurveTo()」です。 最初に「moveTo()」で開始地点を決めて、あとは「bezierCurveTo()」で終点と、あいだのハンドル(愛用イラストレータで言う)の先端の2点を指定するだけで描けるから、わりと憶えやすいかもしれません。 「bezierCurveTo()」の書式はこのようになります。(イラストレータで使う用語を織り交ぜると・・・) bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) // cp1x ... 始点から出ているハンドルの先端のX座標がはいります。 // cp1y ... 始点から出ているハンドルの先端のX座標がはいります。 // cp2x ... 終
オブジェクト指向って名前だけ聞いた事がある、けど意味は知らない。 クラスって言われてもよくわからないから、アクションパネルに縦に長ーいスクリプトを書いていた。 何となくムービークリップを動かすときはモーショントゥイーンを使ってタイムラインでアニメーションさせる方が楽だ。 って感じ。 一応ActionScript2.0を「なにげなく(←ここがポイント)」やっていただけの僕からすると、まず、ActionScript3.0を勉強するにあたって、「クラス」ってやつの理解にいきなり苦しみだすわけで、多分僕と同じように苦しんだ方は多いと思います。 で、そのために参考書籍を買いあさる訳ですが、これがなかなか大変。 もちろん書籍の内容は非常に理にかなっていて、うなずくのは最もなんですがこのActionScript3.0、「クラス」という考えがとても重要らしく(別に2.0が重要じゃないとは言ってないが・・・
先日のセミナーに参加された皆さま、お疲れさまでした。 最後あたりにあったご質問のカスタムクラスのことで補足します。 MovieClipクラスを拡張・継承させて、MovieClipPlusというクラスを自作、元々無かったメソッドmoves()を作り、外部asファイルをflaファイルと同階層ではなく、下位階層など、フォルダでまとめる際に注意しなければいけない点です。 サンプルファイルはこちらからダウンロードしてください。 同階層にclassesというフォルダを作りました、その中にASファイルを入れると、まず今回のようなサンプルの場合、フレームアクションの最初に以下の様に書きます。 import classes.MovieClipPlus; import の後に、フォルダ名、フォルダが続く場合はさらにドットでつなげます。 詳しく言いますと、最後にそのフォルダ内のクラス名(クラス名とファイル名は一
↑↑↑読み込みに結構時間がかかります。 無償版で提供されているGoogle SketchUpを使って試してみました。 直感的に操作が出来て、直線的な3Dオブジェクトなら割と楽に使えそう・・・・と思いきや、完成し、書き出したらコレがちょっと微妙〜(さらに研究中)。 というわけで、今日はSketchUpで書き出したColladaファイルを普通にDAEクラスで使うという流れで進めていきたいです。(Sketchupクラスは調べてからにします。) なお、このエントリーは4月に行われる勉強会「splaaaash! Vol.3」の予告編・・・だと思っておいて下さい。 まず、SketchUpを起動します。 定規、邪魔ですね、選択してデリートします。 そして、四角形を書いてしまいます。 簡単に押し出せちゃいました。 その中に四角形を書いて、その大きさでくり抜くということも出来ます。 門を作ります、これもくり
僕の名刺です。チョイっとクリックしてみてください。 いつも縦の名刺ですが、今回ちょっと横向きなんてどうだろ?なんて思い、勝手にデザインを変えちゃいました、以外と僕の中では新鮮。 今回の勉強はDisplacementMapFilterクラスという、あんまり聞き慣れてなかったフィルターを使った練習をメモしておきます。 僕がよく生徒さんの前で講義に使うAdobe Photoshop等などには良く見かけるFilter機能ですが、これを使う事でワープ効果なんて表現も出来るらしい、ということで実験。 やってみると、波紋を出すポイントがずれて、最初は苦労したけどPointクラスとMatrixクラスをうまく使う事で座標をマウスクリックした座標に合わせる事が可能です。 private var bgImage:Sprite=new BGImage(); これは単純にリンケージしたムービークリップシンボルのスー
動的なクラス名で参照する場合に使うgetDefinitionByName。 例えば、こんな感じ。 private const TOTAL_NUM:int=30; //中略 for(var i:int=1;i<=TOTAL_NUM;i++){ var className:Class=getDefinitionByName("Class"+i) as Class; var obj:Object=new className(); addChild (Sprite(obj)); } クラス名が「Class1〜Class30」みたいに連番になっている場合。 ループ処理で参照したくなる。 ところが、そもそもgetDefinitionByNameとは、swf内で定義されていないクラス名を参照しようとすると・・・ 『 ReferenceError: Error #1065: 変数 Class1 は定義され
カーソルキーで動かしてください。 あんまり複雑にならないように、立体迷路を作ります。 XMLを読んで、地図を解析する。 XML通りに壁を作っていく(Cubeクラス) Cubeオブジェクトに貼るマテリアル(テクスチャ)には取り急ぎ1枚の画像で間に合わせる。 移動キャラにはこちらもまずは紙飛行機オブジェクト(PaperPlane)を使う 紙飛行機はカーソルキーで左右に向き(角度)を変える 紙飛行機の移動はカーソルキー上下で行う カメラが紙飛行機の後を追従していく カメラは角度も紙飛行機の方角を狙い続ける 紙飛行機が壁に衝突したらそれ以上進まないようにする まず、XMLの読み方としては、多くの方がEventDispatcherクラスを継承したXMLを読み込み完了したイベントを知らせるクラスを経由した後に解析する事が多いですが、ひとまず簡単に省略してしまいました。 外部に配置されているXMLファイ
Adobe Illustrator CS3から書き出したベクターデータ(svg形式)がvectorvisionで読める!papervision3Dで動かせる。すごい、軽くてきれいだし(ベクターだから当たり前か)割と簡単だったので、メモしときます。 画像は僕が主催で行っている、謎のクリエイター集団の勉強会、『Splaaaash!』のロゴマーク。 デザインはtommmmmmmmyさん。 次回の勉強会は2月、デジタルハリウッド大阪校で。 今までの通り、イラストレータで出来たアートワークを「別名で保存」しておきます。 何か聞かれてくるけど、そのまま保存しました。 さて、実はこのSVGファイル、中身をテキストエディタ等で開いたら分かるけど、純粋なXMLファイルです。 ということは、AS3の場合、いつもXMLファイルを読む時はURLLoaderクラスを使うんですが、この場合も全く例外ではありません、
一度画面をクリックされた方がよろしいかと思われます。 ココ最近、どうもFlashの話題でブログを埋めてますが、ワタクシ、最近Autodesk Mayaを勉強し始めました。今までの3DCGでは、Lightwave 3D,Shade,Vueなど、割とソフトの価格も安い方のソフトを使い続けていました。 やはり3Dは面白いです!最近のPS3のゲームのクオリティを見ると、確かにゲーム性が悪い訳ではないんだけど、その洗練された3DCGグラフィックだけで、何度もプレイして一人で感動してます。 「自分には一生こんなの作れないんだろうな〜」と思いながらも、ついに、ハイエンドなAutodesk Mayaを勉強し始めてしまうことにしました、頑張るぞ。 さて、3Dネタで申し訳ないんだけど、このままFlashで表現しやすいライブラリと言えば一番ポピュラーなPapervision3Dですが、最近面白くてこちらもハマっ
var speed:Number=3;//変数定義、値は大きければ大きいほど遅くなる my_mc.addEventListener(Event.ENTER_FRAME,myEnterFrame); function myEnterFrame(event:Event):void{ var targetMC:MovieClip=MovieClip(event.target);//一旦ターゲットされているMCを変数定義 targetMC.x+=(stage.mouseX-targetMC.x)/speed;//X軸に差分を追加 targetMC.y+=(stage.mouseY-targetMC.y)/speed;//Y軸に差分を追加 } 今のこの瞬間に位置しているムービークリップとマウスの位置を引いて、その差を毎フレームを変数speedの数だけ割る、結果徐々に間隔が狭くなります。 var sp
デザイン中心って人はなかなか「敷居が高い」って片付けられてしまって、それがさらにモチベーションを遠ざけてしまいがちなActionScript3.0。 参考書籍を見て、いきなり分からないという方は、それ以前の予備知識が必要かもしれないのですが、それより先に簡単なものから触って動かしてしまおう!という考えで、始めていきたいと思います。 生徒さんからの質問で最近多い(よくデザインを先攻、勉強している生徒さん)Flash ActionScript3.0。 じつはこの3.0からFlashのためだけの言語じゃなくて、AdobeAIRなどのアプリケーション開発言語としても注目されてるんで、将来的に身につけるスキルとしては有利かもしれませんね。 でも・・・ デザイン中心って人はなかなか「敷居が高い」って片付けられてしまって、それがさらにモチベーションを遠ざけてしまいがち。 僕もそうだけど、プログラミング
はい、ここまで順調にすすんだ方はもうだいぶプログラムという文字や数字の集まりに何となく気持ちが近づいてきたかなって思ってますが、どうでしょう? まあ、いままでは(当分この先も)理屈を抜きに、いったんこんな感じで「打ってみて」「試してみよう」的なノリで進んだ訳ですが、最初はこれでいいです、とにかくやってみて後からその意味を考えて、サンプルのコードをいじってみたり出来たらさらに一歩前進かな? 最初っから難しいプログラムじゃなくって、自分が理解できている範囲、挑戦できる範囲でいじってみる、そして意味が分かるようになってさらに高度なものにも挑戦しましょう、という順序に進みましょう。 プロパティの値を取得してみよう 前に出てきました、「プロパティ」。 意味を覚えてますか? 例えば・・・ あなたの出身地プロパティの値は?・・・鹿児島市 あなたの現住所プロパティは?・・・大阪市 これをflashの世界に
前回はプロパティの値をテキストフィールドに挿入してしまう方法を学習しました。 今までは、ただ、画面上の四角いオブジェクトのプロパティの値(x軸のピクセル数とか)を取得する事ができましたが、今度はマウスの動きを取得しましょう。 Flashって「マウスの動き」によって何らかが変化するというものはよく見かけますよね? それをやりましょう。 まずはいつものように四角いオブジェクトを作って「square_mc」と名前をつけて、以下のコードを1フレーム目にコピペして下さい。 this.square_mc.stage.addEventListener(MouseEvent.MOUSE_MOVE,myMove); function myMove(event:MouseEvent):void{ this.square_mc.x=stage.mouseX; this.square_mc.y=stag
次のページ
このページを最初にブックマークしてみませんか?
『http://akibahideki.com/』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く