(Flash Lite)テキストの横スクロール方法 - 3流プログラマのメモ書き

Flash Lite 1.1 で右から左にスクロールするテキスト(IEの MARQUEE タグみたいなもの)を作ってみました。(内容は今まで小ネタで出してきたものも含んでます)

これが結構苦労したんですよね。。。

イメージとしてはケータイで au Style やトップページ表示したときにカーソルがボタンオーバーした時だけ背景色とテキスト色変えてスクロールさすというものです。

ターゲットパスの構成としては _root → Button → MovieClip → ダイナミックテキストてな感じにしてます。

なお、ボタンにインスタンス名が使えない Flash Lite 1.1 では一つのムービークリップを複数のインスタンスで共有化することができないので、表示する個数分用意します。(ボタンも同じ)

・ムービークリップ側

まず、ムービークリップ側の実装です。

1フレーム目にダイナミックテキストを配置します。

このダイナミックテキストの変数名を txt_linkScroll とします。

そして、1フレーム目のアクションを下記のように記述。

//ダイナミックテキストに表示する文字列代入
txt_linkScroll = _root.strLink0 ;
 
//フラグが立っている時だけスクロールする。フラグがtrueになるのはカーソルオーバー時のみ
if (  _root.linkScrollFlg0 == true   ){
    //画面内に収まるなら何もしない
    if ( mblength( txt_linkScroll ) <= 14 ){
        stop();
    }
    //1文字何ピクセル? 文字列の末尾が画面左端に来た時にまた右端に戻すためのタイミング調整に必要
    //ダイナミックテキストは16ptのデバイスフォント
    //scrlCntはフラグ。フォーカス当たってからの初回のスクロールか、2位回目以降のスクロールか
    if (scrlCnt < 1 ){
        charPx = 17; 
    }else{
        charPx = 30;
    }
 
    //スクロール量
    scrollpx = 3;
    
    //何回目か
    iCnt++ ;
    
    //文字列長のピクセル分スクロールしたっぽいなら位置リセット。
    if ( iCnt * scrollpx  > mblength( txt_linkScroll ) * charPx ){
        iCnt = -8 ;
        setProperty( "" , _x ,   240 );  //ムービークリップの位置を左端に。
        scrlCnt = 1;
    }
    
    //左へスクロール
    setProperty( "" , _x, getProperty( "" , _x) - scrollpx);

 
}else{
    scrlCnt = 0;
}
 
2フレーム目にはenterFrameイベントの代用として1フレーム目にループするようにします。
 
//enterFrame イベントの代用
gotoAndPlay(1);

・ボタン側

↑で作ったムービークリップをボタンに配置します。

今回カーソルオーバー時に背景に色付けて、文字色を白にしたいので、アップとオーバーは別のキーフレームにします。

オーバーのフレームで配置したムービークリップを選択し、プロパティから｢カラー｣で｢着色｣を選択し、文字色を決めます。

背景色は別レイヤーを作り、短径ツールで適当に作ります。

・シーン側(呼び方あってるんかな? 要はルートのムービークリップのことです)

シーンにボタンを配置し、ボタンアクションに下記のようにスクリプト書きます。

要はスクロールさすかどうかのフラグの状態を決めてるだけです。

//フォーカス受け取った時
on(rollOver) {
    //スクロール開始
    _root.linkScrollFlg0 = true;
}
 
//フォーカス抜けた時
on(rollOut){
    //スクロール停止
    _root.linkScrollFlg0 = false;
}
 
//ボタン押下時
on(press){
    getURL( _root.strLink0Url  );
}

あと、1フレーム目のアクションスクリプトにフラグ関係の変数を定義しときます。

_focusrect = false ;//ボタンフォーカスを消す
_root.strLink0 = "スクロールテストテキストスクロールテストテキスト";
_root.strLink0Url =  "http://jehupc.exblog.jp";
//スクロールリンクテキストのスクロールするか否かのフラグ定義(5つボタン要した場合ね)
for ( i = 0 ; i<5; i++){
    eval("_root.linkScrollFlg" add i )  = false;
}

基本的にはこれで横スクロールテキストは完成するんですが、一つ問題が。。

それはムービークリップ自体をx方向に移動させてるため、横方向いっぱいになってしまうということです。つまり、スクロールエリアは Y:20px～200px までということができないのです。

かなり悩んだあげく強硬手段でこの問題を解決することにしました。

それは、背景絵を用意し、スクロールエリアとするところだけ切り抜いて、スクロールボタンよりも上のレイヤーに配置するというものです。

これだと、スクロールエリアをはみでることはありませんが、作るのとメンテが入った時が厄介です。

無理やりな手段使ってますが、一応こんな感じで実装させてみました。