Adobe AIR, External swf file when loaded from swf does not render properly - actionscript-3

I was trying to create an Adobe AIR application that loads an external swf file. However when the swf file is loaded from it does not render properly.
My Main.mxml file:
<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
width="100%" height="100%" paddingLeft="0" paddingBottom="0" paddingRight="0" paddingTop="0"
creationComplete="Created()">
<fx:Script><![CDATA[
private var moduleLoader:Loader;
private function Created():void {
moduleLoader = new Loader();
var urlre: URLRequest = new URLRequest("Shell1.swf"); //http://localhost:8080/aps/
moduleLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, loaded);
moduleLoader.load(urlre);
}
private function loaded(event:Event):void {
uic.addChild(moduleLoader);
}
]]></fx:Script>
<mx:UIComponent id="uic" width="100%" height="100%" ></mx:UIComponent>
</mx:Application>
My Shell1.mxml file:
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark"
width="100%" height="100%" creationComplete="Created(event)"
backgroundColor="0xf5deb3">
<fx:Script>
<![CDATA[
import mx.controls.Alert;
private function Created(event:Event):void {
}
]]>
</fx:Script>
<fx:Declarations>
<mx:RemoteObject id="RO" destination="AdministrationHandler"
fault="Alert.show(event.fault.faultString), 'Error'">
</mx:RemoteObject>
</fx:Declarations>
<s:Group id="Group" width="100%" height="100%">
<s:Label id="Introduction"
text="This is a demo application to show that the flex based application works. Click on the button below get generate a random number"
styleName="FilterLabel"/>
<s:VGroup id="VertGroup" paddingLeft="10" paddingRight="10" paddingTop="10" width="100%" height="100%">
<s:Label backgroundColor="green" width="1000" id="firstNumberLabel" text="Enter First Number"
styleName="FilterLabel"/>
<s:TextInput id="firstNumber" width="20%"/>
</s:VGroup>
</s:Group>
</s:Application>
When Shell1.swf is loaded directly in adobe air (by mentioning it application-descriptor.xml), it looks like:
But when I load it by using Main.mxml it looks like this:
So why is that the Components are not properly rendered when Shell1.swf is loaded from Main.swf ?

Related

Adobe Flash Builder Flex Video Player - Full screen on init

I have a created a flex application with a video player. The application goes full screen. Now I am trying to make the video go on full screen on inital launch.
I have tried to google how to do this, but came up with nothing. Here is my app code:
<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
creationComplete="myVid.play();"
applicationComplete="init()"
showStatusBar="false"
xmlns:media="org.osmf.media.*">
<s:VGroup>
<s:VideoDisplay id="myVid"
source="augusta.mp4"
autoPlay="true"
volume="0"
loop="true"
width="100%"
height="100%"
/>
</s:VGroup>
<fx:Script>
<![CDATA[
private function init():void
{
stage.displayState = StageDisplayState.FULL_SCREEN_INTERACTIVE;
}
]]>
</fx:Script>
</s:WindowedApplication>
Updating the container with the newly-resized dimensions would be a first step:
<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
creationComplete="onCreationComplete(event)"
applicationComplete="init()"
showStatusBar="false"
xmlns:media="org.osmf.media.*">
<s:VGroup id="vidContainer">
<s:VideoDisplay id="myVid"
source="augusta.mp4"
autoPlay="true"
volume="0"
loop="true"
width="100%"
height="100%"
/>
</s:VGroup>
<fx:Script>
<![CDATA[
private function onCreationComplete(e:FlexEvent):void
{
vidContainer.width = this.width;
vidContainer.height = this.height;
myVid.play();
}
private function init():void
{
stage.displayState = StageDisplayState.FULL_SCREEN_INTERACTIVE;
}
]]>
</fx:Script>
</s:WindowedApplication>
(note that I didn't actually test this; I don't have a video file handy for testing the VideoDisplay component)

Flex 4.6 : Make action for button in list

