Home > アーカイブ > 2010-12

2010-12

.html内でPHPを動かしたいのに画面が真っ白【PHP】【.htaccess】

.htaccessに下記のように記述して、.html内でもPHPを動かせるようにする。

AddType application/x-httpd-php .php .htm .html

と思って設置すると、画面真っ白…。顔面も真っ白。。。
なんて言ってる場合ではなく、解決せねば。

全文を読む

ActionScript3.0でボタンにリンクを貼る方法【Flash】【AS3.0】

  • 2010-12-17 (金)
  • as3

さっそく、リンクを設定する方法を復習する。
各イメージのはじめのフレームにラベルp1,p2をつける。
リンク先とself or blankを配列に。
枚数増えても使えるだろう…。

1フレーム目(init)

var nowPageNum:uint;//表示ページナンバー
var newImg:SimpleButton;
nowPageNum = 1;
newImg = img1;
//URL
var urllist:Array = ["category/as3","http://web.donnatokimo.com/"];
var urltype:Array = [0,1];//1=blank,0=self
//イメージクリック時イベント処理
newImg.addEventListener(MouseEvent.CLICK, newImgClick);
//イメージリンク
var newImgLink:String = urllist[nowPageNum-1];
//イメージリンクイベントハンドラ
function newImgClick (event:MouseEvent ) :void{
 // URLRequestを設定
 var url:URLRequest = new URLRequest(newImgLink);
 // 実際にページに飛ぶ
 var linktype:uint = urltype[nowPageNum-1];
 if (linktype == 0){
   navigateToURL( url,"_self" );
  }else if (linktype == 1){
   navigateToURL( url,"_blank" );
  }
}

p1

nowPageNum = 1;
newImg = img1;

p2

nowPageNum = 2;
newImg = img2;

ラストフレーム

gotoAndPlay("p1");

ちなみに、前の記事でもかいたけど…
画像ボタンそれぞれにアクションをつける場合の設定方法をおさらい。
下記をボタンを配置したはじめのフレームに記述

//ボタンのインスタンス名をmyImgに設定した場合
myImg.addEventListener(MouseEvent.CLICK, myImgClick);
function myImgClick (event:MouseEvent):void {
 var url:URLRequest = new URLRequest("http://web.donnatokimo.com/");
 navigateToURL( url,"_self" );
}

Flash(as3)でTimerを使って一定時間止める【Flash】【AS3.0】

  • 2010-12-16 (木)
  • as3

フラッシュ(AS3使用)でイメージを一定期間止めておきたい。
本来は、全てスクリプトで制御できればいいのだとは思うが、
イメージ2-3枚だし、そんなさくさくスクリプトかけないし…(汗)
ということで、タイムラインにアクション埋めてやりすごす作戦です。
その過程を忘れないようにメモします。

アニメーションが終わってしばらく静止しておきたい場合、
タイムラインを伸ばせばいいのだが、複数イメージを同じように(同じ秒数停止)扱いたい場合、秒数が多くなると調整が大変!ということを解決したくas3の旅にでました。

今回はTimerを使って実現させてみました。

1フレーム目

function xTimer():void {
 var myTimer:Timer = new Timer(5000, 1); //繰返す間隔(5s),回数(1回,デフォルトは0(0は無限))
 myTimer.addEventListener(TimerEvent.TIMER, timerHandler);
 myTimer.start();
 function timerHandler(evt:TimerEvent):void {
  play();
 }
}

アニメーション最後の静止しておきたいフレーム

stop();
xTimer();

こんなかんじで実現できました。

さらに、繰り返しが終わった時になにかしたい場合は…

myTimer.addEventListener(TimerEvent.TIMER_COMPLETE, xComplete);
function xComplete(evt:TimerEvent):void {
 trace("enjoy!");
}

こんなかんじ。

参考:ActionScript 3.0 コンポーネントリファレンスガイド Timer

そして、リンクもさせたい!!
ということで、これまたメモ。
下記をボタンを配置したはじめのフレームに記述

