lovelog || Loveness × Zeroless

Flashでは更新情報を表示させたりする時にスクロールバーをよく使われると思います。
ただ、内容が多くなればなるほどバーが縮小していきますが、これは元々のバーのデザインも変わってしまいますし、バー自体をドラッグしづらくなっていきます。

バー自体はデザインと同じままで、スクロールの移動距離を変化させるようにすれば、問題は解決です。
「trick7.com」さんの情報を参考にイージングを追加したスクロールバーを作りました。

//なめらかに止まるための抵抗。値が小さいほど減速大。
var friction:Number = 0.2;


//スクロールバーの背景をクリックしたときの抵抗。
var coursorMove = 1;
var backFriction:Number = 0.1;


//スクロール可能かどうかの正否
var flag:Boolean = new Boolean;


//頻繁に使うMCへのパスを変数に格納
var scrollBtn:MovieClip = sBar.sBtn;
var scrollBack:MovieClip = sBar.sBack;


//スクロールさせたいコンテンツにマスクを設定
content_mc.setMask(mask_mc);


var yMax:Number;
var mPc:Number;
var mPd:Number;


/*========================初期動作===========================*/



function init():Void {


    mPc = mask_mc._height/content_mc._height;
    
    //マスクの高さ/スクロールバーの高さ
    mPb = mask_mc._height/scrollBack._height; 

   
    yMax = Math.ceil(scrollBack._height-scrollBtn.btn_bg._height);
  

    /////スクロールハンドルのサイズ固定バージョン用スクリプト
    var dragableBarArea = scrollBack._height-scrollBtn._height;
    var dragableContentsArea = content_mc._height-mask_mc._height;
    dcPdb=dragableContentsArea/dragableBarArea

   
    //テキストエリアよりコンテンツが多き場合スクロールバーを表示。   
    if (mask_mc._height<content_mc._height) {
        sBar._visible = true;
        upBtn._visible = true;
        downBtn._visible = true;
    }
}



/*========================スライダー===========================*/

function activeScroll():Void {
    /*
    content_mcのプロパティgoalYに数値を代入
    scrollBtn._yの値が後のscrollSet.sBar.onPressなどでonEnterFrameを使って使用しているので代入される値は常に可変しています。
    このプロパティ自体はイージングで使用。
    */

    /*
    シンプルにcontent_mc.goalY = scrollBtn._yとしてしまうと、
    スクロールボタンとコンテンツが同じ高さになってしまいますので、
    スクロールバーとコンテンツは逆の方向へ動くように 「-scrollBtn._y」としてあります。
    */
   
    content_mc.goalY = -scrollBtn._y*dcPdb;
   
    /*
    スクロールボタンの現在地 - スクロールバーの背景を押した場所 * stepMove（scrollBack.onPress内で設定）
    が0以下であればスクロールボタンのY位置をstepMove分だけ上に位置。
    */
    if (sliderbackPress) {
        if ((scrollBtn._y-scrollBack._ymouse)*stepMove<0) {
            scrollBtn._y += stepMove;
        }
    }
    if (pressUP) {
        scrollBtn._y -= coursorMove;
    }
    if (pressDown) {
        scrollBtn._y += coursorMove;
    }
    if (scrollBtn._y<0) {
        scrollBtn._y = 0;
    }
    if (scrollBtn._y>yMax) {
        scrollBtn._y = yMax;
    }
}



function contentsEnterFrame():Void {
    content_mc.flag = true;
    content_mc.onEnterFrame = function() {

        /*
        disは
        スクロールボタンの位置とコンテンツの位置との差です。
        if文で1以上の場合はその差を埋め、１未満だと動きを止めます。
        */
        var dis:Number = this.goalY-this._y;

        if (this.flag || Math.abs(dis)>1) {
            this._y += dis*friction;
        } else {
            delete this.onEnterFrame;
        }
    };
}


scrollBtn.onPress = function():Void  {
    contentsEnterFrame();
    this.onEnterFrame = activeScroll;
    this.startDrag(false,this._x,0,this._x,yMax);
};

scrollBtn.onRelease = scrollBtn.onReleaseOutside=function ():Void {
    content_mc.flag = false;
    delete this.onEnterFrame;
    this.stopDrag();
    sliderbackPress = false;
};

scrollBack.onPress = function():Void  {
    contentsEnterFrame();
    this.onEnterFrame = activeScroll;
    sliderbackPress = true;
    stepMove = (this._ymouse-this._parent.sBtn._y-this._parent.sBtn._height/2)*backFriction;
};

