You are here: Home » Illustrator » イラレのSVGインタラクティビティの使い方と理解

イラレのSVGインタラクティビティの使い方と理解

SVGインタラクティビティとは

SVGインタラクティビティ

SVGインタラクティビティ

SVGインタラクティビティとはオブジェクトにjavascriptを埋め込み、インタラクティビティの意味の「相互作用」などのコミュニケーションを可能にする事ができます。javascriptとは、webに動きなどを与える事ができる簡易ブログラムです。(注・このページではSVGインタラクティビティの使い方の解説です。

つまり、SVGインタラクティビティを使うと、ActionScriptのようなボタンアクションに近い動作を与える事ができ、具体的にはクリックでメッセージ表示などの機能を持ったボタンなどがつくれます。

スポンサーリンク

SVGインタラクティビティパネルの理解

javascriptイベント

イベントの種類

イベントとは、オブジェクトをクリックした時やマウスカーソルを合わせた時などに、どのように動作するかを設定するものです。

例えば「オブジェクトをマウスでクリックすると」オブジェクトに書き当てたjavascriptが実行され、メッセージを表示したりする事ができ、そのイベントに応じて処理を実行するプログラムをオブジェクトに埋め込む事ができます。(正確に動いてるかどうかは、書き出しSVGファイルをブラウザで表示した時のみです。)

Illustratorで扱えるインタラクティビティイベントの種類

onfocusin→オブジェクトにフォーカスが移った時

onfocusout→オブジェクト上からフォーカスが解除された時。

onactivate=オブジェクトがクリックされた時。

onmousedown=オブジェクト上でマウス押し上げられた時。

onmouseuq=オブジェクト上でマウスが放された時。

onclick=オブジェクト上でクリックされた時。

onmouseover=オブジェクト上でマウスポインターが来た時。

onmousemove=オブジェクト上でマウスポインターが動いてる時。

onmouseout=オブジェクト上からマウスポインターが離れた時。

onkeydown=オブジェクト上でキーが押し上げられた時。

onkeypqess=オブジェクト上でキーが押し上げられた時。

onkeyup=オブジェクト上で押し下げられた時。

onload=SVGファイルの読み込みが完了した時。

onerrol=オブジェクトの読み込みエラーなどが発生した時。

onabort=オブジェクトの読み込みが完了前に、ページの読み込みが中断された時。

onunload=別のページに移動したり、ウィンドウが閉じた時など。

onzoom=ズームレベルが変更された時。

onresize=表示サイズが変更された時。

onscroll=表示画面上下または、左右にスクロールされた時。

以上

つまり、イベントのonclick(オブジェクト上でクリックされた時)などで動作のきっかけを決めて、JavaScriptでどう動かすか決めます。

外部JavaScriptと連携させる場合には、SVGインタラクティブパネルのパネルメニューから、「JavaScriptファイル…」を選択し、外部ファイルと連携させることも可能です

SVGインタラクティビティでイベントをJavaScriptを書いて動かす。

今回はイベントonclickでjavascriptはalertを使います。オブジェクトをクリックした時にSVGインターと現れるようにします。

今回は簡単な使い方なので、上の緑の四角のような簡単なオブジェクトを作り選択したまま、SVGインタラクティビティのイベント欄の三角のプルダウンからonclickを選択して、javascriptの欄にalert(“SVGインター”)と書いてEnterを押します。すると、パネルの大きな下部の四角の中にonclick=alert”(“SVGインター”)”とイベントリストが現れます。

そのあと、メニューの保存をクリックして、ファイル形式をSVG(svg)を選択して、名前を付け、場所を任意で選び保存します。

SVGオプションのポップアップ画面が現れます。

項目は基本はデフォルトのままでよいのですが、SVGプロファイルの欄をSVG1.1にして保存します。svgファイルができるのでドリームウィーバーなどの任意のテキストファイルで開きます。(SVG Tiny1.1形式やSVG Tiny1.1+形式は携帯電話用の形式です。)

 

上のようなコードが現れます。水色の<svgから/svg>の部分をコピーしてHTMLなど任意の場所にはります。

イラストレーターで作った緑の四角形がwebに現れクリックすると、イベントリストに書いた『svgインター』がアラートに現れます。

アラートが現れない場合は、ブラウザのJavaScriptが無効なので、ブラウザのJavaScriptを有効にするをONにしてください。

svgの特徴は、画像が劣化しないのと画像に色々と仕掛けができることです。javascriptを埋め込む事でイベントに応じて音声やアニメーション等の動きをwebサイトに与える事ができます。

スポンサーリンク

スポンサーリンク

コメントを残す