talkxe

riaxe snippets

Follow me on TwitterRSS Feeds

  • Home
  • About Us

AS3 Transform Tool for scaling, rotating components containing text controls in Flex

Apr 23rd

Posted by Susrut Mishra in actionscript

30 comments

Hello Everybody,  Got a chance to play with the Matrix class in as3 for creating a custom transform tool for scaling and rotating components containing text controls like the TextArea in Flex. I used the free Senocular’s Transform tool available but it scales the target component using the Matrix scaling resulting in scaling the text inside the text control.  So I used the Matrix class for rotating the tool and changed the width and height of the target by using transform matrix of the target.

You can find the first example here.

=============================================================

transformtool1

=============================================================

Find the second example here.

transtool2

=============================================================

Tranform tool v2
Live Example can be found here

Added a simple example of rotating a button control using transform matrix with source.

You can find the demo with source here.

Hope this is useful :)

Share
actionscript, as3, flex, matrix, rotate, scale, transform tool

Advance Button creator with custom gradient and corners

Mar 17th

Posted by Susrut Mishra in actionscript

No comments

As we know working with graphics is real fun but it is also difficult creating complex drawable components. I had a chance to create a advance button with properties like custom gradient,  custom corner change,  draggable corner radius change,  draggable scaling etc. Have a look.

The working example with source can be found here.

screenshot_1237275960359

screenshot_1237276039140

screenshot_1237276139406

screenshot_1237276185125

Share
actionscript, button, corner, drag, flex, gradient, scale

Simple tutorial for creating an AIR application using Merapi Bridge

Mar 15th

Posted by Susrut Mishra in actionscript

13 comments

Googling around the web I found the Merapi AIR-Java Bridge really interesting.  I created a screen capture application using the AIR window to capture screenshots of the windows desktop through Java [http://www.youtube.com/watch?v=Gp2BzQi-gSU]. Thought of creating a simple tutorial or example of how it works.

Java

  • Create a new Java project named MerapiExample
  • Add the Merapi jar files into the library [flex-messaging-common.jar, flex-messaging-core.jar, merapi-0.0.80.jar, tools.jar].
  • Create a package inside the src folder named merapi.java

screenshot_1237182722515

Create a class named SimpleMerapi.java which implements ImessageHandler as shown below:


package merapi.java;

import merapi.Bridge;
import merapi.messages.IMessage;
import merapi.messages.IMessageHandler;
import merapi.messages.Message;

public class SimpleMerapi implements IMessageHandler {

public void handleMessage(IMessage message)
{
try
{
merapi.messages.Message msg = (merapi.messages.Message)message;
System.out.println( "Received \"" + msg.getData() + "\" from Merapi Flex" );
System.out.println( "Responding with \"Hello Merapi Flex\"\n" );

//  Instantiate a Message to respond to Merapi Flex
Message response = new Message( "simpleMerapiType", "Hello Merapi Flex" );

//  Send message to Merapi Flex
Bridge.getInstance().sendMessage( response );
}
catch(Exception exception)
{
exception.printStackTrace();
}
}

/**
* main method that instantiates the Bridge...
*/
public static void main(String[] args) {
System.out.println( "Merapi Started\n" );
//  Register MerapiHelloWorld as a listener for messages of type "helloWorldType"
Bridge.getInstance().registerMessageHandler( "simpleMerapiType", new SimpleMerapi() );
}

}

AIR

  • Create a new AIR project named MerapiAIR
  • Add the merapi-core.swc into the library

screenshot_1237184795968

  • Create a button control and a VBox containing a Label and a Text control as shown below:

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication
xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:merapi="merapi.*"
layout="vertical" verticalAlign="top" horizontalAlign="center">

<merapi:BridgeInstance id="bridge" result="{responseText.text += bridge.lastMessage.data.toString()+'\n';}" />

<mx:Script>
<![CDATA[
import merapi.messages.Message;

private function onClick():void
{
bridge.sendMessage(new Message('simpleMerapiType', 'Hello from Flex!!'))
}
]]>
</mx:Script>

<mx:Button id="sayHelloButton"
label="Click to Say Hello to Merapi Java"
click="onClick()" />

<mx:VBox horizontalAlign="center">
<mx:Label text="Reponse from Merapi Java:" />
<mx:Text id="responseText" />
</mx:VBox>

</mx:WindowedApplication>
  • Now run the Java app first and then run the AIR app to the example in action.
  • It is not possible to start the Java app from AIR. So we can start the AIR app directly from Java using this Runtime.getRuntime().exec(“AIR app installtion path”); This way the AIR app will run directly from the Java app.

Note: This example was taken from the Merapi forum HelloWorld example.

Hope you enjoy it :)

