Show and Hide Effect for Image

The Fade effect animates the alpha property of a component. If played manually (outside of a transition) on an object whose visible property is set to false, and told to animate alpha from zero to a nonzero value, it will set visible to true as a side-effect of fading it in. When run as part of a transition, it will respect state-specified values, but may use the visible property as well as whether the object is parented in the before/after states to determine the values to animate alpha from and to if alphaFrom and alphaTo are not specified for the effect.

Here is the code for Adobe Example:



<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
  xmlns:s="library://ns.adobe.com/flex/spark" 
  xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
<s:Fade id="myFade" duration="2000"/>
</fx:Declarations>

<s:Panel width="800" height="650" backgroundColor="#DB2DA0" contentBackgroundColor="#B66D27"
title="Show and Hide Statue of Liberty Flex Effects">

<s:Image width="800" height="600" id="statue" source="assets/statue_of_liberty-800x600.jpg"  hideEffect="{myFade}" showEffect="{myFade}" />
<s:controlBarContent>
<s:Button label="Show" click="statue.visible=true"/>
<s:Spacer width="100%"/> 
<s:Button label="Hide" click="statue.visible=false" toolTip="Please wait for 2 seconds"/>
</s:controlBarContent>
</s:Panel>

</s:Application>

Background Image Just for Fun :)

A BitmapImage element defines a rectangular region in its parent element's coordinate space, filled with bitmap data drawn from a source file or source URL

SkinnablePopUpContainer Example

The SkinnablePopUpContainer class is a SkinnableContainer that functions as a pop-up. One typical use for a SkinnablePopUpContainer container is to open a simple window in an application, such as an alert window, to indicate that the user must perform some action.
You do not create a SkinnablePopUpContainer container as part of the normal layout of its parent container. Instead, it appears as a pop-up window on top of its parent. Therefore, you do not create it directly in the MXML code of your application.
Instead, you create is as an MXML component, often in a separate MXML file. To show the component create an instance of the MXML component, and then call the open() method. You can also set the size and position of the component when you open it.
To close the component, call the close() method. If the pop-up needs to return data to a handler, you can add an event listener for the PopUp.CLOSE event, and specify the returned data in the close() method.
The SkinnablePopUpContainer is initially in its closed skin state. When it opens, it adds itself as a pop-up to the PopUpManager, and transition to the normal skin state. To define open and close animations, use a custom skin with transitions between the closed and normal skin states.

Here is the code for Above Example:



<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
  xmlns:s="library://ns.adobe.com/flex/spark"
  xmlns:mx="library://ns.adobe.com/flex/mx" >
<fx:Style source="CustomPopup.css"/>

<fx:Script>
<![CDATA[
import mx.controls.Alert;
protected function login_clickHandler(event:MouseEvent):void
{
// TODO Auto-generated method stub
if(txtUserName.text=='Rocky' && txtPassword.text=='Hacker')
{
Alert.show("Successfully login to Adobe Flex 4.5 ....","Login ");
login.close();
}
else
{
Alert.show("Please enter the correct User Name and Password","Error");
}


}

protected function logout_clickHandler(event:MouseEvent):void
{
// TODO Auto-generated method stub
Alert.show("Successfully Logout to Adobe Flex 4.5 ....","Log Out ");
login.close();
}

]]>
</fx:Script>

<fx:Declarations>
<s:SkinnablePopUpContainer id="login">
<s:Panel title="Launching Adobe Flex 4.5 ...">
<s:Form x="-14" y="5" width="450" height="200" color="#3F9122" fontFamily="Verdana" fontSize="13">
<s:FormItem label="User Name">
<s:TextInput id="txtUserName" />
</s:FormItem>
<s:FormItem label="Password" >
<s:TextInput id="txtPassword" displayAsPassword="true"/>
</s:FormItem>
<s:HGroup>
<s:Button label="Log In" click="login_clickHandler(event)"/>
<s:Button label="Log Out" click="logout_clickHandler(event)"/>
</s:HGroup>
<s:Label text="Enter User name Rocky and Password Hacker to login"/>
</s:Form>

</s:Panel>
</s:SkinnablePopUpContainer>
</fx:Declarations>
<s:Button x="53" y="37" label="Click here to Sign to Adobe Flex 4.5"
 click="login.open(this,false)"/>
<s:Label x="53" y="11" text="Welcome to Adobe Flex 4.5 Components "/>

