Final Output:

In Flash Authoring, first create two movieclips 'btn_mc' and 'movie_mc' in the Library and make sure you select 'Export to Actionscript' checkbox in Symbol Properties of these movieclips to make use of them in .as file.

Once these two movieclips are created, save this fla as 'test.fla' and create a new ActionScript File named 'test.as' in the same directory. We will be using this actionscript file as a Document Class for 'test.fla'. Inorder to use this .as file as a document class, we have to enter the name of the class(test) in ActionScript file in 'Class' textField under Publish Settings.

Once Document class is set, we are done with 'test.fla'. Move to 'test.as' to start with coding.

Initially we import required classes and start with class declaration:

package {

	import flash.display.MovieClip;
	import flash.display.Stage;
	import flash.events.MouseEvent;
	import fl.transitions.Tween;
	import fl.transitions.TweenEvent;
	import fl.transitions.easing.*;

	public class test extends MovieClip {
		public function test() {
                                   setup();
		}
	}
}

Note: Make sure the public class name is same as the name of .as file.

Declare some variabled we need as class member variables.

private var activeMovie:String="";
private var tempArray:Array=[];
private var names:Array=["home","profile","projects","contact","about"];
private var movie:MovieClip;
private var fwdTween:Tween;
private var bkTween:Tween;

Inside the constructor we have a function setup() called. We will look into this function now. First we need to arrange the buttons at the bottom on the stage by instantiating 'btn_mc' and giving 'x' and 'y' positions. Using 'name' property of the movieclip, give names to these buttons to know which button is being clicked.

var temp:MovieClip;

for (var i:int=0; i<5; i++) {
	temp = new btn_mc();
	temp.name=names[i];
	temp.x = i*(temp.width+10)+temp.width/2+10;
	temp.y=350;

	addChild(temp);
	tempArray.push(temp);
	temp.addEventListener(MouseEvent.CLICK, onClick);
}

We have declared an eventListener for MouseEvent.CLICK to handle click events.

By default we will show an instance of 'movie_mc' which shows the a label as Home with a Tween motion..

movie = new movie_mc();
movie.label_txt.text=names[0];
movie.x=-240;
movie.y=210;
addChild(movie);
fwdTween=new Tween(movie,"x",Elastic.easeInOut,-240,240,1,true);

Till now, we have arranged the buttons at the bottom and default movieclip that appears on launching the swf.

On clicking any of the button at the bottom, that specific movieclip should be displayed and the exisiting movie should go off the stage. This we will be doing inside the eventListener onClick().

On clicking a specific button, move the existing movie off the stage first, changing the label of moive_mc.label_txt to desired one and getting the new movieclip to the stage.

private function onClick(event:MouseEvent):void {

	if (event.target.name==activeMovie) {
		//Do nothing
	} else {
		bkTween=new Tween(movie,"x",Regular.easeOut,240,-240,0.5,true);
		bkTween.addEventListener(TweenEvent.MOTION_FINISH, newMotion);

		movie.label_txt.text=event.target.name;
		movie.x=-240;
		movie.y=210;
		addChild(movie);

		activeMovie=event.target.name;
	}
}

private function newMotion(e:TweenEvent):void{
	fwdTween=new Tween(movie,"x",Regular.easeOut,-240,240,0.5,true);
}

As this is a simple menu, we are just changing the label the movie_mc. Incase if the content of the movie_mc varies with different tabs, we can add that specific content into movie_mc based on the tab clicked.

Final test.as:

