外部XML＆イメージを使用した（若干）柔軟性のある簡単なイメージギャラリーを作成したいと思います。
完成イメージ図はこんな感じです。
左側の小さな水色の画像をクリックすると右側の大きな画像が切り替わるといういたってシンプルなつくりです。
-
まずは表示させるべき画像を作成します。
名称は「m1.gif」～「m9.gif」（サムネイル）と、「b1.gif」～「b9.gif」（大きい画像）にしました。
flaファイルと同階層に「img」という名前のフォルダを作成し、そこに表示させる画像を入れます。
-
XMLファイルも画像と同階層に作成します。
こんな感じです。
<?xml version="1.0" encoding="utf-8"?>
<data>
<img thum="img/m1.gif" src="img/b1.gif">画像1</img>
<img thum="img/m2.gif" src="img/b2.gif">画像2</img>
<img thum="img/m3.gif" src="img/b3.gif">画像3</img>
<img thum="img/m4.gif" src="img/b4.gif">画像4</img>
<img thum="img/m5.gif" src="img/b5.gif">画像5</img>
<img thum="img/m6.gif" src="img/b6.gif">画像6</img>
<img thum="img/m7.gif" src="img/b7.gif">画像7</img>
<img thum="img/m8.gif" src="img/b8.gif">画像8</img>
<img thum="img/m9.gif" src="img/b9.gif">画像9</img>
</data>
文字は表示されないのですが、あとあとのことを考えてとりあえず入れてあります。
「load.xml」で保存します。
-
package
{
import flash.display.Loader;
import flash.display.LoaderInfo;
import flash.display.Sprite;
import flash.events.MouseEvent;
import flash.net.URLLoader;
import flash.net.URLRequest;
import flash.events.Event;
public class Main extends Sprite
{
//サムネイルの並べる数
var _thumNum:uint;
//サムネイルの間隔
var _thumInterval:uint;
//XMLから読み込んだデータを入れる配列
var _imgList:Array = new Array();
var _thumList:Array = new Array();
var _urlLoader:URLLoader;
//サムネイルが入る配列
var _thum:Array = new Array();
//全部のサムネイルを入れるコンテナ
var _thumContainer:Sprite = new Sprite();
//大きい画像を入れるコンテナ
var _imgContainer:Sprite = new Sprite();
//現在選択されている画像番号
var _currentNum:int = -1;
public function Main() {
//初期設定
_thumNum = 3;
_thumInterval = 10;
_imgContainer.x = 200;
//外部XMLファイルの指定
_urlLoader = new URLLoader(new URLRequest("img/load.xml"));
// 読み込み完了時に呼び出されるイベント
_urlLoader.addEventListener (Event.COMPLETE, XMLloadComp);
this.addChild(_thumContainer);
this.addChild(_imgContainer);
}
//XMLロード完了の処理
function XMLloadComp (event:Event):void {
var xml : XML = new XML(_urlLoader.data);
//XMLのデータを配列に入れる
for each (var xmlObj:Object in xml.img) {
_imgList.push (xmlObj.@src);
_thumList.push (xmlObj.@thum);
}
//配列の長さだけイメージをロード
for (var i:uint = 0; i < _imgList.length; i++ ) {
_thum.push(new Sprite());
var thumLoader:Loader = new Loader();
thumLoader.load (new URLRequest(_thumList[i]));
_thum[i].addChild(thumLoader);
//nameに番号を入れる
_thum[i].name = String(i);
thumLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, thumImgloadComp);
}
}
//サムネイルロード完了
function thumImgloadComp(event:Event):void {
//該当するサムネイルの番号を取得
var imgNum:int = int(event.target.loader.parent.name);
//_thumInterval（間隔）だけ開けてサムネイルを配置
event.target.loader.x = (event.target.width + _thumInterval) * (imgNum % _thumNum);
event.target.loader.y = (event.target.height + _thumInterval ) * (int(imgNum / _thumNum));
_thumContainer.addChild(event.target.loader);
event.target.loader.name = imgNum;
event.target.loader.addEventListener(MouseEvent.CLICK, onThumImg);
}
//サムネイルクリック
function onThumImg(event:Event):void {
//クリックされた番号をnumに入れる
var num:uint = event.target.name;
//現在の画像以外の場合画像をロード
if (num != _currentNum) {
var imgLoader:Loader = new Loader();
imgLoader.load (new URLRequest(_imgList[num]));
imgLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, imgloadComp);
_currentNum = num;
}
}
//イメージロード完了
function imgloadComp(event:Event):void {
//古い画像の削除（imgContainerの子要素を全て削除）
while(_imgContainer.numChildren > 0){
_imgContainer.removeChildAt(0);
}
//新しい画像の配置
_imgContainer.addChild(event.target.loader);
}
}
}
【13～30行目】
プロパティ宣言です。
「_imgList」「_thumList」XMLから読み込んだ文字列を入れる配列。
「_thum」はサムネイルのローダーを入れる配列。
「_imgContainer」大きい画像は一つなのでspriteです。
「_currentNum」はサムネイルを押したときに現在の画像の番号を入れておく変数です。
最初は何も選択されていないので-1にしてあります。
【62行目】
どのサムネイルがクリックされたか判別するためにnameプロパティに配列と同じ番号を入れておきます。
【69行目】
62行目で入れた番号をint型で取り出します。
【56～63行目】
サムネイルのロードです。
一緒にサムネイルも並べてしまった方が簡単なのですが、画像の大きさなども動的取得したかったので、LoaderInfoイベント後に並べてます。
【71～72行目】
ここでサムネイルを並べてます。
サムネイルの並び順などを変更したい場合はこの辺を変えてみてください。
【84～89行目】
クリックされた番号が現在の番号（_currentNum）以外だったらイメージをロードします。
最後に「_currentNum」に現在の番号を入れます。
【93～100行目】
新しい画像を入れる前にいったん古い画像を削除します。
また、画像をフェードして表示するなどのアニメーションをしたい場合この辺りに処理を書けばいいのではないかと思います。
category : ActionScript
tag : ActionScript XML 外部ファイル
Comments(2)
｜Trackbacks(0)
外部XMLから文字列を取得してナビゲーションメニューのようなものを作成する方法です。
見た目的にはXMLで画像ボタンを読み込んだ方が良いと思いますが、今回はテキスト情報のみを指定したいと思います。
-
まずは読み込むXMLファイルを作成します。
今回はテキストの羅列なので単純な構造です。
会社概要
業務実績
採用情報
商品案内
flaファイルと同じ階層に「xml」という名前のフォルダを作成し、その中に保存します。
-
次にFlashで基本のボタンとなるムービークリップを作成します。
テキストも仮に入れます。テキストの種類は「ダイナミックテキスト」インスタンス名に「btn_label」を指定してください。
完成したらリンケージプロパティで「btn_mc」というクラス名をつけます。
-
ASファイルの記述です。
外部XMLファイルの読み込みは、「外部XMLファイルから情報を取得 」の記事を参考にしても良いですが、今回は「WpXMLloader」というライブラリを使用してみます。
ダウンロード&使用方法は下記アドレスを参考にしてください。
WpXMLloader
-
インポートするクラスです。
ダウンロードしたWpXMLloaderを忘れずに読み込みます。
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;
import whirlpower.wploader.WpXMLloader;
-
外部XMLの読み込みの部分です。
基本的にWpXMLloadeの使い方をそのまま使ってます。
XMLのファイルパスだけ指定して、最後に配列で使いたいのでXMLListに代入します。
function Main() {
WpXMLloader.addUrl( "navi_list", "xml/navi_list.xml" );
WpXMLloader.load( complete );
}
private function complete():void
{
var naviXML:XML = WpXMLloader.getXmlByName( "navi_list" );
var naviXMLList:XMLList = naviXML.navi;
}
-
ボタンの生成から配置までfor文で行います。
for (var i:uint = 0; i < naviXMLList.length(); i++) {
var btnMC:btn_mc = new btn_mc();
//XMLリストをボタンラベルに入れる
btnMC.btn_label.text = naviXMLList[i];
//ボタンの大きさ分ずらして配置
btnMC.y = i * (btnMC.height - 1);
//指マークON
btnMC.buttonMode = true;
//文字（子要素）は無視
btnMC.mouseChildren = false;
//ステージに配置
this.addChild(btnMC);
//マウスクリックイベント
btnMC.addEventListener(MouseEvent.CLICK, onClick);
}
デザインによって、btnMC.yの部分の間隔などを空けたりしてみてください。
今回は四角に1pxのラインがあるボタンだったのでheightにマイナス1してます。
-
最後にクリックされた後の処理をonClickメソッドに記述していきます。
今回はボタンのラベルを表示するだけの簡単なものにしてみました。
function onClick(e:Event):void {
trace(e.target.btn_label.text + "をクリックしました。");
}
-
最終的にはこんな感じ。
package
{
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;
import whirlpower.wploader.WpXMLloader;
public class Main extends Sprite
{
function Main() {
WpXMLloader.addUrl( "navi_list", "xml/navi_list.xml" );
WpXMLloader.load( complete );
}
private function complete():void
{
var naviXML:XML = WpXMLloader.getXmlByName( "navi_list" );
var naviXMLList:XMLList = naviXML.navi;
for (var i:uint = 0; i < naviXMLList.length(); i++) {
var btnMC:btn_mc = new btn_mc();
//XMLリストをボタンラベルに入れる
btnMC.btn_label.text = naviXMLList[i];
//ボタンの大きさ分ずらして配置
btnMC.y = i * (btnMC.height - 1);
//指マークON
btnMC.buttonMode = true;
//文字（子要素）は無視
btnMC.mouseChildren = false;
//ステージに配置
this.addChild(btnMC);
//マウスクリックイベント
btnMC.addEventListener(MouseEvent.CLICK, onClick);
}
}
//マウスクリック時の処理
function onClick(e:Event):void {
trace(e.target.btn_label.text + "をクリックしました。");
}
}
}
category : ActionScript
tag : ActionScript XML 外部ファイル
Comments(0)
｜Trackbacks(0)
Flashでビデオを読み込んで書き出したFLVがIEでは再生できるのにFireFoxではどうしても再生できませんでした。
ローカルでずっとテストしていたのですが、これがいけなかったようです。
結論から言うとアドレスに日本語全角が入っているとFireFoxでは再生できません。
なので全角のないフォルダに移動するか、サーバーにアップすれば大丈夫なようです。
ちなみにSkinのパスは読み込むhtmlのフォルダと同じ階層にする必要があります。swfを他のフォルダに入れている場合は注意してください。
category : ActionScript
Comments(0)
｜Trackbacks(1)
WordPressのプラグインHeadSpace2はカテゴリやページごとにhead内のkeywordsやdescriptionを変えたり、スタイルシートやJavaScriptなどの読み込みも変えられる便利なプラグインです。
環境はWordPress2.8.5、 HeadSpace3.6.32 です。
-
まずはダウンロードします。
http://urbangiraffe.com/plugins/headspace2/
-
サーバーにアップしてインストールします。
HeadSpaceのすべての機能を使用するには wp_head と wp_head を記述する必要があります。
（既存のテンプレートを使用している場合にはすでに入っていると思いますのでこの項目は飛ばしてください。）
まずはheader.phpのhead内に
<?php wp_head(); ?>
<title><?php wp_title(); ?></title>
と記述します。
keywordsやdescriptionはもとのテンプレートに記述されていたら削除します。
titleを削除してしまうと反映されないようですので、上記のようにしてください。
次にfooter.phpのbodyの前に
<?php wp_footer(); ?>
</body>
と記述します。
-
ちなみにwp_headを使用するといらなそうなタグが表示されるようです。
それらはfunction.phpに下記を記述することで削除できます。
remove_action('wp_head', 'feed_links_extra', 3);
remove_action('wp_head', 'rsd_link');
remove_action('wp_head', 'wlwmanifest_link');
remove_action('wp_head', 'index_rel_link');
remove_action('wp_head', 'parent_post_rel_link');
remove_action('wp_head', 'start_post_rel_link');
remove_action('wp_head', 'adjacent_posts_rel_link');
remove_action('wp_head', 'wp_generator');
-
HeadSpaceのオプション画面でページモジュールをクリックします。
基本欄の初期設定はページタイトル、ページdescription（説明文）、タグの3つです。
これだとタグが動作しなかったので停止中からKeywordをドラッグします。
-
これで完了です。
あとはオプション画面で自由に設定します。
category : WordPress
tag : Plugin WordPress
Comments(0)
｜Trackbacks(0)
画像を挿入するときに普通の投稿ならブラウザからメディアでアップした方が管理が楽になりますが、
ページで使用するような半永久的に変らない画像ならテンプレートフォルダに入れてFTPでアップして
画像を指定すれば楽なんじゃないかなと思いました。
その場合runPHPなど投稿でPHPを実行できるプラグインなどを入れれば早いのですが、セキュリティ上あまりよろしくないらしいので、今回は練習もかねてあえてショートコードを作ってみました。
<?php
add_shortcode('temp_url', 'tempurl_func');
function tempurl_func($atts, $content) {
$url = get_bloginfo('template_url');
return $url;
}
?>
といってもこれだけです。
記述する場所はテンプレートフォルダ内のfunctions.phpです。
temp_urlは投稿時で実際に使うショートコードになりますので、わかりやすい文字列に置き換えてください。
category : WordPress
tag : WordPress ショートコード
Comments(0)
｜Trackbacks(0)
« Previous Page | Next Page »
