2012-06-29

透過pngで書き出し 【Fireworks】

★Fireworks

アルファチャンネルにしないと、中が透過になったり、
白が透過になったりイライラする。
理由はページ一番下の参考サイトに書いてあると思う

photoshopみたいに「png-24」にすると、
透過とか、色々と選択できなくなる。


★Photoshop
←Photoshopの場合の透過





------------- 参考サイト -------------------

・Fireworksで画像を透過gif(透過png)として書き出す際のチュートリアル | FireWorks.20 | Webデザインやチュートリアル、Fireworks
http://fw.nijyuman.com/201201/alpha/

javascriptの理解 【javascript】①

動的なページがつくれる。
サイトを見ているユーザー側のブラウザで実行されるプログラミング言語。

文末につける「;」は、日本語で言う「。」と同じ。

コンピューターそのものの根本は、計算を行うために生まれたらしい。
そう考えると、プログラミング言語javascriptもキモは計算らしい。


簡単な計算↓

「1+1」→答え「2」

「1+1*2」→掛け算(*)を先に計算するから→答え「3」

「(1+1)*2」→(カッコ)を先に計算するから→答え「4」


うっすらとしか覚えてない演算の優先順位…




文字列と数字の計算について

↑のように文字列と数字を計算してみる

「"a"+1」→「a1」

「"a"-1」→「NaN」(演算できないよ)

「"a"*1」→「NaN」(演算できないよ)

「"a"/1」→「NaN」(演算できないよ…みたいな意味)

※NaN…Not a Numberの略


「+」は、足し算されたのではなくて、ただの連結。なので並んで表示されているだけ


文字列を数字(数値)として扱いたいとき、

普通にすると…
「"123"+1」→「1231」 ←このままだと「1」がくっつく

文字列に引き算(減算)すると…
「"123"-0+1」→「122」 ←文字列を数値として認識してくれる

※「-0」の数字は0(ゼロ)じゃなくても何でもいい。けど、なんらかの影響がないように「0」にするのがいい。



最後に

「"123"-0*10」の場合は、先に掛け算が計算されるから「123」となる

「1230」としたいときは、「("123"-0)*10」とする。




--------- ちゃんと書いてあるのはこれ↓ --------------------



----------------------------------------------------------------




実際どんなことができるのか→オブジェクト メソッド 何?

2012-06-28

タッチ・フリック勉強 【スマホ】

↓↓↓他のサイトをみつつ勉強↓↓↓
・web帳 | スマートフォン JavaScript タッチ、フリックイベント実装
http://www.webcyohttp://www.blogger.com/img/blank.gifu.com/?p=3121

タッチについて詳しく書かれているのはこちら↓
・iPhone/Android/PC 対応。jQuery で書くタッチイベント (フェンリル | デベロッパーズブログ)
http://blog.fenrir-inc.com/jp/2011/06/ios_android_pc_touchevent.html

上記のサイトで使ってるイベントは違うけど、意味は同じ。
addEventListenerは、jQueryを使うと.bindとなる。

意味:任意のイベント処理を呼び出す。

addEventListener…IEでは使えないらしい。IEは→attachEventを使う。
使い方はイマイチわからないのでパスjQueryの方で覚える。↓↓


bind(バインド)を使った例↓

$(function(){

function aaa() {
alert("テスト");

}
$("#touch").bind('click',aaa);

});

※#touchをクリックしら「aaa」読んでね、の意。


【click】の部分を【touchstart】にすると、タッチするとアラートがでる。




【タッチイベント】

touchstart(タッチスタート)…タッチしたら○○

touchmove(タッチムーブ)…タッチしたまま動かしたら○○

touchend…(タッチエンド)…タッチが離れたら○○

touchcancel…(タッチキャンセル)…タッチしてるときに電話とかがかかってきたら○○







--------------------- 参考サイト -----------------

・addEventListenerを使う方法
http://www.u-ziq.com/blog/2007/05/domscript.html

2012-06-27

アニメーションが終わってからリンク先に飛ばす方法 【javascript】

