Quickguide: Using AIR 2.6 in FDT 4

So finally I got some free time to write this post about using the new Adobe AIR 2.6 in your FDT 4 environment, so let’s get to it:

As you know Adobe recently released the Adobe 2.6 runtime and SDK with significant improvements including iOS support bringing feature parity for Android and iOS platforms, more info on Adobe AIR team’s blog.

Some of the new features are:

AIR for iOS

  • Updated AIR for iOS support with improved performance. Developers can take advantage of new features in iOS 4 like multitasking, Retina display for higher screen resolutions, and front and back camera support. Developers can now build application that capture audio with the microphone and take advantage of the same graphics hardware method used in AIR for Android using OpenGL ES2 for fast graphics.
  • Packager for iPhone (PFI) is now replaced with and the functionality integrated with AIR Developer Tool (ADT) a comand line tool for compiling application in the AIR SDK. ADT can now be used to package AIR files, native desktop installers, AIR applications for Android and iOS.

AIR for Android

  • Submit apps to be included in the Amazon Appstore for Android when the store launches.  Companies now have an additional distribution option with one of the largest online shopping destinations on the web.
  • USB debugging was added as an additional debugging option to WiFi.

So what do You need to start testing this new capabilities in AIR SDK 2.6, if You’re part of Adobe’s Flex SDK and Flash Builder private pre-release program You can start testing this right away. If You like to start working with the Adobe AIR 2.6 SDK inside of FDT4 the following guide should be a good start.

1.-Download the SDKs.

Download The Adobe AIR SDK 2.6 and Flex 4.1 latest stable release.

2.- Merge the SDKs

To start using the AIR 2.6 specific features You need to merge the AIR SDK with your flex sdk to do that I created a new copy of my flex SDK renamed it to “flex_sdk_4.1.0.16076_AIR_2.6” and then copy the entire contents of the AIR SDK in there it will ask You to replace files and folders  just click ok and move on to next step.

3.- Adding the SDK to FDT


Fire up Your copy of FDT then go to “Preferences->FDT->Installed SDKs “ click the Add button located in the top right of the panel this will open a new panel asking for the “Path:”  select the folder path to Your newly created SDK, mine is located in “C:\SDKs\flex_sdk_4.1.0.16076_AIR_2.6” give it a name I called mine: “Flex 4.1 AIR 2.6 SDK” hit Ok and  now You’re ready to build a project using AIR 2.6 features, on to next step.

4.- Create a project.

Create a new Flash project by going to “File->New->New Flash Project” give Your project a name, set the project type to Desktop and in the options section of the window change the Flex version to  Flex 4 AIR click the “next” button it will take You to the SDK configuration panel, select the one You created in the last step in my case it was “Flex 4.1 AIR 2.6 SDK” then click finish.

5.- Change the compiler settings.


Right click the project You just created select Properties–>FDT Compiler and change the target player from “-target-player={playerVersion}” to “-target-player={11}” this will let You compile and debug Your project without any errors. Remember to set the version of  your application to “2.6” in Your descriptor file.

 

I will make a full example on how to deploy and debug both to Android and iOS using an ANT file in another post, until then, happy coding.

 

 

 

 

 

 

Adobe Wallaby Prerelease 1 Example

Yesterday I posted a video of  how Adobe’s new Flash to HTML5 conversion tool “Wallaby” works. I was so excited by this new black magic stuff that I forgot to put up an example(big duhhh), so thanks to Antonio Holguin‘s comment in my previous post here’s the Wallaby generated HTML5 I showed in the video I made small modifications to the .html and .css files to add the Flash Animation so You can compare the Flash and the HTML5 versions.

Click on the image to see the example:

Here is the HTML file Wallaby generated:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
<!-- Created with Adobe(R) technology -->
 
    <script src="jquery-1.4.2.js" type="text/javascript"><!--mce:0--></script>
    <script src="index.js" type="text/javascript"><!--mce:1--></script>
    <script src="swfobject.js" type="text/javascript"><!--mce:2--></script>
	<script type="text/javascript"><!--mce:3--></script>
 
 
 
