2009年12月29日火曜日

[制作]福井市ウェイトリフティング協会のサイトデザインをしました。

福井市ウェイトリフティング協会_1262012651968

→福井市ウェイトリフティング協会

実は福井市のウェイトリフティング協会というものに所属しております。しかも一応役員w

今年の4月に
会長 「協会のホームページつくってよー」
僕 「はいー」
みたいなやりとりがありましたとさ。

いろいろと忙しかったのでとりあえずFC2ブログのテンプレートで形だけつくって公開していたのですが、これじゃいかんなと思って急遽デザイン作成。思い立ったが吉日根性でテンプレートの変更まで4時間の特急作業でなんとか仕上げました。

まだ中身のコンテンツは作りかけなのですがとりあえず義理ははたしたかなと。
これで今年の心のタスクがひとつ減りましたw

サイトというよりはブログですね。
ボチボチと更新していきます。(最近ジムいってないなー。。)

あ、ただいま新規会員募集中です。
入会希望の方は練習場に直接行かれるか、僕にご連絡くださいませー。

夏にむけて割れた腹筋を作りましょうw

[jQuery]シンプルなドロップダウンメニュー

412

今日仕事中に使うことがあって調べてたのでメモメモ。

→Simple jQuery Dropdowns
→デモ


jQueryでのドロップダウンメニューです。
使い方は簡単でダウンロードしたファイルの中にあるJSファイルとCSSファイルを読みこませて、
HTMLファイルに書かれている内容を参考に使ってください。

こういうドロップダウンのメニューって個人的に好きじゃなかったんですけど
使えるようになったらなんとなく好感度アップしましたw

勝手なもんですね。

2009年12月21日月曜日

[Flickr]Flickrの画像をスライド表示してくれる「Embed Flickr Slideshows」

FlickrSlideshows

今更感が漂いますが、最近知ったのでメモ的エントリー。

Flickrの画像をスライド表示させてサイトに埋め込みたい。そんな時に使えるサイトがコチラ。
Embed Flickr Slideshows

あらかじめFlickrで画像のセットを用意しておいて、そのセットのURLを上記サイトの
「URL of User, Set or Group」というところに入力して、あとは任意でタグやサイズを入力して、最後に「Create Slideshow!」というボタンをクリックするとタグを吐き出してくれます。

あとはそのタグをサイトに埋め込むだけ。

簡単に画像を公開したいときに使えそうですね。


Created with Admarket's flickrSLiDR.

2009年12月9日水曜日

[Progression]Progression コンポーネントスタイルでボタンをアニメーション させる方法

091219

先日のエントリーで作品自体は公開したのですが作り方については書いてなかったのでメモ。

今回はボタンのアニメーションの作り方についてのエントリー。
→サンプル

  1. 新規シンボルでボタンを作成

  2. 「color」レイヤーにボタン画像を描画

  3. 「コンポーネント」レイヤーに「RollOverButton」コンポーネントを設置

  4. 「label」レイヤーを作成。1フレーム、10フレーム、20フレーム目にキーフレームを挿入してそれぞれに必要なラベル名を記入

  5. 下の画像のような形でモーショントゥイーンを作成する。

  6. 1フレーム目はアルファ60%


これで完成となります。

1

大事なのは「label」レイヤーに書いた各ラベル名の意味
【up】・・・ムービークリップからロールアウトした際に表示するフレームラベル、またはフレーム番号を設定します。
【over】・・・ムービークリップをロールオーバーした際に表示するフレームラベル、またはフレーム番号を設定します。
【current】・・・ボタンに設定された移動先が Progression のカレントシーンであった場合に表示するフレームラベル、またはフレーム番号を設定します。

他には、
【down】・・・ムービークリップをクリックした際に表示するフレームラベル、またはフレーム番号を設定します。

上記は公式サイトより引用させていただきました。