</s:Application>


Css file:



/* CSS file */
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";




global
{
font-family: Georgia;
font-size: 14;
color: #3363A4;
chrome-color: #A2B8A2;
selection-color: #424234;
}

Custom Alert Message in Flex 4.5

The Alert control is a pop-up dialog box that can contain a message, a title, buttons (any combination of OK, Cancel, Yes, and No) and an icon. The Alert control is modal, which means it will retain focus until the user closes it.
Import the mx.controls.Alert class into your application, and then call the static show() method in ActionScript to display an Alert control. You cannot create an Alert control in MXML.
The Alert control closes when you select a button in the control, or press the Escape key.

Here is the Code for the Alert Message:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
  xmlns:s="library://ns.adobe.com/flex/spark" 
  xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
<fx:Style source="PopUpWindow.css"/>

<fx:Script>
<![CDATA[
import mx.controls.Alert;
protected function button1_clickHandler(event:MouseEvent):void
{
Alert.yesLabel="Flex is Awesome";
Alert.noLabel="I am not Agree !";
Alert.buttonWidth=120;
Alert.show("Flex 4.5 is Awesome ....","Flex Message",(Alert.YES|Alert.NO));

}
]]>
</fx:Script>

<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:Button x="216" y="182" label="Show Alert Message" click="button1_clickHandler(event)"/>
</s:Application>

Css:

/* CSS file */

@namespace s "library://ns.adobe.com/flex/spark";

@namespace mx "library://ns.adobe.com/flex/mx";

global

{

font-family: Georgia;

font-size: 14;

color: #762C2C;

}

Flex SDK Security Patch Now Available

A security patch for the Flex SDK is now available to address a vulnerability that will cause many Flex applications to be vulnerable to cross-site scripting (XSS) attacks.  These applications must be patched in order to protect user data. Please review this bulletin to determine if your applications are at risk and to obtain instructions on how to patch your applications.

If you have any questions about the security bulletin, please email PSIRT@adobe.com

An Update on Flex -- Deepa Subramaniam

I wanted to share a brief update on where we are with our preparation of proposals for incubation of Flex SDK and BlazeDS to the Apache Software Foundation as well as our commitment to engaging with the Flex community further.

Regarding the incubation proposals, we have received all of the necessary Adobe legal clearance in order to contribute the full Flex SDK (including MXML compiler, automation libraries and data visualization components) to Apache. As such we have a draft incubation proposal for Flex SDK prepared and are aiming to post that to the Apache incubation mailing list within the next 1-2 weeks. Once the proposal has been posted, the normal process is that community members review the proposal for a period of time (normally 72 hours) after which the ASF votes. A positive vote means the project has been accepted as an incubation podling into Apache. Keep an eye out on this blog for regular status updates, including a link to the proposal once its been posted to the Apache incubation mailing list.

As for BlazeDS, at this time we are still working on legal clearance but aim to have that before the end of the year such that we can post the BlazeDS incubation proposal to the Apache mailing list at the start of the new year.

In order to better facilitate discussion with our broad developer community, next Monday (12/12/11) and Tuesday (12/13/11) Adobe is hosting a Flex Community Summit where we are inviting a number of Flex community leaders and enterprise developers to participate in a discussion on a variety of topics. We will be discussing the recent announcements regarding Flex and the Flash Platform as well as educating all attendees about the Apache process and what it takes for a project to thrive within Apache. Unfortunately, due to budget, we were unable to invite everyone we would have liked to the summit. Most of the summit sessions and ensuing discussions will be video-taped and posted publicly after the summit. Additionally, we are working on a Flex Whitepaper that we will publish on the Adobe Developer Center which will recap much of the content covered in the summit.

And lastly, in order to replicate the same discussions that will happen at the summit, we are organizing a multi-city international Flex User Group tour that we are looking to kick off in early 2012.

We’ll be sure to share regular updates on this blog as the Apache proposals progress, the Flex Community Summit content is posted and cities/dates are finalized for the 2012 Flex User Group tour.

Deepa Subramaniam
Group Product Manager, Adobe

New Spark mobile components in Flex 4.6

Introducing Adobe Flex 4.6 SDK | Adobe Developer Connection:

What's new in Flash Builder 4.6 | Adobe Developer Connection

What's new in Flash Builder 4.6 | Adobe Developer Connection: