[Flash]FLV動画を連続再生させるFlash

ちと必要になったので作りました。
忘れないようにメモ。



成果物はこちら。　→別枠で動画が開きます。

開くと動画が再生されるので止めたい時は真ん中のボタン。
再生させたいときは左のボタン。
初期段階で音声をミュートにしているので音声を鳴らしたい場合は右のボタンを押す。
というシンプルな感じのものです。

3つのFLV動画を連続して再生させるようにしています。

手順としては、
コンポーネントパネルからFLVPlaybackをステージ上において、インスタンス名を任意の名前に（ここではｍｙPlayer）。
続いてコンポーネントパネルからPlayButton、PauseButton、MuteButtonを配置してそれぞれのインスタンス名をplayBtnpauseBtn、muteBtnとする。
swfファイルと同じディレクトリに「video」フォルダを作ってそこにFLVファイルを格納。今回は1.flv、2.flv、3.flvとする。
ルートの1フレームに以下のasを記述（actionscript3.0）。

import fl.video.*;
//videoファイル名を配列で定義
var videoSource:Array = new Array("1.flv","2.flv","3.flv");

//video総数、初期再生させるvideo番号、直前に再生されたvideoのファイル名取得変数
var videoTotal:Number = videoSource.length;
var videoNumber:Number = 1;
var playedVideo:String;

//video playerの初期設定
myPlayer.autoPlay = true;
myPlayer.source = "video/"+ videoSource[videoNumber-1];
myPlayer.playButton = playBtn;
myPlayer.playButton.buttonMode = true;
myPlayer.playButton.useHandCursor = true;
myPlayer.pauseButton = pauseBtn;
myPlayer.pauseButton.buttonMode = true;
myPlayer.pauseButton.useHandCursor = true;
myPlayer.muteButton = muteBtn;
myPlayer.muteButton.buttonMode = true;
myPlayer.muteButton.useHandCursor = true;

//1つのvideoファイル再生が終わったときの処理
function displayNextSource(event:VideoEvent) {
if (videoNumber>=videoTotal) {
videoNumber=1;
} else {
videoNumber++;
}
myPlayer.source = "video/"+ videoSource[videoNumber-1];
}
myPlayer.addEventListener("complete", displayNextSource);

//最初からミュート状態にするため
muteBtn.on_mc.dispatchEvent(new MouseEvent(MouseEvent.CLICK));

参考にさせていただいたのはこちらのサイト
→Flashのお勉強

感謝です！

[css]親ボックスからはみ出して表示させるスタイルシート

仕事で使うことがあったのでメモメモ。



上の図のように親ボックスから画像等をはみだして表示させたいときcss記述。

#sample img.move{
float:right;
zoom:1;　// IE6
position:relative;　// IE6
margin:-30px -30px 0 1.2em;
}

marginの値をマイナスにするだけでもできるけどIE６でうまいこと表示されないので上記のような記述になります。一応HTMLも下記に。

<div id="sample">
<img src="./tt.jpg" alt="" />
<p>テキストテキストテキストテキストテキストテキスト<br />
テキストテキストテキストテキストテキスト<br />
テキストテキストテキストテキストテキストテキスト</p>
</div>

こんな感じで。

float:right;

[css]li要素をfloatさせた時の注意点

ちょっと前まではまってたのでメモ的エントリ。

よくli要素をfloat:leftさせてテキストリンクのナビゲーションを作ったりするのですが、FireFoxではキレイに改行されてるのにIEで見ると親ボックスの幅いっぱいのところのテキストは下図のように改行されていました。



（上図li要素のスタイルシート）
li{
float:left;
margin-left:1.1em;
margin-bottom:0.5em;
background:#eee;
white-space:nowrap;
}

仕方ないので1行毎ul要素で区切っていたのですが少し調べてみたら簡単に解決しました。
li要素のスタイルシートにwhite-space:nowrap;と記述するだけでした。



（上図li要素のスタイルシート）
li{
float:left;
margin-left:1.1em;
margin-bottom:0.5em;
background:#eee;
white-space:nowrap;
}

問題解決♪

[勉強会]GAE Hackathon in 福井に参加してきました。

2週にわたり開催されました「GAE Hackathon in 福井」に行ってきました。

Hackathonということでデベロッパー向けのイベントなので興味はあるけどデザイナーは参加しても問題ないのか？ということを運営に方に聞いてみたところ大丈夫というお返事をいただいたので参加させていただきました。

まずは1月27日に前準備としてIdeathonへ行ってきました。
Ideathonではチーム分けと作るサービスのアイデアを考える場です。
なにかtwitterを使ったサービスという漠然な思いだけで参加したので他の方のアイデアを聞くことができてとても参考になりました。

その後はGAEについての事前勉強会が行われました。
開発環境の準備と開発方法、簡単なデモなどが運営の方から説明がありました。
が、正直何を言っているのかがわかりませんでしたww

やはりデベロッパー勉強会は自分にとって敷居が高い。。もっと勉強が必要です orz

当日の心境を表したイラスト↓


おいといてｗ

そして今日、本番となるHackathonが開催されました。
この1週間は作るサービスのUIを作ってました。デザイナーとしてできる数少ないことなので頑張りましたw

作ったサービスは名づけて「tweetrend」です。
実はまだGAE上で動いてないのでとりあえずは画面キャプチャだけ。



概要としてはtwitterでURLが含まれているつぶやきを抽出し人気順に表示するサイトです。
細かい内容は下記PDFをご覧ください。

→hackathon（PDF123KB）

Hackathonな風景。







結論としていい経験させていただきました！
皆でがんばったおかげで見事入賞も果たしました。投票していただいた方々、ありがとうございます！

懇親会では貴重なお話もきかせていただきましたし参加してよかったです！
また福井で開催されるようなので是非参加したいです。

わざわざ京都から来ていただきました京都GTUGの皆さん、運営の皆さんお疲れ様でした。
今回チーム組ませていただいた@mitukiiiさんと@mirutoverさんと残念ながら参加できなかった@omyuさんもお疲れ様でした！
機会があったらまたやりましょう！

[css]フォームデザインの参考になるサイト

とある用事でフォームページを作っているのですが、ただのフォームじゃ面白くないなー、と思い前からやりたかったフォームのinput要素部分をデザインしてみました。

デザイン参考になるサイトを見つけたのでメモメモ。



・Search Boxes

以下のような感じ。（上記画像用のソースじゃないです。あくまで参考。）

HTML

1. <form id=”searchform5″ method=”get” action=”" >
2. <input class=”isearch5″ type=”text” name=”keywords” id=”keywords” />
3. <input class=”ibutton5″ type=”submit” value=”" />
4. </form>

CSS
#searchform5 {
display: block;
width:272px;
overflow:hidden;
}
#searchform5 input {
float:left;
border:none;
margin:0;
}
#searchform5 .isearch5 {
background:url(images/isearch5.png) left top no-repeat;
width:224px;
height:12px;
padding:8px;
color:#fff;
font-size: 10px;
}
#searchform5 .ibutton5 {
background:url(images/ibutton5.jpg) top left no-repeat;
width:31px;
height:28px;
cursor: pointer;
}

積極的につかっていきたいです。