javascriptでリンク先に飛ばす。

参考サイ↓↓
http://www.pori2.net/js/location/1.html


プラス

クリックしたらアニメーションして、
終わったら○○してね、の中にいれる。

↓↓

function gogolink(){
location.href="URL"
}


$("ボタン指定").click(function(){
$(this).fadeOut("slow",gogolink);
});




下記のスマホサイトに似た感じのができると思う

http://www.sisleyjp.com

2012-06-20

簡単スライドショー(短) 【jQuery】

難しいものは特になく、簡単にスライドショーをつくれます。
リスト(li)そのものを移動するので、ALTやリンク先を変更というのがなくなります。
(※順番は下からになります。)


~動かし方のイメージ~

重なってる上から順にフェードアウトして、

フェードアウトしたら、重なりの一番下に移動して、それを繰り返す。

※繰り返すのは、FLASHと同じ(タイムライン)ように、考える
JavaScriptのタイマーを使用(setInterval()

window.setInterval(ani_box_slide,2000);

2秒たったら、関数「ani_box_slide」やってね。の意


①同じ大きさの画像を用意する



②リストに画像いれる、リンク付き
<div id="ani_box">
<ul>
<li><a href="#1"><img src="img_01.png" alt="01" width="200" height="150" /></a></li>
<li><a href="#2"><img src="img_02.png" alt="02" width="200" height="150" /></a></li>
<li><a href="#3"><img src="img_03.png" alt="03" width="200" height="150" /></a></li>
</ul>
</div>

※すべて同じリンク先の場合は、html5ならブロック要素囲みがOKです。



③CSSでリストを重ねる。
#ani_box{
height:200px;//一応高さを指定
}

#ani_box ul{
list-style:none;
position:relative;
}

#ani_box ul li{
position:absolute;
top:0;
left:0;
}




③jsでリストを重ねる。
$(function(){

function ani_box_slide(){
$("#ani_box li:last").fadeOut("fast",function(){$(this).fadeIn("fast").insertBefore("#ani_box li:first")});
}
window.setInterval(ani_box_slide,2000);

});




ポジションで重ねて、一番上の(リストでいう一番最後)をフェードアウトして、
し終わったら、フェードインして一番下(リストでいう一番初め)にもっていってね。の意。


※CSSをいったん切ると、↑のことがよくわかる。

画像の切替(ただ切り替わるだけ) 【jQuery】

◆画像切り替え(アニメーションなし)

html側
<div id="main_box">
<img src="img_03.png" alt="AAA" width="200" height="150" />
</div>



js側
var i=0;

var img_box = new Array();

img_box[0]="img_01.png";
img_box[1]="img_02.png";
img_box[2]="img_03.png";

$(function(){

function slideimg(){
$("#main_box img").attr("src",img_box[i]);
i++;
if(i>=img_box.length){//配列の最後になったら0に戻す
i=0;
}

}

window.setInterval(slideimg,4000);//4秒だったら「slideimg」読んでね

});



setInterval…(インターバルタイマー)定期的に関数を呼び出す。




★アニメーション風にみせたいときはこちら→

★ボタンをクリックしたときにアニメーション風に切り替わるのはこちら→(作業中)



-------------------参考サイト------------------
・配列でのアニメーション for JavaScript /KSU CAC Wiki
https://sites.google.com/a/cse.kyoto-su.ac.jp/cac-wiki/reference/gamesakusei/arrayanimation


・(タイマー) setInterval
http://www.openspc2.org/JavaScript/ref/timer/setInt.htm

★アニメーションの画像切り替え
・奥から手前にズームするJavaScript「Spacegallery.js」|skuare.net
http://www.skuare.net/2008/07/javascriptspacegalleryjs.html

2012-06-19

animate()について 【jQuery】

◆animate


アニメメイトで変更できるCSSは、数値で変更できるものに限る

pxとかemとか

$("セレクタ").animate(CSSプロパティ,スピード,動き,コールバック関数);


▼CSSプロパティについて…
「-(ハイフン)」は削除、「-」の次にくる文字を大文字に変更
<例>
margin-left → marginLeft



