iiley July 13th, 2009

From AWSSOFT’s Droower comments, i saw Srdjan has done some transform of AsWing components. There is a Rotated/Skewed text with scrollbar, so i guess maybe we can made 3D effects for user interface by just AsWing components, with some test, i first just rotate a JList with JFrame, sadly the text will not be shown when rotated(this should be a well-known flash feature), see this rotation. I guess Srdjan cached his text into a Bitmap, so his Rotated/Skewed text displays well.

Then, i tested the new properties from FP10, rotationX/Y/Z, it’s exciting that FP10 renders text very well in 3D transform. See this rotation_y. It’s almost a realy 3D user interface, currently everything is fine except the Drag function of JFrameTitleBar, maybe the drag() function doesn’t works with 3D transform.

Here’s the source code snip(it’s simple):

AsWingManager.initAsStandard(this);
var sprite:Sprite = new Sprite();
addChild(sprite);

sprite.x = sprite.y = 150;
sprite.rotation = -40;


• A3 , Tutorials
• Comments(3)

iiley July 8th, 2009

Maybe it is a old news, many guys already have seen the awesome stuff yesterday — Code and Edit and Compile then Run your ActionScript programme online. It is not a simple text editor and call backend compiler, it is powerful just like a real IDE! Great works, Victor!!

Flash MiniBuilder

The reason i post it here because it use AsWing, although it just used scrollbars buttons and combobox, not a heavy use of AsWing, but maybe we can never know the inside if the author does not tell us:

for quite a while, i’ve been looking for a component set that would suite my needs better than the bulky flex
one of the problems i couldn’t get flex to solve is editing big texts (like 6000 lines), where it becames very slow.
i tried to build my own text area and failed under flex, it’s still slow anything i do
but i managed to build a very fast one using aswing and viewportable interface.
the purpose of this component is editing actionscript code, and some class files are quite long

using aswing and viewportable, this component can manage pasting 6000 lines of code instantly and then
scroll with no delay at all. of course, it renders only the visible fragment of text.

This is not a defence or compares, it just says that AsWing can handle that flexible i even don’t know. Of course it is main because of the great implement of ScriptArea too.

Tags: Showcase

• A3 , Tutorials
• Comments(3)

iiley February 6th, 2009

Well, at the past, it’s hard to custom the skin of AsWing components.
With 2.0, we plan to improve this because there’s not many guys can make a new LookAndFeel, they want to change some basic properties directly by just call some methods.

Here it is, for example we have a normal button - “A Button”.(The first button in the picture, PS:this is not the final design of button look, it will be well designed when 2.0 released)

We want to change its color, just call button.setBackground(new ASColor(0xF4A0AA));, it will be looks like “Blue Button”, you can see it changes well, the gradient, border and shadow keep looks well, really a blue button.

How about a red button? Simple, setBackground(new ASColor(0xf4a0aa)); then it will looks like “Red Button”.

Want to make it flater? Yes you can, there’s StyleTune for every component, you can call button.setStyleTune(button.getStyleTune().sharpen(0.1));, then it will looks like “Flatten Button”, 0.1 times gradient; well same way to sharpen it call button.setStyleTune(button.getStyleTune().sharpen(2)); it becomes 2 times sharper than normal one like “Sharpen Button”

Also, you can change the round property of StyleTune to 10, you’ll get a button looks like “Round Button”.

All about StyleTune class, it has 5 major properties to affect the style of a component, you can read the asdoc to know it:

/**
* Gradient brightness range of content color [-1, 1]
*/
public var cGradient:Number;
/**
* The birightness offset for border color [-1, 1]
*/
public var bOffset:Number;
/**
* Gradient brightness range of border color [-1, 1]
*/
public var bGradient:Number;
/**
* Shadow alpha value [0, 1]
*/
public var shadowAlpha:Number;

/**
* Create a UIColorAdjuster with specified params
* @param cg gradient brightness range of content color
* @param bo birightness offset for border color
* @param bg gradient brightness range of border color
* @param sa shadow alpha
* @param r the round rect radius, 0 means not round
*/
public function StyleTune(cg:Number=0.2, bo:Number=0.15, bg:Number=0.35, sa:Number=0.2, r:Number=0)


With a full customized StyleTune and background foreground set, you even can get a button like “Customed” button in the picture. Its StyleTune and colors are:

button.setStyleTune(new StyleTune(0.18, 0.05, 0.20, 0.20, 2));
button.setBackground(new ASColor(0x299083));
button.setForeground(new ASColor(0xFFFFFE));

Next time, i’ll introduce another feature about Component.setMideground()

• A3 , Tutorials
• Comments(0)

iiley November 6th, 2008

Some guys asked me about this question for times, i thought i should make a post here since you want to know this too.:)

Well, all the Popups in AsWing, including JPopup and all its sub classes such as JWindow JFrame, has their owner — the first param of their constructor, for example new JFrame(owner, …), the owner specified where the popups create their assets. You can set a default owner for all popups by calling AsWingManager.init(defaultOwner, …) or AsWingManager.setRoot(defaultOwner), if there’s a default owner set, you can pass null to the popup constructors, null means to use default one.

