flash

まとめてリンケージとリンケージ解除

たくさんリンケージする時、手動だと面倒なのでjsflでパパパッと済ませてしまおうというメモ。

参考1:リンケージの設定を自動化する | tanablog
上記のソースだとHOGE+連番なので
任意の接頭語+連番になるように少し書き換えて.jsflとして保存

こんな感じ。
[js]var library = fl.getDocumentDOM().library;
var items = library.getSelectedItems();

//prompt("表示されるメッセージ", "入力されてる文字")
var myprefix=prompt("prefix", "test")

for (var i = 0; i < items.length; i++) {
//actionscriptに書き出し
items[i].linkageExportForAS = true;
//最初のフレームに書き出し
items[i].linkageExportInFirstFrame = true;
items[i].linkageIdentifier = myprefix + i;
}[/js]

ライブラリの名前を活かしてリンケージさせるならこんな感じ?
[js]var library = fl.getDocumentDOM().library;
var items = library.getSelectedItems();
var myprefix=prompt("prefixを付けるなら入力", "test")

for (var i = 0; i < items.length; i++) {
items[i].linkageExportForAS = true;
items[i].linkageExportInFirstFrame = true;
items[i].linkageIdentifier = myprefix + items[i].name;//ここを変更
}[/js]

リンケージを解除するjsfl[引用]

[js]var library = fl.getDocumentDOM().library;

library.selectAll();
library.setItemProperty("linkageExportForAS", false);
[/js]

プロンプトでラジオボタンみたいなのを表示させて処理を分岐させるにはどうしたらいいんだろう。

参考2:Flashの拡張機能(pdf)

使い方メモ

[コマンド] – [コマンドの実行]からか
作成した.jsflを以下に保存するとツールバーのコマンド内に出現する

xpの場所
[text]
C:\Documents and Settings\[ユーザ名]\Local Settings\Application Data\Adobe\Flash CS3\ja\Configuration\Commands
[/text]
参考3:jsflのすすめ – yama-ko.net blog

モーショントゥイーンで回転をループさせると、最初と最後のフレームが被るっしょ?

みなさんこれどうやって対処してるんですかね?

[image]オニオンスキン

まず、どういう現象で困っているかというと

1 / モーショントゥイーンでただ回転させると
1フレーム目と最終フレームが同じ位置なので一瞬モタつく
[swfobj src=”http://blog.sakurachiro.com/wp-content/uploads/2010/11/index.swf” width=”480″ height=”297″ align=”none”]

続きを読む

AS2 / attachMovieした要素にアクセスする時

綺麗な書き方じゃないってのと、今更AS2ってのはわかってるけどメモ
[as3]
for (var i = 1; i<=thumbmax; i++) {
this["thumb"+i].num = i;
this["thumb"+i].onRelease = function() {
if (flag == "off") {
_root.container_dummy.attachMovie("container", "container", 1);
_root.container_dummy.container.photo_root.attachMovie("p"+this.num, "photo", 2);
_root.flag = "on";
//
_root.container_dummy.container.photo_root.photo.x_button.onRelease = function() {
if (flag == "on") {
remove();
}
}
}
}
}
[/as3]
_root.container_dummy.container.photo_root.photo.x_button.onReleaseとか長すぎる。
こんな風にすると短く指定出来た(5~6行目あたり)

[as3]
for (var i = 1; i<=thumbmax; i++) {
this["thumb"+i].num = i;
this["thumb"+i].onRelease = function() {
if (flag == "off") {
var at_c = _root.container_dummy.attachMovie("container", "container", 1);
var at_p = at_c.photo_root.attachMovie("p"+this.num, "photo", 2);
_root.flag = "on";
//
at_p.onRelease = function() {
if (flag == "on") {
remove();
}
}
}
}
}
[/as3]

swfを背景にする

demo|swfを背景にする

swfはcssのbackgroundで指定しても背景にならないけれど、背景ぽく見せる方法メモ。

躓いたところ
swfがobjectのwidth、height100%で縦横100%にならなかった
cssでwidthとheightを100%指定して解決
動画のfitのさせ方(対策は後述)

html
[html]
<object type="application/x-shockwave-flash" width="320" height="240" title="title" data="swf/mov.swf">
<param name="movie" value="swf/mov.swf" />
<param name="quality" value="high" />
<param name="wmode" value="transparent" /><!– Flashを下に –>
</object>
<div id="contents">
<p><img src="img/menu.png" width="440" height="340" alt="透過png" /></p>
</div>
[/html]

css(すでにresetしているとして)
[css]
body {
overflow:hidden;/*スクロールバーを消す*/
}
object{
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
}
#contents{
position:absolute;
top:50%;
left:50%;
margin-left:-220px;
margin-top:-170px;
}
[/css]

