Phonegap/Cordova read images from gallery folder [Tip]

Hello, recently I was working on a project where I wanted to get all the images from the camera but because I wanted to load them in batches I had to find their filenames and store them in a local array for future use.
Since the new cordova file plugin did some changes, there is little information on how to get directories and files.

So here is how it is done on Android (because Apple doesn’t allow access to public folders).

Continue reading

Facebooktwittergoogle_pluspinterestlinkedin
linkedin

Create Animated Menu for Mobile fallback

Recently I read a very interesting article about some css animations. One of my favorites was the one with the menu that looks like a fallback for mobile devices. So I thought to replicate the effect (with some twist) with greensock TimelineMax (you can also use TimelineLite).

Here is what the end effect will look:

See the Pen Menu Animation by Michael Dobekidis (@netgfx) on CodePen.

The article for CSS animations can be found here:

http://www.webdesignerdepot.com/2014/04/3-stunning-css-animation-effects-that-will-captivate-your-users/

Continue reading

Facebooktwittergoogle_pluspinterestlinkedin
linkedin

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

Components Factory from XML/AS3

In this post we will create Video and Image components by using only an XML file and AS3 code. Finally we will place all these Components into a Grid Gallery.

This approach has many benefits as it will render more smoothly in mobile devices and tablets as mxml code is a bit heavy even with the latest Flex Hero build.

This is the XML structure that we will use:

<main>
<items>
<item target=”assets/img.jpg” type=”image”/>
<item target=”http://pseudo01.hddn.com/vod/demo.flowplayervod/flowplayer-960.mp4″ type=”video”/>
<item target=”http://pseudo01.hddn.com/vod/demo.flowplayervod/flowplayer-960.mp4″ type=”video”/>
<item target=”http://pseudo01.hddn.com/vod/demo.flowplayervod/flowplayer-960.mp4″ type=”video”/>
<item target=”http://pseudo01.hddn.com/vod/demo.flowplayervod/flowplayer-960.mp4″ type=”video”/>
<item target=”assets/img.jpg” type=”image”/>
<item target=”assets/img.jpg” type=”image”/>
<item target=”assets/img.jpg” type=”image”/>
</items>
</main>

The MXML Tile component (this could also be AS3 code)

<s:TileGroup id=”grid” x=”0″ y=”0″¬† creationComplete=”buildItemsFromXML()”>
</s:TileGroup>

Now some AS3 code:

we will create the loader function

[cc lang=”actionscript”]

private function buildItemsFromXML()
{
var xmlCall:XMLService = new XMLService();
xmlCall.makeCall(XMLSource);
xmlCall.service.addEventListener(ResultEvent.RESULT,resultResponse);
xmlCall.service.addEventListener(FaultEvent.FAULT,faultResponse);
}

//The magic happens into the success response function

function resultResponse(evt:ResultEvent)
{
itemArray = new Array();
var result = evt.result as XML;
var xml = result.items.elements(“*”);
for each(var item in xml) //Parse all elements of the XML
{
//trace(item.@type+”::”+item.@target);
if(String(item.@type).toLowerCase()==”video”) // Create a VideoDisplayComponent
{
var vid:VideoDisplay = new VideoDisplay();
vid.source = String(item.@target);
vid.autoPlay = false;
vid.scaleMode = “stretch”;
vid.width = itemsWidth;
vid.height = itemsHeight;
vid.verticalCenter = 0;
vid.horizontalCenter = 0;
vid.validateNow();
vid.invalidateDisplayList();
itemArray.push(vid);
}
else if(String(item.@type).toLowerCase()==”image”) //Create a spark Image component
{
var img:Image = new Image();
img.source = String(item.@target);
img.width = itemsWidth;
img.height = itemsHeight;
img.verticalCenter = 0;
img.horizontalCenter = 0;
img.validateNow();
img.invalidateDisplayList();
itemArray.push(img);
}
else if(String(item.@type).toLowerCase()==”videoplayer”)¬† // Create a VideoPlayer component
{
var vidp:VideoPlayer = new VideoPlayer();
vidp.source = String(item.@target);
vidp.autoPlay = false;
vidp.scaleMode = “stretch”;
vidp.width = itemsWidth;
vidp.height = itemsHeight;
vidp.verticalCenter = 0;
vidp.horizontalCenter = 0;
vidp.validateNow();
vidp.invalidateDisplayList();
itemArray.push(vidp);
}
}

placeItems(); // The next function that will place the items into the grid
}

[/cc]

Now we place all elements into the Tile Gallery

[cc lang=”actionscript”]
function placeItems()
{
//add all elements into the grid,
for each(var item in itemArray)
{
var grp = new Group(); //We prefer the Group component because it makes it easy to position elements inside
grp.addElement(item);
grid.addElement(grp);
grid.validateNow();
grid.invalidateDisplayList();
}
}
[/cc]
 

And we are done! Now you have your own components factory build only by XML and AS3 code.

View an Example Here: http://www.netgfx.com/GridGallery/

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