クリーンなActionscriptでFlexコンポーネントをプロジェクトに固定します

はじめに

この記事は、無料の開発ツールのみを使用してFlashPlayerアプリケーションを作成し始めたばかりの初心者を対象としており、このトピックに関するミニチュートリアルと見なすことができます。個人的なレーキについて説明します。 ActionScriptプログラミングの習得。



例として、 HelloWorldは、Adobeの商用開発ツールを使用せずに、純粋なActionScript 3.0で記述されたかなり単純なプロジェクトを使用します。

私はWindowsでFlashDevelopを使用してFlashPlayerアプリケーションを開発し、GNU / Linuxでvim（あまり便利ではないが安価で明るい）を使用しています。



当然、あちこちで、mxmlc-* .mxml（flex-layout）または* .as（actionscript）を受け入れ、swfファイルを作成するコンパイラ-FlashPlayer 9/10（バージョンが設定されている）を含むflex3 sdkが必要です。コンパイラー構成で）出力で。 後者は、FlashPlayerまたはAdobe AIR仮想マシンによって実行されるバイトコードです。

挑戦する

約束どおり、簡単な例を考えてみましょう。

したがって、ユーザーが色付きの四角形を描画し、ドラッグアンドドロップして色を設定できるようにするインタラクティブなフラッシュアプ​​リケーションを作成することを計画しているとします（図を参照）。



色の変更はタスクの2番目の部分であり、ActionScript3に入るためのバーは非常に低いため、座って1時間以内（または最大数時間）に最初の部分をエンコードします。 長方形を描いてドラッグします。 結果は、RectContainerとRectの2つのクラスに要約されます。 コードでは、イベント処理、グラフィックスの描画、オブジェクトのドラッグの実装の最も単純な例を見ることができます。 メインファイルはRectContainer.asです-mxmlcコンパイラーに渡すか、FlashDevelop IDEのプロジェクトツリーでAlways Compileとしてマークする必要があります。

RectContainer.as：

package {

import flash.events.*;

import flash.display.*;

public class RectContainer extends Sprite {

private var currentRect:Rect;

public var isDragging:Boolean;



public function RectContainer() {

stage.addEventListener(MouseEvent.MOUSE_MOVE,onMouseMove);

stage.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);

stage.addEventListener(MouseEvent.MOUSE_UP,onMouseUp);

stage.scaleMode = StageScaleMode.NO_SCALE;

stage.addChild(this);

}



private function onMouseDown(evt:MouseEvent):void {

if (!isDragging) {

currentRect = new Rect();

currentRect.container = this;

currentRect.x = evt.stageX;

currentRect.y = evt.stageY;

addChild(currentRect);

}

}



private function onMouseUp(evt:MouseEvent):void {

if (null != currentRect) {

currentRect = null;

}

}



private function onMouseMove(evt:MouseEvent):void {

if (evt.buttonDown && !isDragging) {

var dX:Number = evt.stageX - currentRect.x;

var dY:Number = evt.stageY - currentRect.y;

if (dX>0 && dY>0)

currentRect.draw(dX,dY);

}

}



}

}



Rect.as：

package {

import flash.events.*;

import flash.display.*;

public class Rect extends Sprite {

public var color:uint = 0xff00ff;

public var container:RectContainer;



public function Rect() {

addEventListener(MouseEvent.MOUSE_MOVE,onMouseMove);

addEventListener(MouseEvent.MOUSE_UP,onMouseUp);

addEventListener(MouseEvent.MOUSE_DOWN,onMouseDown);

}



public function draw(width:int,height:int):void {

graphics.clear();

graphics.lineStyle(1);

graphics.beginFill(color);

graphics.drawRect(0,0,width,height);

graphics.endFill();

}



private function onMouseMove(evt:MouseEvent):void {



}



private function onMouseUp(evt:MouseEvent):void {

this.stopDrag();

container.isDragging = false;

}



private function onMouseDown(evt:MouseEvent):void {

container.isDragging = true;

this.startDrag();

}

}

}









タスクのより難しい部分は、色の選択を可能にすることです。 当然、ユーザーがインタラクティブに色を選択できる小さなコンポーネントが必要です。 短いグーグルの後、軽くてシンプルで無料のColorPickerをダウンロードさせないことが明らかになりますが、必要なものを含むFlexフレームワークがあることを知っています-ColorPickerコンポーネント。 タスクは簡単なようです：ColorPickerをプロジェクトに固定します。

ソリューションを検索する

1.額の決定

すぐに明らかな方法を試してみましょう：このコンポーネントのインスタンスをRectコンストラクターで直接作成してみてください



import mx.controls.ColorPicker;

...

var colorPicker:ColorPicker = new ColorPicker();

addChild(colorPicker);









予想に反して別の長方形を作成する場合、カラーピッカーの外観を視覚的に示すことはできません。