※上記内容には一部間違った解釈で書いている内容があります(ラベルの所)。
近日中に修正いたします。ご迷惑をおかけしまして申し訳ありません。
m(_ _)m (09.12.09)


※修正しました。ご指摘いただいた@mathatelle 氏に感謝します! (09.12.13)

ろそろクラススタイルの勉強したいと思います。

立ちふさがるActionScript...orz
俺は負けんぞー!

2009年12月7日月曜日

shirokurok制作秘話 ブログパーツ編

さて、先日は時計のFlashの作り方を書きましたが、今度はそれをブログパーツとして公開する方法を。

1.ブログパーツ表示用JavaScriptを用意する。
内容は以下となります。(ファイル名はclock.jsとしました。)
var gsTickerSwf_AN = "swfファイルまでの絶対パス";

var gsTickerId_AN = "Ticker_AN";

MakeTicker_AN();

function MakeTicker_AN(){
var sTickerUrl = gsTickerSwf_AN;

var sHtml = "";
sHtml += '<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="横のサイズ" height="縦のサイズ" id="' + gsTickerId_AN + '" align="middle">';
sHtml += '<param name="allowScriptAccess" value="always" />';
sHtml += '<param name="movie" value="' + sTickerUrl + '" />';
sHtml += '<param name="quality" value="high" />';
sHtml += '<param name="bgcolor" value="#ffffff" />';
sHtml += '<param name="wmode" value="transparent" />';
sHtml += '<embed wmode="transparent" src="' + sTickerUrl + '" quality="high" bgcolor="#ffffff" width="横のサイズ" height="縦のサイズ" name="' + gsTickerId_AN + '" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />';
sHtml += '</object>';

document.write(sHtml);
}

それをサーバーの任意の場所にアップします。

2.貼り付け用のJavaScriptを用意する。
先ほどアップしたJavaScriptファイルへの絶対パスを記述したタグを用意します。
内容はコチラ。

<script language=”JavaScript” type=”text/javascript” src=”http://shirokuro331.net/flash/blogparts/clock.js” ></script>

やる前は結構敷居の高いものかと思ってましたけど、やってることはFlashを実行させるJavaScriptをページ内のJavaScriptタグで実行させて表示させてるって感じですね。

これきっかけ発展したものを作っていきたいです。

参考にさせていただいたのはコチラのサイト。感謝! ><
フローティングブログパーツの作り方、こっそり教えます(前編)

2009年12月6日日曜日

wordpressのjQuery lightboxプラグインがいい感じ♪

091205

というわけで画像をクリックしたときにlightbox風に拡大表示されるプラグインをいれちゃいました。

下の画像をクリックすると拡大表示されます。

2

使い方はwowrdpressの管理画面からインストールして<a>タグに[rel="lightbox"]属性を追加で記述するだけ。
[title="任意テキスト"]入れるとそのテキストも表示されます。

公式のサイトはコチラなのかな?
Wordpress jQuery Lightbox Plugin

ちなみに画像は先日会社の人と行った韓国旅行の1シーン。
はい、無許可ですがなにか?w

2009年12月5日土曜日

shirokurok制作秘話 Flash時計製作編

さて、このブログの右のほうにある時計ブログパーツ「shirokurok」。
その制作秘話を公開しましょう。

とは言っても秘話なんてなく、ただの備忘録ですw

091215

  1. テキストツールで適当な大きさのテキストエリアを作成
    (テキストの種類はダイナミックテキスト)

  2. プロパティで変数のところに任意の名前を入力(nowTimeとする)

  3. 「action」レイヤーを作成。以下を記述。
    nowDate = new Date(); // デートオブジェクトの作成(必ず必要)
    nowHour = nowDate.getHours(); // 現在の時
    nowMinutes = nowDate.getMinutes(); // 現在の分
    nowSeconds = nowDate.getSeconds(); // 現在の秒

    nowTime = nowHour + ":" + nowMinutes + ":" +nowSeconds; // 先に設定しておいた変数に値を入力

  4. 上記の手順まででは今現在の時間が一度表示されて終りなのでタイムラインで1フレーム追加する。
    (要は1フレーム目の処理を繰り返し実行させている)

  5. 5.完成。意外と簡単w


