Show snapshots from camera Flex - actionscript-3

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);

Related

How can I stop audio from playing from a video file?

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>

Is there any way to synchronize flex application tool with browser forward and backward button

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/

PDF in ADOBE AIR

I'm creating an ADOBE AIR application.
I have some text boxes and labels in my Hbox. I want to generate a pdf and have to add that hbox into that pdf ..lot of people telll about alivepdf .
I searched ,but have not seen a demo..If you have any idea ,Please share me ,or advice me..Thanks
I think it could help you.
This are my Air-application and the PDF-file.
//source
<?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">
<fx:Script>
<![CDATA[
import org.alivepdf.display.Display;
import org.alivepdf.fonts.*;
import org.alivepdf.layout.*;
import org.alivepdf.pages.Page;
import org.alivepdf.pdf.PDF;
import org.alivepdf.saving.Method;
protected function onBtnGeneratePDF(event:MouseEvent):void
{
var pdf:PDF = new PDF( Orientation.PORTRAIT, Unit.MM, Size.A4 );
pdf.setDisplayMode( Display.FULL_PAGE, Layout.SINGLE_PAGE );
var newPage:Page = new Page ( Orientation.PORTRAIT, Unit.MM, Size.A4 );
pdf.addPage( newPage );
pdf.addText("This is my PDF from AdobeFlex", 5, 10);
pdf.addImage(hgMain, null, 5, 10);
var fs:FileStream = new FileStream();
var file:File = File.desktopDirectory.resolvePath("testPage.pdf");
fs.open(file, FileMode.WRITE);
var bytes:ByteArray = pdf.save(Method.LOCAL);
fs.writeBytes(bytes);
fs.close();
}
]]>
</fx:Script>
<s:HGroup id="hgMain" x="10" y="10" width="439" height="161">
<s:Label text="MyLabel_01"/>
<s:TextArea width="133" height="116" contentBackgroundColor="#E6B3B3" fontStyle="italic"
text="MyTextArea"/>
<s:Label fontWeight="bold" text="MyLabel_02"/>
<s:TextArea width="127" height="69" contentBackgroundColor="#CED4F2" fontSize="15"
fontWeight="bold" text="MyTextArea"/>
</s:HGroup>
<s:Button x="10" y="179" label="Generate PDF" click="onBtnGeneratePDF(event)"/>
</s:WindowedApplication>

mx:TileList : Why drag doesn't works if allowMultipleSelection is activate

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.

Flex 3: inquiry about printing

I have created a scheduling application that spans upwards of 16 weeks. I would like to be able to print the schedule using Flex. I've created a test application that lists incrementing dates. These dates obviously stretch longer than the width of my computer. I would like for my print function to print the entire width of dates across several pages... currently, it prints just what appears on my screen. Is there a way to accomplish this?
Below is the app i've created. There are some calls to custom functions, but they in no way relate to the issue at hand:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init();">
<mx:Script source="functions/dateFunctions.as" />
<mx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.collections.ArrayCollection;
[Bindable] public var date:Date = new Date;
public var numDays:Number = 50;
[Bindable] public var datesAC:ArrayCollection = new ArrayCollection;
public function init():void
{
var tempDate:String = new String;
for (var i:int = 0; i < numDays; i++)
{
tempDate = dateToNumText(rightDate(date.getMonth(), date.getDate() + i, date.getFullYear()));
datesAC.addItem(tempDate);
}
}
private function printMe() :void
{
var pj:PrintJob = new PrintJob();
pj.start();
// setTimeout(function() :void { finishPrinting(pj);}, 1);
finishPrinting(pj);
}
private function finishPrinting(pj:PrintJob): void {
pj.addPage(this);
pj.send();
}
]]>
</mx:Script>
<mx:VBox width="100%" height="100%">
<mx:Button id="print" label="Start Print" click="printMe()" />
<mx:HorizontalList id="dateList" dataProvider="{datesAC}" width="100%" height="100%" useRollOver="false">
<mx:itemRenderer>
<mx:Component>
<mx:Canvas borderColor="#000000" borderSides="right" borderStyle="solid">
<mx:Text text="{data}" textAlign="center" color="#000000" width="100" />
</mx:Canvas>
</mx:Component>
</mx:itemRenderer>
</mx:HorizontalList>
</mx:VBox>
</mx:Application>
You would have to break up/paginate content on your own. You can send each such logically broken up page to PrintJob.appPage() API so it becomes a printed paper. At present, what is happening would be that content would be getting clipped.
I guess you should use PrintJob.addPage() to add your dates to print job.