I'm trying to make VideoDisplay playing media with FlashDevelop. Here's the source of my application:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
import mx.events.VideoEvent;
private function pause():void
{
if (moo_player.state == VideoEvent.PLAYING)
moo_player.pause(); else
if (moo_player.state == VideoEvent.PAUSED)
moo_player.play();
}
]]>
</mx:Script>
<mx:Panel>
<mx:VideoDisplay
source="bar.flv"
width="640"
height="480"
maintainAspectRatio="true"
id="moo_player"
autoPlay="true"
doubleClick="pause();"
doubleClickEnabled="true"
/>
</mx:Panel>
</mx:Application>
The problem is when i build application and run it (unfortunately, got no idea how to run it without KMPlayer or Mozilla - Flash Player is a plugin afaik) i got no video. The movie file is in the same directory as application's "Application.flv" one. But if i reload application (within player or browser) a few times, video starts.
So, here are my questions:
what's wrong with VideoDisplay
component and how to fix this
'non-playing'?
what's the better way
to execute application than running
it within movie player or browser?
P.S.: please, do not get mad of my knowledge lacks - i began to use Flex nearly 30 minutes ago.
You should be using Spark components, not MX components. Try this:
<?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/mx">
<s:VideoPlayer source="bar.flv" width="640" height="480" />
</s:Application>
There's some issues with video display internally in the component. One of the only flex components that's kind of poorly done in some ways. Please don't let it discourage you from exploring Flex.
Create a custom component that extends it, create a file named CustomVideoDisplay.as with this code:
package
{
import mx.controls.VideoDisplay;
public class CustomVideoDisplay extends VideoDisplay
{
[Bindable]
override public function get source():String
{
return super.source;
}
override public function set source(value:String):void
{
super.source = value;
play();
}
public function CustomVideoDisplay()
{
super();
}
}
}
Then add this into your root <application> tag :
xmlns:local="*"
And for your video component, refer to it as:
<local:CustomVideoDisplay
source="bar.flv"
width="640"
height="480"
maintainAspectRatio="true"
id="moo_player"
autoPlay="true"
doubleClick="pause();"
doubleClickEnabled="true"
/>
Let me know if this doesn't do the trick for you!
Well, i thought: my player will be ran at client-side of web project, and in FireFox that code runs successfully each of seven runs. I think this would be enough for testing and implementation.
Thanks everyone for the trouble-taking!
Related
I stuck. I've been trying to get working simple app with Adobe Flash Builder but with no luck.
It's pretty simple and I even didn't get visual elements such as button to be displayed on any kind of simulator/devices.
I followed by some video tutorial and seems like configured everything right, no errors appeared but the problem is that when I launch app on device/simulator/air iOS/Android even real iOS device - it remains blank.... empty. Just white screen
<?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" applicationDPI="160"
applicationComplete="init(event)">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:Button id="button1" x="100" y="58" label="300ms"/>
<s:Button id="button2" x="200" y="58" label="500ms"/>
<s:Button id="button3" x="300" y="58" label="1000ms"/>
<fx:Script>
<![CDATA[
import com.adobe.nativeExtensions.Vibration;
private var vibrate:Vibration
private function init(evt:Event):void
{
trace("We are here");
if(Vibration.isSupported)
{
setupButtons();
} else {
trace("Vibration is not supported");
}
}
private function setupButtons():void
{
button1.addEventListener(MouseEvent.CLICK, handleButtons);
button2.addEventListener(MouseEvent.CLICK, handleButtons);
button3.addEventListener(MouseEvent.CLICK, handleButtons);
vibrate = new Vibration();
}
private function handleButtons(event:MouseEvent):void
{
switch (event.currentTarget.id)
{
case "button1":
vibrate.vibrate(300);
break;
case "button2":
vibrate.vibrate(500);
break;
case "button3":
vibrate.vibrate(1000);
break;
}
}
]]>
</fx:Script>
</s:Application>
At least 3 buttons should appear. No useful information while debugging in console, no stopping on breakpoints in -init() method.
I'm pretty frustrated about my first meeting flash builder and developing for mobile platforms.
Flash Builder 4.7
thanks in advance
I think is a crash in the initialize code, try removing all the lines , then when works add one by one the script lines back until you find the issue.
I have this App.mxml:
<?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/mx">
<s:Button id="bt" label="click me"/>
</s:Application>
And this test case:
package flexUnitTests
{
import flexunit.framework.Assert;
public class AppTest
{
[Test]
public function testApp():void
{
var app:App = new App();
Assert.assertNotNull(app.bt);
}
}
}
But app.bt is null. I want to access the button :(
Short Answer:
The life cycle methods have not run on app; so no createChildren() method was executed in order to create the child component of bt.
Longer Answer:
Things get slightly more complicated with the main application file, as it there is no higher level Flex component in the display hierarchy. I'm unclear on all specifics, but..
I think the Flex Compiler does some magic to set up this component--and the Flex Framework--that help makes the whole app work. You are, in essence, bypassing that work by creating your own instance of the component.
I have been searching thru the posts but I have not been able to find (I could have missed it) how to allow items in an s:List or s:Arraycollection to be clicked to advance to another view in an mobile app. Any help would be much appreciated!
Thanks!
<?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/mx"
creationComplete="onCreationComplete()"
>
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.controls.Alert;
private var _listDataProvider:ArrayCollection = new ArrayCollection(['one', 'two', 'three']);
private function onCreationComplete():void
{
list.dataProvider = _listDataProvider;
list.addEventListener(MouseEvent.CLICK, onListItemClick);
}
private function onListItemClick(event:Event):void
{
Alert.show('Replace this Alert with code to go to view ' + event.currentTarget.selectedItem.toString() + '.', 'Item #' + (event.currentTarget.selectedIndex + 1).toString());
}
]]>
</fx:Script>
<s:List id="list"
horizontalCenter="0"
verticalCenter="0"
/>
</s:Application>
I'm getting the same issue. For some reasons, flash builder is importing the Alert class correctly (import mx.controls.Alert) with its full package name but the project does not compile because it says "Import alert could not be found". I am developing a mobile application using SDK 4.6 which i know doesn't have support for mx controls. This only explains why mx namespace control classes aren't importing properly. I hope this answers your question correctly as i'd advice you to find other means of alerting information to the user. Maybe write a custom alert component or use the platform's alert control via Native extensions.
From this tutorial http://www.brighthub.com/internet/web-development/articles/11010.aspx
I found the code below. Is there a way to break this out so the mxml file just has the mxml, and the code between the script tags is put in an actionscript file?
Thanks.
-Nick
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute"
width="600"
height="400"
frameRate="100"
creationComplete="CreationComplete()"
enterFrame="EnterFrame(event)">
<mx:Script><![CDATA[
public function CreationComplete():void
{
}
public function EnterFrame(event:Event):void
{
}
]]></mx:Script>
</mx:Application>
There are several ways of achieving this in Flex:
Put the AS code in a .as file and use the "source=yourfile.as" attribute in the Script tag:
<mx:Script source="yourfile.as" />
You can also use the includes="yourfile.as" declaration w/in the Script tag:
<mx:Script
<![CDATA[
include "yourfile.as";
//Other functions
]]>
</mx:Script>
Use a Code-Behind pattern where you define the code in an AS file which extends the visual component you want your MXML file to extend. Then your MXML file simple extends the AS file and you have (via inheritance) access to all the code. It would look something like this (I'm not sure if this would work for the main MXML file which extends Application):
AS File:
package {
public class MainAppClass {
//Your imports here
public function CreationComplete():void {
}
public function EnterFrame(event:Event):void {
}
}
}
MXML File:
<component:MainAppClass xmlns:component="your namespace here"
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute"
width="600"
height="400"
frameRate="100"
creationComplete="CreationComplete()"
enterFrame="EnterFrame(event)">
</component:MainAppClass>
Use a framework to inject the functionality you are looking for as a type of "model" which contains the data-functionality you will use. It would look something like this in Parsley:
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute"
width="600"
height="400"
frameRate="100"
creationComplete="model.CreationComplete()"
enterFrame="model.EnterFrame(event)">
<mx:Script>
<![CDATA[
[Inject]
[Bindable]
public var model:YourModelClass;
]]>
</mx:Script>
</mx:Application>
Two frameworks which come to mind which can help w/injection are Mate or Parsley.
I'm not sure if the code-behind pattern works with the main MXML file (which extends Application), so if you're having problems, you might try breaking out the content in your Main MXML file into a separate component which is included in Main. It might look something like this:
Main.mxml:
<mx:Application blah,blah,blah>
<component:YourComponent />
</mx:Application>
YourComponent.mxml:
<component:YourComponentCodeBehind creationComplete="model.creationComplete()"...>
//Whatever MXML content you would have put in the Main file, put in here
</component:YourComponentCodeBehind>
YourComponentCodeBehind.as
package {
class YourComponentCodeBehind {
//Whatever AS content you would have put in the Main .as file, put in here
}
}
From what I've been able to gather from Flex architecture, this is a very common way of setting up your application: your main MXML includes a single "view" which is the entry-point to the rest of your application. This view the contains all other views which comprise the app.
Hope that makes sense :)
i am new to flex. I want to create some buttons and when v click on that button, it should open some images. how to give this functionality in flex builder 3. Thanks for ur time
Try this example if it helps.
The important thing is embedding the image before you use it.Another way of embedding is inline in the mx:Image tag.Please be careful with the path to the location of the image.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
/*in the source put the absolute path(like directory:/folder/image.gif) or the relative path (../image.gif where ../ is your project directory )to the location of your image
*/
[Embed (source="../src/assets/images/image.gif")]
[Bindable]
//this variable of type Class is used to refer to the aboveimage..
public var img:Class;
public function buttonClickHandler():void{
if(image.visible)
image.visible = false;
else
image.visible = true;
}
]]>
</mx:Script>
<mx:Image source="{img}" visible="false" id="image"/>
<mx:Button x="172" y="225" label="Button" id="button" click="buttonClickHandler()"/>
</mx:Application>
hi have a click handler for the button. in the function of click handler handle displaying of image by switching visibilities.have the image embedded in the design before itself. then play with its visibilities on button click.
try going through the examples here.explains about all kind of asset embedding,including sound
http://livedocs.adobe.com/flex/3/html/help.html?content=04_OO_Programming_09.html