Flex Examples » FlashVars http://blog.flexexamples.com Just a bunch of Adobe Flex Examples Wed, 26 Jan 2011 18:09:51 +0000 en hourly 1 Grabbing FlashVars from the embedding HTML template in Flex 4 (SWFObject Edition) http://blog.flexexamples.com/2009/03/04/grabbing-flashvars-from-the-embedding-html-template-in-flex-gumbo-swfobject-edition/ http://blog.flexexamples.com/2009/03/04/grabbing-flashvars-from-the-embedding-html-template-in-flex-gumbo-swfobject-edition/#comments Wed, 04 Mar 2009 08:05:49 +0000 Peter deHaan http://blog.flexexamples.com/2009/03/04/grabbing-flashvars-from-the-embedding-html-template-in-flex-gumbo-swfobject-edition/ In a previous entry, “Grabbing FlashVars from the embedding HTML template”, we saw how you could access FlashVars in your Flex application by passing a name/value pair string to the AC_FL_RunContent() method and <object>/<embed> tags from your HTML template.

The following example shows how you can pass FlashVars from your HTML template to your [...]]]> In a previous entry, “Grabbing FlashVars from the embedding HTML template”, we saw how you could access FlashVars in your Flex application by passing a name/value pair string to the AC_FL_RunContent() method and <object>/<embed> tags from your HTML template.

The following example shows how you can pass FlashVars from your HTML template to your Flex applications using the Flex 4 SDK (which uses SWFObject now, by the way).

Full code after the jump.

To use the following code, you must have Flash Player 10 and a Flex 4 SDK installed in your Flex Builder 3. For more information on downloading and installing the Flex 4 SDK into Flex Builder 3, see “Using the beta Flex 4 SDK in Flex Builder 3″.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/03/04/grabbing-flashvars-from-the-embedding-html-template-in-flex-gumbo-swfobject-edition/ -->
<FxApplication name="SWFObject_flashvars_test"
        xmlns="http://ns.adobe.com/mxml/2009"
        backgroundColor="white"
        applicationComplete="init();">
    <layout>
        <BasicLayout />
    </layout>

    <Script>
        import mx.utils.ObjectUtil;

        private function init():void {
            textArea.text = ObjectUtil.toString(this.parameters);
        }
    </Script>

    <FxTextArea id="textArea"
            selectable="true"
            left="20"
            right="20"
            top="20"
            bottom="20" />

</FxApplication>

And my [slightly modified] HTML template code is as follows:

View HTML template

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0014)about:internet -->
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <style type="text/css" media="screen">
            html, body    { height:100%; }
            body { margin:0; padding:0; overflow:hidden; text-align:center; }
            #flashContent { display:none; }
        </style>

        <script type="text/javascript" src="swfobject.js"></script>
        <script type="text/javascript">
            var swfVersionStr = "10.0.12";
            var xiSwfUrlStr = "playerProductInstall.swf";
            var flashvars = {};
            flashvars.userAgent = navigator.userAgent;
            flashvars.userLanguage = navigator.userLanguage;
            flashvars.onLine = navigator.onLine;
            flashvars.name = "peter";
            flashvars.team = "Flex SDK";
            flashvars.twitter = "http://twitter.com/pdehaan";
            var params = {};
            params.quality = "high";
            params.bgcolor = "#ffffff";
            params.allowscriptaccess = "sameDomain";
            var attributes = {};
            attributes.id = "SWFObject_params_test";
            attributes.name = "SWFObject_params_test";
            attributes.align = "middle";
            swfobject.embedSWF(
                "SWFObject_params_test.swf", "flashContent",
                "100%", "100%",
                swfVersionStr, xiSwfUrlStr,
                flashvars, params, attributes);
            swfobject.createCSS("#flashContent", "display:block;text-align:left;");
        </script>
    </head>
    <body>
        <div id="flashContent">
            <p>
                To view this page ensure that Adobe Flash Player version
                10.0.12 or greater is installed.
            </p>
            <a href="http://www.adobe.com/go/getflashplayer">Get Adobe Flash Player</a>
        </div>
   </body>
</html>

And the generated output from the code is:

(Object)#0
  name = "peter"
  onLine = "true"
  team = "Flex SDK"
  twitter = "http://twitter.com/pdehaan"
  userAgent = "Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; GTB5; .NET CLR 2.0.50727; .NET CLR 1.1.4322; .NET CLR 3.0.04506.30; .NET CLR 3.0.04506.648)"
  userLanguage = "en-us"

