What are width and height supposed to represent for a sprite? - actionscript-3

I'm working with a Sprite in AS3. Initially, width,height are 0,0 as expected.
After this:
var tf : TextFormat = new TextFormat();
tf.font = "Arial";
tf.size = 48;
tf.bold = true;
text = new TextField();
text.text = "A";
text.x = 30;
text.y = 16;
text.selectable = false;
text.setTextFormat(tf);
addChild(text);
they are 100,100 (even if I shrink the text size).
After this
graphics.beginFill(0xffffff, 1);
graphics.drawRect(0, 0, 99, 99);
graphics.endFill();
graphics.beginFill(color, 1);
graphics.drawRoundRect(6, 6, 84, 84, 8, 8);
graphics.endFill();
They are 130,116. I would expect them to end up at 99,99, what am I missing?
Modification: here's the code from the first answer, but modified to use a single sprite:
var s = new Sprite();
trace("1:", s.width, ", ", s.height) // <-- 0 , 0
var tf : TextFormat = new TextFormat();
tf.font = "Arial";
tf.size = 48;
tf.bold = true;
var text = new TextField();
text.text = "A";
text.x = 30;
text.y = 16;
text.selectable = false;
text.setTextFormat(tf);
s.addChild(text);
trace("2:", s.width, ", ", s.height) //<-- 100, 100
s.graphics.beginFill(0xffffff, 1);
s.graphics.drawRect(0, 0, 99, 99);
s.graphics.endFill();
s.graphics.beginFill(0x000fff, 1);
s.graphics.drawRoundRect(6, 6, 84, 84, 8, 8);
s.graphics.endFill();
trace("3:", s.width, ", ", s.height) //<-- 130,116
Can anyone explain why these 2 behave differently?
Cheers,
Charlie.

I don't know what you're doing elsewhere, but your code is right.
import flash.display.Sprite;
var s = new Sprite();
trace(s.width, ", ", s.height) // <-- 0 , 0
var tf : TextFormat = new TextFormat();
tf.font = "Arial";
tf.size = 48;
tf.bold = true;
var text = new TextField();
text.text = "A";
text.x = 30;
text.y = 16;
text.selectable = false;
text.setTextFormat(tf);
s.addChild(text);
trace(s.width, ", ", s.height) //<-- 100, 100
var s2 = new Sprite();
with(s2) {
graphics.beginFill(0xffffff, 1);
graphics.drawRect(0, 0, 99, 99);
graphics.endFill();
graphics.beginFill(0x000fff, 1);
graphics.drawRoundRect(6, 6, 84, 84, 8, 8);
graphics.endFill();
}
trace(s2.width, ", ", s2.height) //<-- 99, 99
Are the results I get. Is something else in your code scaling objects?

the width and height attribute for a textfield returns the width and height of the textfield boarder, which by default is 100 x 100
try this to see what I'm talking about
text.border = true;
if you want the actual size of the text in the textfield you need
trace(text.textWidth);
trace(text.textHeight);

Related

Three.js THREE.DeviceOrientationControls is not a constructor

