2012年11月30日星期五

老二出生

紅色死神發表於 2012年11月30日星期五 11月 30, 2012 / 沒有留言
標籤 2012, 小朋友

過了預產期，送去催生，這次小朋友很快就出來了，不趕還真的不知道要在肚子裡待多久。

總之家裡多一個成員啦。

老二出生

2012年11月29日星期四

互動裝置設計

紅色死神發表於 2012年11月29日星期四 11月 29, 2012 / 沒有留言
標籤 2012, 互動設計, 研究所, AR

最近上課學互動裝置的東西，知道原理後就知道該怎麼玩了，不過學校是用Visual Studio開發的，有時間應該來用比較熟悉的工具寫一個看看。

體感泡泡

這個是上面會掉泡泡，手去摸可以弄破泡泡。

掃東西

這個只要有東西移過去，散在上面的東西就會散開，可以用來投影在地板或牆壁上，人移過去東西就會散開的效果。

AR的話大家都有看過了，手邊的工具要製作起來就很輕鬆。

2012年11月28日星期三

資訊圖表蒐集站- info graphic world

紅色死神發表於 2012年11月28日星期三 11月 28, 2012 / 沒有留言
標籤好網站, info graphic

info graphic world

info graphic(資訊圖表)是近年來很夯的一種資訊表現方式，一張好的info graphic既可吸引人的注意，也可以清楚表達想要表達的資訊。

info graphic world就是蒐集info graphic的網站，一起到上面找靈感吧。

2012年11月27日星期二

Javascript Territory- 蒐集javascript library

紅色死神發表於 2012年11月27日星期二 11月 27, 2012 / 沒有留言
標籤好網站, javascript, jquery, web

jster

這是一個蒐集javascript library的網站，有想要的js效果寫不出來，也可以來看看。

2012年11月26日星期一

css 畫三角形

紅色死神發表於 2012年11月26日星期一 11月 26, 2012 / 沒有留言
標籤 css

用純css畫三角形。

首先準備html，用一個div就可以製作了。

<div class="arrow-up"></div> 

<div class="arrow-down"></div> 

<div class="arrow-right"></div> 

<div class="arrow-left"></div>

css如下

view plain copy to clipboard print ?