▼スピード
slow」「normal」「fast」もしくはミリ秒


▼動き
linear」…一定の速度
swing」…最初はゆっくり後半早い



↓かき方
プロパティ名と値をでつないで、値は"で囲む
$("セレクタ").animate({marginLeft:"-500px"},"slow","swing",コールバック関数);


コールバック関数について→

2012-06-15

アニメーション処理中の要素を選択【:animeted】

◆:animeted

アニメーション処理中の要素を選択できるセレクタ

ボタンをクリックすると、●●するアニメーションをしてねというときに、
クリックした数だけひたすらアニメーションされたりするのを防ぐときに使う。

↓↓使い方
:not()と一緒に使う。:notとは?→

notで指定しているもの以外を●●してねの意味だから
アニメーションしている以外とは→アニメーションしていないもの
↓↓

$(function(){
$("#div:not(:animeted)").show("slow");
});


divで、アニメーションしていないときに、showしてね。の意

※ボタンを押したら○○する…というスクリプトをかいたときに、
押した数だけ○○するので、「アニメーションが止まらない!」とならないようにする


落とし穴:animateじゃなくても使える動いてれば、
アニメーション一覧はこちら→

アニメーション 【jQuery】

アニメーションといってもCSSをアニメーション風に見えるように動かしてると考えた方がいいかも




◆show

非表示の要素をアニメーションしながら表示

※ちょっと、カッコよく表示させたいときに使う(slow)

透明→不透明・サイズ0→本来のサイズ(最終的に、「display:block;」に切り替えられる)

↓display:none;をCSSで指定したものに↓
$(function(){
$("#main_img").show("スピード");
});

※スピード…「slow」「normal」「fast」もしくはミリ秒

注:文字列の場合は「"」でかこって、数字のときは囲まない


◆hide

表示の要素をアニメーションしながら非表示

【show】↑の反対(display:none;をCSSで指定しない)



◆slideDown

ブロック要素以外なら表示(高さを元のサイズに)

↑の【show】と【hide】との違いは、
ブロック要素かそうでないかで動く。

例えば、【slideDown】で表示させたい場合は、
CSSで、display:block;以外で指定してあげると、びよ~んとでてくる。

※注:inlineで指定すると、そのままずっと何もしてない感じになるので
いったん消した(none)したものにslideDownをかけてあげると、びよ~んとでてきた風になる



◆slideUp

要素の高さを非表示(ゼロ)にする。(ブロック要素の場合)

ブロック要素の高さを「0(ゼロ)」にする。


★スライドの切り替えメニューはこちら→




▼動き方

【show】【hide】


【slideDown】【slideUp】





↓下記もCSSに、display:none;は必要

◆fadeIn

フェードインしていく(透明度0→100%)
透明度を徐々に変更していくもの

★CSSで透明度を調節するのはこちら→

◆fadeOut

フェードアウトしていく(透明度100%→0)
透明度を徐々に変更していくもの

◆fadeTo

指定した透明度に、フェードアウト/フェードインしていく(透明度0or100%→指定した透明度)
透明度を徐々に変更していくもの




★animateについてはこちら→

2012-06-14

DONとは?

▼DONについて
http://itpro.nikkeibp.co.jp/article/COLUMN/20070627/276026/?ST=develop


HTMLやXMLといったマークアップ言語へアクセスするためのAPI


マークアップ言語…タグで囲んだりして、文章構造や装飾をする言語のこと

▼IT辞書
http://e-words.jp/w/E3839EE383BCE382AFE382A2E38383E38397E8A880E8AA9E.html



API…難しいプログラムが書けなくても「○○をする」と呼び出すだけで、
同じことができる。関数セット呼び出し?

▼そもそもAPIとはなんぞや?

http://www.atmarkit.co.jp/fnetwork/rensai/5minapi/01.html

2012-06-06

FLASHの画面をダウンロードする(メモ) 【Flash】 AS3

FileReference オブジェクト…ファイルをアップロード・ダウンロードしたりるすときにつかう?