package {

	import flash.display.MovieClip;
	import flash.display.Stage;
	import flash.events.MouseEvent;
	import fl.transitions.Tween;
	import fl.transitions.TweenEvent;
	import fl.transitions.easing.*;

	public class test extends MovieClip {
		private var activeMovie:String="";
		private var tempArray:Array=[];
		private var names:Array=["home","profile","projects","contact","about"];
		private var movie:MovieClip;
		private var fwdTween:Tween;
		private var bkTween:Tween;

		public function test() {
			setup();
		}

		private function setup():void {
			var temp:MovieClip;

			for (var i:int=0; i<5; i++) {
				temp = new btn_mc();
				temp.name=names[i];
				temp.x = i*(temp.width+10)+temp.width/2+10;
				temp.y=350;

				addChild(temp);
				tempArray.push(temp);
				temp.addEventListener(MouseEvent.CLICK, onClick);
			}

			movie = new movie_mc();
			movie.label_txt.text=names[0];
			movie.x=-240;
			movie.y=210;
			addChild(movie);
			fwdTween=new Tween(movie,"x",Elastic.easeInOut,-240,240,1,true);
		}

		private function onClick(event:MouseEvent):void {

			if (event.target.name==activeMovie) {
				//Do Nothing
			} else {
				bkTween=new Tween(movie,"x",Regular.easeOut,240,-240,0.5,true);
				bkTween.addEventListener(TweenEvent.MOTION_FINISH, newMotion);

				movie.label_txt.text=event.target.name;
				movie.x=-240;
				movie.y=210;
				addChild(movie);

				activeMovie=event.target.name;
			}
		}

		private function newMotion(e:TweenEvent):void{
			fwdTween=new Tween(movie,"x",Regular.easeOut,-240,240,0.5,true);
		}
	}
}

This is all we need to do to start with a basic menu in Profiles in Flash. This is just a way to do it. There are many different ways to do it.

You can get the source files here.

Just Explore Flash AS3

Currently, Samsung provides the SDK to only register CPs. The current number of CPs is 200 and there are about 80 applications in application store. Those numbers will increase as time goes. It recently announced the SAMSUNG APPS CONTEST 2010, calling developers to use their SDK and create new applications for TV.

Any developer who wants to create applications can

• download the SDK from http://www.pavv.co.kr/contest/,
• make their own application
• test it using an desktop emulator.

Developers can make applications using  Web technologies (HTML and JavaScript) and ADOBE FLASH Technology.

Hope this starts a new era of TV Apps using Flash Lite for Digital Home.

This device has several new menus with a very rich UI:

• TiVo Central
• TiVo Search
• Tivo Browser (Tivo Content Browsing, not a html browser)
• My Shows etc

Apart from this, the Remote is pretty exciting with QWERTY Keyboard and very much like the way needed to navigate different Applications.

Way to go Flash Lite for Digital Home...

"The unix time stamp is a way to track time as a running total of seconds. This count starts at the Unix Epoch on January 1st, 1970. Therefore, the unix time stamp is merely the number of seconds between a particular date and the Unix Epoch."

In order to count the number of seconds till a time, we have method Date.getTime() in Flash. This will effectively return the number of seconds from the Unix Epoch till the Date.

This is how i tried to find out the number of seconds till today's System Time:

var myDate = new Date();
trace(myDate);
var unixTime = Math.round(myDate.getTime()/1000);
trace("Unix Time: "+unixTime);

Output:

Fri Jan 22 13:01:55 GMT+0530 2010
Unix Time: 1264145516

To verify if we got the correct Unix TimeStamp of the normal time, check it on any online Unix Timestamp converters.

Problem arised when tried to convert the Unix Time we got into normal timestamp in Flash.

var myDate = new Date();
trace(myDate);
var unixTime = Math.round(myDate.getTime()/1000);
trace("Unix Time: "+unixTime);

var dateNew = new Date();
dateNew.setTime(unixTime);
trace(dateNew);

Output:

Fri Jan 22 16:22:42 GMT+0530 2010
Unix Time: 1264157563
Thu Jan 15 20:39:17 GMT+0530 1970

If you observe closely, while converting the Unix Timestamp to normal time, the year that's returned is 1970. If we use a online Unix Timestamp Converter to get back the normal time, it returns approximately correct time by inputting the above Unix Timestamp.

That was strange to get the difference while converting Unix Timestamp to Normal TimeStamp. Just observed this behavior, so thought of sharing it to find a solution or answer how to overcome it.

Beta version is online now. This has not only Help for Flash and Flex, but also for AIR, LifeCycle Data Services, ColdFusion. It makes us really easy to go to each product or earlier versions of each product's help using Filters controls.

Based on the filter you have selected, the content in the help varies accordingly.

This will be one place for all the reference for the Adobe Flash Platform.

