Flex 4.5 add Icon to Buttons with AS3

This has changed since the pre-release and I thought I should mention it, because Icons on buttons are awesome.
So if you have set your button with mxml the property icon is right there, however if you want to dynamically create a button with an Icon with AS3 script you will have to declare it like this:


var Btn = new Button();
Btn.setStyle("icon","assets/icon.png");

As you see Icon property is now a style rather than a property.

Enjoy!

Facebooktwittergoogle_pluspinterestlinkedin
linkedin

OSMF Strobe Media Player into Flex Mobile Project (Hero)

I have worked with Strobe media player before and it is a nice player with many features and allows a great level of customization if done properly.

So I’ll explain how to import the Strobe Media player into your Mobile Flex builder Projects successfully and create a dynamic Stream with it.

First Download Strobe Media Player: http://sourceforge.net/projects/smp.adobe/files/ (currently I work with 1.5.1)

Export the contents into a folder.

Create a new Mobile Project on Flash/Flex Builder

Copy from the Strobe Media player folder the “src/player/StrobeMediaPlayback/src” and from the same folder the “/assets” folder

Also copy from “/StrobeMediaPlayback_1.5.1-full/src/framework” the OSMF.swc

and place them on the src folder of your project. Refresh the folder tree from Flash/Flex builder.

Place the OSMF.swc into your lib folder.

Now on to some Configurations:

On the Project/Properties

On Build Path/Library Path add the assets.swc from the assets folder

On Compiler arguments add: -define CONFIG::LOGGING false -define CONFIG::FLASH_10_1 true

 

At last Coding time!

Create a new View component, open a fx:Script tag and enter the following:
[cc lang=”actionscript” width=”480″ height=”500″]
import mx.core.UIComponent;

import spark.components.Button;
import spark.components.Group;

public var $playerInstance:StrobeMediaPlayback;
var grp:Group = new Group();
protected function init(event:Event):void
{

_stage = systemManager.stage;
_stage.align = StageAlign.TOP_LEFT;
_parameters  =
{
src:”http://osmf.org/dev/videos/cathy1_SD.mp4″
, controlBarMode:”docked”
, controlBarAutoHide: true
, autoPlay: true
, playButtonOverlay:true
, showVideoInfoOverlayOnStartUp: true
};

var playerInstance:StrobeMediaPlayback = new StrobeMediaPlayback();
playerInstance.initialize(_parameters, _stage, systemManager.loaderInfo, null);
$playerInstance = playerInstance;

var ui:UIComponent = new UIComponent();
ui.addChild($playerInstance as DisplayObject);

grp.percentWidth = 100;
grp.percentHeight = 100;
addElement(grp);
grp.addElement(ui);

}

private var urlLoader:URLLoader;
private var urlRequest:URLRequest;
private var loader:Loader;
private var _stage:Stage;
private var _parameters:Object;
/* static */
private static const ALLOW_LOAD_BYTES_CODE_EXECUTION:String = “allowLoadBytesCodeExecution”;

function emptyCache()
{
$playerInstance.player.pause();
grp.removeAllElements();
this.destructionPolicy = “auto”;
}
[/cc]
Note!

Make sure to call init() on ViewActivate, or CreationComplete event. Also I recoment to assign on ViewDeactivate the emptyCache() function otherwize the sound of the video might keep on playing…

As a side note here, its better to create components in Actionscript even spark ones, than in mxml at least at this point where Flex Hero framework is still in Beta.

So thats it, now you have Strobe Media Player in your Mobile Application, especially now with 10.2 and stage video that focuses on low CPU consumption its essential for any mobile application with a video player.

!Important: In case you are not viewing a controlBar there is a chance that the default ActionBar is pushing the ControlBar downwards, so if that is the case try a different percentage for grp.percent=90, or disable the ActionBar -> set actionBarVisible = false in the View component properties.

Enjoy!

Facebooktwittergoogle_pluspinterestlinkedin
linkedin