draw…キャプチャする


▼FlashゲームPG講座 For AS3.0【 Bitmap クラスについて】
・描画結果をビットマップデータにキャプチャーする
http://hakuhin.jp/as3/bitmap.html#BITMAP_04

FLASHの画面をダウンロードする 【Flash】 AS3

ダウンロードボタンをクリックすると、
画像の一部がダウンロードされる。

ページ一番下の参考サイトをみつつ短くしたもの
(注:PHPはわからないので、AS3のみでどうにかしたいとあがいたもの失敗作動きません

var fileRef:FileReference = new FileReference();//新しいオブジェクト作成

var myBitmapData:BitmapData= new BitmapData(100,100);//新しいオブジェクト作成
myBitmapData.draw(aa); //aaはインスタンス名


//kamera_iconは、ボタンのインスタンス名

kamera_icon.addEventListener(MouseEvent.CLICK,kamera);
function kamera(event:MouseEvent):void{

var fn:String="photo.jpg";
fileRef.download(myBitmapData,fn);

};




そもそも…サーバーに上げてない、あげない

FileReference.download() メソッドを使用すると、サーバー上のファイルをユーザーがダウンロードできます。
~ActionScript 3.0 コンポーネントリファレンスガイドより~




↓↓↓解決策

◆PHPをやりたくなかったら、便利ツール(ざっくりいうと、ビットマップをJPEG画像に変換してくれるもの)をダウンロード


↓↓とっても親切サイト↓↓
英語がわかんなくてもダウンロードの仕方からそれ以降の作業がわかりやすい

▼おきらくFLASH講座 : FileReferenceクラスを使って| マイナビクリエイター

http://creator.mynavi-agent.jp/special/flash/fl_060.html




ページが突然なくなったら困るので
上記サイトより簡単なメモ↓↓


【http://code.google.com/p/as3corelib/】から【Downloads】メニューにいって、

英文の中の【all downloads】をクリック。

【as3corelib-.93.zip 】ファイルをダウンロードして、解凍、その中の【src】をクリックして、

その中の【com】を丸ごとフラッシュデータと同じとこにおいとく。




flaファイルはこれ↓↓


import com.adobe.images.JPGEncoder;
//便利ツール【com】をよんでます。

var fileRef:FileReference = new FileReference();//新しいオブジェクト作成

var myBitmapData:BitmapData= new BitmapData(100,100);//ダウンロードする範囲
myBitmapData.draw(aa);

kamera_icon.addEventListener(MouseEvent.CLICK,kamera);

function kamera(event:MouseEvent):void{

var encoder: JPGEncoder = new JPGEncoder(80);
var byteArray:ByteArray = encoder.encode(myBitmapData);

//↑を一行にすると→var byteArray:ByteArray = new JPGEncoder(80).encode(
myBitmapData);

var fn:String="テスト4.jpg";
fileRef.save(byteArray,fn);

};




さっきの失敗作に、便利ツールを追加して、最後のFileReference

「.download」→「save

に変更したもの




右下のカメラをクリックすると、インスタンス「aa」の100px×100pxがJPEGで保存される。





----------参考サイト---------
▼ blog.azzip-azzip.com
・AS3.0_FileReferenceクラスで画像の読み込みと保存
http://blog.azzip-azzip.com/2010/04/as3-0_filereference%E3%82%AF%E3%83%A9%E3%82%B9%E3%81%A7%E7%94%BB%E5%83%8F%E3%81%AE%E8%AA%AD%E3%81%BF%E8%BE%BC%E3%81%BF%E3%81%A8%E4%BF%9D%E5%AD%98/

▼FLASHで遊ぼう!
・ムービーをJPEGで保存する2
http://flashjp.com/as3/saveasjpg2.php

▼にゃあプロジェクト - ウェブログ - FileReferenceを使ってみる (1)
・FileReferenceを使ってみる (1)
http://www.project-nya.jp/modules/weblog/weblog-tb.php/672

---------------------------------------------------

アマゾン和書/最新の情報