Till now, if we had to create any animation, we have to create keyFrames, apply Tween, apply Ease if needed. If we had to remove the tween Undo Tween or Remove Tween. It was all a bit tedious one. But with new Motion Editor, all these tasks are made simple and quite fast with good accuracy.

Now we will start creating a simple motion tween using Motion Editor.

Create a new Flash AS3 Document. We have a car MovieClip located at outside of the stage to the right at First Frame.

We are going to create a simple motion Tween in which a car moves from right(out of the stage) to left(out of the stage). We dont have to creat any KeyFrames to indicate the end of the Frame animation. Just create some empty frames (say 60).

In order to create motion tween for this MovieClip using Motion Editor, Select car movieclip, goto Insert->Motion Tween or Right-click the car and select Create Motion Tween from the context menu.

Once this is done, you can see that Motion Editor Panel is displayed.

As you can see in Motion Editor Panel shows all the properties which can be tweened like X, Y, Rotation, Skew and Scale etc. Once you are successful till here. Move to the 60th frame on Main Timeline. Drag the car movieclip to the left side of the stage, move it outside of the stage, to signify the end point of the motion tween.

Check  in the motion editor for the value of X to verify. As you can see thats all we need to do to create a simple motion tween.

Run the swf and check if the motion tween works.

Now we will look into Motion editor for a while. For each tweenable property, you can see that there will be two arrows, clicking on them will move the playhead to the appropriate keyframe to that side. Like clicking the Left arrow takes you to the keyframe present to the left. The diamond icon in between arrows is used to insert keyframes at the current location or can delete a keyframe if it already exists at that playhead location.

These options will make the user to know what exactly is happenig while editing keyframes of the animation, as in, which property is affected by inserting /removing keyframes.

Adding Easing:

Till now as you can see, its very simple creating a motion tween. Motion editor also gives up different easing motions by default. Click the combo box beside the arrows and check that 'Simple (Slow)' is one of the options there. If you apply it, you can see how smoothly the animation plays.

You can configure the type of easing as well.

If you can see 'Eases' option below different properties, you can give a value of -100 to 100 for that easing motion. Giving '-100' will make the animation to start slowly and becomes normal. Giving value '100' makes the animation to slowdown at the end. If we give value of '0', the motion speed will be same throughout.

Give these values to this easing motion and check.

You can add more kinds of eases to your animation. Click the '+' button on Eases panel and you can see all the available easing motions available.

Apply all these different easing motions and check how the animation looks.

Motion Tween to Children:

In the above animation, its just the car moves.  Its not that realistic. It would be more nicer if we could rotate the wheels while the car moves. This can be done very easily using motion editor.

In case of this car movieclip, go inside it, i have placed both the front and back wheels in differnet layers to make it easier for me to apply tween.

Follow the same procedure as above, click the front wheel, right-click->Create Motion Tween. Goto to the last frame of the time line of this layer. Here, to make the wheel rotate, we will use 'Rotation Z' property. Enter a value of '360', which signifies a complete rotation.

Similarly apply tween to the back wheel. Run the swf and check the animation.

This is just the basic animation you could create. You can apply different tweens/eases to different properties simultanesously in case of any complex animation.

As you saw, Motion Editor gives us a new way of handling Keyframes, adding different easing motins to differnet properties. Not only these, you can incorporate Color Tweens like Alpha, Brightness, Tint, Advanced Colot. You also add differnet Filters like drop Shadow, Bevel etc for animations.

As you can visualize now, with all these in hand, how nice an animation you can create by using motion editor efficiently.

Just try it out, you would love it....

Its totally dynamic as in all the menu Items can be configured in an XML and you can load text or  image or a SWF in the opened state.

Final Output:

You can get source files for this turorials as well...

Even after release Silverlight is facing a difficulty in capturing the market because of the coverage of Flash present already. Still we cannot deny that there are some features in Silverlight like search engine optimization, which designers and developers wanted to see in Flash for so long.

Actually speaking, which technology to use mostly depends on your requirements, on what capabilities you need to develop your application etc.

Smashing Magazine has posted an article discussing the technical differences between Flash and Silverlight.

The articles concludes as:

Check out this article and use appropriate technology which suits your needs and requirements.