疑問点
z-indexは必要か?
swfとコンテンツの順番によっては必要だった
z-indexなしでswfの前にhtml要素が来る場合swfが上になる。
swf側のz-indexをコンテンツより小さくする。

[css]
object{z-index:0;}
#contents{z-index:1;}
[/css]
swfをフィットさせるためには
AS2|Stage.scaleMode = “noBorder”;
AS3|stage.scaleMode=StageScaleMode.NO_BORDER;
これがわからなくてflvはfitしないのか?なんて諦めかけてた。

http://help.adobe.com/ja_JP/AS3LCR/Flash_10.0/flash/display/Stage.html#scaleMode

再読み込み(F5やブラウザのボタン両方)の反応が悪かったり良いことないなぁ

lintに怒られないFlash挿入

[html]
<object type="application/x-shockwave-flash" width="900" height="370" title="title" data="swf.swf">
<param name="movie" value="swf.swf" />
<param name="quality" value="high" />
<p><a href="http://www.adobe.com/shockwave/download/?P1_Prod_Version=ShockwaveFlash&amp;Lang=Japanese">このコンテンツを再生するにはAdobe Flash Playerが必要です。</a></p>
</object>
[/html]

透過させるときは以下も
[html]<param name="wmode" value="transparent" />[/html]

Tweenerの終焉、らしい。

