A new era for Windows 8 means new opportunities for software developers

Microsoft has unveiled Windows 8 at the Build conference and developers can now download a preview of Windows 8 at:

http://msdn.microsoft.com/en-us/windows/home/

It is an exciting time for us computer enthusiasts seeing the innovation of technologies especially from the last few years. I feel that 2010/2011 brought us the iPad phenomenon and significantly altered the technology landscape. Along with iPad and iPhone came the Apple Appstore and the hundreds of thousands of applications built by small software development house. It is interesting to observe that the most downloaded free or paid apps are typically built by smaller software companies. The traditional big software companies (of which there are only a handful, Adobe included) which dominate the desktop software market mostly fail to respond to the App market quick enough to compete. The bigger the company the less agile they become. Indeed it is difficult to adjust the business model of selling thousands dollar worth of software to one that sells lots cheaper but to the wider market.

I think the 2012/2013 will take us to a new era with Windows 8 which unifies the desktop, laptop and tablet all under the same OS. Indeed to me these devices are all personal computer just in different form factor. Along with Windows 8 come the Metro style apps that are meant to be touch friendly, as distinct from the classic Win32 app which are mouse-centric. Windows 8 can run both types of apps but I see smaller software development houses can again do very well in this marketplace. It is hard to compete with the few big software companies like Adobe in the traditional desktop software but this new bred of apps is a totally different battleground. And the odds are in their favour.

During 2010/2011 iPads and HTML5 came in such rapid pace that Adobe needs to respond midway with CS5.5. I don’t know how big software companies are going to respond with Windows 8 in 2012/2013. But I am happy with more competition. It is good for the customers and good for the employees. So bring it on.

 

Enjoy Adobe Experience on your Android devices

If you have an Android device, be proud of it and enjoy the best experience out of it with Adobe technology. Personally I have an HTC Desire  smartphone and a Barnes and Noble NookColor eReader tablet and they both serve my needs very well.  I have put together a slide deck to list out the Adobe technologies which you can get for free to put onto your devices. Hope you the Adobe eperience as much as I do.

Click here for the slide deck: Enjoy Adobe Experience on Android

Handling Auto-Orient AIR Mobile App using Flash CS5.5

Unlike desktop app, a user may rotate their handheld mobile device as they interact with the mobile app. In the case of AIR mobile app, this can be handled quite easily in both Flash or Flash Builder. This post is focused on Flash althought the Actionscript is the same in Flex.

When publish an AIR for Android or iOS app, simply select “Auto orientation” and the app will respond to device rotation event: StageOrientationEvent.ORIENTATION_CHANGE

To reflow the content from portrait to landscape or vice versa as the device is rotated, simply use the timeline and add keyframes: one keyframe (@frame 1) for content to be display in portrait mode and another keyframe (@frame6) to display content in landscape mode. Then add in the following codes:

stage.scaleMode = StageScaleMode.NO_SCALE;

stage.addEventListener(StageOrientationEvent.ORIENTATION_CHANGE, fl_OrientationChange);

function fl_OrientationChange(event:StageOrientationEvent):void
{
switch (stage.deviceOrientation)
{
case StageOrientation.DEFAULT:
{
// Re-orient display objects on default (right-side up) orientation.
gotoAndStop(1);
break;
}
case StageOrientation.ROTATED_RIGHT:
{
// Re-orient display objects based on right-hand orientation.
gotoAndStop(6)
break;
}
case StageOrientation.ROTATED_LEFT:
{
// Re-orient display objects based on left-hand orientation.
gotoAndStop(6);
break;
}
case StageOrientation.UPSIDE_DOWN:
{
// Re-orient display objects based on upside-down orientation.
gotoAndStop(1);
break;
}
}
}

stop();

 

Custom Flash Animation Effects for Captivate Project

If the long list of the supplied effects in Captivate 5 is still not enough, you can create custom Flash animation effects and used that in your Captivate project. Here are the steps:

Step 1: Create a classic tween animation in Flash CS5. Please note that only classic tween is supported. You can still use Motion Guide to create complex animation.

Step 2: Select the animation frame and export the animation as XML under the Commands/Export Motion XML menu.

Step 3: You can put the xml file into the Captivate program folder if you want to make it available to all Captivate project. Typically the path to the Captivate Effects folder like:

C:\Program Files (x86)\Adobe\Adobe Captivate 5.5\Gallery\Effects\Basic

Step 4: You should now be able to select the custom effect from the Add Effects button at the Captivate Effects panel.

Using Flash Component inside a Flash Builder Project

Flash and Flash Builder both have their strengths and often in a project it is desirable to create assets in Flash and use it in Flash Builder. To simplify the task, there is a Flash Professional Component object in the Components panel inside Flash Builder to help you get started.

Step 1: Insert the Flash Professional Component onto the Design view of your Flex project

Step 2: Click create in Flash Professional button at the Properties panel.

Step 3: Flash launches. Edit the component to suit your need.

Step 4: Click Done and your component will be displayed in Flash Builder design view and the Components panel.

Now the above sounds simple. But there are some details to take note.