<div class="mainDiv">
 
 
<div class="myFontHTML5">
 
<a>Wallaby HTML5 Generated Animation</a>
</div>
 
 
 
<div class="wlby_movie">
 
 
<div class="wlby_1">
        <!-- Start of symbol: daveflota -->
 
 
<div class="wlby_2">
          <!-- Start of symbol: Tween 1 -->
          <img class="wlby_3" src="index_assets/svgblock_0.svg" alt="" />
 
 
<div class="wlby_4">
            <!-- Start of symbol: sombrero -->
 
 
<div class="wlby_5">
              <!-- Start of symbol: Tween 7 -->
              <img class="wlby_6" src="index_assets/svgblock_1.svg" alt="" />
              <!-- End of symbol: Tween 7 --></div>
 
            <!-- End of symbol: sombrero -->
 
</div>
 
 
 
<div class="wlby_7">
            <!-- Start of symbol: ojitosdave2 -->
 
 
<div class="wlby_8 wlby_sprite">
              <img class="wlby_17 wlby_fs" src="index_assets/svgblock_2.svg" alt="" />
              <img class="wlby_18 wlby_fs" src="index_assets/svgblock_3.svg" alt="" />
              <img class="wlby_18 wlby_fs" src="index_assets/svgblock_3.svg" alt="" />
              <img class="wlby_19 wlby_fs" src="index_assets/svgblock_3.svg" alt="" />
              <img class="wlby_20 wlby_fs" src="index_assets/svgblock_4.svg" alt="" />
              <img class="wlby_21 wlby_fs" src="index_assets/svgblock_5.svg" alt="" />
              <img class="wlby_22 wlby_fs" src="index_assets/svgblock_4.svg" alt="" />
              <img class="wlby_23" src="index_assets/svgblock_2.svg" alt="" /></div>
 
            <!-- End of symbol: ojitosdave2 -->
 
</div>
 
          <!-- End of symbol: Tween 1 -->
 
</div>
 
        <!-- End of symbol: daveflota -->
 
</div>
 
 
</div>
 
 
 
<div class="myFontFlash">
 
<a>Flash CS5 Original Animation</a>
</div>
 
 
 
<div class="myFlashContent">
 
 
<div id="flashContent">
		<a href="http://www.adobe.com/go/getflashplayer" target="_blank">
	        <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
	    </a></div>
 
 
</div>
 
 
 
<div class="animCredits">
 
 
<a>Character design and animation by:</a> <a href="http://www.cecymeade.com"> Cecy Meade</a>
 
 
</div>
 
 
</div>
 
 

And the CSS file Wallaby generated:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
div.wlby_movie
{
	overflow: hidden;
	position: absolute;
	left: 0px;
	top: 40px;
	width: 550px;
	height: 400px;
	margin-left:560px;
}
.wlby_text p { padding: 0; margin: 0; }
 
a.wlby_classic-link { color: inherit; text-decoration: none; }
a.wlby_classic-link:link { color: inherit; text-decoration: none; }
a.wlby_classic-link:hover { color: inherit; text-decoration: none; }
a.wlby_classic-link:active { color: inherit; text-decoration: none; }
a.wlby_classic-link:visited { color: inherit; text-decoration: none; }
 
a.wlby_tlf-link { color: inherit; text-decoration: none; }
a.wlby_tlf-link:link { color: inherit; text-decoration: none; }
a.wlby_tlf-link:hover { color: inherit; text-decoration: none; }
a.wlby_tlf-link:active { color: inherit; text-decoration: none; }
a.wlby_tlf-link:visited { color: inherit; text-decoration: none; }
 
.wlby_button &gt; * { visibility: hidden; }
.wlby_button &gt; .wlby_button_normal { visibility: visible; }
.wlby_button:hover &gt; .wlby_button_normal { visibility: hidden; }
.wlby_button:hover &gt; .wlby_button_hover { visibility: visible; }
.wlby_button:active &gt; .wlby_button_normal { visibility: hidden; }
.wlby_button:active &gt; .wlby_button_hover { visibility: hidden; }
.wlby_button:active &gt; .wlby_button_active { visibility: visible; }
 
