dcsimg
A Flash Developer Resource Site

Results 1 to 3 of 3

Thread: Example: Simple Dynamic Image

  1. #1
    caithness massiv
    Join Date
    May 2000
    Location
    denver
    Posts
    1,672

    Example: Simple Dynamic Image

    I've decided to post a quick example of how to create a dynamic image component. Hopefully you find it useful All comments are appreciated!

    As FLEX developers, we use dynamic images all over the place.
    Most of the time we like to drive the image source from a CSS document. When making components, following a standard design pattern is usually best. Once you understand the pattern, it's easy to translate it accross situations.

    Below is a simple example of how to design a component based on a real-world scenario. Let's say your application needs to show a red or green light depending on the status of the net connection. Once you have determined the net status, it's pretty easy to design a dynamic image component around your need.

    This example shows how to approach the netStatus situation dynamically through binding code and also statically through mxml alone.... (note the use of getStyle):

    CSS:
    Code:
    .netStatusIndicator
    {
      online: Embed(source='./skins/skins.swf',symbol='grnLight');
      offline: Embed(source='./skins/skins.swf',symbol='redLight');
    }
    Dynamic Implementation:
    Code:
    model.currentNetworkStatus = "online";
    
    <ui:NetStatusIndicator id="netStatusIndicator" 
    	styleName="netStatusIndicator" 
    	status="{model.currentNetworkStatus}" 
    />
    Static Implementation:
    Code:
    <ui:NetStatusIndicator id="netStatusIndicator" 
    	styleName="netStatusIndicator" 
    	netStatus="online" 
    />

    MXML Component:
    Code:
    <?xml version="1.0" encoding="utf-8"?>
    <mx:Image xmlns:mx="http://www.adobe.com/2006/mxml"
    	creationComplete="showStatus()"
    >
    	<mx:Metadata>
    		[Style(
    			name="netStatus", 
    			type="String", 
    			enumeration="online,offline", 
    			inherit="no")]
    	</mx:Metadata>
    	
    	<mx:Script>
    		<![CDATA[
    		
    			[Bindable] private var _status:String;
    			public function get status( ):String{return _status;}
    			public function set status( aStatus:String ):void
    			{
    				var lStatus:String = getStyle( 'netStatus' );
    				setStyle( 'netStatus', aStatus );
    				showStatus( );
    			}
    		
    			private function showStatus( ):void
    			{
    				var lStatus:String = getStyle( 'netStatus' );
    				if( lStatus )
    				{
    					source = getStyle( getStyle( 'netStatus' ) );
    				}
    			}		
    		]]>
    	</mx:Script>
    </mx:Image>

  2. #2
    up to my .as in code Chris_Seahorn's Avatar
    Join Date
    Dec 2004
    Posts
    4,389
    Nice job agent_vivid !! Thanks for sharing

    Also..we have asked Flashkit to add Apollo and Flex as file submission categories (which they have done) but right now there is an issue uploading a ZIP file that has no .fla included (which an Apollo or Flex app would most likely not have but a Flash one would) but I will post back when it's squared away so maybe you would consider submitting this. I only mention that because it will be hard for us to sticky lots of examples and as normal threads they will get pushed out of visible site and maybe passed by whereas in the submission area they would be more accessable and would get you full credit (and a link back) for the effort.

    I'm not sure if there will be tutorial sections for both because right now Flashkit is waiting to see if Apollo and Flex prove viable as file submissions (basically...will people submit...which your file would help in that regard ).

    I really appreciate you taking the time to post this. Once again....great job!

  3. #3
    caithness massiv
    Join Date
    May 2000
    Location
    denver
    Posts
    1,672
    yeah i'll try to post an example .zip later I've got to rip it out of the existing app and make it all pretty!

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  




Click Here to Expand Forum to Full Width

HTML5 Development Center