Share
actionscript, AIR, as3, flex, jar, JAVA, merapi, message

Alive PDF from Flash Player 10 issue

Mar 7th

Posted by Susrut Mishra in actionscript

7 comments

I had an issue generating PDF from dynamic components from Flex. I used a VBox and added buttons as child dynamically.  I created pages each time a child is added and at the end generated the PDF. The PDF created blank pages.  I posted the issue in Kalen Gibbons’ Blog. Thanks to Kalen……the issue was solved. I would like to share the code with all of you.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" initialize="initializeHandler()">

<mx:Script>
<![CDATA[
import mx.events.CloseEvent;
import mx.controls.Alert;
import org.alivepdf.saving.Download;
import org.alivepdf.images.ResizeMode;
import org.alivepdf.saving.Method;
import org.alivepdf.images.ImageFormat;
import org.alivepdf.pages.Page;
import org.alivepdf.display.*;

import org.alivepdf.layout.*
import org.alivepdf.pdf.PDF;

private var mPDF:PDF;
private var numChildrenToAdd:Number = 10;

private function initializeHandler():void{
//initialize PDF
mPDF = new PDF(Orientation.PORTRAIT, Unit.MM, Size.A4 );
mPDF.setDisplayMode( Display.FULL_PAGE, Layout.SINGLE_PAGE );
}

private function onPDFCreate():void
{
/* Kick off a loop of adding children to the vbox.
When the child is added, the updateComplete handler will add
a page to the PDF and add another button to the vbox, which will
trigger the updateComplete handler and start the loop over again...
until all children have been added. */

var btn:Button = new Button();
btn.label = 'Click 1';
vbox.addChild(btn);
}

private function updateHandler():void{
//get the current number of children
var currentChildren:int = vbox.numChildren;
if(currentChildren == 0){ return; }

//add new page
var newPage:Page = new Page( Orientation.PORTRAIT, Unit.MM, Size.A4 );
mPDF.addPage( newPage );
mPDF.addImage(vbox, 0, 0, 0, 0, ImageFormat.PNG, 100, 1 );

//keep the loop going until all children have been addded
if(currentChildren < numChildrenToAdd){
var btn:Button = new Button();
btn.label = 'Click '+ (currentChildren+1);
vbox.addChild(btn);
}else if(currentChildren == numChildrenToAdd){
//all children are added so it's okay to print now
//mPDF.save(Method.REMOTE, "http://kalengibbons.com/assets/pages/pdfCreator.cfm", Download.INLINE);
Alert.show('Do u wanna pdf?', 'PDF Creation', Alert.OK|Alert.CANCEL, this, alertListener, null, Alert.OK);
}
}

private function alertListener(vEvent:CloseEvent):void
{
if(vEvent.detail == Alert.OK){
var file:FileReference = new FileReference();
file.save(mPDF.save(Method.LOCAL), "Module.pdf.pdf");
}
}

]]>
</mx:Script>

<mx:VBox id="vbox" borderStyle="solid" borderColor="0xff00ff"
width="100%" height="100%" updateComplete="updateHandler()" />
<mx:Button id="btn" label="CreatePDF" click="onPDFCreate()"/>

</mx:Application>
Share
actionscript, alivepdf, components, dynamic, flash, flex, pdf, player

Dynamic TextArea control that resizes with the text content

Feb 6th

Posted by Susrut Mishra in actionscript

2 comments

I found myself quite helpless creating a custom TextArea control resize itself with the text content. I followed the docs, help, googled the web to find something called textHeight and textWidth properties of the TextArea but that was not enough because it doesn’t resize itself on initialisation according to the text available within itself. For resizing the text on initialisation, the text should be validated. I tried validateNow() for validating the text but that too didn’t work. For making it work I created a custom TextArea component in mxml with a StringValidator. I have also added the text formatting part from keyboard shortcuts into the code using a TextRange.

