★Fireworks
アルファチャンネルにしないと、中が透過になったり、
白が透過になったりイライラする。
理由はページ一番下の参考サイトに書いてあると思う
photoshopみたいに「png-24」にすると、
透過とか、色々と選択できなくなる。
★Photoshop
←Photoshopの場合の透過
------------- 参考サイト -------------------
・Fireworksで画像を透過gif(透過png)として書き出す際のチュートリアル | FireWorks.20 | Webデザインやチュートリアル、Fireworks
http://fw.nijyuman.com/201201/alpha/
2012-06-29
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」とする。
--------- ちゃんと書いてあるのはこれ↓ --------------------
----------------------------------------------------------------
★実際どんなことができるのか→オブジェクト メソッド 何?
サイトを見ているユーザー側のブラウザで実行されるプログラミング言語。
文末につける「;」は、日本語で言う「。」と同じ。
コンピューターそのものの根本は、計算を行うために生まれたらしい。
そう考えると、プログラミング言語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」とする。
--------- ちゃんと書いてあるのはこれ↓ --------------------
----------------------------------------------------------------
★実際どんなことができるのか→オブジェクト メソッド 何?
ラベル:
【javascript】
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は→
使い方はイマイチわからないのでパスjQueryの方で覚える。↓↓
bind(バインド)を使った例↓
※#touchをクリックしら「aaa」読んでね、の意。
【click】の部分を【touchstart】にすると、タッチするとアラートがでる。
touchmove(タッチムーブ)…タッチしたまま動かしたら○○
touchend…(タッチエンド)…タッチが離れたら○○
touchcancel…(タッチキャンセル)…タッチしてるときに電話とかがかかってきたら○○
--------------------- 参考サイト -----------------
・addEventListenerを使う方法
http://www.u-ziq.com/blog/2007/05/domscript.html
・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
プラス
クリックしたらアニメーションして、
終わったら○○してね、の中にいれる。
↓↓
下記のスマホサイトに似た感じのができると思う
http://www.sisleyjp.com
参考サイ↓↓
http://www.pori2.net/js/location/1.html
プラス
クリックしたらアニメーションして、
終わったら○○してね、の中にいれる。
↓↓
function gogolink(){
location.href="URL"
}
$("ボタン指定").click(function(){
$(this).fadeOut("slow",gogolink);
});
下記のスマホサイトに似た感じのができると思う
http://www.sisleyjp.com
ラベル:
【javascript メモ】,
【jQuery】メモ
2012-06-20
簡単スライドショー(短) 【jQuery】
難しいものは特になく、簡単にスライドショーをつくれます。
リスト(li)そのものを移動するので、ALTやリンク先を変更というのがなくなります。
(※順番は下からになります。)
~動かし方のイメージ~
重なってる上から順にフェードアウトして、
フェードアウトしたら、重なりの一番下に移動して、それを繰り返す。
※繰り返すのは、FLASHと同じ(タイムライン)ように、考える
JavaScriptのタイマーを使用(setInterval())
2秒たったら、関数「ani_box_slide」やってね。の意
①同じ大きさの画像を用意する
②リストに画像いれる、リンク付き
※すべて同じリンク先の場合は、html5ならブロック要素囲みがOKです。
③CSSでリストを重ねる。
③jsでリストを重ねる。
ポジションで重ねて、一番上の(リストでいう一番最後)をフェードアウトして、
し終わったら、フェードインして一番下(リストでいう一番初め)にもっていってね。の意。
※CSSをいったん切ると、↑のことがよくわかる。
リスト(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】メモ
画像の切替(ただ切り替わるだけ) 【jQuery】
◆画像切り替え(アニメーションなし)
html側
js側
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
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
",コールバック関数);
コールバック関数について→
ラベル:
【jQuery】メモ,
【jQuery】命令
2012-06-15
アニメーション処理中の要素を選択【:animeted】
◆:animeted
アニメーション処理中の要素を選択できるセレクタボタンをクリックすると、●●するアニメーションをしてねというときに、
クリックした数だけひたすらアニメーションされたりするのを防ぐときに使う。
↓↓使い方
:not()と一緒に使う。:notとは?→
notで指定しているもの以外を●●してねの意味だから
アニメーションしている以外とは→アニメーションしていないもの
↓↓
$(function(){
$("#div:not(:animeted)").show("slow");
});
divで、アニメーションしていないときに、showしてね。の意
※ボタンを押したら○○する…というスクリプトをかいたときに、
押した数だけ○○するので、「アニメーションが止まらない!」とならないようにする
落とし穴:animateじゃなくても使える動いてれば、
アニメーション一覧はこちら→
ラベル:
【jQuery】メモ
アニメーション 【jQuery】
アニメーションといってもCSSをアニメーション風に見えるように動かしてると考えた方がいいかも
※ちょっと、カッコよく表示させたいときに使う(slow)
透明→不透明・サイズ0→本来のサイズ(最終的に、「display:block;」に切り替えられる)
↓display:none;をCSSで指定したものに↓
※スピード…「slow」「normal」「fast」もしくはミリ秒
注:文字列の場合は「"」でかこって、数字のときは囲まない
【show】↑の反対(display:none;をCSSで指定しない)
↑の【show】と【hide】との違いは、
ブロック要素かそうでないかで動く。
例えば、【slideDown】で表示させたい場合は、
CSSで、display:block;以外で指定してあげると、びよ~んとでてくる。
※注:inlineで指定すると、そのままずっと何もしてない感じになるので
いったん消した(none)したものにslideDownをかけてあげると、びよ~んとでてきた風になる
ブロック要素の高さを「0(ゼロ)」にする。
★スライドの切り替えメニューはこちら→
▼動き方
【show】【hide】
【slideDown】【slideUp】
↓下記もCSSに、display:none;は必要
透明度を徐々に変更していくもの
★CSSで透明度を調節するのはこちら→
透明度を徐々に変更していくもの
透明度を徐々に変更していくもの
★animateについてはこちら→
◆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についてはこちら→
ラベル:
【jQuery】メモ
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
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
ラベル:
【javascript メモ】
2012-06-06
FLASHの画面をダウンロードする(メモ) 【Flash】 AS3
FileReference オブジェクト…ファイルをアップロード・ダウンロードしたりるすときにつかう?
draw…キャプチャする
▼FlashゲームPG講座 For AS3.0【 Bitmap クラスについて】
・描画結果をビットマップデータにキャプチャーする
http://hakuhin.jp/as3/bitmap.html#BITMAP_04
draw…キャプチャする
▼FlashゲームPG講座 For AS3.0【 Bitmap クラスについて】
・描画結果をビットマップデータにキャプチャーする
http://hakuhin.jp/as3/bitmap.html#BITMAP_04
FLASHの画面をダウンロードする 【Flash】 AS3
ダウンロードボタンをクリックすると、
画像の一部がダウンロードされる。
ページ一番下の参考サイトをみつつ短くしたもの
(注:PHPはわからないので、AS3のみでどうにかしたいとあがいたもの失敗作動きません)
そもそも…サーバーに上げてない、あげない
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ファイルはこれ↓↓
さっきの失敗作に、便利ツールを追加して、最後の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
---------------------------------------------------
画像の一部がダウンロードされる。
ページ一番下の参考サイトをみつつ短くしたもの
(注: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
---------------------------------------------------
登録:
投稿 (Atom)