.arrow-up { width:0px; height:0px; border:10px solid; border-color:transparent transparent black transparent; border-style:dashed dashed solid dashed; }
.arrow-down { width:0px; height:0px; border:10px solid; border-color:#f00 transparent transparent transparent;/ border-style:solid dashed dashed dashed; }
.arrow-right { width:0px; height:0px; border:10px solid; border-color:transparent transparent transparent green;/ border-style:dashed dashed dashed solid; }
.arrow-left { width:0px; height:0px; border:10px solid; border-color:transparent blue transparent transparent;/ border-style:dashed solid dashed dashed; }

可以調整一下邊框的顏色跟寬度，不要只有一面不透明，會有不一樣的效果喔。

最後效果如下。

2012年11月25日星期日

[PHP] 圖片置中使用getimagesize

紅色死神發表於 2012年11月25日星期日 11月 25, 2012 / 沒有留言
標籤 css, php

一般社群網站的個人圖像，大多在列表顯示的時候都會是正方形的，這樣會比較整齊，可是不會每個人都上傳圖片的時候都傳正方形的圖片，所以在顯示的時候就要做一些設定。

首先準備一個div包著img，讓外層的div的position為relative，並設overflow:hidden，內層的img則把position設為absolute，這樣可以先避免圖片超出區塊破版。

處理最好是在html讀取的時候就處理，所以用php來取得圖片的長寬，使用GD函式庫的getimagesize。

view plain copy to clipboard print ?

$arr = getimagesize("圖像");
/*
* 回傳陣列$arr
* $arr[0] 為圖像的寬度
* $arr[1] 為圖像的高度
* $arr[2] 為圖像的格式，包括jpg、gif和png等
* $arr[3] 為圖像的寬度和高度，內容為 width="xxx" height="yyy"
*/

取得後判斷長寬哪個比較大，讓小的那個符合div的寬度，並算出大的那個的大小。
最後在計算(較大邊-div長度)/2，求出偏移量，再用行內的style把值給丟進去就可以了。

2012年11月24日星期六

GleeFB終止服務公告

紅色死神發表於 2012年11月24日星期六 11月 24, 2012 / 沒有留言
標籤 GleeFB, GleeShare

親愛的GleeFB會員們：

感謝各位會員夥伴們一直以來的支持。GleeFB的目標是與會員們共創廣告分享的價值並分享廣告利潤，但由於近期Facebook推出了類似的贊助廣告，讓GleeFB的業務推廣日益困難。基於對會員們的重視及承諾，我們仍努力維持每日活動量，但由於業務推展持續不如預期，所獲得的廣告預算難以支持整個模式的運作，使我們不得不作出暫停GleeFB運作的決定。

GleeFB App的分享活動至少仍將持續至2012/11/30，i-bon兌換服務則持續提供至2012/12/31，請各位會員夥伴把握時間進行既有點數的兌換，再次感謝大家的熱情支持！

GleeFB團隊敬上

一個服務的終止其實並沒有什麼，重要的是可以遇到一群喜歡的團隊，我覺得這幾年我遇到的都是一些很值得信賴的團隊，只要有信念，就一定可以改變這個世界的，我是這麼相信的。

當然我們也有下一步的計畫啦.. 敬請期待。

[GIGA合金] Final斷空我

紅色死神發表於 11月 24, 2012 / 沒有留言
標籤模型, GIGA合金, srw

ファイナルダンクーガ

我認識超獸機神很久，他在我玩的第一款機戰(第四次機器人大戰)就登場了，印象中第四次最後要在超獸機神跟康巴拉V選一組人留到最後，那時的攻略建議留康巴拉V，因為多一個人的精神指令多好用很多，不過後來這兩款作品在機戰中的登場，康巴拉V就只是精神庫，而斷空我大多都是一線的強機。

超獣機神ダンクーガ

超獣機神ダンクーガ

這個是OVA的翅膀，TV版的比較呆沒那麼好看。

window.location.href和window.location.replace的差別

紅色死神發表於 11月 24, 2012 / 沒有留言
標籤 javascript

javascript的導頁可以用window.location.href和window.location.replace()，差別在於

view plain copy to clipboard print ?

window.location.href("url")

是導到新的頁面，離開後按上一頁、下一頁都可以回到這頁。

而

view plain copy to clipboard print ?

window.location.replace("url")

則不會紀錄上一頁跟下一頁，可以用來作過渡網頁。

另外，

view plain copy to clipboard print ?

window.location.reload()

可以用來重新讀取網頁。

2012年11月22日星期四

Cover Flow Web

紅色死神發表於 2012年11月22日星期四 11月 22, 2012 / 沒有留言
標籤影片, After Effect, web

把網站做成cover flow有沒有搞頭，理論上是做得到，可是不見得會是web上好的瀏覽方式，下面是AE作的示意圖，我也用js寫了一個demo，只是效果還差很多，真的有要進行實作再好好調整。

2012年11月18日星期日

AS 3.0 限制拖曳範圍

紅色死神發表於 2012年11月18日星期日 11月 18, 2012 / 沒有留言
標籤 AS 3.0, flash

之前一個專案要做flash的拖曳效果，因為也還滿常有機會用到的，做個筆記。

主要要偵測滑鼠按下及起來，用startDrag(false, new Rectangle(x, y, width, height))去限制他的拖曳範圍就可以了。

view plain copy to clipboard print ?

drag_mc.addEventListener(MouseEvent.MOUSE_DOWN,dragme);
function dragme(e:MouseEvent){
drag_mc.startDrag(false, new Rectangle(x, y, width, height));
}
drag_mc.addEventListener(MouseEvent.MOUSE_UP,stopdragme);
function stopdragme(e:MouseEvent){
drag_mc.stopDrag();
}

[轉輪科技] アークグレンラガン

紅色死神發表於 11月 18, 2012 / 沒有留言
標籤模型, 轉輪科技, srw

アークグレンラガン(ARC GURREN LAGANN)

アークグレンラガン(ARC GURREN LAGANN)

這隻其實是紅蓮螺巖各個型態中我覺得最醜的，但實在也是玩了機戰，最後才又決定買的。

アークグレンラガン(ARC GURREN LAGANN)

アークグレンラガン(ARC GURREN LAGANN)

2012年11月17日星期六

非常勸敗每日限時好康 for iOS

紅色死神發表於 2012年11月17日星期六 11月 17, 2012 / 沒有留言
標籤 css3, GleeShare, html5, iOS, javascript, jquery, mobile app, mobile web

之前介紹的Android版VeryBuy App，現在iOS版的也上線了，照上一篇說的，核心是傳說中的HTML 5，不過包成App有對各個地方作優化，效能還是比不上全原生的app，但開發速度卻可以快非常多。

VeryBuy for iOS

app store上的VeryBuy

jQuery 水平slider

紅色死神發表於 11月 17, 2012 / 沒有留言
標籤 css, css3, javascript, jquery

horizontal_slide

最近做的一個slider，當滑鼠移到其中一個圓圈上面，就會滑到那一頁去。

準備像這樣的html

<div class="slide">

<div class="slide_img">

<img src="pic1.jpg">

<img src="pic2.jpg">

<img src="pic3.jpg">

<img src="pic4.jpg">

</div>

<ul class="pagenation">

</ul>

</div><!--slide-->

設定一下css，了解position的原理就可以了。

先根據有多少張圖，長出切換的圈圈。

view plain copy to clipboard print ?

$(".slide_img img").each(function(){
$(".pagenation").append("<li></li>");
});

再根據圖片的數量調整div的寬度。

view plain copy to clipboard print ?

$slideImgWidth=$i*(picture width);
$(".slide_img").css("width",$slideImgWidth);

最後再偵測是在哪一個圈圈，移動圖片的位置就好了。

view plain copy to clipboard print ?

$(".pagenation").on("mouseenter", "li", function(e){
$pageNum=$(this).index();
$moveWidth=0-$pageNum*(picture width)+"px";
$(".slide_img").animate({left: $moveWidth });
});

Demo

2012年11月14日星期三

[SR超合金] 勇者王GAOGAIGAR+勝利之鍵

紅色死神發表於 2012年11月14日星期三 11月 14, 2012 / 沒有留言
標籤模型, srw, Super Robot超合金

勇者王ガオガイガー

故事講述2003年，一個神秘巨型機械生命體「EI-01」出現，把當時是太空人的獅子王凱的太空船擊落，同一時間，一架神秘的機械獅子「伽立歐」（Galeon）出現攻擊EI-01，救起了獅子王凱，而EI-01則墜入地球，從此行蹤不明。伽立歐帶來了名為「G石」的動力源以及關於外星生命「腦核」（Zonder）的情報。人類除了以G石的能源將凱救活、並改造成機器人外，也以伽立歐的外星科技情報製造了一系列對抗腦核的武器與機械，日本政府為了對抗腦核而成立了地球防衛勇者隊3G（Gutsy Geoid Guard）。

在EI-01出現前，伽立歐就已出現過地球人之前，他將一個小男孩交給了沒有孩子的天海夫婦，後者將孩子取名為「天海護」，並以一般小學生的身份生活著。2005年，東京都出現了最初的腦核—EI-02，開始對人類發動攻擊，而地球的未來就依靠地球防衛勇者隊3G的隊員，故事也由於展開。

勇者王ガオガイガー

勇者王ガオガイガー

2012年11月11日星期日

北科大FLASH微積分講義

紅色死神發表於 2012年11月11日星期日 11月 11, 2012 / 沒有留言
標籤 AS 3.0, flash

微積分

這是好一陣子前完成的微積分講義，用Flash寫的，現在這種類型的案子，就會考慮用js來寫了。

微積分

左邊是個章節。

微積分

點右邊可以看到各頁的內容。

技術上沒什麼特別的，大概就有用到flash內建的component scrollpane來做有卷軸的區塊，這個在html裡面就很簡單，在flash裡面有一點麻煩。

Flash AS3 清掉MoieClip上Loader讀取進來的東西

紅色死神發表於 11月 11, 2012 / 沒有留言
標籤 AS 3.0, flash

這個是要清空MovieClip上之前用loder讀取進來東西，可以用的方法。

view plain copy to clipboard print ?

while(mc.numChildren > 0){
mc.removeChildAt(0);
}

參考：
AS3 How to remove previous loaders

2012年11月10日星期六

Flash AS3.0讀取外部文字檔

紅色死神發表於 2012年11月10日星期六 11月 10, 2012 / 沒有留言
標籤 AS 3.0, flash

用actionsctip 3讀取外部文字的方法。

view plain copy to clipboard print ?

var request:URLRequest=new URLRequest("data.txt");
var loader:URLLoader = new URLLoader();
loader.load(request);
loader.addEventListener(Event.COMPLETE,textLoad); //要加這個才讀的到
function textLoad(e) {
loadText.text=loader.data;
}

jQuery設定div高度等高

紅色死神發表於 11月 10, 2012 / 沒有留言
標籤 javascript, jquery

如果要用div去製作以往表格的效果，可能會遇到左右沒辦法對稱的問題，這時候可以先抓取原本的高度，然後找去其中最大的值，之後再動態讓Dom去改變高度就可以了。

view plain copy to clipboard print ?

height1=$(selector1).height();
height2=$(selector2).height();
maxHeight=Math.max(height1=, height12);
$(selector1, selector2).height(maxHeight);

2012年11月9日星期五

Diving innovation in nature user interface

紅色死神發表於 2012年11月9日星期五 11月 09, 2012 / 沒有留言
標籤 2012

Diving innovation in nature user interface

今天去參加一個論壇，講的是UI跟UX。

這次聽到所謂的NUI，NUI是UI的一種，講者從開始有電子產品的文字介面TUI(Text User Interface)，用圖形的GUI(Graphical User Interface)，到這次提到的NUI(Nature User Interface)，是一種UI的演進過程，因為載具的多元化跟進步，原本的GUI是不夠的，於是就有人提到NUI這個概念，而這個概念其實也成型十幾年了。

你可以想像電影關鍵報告，那種在空中一些手勢就可以操作機器，就是所謂的NUI，也就是除了介面外，也要考慮到操作的流程跟動作的UI。講者也說到AE是用來溝通設計師跟工程師的一個很重要的工具，我還滿開心兩個都會的，AE可以來作概念，js可以拿來實作，都是很棒的事情。

然後當然最開心的就是抽中大獎囉

Diving innovation in nature user interface

第一次知道那種抽到大獎的人的感覺，我還以為這種幸運總是跟我絕緣的呢。

2012年11月8日星期四

[Robot魂] ビルバイン(比爾拜因)

紅色死神發表於 2012年11月8日星期四 11月 08, 2012 / 沒有留言
標籤模型, ROBOT魂, srw

Billbine

機器人大戰裡面我很喜歡的系列聖戰士ダンバイン，終於也在Robot魂上登場了，第一款就是後繼機ビルバイン，大多時候有了後繼機就不會回頭買一開始主角駕駛的機體，所以不久後出的ダンバイン我就沒收了。

Billbine

Billbine

2012年11月6日星期二

非常勸敗每日限時好康 for Android

紅色死神發表於 2012年11月6日星期二 11月 06, 2012 / 沒有留言
標籤 Android, css3, GleeShare, html5, javascript, jquery, mobile app, mobile web, php

非常勸敗每日限時好康

最近完成的app作品，是跟幾個朋友用傳說中的hybrid方法開發出來的app，內容是html+css+js呈現，再用原生的程式包起來完成的，在開發的過程中也碰到一些有趣的問題，加上合作的朋友都很厲害，所以這個app是在彈性、開發速度和效能取得很好平衡的一隻app。

VeryBuy

android跟iOS是差不多同時完成的，不過因為apple審核比較久的關係，所以目前只有android上看的到，iOS還在審核中。

Google Play上的非常勸敗每日限時好康

非常勸敗每日限時好康提供來自於台灣各大購物網站的優惠、免運訊息、每日超過100檔的優惠情報，是女生逛網拍、找團購、上網購物的好姊妹。

非常勸敗每日限時好康是由非常勸敗(Verybuy)製作，每日提供來自於購物中心、拍賣、17P好康、7Net、瘋狂賣客、UDN買東西、PCHome等數十家購物網站的優惠免運訊息、每日超過100檔的優惠情報，是女生逛網拍、找團購、上網購物的好姊妹。

crc32

紅色死神發表於 11月 06, 2012 / 沒有留言
標籤 php

crc32是一個用來產生驗證碼的方法，可以用來在資料傳輸時加密，最近的專案有用到剛好也學起來。

用法：

view plain copy to clipboard print ?

int crc32 ( string $str )

簡單範例

view plain copy to clipboard print ?

<?php
echo crc32('example');
?>

將數值轉正

view plain copy to clipboard print ?

$crc32=printf("%u", $crc32);

2012年11月4日星期日

參觀保安宮 & 台北孔廟

紅色死神發表於 2012年11月4日星期日 11月 04, 2012 / 沒有留言
標籤 2012, 人生, 研究所

保安宮

這學期一門課，老師常帶我們去參觀各種建築物，有導覽感覺真的差很多，建築物都有他的許多精神在裡面，這次去保安宮還有台北孔廟，學到了龍生九子，不知道這個典故是真的龍有這麼多兒子，還是古人想像而來的。

2012年11月3日星期六

章魚小籤籤

紅色死神發表於 2012年11月3日星期六 11月 03, 2012 / 沒有留言
標籤 iOS, mobile app

這是剛在做手機app的時候本來想實作的一個計畫，後來因為合作的朋友覺得沒什麼機會就沒做了，不過我還滿喜歡這個app的，也是目前為止唯一一個有用到3D去繪製的UI。

大致用法就是選了籤就可以開始搖了。

也有自定籤筒的功能。

那時還有時間去設計一些想做的UI，現在可是忙到想這種非case的UI都沒時間了阿..

訂閱：文章 (Atom)