I'm beginner in Flex . my issue when to add button to list , i put the button in the itemrender but the action of navigator.pushView(views.Listde,ProblemsList.selectedItem);
make an error "Acess of undefined property navigator .
Code :
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark">
<fx:Script>
<![CDATA[
import views.ButList;
protected function button1_clickHandler(event:MouseEvent):void
{
// TODO Auto-generated method stub
navigator.pushView(views.Listde,ProblemsList.selectedItem);
}
]]>
</fx:Script>
<s:Group width="100%" height="100%" styleName="PCS.css">
<s:HGroup width="100%" height="100%" gap="2" verticalAlign="middle" horizontalAlign="center" paddingBottom="5" paddingLeft="5"
paddingRight="5" paddingTop="5">
<s:HGroup width="30%" height="100%" verticalAlign="middle" horizontalAlign="center">
<s:Label text="{data._AddedDate}" textAlign="left" verticalAlign="bottom" width="100%" height="100%"/>
</s:HGroup>
<s:VGroup width="50%" height="100%" verticalAlign="middle" horizontalAlign="right">
<s:BitmapImage source="images/{data.image}"/>
<s:TextArea editable="false" text="{data.description}"/>
<s:Label text="{data.price}"/>
<s:Button label="s" click="button1_clickHandler(event)"/>
</s:VGroup>
</s:HGroup>
</s:Group>
if any solution to resolve it by list or any component instead of list then i want button to navigate to view with the selected item and the change of the list to navigate to another view with the selected item also , then the change of list work success but the button action cannot defined with the navigator.
Thanks in advance for any help .
Create a custom event with data property and dispatch the event from item renderer or dispatch the list change event from the item renderer when clicking the button.
package myEvents
{
import flash.events.Event;
public class CustomEvent extends Event
{
public function CustomEvent(type:String,
data:Object=null) {
// Call the constructor of the superclass.
super(type);
// Set the new property.
this.data = data;
}
// Define static constant.
public static const MY_BUTTON_CLICKED:String = "myButtonClicked";
// Define a public variable to hold the state of the enable property.
public var data:Object;
// Override the inherited clone() method.
override public function clone():Event {
return new CustomEvent(type, data);
}
}
}
MyItemRenderer.mxml
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark">
<fx:Script>
<![CDATA[
import views.ButList;
protected function button1_clickHandler(event:MouseEvent):void
{
// dispatch a custom
(this.owner as List).dispatchEvent(new CustomEvent(CustomEvent.MY_BUTTON_CLICKED, data));
//navigator.pushView(views.Listde,ProblemsList.selectedItem);
}
]]>
</fx:Script>
<s:Group width="100%" height="100%" styleName="PCS.css">
<s:HGroup width="100%" height="100%" gap="2" verticalAlign="middle" horizontalAlign="center" paddingBottom="5" paddingLeft="5"
paddingRight="5" paddingTop="5">
<s:HGroup width="30%" height="100%" verticalAlign="middle" horizontalAlign="center">
<s:Label text="{data._AddedDate}" textAlign="left" verticalAlign="bottom" width="100%" height="100%"/>
</s:HGroup>
<s:VGroup width="50%" height="100%" verticalAlign="middle" horizontalAlign="right">
<s:BitmapImage source="images/{data.image}"/>
<s:TextArea editable="false" text="{data.description}"/>
<s:Label text="{data.price}"/>
<s:Button label="s" click="button1_clickHandler(event)"/>
</s:VGroup>
</s:HGroup>
</s:Group>
Your view class
<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
title="MY View">
<s:layout>
<s:VerticalLayout paddingTop="10"/>
</s:layout>
<fx:Script>
<![CDATA[
import spark.events.IndexChangeEvent;
private function onListCreationComplete_Handler():void
{
myList.addEventListener(CustomEvent.MY_BUTTON_CLICKED, onItemRendererButtonClicked);
}
protected function onItemRendererButtonClicked(event:CustomEvent):void {
var data:Object = event.data;
navigator.pushView(views.Listde,data);//myList.selectedItem
}
]]>
</fx:Script>
<s:Label text="Select an view"/>
<s:List id="myList"
width="100%" height="100%"
labelField="firstName" itemRenderer="MyItemRenderer"
change="myList_changeHandler(event)" creationComplete="onListCreationComplete_Handler()">
<s:ArrayCollection>
<fx:Object description="Fruits" image="assets/icons/1.png" _AddedDate="15/05/14" price="154"/>
<fx:Object description="New Item" image="assets/icons/2.png" _AddedDate="15/05/14" price="154"/>
<fx:Object description="Doll" image="assets/icons/3.png" _AddedDate="15/05/14" price="154"/>
</s:ArrayCollection>
</s:List>
</s:View>
I hope this might help u. There are tons of examples out there for list and item renderer for mobile.
Based on your ItemRenderer, you can simply listen to the IndexChangeEvent in your View. In this case, you don't need a separate button at all - the whole ItemRenderer can act as the button.
<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
title="MY View">
<s:layout>
<s:VerticalLayout paddingTop="10"/>
</s:layout>
<fx:Script>
<![CDATA[
import spark.events.IndexChangeEvent;
import views.ButList;
protected function myList_changeHandler(event:IndexChangeEvent):void {
navigator.pushView(views.Listde,myList.selectedItem);
}
]]>
</fx:Script>
<s:Label text="Select an view"/>
<s:List id="myList"
width="100%" height="100%"
labelField="firstName" itemRenderer="MyItemRenderer"
change="myList_changeHandler(event)">
<s:ArrayCollection>
<fx:Object description="Fruits" image="assets/icons/1.png" _AddedDate="15/05/14" price="154"/>
<fx:Object description="New Item" image="assets/icons/2.png" _AddedDate="15/05/14" price="154"/>
<fx:Object description="Doll" image="assets/icons/3.png" _AddedDate="15/05/14" price="154"/>
</s:ArrayCollection>
</s:List>
</s:View>

