名古屋でホームページ制作とFlash eternity design BLOG

FlashとThickBox

FlashからThickBoxを呼び出す方法。
以下、AS3の場合

// いろいろと省略してますよ。
package {
    import flash.external.ExternalInterface;
 
    public class viewThickBoxBtn extends MovieClip {
        public function viewThickBoxBtn() {
            addEventListener(MouseEvent.CLICK, clickBtnEvent);
        }
 
        private function clickBtnEvent(e:Event) {
            ExternalInterface.call("tb_show", thickBoxTitle, thickBoxUrl);
        }
    }
}

とExternalInterface.callでtb_showを指定します。
引数にタイトル、URL(画像やらHTMLや)と指定します。
URLの部分はHTMLでThickBox用のリンクを記述するときと同じものです。
tb_showには3つ目の引数もあるのですが、
こいつはたぶん、画像のグループ化です。
でも、SWFObjectなどを使って裏でHTMLのコードでThickBox用のリンクを記述しておかないと
動作しないんじゃないかなと思います。たぶん。試してないけど。
グループ化以外は普通にASに記述するだけで使えます。
また、Flashの上にHTMLレイヤーが置かれることになるのでwmodeの指定をしないとだめかと思われます。
wmodeを利用することの弊害も考える必要があるかと思います。
久しぶりにそれなりの内容のエントリでした。

Movable Type 4とThickBox

MT4リリース時から軽くテストしていまして、テンプレートの構成が全然違うから移行面倒だなぁと思っていたんですが、ためしに、3.35の環境からアップデートしたら、あっさりいっちゃったのでここでもMT4に移行しました。

で、前にも制作していましたが、今回も画像ポップアップを選択したときにThickBoxのタグを書き出すように該当部分を書き換えました。

ほしいひとは持っていってください。

続きを読む

SWFObjectとThickBox

先日からこのサイトでも利用し始めたSWFObjectと前々から利用していたThickBoxですが、
同時に使用するとThickBoxが機能しなくなるという問題が発生しました。
どうも必ず発生するというわけではなさそうで、どのような条件で発生するのかわかりませんが、
症状が出るHTML(ページ)では必ず問題が出ます。
一応、”逃げ”の解決策ですが、SWFObjectのso.writeとか記述するJavaScript部をページ内のすべてのThickBoxリンクの後に記述することで問題が出ないようです。
ただ、この方法だとSWFObjectの実行が遅くなってしまうので、一瞬JavaScript書き換え前のHTMLが表示されてしまいます。
あー、ThickBoxとJQueryのどちらが問題なのかはわかりません。
もっと根本的な修正をしたい。(どっかのすごい人まかせ)

Bubble Tooltipsをちょっと改造

このBLOGではコメントとトラックバックのアイコンの箇所で利用しています。
これの仕様はidを指定しない限りtitle属性のある箇所でツールチップが表示されるようで、そのままでは問題があるのでちょっと改造しました。
今回はそれをかる~く紹介。
まずはto-R様のエントリーがかなり参考になります。
改造の仕様としてはclassに”BubbleTooltips”と指定されている箇所のみ表示されるように改造しました。
[code]
function enableTooltips(id){
var links,i,h;
if(!document.getElementById || !document.getElementsByTagName) return;
AddCss();
h=document.createElement("span");
h.id="btc";
h.setAttribute("id","btc");
h.style.position="absolute";
document.getElementsByTagName("body")[0].appendChild(h);
if(id==null) links=document.getElementsByTagName("a");
else links=document.getElementById(id).getElementsByTagName("a");
for(i=0;i var cls = links[i].getAttribute('class') || links[i].getAttribute('className');
if(cls != null) {
if(cls.match("BubbleTooltips")) {
Prepare(links[i]);
}
}
}
}
[/code]
上記以外に、表示される位置の修正はスクリプトの下部。
デザインはCSSなので、難しくはないと思います。
本当はjQueryを利用して判定させたかったんですが、改造を始める時点で上記の方法が浮かんでいたため10分ほどでやめました。
気が向けばそのうち。

FeedBurnerに移行

フィードの配信をMTのRSSからFeedBurnerへ移行しました。
参考にしたのは、
Ogawa::Memorandaさま
Feedburner Infomation
サイドバーのアイコンもFeedBurnerデザインに変更しました。
現在、購読者数0!!!
笑える
既存のRSSをリーダーに登録されている方は変更をお願いします。

HTML

今回のリニューアルではHTML構造にも気をつけました。
リニューアル前のサイトでは一応CSSレイアウトにはなっていたものの、初めてのCSSレイアウト&勉強のためという状態だったので、とにかく「div!」みたいな状況になっていました。
とゆーことで、今回はタグの意味とか使い方にそれなりに気をつけて組みました。
「pタグ内にはインライン要素しか入れられない」とか正直いままでまったく意識していませんでした。
ブラウザさんはそういうの関係なしに表示してくれる良い子です。
(ある意味困った子です。)
ここ見ながら制作しました。

アルファチャンネルPNGとカラー

アルファチャンネルPNGを利用しようとして気付いた。
ie7png.gif
ffpng.gif
上がIE7で下がFirefox2で表示させたところ。
画像右側がPNGです。
Firefox2の色がこちらの求めるカラーなのですが、色が全然違う。
シャドウがかかってるところもPNGなので、わかりにくいですがIE7のほうが若干色が濃いです。
どーしてよ。
PNG画像をそのままIEで開くとちゃんとしたカラーになるんですが、HTMLにいれちゃうと画像のように変化しちゃう。
SafariだとIE7のように表示されます。
あー、原因がわからない。
困ったなぁ・・・
追記:
このあたりが参考になりそう

CSS Nite in Nagoya 2007

CSS Nite in Nagoya 2007
完全に忘れてた。
自分のWEB関連の知識は完全に本とWEB。
学校で習ったわけでもなく、誰かに教えてもらったわけでもない。
CSSやASに自分よりも詳しいプロフェッショナルな人も周りにいないので、自分で調べるなりして解決するしかないのですが、ちょっとこうゆう関連の講習会とかどんな感じなんだろうと思っていたところ丁度名古屋で開催されるとのことだったので、参加してみようかなと思っていたんですが、久しぶりにサイトを見たら終わってる・・・
名古屋ってこーゆーイベントが少ない気がするんですよね。
んむー、貴重な機会を逃してしまった。
で、その内容をまとめてくださっているのがVERSION510さまです。
「ハックしないCSS」とか「名古屋流Webディレクションの光と影」とか是非聞いてみたかった。
読みやすくまとめられていますので是非。
ちなみに、このサイトではfont-familyの指定にメイリオ,とヒラギノ角ゴ Pro W3使ってます。
(あと、tahoma)
MSゴシックは指定していないので、OfficeがインストされているMac環境は気にしなくてよかったりします。(偶然)

About me

名古屋を中心に、フリーランスでホームページ制作してます。 デザイン・サイト制作・Flash制作と幅広く対応可能です。 案件のご依頼・ご相談はお問い合わせよりご連絡ください。