TiMeister – Online Project Management Software

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

[ad]

<?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>

[ad]

The following example shows how you can toggle smoothing on a Spark VideoPlayer object in Flex Gumbo by setting the Boolean smoothing property on the VideoPlayer object’s internal videoObject property.

[ad]

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/05/24/toggling-smoothing-on-a-spark-videoplayer-object-in-flex-gumbo/ -->
<s:Application name="Spark_VideoPlayer_VideoElement_videoObject_smoothing_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">

    <fx:Script>
        <![CDATA[
            private function checkBox_change(evt:Event):void {
                videoPlayer.videoElement.videoObject.smoothing = checkBox.selected;
            }
        ]]>
    </fx:Script>

    <s:CheckBox id="checkBox"
            label="smoothing"
            left="10"
            top="10"
            change="checkBox_change(event);" />

    <s:Panel id="panel"
            title="{videoPlayer.source}"
            horizontalCenter="0"
            verticalCenter="0">
        <s:VideoPlayer id="videoPlayer"
                source="http://helpexamples.com/flash/video/water.flv"
                muted="true" />
    </s:Panel>

</s:Application>

[ad]

The following example shows how you can set left and right margins on a Spark TextArea control in Flex 4 by setting the paragraphStartIndent and paragraphEndIndent styles.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/06/04/setting-left-and-right-margins-on-a-spark-textarea-control-in-flex-4/ -->
<s:Application name="Spark_TextArea_paragraphStartIndent_text"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo">
    <s:layout>
        <s:VerticalLayout />
    </s:layout>
 
    <fx:Script>
        <![CDATA[
            private function sliderStart_change(evt:Event):void {
                textArea.setStyle("paragraphStartIndent", sliderStart.value);
            }
 
            private function sliderEnd_change(evt:Event):void {
                textArea.setStyle("paragraphEndIndent", sliderEnd.value);
            }
        ]]>
    </fx:Script>
 
    <mx:ApplicationControlBar width="100%" cornerRadius="0">
        <mx:Form styleName="plain">
            <mx:FormItem label="paragraphStartIndent:">
                <s:HSlider id="sliderStart"
                        liveDragging="true"
                        change="sliderStart_change(event);" />
            </mx:FormItem>
            <mx:FormItem label="paragraphEndIndent:">
                <s:HSlider id="sliderEnd"
                        liveDragging="true"
                        change="sliderEnd_change(event);" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>
 
    <s:Group width="100%" height="100%">
        <s:TextArea id="textArea"
                textAlign="justify"
                left="10" right="10"
                top="10" bottom="10">
            <s:content>
                <fx:String source="lorem.html" />
            </s:content>
        </s:TextArea>
    </s:Group>
 
</s:Application>

[ad]
The following example shows how you can set vertical spacing between paragraphs in a Spark TextArea control in Flex 4 by setting the paragraphSpaceBefore and paragraphSpaceArea styles.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/06/05/setting-vertical-spacing-between-paragraphs-on-the-spark-textarea-control-in-flex-4/ -->
<s:Application name="Spark_TextArea_paragraphSpaceBefore_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">
    <s:layout>
        <s:VerticalLayout />
    </s:layout>

    <fx:Script>
        <![CDATA[
            private function sliderBefore_change(evt:Event):void {
                textArea.setStyle("paragraphSpaceBefore", sliderBefore.value);
            }

            private function sliderAfter_change(evt:Event):void {
                textArea.setStyle("paragraphSpaceAfter", sliderAfter.value);
            }
        ]]>
    </fx:Script>

    <mx:ApplicationControlBar width="100%" cornerRadius="0">
        <mx:Form styleName="plain">
            <mx:FormItem label="paragraphSpaceBefore:">
                <s:HSlider id="sliderBefore"
                        liveDragging="true"
                        change="sliderBefore_change(event);" />
            </mx:FormItem>
            <mx:FormItem label="paragraphSpaceAfter:">
                <s:HSlider id="sliderAfter"
                        liveDragging="true"
                        change="sliderAfter_change(event);" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <s:Group width="100%" height="100%">
        <s:TextArea id="textArea"
                textAlign="justify"
                left="10" right="10"
                top="10" bottom="10">
            <s:content>
                <fx:String source="lorem.html" />
            </s:content>
        </s:TextArea>
    </s:Group>

</s:Application>

[ad]

[ad]
The following example shows how you can change the base/theme color on the Halo TextArea control

(with default Spark skin) in Flex 4 by setting the baseColor style. Setting the baseColor style sets both the TextArea control’s border color and horizontal/vertical scroll bar’s track/thumb colors.

<?xml version=”1.0″ encoding=”utf-8″?>
<!– http://blog.flexexamples.com/2009/06/10/changing-the-base-theme-color-on-the-halo-textarea-control-in-flex-4/ –>
<s:Application name=”TextArea_SparkSkin_baseColor_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″>
<mx:Form styleName=”plain”>
<mx:FormItem label=”baseColor:”>
<mx:ColorPicker id=”colorPicker” selectedColor=”red” />
</mx:FormItem>
</mx:Form>
</mx:ApplicationControlBar>

<mx:TextArea id=”textArea”
baseColor=”{colorPicker.selectedColor}”
left=”50″ right=”50″
top=”50″ bottom=”50″>
<mx:htmlText><fx:String source=”lorem.html” /></mx:htmlText>
</mx:TextArea>

</s:Application>

[ad]

[ad]

The next version of our IDE, Flex Builder, will be called Flash Builder 4.

There is already available a public beta for Flash Builder 4 and Flash Catalyst (check Adobe Labs for downloads).

Mihai Corlan (Platform Evangelist for Adobe):
“At the same time, we will not change the name of Flex Builder 3. This will stay as it is now. Furthermore, the names of the Flex framework, and the Flex SDK, remain unchanged. The same goes for Flash Professional, which remains unchanged.”
….
“This has happened to me more than once. When I ask people at conferences “Who’s a Flex developer?” many people are unsure how to answer. Why? Because some of you are using the Flex framework, to create Flex or AIR applications, and not our IDE (Flex Builder), some of you are using Flex Builder, but without using the Flex framework (you use ActionScript 3 to create Flash applications). Thus the uncertainty.

Of course, the correct answer is this: anyone who uses the Flex framework, is a Flex developer. It doesn’t matter what tools you use to create these applications. At the same time, any Flex application gets compiled into a SWF file, which is played by the Flash Player. The same happens with the applications written using ActionScript and not the Flex framework.

So looking at it from this perspective, I think it makes a lot of sense. Have the developer tool that is used for creating Flash/AIR applications with or without the Flex framework called Flash Builder 4.”

[ad]