Fieds_labo4
Practice-basic01
最終更新：
fieds_labo4
-
view
基本
- ActionScript3でFlashの人は7回目まででOKかな？
- アニメーションの説明で Tweener が出てきます。
- 8回目はWEBアプリの話。
- 9回目はAIRの話。
- Flash Develop の場合、8回目、9回目はどうやればいんでしょ？
- Flash Develop にフォーム作る機能とかついてないのか？
- バッジを４っつ並べてみた
package
{
import flash.display.Sprite;
import flash.events.Event;
import flash.geom.Matrix;
import flash.geom.Point;
import flash.filters.DropShadowFilter;
import flash.text.TextField;
/**
* ...
* @author ss
*/
public class Main extends Sprite
{
// instance
private var LINE_COLOR:uint = 0xffffff;
private var BODY_COLOR1:uint = 0xffff66;
private var BODY_COLOR2:uint = 0xffcc00;
private var CORNER:int = 12;
private var RADIUS1:Number = 26;
private var RADIUS2:Number = 22;
private var TEXT:String = "BETA";
public function Main():void
{
if (stage) init();
else addEventListener(Event.ADDED_TO_STAGE, init);
init_01();
Web2Badge(100,100);
init_02();
Web2Badge(100,200);
init_03();
Web2Badge2(100,300);
init_04();
Web2Badge2(100,400);
}
private function init(e:Event = null):void
{
removeEventListener(Event.ADDED_TO_STAGE, init);
// entry point
}
private function init_01():void {
LINE_COLOR = 0xffffff;
BODY_COLOR1 = 0xffff66;
BODY_COLOR2 = 0xffcc00;
CORNER = 12;
RADIUS1 = 26;
RADIUS2 = 22;
TEXT = "BETA";
}
private function init_02():void {
LINE_COLOR = 0x7FCE3D;
BODY_COLOR1 = 0xCDEEB7;
BODY_COLOR2 = 0x74CA31;
CORNER = 8;
RADIUS1 = 26;
RADIUS2 = 18;
TEXT = "SALE";
}
private function init_03():void {
LINE_COLOR = 0xAEAFB1;
BODY_COLOR1 = 0xAEAFB1;
BODY_COLOR2 = 0x2B2B2B;
CORNER = 10;
RADIUS1 = 20;
RADIUS2 = 26;
TEXT = "BETA";
}
private function init_04():void {
LINE_COLOR = 0xffffff;
BODY_COLOR1 = 0xFFDAED;
BODY_COLOR2 = 0xFD037F;
CORNER = 16;
RADIUS1 = 26;
RADIUS2 = 18;
TEXT = "SALE";
}
public function Web2Badge(pox:int, poy:int):void {
// badge little
var d:Number = Math.min(RADIUS1, RADIUS2) * 2;
// make Sprite
var s:Sprite = new Sprite();
s.graphics.lineStyle(1, LINE_COLOR);
// gradation renge
// (d×d renge -45°direction)
var matrix:Matrix = new Matrix();
matrix.createGradientBox(d, d, -Math.PI / 4);
// gradation setting
s.graphics.beginGradientFill(
"linear", // style
[BODY_COLOR1, BODY_COLOR2], // color
[1, 1], // alpher
[0, 255], // color position
matrix); // renge and direction
// star shape
var angle:Number = 2 * Math.PI / CORNER;
var p1:Point, p2:Point;
s.graphics.moveTo(RADIUS1, 0);
for(var i:int = 0; i < CORNER; i++) {
p1 = Point.polar(RADIUS2, angle * (i + 0.5));
p2 = Point.polar(RADIUS1, angle * (i + 1));
s.graphics.lineTo(p1.x, p1.y);
s.graphics.lineTo(p2.x, p2.y);
}
s.graphics.endFill();
// add shadow
s.filters = [new DropShadowFilter(4, 45, 0, 0.5)];
// text
var size:int = d / TEXT.length;
var text:TextField = new TextField();
text.htmlText = '<font size="' + size + '" color="#ffffff">'
+ '<b>' + TEXT + '</font></b>';
text.x = -text.textWidth / 2;
text.y = -text.textHeight / 2;
text.filters = [new DropShadowFilter(1, 45, 0, 0.8)];
s.addChild(text);
// (100, 100) view
//s.x = s.y = 100;
s.x = pox;
s.y = poy;
addChild(s);
}
public function Web2Badge2(pox:int, poy:int):void {
// badge little
var d:Number = Math.min(RADIUS1, RADIUS2) * 2;
// make Sprite
var s:Sprite = new Sprite();
s.graphics.lineStyle(1, LINE_COLOR);
// gradation renge
// (d×d renge -45°direction)
var matrix:Matrix = new Matrix();
matrix.createGradientBox(d, d, -Math.PI / 4);
// gradation setting
s.graphics.beginGradientFill(
"linear", // style
[BODY_COLOR1, BODY_COLOR2], // color
[1, 1], // alpher
[0, 255], // color position
matrix); // renge and direction
// star shape
var angle:Number = 2 * Math.PI / CORNER;
var p1:Point, p2:Point;
s.graphics.moveTo(RADIUS1, 0);
for(var i:int = 0; i < CORNER; i++) {
p1 = Point.polar(RADIUS2, angle * (i + 0.5));
p2 = Point.polar(RADIUS1, angle * (i + 1));
s.graphics.curveTo(p1.x, p1.y, p2.x, p2.y);
}
s.graphics.endFill();
// add shadow
s.filters = [new DropShadowFilter(4, 45, 0, 0.5)];
// text
var size:int = d / TEXT.length;
var text:TextField = new TextField();
text.htmlText = '<font size="' + size + '" color="#ffffff">'
+ '<b>' + TEXT + '</font></b>';
text.x = -text.textWidth / 2;
text.y = -text.textHeight / 2;
text.filters = [new DropShadowFilter(1, 45, 0, 0.8)];
s.addChild(text);
// (100, 100) view
//s.x = s.y = 100;
s.x = pox;
s.y = poy;
addChild(s);
}
}
}
- 4回目のイベントの伝播が大事っぽい。
- イベントをとめる（伝播停止、親に渡さない）
- event.stopPropagation();
- ターゲットを判定して、処理する
- if(event.target != stage) { return; }
- イベント段階を判定して、処理する。
- if(event.eventPhase != EventPhase.AT_TARGET) { return; }
- イベントをとめる（伝播停止、親に渡さない）
- 6回目のTweenerではまると思うので、ライブラリ を参照のこと。
package
{
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;
import caurina.transitions.Tweener;
import caurina.transitions.properties.FilterShortcuts;
/**
* ...
* @author ss
*/
public class Main extends Sprite
{
public function Main():void
{
if (stage) init();
else addEventListener(Event.ADDED_TO_STAGE, init);
FilterShortcuts.init();
Anime2();
}
private function init(e:Event = null):void
{
removeEventListener(Event.ADDED_TO_STAGE, init);
// entry point
}
public function Anime2():void{
// click evnet check
stage.addEventListener("click", clickHandler);
}
private function clickHandler(event:MouseEvent):void {
// make circle
var s:Sprite = new Sprite();
s.graphics.beginFill(Math.random() * 0x1000000);
s.graphics.drawCircle(0, 0, 10);
s.graphics.endFill();
addChild(s);
// moveto circle onClick
s.x = event.stageX;
s.y = event.stageY;
s.scaleX = s.scaleY = 0;
//Tweener.addTween(s, {time:1, scaleX:5, scaleY:5, x:0});
//var param:Object = new Object();
//param.time = 1;
//param.scaleX = 5;
//param.scaleY = 5;
//param.x = 0;
//Tweener.addTween(s, param);
Tweener.addTween(s, {
time: 1, // 1sec animation
scaleX: 5, // scaleX moveto 5
scaleY: 5, // scaleY moveto 5
//x:0
transition: "easeOutBounce"
//onComplete: function():void {
// removeChild(s);
//}
});
Tweener.addTween(s, {
time: 0.5,
delay: 1,
alpha: 0,
_Blur_blurX: 30,
_Blur_blurY: 30,
//_blur_blurX: 30,
//_blur_blurY: 30,
onComplete: function():void {
removeChild(s);
}
});
}
}
}