How to save screenshots with its exif data edited by user (in Flex 4.6 application)?

I need to develop a web application which captures snapshot of live stream video in Spark VideoPlayer and then ask for user input regarding EXIF tags then save the image along with its EXIF data to the local drive. An early response will be highly appreciated. Thanks
I have used the following code, but so far have not been succeed in editing the exif data into image header
<s:TitleWindow xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
width="400" height="410" title="Snapshot"
close="titlewindow1_closeHandler(event)"
windowMoveStart="basewidget1_widgetConfigLoadedHandler(event)"
>
<fx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.events.CloseEvent;
import mx.graphics.ImageSnapshot;
import mx.graphics.codec.*;
import mx.managers.PopUpManager;
[Bindable]
public var saveName:String ="";
protected function basewidget1_widgetConfigLoadedHandler(event:Event):void
{
}
protected function titlewindow1_closeHandler(event:CloseEvent):void
{
PopUpManager.removePopUp(this);
}
protected function SaveImg_clickHandler(event:MouseEvent):void
{
var d:Date = new Date();
var image:ImageSnapshot = ImageSnapshot.captureImage(pic1, 300, new PNGEncoder());
var file:FileReference = new FileReference();
file.save(image.data, saveName+" "+d.date+ "-"+d.month +"-"+d.fullYear + d.hours+ d.minutes + d.seconds);
}
]]>
</fx:Script>
<fx:Declarations>
</fx:Declarations>
<s:VGroup width="100%" horizontalAlign="center" verticalAlign="middle">
<s:Image id="pic1" x="41" y="34" width="100%" height="300"/>
<s:HGroup width="100%" height="30" horizontalAlign="center" verticalAlign="middle">
<s:TextInput id="Title" x="35" width="60" prompt="Title"/>
<mx:DateField id="DateTaken" x="78" width="137"/>
<s:TextInput id="info" width="80" prompt="Info"/>
<s:TextInput id="User Comments" width="80" prompt="User Comments" restrict="0-9,."/>
</s:HGroup>
</s:VGroup>
<s:HGroup x="3" y="348" width="100%" height="30" horizontalAlign="center" verticalAlign="middle">
<s:Button id="SaveImg0" label="Save" click="SaveImg_clickHandler(event)"/>
</s:HGroup>

How to access the swfcontrols from one mxml to other mxml

Hai i have SwfControl in page1.mxml,i need to hide and show that control...In page1 i hide that control and page 2 i need to show that control how to do?
Note page1.mxml is main page
page1.mxml
<?xml version="1.0" encoding="utf-8"?>
<local:WindowsControl xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
xmlns:local="*"
height="100%" width="100%"
backgroundColor="#FFFFFF"
backgroundAlpha="0">
<mx:HBox x="11" y="167" horizontalGap="0">
</mx:HBox>
<mx:SWFLoader id="loader" source="loading.swf" visible="false"/>
</local:WindowsControl>
i need to hide the SWFloader in page1.mxml and show the SWFloader in page2.mxml
page2
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="*" creationComplete="init()" width="164" height="150" cornerRadius="3">
<mx:Script>
<![CDATA[
import flash.media.Microphone;
import flash.media.Video;
public function init():void
{
loader.visible=true;
}
]]>
</mx:Script>
<mx:VBox height="100%" width="100%" horizontalAlign="center" backgroundColor="#000000" >
<VideoContainer id="vids" opaqueBackground="true" width="160" height="120" />
</mx:VBox>
</mx:Canvas>
The right way to do this is by dispatching events to parent container of page1 and page2.
The parent container will relay the message/action to the target page. Your event will contain info of what is supposed to happen.

How do I set the dataProvider for an <s:List> component to be an XML file?

