Home

ウェブなとき。

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

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

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

Facebookのアカウントの削除方法

  • 2010-11-22 (月)
  • web

アカウントを削除したかったのだが、がんばって探してみても見当たらない。

おぉいおい!

と思いつつ、googleで検索してたら削除方法(とFacebookの恐怖)を記した記事(Facebookの恐怖)を見つけ、無事に削除できた…はず。

削除したい場合は、ログイン状態で以下にアクセスとのことです。
http://www.facebook.com/help/contact.php?show_form=delete_account

ふぅー危うかった。

ってか、Facebookこわっ…
どんだけ削除させたくないんだ…。

flvをループ再生させる方法【Flash】【AS3.0】

  • 2010-11-22 (月)
  • as3

まずは、ビデオを読み込む。
ファイル > 読み込み > ビデオの読み込み で読み込む。(もしくは、flvなどを直接ドラッグ)
パラメータのsourceで再生する動画を選択する。

このままではループはしないのでFLVPlaybackにプロパティ > インスタンス名で任意の名前をつける。

インスタンス名にspecialmovieとつけた場合、以下を記述

//ループ処理
specialmovie.addEventListener(Event.COMPLETE,replay);
function replay(event) {
    specialmovie.play();
}

これでOK。

【参考】
http://oshiete.goo.ne.jp/qa/5390617.html

IEのバージョン別に読み込むCSSを変える+CSSハックメモ

IEのバージョン別に読み込むCSSを変える
全IE用

<!--[if IE]>
<link href="ie.css" rel="stylesheet" type="text/css" />
<![endif]-->

IEには対応させない

<!--[if !IE]>
<link href="style.css" rel="stylesheet" type="text/css" />
<![endif]-->

IE7のみ読み込み

<!--[if IE 7]>
<link href="ie.css" rel="stylesheet" type="text/css" />
<![endif]-->

IE6以下のみ読み込み

<!--[if lt IE 7]>
<link href="ie.css" rel="stylesheet" type="text/css" />
<![endif]-->

※lt:Less-Than。つまり、IE7は含まないのでIE6以下。

もしくは

<!--[if lte IE 6]>
<link href="ie.css" rel="stylesheet" type="text/css" />
<![endif]-->

※lte:Less-Than or Equal。つまり、IE6を含むので、IE6以下。

IE7以下のバージョンに対応

<!--[if lt IE 8]>
<link href="ie.css" rel="stylesheet" type="text/css" />
<![endif]-->

もしくは

<!--[if lte IE 7]>
<link href="ie.css" rel="stylesheet" type="text/css" />
<![endif]-->

IE7以上のバージョンに対応

<!--[if gt IE 6]>
<link href="ie.css" rel="stylesheet" type="text/css" />
<![endif]-->

※gt:Greater-Than。つまり、IE6を含まないのでIE7以上。

もしくは

<!--[if gte IE 7]>
<link href="ie.css" rel="stylesheet" type="text/css" />
<![endif]-->

gte:Greater-Than or Equal。つまり、IE7を含むのでIE7以上。

そして、こんな記事を発見。

【coliss】[CSS]条件付きコメントを使用した際にレンダリングを早くするテクニック下記CSSハックメモ

下記のように、CSSファイルを指定した箇所より前に空の条件付きコメント(<!–[if IE]><![endif]–> )を挿入します。

<!--[if IE]><![endif]-->
<link type="text/css" rel="stylesheet" href="screen.css" media="screen, projection">
<link type="text/css" rel="stylesheet" href="print.css" media="print">

<!--[if IE]>
<link type="text/css" rel="stylesheet" href="ie.css" media="screen, projection">
<![endif]-->

ほぉー!!すばらしいですねぇ。

下記CSSハックメモ

IE8のみ適用

html>/**/body selector {
 margin-top/***/: 2px\9;
 padding: 5px;
}

2つめのプロパティからは普通に指定してOK。

IE7のみ適用

*:first-child+html selector {
 margin: 0;
}

IE6のみ適用

_selector {
 margin: 0;
}

最後に、今回、調整していたときに、IE8のみでイメージが3px下にずれて表示されてしまうのでネガティブマージンを指定(margin-top: -3px;)したのだが、うまくいかない…
うー、ネガティブマージンだめなの?と思うも、その他のプロパティだとちゃんと効く…
結論は、今回jqueryのプラグインを使用してスライドショーを実現していたのだが、そのpositionが絡んでいるっぽい。いろいろ試してはみたがうまくいかなかったのでとりあえず、!importantをつけてみたら、うまくいったのでこれでよしとした。

html>/**/body selector {
 top/***/: -3px\9 !important;
}

ふぅー…

【Fireworks】テキストにグラデーションをかける

  • 2010-10-27 (水)
  • tips

Fireworksで文字にグラデーションをかけたいとき、そのままではグラデーションはかけることができない。

アウトライン化してグラデーションをかける方法もあるが、後から文字修正などがあったりすると、
元データ(アウトライン化前テキスト)が残ってないと大変。。。
それに面倒。

そこで、、、グラデをかけてその後もテキストを編集できるようにする方法があります。
(ご存知の方は今更何言ってんのーってなるでしょうが…)

その方法とは…

テキストを選択して、、、

Command [Ctrl] + G

以上!!

つまり、テキストを選択してそのままグループ化すると、グラデーションもかけれるようになるよって話!

追記

で、コメントで教えてもらいました。

文字の色選択パネルの下の方にある「塗りオプション」ー「基本」の部分を「グラデーション」に変えればグラデーションが使えるよ!ってはなし。

