I'm using the fxcomponent: Flv video player to play my flv/mob files.
You may get it from here.
Now, player works perfectly as shown in their site, but when I try to use the FXVideo control in popup window (popup manager help is here), the component gives mirror image!, strange, I didn't change any code in that.
So can any one help me out to fix this issue, as I'm novice to action script?
Image:
For quick set up, I'm putting my code here:
FXVideo_Example.mxml file (No change at all except variable)
[Bindable]
private var source:String = "http://localhost/greatcatches.flv";
]]>
</mx:Script>
<controls:FXVideo width="480" height="360" source="{source}" autoPlay="false" bufferTime="10" />
MainPage.mxml:
import mx.core.IFlexDisplayObject;
import mx.managers.PopUpManager;
private function showW():void {
// Create a non-modal TitleWindow container.
var helpWindow:IFlexDisplayObject =
PopUpManager.createPopUp(this, FXVideo_Example, false);
}
]]>
</mx:Script>
<mx:VBox width="480" height="360">
<mx:Button click="showW();" label="Show"/>
</mx:VBox>
Ended up by using spark component!
<s:VideoPlayer id="videoPlayer"
source="http://localhost/greatcatches.flv"
autoRewind="true"
muted="true"
horizontalCenter="0"
verticalCenter="0" />
Related
In my application i am using a borderContainer which contains two or more panels.All these panels are resizable.
My problem is while resizing a panel if it touches the panel next to it i have to stop resizing automatically.
I used hittestObject and able to catch the hitting point but i dont know how to stop resize event.
Please help me.
I haven't tested this code but you can try. :). Basically I have to use the preventDefault method whenever I need to stop the execution of the default behavior of that specific method.
<mx:Script>
<![CDATA[
import mx.containers.Panel;
import mx.events.ResizeEvent;
//Your other codes here
public function panel_resizeHandler(event:ResizeEvent):void
{
var isTouched:Boolean = firstPanel.hitTestObject(secondPanel);
if(isTouched)
{
event.preventDefault();
}
}
]]>
</mx:Script>
<mx:Panel id="firstPanel" resize="panel_resizeHandler(event)>
<!-- Panel contents here-->
</mx:Panel>
<mx:Panel id="secondPanel" ">
<!--Panel Contents Here -->
</mx:Panel>
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!
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
I'm trying componentize one of the pieces of UI in an AIR application that I'm developing in Flex. In this example, I want to display file information on a single line (which has an icon, some text/link and the size).
My code looks like this (component is called FileDisplay):
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
public function set iconType(source:String):void {
this.ficon.source = source;
}
public function set fileName(name:String):void {
this.fname.htmlText = name;
}
public function set fileSize(size:String):void {
this.fsize.text = size;
}
]]>
</mx:Script>
<mx:Image id="ficon" />
<mx:Label id="fname" left="20" right="30" text="Filename" />
<mx:Label id="fsize" right="0" text="0 K" />
</mx:Canvas>
When I'm using this component in my main application, the actionscript looks like:
for each (var file:XML in result.files) {
var fd:FileDisplay = new FileDisplay();
fd.fileName = ''+file.name+'';
fd.iconType = getFileTypeIcon(file.name);
fd.fileSize = getFileSizeString(file.size);
this.file_list.addChild(fd);
}
However, when I do this, I get an error: Error #1009: Cannot access a property or method of a null object reference. This is because the child components of the FileDisplay are null (or at least they show up that way in the debugger).
Does anyone know if there's a way around this? Am I supposed to be waiting for events indicating the child components were created? Is there a more common pattern that solves this problem?
For now I can manually do everything in ActionScript in my main app (create a Canvas and add children to it) but I would appreciate any insight on how to separate the code more cleanly.
Bindable to the rescue:
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
[Bindable]
public var iconType:String;
[Bindable]
public var fileName:String = "Filename";
[Bindable]
public var fileSize:String = "0 K";
]]>
</mx:Script>
<mx:Image id="ficon" source="{iconType}"/>
<mx:Label id="fname" left="20" right="30" text="{fileName}" />
<mx:Label id="fsize" right="0" text="{fileSize}" />
</mx:Canvas>
the values will be automatically updated when the components are created.
The subcomponents haven't been loaded yet.
Read this: http://livedocs.adobe.com/flex/3/html/help.html?content=ascomponents_advanced_2.html#203434.
Then, when like me, you don't understand it (and it's not reliable), listen for the FlexEvent.CREATION_COMPLETE within FileDisplay, and apply your child component properties there.
Or better yet, create the three children programmatically in the "createChildren" function, and apply the settings there.
Both of these methods assume that you're setting filename, icontype, and filesize as local members before applying them to the children components, which you should be doing regardless.
What is the parent component that holds the FileDisplay component? If you're sure that the error is coming from the fact that the child components of FileDisplay aren't being instantiated then you might want to look at the creationPolicy attribute and make sure it's set to ContainerCreationPolicy.ALL on that parent component.
=Ryan
In addition to setting the CreationPolicy to all, you need to add the DisplayObject to the stage via addChild. The children of FileDisplay are not created until you add it is added to the stage. So do:
for each (var file:XML in result.files) {
var fd:FileDisplay = new FileDisplay();
this.file_list.addChild(fd);
fd.fileName = ''+file.name+'';
fd.iconType = getFileTypeIcon(file.name);
fd.fileSize = getFileSizeString(file.size);
}
I need to write a small Flash app that will need to extract a video frame from a playing video. It will not need to be saved to the HDD of the user. I just need to get the image data and display it in the Flash movie. The frame to extract will be chosen by the user, which is why I'd like to do this purely on the client side (though I know I could do it from the server side).
I've tried searching for solutions but I'm not getting any useful results. Being a Flash newbie I haven't got any code yet seeing as I wouldn't know where to start.
So Flash gurus, is there a way to do this?
If you take a 'screen grab' of a DisplayObject in flash using BitmapData's draw() method.
If you have something for displaying flv somewhere a bit to the right, or down, try something like:
var cloneData:BitmapData = new BitmapData(video.width,video.height,false,0x000000);
cloneData.draw(video);
//test
addChild(new Bitmap(cloneData));
Goodluck!
After reading Georges answer, this is what I came up with as proof of concept. Posting here so it doesn't pollute original question.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="video.load()">
<mx:VideoDisplay id="video" x="0" y="0" source="/content/content.flv" />
<mx:Button x="10" y="10" label="Grab" click="grabClick()"/>
<mx:Button x="71" y="10" label="Play" click="video.play()"/>
<mx:Button x="130" y="10" label="Pause" click="video.pause()"/>
<mx:Script>
<![CDATA[
import mx.controls.*;
import flash.display.BitmapData;
private function grabClick():void {
var bitdata:BitmapData = new BitmapData(video.width, video.height, false, 0x0);
bitdata.draw(video);
var grabResult:Image = new Image();
grabResult.x = 0;
grabResult.y = video.height;
grabResult.source = new Bitmap(bitdata);
addChild(grabResult);
}
]]>
</mx:Script>
</mx:Application>