//ボタンのインスタンス名をmyImgに設定した場合
myImg.addEventListener(MouseEvent.CLICK, myImgClick);
function myImgClick (event:MouseEvent):void {
 var url:URLRequest = new URLRequest("http://web.donnatokimo.com/");
 navigateToURL( url,"_self" );
}

というかんじ。

勉強は忘れそうになったころに復習するといいらしいよ。
リンク方法とかすでに完全に忘れてしまってたけど…

次は忘れる前に復習しよう。そうしよう。がんばろう。

最後に、いろいろ調べているときに出会った記事が素敵なので紹介します。
【initialize】[AS3]Timerクラスで繰り返すで広末涼子の「大スキ!」をtraceさせているのですが、
こういうの、スキです。
見習います。

jQueryでアコーディオンメニューをつくる【jQuery】

目的:jQueryを使ってアコーディオンメニューをつくる。
TRIPLEXXX:jQueryでアコーディオンメニューを作成する“を参考にさせていただきました。
下記にサンプルをかきかきしてみよう。
もちろんだが、jQueryをつかっているのでライブラリを入手して読み込みます。
今回は、jquery-1.4.3.min.jsを使用しました。

xhtml

<ul class="acc">
 <li><a href="1">menu1</a>
  <ul>
   <li><a href="#">menu 1-1</a></li>
   <li><a href="#">menu 1-2</a></li>
   <li><a href="#">menu 1-3</a></li>
  </ul>
 </li>
 <li><a href="2">menu2</a>
  <ul>
   <li><a href="#">menu 2-1</a></li>
   <li><a href="#">menu 2-2</a></li>
   <li><a href="#">menu 2-3</a></li>
  </ul>
 </li>
 <li><a href="3">menu3</a>
  <ul>
   <li><a href="#">menu 3-1</a></li>
   <li><a href="#">menu 3-2</a></li>
   <li><a href="#">menu 3-3</a></li>
   <li><a href="#">menu 3-4</a></li>
  </ul>
 </li>
</ul>

css

ul.acc a, ul.acc li ul a {
 text-decoration: none;
 color: #EFEFEF;
}
ul.acc a:hover, ul.acc li ul a:hover {
 text-decoration: underline;
}
ul.acc ,ul.acc li ul {
 list-style: none;
}
ul.acc {
 width: 150px;
 color: #EFEFEF;
 background-color: #333333;
}
ul.acc a{
 padding: 0 10px;
 display: block;
 height: 30px;
 line-height: 30px;
}
ul.acc li {
 border-top: 1px dotted #555555;
}
ul.acc li ul {
 margin: 0 0 0 15px;
 background-color: #666666;
}
ul.acc li ul a {
 padding: 5px;
 display: block;
 height: 20px;
 line-height: 20px;
}
ul.acc li ul li{
 border-top: 1px dotted #888888;
}

1.シンプルなアコーディオンメニュー

var $j = jQuery;
$j(function(){
 $j(".acc").each(function(){
  $j("li > a", this).each(function(index){
   var $this = $j(this);
   if(index > 0) $this.next().hide();
   $this.click(function(){
    $j(this).next().toggle().parent().siblings()
    .children("ul:visible").hide();
    return false;
   });
  });
 });
});

2.メニューの開閉がスムーズなアコーディオン

// 変更前
$j(this).next().toggle().parent().siblings()
.children("ul:visible").hide();
// 変更後
var params = {height:"toggle"};
$j(this).next().animate(params).parent().siblings()
.children("ul:visible").animate(params);

よって

var $j = jQuery;
$j(function(){
 $j(".acc").each(function(){
  $j("li > a", this).each(function(index){
   var $this = $j(this);
   if(index > 0) $this.next().hide();
   $this.click(function(){
    //$j(this).next().toggle().parent().siblings()
    //.children("ul:visible").hide();
    var params = {height:"toggle"};
    $j(this).next().animate(params).parent().siblings()
         .children("ul:visible").animate(params);
    return false;
   });
  });
 });
});