So, how to make a popup on top of others? Yes, you already know, just make its owner on top of others, for example, there’s two sprite on your stage, sprite2 is on top of sprite1, if you call AsWingManager.setRoot(sprite1) to make sprite1 as default owner, then you created a popup with sprite2 as its owner for example topFrame = new JFrame(sprite2, …), then you’ll got topFrame always on top of other popups which created with default owner.

BTW, the owner can be a JPopup instance too, if a owner is a popup, the created popup will be its sub popup, always on top of parent popup and if parent popup hide or minimized the sub popup will be non-visible.

Here’s a demo:

public class TopPopup extends Sprite{

}


(Click here to run the SWF)

Tags: Tip

• A3 , Tutorials
• Comments(0)

iiley November 5th, 2008

Although we have JAdjuster component for AsWing, but sometimes people ask us for NumericStepper, most time, we tell them just use JAdjuster, we know it’s different, but most time they are replacable.

Well, if you do want a NumericStepper component, it’s easy to create by your self, just combine with JTextField+2Button, with a BoundedRangeModel, a basic MVC NumericStepper component born.

Here’s a example implementation, see the demo screenshot below:

The test App source code:

package{

private function __nsStateChanged(e:Event):void{
infoText.appendByReplace("value : " + ns.getModel().getValue()+"\n");
infoText.scrollToBottomLeft();
}
}
}


Well, for copyright reason, i can’t post all of the component codes, maybe after the book published, there will be a downloadable version.

But trust me, if you want, you can implement it easily by yourself, a Container with a BorderLayout, left is a JTextField(lost border and background), right is a Box contains two JButton with Arrow Icons, and with a BoundedRangeModel to hold the data(you can take JAdjuster as example), finally create a Border to your NumericStepper, it is!

Tags: NumericStepper

• A3 , Tutorials
• Comments(0)

iiley November 3rd, 2008

Some days ago, Stef and Oliver told about the flash player 10 new class Vector conflict with AsWing’s org.aswing.util.Vector, seems we need to rename AsWing one to another name. Some like ASVector(since we have ASFont, ASColor etc.) or just ArrayList.

But today i finally got a chance to try Flex4 SDK, i compiled a SWF with AsWing component and FP10 Vector, in fact it is __AS3__.vec.Vector, not a top class. There’s not any problem, every thing runs very well.

So, i guess, maybe after Flex 4 SDK formal version released, Vector will become a top class?
Then, there will not have problem too, just, if you use two Vector class in same class file, you have to always use the full name of org.aswing.util.Vector, it’s not really a problem, just, hmmm, not convenient.

I can’t just rename the class name right now before more full test, but i guess i will finally rename our Vector to ArrayList, and maybe replace most our Vector use to Adobe’s, since it is much faster?

Except this, i have not found any other compatibility problem of AsWing on FP10, if you found some, please must tell me!:)

Tags: FP10

• A3 , Tutorials
• Comments(0)

iiley July 14th, 2008

Some times, our art designer prefer a unregular window, especially for a game UI or some cool application.

Well, here is a tip:


package{

private function __mouseUp(e:Event):void{
window.stopDrag();
}
}
}


(Click here to run the swf)
It is simple, just add a Image to the background of the JWindow, we added a Picture in this demo, but you, you even can add a Movie to be the background. Or even a MovieClip with Shapes, Buttons created by Flash IDE…

Tags: Tip

• Tutorials
• Comments(3)

iiley July 11th, 2008

Assume we have a dialog looks like below:

It is created by code(snippted):

AsWingManager.initAsStandard(this);
var okButton:JButton = new JButton("Conform");
var cancelButton:JButton = new JButton("Cancel");
var tipButton:JButton = new JButton("Tip");
var pane:JPanel = new JPanel(new FlowLayout(FlowLayout.RIGHT, 4, 4));
pane.appendAll(tipButton, okButton, cancelButton);

var window:JFrame = new JFrame(null, "Gap");
window.getContentPane().append(pane, BorderLayout.SOUTH);
window.setComBoundsXYWH(10, 10, 200, 200);
window.show();

The three button is layouted by a FlowLayout, they have same 4 pixel gap between each other. If i want to increase only the gap between Tip and Conform buttons, it’s not easy to do it with little change of above code except use a EmptyBorder.
If i add this setence below tipButton creating:
tipButton.setBorder(new EmptyBorder(null, new Insets(0, 0, 0, 20)));
The final dialog will be looks like this:

You see, it’s easy.

EmptyBorder performance a border with blank graphics. So it is usually used to create gaps. And depond on AsWing Border system, border can be nested, so you even can make a gap between two border of one component, for exampel.
yourCompnent.setBorder(new LineBorder(new EmptyBorder(new BevelBorder(), new Insets(…))));

Tags: Tip

• A3 , Tutorials
• Comments(0)