@-webkit-keyframes wlby_frameset-animation {
	from { }
	to { }
}
 
.wlby_fs, .wlby_graphic 
{
	-webkit-animation-name: wlby_frameset-animation;
}
 
.wlby_graphic 
{
	-webkit-animation-duration: 1s;
}
 
.wlby_masked 
{
	height: inherit;
	position: inherit;
	width: inherit;
}
 
.wlby_sprite 
{
	-webkit-animation-name: wlby_frameset-animation;
	-webkit-animation-iteration-count: infinite;
}
 
@-webkit-keyframes wlby_KF_5 {
from {
	-webkit-transform: matrix(1, 0, 0, 1, 0, 0);
	opacity: 1;
}
46.66% {
	-webkit-transform: matrix(1, 0, 0, 1, 0, -10);
	opacity: 1;
}
96.66% {
	-webkit-transform: matrix(1, 0, 0, 1, 0, 0);
	opacity: 1;
}
96.67%, to {
	-webkit-transform: matrix(1, 0, 0, 1, 0, 0);
}
}
@-webkit-keyframes wlby_KF_9 {
from {
	-webkit-transform: matrix(1, 0, 0, 1, 0, 0);
	opacity: 1;
}
46.66% {
	-webkit-transform: matrix(1, 0, 0, 1, 0, 5);
	opacity: 1;
}
96.66% {
	-webkit-transform: matrix(1, 0, 0, 1, 0, 0);
	opacity: 1;
}
96.67%, to {
	-webkit-transform: matrix(1, 0, 0, 1, 0, 0);
}
}
.wlby_3
{
	position: absolute;
	-webkit-transform: matrix(1, 0, 0, 1, -102.635, -127.95);
}
 
.wlby_23
{
	-webkit-animation-duration: 0.0322581s;
	display: none;
	position: absolute;
	-webkit-transform: matrix(1, 0, 0, 1, -76.161, -31.85);
}
 
.wlby_20
{
	-webkit-animation-duration: 0.129032s;
	display: none;
	position: absolute;
	-webkit-transform: matrix(1, 0, 0, 1, -76.161, -31.85);
}
 
.wlby_17
{
	-webkit-animation-duration: 0.612903s;
	position: absolute;
	-webkit-transform: matrix(1, 0, 0, 1, -76.161, -31.85);
}
 
.wlby_22
{
	-webkit-animation-duration: 1.64516s;
	display: none;
	position: absolute;
	-webkit-transform: matrix(1, 0, 0, 1, -76.161, -31.85);
}
 
.wlby_19
{
	-webkit-animation-duration: 0.0322581s;
	display: none;
	position: absolute;
	-webkit-transform: matrix(1, 0, 0, 1, -75.875, -7.3);
}
 
.wlby_18
{
	-webkit-animation-duration: 0.16129s;
	display: none;
	position: absolute;
	-webkit-transform: matrix(1, 0, 0, 1, -75.875, -7.3);
}
 
.wlby_21
{
	-webkit-animation-duration: 0.290323s;
	display: none;
	position: absolute;
	-webkit-transform: matrix(1, 0, 0, 1, -75.875, -7.3);
}
 
.wlby_6
{
	position: absolute;
	-webkit-transform: matrix(1, 0, 0, 1, -29.813, -20.309);
}
 
.wlby_8
{
	-webkit-animation-duration: 3.06452s;
}
 
.wlby_2
{
	-webkit-animation-duration: 0.967742s;
	-webkit-animation-name: wlby_KF_5;
	-webkit-animation-iteration-count: infinite;
	-webkit-transform-origin: 0px 0px;
	-webkit-animation-timing-function: linear;
}
 
.wlby_5
{
	-webkit-animation-duration: 0.967742s;
	-webkit-animation-name: wlby_KF_9;
	-webkit-animation-iteration-count: infinite;
	-webkit-transform-origin: 0px 0px;
	-webkit-animation-timing-function: linear;
}
 
