ボタンからどっかに飛びたい
よく忘れて、間違うので・・・。As3.0で。
ボタンのインスタンスにmyPlayってつける。
あとはフレームのタイムラインに書く。
//インスタンスにイベント割り当て
myPlay.addEventListener(MouseEvent.CLICK,onClick1);
//イベントを受けて実行する項目
function onClick1(event:MouseEvent):void {
var url:URLRequest = new URLRequest("http://www.yahoo.co.jp/");
navigateToURL(url,"_self");
}
Flashでマスクして透明度も徐々に変えたい
http://oshiete1.goo.ne.jp/qa2274046.html
にあるとおり、なかなかマスクしたオブジェクトにアルファは直接かけれない。
ということで試行錯誤しながら、マスクする側にアルファをかけるのではなく、
マスクされる側にアルファをかけたらどうなるかやってみました。
具体的にはされる側をムービークリップにして、そのムービークリップ内で
アルファをかけます。
あとは、メインのタイムラインでマスクする側、される側（アルファをかけた
ＭＣのこと）を正しく設定します（割愛します）。
そうすると、かんたんにできました。
忘れやすいのでメモです。
ドリへのコピーペースト
コーディングする際、さまざまなファイルからコピーペーストする機会というのを経験すると思います。ワードからコピーペーストすると自動的にタグが挿入されて不便に感じたり、あるいは逆に便利に感じたりする人もいるかもしれません。
そこで今日気付いたのですが、ドリの環境設定でタグ付きかそうでないかの切り替えを知りました。とてもかんたんです。
ドリのメニューから、編集、環境設定、コピー/ペーストと順にたどっていくと「ほかのアプリケーションからデザインビューへペースト」という項目が見つかると思います。
（デザインビューというのはソースが書かれていない方です）
あとはその中から選ぶだけです。
ドリって便利だよね〜〜〜
中・上級向け：ネガティブマージンの思わぬ使い道
またまた今月号のweb creators10月号からちょっと面白い記事を見つけたので。
ネガティブマージンについてですが、おそらくあまり使ったことがないという人が大半だと思います。実際に私もそうです。
読んでいる掲載元がよく分からなかったのでスルーしかけたのですが、再度じっくり読んで発想の転換のような考え方で――。
では早速。
<div class="box">
<h3>見出し</h3>
<p>テキスト</p>
</div>
.box{
border:solid 1px #000;
padding:20px;
zoom:1;
}
.box h3{
background:#00ccff;
margin:-20px -20px 1em;
padding:0.3em 20px;
}
これははじめにボックスに対して指定し、あとから見出しに対して再指定しているところにあります。
つまりボックスに対してpadding:20px;があるので、その入れ子のh3に対してもpadding:20px;が効いています。
そこでh3に対しては幅いっぱいに見出しをとりたい場合、逆にpadding:20px;は必要ないので、margin:-20px -20px 1em;を指定しています。このmarginの二つ目の値が重要です。これでボックスいっぱいに見出しが拡張しました。
これで一応完成ですが、見出しの見栄えをもう少し整えたいということでh3にpadding:0.3em 20px;を指定。
なるほどな〜と思いつつ、多分使わないけど目から鱗ですね。
Web DeveloperからW3Cのバリデートへ直結
普段何気に使用していたショートカットのCtrl + Shift + A。これはFirefoxのアドオンのWeb Developerを利用した際、W3Cでhtmlを検証してくれます。
Firebugがあるから一時的にDeveloperは一時的に無効にしていたのですが、ショートカットが効かなかったのでもしやと思って有効化させたら利用できました。やはり何かしらお世話になっているようです。
もうウェブの標準ツールですよね。
Web Developer
https://addons.mozilla.org/ja/firefox/addon/60
W3C Markup Validation Service
http://validator.w3.org/
画像置換について「良い点」と「悪い点」
画像置換が広く知られて利用されたのは、ひとえにJavascriptで行っていたロールオーバーがCSSで行える点だと思います。
ではなぜJavascriptがだめでCSSならOKだったのだろうか、それはJavascriptを無効にしているユーザーに対してや、また制作サイドからのhtmlの見た目の悪さ（html側に不要なタグで装飾しているイメージ）などでしょうか。これ以上筆者は力不足で思いつきませんがほかにもいろいろあると思います。
では改めて画像置換を利用することで「良い点」と「悪い点」を探ってみたいと思います。
○良い点
・htmlがきれい。Javascriptで行っていたものをすべてcssにできる点
・bodyにIDを渡してcssで各ページごとでロールオーバーなどの現在地を知らせることができる
・SEO？
・複数の画像をひとつにして画像の位置を変えるだけで見た目をコントロールできる
○悪い点
・実装がめんどう
・ユーザビリティの問題
・アクセシビリティの問題
・IE6の印刷の問題
・ロールオーバーした際に一時的に読み込んでおり、タイムラグが発生
といったところでしょうか。
○解説
良い点の2つ目の項目、「現在地を知らせる」についてはたとえば会社概要のページで現在地を知らせるためにメニューを色などで濃くしたり、薄くしたりすると思います。その際にhtml側でbody id="company"といったようにしてcss側で#company #menuCompany{background:url(画像のパス);}といったようにすれば会社概要のページのみメニューが変わります。
悪い点については、画像置換の実装によりたとえばcssは効いているが画像を表示しないとしているなら、まったく何も表示されなくなってしまいます。またcssでdisplay:none;ともしこんな設定をしているならば音声が読み上げません。これではユーザビリティやアクセシビリティがよくありません（その解決方法は前エントリーを参照のこと）。
またIE6に関しては印刷の設定に「背景の色とイメージを印刷する」にチェックが入っていないと、正しく表示されません。
さらに画像置換は意外にもcssをある程度知っていても「ロールオーバーした際に一時的に読み込んでおり、タイムラグが発生」したりします。ロールオーバーした際に一瞬、透明になる状態のことです。それはここでは解説しませんが、正しく設定するとタイムラグがなく瞬時に切り替わります。
と、もろもろのことがあって実は画像置換を正しく実装するにはかなり骨が折れます。
しかし個人的に思うところ、昨今のウェブ事情（Javascriptの台頭）や、また画像置換の考え方（画像置換は基本的に意味のない画像のみ）を正しく考えて利用していかなければなりません。
cssひとつとってもなかなか難しいですね。