scrollBack.onRelease = scrollBack.onReleaseOutside=function ():Void {
    content_mc.flag = false;
    delete this.onEnterFrame;
    sliderbackPress = false;
    scrollBtn._y = Math.floor(scrollBtn._y);
};

upBtn.onPress = function():Void  {
    contentsEnterFrame();
    this.onEnterFrame = activeScroll;
    pressUP = true;
};
upBtn.onRelease = upBtn.onReleaseOutside=function ():Void {
    content_mc.flag = false;
    delete this.onEnterFrame;
    pressUP = false;
};

downBtn.onPress = function():Void  {
    contentsEnterFrame();
    this.onEnterFrame = activeScroll;
    pressDown = true;
};
downBtn.onRelease = downBtn.onReleaseOutside=function ():Void {
    content_mc.flag = false;
    delete this.onEnterFrame;
    pressDown = false;
};

content_mc内にテキストフィールドを作り、関数init()を行う処理をすれば動きます。

 

よくCSSのサイトでグラフィック性の高いものは背景画像がランダムになっているものがあります。
特にインタラクティブな表現ではないのですが、ロード時に切り替わる事によって訪れるターゲットが飽きないようにビジュアルを提供出来るかと思います。

/*ソースコード*/

/*配列オブジェクト　宣言*/
ranimg = new Array();

/*
ランダムの確率の割合を考え、必要な数の配列と内容を記述する
*/
ranimg[0]="#000000";
ranimg[1]="#f2f2f2";
ranimg[2]="#f2f2f2";
ranimg[3]="#f2f2f2";
ranimg[4]="#f2f2f2";
ranimg[5]="#f2f2f2";
ranimg[6]="#f2f2f2";
ranimg[7]="#f2f2f2";
ranimg[8]="#f2f2f2";
ranimg[9]="#f2f2f2";

/*オブジェクトに乱数を代入*/
xx = Math.floor(ranimg.length*Math.random());

/*配列オブジェクトに四捨五入した乱数を格納*/
ranimg = ranimg[Math.floor(xx)];

/*HTML内にコードに沿って配列オブジェクトを背景色に設定する*/
document.write ('<style type="text/css"><!--body {background-color:'+ ranimg +';}--></style>');

ものごっつ単純な記述です。
上記を要約すると、10回に1回は背景色を黒に変えるというものです。

まず、背景色の数値を格納する配列を作り、その中にランダムの数値となる乱数を格納。
通常の<script>タグでのjsファイルの宣言がされたら、<head>タグ内に内容を記述するというものです。
記述されるとstyle要素として背景色が宣言され、HTMLに反映されるといった流れになります。

配列の数を増やせば増やすほど、ランダムの確率が細分化され複雑になると言った仕組みです。
まあ、もっとスマートな方法もあると思いますがこれぐらいシンプルだとカスタマイズも簡単ですよ。（っというか上位クラスの方法がわかりません）

Webページの閲覧環境を整えるために使用するCSSハック。
今回の @importを使ったハックはブラウザを除外するタイプのハックだ。

記述例

@import "css.css";
@import url("css.css")

上の方がWindows IE4.5を
下の方がMac IE4.5を除外する

font-familyプロパティでフォント指定した際にmac版のSafariやFirefoxで思い通りに反映されなかった場合、両方のブラウザで値の解釈が異なることが原因らしい。
Safariは日本語表記を解釈せず、Firefoxでは逆に英字表記を解釈しない。

具体的に
Safariでは
「”ヒラギノ角ゴ　Pro　W３”」という指定は無視されるので
「”Hiragino Kaku Gothic Pro”」と記述する必要がある。

Firefoxでは
「”Hiragino Kaku Gothic Pro”」を無視してしまうため
「”ヒラギノ角ゴ　Pro　W３”」と記述する必要がある

どちらのブラウザにも同じフォントを設定したい場合は

body{
font-family:"Hiragino Kaku Gothic Pro" , "ヒラギノ角ゴ Pro W3" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro"
}

上記のように表記を変えて２回指定すればいい。
なお、Windows版のSafariとFirefoxではどちらの指定でも問題ないらしい。

package{

    import flash.display.Sprite;
    import flash.events.Event;

    public class distance extends Sprite{
      
       //コンストラクタ
       public function distance(){
          init();
        }

       //初期化メソッド
        private function init():void{
          addEventListener(Event.MouseEvent , onEnterFrameHandler);
        }

       private function onEnterFrameHandler(event:Event):void{
          var mX:Number = mouseX;
          var mY:Number = mouseY;

          //ピタゴラスの定理を使って、距離dを求める
          var d:Number  = Math.sqrt(mX * mX + mY * mY);
          trace("原点からの距離＝" + d);
        }
    }
}