きゃーはずかしっ(。-_-。)

【wordpress】wordpressの外にあるhtmlに、カテゴリーAの新着リストを表示したい

wordpressの外にあるhtmlに、カテゴリーAの新着リストを表示したい。
いくつか方法はあるようだが考える時間もあまりないので、
とりあえずささっとリストページを1枚作って、読み込むことにする。

まず、get postsを使ってリストをつくる。

page_a.php

<?php
/*
Template Name: page_a
*/
?>
<ul>
<?php
$postslist = get_posts('numberposts=10&order=DESC&orderby=post_date&category=1');
foreach ($postslist as $post) :
setup_postdata($post);
?>
<li><?php the_time('Y/m/d'); ?>&nbsp;<a href="<?php the_permalink() ?>"><?php the_title(); ?></a></li>
<?php endforeach; ?>
</ul>

パラメータなど下記参照。
【Codex】テンプレートタグ/get posts

これをインクルードするなりなんなりする。

–2010.11.18追記ここから–

インクルードっていうか、そんなややこしいことせずに出来るやん。
やっぱり慌てちゃだめだね。

下記のような感じ。

anew.html (表示したいファイル)

<?php require('./wp/wp-blog-header.php'); ?>
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>test</title>
</head>
<body>
<h2>Category-a What's new</h2>
<ul>
<?php
$postslist = get_posts('numberposts=10&order=DESC&orderby=post_date&category=1');
foreach ($postslist as $post) :
setup_postdata($post);
?>
<li><?php the_time('Y/m/d'); ?>&nbsp;<a href="<?php the_permalink() ?>"><?php the_title(); ?></a></li>
<?php endforeach; ?>
</ul>
<p>right!!</p>
</body>
</html>

つまり、下記を先頭に記述して、あとは普通に呼び出せるよってこと。

<?php require('./wp/wp-blog-header.php'); ?>

上記の./wp/の箇所はディレクトリに合わせて記述する。
wp-blog-header.phpはwordpressの直下にいます。

今回はhtmlで表示しましたが、その際は.htaccessに下記を記述しておきます。

<Files index.html>
AddType application/x-httpd-php .html
</Files>

–追記ここまで–

そして、今さらなのだが…

foreach ($postslist as $post) :

の最後の ”:”
コロンだけど???
と、PHPを理解してない私は疑問に思い調べました。遅っ…。

if、for、foreach、while のような制御構造は次のような単純化されたフォーマットで書くことができるそうです。

下記、ビューファイル向けの代替のPHP構文 から引用します。

foreachを使った例は次の通りです:

<ul>
<?php foreach($todo as $item): ?>
<li><?=$item?></li>
<?php endforeach; ?>
</ul>

中括弧がいらないのを注意してください。
終わりの中括弧が代わりに endforeach に置きかわっています。

また、各制御構造は(最後のものを除き)、各文の末尾にセミコロン ( “;” ) を使う代わりに、コロン ( “:” ) を置くことを注意してください。これは重要です!

下記は、if/elseif/else を使ったもう一つの例です。コロンのところを注意してみてください:

<?php if ($username == 'sally'): ?>
   <h3>Sallyさん、こんにちは</h3>
<?php elseif ($username == 'joe'): ?>
   <h3>Joeさん、こんにちは</h3>
<?php else: ?>
   <h3>誰かさん、こんにちは</h3>
<?php endif; ?>

だそうです。
すっきりー。

【dogmap.jp】で下記のような方法も紹介されています。
Google Feed AJX API を使用して JavaScript で、最新記事を表示する方法
自前の JSONP 形式出力プログラムを設置して JavaScript で、最新記事を表示する方法

あー、勉強しなくっちゃ。

Dreamweaver CS5でなくなったバリデート機能を復活させたい!

なぜ、CS5でバリデート機能を非推奨にし、できなくなったのか…。

すっごく、便利だったのに!!

超活用してたのに!!!

もぉっ!!!!!

って思っていたところ、発見しました!

拡張機能でいけるみたいです♪

Validator for Dreamweaver CS5 (By Donald Booth) をインストールすると、Dreamweaver CS5でもバリデート機能が使えるようになります!

下記参考にしたサイトでは、拡張機能などをインストール後に、メニューバーが文字化けしてしまった時の対処方法も書いてあります!
今回私は文字化けしなかったので、そのまま使えそうです♪

【参考】
効率的なサイト制作のためのDreamweaverの教科書

metaタグのGenerator消し方【WordPress】

コアファイル変更しなくても、プラグインを入れなくても、消せる方法。

まずは、もとのある場所

wp-includes/default-filters.php の

// Actions

add_action( 'wp_head', 'wp_generator' );

の後に

remove_action('wp_head', 'wp_generator');

を追記することで消えます。

だけど、このファイルを直接さわったら面倒じゃーん。
ということなので、
テーマのfunction.phpに書き加えます!

<?php
remove_action('wp_head', 'wp_generator');
remove_action('wp_head', 'rsd_link');
remove_action('wp_head', 'wlwmanifest_link');
?>

ってなかんじです。

remove_action(‘wp_head’, ‘rsd_link’);
これはiPhoneなどで投稿する時に使うらしい。使わない場合は上記のようにして消すことが可能。

remove_action(‘wp_head’, ‘wlwmanifest_link’);
これはWindows Live Writer を使ってブログ投稿する時に使うらしい。使わない場合は上記のようにして消すことが可能。

ただ、これだとfeedのgeneratorは消えないんだよなー。

Home

want

Return to page top