Category Archives: Hybrid Applications

Tips and tricks for Cordova, Phonegap and hybrid applications development.

Using createjs WebAudio with Phonegap (Cordova)

Hybrid Applications, , , , ,

One of the things I hate about Phonegap (Cordova) is the audio support. Every time I worked on a project that required heavy audio usage not a single plugin worked fine

Cordova Media plugin is good for recording audio but when you try to play multiple audio files it leaks into memory and the OS stops your app. It also tends to break after using the recording feature. I’ve also tried the Native Audio plugin and although it’s much better it has its issues with features not working.

The createjs team released a new soundjs plugin called CordovaAudioPlugin. It did work for some time but because it is using Cordova Media it had the same issues. With newer version of the Cordova Media plugin it just causes your app to crash (04.2016, soundjs version 0.6.2).

Honestly, with the WebAudio browser support, I don’t think we need plugins for playing audio. WebAudio does the job nicely for mobile and desktop.
Continue reading Using createjs WebAudio with Phonegap (Cordova) →

Disable bounce and pull effects on Flex Scroller component

Hybrid Applications, , ,

Today I stumbled on a problem with Flex Spark Scroller and List components while developing an AIR mobile application.

Scroller component has a nice bounce effect when you pull it and it works the same way as you’ll expect the scrolling to work on iPhone (read here).

You don’t always need this behavior, and for some reason you can’t disable this effect. Another problem is that all the possible properties and methods on the Scroller class, which might allow you to change this functionality are eighter private or protected.

The only possible way to go is extending the Scroller class and disabling this effect manually in your class.

Here is a class I’ve created which does exactly this – com.avladov.components.Scroller

In order to disable the viewport dimensions overshooting just set overhsootEnabled value to false when you use the component.

Bouncing is diabled through overriding of performDrag and performThrow methods and resetting required values when needed.

If you have a better idea, feel free to share it 😉

Using AIR 3.3 SDK with Flash Builder 4.6

Hybrid Applications, , ,

Just a few steps showing you how to setup AIR 3.3 in Flash Builder 4.6 on Windows:

  1. Download AIR 3.3 SDK – air-sdk-download
  2. Navigate to your SDKs folder (under Flash Builder 4.6 installation directory).

    • For 64x Windows: C:Program Files (x86)AdobeAdobe Flash Builder 4.6sdks
    • For 32x Windows: C:Program FilesAdobeAdobe Flash Builder 4.6sdks
  3. Clone SDK 4.6 folder and rename it (Example: 4.6.0_AIR_3.3)
  4. Extract AIR SDK zip inside the new folder and overwrite all matches.
  5. Download Playerglobal SWC for Flash Player 11.3
  6. Go to /frameworks/libs/player/ inside your new SDK folder, create a new folder and name it “11.3” and place the SWC file from the previous step there. Don’t forget to rename it to playerglobal.swc
  7. Go back to 4.6.0_AIR_3.3 folder and open flex-sdk-description.xml
    file. Change <name> value to something more meaningful and different from the current one. I preffer using Flex 4.6 (AIR 3.3)
  8. Open Flash Builder, go to Window->Preferences->Flash Builder->Installed Flex SDKs and add the new folder.

If you want to move an old project from AIR 3.1 or 3.2 to AIR 3.3 open its application.xml file and change the namespace at the top to match AIR 3.3. It should look like this: 

<application xmlns="http://ns.adobe.com/air/application/3.3">

For every project you create and uses AIR 3.3 don’t forget to add -swf-version=16 to the compile arguments right after -locale en_US


External links:

Creating an image only mobile button skins for Flex 4 (AIR Mobile)

Hybrid Applications, ,

One of the main differences when creating mobile Flex AIR apps from normal Flex Apps is that it’s better to use ActionScript only skins. With that in mind I’ve created a simple skin for image buttons.

Why this skin is better than using the default spark.skins.mobile.ButtonSkin? The answer is quite simple – performance. Since this is going to be an image only skin, we don’t need label element and all the other functionality the default mobile button skin has.

In order to use the class you just create a new skin extending the ImageButtonSkin. The properties you have to set inside tour constructor are upBorderSkin, downBorderSkin, measuredDefaultWidth and measuredDefaultHeight.

For the border skin properties you can use – images, SWF symbols, FGX files

Usage example:

public class ExampleButtonSkin extends ImageButtonSkin {

    [Embed(source="/assets/buttons/Example_up.png")]
    private var up:Class;

    [Embed(source="/assets/buttons/Example_down.png")]
    private var down:Class;
    
    public function ExampleButtonSkin ButtonSkin() 
    {
        super();
        upBorderSkin = up;
        downBorderSkin = down;
        measuredDefaultWidth = 230;
        measuredDefaultHeight = 80;
    }
}

If you want to use FXG border skins then you don’t need up and down variabled. You can set the FXG classes on the upBorderSkin and downBorderSkin directly.
Continue reading Creating an image only mobile button skins for Flex 4 (AIR Mobile) →