.wlby_1
{
	-webkit-animation-duration: 0.0322581s;
	-webkit-transform: matrix(1, 0, 0, 1, 275.45, 200.45);
	-webkit-transform-origin: 0px 0px;
}
 
.wlby_7
{
	position: absolute;
	-webkit-transform:matrix(1,0,0,1,-0.4,14.9);
}
 
.wlby_4
{
	position: absolute;
	-webkit-transform:matrix(1,0,0,1,48.65,-137.45);
}
 
div.mainDiv{
	position: relative;
	width: 1150px;
	height: 456px;
}
 
.myFontFlash {
	position: absolute;
	font-family: Verdana, Geneva, sans-serif;
	font-weight: bold;
	font-size: 16px;
	color:#066;
	margin-top:0px;
}
 
.myFontHTML5 {
	position: absolute;
	font-family: Verdana, Geneva, sans-serif;
	font-weight: bold;
	font-size: 16px;
	color:#066;
	margin-left:560px;
	margin-top:0px;
}
.myFlashContent {
	position: absolute;
	width:550px; 
	height:400px; 		 
	margin-top: 40px;	
}
.animCredits {
	position: absolute;
	font-family: Verdana, Geneva, sans-serif;
	margin-top:440px;
	font-size: 12px;
	color:#066;
}

Flash Animation to HTML5 with Adobe’s Wallaby Prerelease 1

