Flashbuilder 4, Desktop Air Application - Embed and play Sound - actionscript-3

I am a complete newbie to Flashbuilder, and I need to learn how to 1.) Embed a sound file (mp3) and 2.) be able to play said file.
I looked it up using Google and all the examples seem to be for AS3, I tried to adapt it as follows but cant get it to play (or should I say I can't hear anything?)
bgmusic is imported at the src level
Test.mxml:
<?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:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Script>
<![CDATA[
import flash.media.Sound;
[Embed(source="bgmusic.mp3")]
public var mySound:Class;
protected function button1_clickHandler(event:MouseEvent):void
{
var s:Sound = new mySound() as Sound;
s.play();
}
]]>
</fx:Script>
<s:Button label="Test" click="button1_clickHandler(event)" />
</s:WindowedApplication>

Related

calling a function in the <fx:Script> tags

I am a bit stumped. I thought it was possible to call a function within the fx:Script tag simply by referencing the function ("display_album()" as in the code below). It would make sense to have that function call outside the curly braces, but when I do, the debugger in FlashBuilder gives me the 1180 error, call to a possibly undefined method.
I can call the function with a button click (which makes sense too), and I get the proper trace in the FlashBuilder debugger.
But I am curious as to how I can call a function in the tag without adding a button. 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" minWidth="955" minHeight="600">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Script>
<![CDATA[
public function display_album():void
{
var album:String = "The White Album";
trace (album);
}
display_album();
]]>
</fx:Script>
<s:Button x="192" y="259" label="Button" click = "display_album()"/>
</s:Application>
<?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" minWidth="955" minHeight="600"
initialize="init()">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Script>
<![CDATA[
private function init():void
{
display_album();
}
public function display_album():void
{
var album:String = "The White Album";
trace (album);
}
]]>
</fx:Script>
<s:Button x="192" y="259" label="Button" click = "display_album()"/>
I hope this helps.
You can't call an instance function like that, because it runs before the constructor is called. Since the instance itself has not been initialized yet, there is no scope within with this function can be executed. You can only call class functions before the constructor is called.
You can either convert the method into a class method through the static keyword (probably not right in this case), or trigger this method on the creationComplete event.

Flex Hbox Creation complete not invoked

I am trying to create an instance of Hbox like
obj = new HBox();
disp.addElement(obj); // disp object is border container but obj is mx component
this is the way I have been using a display object is adding to a parent container .
But it doesn't invoke the creation complete event.
I have been working on this last few days. Please help me.
<?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" initialize="windowedapplication1_initializeHandler(event)">
<fx:Script>
<![CDATA[
import flash.sampler.NewObjectSample;
import mx.containers.HBox;
import mx.controls.Alert;
import mx.events.FlexEvent;
protected function windowedapplication1_initializeHandler(event:FlexEvent`enter code here`):void
{
var hbo:HBox=new HBox();
hbo.addEventListener(FlexEvent.CREATION_COMPLETE,ff);
b.addElement(hbo);
}
public function ff(e:FlexEvent):void
{
Alert.show("created")
}
]]>`enter code here`
</fx:Script>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:Group id="b">
</s:Group>
</s:WindowedApplication>

Dynamically create button in Flex

I have very basic question about Flex SDK, but I didn't find any resources for my problem and honestly don't know if it even possible to do what I want. So here is my question:
I created Flex project with Adobe Flex Builder 4.6. Then I placed the button (let's say it's id is btn1) in main MXML file. I want to create second button dynamically right from the script part of main MXML file. Specifically I want to create it from button click handler of btn1.
Here is my MXML code (it is the only file in project ):
<?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"
minWidth="955" minHeight="600">
<fx:Script>
<![CDATA[
protected function btn1_clickHandler(event:MouseEvent):void
{
var btn2:Button = new Button();
btn2.label = "Hello";
btn2.x = 50;
btn2.y = 50;
}
]]>
</fx:Script>
<fx:Declarations>
<!-- Non visual elements -->
</fx:Declarations>
<s:Button id="btn1"
x="10" y="10"
label="Кнопка"
click="btn1_clickHandler(event)"/>
</s:Application>
But when I click btn1 - nothing happens. It is possible that I don't understand something in flex programming paradigm - please point it out for me.
You have to add the button to the view using addElement().
var btn2:Button = new Button();
btn2.label = "Hello";
btn2.x = 50;
btn2.y = 50;
addElement(btn2);

Apply effect on window in Flex, Air, AS3

I'm looking to animate a popup window using the effect.
The problem is that the effect is applied to the content of the popup window, not the popup window itself (including the title bar, minimize, maximize buttons etc)
Have a look at the result here..
My code is really simple and logically, should work if it is possible to animate a window.
<?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 comps.MyWin;
[Bindable]
private var _win:MyWin;
protected function openPopup():void
{
_win = new MyWin();
_win.width = 300;
_win.height = 300;
_win.open();
}
protected function animatepopup():void
{
MyEffect.play();
}
]]>
</fx:Script>
<fx:Declarations>
<s:Move id="MyEffect" xFrom="{_win.x}" xTo="{_win.x + 150}" target="{_win}"/>
</fx:Declarations>
<s:layout>
<s:VerticalLayout/>
</s:layout>
<s:Button label="Open" click="openPopup()"/>
<s:Button label="Animate" click="animatepopup()"/>
</s:WindowedApplication>
I think you need to target the object's NativeWindow instance in order to move and resize the object.
Thus, replace _win.myProperty with _win.stage.nativeWindow.myProperty:
<s:Move id="MyEffect" xFrom="{_win.stage.nativeWindow.x}" xTo="{_win.stage.nativeWindow.x + 150}" target="{_win.stage.nativeWindow}"/>
Then, the animation will affect the NativeWindow and not the internals of the window.

Flex custom component, best way to use it

I have not completly understood how custom components work...
Let's assume I have my Main.mxml application
<?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"
xmlns:local="*">
<fx:Script>
<![CDATA[
private var privateStr:String = "Stringa Private";
public var publicStr:String = "Stringa Public";
]]>
</fx:Script>
<local:AddUser height="100" width="500"/>
<s:Label id="lblText" x="120" y="120" width="418" height="115" text="!!!"/>
</s:WindowedApplication>
And the component AddUser.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:VBox
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="initialize_component()">
<fx:Script>
<![CDATA[
public var btnName:String = "Login";
private function initialize_component():void
{
login.label = btnName;
}
private function doLogin():void
{
//some stuff here
}
]]>
</fx:Script>
<s:TextInput id="txtuser" x="96" y="36"/>
<s:TextInput id="txtpass" x="96" y="66"/>
<s:Button id="login" x="96" y="96" width="128" click="doLogin()" />
</mx:VBox>
I would like that on the Button (login) click I get the publicStr/privateStr that are in the main.mxml...
Am I getting everything wrong? how can I use more components like they are all part of the same application and use the same variables/methods?
It seems like you're having issues with the idea of encapsulation. Child components shouldn't know about parent components, and View components shouldn't do real work, only request work from Controller components. In very simple projects, your top level component can contain the controller logic, but many people prefer to keep it separate even in small projects. How to do this is beyond the scope of this answer.
So, how should the parent and child properly communicate? Child components should expose properties that the parent (or Framework, if you're feeling ready to use a dependency injection framework) can populate with only the data the child components need.
Child components request work from the controller by generating events.
So, doLogin() would containe something like
dispatchEvent(new Event('doLogin'));
and the parent component would be listening for this Event. In its handler, you would perform the login. More than likely, your login would be asynchronous, so you'll need another handler to listen for the login data to come back. When the login data comes back, you will then set the properties on the login View based on the return.