This entry is based on a beta version of the Flex Gumbo SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex Gumbo SDK.

 
]]> http://blog.flexexamples.com/2009/03/04/grabbing-flashvars-from-the-embedding-html-template-in-flex-gumbo-swfobject-edition/feed/ 7 Using HTTPService tag to send/receive variables to a server-side script http://blog.flexexamples.com/2007/08/16/using-httpservice-tag-to-sendreceive-variables-to-a-server-side-script/ http://blog.flexexamples.com/2007/08/16/using-httpservice-tag-to-sendreceive-variables-to-a-server-side-script/#comments Thu, 16 Aug 2007 21:28:20 +0000 Peter deHaan http://blog.flexexamples.com/2007/08/16/using-httpservice-tag-to-sendreceive-variables-to-a-server-side-script/ The following example demonstrates a very simple usage of sending parameters from Flex to a server-side script (written in ColdFusion) and then displaying the server response in our Flex application. The server-side script is a simple echo/”Hello world” type script, but it accepts URL or FORM variables, so you can send using the GET or [...]]]> The following example demonstrates a very simple usage of sending parameters from Flex to a server-side script (written in ColdFusion) and then displaying the server response in our Flex application. The server-side script is a simple echo/”Hello world” type script, but it accepts URL or FORM variables, so you can send using the GET or POST HTTP-method.

It’s a pretty basic/crude example, but maybe it helps somebody out there.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/08/16/using-httpservice-tag-to-sendreceive-variables-to-a-server-side-script/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        creationComplete="httpService.send(myObj);">

    <!-- Parameters to send to remote script. -->
    <mx:Object id="myObj" name="peterd" />

    <mx:HTTPService id="httpService"
            url="http://www.flash-mx.com/mm/greeting.cfm"
            method="POST"
            resultFormat="flashvars" />

    <mx:Label text="{httpService.lastResult.welcomeMessage}" />

</mx:Application>

View source is enabled in the following example.

By popular request, here is the ColdFusion source code as well.

http://www.flash-mx.com/mm/greeting.cfm

<cfsilent>
<cfsetting enablecfoutputonly="Yes">
<cfif IsDefined("URL.name")><cfset Form.Name = URL.name /></cfif>
<cfif NOT IsDefined("Form.name") OR Len(Trim(Form.Name)) EQ 0>
    <cfset Form.Name = "[Mysterious Stranger]" />
