This code plays Youtube videos. The file works using Debug or Run buttons in FlashBuilder but has a bug when played from a web server or from the Export Release folder: when the second video runs the audio from the first video keeps playing. How can I unload the first audio?
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()">
<mx:Script>
<![CDATA[
import mx.controls.SWFLoader;
private var swfLoader:SWFLoader;
[Bindable] public var videoToPlay:String
public function playVideo(videoNum:int):void
{
if(swfLoader)
{
swfLoader.autoLoad = false;
swfLoader.unloadAndStop();
hg.removeChild(swfLoader);
SoundMixer.stopAll();
}
var videoAddress:String
if(videoNum == 1){
videoAddress = "m2dg6teC7fg";
}else{
videoAddress = "0QRO3gKj3qw";
}
videoToPlay = "https://www.youtube.com/v/VIDEO_ID?v=" + videoAddress;
play();
}
public function play():void
{
swfLoader = new SWFLoader();
swfLoader.y = 100;
swfLoader.load(videoToPlay);
hg.addChild(swfLoader);
}
]]>
</mx:Script>
<mx:HBox id="hg">
<mx:Button id="button1" y="50" label="Button1" click="playVideo(1)" useHandCursor="true" buttonMode="true" />
<mx:Button id="button2" y="50" label="Button2" click="playVideo(2)" useHandCursor="true" buttonMode="true" />
</mx:HBox>
</mx:Application>
The solution to stop first video/audio on second button click is:
Use following in your code to unload first video from swfloader:
<fx:Script>
<![CDATA[
import mx.controls.SWFLoader;
private var swfLoader:SWFLoader;
[Bindable] public var videoToPlay:String
public function playVideo(videoNum:int):void
{
if(swfLoader)
{
swfLoader.autoLoad = false;
swfLoader.unloadAndStop();
// swfLoader.autoLoad = true;
hg.removeElement(swfLoader);
SoundMixer.stopAll();
}
var videoAddress:String
if(videoNum == 1){
videoAddress = "m2dg6teC7fg";
}else{
videoAddress = "0QRO3gKj3qw";
}
videoToPlay = "https://www.youtube.com/v/VIDEO_ID?v=" + videoAddress;
play();
}
public function play():void
{
swfLoader = new SWFLoader();
swfLoader.y = 100;
swfLoader.load(videoToPlay);
hg.addElement(swfLoader);
}
]]>
</fx:Script>
<s:HGroup id="hg">
<s:Button id="button1" y="50" label="Button1" click="playVideo(1)" useHandCursor="true" buttonMode="true" />
<s:Button id="button2" y="50" label="Button2" click="playVideo(2)" useHandCursor="true" buttonMode="true" />
</s:HGroup>
I have edited code below, which works for your problem(I tested it my side). Try it and let me know it's works?
Edit:
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" minWidth="955" minHeight="600">
<mx:Script>
<![CDATA[
import mx.controls.SWFLoader;
private var swfLoader:SWFLoader;
[Bindable] public var videoToPlay:String
public function playVideo(videoNum:int):void
{
if(swfLoader)
{
swfLoader.source = "";
swfLoader.load(null);
SoundMixer.stopAll();
}
var videoAddress:String
if(videoNum == 1){
videoAddress = "m2dg6teC7fg";
}else{
videoAddress = "0QRO3gKj3qw";
}
videoToPlay = "https://www.youtube.com/v/VIDEO_ID?v=" + videoAddress;
play();
}
public function play():void
{
swfLoader = new SWFLoader();
swfLoader.y = 100;
swfLoader.load(videoToPlay);
hg.addChild(swfLoader);
}
private function onRemove():void
{
}
]]>
</mx:Script>
<mx:HBox id="hg">
<mx:Button id="button1" y="50" label="Button1" click="playVideo(1)" useHandCursor="true" buttonMode="true" />
<mx:Button id="button2" y="50" label="Button2" click="playVideo(2)" useHandCursor="true" buttonMode="true" />
</mx:HBox>
</mx:Application>
Related
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
private var myTimer:Timer;
[Bindable] public var isEnabled:Boolean = true;
public function getDetails():void {
Alert.show("Got it!!");
isEnabled = false;
myTimer = new Timer(5000, 1);
myTimer.addEventListener(TimerEvent.TIMER_COMPLETE, timerHandler);
myTimer.start();
}
public function timerHandler(event:TimerEvent):void {
isEnabled = true;
}
]]>
</mx:Script>
<mx:ArrayCollection id="myAc">
<mx:source>
<mx:Object version="1.0" telephone="9875454214" />
<mx:Object version="2.0" telephone="8794568784" />
<mx:Object version="3.0" telephone="8796454487" />
</mx:source>
</mx:ArrayCollection>
<mx:HBox>
<mx:DataGrid verticalScrollPolicy="on" focusEnabled="false" name="Version" id="Version" width="100%" height="65" dataProvider="{myAc}" >
<mx:columns >
<mx:DataGridColumn width="150" dataField="version" headerText="Version" />
<mx:DataGridColumn width="70" dataField="telephone" headerText="Telephone" />
<mx:DataGridColumn width="90" paddingLeft="20" headerText="Download">
<mx:itemRenderer>
<mx:Component>
<mx:Image height="10%" source="css/page_excel.png" click = "outerDocument.getDetails()" enabled = "{outerDocument.isEnabled}" />
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>
</mx:HBox>
</mx:Application>
This application is programmed to disable the Image when it is clicked and Enable the same after 5 sec. But it is disabling whole Column. I want it to disable only the clicked Image.
Change your mxml
<!--<mx:Image height="10%" source="css/page_excel.png" click = "outerDocument.getDetails()" enabled = "{outerDocument.isEnabled}" />-->
<mx:Image height="10%" source="css/page_excel.png" click = "outerDocument.getDetails(event)" />
And here is the AS code.
public function getDetails(event: MouseEvent):void {
Alert.show("Got it!!");
//isEnabled = false;
event.target.enabled = false; // Disable clicked Object.
myTimer = new Timer(5000, 1);
//myTimer.addEventListener(TimerEvent.TIMER_COMPLETE, timerHandler);
myTimer.addEventListener(TimerEvent.TIMER_COMPLETE, nextfuncWithParams(timerHandler, event.target)); // Pass clicked object.
myTimer.start();
}
public function nextfuncWithParams(nextfunc: Function, params: Object): Function {
return function(event:TimerEvent): void{
nextfunc(event, params);
}
}
public function timerHandler(event: TimerEvent, MouseEventTarget: Object):void {
//isEnabled = true;
MouseEventTarget.enabled = true; // Enable passed object.
}
Working Example: http://wonderfl.net/c/Gv9k
Update
For using Image.
public function getDetails(event: MouseEvent):void {
//Alert.show("Got it!!");
//event.target.enabled = false; // event.target was Loader...
var obj: Object = event.target;
while (obj.parent)
{
if (obj is Image)
{
Image(obj).enabled = false;
break;
}
obj = obj.parent;
}
myTimer = new Timer(5000, 1);
//myTimer.addEventListener(TimerEvent.TIMER_COMPLETE, timerHandler);
myTimer.addEventListener(TimerEvent.TIMER_COMPLETE, nextfuncWithParams(timerHandler, obj));
myTimer.start();
}
I have create an flex application tool which used BrowserManager class to synchronization between flex application tool and browser forward/backward button. It works fine in firefox but did not work properly in other browser(safari,IE,Chrome).
Code is as folow :
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute"
historyManagementEnabled="false"
creationComplete="onCreationComplete()">
<mx:Script>
<![CDATA[
import mx.effects.effectClasses.AddRemoveEffectTargetFilter;
import mx.events.BrowserChangeEvent;
import mx.managers.IBrowserManager;
import mx.managers.BrowserManager;
import mx.utils.URLUtil;
private var bm:IBrowserManager;
private function onCreationComplete() : void
{
bm = BrowserManager.getInstance(); //get an instance of the browserManager
bm.init(); //initialize the browser manager
updateContainers(); //set visible containers based on url parameters
bm.addEventListener( BrowserChangeEvent.BROWSER_URL_CHANGE, onURLChange ); //add event listeners to handle back/forward browser buttons
updateURL();
}
private function updateContainers():void
{
var o:Object = URLUtil.stringToObject(bm.fragment);
if ( !isNaN(o.selectedIndex) )
{
var newIndex : Number = o.selectedIndex;
if ( newIndex >= 0 && newIndex < tabNav.numChildren )
tabNav.selectedIndex = newIndex;
}
}
private function onURLChange( event:BrowserChangeEvent ):void
{
updateContainers();
}
private function updateURL():void
{
bm.setFragment( "selectedIndex=" + tabNav.selectedIndex );
}
]]>
</mx:Script>
<mx:TabNavigator
bottom="10"
top="10"
right="10"
left="10"
id="tabNav"
historyManagementEnabled="false"
>
<mx:Canvas label="Tab 0" show="updateURL()" >
<mx:Label text="Tab 0 Contents" />
</mx:Canvas>
<mx:Canvas label="Tab 1" show="updateURL()" >
<mx:Label text="Tab 1 Contents" />
</mx:Canvas>
<mx:Canvas label="Tab 2" show="updateURL()" >
<mx:Label text="Tab 2 Contents" />
</mx:Canvas>
</mx:TabNavigator>
</mx:Application>
Is there any solution for this problem...?
I have got an answer of mine own question. The code is as follow :
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute"
historyManagementEnabled="false"
creationComplete="onCreationComplete()">
<mx:Script>
<![CDATA[
import com.asual.swfaddress.SWFAddressEvent;
import com.asual.swfaddress.SWFAddress;
import mx.effects.effectClasses.AddRemoveEffectTargetFilter;
import mx.events.BrowserChangeEvent;
import mx.managers.IBrowserManager;
import mx.managers.BrowserManager;
import mx.utils.URLUtil;
import com.asual.swfaddress.*;
private var bm:IBrowserManager;
private function onCreationComplete() : void
{
SWFAddress.addEventListener(SWFAddressEvent.CHANGE, onChange);
}
private function onChange(e:SWFAddressEvent):void
{
if(e.value != "/")
SWFAddress.setTitle("Nail Designer " + e.value.substring(1));
else
SWFAddress.setTitle("Nail Designer - Tab1Selected ");
switch(e.value)
{
case "/Tab1Selected":
tabNav.selectedIndex = 0;
break;
case "/Tab2Selected":
tabNav.selectedIndex = 1;
break;
case "/Tab3Selected":
tabNav.selectedIndex = 2;
break;
case "/":
tabNav.selectedIndex = 0;
break;
}
}
public function onCanvas_Click():void
{
if(tabNav.selectedIndex == 0)
SWFAddress.setValue("Tab1Selected");
else if(tabNav.selectedIndex == 1)
SWFAddress.setValue("Tab2Selected");
else if(tabNav.selectedIndex == 2)
SWFAddress.setValue("Tab3Selected");
}
]]>
</mx:Script>
<mx:TabNavigator
bottom="10"
top="10"
right="10"
left="10"
id="tabNav"
historyManagementEnabled="false"
>
<mx:Canvas label="Tab 1" show="onCanvas_Click()" >
<mx:Label text="Tab 0 Contents" />
</mx:Canvas>
<mx:Canvas label="Tab 2" show="onCanvas_Click()" >
<mx:Label text="Tab 1 Contents" />
</mx:Canvas>
<mx:Canvas label="Tab 3" show="onCanvas_Click()" >
<mx:Label text="Tab 2 Contents" />
</mx:Canvas>
</mx:TabNavigator>
</mx:Application>
This code only run when you have swfaddress.js, swfobject.js file and SWFAddress.as,
SWFAddressEvent.as class. This files you can download fron link :
http://www.asual.com/swfaddress/
I have a component that is draggable. However, it cannot be dragged if the user drags while the mouse is on the text field. How can I set the Text field so the user can click-drag on that part of the interface?
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init()" width="210" height="150" styleName="noteStyle" >
<mx:Script>
<![CDATA[
public var testId:int;
public var buttonNumber:int;
public function init():void{
this.addEventListener(MouseEvent.MOUSE_DOWN, makeDraggable)
this.addEventListener(MouseEvent.MOUSE_UP, endDrag)
this.buttonMode = true;
this.useHandCursor = true;
}
public function saveButtonHandler():void{
dispatchEvent(new Event ( "noteClosed"));
}
public function cancelButtonHandler():void{
dispatchEvent(new Event ( "noteCancelled"));
}
public function makeDraggable(e:Event):void{
//If the target and the current target are the same, then it must be the background, so make it draggable.
//Stops the text field and buttons from being draggable
trace("Target= "+e.currentTarget+" "+e.target)
if(e.currentTarget==e.target){
this.startDrag();
}
}
public function endDrag(e:Event):void{
this.stopDrag();
}
]]>
</mx:Script>
<mx:Text text="Add a note: Drag to move" styleName="myriadPro14" selectable="false" />
<mx:Button id="saveButton" label="Save" x="146" y="120" click="saveButtonHandler()" />
<mx:Button id="cancelButton" label="Cancel" x="10" y="120" click="cancelButtonHandler()" />
<mx:TextArea id="noteText" width="200" height="80" horizontalCenter="0" verticalCenter="-12"/>
</mx:Canvas>
Add an event listener to the text field as well.
I work with TileList to display image like a gallery.
At start, I activate only drag option.
<mx:TileList xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
columnWidth="120"
rowHeight="150"
paddingLeft="2"
paddingRight="2"
paddingTop="2"
paddingBottom="2"
itemRenderer="fr.ui.display._43Imagerie.TileUnit2"
doubleClickEnabled="true"
dragEnabled="true"
dropEnabled="true"
dragMoveEnabled="true"
verticalScrollPolicy="on"
>
Now I try to add multiple selection possibility.
ItemRenderer is :
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"
verticalScrollPolicy="off"
horizontalScrollPolicy="off"
width="120"
height="150"
borderVisible="false"
xmlns:s="library://ns.adobe.com/flex/spark"
creationComplete="onEvent()"
>
<mx:Script>
<![CDATA[
import fr.util.imageTransform;
import mx.controls.Image;
import mx.core.UIComponent;
import mx.events.DragEvent;
import mx.managers.DragManager;
import org.osmf.utils.URL;
import spark.effects.Rotate;
[Bindable]
[Embed(source="icon/imagerie/rotate.png")]
private var rotationArrowClass:Class;
private var _file:File;
private var _selected:Boolean;
private var _sauvBMD:BitmapData;
public var wasScaled:Boolean = false;
public var deleted:Boolean = false;
private var bgCenterX:Number;
private var bgCenterY:Number;
private var _dragDownPt:Point;
[Bindable]
public var angle:int = 0;
private var dragBitmapData : BitmapData;
private function onEvent():void
{
// iconCanvas.addEventListener(MouseEvent.DOUBLE_CLICK, onDoubleClick);
// double click gere ds wPlanchePhoto3
}
private function rotationImage(e:MouseEvent):void
{
var rot:Rotate = new Rotate();
rot.angleBy = 90;
rot.duration = 1000;
rot.autoCenterTransform = true;
rot.target = iconCanvas;
rot.play();
}
private function radiansToDegrees(radians:Number):Number {
var degrees:Number = radians * (180 / Math.PI);
return degrees;
}
private function degreesToRadians(degrees:Number):Number {
var radians:Number = degrees * (Math.PI / 180);
return radians;
}
public function set image(im:BitmapData):void
{
this._sauvBMD=im;
}
public function get image() :BitmapData
{
return this._sauvBMD;
}
protected function iconCanvas_mouseDownHandler(event:MouseEvent):void
{
// on enregistre la point de départ
_dragDownPt = new Point(mouseX,mouseY);
// puis on écoute l'éventuel déplacement de la souris
this.addEventListener(MouseEvent.MOUSE_MOVE,_onMouseMoveDuringDrag);
}
private function _onMouseMoveDuringDrag(evt:MouseEvent):void {
// astuce pour s'assurer que la souris a vraiment bougee volontairement
if(Math.abs(_dragDownPt.x - mouseX) <= 2 && Math.abs(_dragDownPt.y - mouseY) <= 2)
return;
else{
dragBitmapData = new BitmapData(iconCanvas.width, iconCanvas.height,true, 1);
dragBitmapData.draw(iconCanvas);
var transfert:Clipboard = new Clipboard();
transfert.setData(ClipboardFormats.BITMAP_FORMAT,Bitmap(iconCanvas.content).bitmapData);
// only allow the file to be copied
var dragOptions:NativeDragOptions = new NativeDragOptions();
dragOptions.allowMove=false;
dragOptions.allowCopy = true;
dragOptions.allowLink = false;
// begin the drag
NativeDragManager.doDrag(this, transfert, dragBitmapData, null, dragOptions);
}
// dispatch de l'event depuis le parent pour pouvoir écouter cet event dans l'application
}
]]>
</mx:Script>
<s:BorderContainer
id="bcImage"
width="120"
height="99%"
borderVisible="true"
borderColor="#FFFFFF"
borderWeight="1"
cornerRadius="6"
backgroundAlpha=".4"
backgroundColor="#5f5f5f"
>
<mx:Canvas id="cvsImage" width="100%">
<mx:SWFLoader id="rotationArrow" source="{rotationArrowClass}" height="18" width="18" x="3" y="3" visible="true" click="rotationImage(event);" alpha=".5"/>
<s:Label x="23" y="3" width="82" fontSize="11" fontWeight="normal" text="{data.imDate}"
textAlign="right" color="#000000"/>
<mx:Image id="iconCanvas" x="10" y="20" width="99" height="99" horizontalAlign="center"
maintainAspectRatio="true" scaleContent="true"
source="{data.imURL}"
verticalAlign="middle" mouseDown="iconCanvas_mouseDownHandler(event)"
>
</mx:Image>
</mx:Canvas>
<s:VGroup width="100%" y="124" height="25" bottom="1" left="3" right="3" paddingBottom="0" paddingTop="4" gap="0">
<s:Label text="{data.imType}" height="50%" fontSize="10" paddingBottom="1"
fontWeight="normal" width="99%" textAlign="center" color="#000000"/>
<s:Label text="{data.imStade}" fontSize="10" textAlign="center" paddingTop="1"
fontWeight="normal" width="99%" color="#000000"/>
</s:VGroup>
</s:BorderContainer>
If this option is true (allowMultipleSelection), drag stop to work, do you know why?
Thanks for helping.
Adding allowMultipleSelection="true" worked just fine for me. I am running on a Mac with latest version of Flash Player. It seemed a bit flaky at first but after refreshing the page it worked just fine. Only thing I didn't have in my project was your data provider and item renderer. I really doubt your item renderer would cause an issue unless you are doing something crazy in there. Check to see if you have the latest Flash Player.
I created a flex application that snapshot a picture of the webcam. Im trying now to save every snapshop and display it directly when the image has been capture. But I cant seems to understand how to.
I want the images to be display in the Thumbnail box.
Any help ? or any sites I can found some help on ?
This is what I have for the moment
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="top"
horizontalAlign="center" paddingTop="0" viewSourceURL="srcview/index.html">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.core.UIComponent;
private function videoDisplay_creationComplete() : void
{
var camera:Camera = Camera.getCamera();
if (camera)
{
videoDisplay.attachCamera(camera);
}
else
{
Alert.show("Oops, we can't find your camera.");
}
}
private function capture_click() : void
{
var snap:BitmapData = new BitmapData(320, 240, true);
var snapBmp:Bitmap = new Bitmap(snap);
snapBmp.width = 320;
snapBmp.height = 240;
if(snapshotHolder.numChildren > 0)
snapshotHolder.removeChildAt(0);
snapshotHolder.addChild(snapBmp);
snap.draw(videoDisplay);
}
]]>
</mx:Script>
<mx:HBox>
<mx:Panel title="Video">
<mx:VideoDisplay id="videoDisplay" creationComplete="videoDisplay_creationComplete();" width="320" height="240" />
</mx:Panel>
<mx:Panel title="Snapshot">
<mx:UIComponent id="snapshotHolder" width="320" height="240" />
</mx:Panel>
</mx:HBox>
<mx:HBox>
<mx:Button label="reload camera" click="videoDisplay_creationComplete();"/>
<mx:Button label="capture" click="capture_click();"/>
</mx:HBox>
<mx:HBox>
<mx:Panel title="Thumbnails">
<mx:UIComponent id="snapshotHolderTN" width="128" height="96" />
</mx:Panel>
</mx:HBox>
</mx:Application>
Pls try with this when u click for image snaps.
var bmp:BitmapData = new BitmapData(videodisplay.width,videodisplay.height);
bmp.draw(drawArea);
var jpgEncode:JPEGEncoder = new JPEGEncoder(50);
var imageByte:ByteArray = jpgEncode.encode(bmp);
var fileRef:FileReference = new FileReference;
fileRef.save(imageByte);