定義ファイルを使った組込みではFlash Zoom Engineの全機能がサポートされます。別サンプルナビゲーションカスタマイズ背景の指定等は定義ファイル(XML)組込みのみで利用可能な機能です。

  • easyFZE関数での組み込みは、定義ファイルを用意する必要はありません。ですがFlash Zoom Engine全ての機能はサポートされていません
  • 定義ファイル(XML)を使った組込みではFlash Zoom Engine全ての機能が利用できますが、定義ファイル(XML)を別途用意しなければなりません
 
STEP 1

画像を準備しましょう

用意したズーム画像

画像は拡大状態時に表示するものを用意します。ここでは640x400pxの画像を利用します。Flash表示枠は320x200pxですので面積比4:1となります。

Flash表示枠決定のポイントを以下に示します。

  • 面積比率は可能な限り整数倍になるようにして下さい。縮小イメージが綺麗になります。もちろん別途プレビュー画像を用意する場合はあまり気にしなくても結構です。
  • Flash表示枠はズーム画像の比率と同一になるように計算して下さい。例えば当サンプルの場合、横幅640pxに対して高さが400pxです。1.6 : 1の比率になります。Flash表示枠の横幅は320pxにしていますので高さは200px(320 / 1.6)となります。

※Flashの仕様によりMAX 2880x2880pxまでの画像を扱えます。

※縮小画像(プレビュー)を明示的に指定することも可能ですが、省略した場合FZEが「ズーム画像」を表示枠に合わせて縮小表示します。

 

ファイル設置場所の確認

ファイルの確認
  • 画像ファイル(zoom.jpg)
  • 定義ファイル(config.xml)
  • HTMLファイル(???.html)
  • FZE本体(misfze.swf)
  • フラッシュプレイヤーチェック関数(flash_check.js)
  • FZE制御関数(flash.js)

適当なフォルダを作成し画像ファイル、定義ファイル、HTMLファイル、FZE本体、JavaScirptファイル(flash.js,flash_check.js)を全て同一のフォルダに移動します。

 
STEP 2

config.xmlとは

config.xmlはFZE起動時に読み込まれ、FZE自身を制御するための定義ファイルです。 config.xmlをテキストエディタ等で開き、zoom_urlパラメータをcommonセクション(コモンセクション)中に指定して下さい。 commonセクションとはconfig.xml中の<common>から</common>までを指します。

ELZで配布されているフリー版のサンプル等に含まれるconfig.xmlをコピーして流用すると簡単です。

config.xmlの内容(UTF-8に対応したテキストエディタが必要です)

<?xml version="1.0" encoding="UTF-8" ?>
<pagedata>

<common>

    <copyright>elz.jp</copyright>

    <zoom_url>zoom.jpg</zoom_url>

</common>

</pagedata>

パラメータ説明

<zoom_url>ズーム画像</zoom_url>

拡大状態時に表示される画像を指定します。

STEP 3

HTMLへ組み込みましょう(openFZE関数編)

HTMLソース(???.html)を開いて編集します。以下の2つの記述を行います。

  1. 外部JavaScriptファイル(FZEを制御する為のopenFZE関数等が含まれます)読み込み定義を記述して下さい。
  2. FZEを組み込みたい個所へopenFZE関数(JavaScript)を記述して下さい。

※JavaScriptファイル郡(flash.js,flash_check.js)は配布ファイル中の「jsフォルダ」に格納されています。

1.外部JavaScriptファイルの組込み

flash_check.jsとflash.js2つの外部JavaScriptファイル読込宣言を行ないます。

以下のコードをHTMLソース先頭の<head>から</head>の間に記述(コピー&ペースト)します。

<!-- ここから外部JavaScriptファイルの読込定義 --> 
<script type="text/javascript" src="flash_check.js"></script>
<script type="text/javascript" src="flash.js"></script>
<!-- ここまで外部JavaScriptファイルの読込定義 -->
  • flash_check.js → フラッシュバージョンチェックモジュール
  • flash.js → FZE組込関数モジュール

2.openFZE関数での組み込み(例)

FZEを組み込みたい箇所へ、下記コードをHTMLソースに記述(コピー&ペースト)します。後述するパラメータ説明を参考に、必要に応じて画像サイズ等のパラメータを修正して下さい。

<!-- ここからFZE組込定義 -->
<script type="text/javascript">
<!--
openFZE('misfze.swf','zoom.jpg',320,200,'config.xml','#ffffff');
//-->
</script>
<!-- ここまでFZE組込定義 -->

※ここでは理解し易くするためにJavaScript無効の環境下での代替イメージ表示定義は省いています。

パラメータ説明

openFZE('FZE本体ファイル名','代替イメージ',横幅,高さ,'定義ファイル名','背景色')

openFZE関数の書式は上記内容となります。当説明に沿ってファイル郡を準備されている場合、第3引数の「横幅」と第4引数の「高さ」を用意した画像サイズへ変更してください。

第2引数で指定されている「zoom.jpg」は古いFlashPlayerがインストールされている環境で表示される代替イメージです。FZEをはじめて利用される方はあまり気にしないで下さい。

リファレンスマニュアルHTMLへの組込方法HTMLへの組込み手順には詳細が記載されています。

HTMLソースサンプル

以下のHTMLソースは実際に動作するものです。このソースを参考に、あなたのHTMLファイルへFZEを組み込んで下さい。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>

    <meta http-equiv=Content-Type content="text/html; charset=SHIFT_JIS">
    <meta http-equiv="Content-Script-Type" content="text/javascript">

    <title>elz.jp FZETv tbVV[XY[</title>

    <!-- OJavaScriptt@C̓Ǎ` --> 
    <script type="text/javascript" src="flash_check.js"></script>
    <script type="text/javascript" src="flash.js"></script>
    <!-- ܂ŊOJavaScriptt@C̓Ǎ` --> 

</head>

<body>

<div>

    <!-- FZEg` -->
    <script type="text/javascript">
    <!--
    openFZE('misfze.swf','zoom.jpg',320,200,'config.xml','#ffffff');
    //-->
    </script>
    <!-- ܂FZEg` --> 

    <!-- JavaScriptɕ\փC[W -->
    <noscript>
    <div><img src="zoom.jpg" width="320" height="200" alt="Flash Zoom Engine փC[W elz.jp"></div>
    </noscript>
    <!-- ܂JavaScriptɕ\փC[W -->

</div>

</body>
</html>