</cfif>
</cfsilent><cfcontent reset="true" /><cfoutput>welcomeMessage=#UrlEncodedFormat("Welcome, "&Form.name)#</cfoutput>
<cfsetting enablecfoutputonly="No">
 
]]> http://blog.flexexamples.com/2007/08/16/using-httpservice-tag-to-sendreceive-variables-to-a-server-side-script/feed/ 0 Dynamically creating ActionScript cue points from FlashVars loaded using the HTTPService tag http://blog.flexexamples.com/2007/08/12/dynamically-creating-actionscript-cue-points-from-flashvars-loaded-using-the-httpservice-tag/ http://blog.flexexamples.com/2007/08/12/dynamically-creating-actionscript-cue-points-from-flashvars-loaded-using-the-httpservice-tag/#comments Sun, 12 Aug 2007 17:28:00 +0000 Peter deHaan http://blog.flexexamples.com/2007/08/12/dynamically-creating-actionscript-cue-points-from-flashvars-loaded-using-the-httpservice-tag/ In a previous post, “Dynamically creating ActionScript cue points from FlashVars received from the HTML container”, we looked at how to create ActionScript cue points based on variables passed in to our Flex application from the HTML template’s “FlashVars” parameter. In this post we look at a similar approach, although using the <mx:HTTPService /> [...]]]> In a previous post, “Dynamically creating ActionScript cue points from FlashVars received from the HTML container”, we looked at how to create ActionScript cue points based on variables passed in to our Flex application from the HTML template’s “FlashVars” parameter. In this post we look at a similar approach, although using the <mx:HTTPService /> tag to load cue points from an external file of name/value pairs. This example could easily be extended further to pass a variable to a server-side script which would grab cue point information from a database and pass it back into Flex either as a string of name/value pairs, or as an XML document.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/08/12/dynamically-creating-actionscript-cue-points-from-flashvars-loaded-using-the-httpservice-tag/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        creationComplete="httpService.send()">

    <mx:HTTPService id="httpService"
            url="cuepoints.txt"
            result="httpService_result(event)"
            resultFormat="flashvars" />

    <mx:Script>
        <![CDATA[
            import mx.rpc.events.ResultEvent;
            import mx.events.VideoEvent;
            import mx.collections.ArrayCollection;
            import mx.events.CuePointEvent;
            import mx.managers.SystemManager;
            import mx.utils.URLUtil;
            import mx.utils.ObjectUtil;

            [Bindable]
            private var arrColl:ArrayCollection = new ArrayCollection();

            private function httpService_result(evt:ResultEvent):void {
                var flashVars:Object = httpService.lastResult;

                var item:String;
                for (item in flashVars) {
                    videoDisplay.cuePointManager.addCuePoint({name:item, time:flashVars[item]});
                }
            }

            private function videoDisplay_cuePoint(evt:CuePointEvent):void {
                var cpDate:Date = new Date(evt.cuePointTime * 1000);
                arrColl.addItem({name:evt.cuePointName, time:dateFormatter.format(cpDate)});
            }

            private function videoDisplay_playheadUpdate(evt:VideoEvent):void {
                var pDate:Date = new Date(evt.playheadTime * 1000 || 10);
                var tDate:Date = new Date(evt.currentTarget.totalTime * 1000);
                progressBar.setProgress(evt.playheadTime, evt.currentTarget.totalTime);
                progressBar.label = dateFormatter.format(pDate) + " / " + dateFormatter.format(tDate);
            }

            private function videoDisplay_progress(evt:ProgressEvent):void {
                progressBar.conversion = 1024; /* Convert bytes to kilobytes. */
                progressBar.label = "%1 of %2 KB (%3%%)";
                progressBar.setProgress(evt.bytesLoaded, evt.bytesTotal);
            }

            private function videoDisplay_click(evt:MouseEvent):void {
                videoDisplay.play();
            }
        ]]>
    </mx:Script>

    <mx:DateFormatter id="dateFormatter" formatString="NN:SS" />

    <mx:HBox>
        <mx:Canvas>
            <mx:VideoDisplay id="videoDisplay"
                    autoPlay="false"
                    autoRewind="false"
                    source="http://www.helpexamples.com/flash/video/water.flv"
                    cuePointManagerClass="mx.controls.videoClasses.CuePointManager"
                    cuePoint="videoDisplay_cuePoint(event)"
                    playheadUpdate="videoDisplay_playheadUpdate(event)"
                    progress="videoDisplay_progress(event)"
                    click="videoDisplay_click(event)"
                    rewind="arrColl=new ArrayCollection()"
                    rollOver="progressBar.visible = true"
                    rollOut="progressBar.visible = false" />

            <mx:ProgressBar id="progressBar"
                    mouseChildren="false"
                    labelPlacement="center"
                    visible="false"
                    mouseEnabled="false"
                    mode="manual" left="5" right="5" bottom="5" />
        </mx:Canvas>

        <mx:DataGrid id="dataGrid"
                height="100%"
                dataProvider="{arrColl}">
            <mx:columns>
                <mx:DataGridColumn dataField="name"
                        headerText="CuePoint Name:" />
                <mx:DataGridColumn dataField="time"
                        headerText="CuePoint Time:" />
            </mx:columns>
        </mx:DataGrid>
    </mx:HBox>

</mx:Application>

cuepoints.txt

one=1&two=2&three=3

For each name/value pair in the cuepoints.txt file, the name is mapped to the cue point name, and the value is the number of seconds to create the ActionScript cue point at.

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2007/08/12/dynamically-creating-actionscript-cue-points-from-flashvars-loaded-using-the-httpservice-tag/feed/ 0 Dynamically creating ActionScript cue points from FlashVars received from the HTML container http://blog.flexexamples.com/2007/08/09/dynamically-creating-actionscript-cue-points-from-flashvars-received-from-the-html-container/ http://blog.flexexamples.com/2007/08/09/dynamically-creating-actionscript-cue-points-from-flashvars-received-from-the-html-container/#comments Fri, 10 Aug 2007 04:45:57 +0000 Peter deHaan http://blog.flexexamples.com/2007/08/09/dynamically-creating-actionscript-cue-points-from-flashvars-received-from-the-html-container/ In a previous post, “Creating ActionScript cue points with the VideoDisplay controlEdit”, reader Florian asks how you can set cue points dynamically from FlashVars.