1. このクラスはドキュメントクラスとして使用するのでSpriteクラスの性質を引き継ぐ必要があるため、extendsでSpriteクラスを継承する。
2. カーソルの動きを毎フレーム追跡するのでEventクラスをインポート。
3. イベントリスナーと関数を関連づけることでonEnterFrameHandlerを毎フレーム実行す。

記述の流れは
「使用するクラスのインポート　→　クラス定義　→　コンストラクタ　→　初期化メソッド　→　イベントハンドラ」

AS3.0から2.0にはなかったpagkageという要素が必要になる

クラス定義スクリプトの基本的な構造は↓

package パッケージ名{

    public class クラス名{
   
        //クラスプロパティ
        public static var 変数名:タイプ名;
        public static const 定数名:タイプ名;

        //クラスメソッド
        public static function メソッド名():タイプ名{
           ステートメント;
        }
   
        //コンストラクタ
        public function クラス名(){
            ステートメント;
        }

        //インスタンスプロパティ
        public var 変数名:タイプ名;
        public const 定数名:タイプ名;

        //インスタンスメソッド
        public function メソッド名():タイプ名{
           ステートメント;
        }
    }
}

パッケージ
パッケージを使わないで定義が出来ても、packageブロックで囲まなければいけない


クラスメンバー（クラスプロパティとクラスメソッド）
インスタンスメンバー（インスタンスプロパティとインスタンスメソッド）
この二つの違いはstaticキーワードを付加するかどうかで決まる


クラスのインスタンスを作る関数コンストラクタ
コンストラクタは何も実行しないメソッド。何もしないコンストラクタは記述を省略することができる
・クラスの定義スクリプトはステートメントの無いコンストラクタを簡素化できる
・コンストラクタは記述しなくても、Flashが自動的にコンストラクタを補ってくれる
・ステートメントを記述しなくてもよいが、記述すればインスタンスが作られた際に実行することができる
・インスタンスを作る際に引数を受け取ることができる

//コンストラクタの記述
asファイルの定義時
public function メソッド名(){
}
    ↓下記の記述もコンストラクタと同じ
flaファイルの記述で
var オブジェクト名:クラス名 = new クラス名();

しかしコンストラクタには値を返すためのreturnが無い
戻り値のデータ型も指定できない


例　Testクラスを定義し、コンストラクタのcolor引数で色名を受け取り、その値をインスタンスのmyColorプロファイルの値として設定する

package{
    public class Test{
        public var myColor:String;

        //コンストラクタ
        public function Test(color:String){
        myColor = color;
        }
    }
}

インスタンスを作成し、出力した場合
var test01:Test = new Test("red");
var test02:Test = new Test("blue");
trace(test01.myColor);
trace(test02.myColor);
出力
red
blue

数値の絶対値を返すMath.abs
正負の符号を無視して数値のみを返す

例
var num:Number = -12;
var numList:Number = Math.abs(num);
trace(num);
trace(numList);
出力
-12
12

擬似乱数を返すMath.random

例 円の塗りを毎回変える
var color:int = Math.random()*0xffffff;
var mc:Sprite = new Sprite();
mc.graphics.beginFill(color);
mc.graphics.drawCircle(100,100,100);
addChild(mc);

displayプロパティ　：　ブロックレベル・インラインレベルの表示・非表示を指定

visibilityプロパティ　：　ボックスの表示・非表示を指定

上記の二つのプロパティはページのレイアウトの変化に差異がある
・displayプロパティの場合、noneを適用させたボックスそのものが非表示になる為、レイアウトに変化が起きる
・visibilityプロパティの場合は表示・非表示を切り替えても全体のレイアウトには変化なし

点を扱う「Pointクラス」
Pointクラスは点の座標を値として扱うことが可能になる
var オブジェクト名:Point = new Point(　ｘ座標　、　ｙ座標　);

例 　新しいオブジェクトpoint01をPointクラスとしてx=50, y=100の点の値を格納
　　　var point01:Point = new Point(50,100);
　　　trace(point01);
　　　//出力表示　(x=50,y=100)

Pointクラスプロパティ「length」
原点（0,0）から点までの長さを簡単に得られる
Pointクラスオブジェクト.length;

例　原点からPointクラスオブジェクトまでの長さ
　　 var point01:Point = new Point(50,100);
　　 trace(point01.length);
　　 //出力表示　111.80339887498948

