AS3 Breeze

Coolest thing in Flash builder is that you can create BlackBerry, Android and iOS apps but less coolest thing is that you have very limited components in Mobile project to use. In Desktop projects you have lots of cool components which you can use in your project, but lack of some of these in mobile project makes it not so attractive.

So, how do you get for ex. ProgressBar to a MobileProject (if you’re lazy to create one).

1. First, create a new Flex Library Project
    

2. fill upp fields, its not so important what you fill with but you need to import this library later. Also, choose SDK which has the component(s) you want to custom import.
   The important part here is to use right settings. Under Configuration you need to target Generic Library, since its there ProgressBar is located (remember, desktop air… and NOT Mobile since it is missing ProgressBar ). Also, use Flex 4.1 SDK and Include AIR libraries.
    

3. In your new library, right-click and add a new package to the source:
    

   And give a name:

    

   

4. Now you should see your package in src folder, right-click on it and add a new ActioScript-Class and name it:
   
    

   

5. Allmost done with custom library… Now that you have created Class, you need there, to import these components which you want to use in your mobile project. Note, you need sometimes  to import much more in this class than you think. ProgressBar need skins as well, otherwise it will complain in your mobile project.
6. Sometimes its not enough to import, you actually need to create instances in your class, see code below. Note wont use these variables in your project, instead you just initiate them so they would be accessible:

   package com.as3breeze.air.flexpackages
   {
   	import mx.controls.ProgressBar;
   
   	import mx.skins.halo.ProgressBarSkin;
   	import mx.skins.halo.ProgressIndeterminateSkin;
   	import mx.skins.halo.ProgressMaskSkin;
   	import mx.skins.halo.ProgressTrackSkin;
   
   	import mx.skins.spark.ProgressBarSkin;
   	import mx.skins.spark.ProgressBarTrackSkin;
   	import mx.skins.spark.ProgressIndeterminateSkin;
   	import mx.skins.spark.ProgressMaskSkin;
   
   	public class CustomImport
   	{
   		// Create ProgressBar otherwise it wont be accessible
   		private var _progressBar:ProgressBar = new ProgressBar();
   
   		// Create instances with Halo skin
   		private var _haloProgressBarSkin:mx.skins.halo.ProgressBarSkin 							= new mx.skins.halo.ProgressBarSkin()
   		private var _haloProgressIndeterminateSkin:mx.skins.halo.ProgressIndeterminateSkin 		= new mx.skins.halo.ProgressIndeterminateSkin();
   		private var _haloProgressMaskSkin:mx.skins.halo.ProgressMaskSkin 						= new mx.skins.halo.ProgressMaskSkin();
   		private var _haloProgressTrackSkin:mx.skins.halo.ProgressTrackSkin 						= new mx.skins.halo.ProgressTrackSkin();
   
   		// Create instances with Spark skin
   		private var _sparkProgressBarSkin:mx.skins.spark.ProgressBarSkin 						= new mx.skins.spark.ProgressBarSkin();
   		private var _sparkProgressBarTrackSkin:mx.skins.spark.ProgressBarTrackSkin				= new mx.skins.spark.ProgressBarTrackSkin();
   		private var _sparkProgressIndeterminateSkin:mx.skins.spark.ProgressIndeterminateSkin	= new mx.skins.spark.ProgressIndeterminateSkin();
   		private var _sparkProgressMaskSkin:mx.skins.spark.ProgressMaskSkin						= new mx.skins.spark.ProgressMaskSkin();
   
   		public function CustomImport()
   		{
   		}
   	}
   }

7. If you look closely on each import line, you’ll see that Halo and Spark are a bit different, in Halo there is no such skin for ProgressBarTrackSkin. So safest is to import both. These private var are just to initiate instances and not for use, as you initiate these, they will be automatically available in you project.
8. So next step is  that you save this Library project. If you look in bin folder under Library project, you will see a SWC file, it is there all goods are.
9. Now you need to create your Mobile Project do like you always used to do.
   
   
10. Here is the fun part, right-click on your Flex Mobile Project and open up properties, you need to navigate to Flex Build Path and click on Add Project
     

    When you do that, you should see your Flex Library project, which you of course need to Select and hit OK-button

    
    

11. Now you just need to accept these changes and test out your preloader:

Its all there is

Flash on <3!!!