簡単な流れはこんな感じ。

次はブログパーツとしての公開方法をまとめようっと。

ブログパーツ作りました。



このブログの右→にも表示されていますが、時計のブログパーツ作りました。
自分のFlash勉強用です。その名も「shirokurok」!!

今はβ版ということで単純に時間を表示するだけですが、ここから発展させていきたいと思ったのでブログポストします。
なにか人に利用してもらえるような面白アイデアのブログパーツを作っていきたいです。

ちなみに、もし「shirokurok」を自分のブログに貼りつけていただける方がいらっしゃいましたら以下のコードをコピペしてください。

<script language="JavaScript" type="text/javascript" src="http://shirokuro331.net/flash/blogparts/clock.js" ></script>

よろしくおねがいしますーす。

2009年12月3日木曜日

画像にメッシュ効果を加えるチュートリアル

mesh

いろんなサイトで紹介されてますね。
使えそうだなーと思うの自分用のメモ。

■元ネタのサイトはコチラ
Create An Airforce Inspired Mesh Pattern Overlay

上記サイトの内容をわかりやすく日本語でまとめていただいてるサイトはコチラ
Design Develop

勉強になります。

2009年12月1日火曜日

Flashでアニメーションなポップアップウィンドウ

0

画面内のボタン(今回はしたの丸3つ)をクリックすると、うにょんとアニメーションでポップアップウィンドウが出てくるFlashの作り方メモです。action script2.0で作ってます。

→デモはこちら

とりあえずはひとつの動きを作るために以下をメモ。

1.ボタン用ムービークリップ(mc_red)の作成

2.ポップアップウィンドウ用のムービークリップ(mc_window)の作成
レイヤーは下図のとおり。(クリックで拡大表示)

1

 a.「window」レイヤーに矩形の描画
  1フレーム w20*h20 x0 y0
  15フレーム w220*h220 x-100 y-90
  20フレーム w200*h200 x-90 y-80
  各フレーム間でシェイプトゥイーンを作成する。

 b.「close」レイヤーにcloseと書く

 c.ボタンの作成。新規シンボルでボタンを作る(名前は任意)

 d.「btn」レイヤーに4でつくったボタンを配置する

 e.ボタンに「btn_close」というインスタンス名をつける(プロパティ)

 f.「label」レイヤーの30フレーム目にキーフレームを挿入。「close」というラベル名をつける

 g.「action」レイヤーの25フレーム名に下記のaction scriptを記述

  stop();
   btn_close.onPress = function(){
   gotoAndPlay("close")
  };

 h.30フレームからウィンドウが閉じるようなアニメーションを作る(2を参考に)

 i.最終フレームの「action」レイヤーにキーフレームを挿入。action scriptを記述
  stop();

3.「シーン1」に戻ってボタンのシンボル作成(btn_red)

4.「mc」レイヤーを作ってmc_redを任意の位置に配置

5.「btn」レイヤーを作ってmc_redの上にbtn_redを配置。インスタンス名を「btn_red」とする

6.「window」レイヤーを作って11フレーム目にmc_windowを配置

7.「label」レイヤーを作って10フレーム目に「red」というラベル名をつける

8.「action」レイヤーを作って1フレームに以下のaction scriptを記述
stop();
btn_red.onPress = function(){
gotoAndPlay("red")
};

9.11フレーム名にキーフレームを挿入して以下のaction scriptを記述
stop();
btn_red.onPress = function(){
gotoAndPlay("red")
};

TLは下図のような形
2

今まで得た知識の応用でなんとかできた感がある。
そういうのって成長したっぽくてうれしいw

記事内、なにかおかしなところがありましたらご指摘いただけたら幸いです。