Adobe Labs just released Wallaby (Prerelease 1) a tool that will let You convert Flash Animations to HTML5 (http://labs.adobe.com/technologies/wallaby/). Here’s a screen capture of  Wallaby converting from a Flash CS5 character(it’s supposed to be Me …. boy I’m handsome :P) animation to HTML5 the illustration and animation was done by @cecymeade for a game we are putting up together.

Adobe Labs excerpt:
“Wallaby” is the codename for an experimental technology that converts the artwork and animation contained in Adobe® Flash® Professional (FLA) files into HTML. This allows you to reuse and extend the reach of your content to devices that do not support the Flash runtimes. Once these files are converted to HTML, you can edit them with an HTML editing tool, such asAdobe Dreamweaver®, or by hand if desired. You can view the output in one of the supported browsers or on an iOS device.

Targeting Flash Player 11(Incubator Build) in FDT 4.2.

I know this might be old news by now but this post will help as a reminder on how to get the new Flash Player 11 (Incubator Build) working in Your FDT 4.2 installation. Ok let’s get started.

1.- Download the files.

2.- Update the playerglobal.swc


First thing You need to do is replace the playerglobal.swc included in the Flex SDK because it isn’t Flash Player 11 ready.

  • Back up the playerglobal.swc  included in  your Flex SDK location “/frameworks/libs/player/10.2 in the Flex SDK”.
  • Copy the flashplayer_inc_playerglobal_022711.swc to the location mentioned above and rename it to playerglobal.swc.

3.- Setting up FDT.

Setting up the FDT IDE (I’m using FDT 4.20.1272  installed on top Eclipse Indigo Version: 3.7.0) for working with the Flex SDK is easy just follow the steps below.

 

  • Add the Flex 4.5 SDK You just downloaded to the list of installed SDKs via: Preferences > FDT > Installed SDKs and press Add.
  • Rename  Your SDK to something significant ( Believe Me you can get lost when using several SDKs) I named mine Flex 4.5 Flash Player (Incubator).
  • The next step is creating a new project go to File > New > New Flash Project in the popup window select new AS3 Project and give your project a name.
  • Click next and select the Flex SDK You just added.
  • You will notice that You get a warning on top of that window saying:  “Some classpath libraries are missing …” that’s because the latest Flex SDK nightly builds does not include the flex.swc, on to next step to get rid of that warning.
  • Click next and You’ll be on the SK Library tab select the flex.swc (marked with an X) and click the Remove SWCs button that will remove any warnings about the missing .swc and since we are building an AS3 project we wont be using the flex.swc anyway.
  • The last step is clicking the finish button then go to the project You just created right click and select Properties ( Alt + Enter for shortcuts lovers like myself)  this will open your project’s Properties window  select FDT Compiler from the list and add the flag -swf-version=13 to your compiler arguments..
  • Hit the OK button and You’re set to go now You’re ready to push the Flash Player 11 to it’s limits abusing of it’s new “Molehill” 3D APIs.Happy Coding.

Away3D 4.0 “Broomstick” + JigLibFlash on “Molehill” example: CubeWall

CubeWall
So here’s a quick example (extending one of the examples of Away3D) using the latest versions of Away3D 4.0 Alpha (Broomstick) and JigLibFlash using the new APIs included in FlashPlayer 11 “Molehill”. In order to see the example You’ll need the FlashPlayer 11 Incubator installed in your browser. There is a lot of new stuff to test on “Molehill” and it’s new features but wanted to share this, once I get some more free time I’ll write a tutorial about it.

Instructions: Click the image to open the example, use Your arrow keys to make the pink box collide with the CubeWall (once the pink box leaves the scene another one will drop above the wall) use the spacebar to lift the pink cube.

To find more information visit one of the following links:
Away3D 4.0 Alpha release – “Broomstick”

3D Physics Engine Jiglibflash update for flash 11 incubator build with Away3D 4.0 Broomstick support

Flash Player Incubator

 


Flash Player Incubator “Molehill” 3D APIs for Adobe Flash Player and Adobe AIR

So this has been quite a Sunday  full of Adobe surprises and news, this morning Lee Brimelow and Thibault Imbert gave a keynote at Flash Gaming Summit and one of the big news was the announcement of the new Flash Player 11 “Molehill”  APIs is now available at Adobe Labs.

So what is “Molehill”?
Molehill is the code name for a new set of low-level, GPU-accelerated 3D APIs that will enable advanced 3D experiences across screens through the Adobe® Flash® Platform runtimes. These new low-level APIs will provide advanced 3D and 3D engine developers the flexibility to leverage GPU hardware acceleration for significant performance gains.

How to target the “Molehill” player and start building some cool 3D stuff?
First of all You’ll need to download the Adobe AIR and Adobe Flash Player Incubator from Adobe Labs page in order to see and play with “Molehill” demos like the “Zombie Tycoon” by Frima Studios:

If You want to author and target Molehill here is an excerpt from Adobe’s Authoring for Flash Player 11,0,0,58 Incubator :

Download the documentation for Flash Player 11,0,0,58 by clicking here.

Download the playerglobal.swc for Flash Player 11,0,0,58 by clicking here.

To use the new Flash Player 11,0,0,58, you will need to target SWF version 13 by passing in an extra compiler argument to the Flex compiler: -swf-version=13. Directions are below.

If you are using the Adobe Flex SDK:

  1. Download build 19786 from the Hero Stable Builds table. (Note: This is an in-development build of Flex SDK “Hero” and may contains bugs and incomplete features).
  2. Install the build in your development environment
    1. In Flash Builder, create a new ActionScript project: File -> New -> ActionScript project.
    2. Open the project Properties panel (right-click and chose ‘Properties’). Select ‘ActionScript Compiler’ from the list on the left.
    3. Use the ‘Configure Flex SDK’s’ option in the upper right hand corner to point the project to Flex build 19786. Click ok.
  3. Configure your project to target SWF version 13
    1. Open the project Properties panel (right-click and chose ‘Properties’). Select ‘ActionScript Compiler’ from the list on the left.
    2. Add to the ‘Additional compiler arguments’ input: -swf-version=13. This ensures the outputted SWF targets SWF version 13. If you compile on the command-line and not in Flash Builder, you need to add the same compiler argument.
    3. Ensure you have installed the Flash Player 11,0,0,58 Incubator nuild in your browser.

If you are using Adobe Flash Professional:

You can create your own profile to publish to a specific SWF version in Adobe Flash CS5. See this package, it contains a sample FlashPlayer11.xml file file you need to copy into the right place.

  1. FlashPlayer11.xml goes into: Adobe Flash CS5\Common\Configuration\Players
  2. Place the playerglobal.swc related to the Incubator build you are working with into: Adobe Flash CS5\Common\Configuration\ActionScript 3.0\FP11
  3. Restart Flash Professional after that and then select ’Flash Player 11’ in the publish settings. It will publish to a SWF13 file.

Important: Always remember to set wmode=direct in your HTML parameters. Software fallback will be used if you do not use wmode=direct.

Can I still use my Flash 3D Framework?

As announced in Adobe MAX 2010 all the mayor Flash 3D  frameworks (Alternativa3D, Away3d, CopperCube, Flare3D, Minko, Sophie3D or Yogurt3D.) have been working alongside with Adobe to bring support for Flash Player’s new 3D APIs being Away3D  the first one to release a “Molehill” supported version.

Away3D 4.0 Alpha (codename “Broomstick”).

Shortly after Adobe announcement Away3D’s team was released a new version(4.0 Alpha) of their framework codenamed “Broomstick” and let me say it runs great I’m really looking to have some free time to test and post about the new features in Away3D but for the time being You can check some of the examples and tests made by the team here.

To start playing with “Broomstick” You need  to download this version from their googlecode repository or their downloads page.

Adobe Flash and Unity3D


Unity3D’s team has a blog post about Flash Player plugin support here is an excerpt:

“In the past few months, our engineers have been investigating the possibility of adding a Flash Player exporting option to Unity. That investigation has gone very well, and we’re moving into full production.” read the full article here.

So this are some of the things announced at the Flash Gaming Summit if hurry up You can still catch the live stream.

Later 😀

RobotLegs – Flash CS5 Project Template for FDT4

Projects Templates are an extremely useful tool introduced in the version 4 of PowerFlasher’s FDT it lets You write and include Your own project templates  and are available for you to use when creating a new project in: File>New>New Flash Project.

One of the frameworks that I used the most in 2010 ( expect upcoming post on the 10 frameworks that I used the most last year) is Robotlegs created by Shaun Smith a pure AS3 micro-architecture framework that  is pretty handy when You work in large projects, so the project template that I made is a pretty basic setup of Robotlegs It has a loader class and loader. fla and the MainApplication and main.fla, that fla is where all the Robotlegs magic happens it has the main context 3 views and its mediators 3 commands and an event. This template can be used as a sandbox for starting a small Flash CS5 based Robotlegs project.

How to install the project templates:

In mac open up the Finder and navigate to your home folder. After you installed FDT4 you’ll find a folder called “FDT” there. Navigate to FDT/projectTemplates/Web and copy the RobotlegsFlashCS5 folder in there and Youre good to go.

In Windows 7 go to C:\Users\User\AppData\Roaming\FDT\projectTemplates\Web copy the RobotlegsFlashCS5 folder in there and You’re all set.

Hope it helps the code is not commented I’ll try to push a commented version to  github as soon as i have the chance.

Ups almost forgot You can download the ProjectTemplate at my FDT-Resources fork in github.

Matan Uberstein´s Auto Flash Class Panel

The Auto Flash Class Panel is an extension for Flash CS5  that will let You get rid of the tedious work of naming Your library items and believe Me when you working with small projects this is something that you can do by yourself without much effort but as projects get bigger and the amount of things you have to give a class name for working with them in ActionScript the task can really become tedious and cumbersome. Enter Matan Uberstein’s Auto Flash Class Panel.

The panel will let You select and give class names to your library items with a few clicks (literally), for installation You must have the Adobe Extencion Manager if you don’t have it already installed You can download it from here.  To start using the Auto Flash Class Panel you can get the version 2 here.

Once You have it installed fire up Flash and open the panel in Window>Other Panels>AutoFlashClassPanel the the panel is packed with a rich interface split into two sections (see Fig. 1), Selector and Classer. The Selector section automatically selects all the library items that match your criteria. Choose from MovieClips, Bitmaps, Sounds, Fonts or Buttons. Once you are happy with your selection of library items, you simply use the Classer section to automatically insert class, base class and tick the ‘export’ checkbox.

Fig. 1

One of the cool features is that the Class and package names are generated form your library folder structure so to get  your classes in the proper packages all you need to do is to sort your library items in those folders e.g. “com.swfgeek.robotlegs.views.MainAnimation” ( see Fig. 2).

Fig. 2

With one simple click your library is ready for export. Saves you the effort of right clicking on the library item going to properties, ticking the ‘export’ checkbox and typing in the package/class name. In the Classer section you can adjust the base class of your items( see Fig. 3)

Fig. 3

The Auto Flash Class Panel is also fully customizable, to modify how it works or add your custom base classes to the menu click the settings button and customize how you want the panel to work and function(see fig. 4).

Fig. 4

The panel was built with Robotlegs, AS3Signals, MinimalComps and FDT4. I’ve been using it  in my diary projects workflow for over a week now and it’s a really time saver, check out Matan’s post about it and be sure not to miss his upcoming presentation on Asset Loader this  17th of December.

Here’s a video by Matan on how to use the panel.

Don’t be shy and give it a try  You won’t regret it 😉

Using Flash Player 10.2 in FDT4

In this post I will tell You how you can start playing with the new features of the Flash Player 10.2 Beta in FDT 4. I started using “Flash Builder Burrito” for the examples that I’ve been posting but I really missed the quick code hints and mostly the auto-import features of FDT4 that let me explore the new SDK without leaving my code to read the documentation, that said let’s move on.

Figure 1.

1.- The first thing You need to do is go to the Hero Stable Builds table and download the Flex SDK  build 18623 from there.

I usually have all my SDKs located in the same place in my disk “C:\SDKs” but You can put it on the desktop for easy location, once you have downloaded it decompress the zip in the location you chose. (Note: These builds do not contain any Hero mobile features or runtimes but it appears that the flex.swc that should be located in \frameworks\libs  is also missing you’ll need to include this from a previous build or FDT will output errors when adding the SDK to your project ).

Figure 2.

2.- Open FDT4 and go to >Window>Preferences and open the FDT tab and select Installed SDKs from that menu as shown in figure 3.

Figure 3.

Click on the Add  button and the SDK definition Panel will pop up select the directory where You have downloaded the Flex Hero SDK, if you have a previous Flex Hero SDK installed be sure to give a different name I called mine Flex Hero ( Flash Player 10.2  Beta).

Figure 4.

3.- Go to >File>New>New Flash Project select Empty AS3 project give your project a name and click the next button that will take You to the Flash Project Settings  in the SDK Configuration select your newly added SDK( see figure 5.) you will see that the Player Version changes to 10.2, click finish.

Figure 5.

4.- Right click in the project You just created select properties, go to the FDT Compiler menu and change the -target-player from “playerVersion” to “11”  this will let you test your projects without getting any version errors.

EDIT:   In this step You don’t need to change the “-target-player” argument leave it as is it will use the 10.2 version but you need to add the “-swf-version=11” argument, that way it won’t show errors when compiling.( Thanks to John Olson for pointing it out).

Figure 6.

5.- That’s it now You can test and compile the features including in the beta of  the Flash Player 10.2 and get  all the coding comfort of FDT4.

Figure 7.

Flash Player 10.2 Beta (Native bitmap-based cursors)

One of the new features of the Adobe Flash Player 10.2 is the Native bitmap-based cursors this will let You get rid of the Mouse.hide(), onMouseMove() handler  or starDrag() to display a custom cursor in your Flash projects. You can now directly assign your own custom cursors. So here’s a sample extending Thibault Imbert’s

1.- First we embed the assets( the images that we will be using as our custom cursors) and  an int var that we will be using to switch our cursors.

[Embed (source="/assets/126.gif" )]
public static const NativeCursor:Class;
[Embed (source="/assets/cat1.png" )]
public static const CursorFrame1:Class;
[Embed (source="/assets/cat2.png" )]
public static const CursorFrame2:Class;
[Embed (source="/assets/cat3.png" )]
public static const CursorFrame3:Class;
[Embed (source="/assets/cat4.png" )]
public static const CursorFrame4:Class;
[Embed (source="/assets/cat5.png" )]
public static const CursorFrame5:Class
protected var _state : int = 0;

2.- Then on the class constructor we add the click mouse event listener so on each user click we toggle the cursor.

public function NativeCursorTest() {
  stage.addEventListener(MouseEvent.CLICK, _onClick);
  toggle();
}

3.- The methods that create our cursors this is exactly the same code that Thibault’s sample just divided in two methods so You can see the animated and static cursor working.

private function createNativeCursor() : void {
   // we create a MouseCursorData object
   var cursorData:MouseCursorData = new MouseCursorData();
   // we specify the hotspot
   cursorData.hotSpot = new Point(15,15);
   // we pass the cursor bitmap to a BitmapData Vector
   var bitmapDatas:Vector.<BitmapData> = new Vector.<BitmapData>(1, true);
   // we create the bitmap cursor (bitmaps should not be bigger than 32x32 pixels, this is an OS limitation)
   var bitmap:Bitmap = new NativeCursor();
   // we pass it to the bitmapDatas vector
   bitmapDatas[0] = bitmap.bitmapData;
   // we assign the bitmap to the MouseCursor object
   cursorData.data = bitmapDatas;
   // we register the MouseCursorData to the Mouse with an alias
   Mouse.registerCursor("myCursor", cursorData);
   // whenever we neeed to show it, we pass the alias to the existing cursor property
   Mouse.cursor = "myCursor";
}

private function createAnimatedCursor() : void	{
   // we create a MouseCursorData object
   var cursorData:MouseCursorData = new MouseCursorData();
   // we specify the hotspot
   cursorData.hotSpot = new Point(15,15);
   // we pass the cursors bitmap to a BitmapData Vector
   var bitmapDatas:Vector.<BitmapData> = new Vector.<BitmapData>(5, true);
   // we create the bitmap cursor frames (bitmaps should not be bigger than 32x32 pixels, this is an OS limitation)
   var frame1Bitmap:Bitmap = new CursorFrame1();
   var frame2Bitmap:Bitmap = new CursorFrame2();
   var frame3Bitmap:Bitmap = new CursorFrame3();
   var frame4Bitmap:Bitmap = new CursorFrame4();
   var frame5Bitmap:Bitmap = new CursorFrame5();
  // we pass it to the bitmapDatas vector
   bitmapDatas[0] = frame1Bitmap.bitmapData;
   bitmapDatas[1] = frame2Bitmap.bitmapData;
   bitmapDatas[2] = frame3Bitmap.bitmapData;
   bitmapDatas[3] = frame4Bitmap.bitmapData;
   bitmapDatas[4] = frame5Bitmap.bitmapData;
   // we assign the bitmap to the MouseCursor object
   cursorData.data = bitmapDatas;
   // we register the MouseCursorData to the Mouse
   Mouse.registerCursor("myAnimatedCursor", cursorData);
   // we just pass a frame rate
   cursorData.frameRate = 5;
   // whenever we neeed to show it, we pass the alias to the existing cursor property
   Mouse.cursor = "myAnimatedCursor";
}

4.- And finally our Mouse event listener and the toggle method that makes all that cursor magic switch happens.

private function _onClick(event : MouseEvent) : void {
	// we call the toggle function to switch between our mouse cursors
	toggle();
}

private function toggle() : void {
	switch (_state) {
	   case 0:
		// we set the static cursor
		createNativeCursor();
		_state = 1;
		break;
	   case 1:
		// we set the animated cursor
		createAnimatedCursor();
		trace(_state);
		_state = 0;
		break;
		default:
	}
}

Hope this helps You and in case you haven’t already go to adobe labs and download the Flash Player 10.2 beta.

Almost forgot here’s the example: ( You’ll need Flash Player 10.2 in your browser to see it).