Online Timesheet Software – TiMeister – Weblog

Flash Builder 4: Network Monitor and new debugger options from Mihai Corlan on Vimeo.

If you want to create a localized application you may find yourself in a strange situation when you did all the steps like in the book, but you continue to receive the “Unable to open locale xx_XX” error messages.

To simulate a fix on this issue we will take the example of adding French to your app.

Basic steps:
- The first step is to create a fr_FR folder under the /locale/ one exactly like in the Flex documentation and then add the translated bundle.properties file.
- The second step is to add the compiler options: -locale en_US,fr_FR

Extra steps you need to make in order to get rid of the ugly “unable to open locale” error message:

1. goto the following path :

<flex-install-folder>/sdks/<current-sdk-folder>/bin/

for windows it’s: C:\Program Files\Adobe\Flex Builder 3\sdks\3.2.0\bin\

2. Execute the following command:

> copylocale.exe en_US fr_FR

That’s all, hope we helped you!
————————-

The TiMeister Team

Hello,

If you are trying to access the stage of your application right when your app is completed then you’re doing something wrong.

BAD CODE Most of the cases programmers make the following mistake:

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init()">
    <mx:Script>
        <![CDATA[
            import flash.display.StageDisplayState;
            private function init():void
            {
                var s:Stage = this.stage; //<<-- this.stage == null...why??
                s.scaleMode = StageScaleMode.EXACT_FIT;
            }
        ]]>
    </mx:Script>
</mx:WindowedApplication>

GOOD CODE : The correct approach is the following:

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication
       xmlns:mx="http://www.adobe.com/2006/mxml"
       creationComplete="init()">
    <mx:Script>
        <![CDATA[
            import flash.display.StageDisplayState;
            private function init():void
            {
                this.systemManager.stage.scaleMode = StageScaleMode.EXACT_FIT;
            }
        ]]>
    </mx:Script>
</mx:WindowedApplication>

Hope we helped you with this issue we also had in our beginning as Flex Devlopers

We wanted to share with you a great video tutorial about how to use Adobe Flash Catalyst and create Flex Applications starting just with an image.
The tutorial explains in details how you can create a Flex button and a scrollbar using Catalyst.

Subscribe to newsletter and get 50% of Timeister Premium Pack

Subscribe now to our blog newsletter and get rid of 50% from Timeister Premium Pack.
TiMeister is FREE Online Timesheet Software and it will be launched for beta testing in a few.

Don’t miss this offer and also take andvantage of our great blog posts by just entering your e-mail address

Thanks!
—————-
The TiMeister Team

The following example shows how you can display a video using the chromeless VideoElement control in Flex Gumbo.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/05/14/displaying-a-video-using-the-videoelement-control-in-flex-gumbo/ -->
<s:Application name="Spark_VideoElement_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo"> 

    <mx:ApplicationControlBar width="100%" cornerRadius="0">
        <s:Button id="playBtn"
                label="play"
                click="videoElement.play();" />
        <s:Button id="pauseBtn"
                label="pause"
                click="videoElement.pause();" />
        <s:Button id="stopBtn"
                label="stop"
                click="videoElement.stop();" />
        <s:CheckBox id="mutedCheckBox"
                label="muted"
                selected="true"
                click="videoElement.muted = mutedCheckBox.selected;" />
        <s:Graphic>
            <s:SimpleText id="playheadTimeLabel"
                    text="{videoElement.playheadTime.toFixed(3)}" />
        </s:Graphic>
    </mx:ApplicationControlBar>

    <s:Group horizontalCenter="0" verticalCenter="0">
        <s:VideoElement id="videoElement"
                autoRewind="true"
                source="http://helpexamples.com/flash/video/cuepoints.flv"
                muted="true"/>
    </s:Group>

</s:Application>

Here you can see the live result and also download the project source code by right clicking inside the application.

Step 1:
Create Up, Over, Down, Disabled states for the button with Photoshop

1.1 Open Photoshop and choose the desired button size. I will choose 90×28px with transparent background.

1.2 Using the “rounded rectagle tool” create the button to look like in the image

1.3 Duplicate the existing layer, set the “Fill” property to 0 and then apply a gradient effect like in the image below.

1.4 now let’s make the button cloured . Apply to the first layer (original) an horizontal gradient overlay like in the image.

1.5 To make the button look even better we add a border and some inner glow to the originl layer like in the images below

1.6 Duplicate the first layer (original) and edit the colors so you can get all 4 states of our button.

1.7 after getting ready all states for the buttons export them 1 by 1 as .png and name them button_up.png button_over.png button_down.png and button_dis.png

Step 2:
Add images to project and create CSS for the button

2.1 Create an Adobe Flex project and name it PhotoshopButton.

2.2 Create a folder inside the /src folder and name it /images

2.3 Copy the 4 png images to /src/images/

2.4 Create a folder inside the /src folder and name it /css, inside this folder Add a new css file and name it main.css

2.5 Inside the main.css file add the following button style:


/* CSS file */
Button
{
     up-skin: Embed(source="/images/button_up.png");
     over-skin: Embed(source="/images/button_over.png");
     down-skin: Embed(source="/images/button_down.png");
     disabled-skin: Embed(source="/images/button_dis.png");
     selected-down-skin: Embed(source="/images/button_down.png");
     selected-up-skin: Embed(source="/images/button_down.png");
    

     color: #ffffff;
     roll-over-color: #000000;
     disabled-color: #efefef;
}



2.6 Your project should look until now like this

2.7 Open the PhotoshopButton.mxml file and add the reference to your css file



<mx:Style source="css/main.css"/>

//Then add some buttons and let's see how does it look

<mx:HBox width= "100%" horizontalAlign="center">
    <mx:Button label= "Click Me!"/>
    <mx:Button label= "Disabled" enabled= "false"/>
</mx:HBox>




And again the result…

That’s all, enjoy!

Optimizing Air/Flash Applications – Sean Christmann

Here is a great post were you can download some nice icon packs that you can use inside your web applications.

Source: http://pirvulescu.wordpress.com/2009/04/25/free-web-20-icons-for-your-application/

Flash Player 10 and Adobe AIR 1.5 introduce a new communications protocol called the Real-Time Media Flow Protocol (RTMFP). The most important features of RTMFP include low latency, end-to-end peering capability, security and scalability. These properties make RTMFP especially well suited for developing real-time collaboration applications by not only providing superior user experience but also reducing cost for operators.

In order to use RTMFP, Flash Player endpoints must connect to an RTMFP-capable server, such as the Adobe Stratus service. Stratus is a beta, hosted rendezvous service that aids establishing communications between Flash Player endpoints. Unlike Flash Media Server, Stratus does not support media relay, shared objects, scripting, etc. So by using Stratus, you can only develop applications where Flash Player endpoints are directly communicating with each other.

Flash Player is already the market leader in online video distribution over the web. With the introduction of RTMFP and advanced media compression technologies, Flash Player 10 is well positioned as the leader in real-time communications as well.

With Adobe Stratus you can build:

* A video chat application
* Multi-player games
* Voice Over IP

Source: http://labs.adobe.com/technologies/stratus/