Web制作

[AS3]外部swf読み込みエラー はてなブックマーク - [AS3]外部swf読み込みエラー

3月

6

2010

親swfファイルに子swfファイルを読み込もうとしたら・・・

「TypeError: Error #1009: null のオブジェクト参照のプロパティまたはメソッドにアクセスすることはできません。 」

というコンパイルエラーがでた。

■原因
子swfファイルで、stageを参照していたので、エラーになっているようだ。

■対応策
子swfファイルの一番最初にstage.addEventListener(○●と書いている箇所のみに

addEventListener(Event.ADDED_TO_STAGE, onStage);
function onStage(e:Event):void{
stage.addEventListener(○●・・・
}

と修正すればいいようだ。

■参考サイト
AS3 : stage.addEventListenerでハマった・・・。 (motooLogue)
外部swfファイルの読み込みt:etsutaro

[AS3][自分用メモ]スクロールバーをつくった。(var001) はてなブックマーク - [AS3][自分用メモ]スクロールバーをつくった。(var001)

2月

14

2010

自分用にスクロールバーを作りました。
私は、ActionScriptが苦手な方です。
見苦しいコードとは思いますが、ご勘弁お願いします。
(困った時は、何でもかんでもif文で解決しようとしてしまいます・・・)

→サンプル(scrollbar_var001)

↓メインタイムラインの1フレーム目
(まだ、カスタムクラスの書き方ができるレベルまで達していませんので、タイムラインに書いています。)

import flash.display.*;
import flash.events.*;
import flash.geom.*;

//▼変数・定数設定
var myRange:Number = bg.height - bar.height;
var myPosition:Number =  0;
var myPercent:Number = 0;
var plusMinus:Number;
const scrollVolume:Number = 1;//スクロールする量の値
var offsetMytxtY:Number = 25;//mytxtの最初の座標の値
var newsTxtWidth:Number=305;//newsTxtの幅の値
var loader:URLLoader = new URLLoader();
const NEWSTXT_URL:String="news.txt";//外部テキストのURL
var scrollBtnClick:String="off";
var scrollBtnFlag :int;

//▼初期化
bar.y = bg.y;//このサンプルでは31
bar.visible=false;
bg.visible=false;
up.visible=false;
down.visible=false;

//▼通常処理
//テキストのマスク
mytxt.mask = mask_txt;
//テキスト読み込み
loader.addEventListener(Event.COMPLETE, loadComplete);
loader.load(new URLRequest(NEWSTXT_URL));

//▼イベント処理
bar.addEventListener( MouseEvent.MOUSE_DOWN, onPressBar );
bar.addEventListener( MouseEvent.MOUSE_UP, onReleaseBar );
bar.stage.addEventListener( MouseEvent.MOUSE_UP, onReleaseBar );
up.addEventListener(MouseEvent.MOUSE_DOWN, updownHandler);
up.addEventListener(MouseEvent.MOUSE_UP, updownClearHandler);
down.addEventListener(MouseEvent.MOUSE_DOWN, updownHandler);
down.addEventListener(MouseEvent.MOUSE_UP, updownClearHandler);
addEventListener( Event.ENTER_FRAME, onUpdatemytxt );
addEventListener(Event.ENTER_FRAME, updownEnterFrame);

//▼関数定義
//スクロールバー表示設定
function scrollSet() {
	if (mytxt.height<=bg.height) {
		bar.visible=false;
		bg.visible=false;
		up.visible=false;
		down.visible=false;
	} else {
		bar.visible=true;
		bg.visible=true;
		up.visible=true;
		down.visible=true;
	}
}
//テキスト読み込み
function loadComplete(evt:Event):void {
	var style1:StyleSheet = new StyleSheet();
	style1.setStyle(".news", {leading:4});
	style1.setStyle(".indent", {marginLeft:65});
	style1.setStyle("a", {color:"#0000ff", textDecoration:"none"});
	style1.parseCSS('a:hover{text-decoration:underline;}');
	var newsTxt = new TextField();
	newsTxt.width = newsTxtWidth;//newsTxtの幅
	newsTxt.autoSize = "left";//左に揃えて整形
	newsTxt.multiline = newsTxt.wordWrap = true;// 複数行・折り返し
	newsTxt.styleSheet = style1;//スタイルシートを関連付け
	newsTxt.condenseWhite=true;//HTML表示時にスペース改行などを削除
	newsTxt.htmlText = evt.target.data;//HTMLテキストの表示
	mytxt.addChild(newsTxt);
	//newsTxtをaddChildした後にスクロール表示の判定
	scrollSet();
}

//▼イベントハンドラ定義
//onPressBarボタンMOUSE_DOWN用
function onPressBar( evt:Event ):void {
	//Rectangle(x座標,y座標,幅,高さ)
	bar.startDrag( false, new Rectangle( bg.x, bg.y,  0, myRange  ) );
	addEventListener( Event.ENTER_FRAME, onUpdateBar );
}
//onReleaseBarボタンMOUSE_UP用
function onReleaseBar(evt:Event):void {
	bar.stopDrag();
	removeEventListener( Event.ENTER_FRAME, onUpdateBar );
}
//位置とパーセント値を更新
function onUpdateBar(evt:Event):void {
	myPosition = bar.y - bg.y;
	myPercent = myPosition / myRange;
}
//up・downボタンMOUSE_DOWN用
function updownHandler(evt:MouseEvent):void {
	scrollBtnClick = "on";
	//upボタンを押すとscrollVolume、downボタンを押すと-scrollVolume
	plusMinus = (evt.target.name == "up") ? scrollVolume : -scrollVolume;
	updownBarMove();
}
//up・downボタンMOUSE_UP用
function updownClearHandler(evt:MouseEvent):void {
	scrollBtnClick = "off";
	removeEventListener(Event.ENTER_FRAME, onUpdateBar);
}
//up・downボタンを押している間の処理
function updownEnterFrame(evt:Event) {
	if (scrollBtnClick == "on") {
		scrollBtnFlag=1;
		updownBarMove();
	} else if (scrollBtnClick=="off" && scrollBtnFlag==1) {
		scrollBtnFlag=0;
	}//trace("off");
}
//barの移動処理
function updownBarMove() {
	//plusMinusの値がscrollVolumeの値と等しい場合
	if (plusMinus==scrollVolume) {
		bar.y=bar.y-scrollVolume;//bar.yを移動
		//myPercentが0以下の場合
		if (myPercent<=0) {
			bar.y=bg.y+myPosition;//bar.yは一番上
			//trace(myPosition);
		}
	} else {
		bar.y=bar.y+scrollVolume;//bar.yを移動
		//myPercentが1以上の場合
		if (myPercent>=1) {
			bar.y=bg.y+myPosition;//bar.yは一番下
			//trace(myPosition);
		}
	}
	addEventListener(Event.ENTER_FRAME, onUpdateBar);
	//trace(plusMinus);
}
//mytxt.yのy座標の位置
function onUpdatemytxt( evt:Event ):void {
	mytxt.y = (myPercent * -(mytxt.height-bg.height)) + offsetMytxtY;
}

■簡単な解説
実際に作った時に実装した手順は、下記の通りです。

  • スクロールバーをつくるときのポイントのサンプルを自分で触ってみてなんとなく理解する。
    └自分で実際に触ることが大事!
  • ○外部テキストを実装する。
    └mytxtのMCは、空のMCをステージに置いてnewsTxtのTextFieldをaddChildしています。
  • ○外部テキストがbgのMCより大きい場合、スクロールバーの表示を行う。
  • ○up・downボタンを実装する。
  • ○up・downボタンを押している間、barを移動する仕組みを実装する。

※コードになるべくコメントを入れて作ったので、見ていただけるとたぶんわかると思います。

→Flashデータダウンロード[CS3形式](scrollbar_var001)

■参考

もっとこうした方が効率的とかアドバイスを頂けると幸いです。

[自分用メモ]Progressive Enhancement(プログレッシブ エンハンスメント)とは はてなブックマーク - [自分用メモ]Progressive Enhancement(プログレッシブ エンハンスメント)とは

12月

26

2009

すべてのブラウザにすべての機能を再現するのではなく、
ブラウザの能力にあわせて機能を最適化すること。

↓詳しくは
Adobe Edge: 2009年2月 クロスブラウザからProgressive Enhancementという制作コンセプトへ

Progressive Enhancementに関する調査結果 : could

Progressionを体験したよ! はてなブックマーク - Progressionを体験したよ!

12月

7

2009

Web系の雑誌などでProgressionの名前ぐらいは知っていたが、基本ぐらいは知っておきたいと思い、少し体験しました。

■Progressionとは?

Progressionを一言で表現するならば,「Flashコンテンツを制作するためのフレームワーク」です。Progressionで提供されている様々な機能を使用することで,場面の切り替えや,ムービークリップの出現・削除,外部ファイルのロードといった機能がかんたんに実装できるようになります。

また,シーン毎のアドレス発行や,マウスのスクロールボタンでの動作といった,Javascriptと連携が必要な機能も提供されるため,制作者はデザインや表現の作りこみに注力することが可能となります。

これほど高機能なのにもかかわらず,MITライセンスで提供されているという点も非常に嬉しいところです。
Flashのフレームワーク「Progression3」を始めてみよう!:第1回 Progression3に触れてみよう|gihyo.jp … 技術評論社

■Progressionのセットアップ
現時点(09.12.07現在)での最新バージョンは、3.1.62です。
時期バージョン4.0.1 Public Beta 1.2がベーター版が出ています。
バージョン3で制作したものをバージョン4に変換する場合、多少作業が発生するので、
いきなりバージョン4から勉強することにした。

MXP 形式をダウンロードして、Extension Managerでインストール完了!
(私の制作環境は、mac OS X 10.5.8 Flash CS3です。)
※バージョン3をインストールする場合は、MXP 形式では、うまくインストールできない場合があるそうなので、JSFL 形式でインストールすればうまくいくそうです。

■学習方法
Progressionには3種類の制作方法があります。
・1、コンポーネントスタイル
 └スクリプトを使用せずに制作したい方向けの制作
・2、タイムラインスタイル
 └ActionScript 2.0 に近い形式で制作したい方向けの制作
・3、クラススタイル
 └最高のパワーを発揮した制作したい方向けの制作
とりあえず、学習方法は、Progressionのはじめかた – ryow.net Blogが参考になりました。

■コンポーネントスタイルを体験
バージョン4でのチュートリアルはあまりありませんが、コンポーネントスタイルでの制作なら、バージョン3のチュートリアルでもなんとか制作できると思います。

・学習で参考にしたサイト
Progression – Framework for Flash >>> コンポーネントスタイルガイド
「みんなのプログレッション – コンポーネントスタイル」 – Progression 学習ノート

■シーンエディタのバグ?
シーンエディタのシーンにキャストを挿入して、x座標とy座標を入力するが、x座標とy座標の値が逆になる。
シーンエディタ
次のベータ版では直ることを祈るしかないので、このまま逆の値を入れて対応する。

次回は、タイムラインスタイルを学習する予定です。

IE8のみ適用するCSSハック はてなブックマーク - IE8のみ適用するCSSハック

12月

2

2009

IE8のみ適用するCSSハック

html>/**/body p {
	margin/*¥**/: 10px¥9;
 	padding: 20px¥9;
}

■解説
↑の例ではpに対して書いています。
「/*¥**/」は最初の一行だけで良さそうです。
「¥9」をよく分かりませんが最後に加えます。

■参考サイト
IE8正式版のみ適用するCSSハック│Web制作の現場から 〜入院、退院、そしてつまはじき〜

  • CSS Nite LP9 連動 第2回コーディングコンテスト

月別アーカイブ

フィードアイテム

  • この日記のはてなブックマーク数
  • 人気ブログランキング - Go Sign
  • track feed
  • スカウター : Go Sign
  • Add to netvibes
  • My Profile by iddy
  • あわせて読みたいブログパーツ

Go Signストア

シューズ店もオープンしました!!

オススメサーバー

オススメバナー

WebMoney ぷちカンパ

このページのトップへ戻る