激しいグーグル検索の後、Flexコンポーネントの標準的なユーザーケースは、他のFlexコンポーネントを含み、mxmlマークアップで表現されるインタラクティブフォームでの静的な配置であることが明らかになります。 このソリューションは私たちには適していません。なぜなら、 プロジェクトに静的なmxmlフォームを表示したくありません。

2.グーグルでさらに30分

当然、mxmlでFlexコンポーネントのインスタンスを記述する各タグがFlexフレームワークの特定のクラスに対応することは当初明らかでしたが、純粋なActionScriptでそれらを使用する方法は明確ではありません。 アドビはこれが確かに可能であると述べているだけですが、説明していません。 どうやらこれは商業的に有益ではないのに、なぜFlex Builderなどなのか？ また、この問題を綿密に検討し 、ボタンなどのFlexコンポーネントを使用していくつかの例を作成したブロガーもいますが、正直言ってカラーピッカーには使用できません。

3.ちょうど開いたopened

Googleの絶望の中で、どこかで（申し訳ありませんが、このリンクは失われましたが、この手法は広く普及しており、多くのソースで示されていると思います）、最も簡単なmxmlを使用してアプリケーションコンテナーを作成し、メソッドを使用してこのコンテナー内にオブジェクトを動的に作成しますapplicationCompleteイベントに関連付けられたActionScriptクラス。



mx.core.UIComponentのクラス階層を見ると、それらがflash.display.Spriteを継承し、addChildメソッドをオーバーロードしていることが明らかになり、ColorPicker Flexコンポーネントをどのようにして追加できるのか、「額の決定」はすぐにばかげています。継承階層の上位にあるUIComponentではなく、単純なSpriteの子。 そのため、解決策（以下のコードを参照）は、最も単純なFlexContainer.mxmlを作成することです。このファイルは、ちなみに、mxmlcコンパイラーに渡されます。 FlexMain.main（）は、RectContainerクラスのインスタンスをコンテナに追加するメソッドです。これは、Rectと同様に、SpriteからではなくUIComponentから継承するようになったため、RectContainerコンストラクターのステージオブジェクトを直接ではなく、Applicationインスタンスから取得します。アプリケーション。 これで、ColorPickerが四角形にネイティブとして追加され、強打で移動します。

FlexContainer.mxml：

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"

layout="absolute" applicationComplete="FlexMain.main()">

</mx:Application>



FlexMain.as：

package {

import mx.controls.*;

import mx.core.*;

public class FlexMain {

public static function main ():void {

Application.application.addChild(new RectContainer());

}

}

}



RectContainer.as：

package {

import flash.events.*;

import flash.display.*;

import mx.core.Application;

import mx.core.UIComponent;

public class RectContainer extends UIComponent {

private var currentRect:Rect;

public var isDragging:Boolean;



public function RectContainer() {

var stage:Stage = Application.application.stage;

stage.addEventListener(MouseEvent.MOUSE_MOVE,onMouseMove);

stage.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);

stage.addEventListener(MouseEvent.MOUSE_UP,onMouseUp);

stage.scaleMode = StageScaleMode.NO_SCALE;

stage.addChild(this);

}

// RectContainer.as



Rect.as：

package {

import flash.events.*;

import flash.display.*;

import mx.core.UIComponent;

import mx.controls.ColorPicker;

import mx.events.ColorPickerEvent;



public class Rect extends UIComponent {

public var color:uint = 0xff00ff;

public var container:RectContainer;

public var colorPicker:ColorPicker = new ColorPicker();

public var _width:Number;

public var _height:Number;



public function Rect() {

addEventListener(MouseEvent.MOUSE_MOVE,onMouseMove);

addEventListener(MouseEvent.MOUSE_UP,onMouseUp);

addEventListener(MouseEvent.MOUSE_DOWN,onMouseDown);

colorPicker.visible = false;

colorPicker.x = 0;

colorPicker.y = 0;

colorPicker.selectedColor = color;

addChild(colorPicker);

colorPicker.addEventListener(ColorPickerEvent.CHANGE,onColorChanged);

}



public function draw(width:int,height:int):void {

_width = width;

_height = height;

graphics.clear();

graphics.lineStyle(1);

graphics.beginFill(color);

graphics.drawRect(0,0,_width,_height);

graphics.endFill();

const minSize:Number = 15;

if (width>minSize && height > minSize) {

colorPicker.visible = true;

colorPicker.setActualSize(minSize,minSize);

}

}



private function onMouseMove(evt:MouseEvent):void {



}



private function onMouseUp(evt:MouseEvent):void {

this.stopDrag();

container.isDragging = false;

}



private function onMouseDown(evt:MouseEvent):void {

container.isDragging = true;

this.startDrag();

}



private function onColorChanged(evt:ColorPickerEvent):void {

color = evt.color;

draw(_width,_height);

}

}

}









すべてのコードとコンパイル済みアプリケーションは、 ここからダウンロードできます 。



読んでくれてありがとう、この記事が役に立てば幸いです。