Well, here’s one method of passing a single name/value pair from the HTML template into our Flex application and having Flex parse the string and dynamically add the ActionScript cue [...]]]> In a previous post, “Creating ActionScript cue points with the VideoDisplay controlEdit”, reader Florian asks how you can set cue points dynamically from FlashVars.

Well, here’s one method of passing a single name/value pair from the HTML template into our Flex application and having Flex parse the string and dynamically add the ActionScript cue points to the VideoDisplay control.

Hope that helps.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/08/09/dynamically-creating-actionscript-cue-points-from-flashvars-received-from-the-html-container/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white" applicationComplete="init()">

    <mx:Script>
        <![CDATA[
            import mx.events.VideoEvent;
            import mx.collections.ArrayCollection;
            import mx.events.CuePointEvent;
            import mx.managers.SystemManager;
            import mx.utils.URLUtil;
            import mx.utils.ObjectUtil;

            [Bindable]
            private var arrColl:ArrayCollection;

            private function init():void {
                arrColl = new ArrayCollection();

                var cpObj:Object;

                var item:String;
                var itemArr:Array;
                var params:Object = Application.application.parameters;
                if (params.hasOwnProperty("cuepoints")) {
                    cpObj = URLUtil.stringToObject(params.cuepoints);
                    for (item in cpObj) {
                        itemArr = item.split(":");
                        videoDisplay.cuePointManager.addCuePoint({name:itemArr[0], time:Number(itemArr[1])});
                    }
                }
            }

            private function videoDisplay_cuePoint(evt:CuePointEvent):void {
                var cpDate:Date = new Date(evt.cuePointTime * 1000);
                arrColl.addItem({name:evt.cuePointName, time:dateFormatter.format(cpDate)});
            }

            private function videoDisplay_playheadUpdate(evt:VideoEvent):void {
                var pDate:Date = new Date(evt.playheadTime * 1000 || 10);
                var tDate:Date = new Date(evt.currentTarget.totalTime * 1000);
                progressBar.setProgress(evt.playheadTime, evt.currentTarget.totalTime);
                progressBar.label = dateFormatter.format(pDate) + " / " + dateFormatter.format(tDate);
            }

            private function videoDisplay_progress(evt:ProgressEvent):void {
                progressBar.conversion = 1024; /* Convert bytes to kilobytes. */
                progressBar.label = "%1 of %2 KB (%3%%)";
                progressBar.setProgress(evt.bytesLoaded, evt.bytesTotal);
            }

            private function videoDisplay_click(evt:MouseEvent):void {
                videoDisplay.play();
            }
        ]]>
    </mx:Script>

    <mx:DateFormatter id="dateFormatter" formatString="NN:SS" />

    <mx:HBox>
        <mx:Canvas>
            <mx:VideoDisplay id="videoDisplay"
                    autoPlay="false"
                    autoRewind="false"
                    source="http://www.helpexamples.com/flash/video/water.flv"
                    cuePointManagerClass="mx.controls.videoClasses.CuePointManager"
                    cuePoint="videoDisplay_cuePoint(event)"
                    playheadUpdate="videoDisplay_playheadUpdate(event)"
                    progress="videoDisplay_progress(event)"
                    click="videoDisplay_click(event)"
                    rewind="arrColl=new ArrayCollection()"
                    rollOver="progressBar.visible = true"
                    rollOut="progressBar.visible = false" />

            <mx:ProgressBar id="progressBar" mouseChildren="false"
                    labelPlacement="center"
                    visible="false"
                    mouseEnabled="false"
                    mode="manual" left="5" right="5" bottom="5" />
        </mx:Canvas>

        <mx:DataGrid id="dataGrid"
                height="100%"
                dataProvider="{arrColl}">
            <mx:columns>
                <mx:DataGridColumn dataField="name"
                        headerText="CuePoint Name:" />
                <mx:DataGridColumn dataField="time"
                        headerText="CuePoint Time:" />
            </mx:columns>
        </mx:DataGrid>
    </mx:HBox>

</mx:Application>

And in my HTML I add the following FlashVars string to my AC_FL_RunContent function:

AC_FL_RunContent(
    "src", "main",
    "width", "100%",
    "height", "100%",
    "align", "middle",
    "id", "main",
    "quality", "high",
    "bgcolor", "#ffffff",
    "name", "main",
    "allowScriptAccess","sameDomain",
    "type", "application/x-shockwave-flash",
    "pluginspage", "http://www.adobe.com/go/getflashplayer",
    "FlashVars", "cuepoints=one:1;two:2;three:3"
);