The working example for this can be found here.

Here’s the code for the above example:

<?xml version="1.0" encoding="utf-8"?>
<mx:TextArea xmlns:mx="http://www.adobe.com/2006/mxml"
htmlText="Welcome to Flex3.0" wordWrap="false" change="onValidation()"
verticalScrollPolicy="off" horizontalScrollPolicy="off"
height="22" width="108" creationComplete="init()"
keyDown="onKeyDown(event)" updateComplete="onValidation()">

<mx:Script>
<![CDATA[
import mx.controls.textClasses.TextRange;

private function init():void
{
this.validateNow();
}

private function onValidation():void
{
var metrics:TextLineMetrics = this.getLineMetrics(0);
this.width = this.textWidth + 10;
this.height = this.textHeight + 10;
this.verticalScrollPosition = 0;
this.horizontalScrollPosition = 0;
}

private function onKeyDown(e:KeyboardEvent):void
{
var tr:TextRange = new TextRange(this, true);
if(e.ctrlKey && e.keyCode == 66){
if(tr.fontWeight == "normal"){
tr.fontWeight = "bold";
}
else{ tr.fontWeight = "normal" }
}
if(e.ctrlKey && e.keyCode == 73){
if(tr.fontStyle == "normal"){
tr.fontStyle = "italic";
}
else{ tr.fontStyle = "normal" }
}
if(e.ctrlKey && e.keyCode == 85){
if(tr.textDecoration == "normal"){
tr.textDecoration = "underline";
}
else{ tr.textDecoration = "normal" }
}
}
]]>
</mx:Script>
<mx:StringValidator source="{this}" property="text"
minLength="10" valid="onValidation()"/>
</mx:TextArea>
Share
actionscript, as3, dynamic, flash, flex, resize, textarea, textrange
«12345»
    • Popular posts
    • Archives
    • Tags
    • Categories
    • .NET (1)
    • actionscript (20)
    • AIR (2)
    • as2 (2)
    • as3 (16)
    • facebook (1)
    • flash (12)
    • flex (17)
    • JAVA (1)
    • Javascript (2)
    • mobile (1)
    • s60 (1)
    • symbian (3)
    3d actionscript AIR alivepdf arc as2 as3 button circular components corner cs4 cube doubleclick drag dynamic externalinterface fabridge flash flash builder flex gradient highlight icon iconfield jar JAVA Javascript lines matrix merapi message mouse pdf player resize rotate scale singleclick text textarea textrange text scaling tilelist transform tool
    • January 2012 (2)
    • December 2011 (1)
    • October 2011 (1)
    • August 2010 (2)
    • July 2010 (1)
    • June 2010 (1)
    • May 2010 (2)
    • April 2010 (1)
    • March 2010 (1)
    • November 2009 (1)
    • July 2009 (2)
    • April 2009 (1)
    • March 2009 (3)
    • February 2009 (1)
    • January 2009 (3)
    • AS3 Transform Tool for scaling, rotating components containing text controls in Flex (30)
    • Flex Firefox Flash Debug Player Crash [Solved] (16)
    • Simple tutorial for creating an AIR application using Merapi Bridge (13)
    • Publish into facebook wall from flex (13)
    • Alive PDF from Flash Player 10 issue (7)
    • Rotating text along a circular arc in as3 (7)
    • Adding Singleclick, Doubleclick and Drag events all at a time in as3 (5)
    • Using mouse position from Javascript into Flex (3)
    • Dynamic TextArea control that resizes with the text content (2)
    • AS3 Transform tool [Flex 4 Support] with text scaling and dynamic menu (2)
  • Twitxe

    Loading tweets...
    Follow me on Twitter!
  • Resources

    • ByteArray.org
    • Flex Examples
    • InsideRIA
    • lab.polygonal.de
    • Reflektions.com
    • ScaleNine
    • Senocular
    • The Official Flex Team Blog
Copyright © 2009 ::RIAXE:: | The solving side