Development: Flash media builder interface design / flash catalyst



  • I never had much with Flash, now flash media builder is nice code editor but the editing of the visual windows is kinda terrible. If you move things to far or out of order things break up. Tried to alter the SVC latest layout a bit for testing and fun but it broke again.

    So now I look into flash catalyst to be able to edit the user interface with that hoping it delivers a better solution.

    What do you guys and the creators of SVC RVC use for editing the visual layouts of the screens? Flash builder or something else ( Flash Catalyst maybe )?



  • Flash Builder 4.5 (maybe 4.0) will be the one to use. Try selecting the component and moving it with keyboard buttons.
    Another technique is to place buttons (and any other element) outside the container and move them around, anywhere. Here is an example:

    default SVC-SR layout (MXML script):

    
     <s:group xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:ns="components_single.*" xmlns:svc="components.SingleRandom.*" preinitialize="preinit()" verticalcenter="0" horizontalcenter="0"><fx:declarations></fx:declarations> 
    
    	 <fx:script source="SingleRandomController.as"><s:bordercontainer stylename="svcContainer" verticalcenter="0" horizontalcenter="0"><s:vgroup width="100%" gap="0"><s:bordercontainer stylename="videoContainer"><s:hgroup horizontalcenter="0" verticalcenter="0" paddingleft="4" paddingright="4" paddingtop="4" paddingbottom="4"><svc:localcamera id="local_camera"></svc:localcamera></s:hgroup></s:bordercontainer> 
    
    			 <s:bordercontainer stylename="statusContainer" width="100%" height="25"><s:hgroup paddingleft="6"><ns:automatedlocalconnection id="local_connection"><mx:label text="►"><mx:label id="statusLabel" link="Common.linkHandler(event);" selectable="true"></mx:label></mx:label></ns:automatedlocalconnection></s:hgroup></s:bordercontainer> 
    
    			 <s:bordercontainer stylename="chatContainer" width="100%"><s:vgroup width="100%" height="100%" paddingleft="4" paddingright="4" paddingtop="4" paddingbottom="4"><mx:textarea id="chatOutput" valuecommit="chatOutput.verticalScrollPosition = chatOutput.maxVerticalScrollPosition" link="Common.linkHandler(event);" verticalscrollpolicy="auto" editable="false" stylename="chatOutput" width="100%" height="100%"></mx:textarea></s:vgroup></s:bordercontainer></s:vgroup></s:bordercontainer> 
    
    	 <mx:image id="loader" stylename="loader" source="@Embed(source='style/common/media/animations/loading.swf')" width="80" height="80"></mx:image></fx:script></s:group> 
    
    ```- take a look at the last element (mx:Image id="loader") it is loaded at the end, outside the container
    
    altered layout:
    

    <s:group xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:ns="components_single." xmlns:svc="components.SingleRandom." preinitialize="preinit()" verticalcenter="0" horizontalcenter="0">fx:declarations</fx:declarations>

     <fx:script source="SingleRandomController.as"><s:bordercontainer stylename="svcContainer" verticalcenter="0" horizontalcenter="0"><s:vgroup width="100%" gap="0"><s:bordercontainer stylename="videoContainer"><s:hgroup horizontalcenter="0" verticalcenter="0" paddingleft="4" paddingright="4" paddingtop="4" paddingbottom="4"><svc:localcamera id="local_camera"></svc:localcamera></s:hgroup></s:bordercontainer> 
    
    		 <s:bordercontainer stylename="statusContainer" width="100%" height="25"><s:hgroup paddingleft="6"><ns:automatedlocalconnection id="local_connection"><mx:label text="►"><mx:label id="statusLabel" link="Common.linkHandler(event);" selectable="true"></mx:label></mx:label></ns:automatedlocalconnection></s:hgroup></s:bordercontainer> 
    
    		 <s:bordercontainer stylename="chatContainer" width="100%"><s:vgroup width="100%" height="100%" paddingleft="4" paddingright="4" paddingtop="4" paddingbottom="4"><mx:textarea id="chatOutput" valuecommit="chatOutput.verticalScrollPosition = chatOutput.maxVerticalScrollPosition" link="Common.linkHandler(event);" verticalscrollpolicy="auto" editable="false" stylename="chatOutput" width="100%" height="100%"></mx:textarea></s:vgroup></s:bordercontainer></s:vgroup></s:bordercontainer> 
    
     <mx:image id="loader" stylename="loader" source="@Embed(source='style/common/media/animations/loading.swf')" width="80" height="80"></mx:image></fx:script></s:group> 
    
    - to move it, use the keyboard buttons otherwise you may place it back inside a container

Log in to reply
 

© 2108 H7 | Powered by NodeBB

Looks like your connection to H7 was lost, please wait while we try to reconnect.