We’re passing a single name/value pair where the name is “cuepoints” and the value is a set of three cue points with the syntax “<cuePointName />:<cuePointTime /> and each cue point is separated by a “;”. So, our first cue point is given a name of “one” at 1.0 seconds, the second cue point has a name of “two” at 2.0 seconds, and the final cue point is “three” at 3.0 seconds.

In our Flex application these cue points are separated out using the URLUtil.stringToObject() method, and the Array.split() method.

View source is enabled in the following example.

Happy Flexing!

For another example of creating cue points dynamically see “Dynamically creating ActionScript cue points from FlashVars loaded using the HTTPService tag” which uses an HTTPService tag to load a text file of name/value pairs which get converted to new ActionScript cue points.

 
]]> http://blog.flexexamples.com/2007/08/09/dynamically-creating-actionscript-cue-points-from-flashvars-received-from-the-html-container/feed/ 0 Grabbing FlashVars from the embedding HTML template http://blog.flexexamples.com/2007/08/07/grabbing-flashvars-from-the-embedding-html-template/ http://blog.flexexamples.com/2007/08/07/grabbing-flashvars-from-the-embedding-html-template/#comments Wed, 08 Aug 2007 05:34:20 +0000 Peter deHaan http://blog.flexexamples.com/2007/08/07/grabbing-flashvars-from-the-embedding-html-template/ What if you built a nice, custom FLV player in Flex and wanted to embed the player in an HTML page and have it star playing a specific video? How could you easily do that without tweaking the MXML each time with the path to the FLV or calling a server-side script to somehow determine [...]]]> What if you built a nice, custom FLV player in Flex and wanted to embed the player in an HTML page and have it star playing a specific video? How could you easily do that without tweaking the MXML each time with the path to the FLV or calling a server-side script to somehow determine the video you wanted to play? Well, one of the easiest solutions is to tweak the generated embed code and pass in any custom variables you wanted using “FlashVars”.

No idea what I’m talking about? Well, check out the following Flex 2.0.1 docs for more of a background: “Using flashVars” and “Using the Application.application.parameters object”.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white" creationComplete="init()">

    <mx:Script>
        <![CDATA[
            private function init():void {
                // The FlashVars
                var obj:Object = Application.application.parameters;
                var item:String;

                arrColl = new ArrayCollection();

                /* Populate the ArrayCollection object with the FlashVars. */
                for (item in obj) {
                    arrColl.addItem({key:item, value:obj[item]});
                }

                dataGrid.dataProvider = arrColl;
            }
        ]]>
    </mx:Script>

    <mx:ArrayCollection id="arrColl" />

    <mx:DataGrid id="dataGrid" />

</mx:Application>

Next, open the generated *.html template in the /bin/ directory and add the “FlashVars” key and a string of name/value pairs, as shown in the following snippet:

AC_FL_RunContent(
    "src", "main",
    "width", "100%",
    "height", "100%",
    "align", "middle",
    "id", "main",
    "quality", "high",
    "bgcolor", "#869ca7",
    "name", "main",
    "allowScriptAccess","sameDomain",
    "type", "application/x-shockwave-flash",
    "pluginspage", "http://www.adobe.com/go/getflashplayer"
    "FlashVars", "name=peter&site=flexexamples.com"
);

And then you need to change the <object /> and <embed /> tags in the <noscript /> block, as seen in the following snippet:

<noscript>
      <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
            id="${application}" width="${width}" height="${height}"
            codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab">
            <param name="movie" value="${swf}.swf" />
            <param name="quality" value="high" />
            <param name="bgcolor" value="${bgcolor}" />
            <param name="allowScriptAccess" value="sameDomain" />
            <param name="flashVars" value="url=woo" />
            <embed src="${swf}.swf" quality="high" bgcolor="${bgcolor}"
                width="${width}" height="${height}" name="${application}" align="middle"
                play="true"
                loop="false"
                quality="high"
                allowScriptAccess="sameDomain"
                flashVars="url=woo"
                type="application/x-shockwave-flash"
                pluginspage="http://www.adobe.com/go/getflashplayer">
            </embed>
    </object>
</noscript>

Save the HTML document and open it in a browser and you should see your name/value pairs parsed and displayed nicely in your DataGrid control. Of course, the Flex code used a loop and ArrayCollection object to nicely display the data in the DataGrid control. You could just as easily referenced the variables like Application.application.parameters.name and Application.application.parameters.site.

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2007/08/07/grabbing-flashvars-from-the-embedding-html-template/feed/ 16