最近スライドショウを作る為にas3を勉強し、その流れで知ったTweener
しかしすでに過去の技術になっていたとは(´・ω:;.:…

wpって自身のblogのエントリーへリンク張る方法用意されてるのかな?
自分のパーマリンクをコピって手動でやったけど、調べてみよう。

開発者のZeh氏のブログで公式なアナウンスの翻訳をしてくれてるblogにトラックバックしてみたんだけど、トラックバックとは、どう表示されるのだろう。

[追記|20090808_02:22]
リンク手動でつけた

xmlでスライドショウ、その後 ( 20100701修正あり )

表示されるかな
追記|20100701
swfobjでswfを出力してるんだけど、それのせいでswfobj以降の文章がすべて表示されなくなってた
とりあえず削除した、いつからだろう?

追記|20090804_04:02
あーれー絶対パスでも相対パスでも表示されないぞ

追記|20090804_04:22
fla内のxmlまでのパスを絶対パスにしたら読み込んだ。
wpが吐き出すhtmlはどの階層にあるんだろうか

というより絶対パスでしかちゃんと動作しないとなると
汎用性が全くなくなるんで意味がない。

[追記 / 20100519]
そういえばソースも何も書いてなかった。
コメントやtrace文そのまま貼りつけてみます。
xmlなどの入ったファイルもアップしておきます、参考になれば。

[as3]//tweener設定
import caurina.transitions.Tweener;

//画像関係のパス、xmlに切り替え時間表示時間を書き込めるようにする?
var pathXml:String = "photo-local.xml";

var url_list:Array = [];
var caption_list:Array = [];
var photoloader:Array = [];
var photo_bt;

//tweener関係ロード
var motion_list:Array = [];
var transSpan:Number = 1;//(切り替え間隔、単位:秒)
var transTime:Number = 1;//(切り替えに要する時間、単位:秒)
var transType:String = "easeOutSine";

//画像関係のカウント
var maxNum:int;//読み込んだ画像数
var bitNum:int;//bitmapに変換した画像数
//var nowPhoto:int;//現在表示されてる画像

const startimg:int = 0;
var nowimg:int = 0;
var nextimg:int = startimg + 1;
trace("●startimg : "+startimg);

var url:URLRequest = new URLRequest(pathXml);
var url_loader:URLLoader = new URLLoader(url);

// xml読み込み完了時に呼び出されるイベント
url_loader.addEventListener(Event.COMPLETE,loadComplete);
function loadComplete(event : Event) {
var xml:XML = new XML(url_loader.data);
//xmlからターゲットのパスを指定する|画像データ関係ロード
for each (var element:Object in xml.photo) {
url_list.push(element.photourl);
caption_list.push(element.photocaption);
//画像の枚数
maxNum++;
trace("maxNum : "+maxNum);
//_txt.text=url_list.toString();
}
//xmlからターゲットのパスを指定する|モーション関係ロード
for each (var elementM:Object in xml.defaultMotion) {
transSpan = elementM.transSpan;
transTime = elementM.transTime;
transType = elementM.transType;
}
loadphoto();
}

//画像読み込み
function loadphoto() {
trace("loadphoto / "+loadphoto);
var maxNum:int = url_list.length;
for(var i:Number=0;i<maxNum;i++){;
photoloader[i]=new Loader();
photoloader[i].load(new URLRequest(url_list[i]));
//読み込んだらbitmapにキャストする
photoloader[i].contentLoaderInfo.addEventListener(Event.COMPLETE,onComplete);
addChildAt(photoloader[i],i);
//読み込んだ画像のプロパティ(動作確認用)
//photoloader[i].x += 10 + i * 25;
//photoloader[i].y+=10;
//photoloader[i].scaleX=photoloader[i].scaleY=0.25;
photoloader[i].alpha = 0;
//画像にボタン処理(動作確認用)
//photoloader[i].addEventListener(MouseEvent.CLICK,onClick_func);
}
}
//画像毎の名前取得テスト用のfunction
function onClick_func(e:MouseEvent) {
trace("e.target.name"+e.target.name);
if (e.target.alpha == 1) {
e.target.alpha = 0.2;
} else {
e.target.alpha = 1;
}
}
//bitmap化してスムージングをtrueにするよ
function onComplete(e:Event):void {
var image:Bitmap = Bitmap(e.target.content);
trace("e.target.content :"+e.target.content);
image.smoothing = true;
bitNum++;//変換済みの枚数
if (bitNum == maxNum) {
trace("//初期セット完了bigin実行");
loopbegin();
//begin();
//初期セット完了
}
}

function setindex(nextName) {
var nummax:Number = numChildren;
var owner = nextName;//e.currentTarget;
trace("-nummax / "+nummax,"|-owner / "+owner);
trace("-getChildIndex(owner) / "+getChildIndex(owner));
setChildIndex(owner,nummax-1);
trace("-getChildIndex(owner) after / "+getChildIndex(owner));
}

//スライドショウ設定
function begin() {
trace("");
trace("■begin()開始今の画像 / "+nowimg,"maxNum / "+maxNum);
if (nowimg < maxNum – 1) {//小さいうちは
trace("■側");
loop2loop();
} else {//同じになったら
trace("●else側");
loop2loop2();
}
}

function loop2loop() {
trace(" 通常ループ");
photoloader[nextimg].alpha = 0;//次の画像を透明にして
setindex(photoloader[nextimg]);//nextimgを最前面に移動
Tweener.addTween(photoloader[nowimg],{delay:transSpan,time:transTime,alpha:1,transition:transType,onComplete: begin});
nowimg++;
nextimg++;
}
function loop2loop2() {
trace(" 最後だけ|loop2loop2()");
nextimg = 0;
photoloader[nextimg].alpha = 0;//次の画像を透明にして
setindex(photoloader[nextimg]);//nextimgを最前面に移動
Tweener.addTween(photoloader[nowimg],{delay:transSpan,time:transTime,alpha:1,transition:transType,onComplete: begin});
nowimg = startimg;
nextimg++;
}

function loopbegin() {
trace("一回だけのつもりloopbegin()");
photoloader[nextimg].alpha = 0;//次の画像を透明にして
setindex(photoloader[nextimg]);//nextimgを最前面に移動
Tweener.addTween(photoloader[nowimg],{delay:0,time:transTime,alpha:1,transition:transType,onComplete: begin});
nowimg++;
nextimg++;
}[/as3]
いやーしかし一年ぶりくらいにみたら、意味が全くわからない。
悲しいなぁ。

重なり順関係

下準備
stageにp0-p4まで適当なmcを作って微妙に重ねて配置

[as3]
var photonum:Array = [];
var photomax = 5;

for (var i:int=0; i&lt;photomax ; i++) {
photonum[i] = &quot;p&quot; + i;
this[photonum[i]].addEventListener(MouseEvent.CLICK,getindex);
}

function getindex(e:MouseEvent) {
var nummax:int = numChildren;
trace(&quot;nummax/&quot;+nummax);
var owner=e.currentTarget;
trace(&quot;owner/&quot;+e.currentTarget);
trace(getChildIndex(owner));
setChildIndex(owner,nummax-1)
}
[/as3]

動的に四角を作ってみる
[as3]
var photonum:Array = [];
var photomax = 5;
var mySprites;

for (var i:Number=0; i&lt;photomax; i++) {
var rectcolor:uint = Math.floor(Math.random() * 0xffffff);
mySprites=new Sprite();
mySprites.graphics.beginFill(rectcolor);
mySprites.graphics.drawRect((40*i)+10,(40*i)+10,100,100);
mySprites.graphics.endFill();
addChild(mySprites);

mySprites.addEventListener(MouseEvent.CLICK,getindex2);
}
function getindex2(e:MouseEvent) {
var nummax:Number = numChildren;
trace(&quot;nummax/&quot;+nummax);
var owner = e.currentTarget;
trace(&quot;owner/&quot;+e.currentTarget);
trace(getChildIndex(owner));
setChildIndex(owner,nummax-1);
}
[/as3]
最初Shapeで四角を作っていたのだけれど、どうもうまくいかない(addEventListenerを設定できない)

as3に慣れてないから、自分の書いたソースのどこが間違ってるの全然わからない><
とりあえずShapeがアヤシイとめぼしをつけて調べてみる

Sprite クラスにも graphics プロパティがあり、これには Shape クラスでは使用できない他の機能があります。 例えば、Sprite オブジェクトは表示オブジェクトコンテナであるのに対し、Shape オブジェクトはそうではありません(子表示オブジェクトも持てません)。したがって、表示するグラフィックスが同じであっても、Sprite オブジェクトは、Shape オブジェクトよりも多くのメモリを消費します。ただし、Sprite オブジェクトではマウスクリックイベントがサポートされますが、Shape オブジェクトではサポートされません。

との事。
なのでshapeをやめてspriteにしたら、マウスに反応した。
簡単な事なのに躓いてばかりだ。

for文の中で何回も同じ
mySprites=new Sprite();
でmySpritesを作成してaddChildしてるけど、これは問題ないのだろうか?
なんで上書きにならないんだろう

続きを読む

xmlから画像を読み込んでスライドショウ.flaのflowメモ

よくわからなくなって来たので文章にしてみる。

  1. xml読み込む
  2. xmlから必要な情報を配列にセット(画像のurl、表示時間、切り替え時間?)
  3. 画像ロード
  4. 読み込んだ画像を順にビットマップ化しsmoothing=true;
  5. 全部読み込んだかの確認?

ここまでが初期設定になるのかな

今回Tweenerというのを初めて使ってみるので触りだけ勉強してみた、ライブラリってテンションが上がる。

スライドショウにする仕組みはどうするんだろう?
読み込んだ画像のalphaを0にセット、一番上だけ1.0か
それから2枚ずつペアでalphaを
1.0 –> 0.0
0.0 –> 1.0
と変化させる?
クロスフェード?あれ?

5枚あるとして(左が重なり順が上、右が奥)
1 1 1 1 1
0 1 1 1 1
0 0 1 1 1
0 0 0 1 1
0 0 0 0 1
1 1 1 1 1
以下ループのがいいかな?
1週するたびに全部を1に変更する時重くなる?ん~。。。

[追記|20090727_13:42]
0 0 0 0 1 から
1 0 0 0 0 になって
1 1 1 1 1
0 1 1 1 1 に戻る時の処理が関数を新しく呼び出す関係からうまくクロスフェードできないでいる。
同時にhtmlで言うz-indexのようなものを操作すればいいのかな?
やってみよう。
それか2枚ずつペアで切り替わるようにするか、5枚あるときの5から1のつながりをどうすればいいのかなぁ

重なり順参考url

  • http://www.adobe.com/jp/devnet/flash/quickstart/display_list_programming_as3/
  • http://blog.bonkura.jp/2008/09/as30-13.html
  • http://morishige.jp/blog/archives/99