3.メニューの開閉がスムーズなアコーディオン(透明度もアコーディオン♪)

//変更前
var params = {height:"toggle"};
//変更後
var params = {height:"toggle", opacity:"toggle"};
var $j = jQuery;
$j(function(){
 $j(".acc").each(function(){
  $j("li > a", this).each(function(index){
   var $this = $j(this);
   if(index > 0) $this.next().hide();
   $this.click(function(){
    var params = {height:"toggle", opacity:"toggle"};
    $j(this).next().animate(params).parent().siblings()
    .children("ul:visible").animate(params);
    return false;
   });
  });
 });
});

よし!
と思いきや、これではmenu 1-1など、リンクが無効になってしまっている。
理由はreturn false;でリンク先に飛ばないよう設定してしまっているため。
回避するには…return false;を消すわけにはいかないので、、、
アコーディオンにしたいaタグにクラス指定をする!
さぁやってみよう…

<ul class="acc">
 <li><a href="1" class="open">menu1</a>
  <ul>
   <li><a href="#">menu 1-1</a></li>
   <li><a href="#">menu 1-2</a></li>
   <li><a href="#">menu 1-3</a></li>
  </ul>
 </li>
 <li><a href="2" class="open">menu2</a>
  <ul>
   <li><a href="#">menu 2-1</a></li>
   <li><a href="#">menu 2-2</a></li>
   <li><a href="#">menu 2-3</a></li>
  </ul>
 </li>
 <li><a href="3" class="open">menu3</a>
  <ul>
   <li><a href="#">menu 3-1</a></li>
   <li><a href="#">menu 3-2</a></li>
   <li><a href="#">menu 3-3</a></li>
   <li><a href="#">menu 3-4</a></li>
  </ul>
 </li>
</ul>

合わせてスクリプトの指定も変更