I've got the latest Beta of Adobe Flash Builder 4.
I want to use a <s:List> component, and specify the dataProvider as being an XML file.
However, after loads of research (including looking at doc links off labs.adobe.com), I still can't figure out how to do it.
The XML file will look something like this:
<?xml version="1.0" encoding="ISO-8859-1"?>
<imageList>
<image location="path/to/file1.jpg" />
<image location="path/to/file2.jpg" />
<image location="path/to/file3.jpg" />
</imageList>
if you want to display images in a list, you should load the xml with a URLLoader , store it in a bindable variable and assign that as data provider to your list. the list should use a mx:itemrenderer where you can customize your view as you wish.
Actual code goes someting like this
<fx:Script>
<![CDATA[
import mx.collections.XMLListCollection;
import mx.collections.IList;
import mx.controls.Image;
private var loader : URLLoader = new URLLoader();
[Bindable]
private var xml : XMLList;
private function init() : void
{
this.loader.addEventListener(Event.COMPLETE, onComplete);
this.loader.load(new URLRequest("data.xml"));
}
private function onComplete(evt : Event) :void
{
this.loader.removeEventListener(Event.COMPLETE, onComplete);
this.xml = new XML(this.loader.data).image;
}
]]>
</fx:Script>
<mx:List id="list" width="200" height="500" dataProvider="{xml}">
<mx:itemRenderer>
<fx:Component>
<mx:Image width="200" height="200" source="{data.#location}" />
</fx:Component>
</mx:itemRenderer>
</mx:List>
If you want to load the XML file over the network you can do:
<?xml version="1.0" encoding="utf-8"?>
<s:Application 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:Declarations>
<mx:HTTPService id="srv" url="http://ws.jamesward.com/images.xml"/>
</fx:Declarations>
<s:applicationComplete>
srv.send();
</s:applicationComplete>
<s:List dataProvider="{srv.lastResult.images.image}" width="100%" height="100%">
<s:itemRenderer>
<fx:Component>
<mx:Image source="{data.source}"/>
</fx:Component>
</s:itemRenderer>
</s:List>
</s:Application>
You need to use the XMLListCollection class.
<s:List dataProvider="{new XMLListCollection(data.image)}" labelField="#location"/>
My original aim was to have an XML file external to the SWF that my client could maintain themselves, and thus they would have control over the images displayed.
The first answer I posted was not quite the solution I was after: using fx:XML means that the contents of the XML file is actually compiled into the SWF, and hence is not alterable after compilation.
So I've implemented James' solution.
The XML file looks like this:
<?xml version="1.0" encoding="ISO-8859-1"?>
<images>
<image source="path/to/image1.jpg" />
<image source="path/to/image2.jpg" />
<image source="path/to/image3.jpg" />
<image source="path/to/image4.jpg" />
</images>
MXML:
<?xml version="1.0" encoding="utf-8"?>
<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/halo"
>
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
protected function lstImages_creationCompleteHandler(event : FlexEvent) : void
{
dpHttpService.send();
}
]]>
</fx:Script>
<fx:Declarations>
<mx:HTTPService
id="dpHttpService"
url="images.xml"
/>
</fx:Declarations>
<s:List
id="lstImages"
dataProvider="{dpHttpService.lastResult.images.image}"
width="100%"
itemRenderer="path.to.render.ImageRenderer"
skinClass="path.to.skins.ListSkin"
>
<s:layout>
<s:HorizontalLayout gap="2" />
</s:layout>
</s:List>
</s:Group>
And in the image renderer, I refer to the data like this:
<mx:Image
id="imgRendered"
source="{data.source}"
/>
The really useful thing about this solution is that I can also put full http:// references to images that exist on another site if I want to (remembering crossdomain.xml, of course).
In fact, the images.xml file can exist on another server.
Well, I found one solution.
The MXML will look like this:
<fx:Declarations>
<fx:XML
id="dpXml"
source="path/to/images.xml"
/>
<mx:XMLListCollection
id="dpXmlListCollection"
source="{dpXml.image}"
/>
</fx:Declarations>
<s:List
id="lstImages"
dataProvider="{dpXmlListCollection}"
itemRenderer="path.to.render.ImageRenderer"
skinClass="path.to.skins.ListSkin"
>
<s:layout>
<s:HorizontalLayout gap="2" />
</s:layout>
</s:List>
And images.xml like this:
<?xml version="1.0" encoding="ISO-8859-1"?>
<images>
<image>
<location>path/to/image1.jpg</location>
</image>
<image>
<location>path/to/image2.jpg</location>
</image>
<image>
<location>path/to/image3.jpg</location>
</image>
</images>
Many thanks for all your responses!
Matt