I have a problem with ThreeJS giving me this error message. I included all the necessary ThreeJS files but still this message appears. My intention is to have a mobile device navigating with DeviceOrientationControl.js. Mousemove works very well, but I can't get this to work. Any ideas?
Uncaught TypeError: THREE.DeviceOrientationControls is not a constructor
at init ((index):201)
at (index):193
Error Message
<script type="module">
import * as THREE from '/bftest/three/build/three.module.js';
import {OrbitControls} from '/bftest/three/examples/jsm/controls/OrbitControls.js';
import {GLTFLoader} from '/bftest/three/examples/jsm/loaders/GLTFLoader.js';
import {DeviceOrientationControls} from '/bftest/three/examples/jsm/controls/DeviceOrientationControls.js';
var camera, scene, renderer, stats, controls, windowHalfX = window.innerWidth / 2,
windowHalfY = window.innerHeight / 2,
mouseX = 0,
mouseY = 0;
var renderer = new THREE.WebGLRenderer();
renderer.shadowMap.enabled = true;
renderer.shadowMapSoft = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
var width = window.innerWidth;
var height = window.innerHeight;
init();
animate();
function init() {
camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 1000);
controls = new THREE.DeviceOrientationControls(camera);
camera.position.set(0, 0, 8);
scene = new THREE.Scene();
var directionalLight = new THREE.DirectionalLight(0xffffff, 5);
directionalLight.color.setHSL(0.1, 1, 0.95);
directionalLight.position.set(0, 1, 1);
directionalLight.position.multiplyScalar(10);
scene.add(directionalLight);
directionalLight.shadow.mapSize.width = 2048;
directionalLight.shadow.mapSize.height = 2048;
directionalLight.shadow.camera.left = -20;
directionalLight.shadow.camera.right = 20;
directionalLight.shadow.camera.top = 20;
directionalLight.shadow.camera.bottom = -20;
directionalLight.shadow.camera.near = 1;
directionalLight.shadow.camera.far = 200;
directionalLight.shadowCameraVisible = true;
var spotLight1 = new THREE.DirectionalLight( 0xff4000 );
spotLight1.position.set( -15, 3, -4 );
spotLight1.target.position.set( 0, 1, 0 );
spotLight1.intensity = 1.2;
spotLight1.shadowDarkness = 0.5;
spotLight1.shadowcameranear = 0;
spotLight1.shadowcamerafar = 15;
spotLight1.shadowcameraleft = -5;
spotLight1.shadowcameraright = 5;
spotLight1.shadowcameratop = 5;
spotLight1.shadowcamerabottom = -5;
spotLight1.castShadow = true;
scene.add( spotLight1 );
var spotLight2 = new THREE.DirectionalLight( 0xff0aea );
spotLight2.position.set( 15, 3, -4 );
spotLight2.target.position.set( 0, 1, 0 );
spotLight2.intensity = 1.2;
spotLight2.castShadow = true;
scene.add( spotLight2 );
var hemisphereLight = new THREE.HemisphereLight(0xffffff,0x000000, .5)
var shadowLight = new THREE.DirectionalLight(0xff8f16, .4);
shadowLight.position.set(50, 0, 22);
shadowLight.target.position.set(50, 50, 0);
shadowLight.rotation.set(Math.PI / -2, 0, 0);
shadowLight.shadow.camera.near = 0.5;
shadowLight.shadow.camera.far = 5000;
shadowLight.shadow.camera.left = -500;
shadowLight.shadow.camera.bottom = -500;
shadowLight.shadow.camera.right = 500;
shadowLight.shadow.camera.top = 500;
scene.add(shadowLight);
var light2 = new THREE.DirectionalLight(0xfff150, .25);
light2.position.set(-600, 350, 350);
var light3 = new THREE.DirectionalLight(0xfff150, .15);
light3.position.set(0, -250, 300);
scene.add(hemisphereLight);
scene.add(shadowLight);
const gltfLoader = new GLTFLoader();
gltfLoader.load('./3D/Bobby.glb', (gltf) => {
const root = gltf.scene;
root.rotateY(-89.55);
root.position.set(0, -0.7, 0);
root.castShadow = true;
gltf.scene.traverse(function(node) {
if (node instanceof THREE.Mesh) {
node.castShadow = true;
}
});
scene.add(root);//default is false
// compute the box that contains all the stuff
// from root and below
const box = new THREE.Box3().setFromObject(root);
const boxSize = box.getSize(new THREE.Vector3()).length();
const boxCenter = box.getCenter(new THREE.Vector3());
// set the camera to frame the box
frameArea(boxSize * 0.7, boxSize, boxCenter, camera);
box.castShadow = true;
// update the Trackball controls to handle the new size
controls.maxDistance = boxSize * 10;
controls.target.copy(boxCenter);
});
renderer = new THREE.WebGLRenderer({ antialias: true, canvas: document.querySelector('canvas'), alpha: true, });
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
window.addEventListener( 'resize', onWindowResize, false );
window.addEventListener('mousemove', onDocumentMouseMove, false);
}
function onDocumentMouseMove(event) {
mouseX = - (event.clientX - windowHalfX) /150;
mouseY = - (event.clientY - windowHalfY) /150;
}
function animate() {
requestAnimationFrame(animate);
render(scene,camera);
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function render() {
camera.position.x += (mouseX - camera.position.x)*0.9;
camera.position.y += (-mouseY - camera.position.y)*0.9;
camera.lookAt(scene.position);
renderer.render(scene, camera);
}
</script>
When importing examples files like DeviceOrientationControls via ES6 modules, using the THREE namespace is not necessary anymore. So instead of
controls = new THREE.DeviceOrientationControls(camera);
use
controls = new DeviceOrientationControls(camera);

Gradient TextField ActionScript 3

I have been searching for a way to put gradient colors on TextField component for the past few hours with no luck. One method is to create a gradient rectangle and set the TextField as a mask for it but I can't make it work:
var m:MovieClip = new MovieClip();
var mTxt:Sprite = new Sprite();
var txt:TextField = new TextField();
var tf:TextFormat = new TextFormat();
var dropShadow:DropShadowFilter = new DropShadowFilter();
dropShadow.distance = 0;
dropShadow.angle = 120;
dropShadow.color = 0x000000;
dropShadow.alpha = 1;
dropShadow.blurX = 2;
dropShadow.blurY = 2;
dropShadow.strength = 1;
dropShadow.quality = 80;
dropShadow.inner = false;
dropShadow.knockout = false;
dropShadow.hideObject = false;
txt.filters = new Array(dropShadow);
tf.font = "Ethnocentric Rg";
tf.color = 0xffde00;
tf.size = 72;
txt.defaultTextFormat = tf;
txt.text = "1756.25";
mTxt.addChild(txt);
var fillType:String = GradientType.LINEAR;
var colors:Array = [0xFF0000, 0x0000FF];
var alphas:Array = [1, 1];
var ratios:Array = [0x00, 0xFF];
var matr:Matrix = new Matrix();
matr.createGradientBox(400, 100, 0, 0, 0);
var spreadMethod:String = SpreadMethod.REFLECT;
m.graphics.beginGradientFill(fillType, colors, alphas, ratios, matr, spreadMethod);
m.graphics.drawRect(0,0,400,120);
m.mask = mTxt;
addChild( m );
This code literally crashes the AIR debugger and exits itself.
What am I doing wrong here?
Set cacheAsBitmap to true and make sure you're adding the mask to the stage.
m.cacheAsBitmap = mTxt.cacheAsBitmap = true;
m.mask = mTxt;
addChild( m );
addChild( mTxt );
I had to set both layers' cacheAsBitmap option to true:
txt.cacheAsBitmap = true;
m.cacheAsBitmap = true;
addChild( m );
addChild(txt);
m.mask = txt;

How to re size a circle by dragging its child holder on it?

I want to resize a circle by dragging its child holder movieclip, Can any body tell me how to so this in as3.Its just like transforming movielcip
Here is my code so far:
var pupil:MovieClip=new MovieClip();
var holder:MovieClip=new MovieClip();
pupil.graphics.lineStyle(1, 0x000000);
pupil.x = pupil.y = 100;
pupil.graphics.beginFill(0xFF0000, .1);
pupil.graphics.drawCircle(0, 0, 20);
pupil.graphics.endFill();
holder.graphics.beginFill(0xFF0000);
holder.graphics.drawCircle(pupil.width/2,0, 4);
holder.graphics.endFill();
addChild(pupil);
pupil.addChild(holder);
holder.buttonMode = true;
Try the below code i hope this is what you need.
import flash.events.MouseEvent;
import flash.geom.Point;
import flash.events.Event;
var pupil:MovieClip=new MovieClip();
var holder:MovieClip=new MovieClip();
var newPoint:Point = new Point();
var dist:Number;
pupil.graphics.lineStyle(1, 0x0000FF);
pupil.x = pupil.y = 100;
pupil.graphics.beginFill(0x0000FF, .1);
pupil.graphics.drawCircle(0, 0, 50);
//pupil.graphics.endFill();
holder.graphics.beginFill(0xFF0000);
holder.graphics.drawCircle(0,0, 5);
holder.graphics.endFill();
holder.x = pupil.width/2;
addChild(pupil);
pupil.addChild(holder);
holder.buttonMode = true;
holder.addEventListener(MouseEvent.MOUSE_DOWN, onHolderClikded);
holder.addEventListener(MouseEvent.MOUSE_UP, onHolderReleased);
function onHolderClikded(eve:MouseEvent):void{
holder.startDrag();
addEventListener(Event.ENTER_FRAME, onPointMoving)
}
function onPointMoving(eve:Event):void{
newPoint.x = holder.x;
newPoint.y = holder.y;
dist = Point.distance(new Point(0,0),newPoint.clone());
pupil.graphics.clear();
pupil.graphics.lineStyle(1, 0x0000FF);
pupil.graphics.beginFill(0x0000FF, .1);
pupil.graphics.drawCircle(0, 0, dist);
}
function onHolderReleased(eve:MouseEvent):void{
holder.stopDrag();
}
Here's something that should get you started.
var pupil:MovieClip = new MovieClip();
pupil.x = stage.stageWidth / 2;
pupil.y = stage.stageHeight / 2;
addChild(pupil);
var holder:MovieClip = new MovieClip();
holder.buttonMode = true;
holder.graphics.beginFill(0xFF0000);
holder.graphics.drawCircle(0, 0, 4);
holder.graphics.endFill();
pupil.addChild(holder);
holder.addEventListener(MouseEvent.MOUSE_DOWN, mouse);
holder.addEventListener(MouseEvent.MOUSE_UP, mouse);
function mouse(e:MouseEvent):void
{
switch(e.type)
{
case MouseEvent.MOUSE_DOWN:
addEventListener(Event.ENTER_FRAME, update);
break;
case MouseEvent.MOUSE_UP:
removeEventListener(Event.ENTER_FRAME, update);
break;
}
}
function update(e:Event):void
{
holder.x = pupil.mouseX;
holder.y = pupil.mouseY;
var d:Number = Math.sqrt(holder.x * holder.x + holder.y * holder.y);
pupil.graphics.clear();
pupil.graphics.lineStyle(1, 0x000000);
pupil.graphics.beginFill(0xFF0000, .1);
pupil.graphics.drawCircle(0, 0, d);
pupil.graphics.endFill();
}
Get the absolute x/y coordinates (relative to the stage ofc) and do the same to the circle parent itself. Get the difference, apply sqrt( x*x + y*y ) with the distances between those coordinates and you should get the radius or diameter (depending if the registry point is at the center of the circle or not).

AS3 - How to add bevel filter on MovieClip after I changed its color

When I change color with
var blue:ColorTransform = new ColorTransform();
blue.color = 0xFF00B8E7;
MovieClip.transform.colorTransform = blue;
I add this
var myBevel:BevelFilter = new BevelFilter();
myBevel.type = BitmapFilterType.INNER;
myBevel.distance = 3;
myBevel.highlightColor = 0xFFFFFF;
myBevel.shadowColor = 0x000000;
myBevel.blurX = 5;
myBevel.blurY = 5;
MovieClip.filters = [myBevel];
the result is, only color changed.
How can I add this bevel over or on the new color that I changed?
I looked everywhere and found no answer to my problem.
So I hope you guys here, can help me!
It seems like that the bevel takes all colors as the new color that I changed, not taking the one I specified
myBevel.highlightColor = 0xFFFFFF;
myBevel.shadowColor = 0x000000;
colorTransform will apply to the entire movieclip including any children and filters. If you try a drop shadow, you will see what I mean.
METHOD #1:
You can create a parent object with the bevel filter and attach your movieclip with colorTransform.
var parentObject:Sprite = new Sprite();
addChild(parentObject);
var mc:Sprite = new Sprite();
mc.graphics.beginFill(0xFFFF00);
mc.graphics.drawCircle(100,100, 100);
mc.graphics.endFill();
var blue:ColorTransform = new ColorTransform();
blue.color = 0xFF00B8;
var myBevel:BevelFilter = new BevelFilter();
myBevel.type = BitmapFilterType.INNER;
myBevel.distance = 3;
myBevel.highlightColor = 0xFFFFFF;
myBevel.shadowColor = 0x000000;
myBevel.blurX = 5;
myBevel.blurY = 5;
parentObject.filters = [myBevel];
parentObject.addChild(mc);
mc.transform.colorTransform = blue;
METHOD #2:
To avoid having a parent object to handle the bevel, I used two ColorMatrixFilters with an AdjustColor to accomplish what you are looking for. You will end up with 3 filters, one to make the object white, one to change to the color you want, and the last bevel filter. If you are using an IDE other than Flash, like Flex or FlashDevelop, you will need to include flash.swc into your library from 'Common/Configuration/ActionScript 3.0/libs/flash.swc' for the fl.motion.AdjustColor package/class.
var mc:Sprite = new Sprite();
mc.graphics.beginFill(0xFF0000);
mc.graphics.drawCircle(100, 100, 100);
mc.graphics.endFill();
addChild(mc);
// White out the entire shape first
var whiteAC:AdjustColor = new AdjustColor();
whiteAC.brightness = 100;
whiteAC.contrast = 100;
whiteAC.saturation = -100;
whiteAC.hue = 0;
var whiteMatrix:Array = whiteAC.CalculateFinalFlatArray();
var whiteCMF:ColorMatrixFilter = new ColorMatrixFilter(whiteMatrix);
// Now use ColorMatrixFilter to change color
var colorMatrix:Array = hexToMatrix(0x0000FF);
var colorCMF:ColorMatrixFilter = new ColorMatrixFilter(colorMatrix);
// Create bevel
var myBevel:BevelFilter = new BevelFilter();
myBevel.type = BitmapFilterType.INNER;
myBevel.distance = 3;
myBevel.highlightColor = 0xFFFFFF;
myBevel.shadowColor = 0x000000;
myBevel.blurX = 5;
myBevel.blurY = 5;
mc.filters = [whiteCMF, colorCMF, myBevel];
function hexToMatrix ( hex:uint, alpha:Number = 1 )
{
var r:Number = ((hex & 0xFF0000) >> 16);
var g:Number = ((hex & 0x00FF00) >> 8);
var b:Number = ((hex & 0x0000FF));
var matrix:Array = [];
matrix = matrix.concat([r, 0, 0, 0, 0]); // red
matrix = matrix.concat([0, g, 0, 0, 0]); // green
matrix = matrix.concat([0, 0, b, 0, 0]); // blue
matrix = matrix.concat([0, 0, 0, alpha, 0]); // alpha
return matrix;
}
Experiment with the order in which you apply the transformations:
...;
myMovieClip.transform.colorTransform = blue;
...;
myMovieClip.filters = [myBevel];
VS:
...;
myMovieClip.filters = [myBevel];
...;
myMovieClip.transform.colorTransform = blue;
The bevel might also be supplying its own fill over whatever you're doing with the color transform. You might want to experiment with the bevel's shadowAlpha and highlightAlpha properties. Set them to 0.1 and see if your movie clip is blue-shaded.

Create a text with drop shadow in AS3

I'm trying to create a simple text with a drop shadow in ActionScript 3.0; for example:
_tf = new TextField();
_tf.autoSize = TextFieldAutoSize.CENTER;
_tf.selectable = false;
var format:TextFormat = new TextFormat();
format.font = "Arial";
format.bold = true;
format.color = 0xffffff;
format.size = 12;
_tf.text = "Drop shadow";
_tf.defaultTextFormat = format;
addChild(_tf);
How can i get this text with a drop shadow??
_tf.filters = [new DropShadowFilter()];
or even better;
_tf.filters = [filter(4,153,0xffffff,0.7,4,4,0.7,0.15,false,false,false)];
function filter(distance, angle, color, alpha, blurX, blurY, strength, quality, inner, knockout, hideObject){
return new DropShadowFilter(distance, angle, color, alpha, blurX, blurY, strength, quality, inner, knockout, hideObject);
}
other way:
_tf.filters = [new DropShadowFilter(4.0,45,0x000000,1.0,4.0,4.0,1.0,1,false,true,false)];
/*
DropShadowFilter(distance:Number = 4.0, angle:Number = 45, color:uint = 0, alpha:Number = 1.0, blurX:Number = 4.0, blurY:Number = 4.0, strength:Number = 1.0, quality:int = 1, inner:Boolean = false, knockout:Boolean = false, hideObject:Boolean = false);
DropShadowFilter
distance:Number = 4.0
angle:Number = 45
color:uint = 0
alpha:Number = 1.0
blurX:Number = 4.0
blurY:Number = 4.0
strength:Number = 1.0
quality:int = 1
inner:Boolean = false
knockout:Boolean = false
hideObject:Boolean = false
*/
documentation here: http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/filters/DropShadowFilter.html