Pointクラスメソッド「add」、「subtract」
Pointクラスの値を加算、減算できる
加算
Pointクラスオブジェクト.add(加算する別のPointクラスオブジェクト);
減算
Pointクラスオブジェクト.subtract(減算する別のPointクラスオブジェクト);

例
　var vec1:Point = new Point(5,20);
　var vec2:Point = new Point(0,10);
　var vec3:Point = vec1.add(vec2);
　var vec4:Point = vec1.subtract(vec2);
　trace("vec1は"+vec1);
　trace("vec2は"+vec2);
　trace("vec3は1に2を加算した為"+vec3);
　trace("vec4は1に2を減算した為"+vec4);
　trace(vec3.x);
　trace(vec4.y);
出力表示
　vec1は(x=5, y=20)
　vec2は(x=0, y=10)
　vec3は1に2を加算した為(x=5, y=30)
　vec4は1に2を減算した為(x=5, y=10)
　5
　10

Pointクラスメソッド「distance」
点と点の直線距離を求められる（２点間のベクトルの大きさを示す）
※計算で得られる値は0か正の値になる
Point.distance(　Pointクラスオブジェクト-その１　、　Pointクラスオブジェクト-その2　);

例　Pointクラスオブジェクトのpt1とpt2の直線距離を求める
　　 var pt1:Point = new Point(50,100);
　　 var pt2:Point = new Point(200,250);
　　 var d:Number = Point.distance(　pt1 , pt2 );
　　 trace(d);
　　 出力表示　212.13203435596427

Pointクラスメソッド「equals」
2点の値が等しいかどうかを調べる
等しい場合はtrue、等しくない場合falseとして値を得る
Pointクラスオブジェクト.equals(調べるPointクラスオブジェクト);

例　pt1とpt2の値が等しいかどうかを調べる
　　var pt1:Point = new Point(50,100);
　　var pt2:Point = new Point(200,250);
　　var d:Boolean = pt1.equals(pt2);
　　trace(d);
　　出力表示　false

Pointクラスメソッド「interpolate」
２点の間を計算して点を出す
Point.interpolate(点1,点2,補間レベル);
補間レベルは0～1で調整する
補間レベルの値が0に近づけば点１に、１に近づけば点２に計算結果が近くなる

例　pt1とpt2の値をpt3に補間レベル0.5（半分）で代入
　　var pt1:Point = new Point(0,100);
　　var pt2:Point = new Point(550,100);
　　var pt3:Point = Point.interpolate(pt1,pt2,0.5);
　　trace(pt3);
　　出力表示　(x=275,y=100);

三つのオブジェクトの並び順を切り替える

var container:Sprite = new Sprite();
addChild(container);


var circle:Sprite = new Sprite();
circle.graphics.beginFill(　カラー配列　、1);
var cx:int = 100;
var cy:int = 100;
var r:int = 70;
circle.graphics.drawCircle(cx,cy,cr);

var triangle:Sprite = new Sprite();
var tx:int = 170;
var ty:int = 50;
var tw:int = 100;
var th:int = 150;
triangle.graphics.beginFill(　カラー配列　、1);
triangle.graphics.moveTo(tx,ty);
triangle.graphics.lineTo(tx+tw/2,th);
triangle.graphics.lineTo(tx-tw/2,th);
triangle.graphics.endFill();

var box:Sprite = new Sprite();
box.graphics.beginFill(　カラー配列　、1);
var bx:int = 60;
var by:int = 80;
var bw:int = 100;
var bh:int = 100;
box.graphics.drawRect(bx,by,bw,bh);
box.graphics.endFill();


container.addChild(circle);
container.addChild(triangle);
container.addChild(box);

//クリックイベントを受け取るように設定
container.addEventListener(MouseEvent.CLICK , clicked);

//クリックされたオブジェクトを最前面に表示する
function clicked(event:MouseEvent) : void{
container.setChildIndex(DisplayObject(event.target),2);
}
5.9_as3.0.swf※上記は全て手打ちですので決してそのまま試用しないでください。

新しい範囲

１．塗りを終了するendFillメソッド
    例　変数.graphics.beginFill(　カラー配列　、透明度　);
       　変数.graphics.endFill();


２．基本データ型　int
    符号付きの32ビット整数を表すデータ型。正または負の整数を表すときに使用。
    ちなみに正の整数のみを表す場合は「uint」のデータ型を使用する。


３．表示オブジェクトを制御するクラスDisplayObject


４．子オブジェクトのインデックスを設定するsetChildIndex()
    例　mc.setChildIndex(　表示オブジェクト名　、　インデックス位置　);
    インデックスの数値が大きいほど手前に表示される。