//変更前
$j("li > a", this).each(function(index){
//変更後
$j("a.open", this).each(function(index){

無事成功。
これでリンクが指定したURLに飛びます。

以下自分用まとめ

【今回使用するセット】

xhtml

<ul class="acc">
 <li><a href="1" class="open">menu1</a>
  <ul>
   <li><a href="#">menu 1-1</a></li>
   <li><a href="#">menu 1-2</a></li>
   <li><a href="#">menu 1-3</a></li>
  </ul>
 </li>
 <li><a href="2" class="open">menu2</a>
  <ul>
   <li><a href="#">menu 2-1</a></li>
   <li><a href="#">menu 2-2</a></li>
   <li><a href="#">menu 2-3</a></li>
  </ul>
 </li>
 <li><a href="3" class="open">menu3</a>
  <ul>
   <li><a href="#">menu 3-1</a></li>
   <li><a href="#">menu 3-2</a></li>
   <li><a href="#">menu 3-3</a></li>
   <li><a href="#">menu 3-4</a></li>
  </ul>
 </li>
</ul>

css

ul.acc a, ul.acc li ul a {
 text-decoration: none;
 color: #EFEFEF;
}
ul.acc a:hover, ul.acc li ul a:hover {
 text-decoration: underline;
}
ul.acc ,ul.acc li ul {
 list-style: none;
}
ul.acc {
 width: 150px;
 color: #EFEFEF;
 background-color: #333333;
}
ul.acc a{
 padding: 0 10px;
 display: block;
 height: 30px;
 line-height: 30px;
}
ul.acc li {
 border-top: 1px dotted #555555;
}
ul.acc li ul {
 margin: 0 0 0 15px;
 background-color: #666666;
}
ul.acc li ul a {
 padding: 5px;
 display: block;
 height: 20px;
 line-height: 20px;
}
ul.acc li ul li{
 border-top: 1px dotted #888888;
}

js

var $j = jQuery;
$j(function(){
 $j(".acc").each(function(){
  $j("a.open", this).each(function(index){
   var $this = $j(this);
   if(index > 0) $this.next().hide();
   $this.click(function(){
    var params = {height:"toggle"};
    $j(this).next().animate(params).parent().siblings()
         .children("ul:visible").animate(params);
    return false;
   });
  });
 });
});

Flash(swf)をlightbox風に表示させたい【IE6対応】【FancyBox】【jQuery】

商用でフラッシュ(swf)をライトボックス風に表示したくていろいろ見ていたのだが、
今回探すポイントとしては、
1. jQuery系プラグイン
2. 商用フリー
3. IE6対応

これが、なかなか見つからないのだ。
いろいろ探した結果報告。

shadowbox がよさそうなのだが、これは商用フリーではなく…

video lightbox これもよさそうだが、これまた商用フリーではなく…

そんなこんなでたどり着いたのが、、、

prettyphoto
ライセンス:Commons Attribution 2.5

おぉー。角丸でいい感じ。
商用でも使えそう♪
といろいろ試してみる。
いろいろ調整してみて、これならいけるかもーとちょっと喜んだのもつかの間、、、

IE6のこと忘れてた!!

チェックしてみると…
うぅぉぉー…表示がおかしい…。
だめか…
だめなのか…
もういやだ…
IEなんて大嫌い…
と、prettyphotoで結構時間を費やしてしまった…

なんか、はまるとすごく時間かかるよね。
気を取り直して翌日改めて探すことにする。

ってことで改めて探した結果、見つけたー!

その名もFancyBox
ライセンス:MIT and GPL licenses

るんるんるん♪

サンプルを参考にこんな感じで実装

<script type="text/javascript" src="./jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="./fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="./fancybox/jquery.fancybox-1.3.4.css" media="screen" />
<script type="text/javascript">
 $(document).ready(function() {
  $("#spot .movie").fancybox({
   'padding'   : 10,
   'autoScale'   : true,
   'transitionIn'  : 'none',
   'transitionOut'  : 'none',
   'titlePosition'  : 'outside',
   'width'  : '320',
   'height'  : '240',
   'overlayColor'  : '#000',
   'overlayOpacity' : 0.9
  });
 });
</script>
<ul id="spot">
  <li><a href="test1.swf" title="testmovie1" class="movie">動画1</a></li>
  <li><a href="test2.swf" title="testmovie2" class="movie">動画2</a></li>
</ul>

cssの置き場所とかを変えるときはパスも合わせて変更する。

今回、動画の外に余白を入れたかったので、
‘padding’ : 10
を設定。

また、タイトルの表示は、
‘titlePosition’は’outside’にした。
この際の表示位置はどうやらそのページのスタイルにつられているようなので、
強制的に中央ぞろえにしたければスタイルを上書きして

.fancybox-title-outside {
 text-align: center;
}

とすればよい。

また、暗めにしたかったので
‘overlayColor’ : ‘#000′
‘overlayOpacity : 0.8
を設定。標準設定は
overlayColor : ‘#777′
overlayOpacity : 0.7

このように追加する場合は「,」を忘れないように、かつ最後に「,」をつけないようにする。
これは、ちゃんとIE6でも大丈夫!!

やったー!

と思いきや、コンテンツを既存ページに組み込むと、別のフラッシュも一緒に表示されるじゃないか…。
なんとなく記憶をたどって意外とすんなり解決。

解決方法
param name=’wmode’がvalue=’transparent’になっているかチェックし、なっていなければ設定する。

これで、無事解決!

ありがとうFancyBox!!

と思いきや、IE6だと閉じるボタンが見えない…
どうやらIE8でも。

ヌォーー…

ちょこちょこした結果、下記で解決できました。

【IE6-IE8】FancyBoxでクローズボタン(閉じるボタン)などが表示されない場合の解決方法!

jquery.fancybox-1.3.4.css
/* IE6 */以下の画像パスをルートからのパスに修正する!!


/js/fancybox/fancy_close.png に画像がある場合、

fancybox/fancy_close.png

js/fancybox/fancy_close.png

こんなかんじ。これで表示されるはず!

ふぅー解決できてよかったー。

Home > アーカイブ > 2010-12

want

Return to page top