Online Timesheet Software – TiMeister – Weblog

Twitter -  My favorite AIR  Applications for Twitter

• SpreadTweet
• Seesmic Desktop
• Sideline
• DestroyTwitter
• AlertThingy 2
• Twibble
• SocialAddict
• Tweetdeck
• Spaz
• Twhirl

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>

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.

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

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>

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>

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>