1. If you want to add AS3 code onto the component, make sure that you write the class file by extending the mx.flash.UIMovieClip class, not the usual flash.display.MovieClip class. Like the follow:

package  {

import mx.flash.UIMovieClip;

public class Bot extends UIMovieClip {

public function Bot() {
// constructor code
}

}

}

2. Any public methods or properties you defined with the component will be available (with code-hinting) in the Flash Builder IDE.

3. The swc file generated in the process can be used at other Flash Builder project by adding that into the Libaray path. As swc is complied, that in itself hides the AS3 code from casual viewing.

ICTEV Innovation Conference

I was at the ICT EV Innovation conference at the Melbourne Grammar School today and gave a presentation on creating mobile app using Flash CS5.5. Here is the link to the slide deck I used. As for the demo, it is just straight out of the one of the Android template that come with Flash CS5.5. Have fun.

MobileLearning

Reflow Flex mobile app content using s:states

I am enjoying Flex 4.5 more and more as I learn how to build mobile apps. One of the characteristics of mobile app is the orientation of the device. It is possible to reflow the mobile app content as the device is held in portrait or landscape orientation. One simple strategy is to use spark TileGroup component. Constraint the tile dimension to the edges of the app like:

<s:TileGroup left=”0″ right=”0″ top=”0″ bottom=”0″>

As the tile resize, the content would reflow.

However, a more flexible approach is to use view states: one for portrait and one for landscape:

<s:states>

<s:State name=”portrait”/>

<s:State name=”landscape” />

</s:states>

Now you can reposition a button when the device is switch to state “landscape” using code like this:

<s:Button label=”Submit” id=”myButton”  x=100″ y=”100″ x.landscape = “200″ y.landscape=”200″ />

Lastly we can use the resize event listener to monitor when the device orientation is changed:

protected function view1_resizeHandler(event:ResizeEvent):void
{
if (screen.width < screen.height)
{
currentState = “portrait”;
}
else
{
currentState = “landscape”;
}
}

Apart from the above, we can even apply state transition for better UI experience:

<s:transitions>
<s:Transition fromState=”*” toState=”*”>
<s:Parallel>
<s:Move duration=”500″ targets=”{myButton}” />
</s:Parallel>
</s:Transition>
</s:transitions>

That’s it. Simple. Obviously there are lots more options to control the states and its transitions. It is all in the Flex 4.5 Help.

NSW DET SWSR Inspire Innovate ICT Conference

At the Inspire Innovate ICT Conference (http://www.icteach.com.au/conference.php) I have a session on the topic of “Everbody loves mobile apps. Let’s create one or two.” Mobile technologies have brought great transformation to the way “teachers teach and students learn”. While mobile devices like smartphones and tablets are wonderful devices for consuming content, it isn’t too hard to learn how to create content with software like Adobe Flash.

MobileLearning is the PDF slides attached with the Flash demo files used at the session. Click the above link to download. Note that it is a pdf file and you would need to open it with Adobe Reader X or Acrobat X. Click on the paperclip at the navigation pane will reveal the 2 sample flash files which you can open in Flash CS5.

Android Screencast for displaying device screen on computer

After my last post, I was still searching for a software that can display my Android device (phone or tablet) on a computer screen. I do a lot of presentation and the ability to show the device screen to a group of audience is very handy.

I have finally found a screencast app for Android devices!!!
It is called Android Screencast. It works on my HTC Desire running Android 2.2 (stock ROM) and my Barnes and Noble Nookcolor (rooted with Android 2.2).

For stock ROM, the screencast will display the device screen on the computer. For rooted ROM, you can also use the computer keyboard and mouse to control the device.

At present, the screen refresh rate is a bit slow, like 1 fps or so on my ThinkPad X300. Not great if you want to demo animation of the device. And the screencast doesn’t handle device screen rotation at all. So phone will display in portrait mode only and tablet in landscape mode only.

Apart from the above, it is a great tool when doing presentation with Android devices. Plug and USB cable and run the software and your audience
will be able to see your device screen. No more messy setup of a separate overhead projection unit. And the display quality is way better.

You can find it here: http://forum.xda-developers.com/showthread.php?t=663390

Link to the open source project at: http://code.google.com/p/androidscreencast/

Update: I have found yet another app that does the same thing: The Android Screenshot and Screen Capture by MightyPocket.com. The benefit of this program is that it allows for manual rotation of the display. So I think I will use this instead.

Galaxy Tab has Video Out for presentation

In case you are a Galaxy Tab owner and need to do presentation with the Galaxy Tab, there is a simpler way to display the tablet screen to your audience now. Simply buy the Samsung video-out cable and you can output the screen to a TV or data projector with a composite video input port. I have tested it and it looked very nice.

In case the data projector doesn’t have a composite input port and you are also presenting with a laptop, you can get a Belkin video-to-USB cable (or any other video to usb capture device) and plug the USB port into your computer. The video output from the Galaxy tab can be displayed with software that captures video input. I have tested it with Flash Media Encoder 3.2 and it worked well. I set the video standard to PAL-B and the input screen size to 720×576. See below.

So now it is easy for me to present on a Galaxy Tablet