Quote from Processing: creative coding and computational art by Ira Greenberg:

“When I tell people I write code as my main artistic medium, they smile politely and quickly
change the subject, or they tell me about their job-seeking cousin who makes videos using
iMovie.
For nonprogrammers, code is a mysterious and intimidating construct that gets
grouped into the category of things too complicated, geeky, or time-consuming to be
worth learning.
At the other extreme, for some professional programmers, code is seen
only as a tool to solve a technical problem—certainly not a creative medium.
There is another path—a path perhaps harder to maneuver, but ultimately more rewarding
than either the path of avoidance or detachment—a holistic “middle” way.
This is the path the book promotes; it presents the practice of coding as an art form/art practice,
rather than simply a means to an end. Although there are times when a project is scoped
out, and we are simply trying to implement it, most of the time as artists, we are trying to
find our way in the process of creating a project.
This approach of finding and searching is one of the things that makes the artist’s journey distinctive
and allows new unexpected solutions to be found. It is possible to do this in coding as well, and the
Processing language facilitates and encourages such a “creative coding” approach.”

According to Facebook, “The Open Graph API will allow any page on the Web to have all the features of a Facebook Page – users will be able to become a Fan of the page, it will show up on that user’s profile and in search results, and that page will be able to publish stories to the stream of its fans.”

By implementing this new service however, Facebook will become the primary authentication hub for social experiences around the web. This authentication process makes Facebook the center of user identities and the announcement of opening up developer access to emails means Facebook has literally become a wrapper for open identification. Using the APIs, the data will flow back from these sites to Facebook.

“Now that Facebook is willing to share user emails, Facebook Connect will become default signup for most websites.”

Connect is already largely successful. It’s becoming more and more rare to go to a popular site on the web that doesn’t implement it in some way (even if it’s just for commenting). But in many ways, Connect doesn’t go far enough. If Facebook truly wants to be the main hub of social data on the web, it needs more data coming in from more sites, and Open Graph can provide that.

Whether we like it or not, we have to understand what this move means. It impacts users, publishers, competitors and, of course, Facebook itself.

From the developer perspective, it adds to the development process, although many complain the API is tricky and complicated. It seems to be a huge effort from their engineering team.
From the user perspective the major implication is one: privacy.
In my opinion they will be able to control too much and I understand their business practices, but the user should be able to decide what and when to use something.

The Open Graph is a set combination of publisher plugins, semantic markup and a developer API.

Facebook announced simple, RDF-based markup to make the plugins smarter. In a nutshell, the markup enables publishers to say what object is on the page – a movie, a book, an event, a sports team, etc. This automatically enables semantics, that is, an understanding that the user is not just interacting with a webpage, but that he or she is liking a specific kind of thing. More importantly, the markup helps Facebook connect the users across common interests across different websites.

Let’s give it a try.

All I had to do was animate masks in the timeline, frequency and the slider control value.
When I say animate, I mean keyframe it.

Create a background of your choice and a solid layer. Onto the solid layer apply radio waves from Effect->Generate->Radio Waves.
You can adjust all properties according to mine, or play with it. Add a slider control (Expression Controls -> Slider Control) to be used in a minute.

The way it works is:

1. Create different masks and apply them to the same solid layer!This is important. Radio waves can use masks instead of polygon, but only one at a time.
To make it easier, bring it from Illustrator or another solid layer in AE, just copy and paste it, or, copy and paste a keyframe from that auxiliary solid layer.
Of course copy in different places in time, otherwise it will be overwritten.
The keyframe holds all information about the mask.

Just be careful, I am using “Mask 2″ because I changed the first one I tried, but the number doesn’t matter.

Don’t worry about everything else for now.
(Keyframe “Mask Path”, place keyframe for each mask)
Masks on timeline:

2. On the Effects panel link Radio Waves to your solid layer, or better yet, to your mask on that solid layer.

How it looks on the Effects panel:

How it looks on the timeline:

3. Now we need an expression to control or affect Radio Waves generation. That’s when the silder control plays its part.
To the Radio Waves producer point, add the following expression:

x=effect(“Slider Control”)(“Slider”)
wiggle(1,x*200);

To add an expression according to Adobe:

“To add an expression to a property, select the property in the Timeline panel and choose Animation > Add Expression or press Alt+Shift+= (Windows) or Option+Shift+= (Mac OS); or Alt-click (Windows) or Option-click (Mac OS) the stopwatch button next to the property name in the Timeline panel or Effect Controls panel.”

Now, you can keyframe Frequency and Slider values to get the results you want.

You can download my .aep file below and check out how I did it, but my suggestion is play with it!The only problem is processing, each time you change a value, it
takes a while to re-render all effects. So be patient!The results are worth it!

Source .aep

Final result:

In its history, programming brought to this world so many paradigms related to all activities involved in the process that mastering this art is object of discussion and observation in the Digital Era.

Certainly, it’s not as straight-forward as creating an application lay-out on Illustrator, or enhancing a picture in Photoshop or making that financial spreadsheet in Excel.
From designing the app, implementing chunks of code and make them interact, to debugging the process, the level of complexity raises in an attempt to transfer idea, concepts and the client needs into a digital medium.

The rise of the Internet led to very rapid growth in the demand for international information display/e-mail systems on the World Wide Web. Programmers were required to handle illustrations, maps, photographs, and other images, plus simple animation, at a rate never before seen, with few well-known methods to optimize image display/storage (such as the use of thumbnail images).

There is a constant demand for solutions to new ideas and more efficient communication.
However, software development does not happen in the same pace as hardware development.
New tendencies point to rapid-prototyping techniques turning programmers into heroes, so to speak.
Therefore, which methodology and approach used in a project must be carefully chosen.

No Silver Bullet wiki

No Silver Bullet paper

“The complexity of software is an essential property, not an accidental one.” We observe that this inherent complexity derives from four elements: the complexity of the problem domain, the difficulty of managing the development process, the flexibility possible through software, and the problems of characterizing the behavior of discrete systems.”
Fred Brooks.

He has books published in English, Portuguese and German. Unfortunately the one I read I only found in Portuguese.

Flusser describes a world fundamentally changed by the invention of the “technical image” and the mechanisms that support and define industrialized modern culture. He argues that whereas ideas were previously interpreted by written account, the invention of photography allows the creation of images (ideas) taken at face value as truth, not interpretation that can be endlessly replicated and spread worldwide.

Really worth reading, specially for those that work in the interactive/design/web industry!

Amazon Flusser book collection

Video dimensions vary in width and height, but also in proportion, or aspect ratio.

Wiki video standards chart

The client had all sorts of videos, 640 x 480, 400 x 300, 1280 x 720, etc.
The solution is to detect the file dimensions in an onMetaData event handler and set your visual elements accordingly.
For wide screen mode I decided to draw the black stripes on top and bottom.
I use the NetStream and NetConnection objects to handle the video file.

Preview:
HD video player

Here is the source code for the video player class.

HDVideoPlayer.as:

package src{

	/*Import*/

	import flash.text.TextField;
	import flash.text.TextFieldAutoSize;
        import flash.text.TextFormat;
	import flash.media.SoundTransform;
	import flash.media.Video;
	import flash.net.NetConnection;
	import flash.net.NetStream;
	import flash.net.URLLoader;
	import flash.net.URLRequest;
	import flash.display.*;
	import flash.events.*;
	import flash.geom.*;

	import caurina.transitions.*;
	import caurina.transitions.properties.ColorShortcuts;

	/*Class*/
	public class HDVideoPlayer extends MovieClip {

		/*Properties*/
		private var mVideo:Video;
		private var ncVideo:NetConnection = new NetConnection();
		private var nsVideo:NetStream;
		private var netClient:Object = new Object();
		private var mySound:SoundTransform;
		private var videoDuration:Number;
		private var actualTime:Number = 0;
		private var actualTimeDragger:Number;
		private var actualLength:Number;
		private var volPercentage:Number;
		private var pctLoaded:Number;
		private var pctPlayed:Number;
		private var dragTime:Number;
		private var videoURL:String  = new String();
		private var MODE:String;

		private var mBG:Sprite = new Sprite();
		private var mBlackStripes:Sprite = new Sprite();
		private var mBGBar:Sprite = new Sprite();
		private var mProgressBar:Sprite = new Sprite();
		private var mLoadBar:Sprite = new Sprite();
		private var mDragger:Sprite = new Sprite();
		private var mControl:MovieClip = new MovieClip();
		private var mPlay:PlayPause = new PlayPause();
		private var mStop:Stop = new Stop();
		private var mVolume:Volume = new Volume();
		private var bFull:Full = new Full();
		private var bBack:Back = new Back();

		private var tAlert:TextField;
		private var format:TextFormat = new TextFormat();
		private var volEquation:Number;
		private var videoWidth:Number;
		private var videoHeight:Number;
		private var ratio:Number;
		private var diffDragger:Number = 0;
		private var overColor:uint;

		/*Constructor*/
		public function HDVideoPlayer(fileData:Object):void{
			trace("//---> HDVideoPlayer");
			videoURL = fileData.file;
			overColor = 0xFFFFFF;
			ColorShortcuts.init();
			addEventListener(Event.ADDED_TO_STAGE, init);
		};

		private function init(e:Event):void{
			removeEventListener(Event.ADDED_TO_STAGE, init);
 			addEventListener(Event.REMOVED_FROM_STAGE, removedFromStage);
			buildVideo();
		};

		private function removedFromStage(e:Event):void{
			trace("// ---- HDVideoPlayer removed from stage");
			mySound.volume = 0;
			nsVideo.soundTransform = mySound;
			nsVideo.close();
			ncVideo.close();
			mVideo.clear();
			mVideo.alpha = 0;
			removeEventListener(Event.REMOVED_FROM_STAGE, removedFromStage);
		};

		public function buildVideo ():void{

			MODE = "SD";

			mBG.graphics.beginFill(0x231F20, 1);
			mBG.graphics.drawRect(0, 0, 400, 364);
			mBG.graphics.endFill();
			mBG.alpha = 0;
			addChild(mBG);

			mBlackStripes.graphics.beginFill(0x000000, 1);
			mBlackStripes.graphics.drawRect(0, 0, 400, 300);
			mBlackStripes.graphics.endFill();
			addChild(mBlackStripes);

			mPlay.x = 25;
			mPlay.y = 14;
			mControl.addChild(mPlay);

			mStop.x = 64;
			mStop.y = 14;
			mControl.addChild(mStop);

			bFull.x = 175;
			bFull.y = 10;
			bFull.visible = false;
			mControl.addChild(bFull);

			bBack.x = -12;
			bBack.y = -12;
			bBack.visible = false;
			addChild(bBack);

			mVolume.x = 302;
			mVolume.y = 18;
			mControl.addChild(mVolume);

			mBGBar.graphics.beginFill(0x3F3F3F, 1);
			mBGBar.graphics.drawRect(0, 0, 400, 3);
			mBGBar.graphics.endFill();
			mBGBar.x = 0;
			mBGBar.y = 54;
			mControl.addChild(mBGBar);

			mLoadBar.graphics.beginFill(0xFFFFFF, 1);
			mLoadBar.graphics.drawRect(0, 0, 400, 3);
			mLoadBar.graphics.endFill();
			mLoadBar.x = 0;
			mLoadBar.y = 54;
			mLoadBar.width = 0;
			mControl.addChild(mLoadBar);

			mProgressBar.graphics.beginFill(0xF5F5F5, 1);
			mProgressBar.graphics.drawRect(0, 0, 400, 3);
			mProgressBar.graphics.endFill();
			mProgressBar.x = 0;
			mProgressBar.y = 54;
			mProgressBar.alpha = 0;
			mControl.addChild(mProgressBar);

			mDragger.graphics.beginFill(0xFFFFFF, 1);
			mDragger.graphics.drawRect(0, 0, 14, 7);
			mDragger.graphics.endFill();
			mDragger.x = 0;
			mDragger.y = 47;
			mControl.addChild(mDragger);

			diffDragger = mBGBar.width - mDragger.width;

			tAlert = new TextField();
                        tAlert.autoSize = TextFieldAutoSize.CENTER;
			tAlert.x = 120;
			tAlert.width = 160;
			tAlert.height = 14;
			tAlert.textColor = 0xFFFFFF;

                        format.font = "Arial";
			format.bold = true;
                        format.color = 0xFFFFFF;
                        format.size = 8;
                        tAlert.defaultTextFormat = format;
			mControl.addChild(tAlert);

			mControl.y = 308;
			mControl.alpha = 0;
			addChild(mControl);

			Tweener.addTween(mDragger,{_color:overColor, time:0});

			Tweener.addTween(mControl, {alpha:1, time:1, transition:"linear",
				onComplete:function(){
					connectVideo();
				}
			});

		};

		public function connectVideo ():void{
			//Video connection
			ncVideo.connect(null);
			nsVideo = new NetStream(ncVideo);
			nsVideo.client = this;
			nsVideo.bufferTime = 5;

			mVideo = new Video();
			mVideo.x = 0;
			mVideo.y = 0;
			addChild(mVideo);

			this.swapChildren(mVideo, bBack);

			mVideo.attachNetStream(nsVideo);
			nsVideo.play(videoURL);
			mVideo.smoothing = true;

			mPlay.gotoAndStop(1);
			//Sound
			mySound = nsVideo.soundTransform;
			mySound.volume = 1;
			nsVideo.soundTransform = mySound;
			//Bars
			mLoadBar.width = 0;
			mProgressBar.width = 0;
			//Listeners
			nsVideo.addEventListener(NetStatusEvent.NET_STATUS, netStatusHandler);

			bFull.addEventListener(MouseEvent.MOUSE_DOWN, buildVideoHD);
			bFull.addEventListener(MouseEvent.ROLL_OVER, eventOver);
			bFull.addEventListener(MouseEvent.ROLL_OUT, eventOut);

			bBack.addEventListener(MouseEvent.MOUSE_DOWN, backVideo);
			bBack.addEventListener(MouseEvent.ROLL_OVER, eventOver);
			bBack.addEventListener(MouseEvent.ROLL_OUT, eventOut);

			mPlay.addEventListener(MouseEvent.MOUSE_DOWN, pauseVideo);
			mPlay.addEventListener(MouseEvent.ROLL_OVER, eventOver);
			mPlay.addEventListener(MouseEvent.ROLL_OUT, eventOut);

			mStop.addEventListener(MouseEvent.MOUSE_DOWN, stopVideo);
			mStop.addEventListener(MouseEvent.ROLL_OVER, eventOver);
			mStop.addEventListener(MouseEvent.ROLL_OUT, eventOut);

			mDragger.addEventListener(MouseEvent.MOUSE_DOWN, dragSeek);

			mVolume.mVolSlider.addEventListener(MouseEvent.MOUSE_DOWN, volumeScrubberClicked);
			stage.addEventListener(MouseEvent.MOUSE_UP, volumeScrubberUnClicked);
			mVolume.mVolSlider.addEventListener(MouseEvent.ROLL_OVER, volumeScrubberRolledOver);

			mLoadBar.addEventListener(Event.ENTER_FRAME, loadBar);

			mPlay.buttonMode = true;
			mStop.buttonMode = true;
			bFull.buttonMode = true;
			bBack.buttonMode = true;
			mDragger.buttonMode = true;
			mVolume.mVolSlider.buttonMode = true;

			mPlay.dispatchEvent(new MouseEvent(MouseEvent.ROLL_OUT));
			mStop.dispatchEvent(new MouseEvent(MouseEvent.ROLL_OUT));
			bFull.dispatchEvent(new MouseEvent(MouseEvent.ROLL_OUT));
			bBack.dispatchEvent(new MouseEvent(MouseEvent.ROLL_OUT));
		};

		public function eventOver (e:MouseEvent):void{
			Tweener.addTween(e.currentTarget, {alpha:1, time:0.2, transition:"linear"});
		};

		public function eventOut (e:MouseEvent):void{
			Tweener.addTween(e.currentTarget, {alpha:.5, time:0.2, transition:"linear"});
		};

		public function netStatusHandler(evt:NetStatusEvent):void{

			if(evt.info.code == "NetStream.FileStructureInvalid"){
				tAlert.text = "File structure invalid. ";
			}else if(evt.info.code == "NetStream.NoSupportedTrackFound"){
				tAlert.text = "File is not supported. ";
			}else if (evt.info.code ==  "NetStream.Play.StreamNotFound") {
				tAlert.text = "Error: Stream not found. ";
			}else if (evt.info.code ==  "NetStream.Play.Start") {
				tAlert.text = "Buffering video... ";
				trace("evt.info.code --->>> "+evt.info.code+"\n")
			}else if (evt.info.code ==  "NetStream.Buffer.Empty") {
				tAlert.text = "Buffering video... ";
				trace("evt.info.code --->>> "+evt.info.code+"\n")
			}else if (evt.info.code == "NetStream.Buffer.Full") {
				mPlay.gotoAndStop(2);
				trace("evt.info.code --->>> "+evt.info.code+"\n")
				tAlert.text = " ";
			}else if (evt.info.code ==  "NetStream.Play.Stop"){
				mPlay.gotoAndStop(1);
				trace("evt.info.code --->>> "+evt.info.code+"\n")
			}

		};

		public function onMetaData(obj:Object):void{
			for(var propName:String in obj){
				//trace("**Metadata video: "+propName + " = " + obj[propName])
				if (propName == "width") {
					videoWidth = obj[propName]
				}
				if (propName == "height") {
					videoHeight = obj[propName]
				}
			};

			ratio = videoHeight/videoWidth;
			ratio = Number(ratio.toFixed(4));
			//trace("videoWidth original ---> "+videoWidth)
			//trace("videoHeight original ---> "+videoHeight)
			//trace("ratio ---> "+ratio)
			addEventListener(Event.ENTER_FRAME, dragSeekBar);
			videoDuration = obj.duration;
			setVideo();
		};

		private function setVideo():void{

			if (MODE == "SD") {
				mVideo.width = 400;
				if (ratio < 0.6) {
					bFull.visible = true;
					mVideo.y = 36;

				}else{
					mVideo.y = 0;
					bFull.visible = false;
				}

			}else if (MODE == "HD960"){
				mVideo.width = 960;
			}else if (MODE == "HD640"){
				mVideo.width = 640;
			}
			mVideo.height = Math.round(mVideo.width*ratio);
			trace("mVideo.height adjusted ---> "+mVideo.height)
		};

		public function buildVideoHD(obj:Object):void{

			if (stage.stageHeight < 810) {

				MODE = "HD640";

				mBG.width = 640;
				mBG.height = 424;
				mBlackStripes.width = 640;
				mBlackStripes.height = 360;
				mBGBar.width = 640;
				mLoadBar.width = 640;
				mProgressBar.width = 640;

				mControl.y = 368;
				mVolume.x = 530;
				bFull.x = 300;
				bFull.visible = false;
				bBack.x = -13;
				bBack.visible = true;
				tAlert.x = 320;

				mVideo.y = 0;
				setVideo();

				diffDragger = mBGBar.width - mDragger.width;
			}else{

				MODE = "HD960";

				mBG.width = 960;
				mBG.height = 604;
				mBlackStripes.width = 960;
				mBlackStripes.height = 540;
				mBGBar.width = 960;
				mLoadBar.width = 960;
				mProgressBar.width = 960;

				mControl.y = 548;
				mVolume.x = 850;
				bFull.x = 460;
				bFull.visible = false;
				bBack.x = -13;
				bBack.visible = true;
				tAlert.x = 480;

				mVideo.y = 0;
				setVideo();

				diffDragger = mBGBar.width - mDragger.width;
			}

		};

		public function backVideo(obj:Object):void{

			MODE = "SD";

			mBG.width = 400;
			mBG.height = 364;
			mBlackStripes.width = 400;
			mBlackStripes.height = 300;
			mBGBar.width = 400;
			mLoadBar.width = 400;
			mProgressBar.width = 400;

			mControl.y = 308;
			mVolume.x = 302;
			bFull.x = 175;

			bBack.visible = false;
			tAlert.x = 120;

			setVideo();

			diffDragger = mBGBar.width - mDragger.width;
		};

		public function pauseVideo(evt:MouseEvent):void{

			if (mPlay.currentFrame == 2) {
				mPlay.gotoAndStop(1);
				nsVideo.pause();
			}else{
				mPlay.gotoAndStop(2);
				setVideo();
				nsVideo.resume();
			}
		};

		public function stopVideo(evt:MouseEvent):void{
			nsVideo.pause();
			nsVideo.seek(0);
			mPlay.gotoAndStop(1);
		};

		public function loadBar(evt:Event):void{
			//trace("buffer ---> "+nsVideo.bufferLength)

			pctLoaded = Math.floor(nsVideo.bytesLoaded / nsVideo.bytesTotal * 100);
			Tweener.addTween(mLoadBar, {width: (mBGBar.width * pctLoaded) / 100, time:1, transition:"linear"});
			if (pctLoaded >= 100){
				evt.currentTarget.removeEventListener(Event.ENTER_FRAME, loadBar);
			}
		};

		public function dragSeekBar(evt:Event):void{
			actualTime = nsVideo.time;
			Tweener.addTween(mDragger, {x: Math.round(actualTime / videoDuration * diffDragger), time:.1, transition:"linear"});
			actualTime = nsVideo.time;
			if (Math.round(actualTime) == Math.round(videoDuration)){
				Tweener.addTween(this, {time:1, transition:"linear",
					onComplete:function(){
						tAlert.text = "";
						nsVideo.pause();
						nsVideo.seek(0);
						mPlay.gotoAndStop(1);
					}
				});
			}
		};

		public function dragSeek(evt:Event):void{
			//actualTimeDragger = int(((evt.currentTarget.x) / mBGBar.width) * videoDuration);
			nsVideo.pause();
			removeEventListener(Event.ENTER_FRAME, dragSeekBar);
			Tweener.removeAllTweens();
			stage.addEventListener(MouseEvent.MOUSE_UP, dragSeekOut);
			evt.currentTarget.startDrag(false, new Rectangle(0,47,diffDragger,0));
		};

		public function dragSeekOut(evt:MouseEvent):void{
			dragTime = Math.round(mDragger.x / diffDragger * videoDuration);
			actualTime = dragTime;
			mDragger.x = (actualTime / videoDuration * diffDragger);
			nsVideo.seek(dragTime);
			nsVideo.resume();
			mPlay.gotoAndStop(2);
			mDragger.stopDrag();
			stage.removeEventListener(MouseEvent.MOUSE_UP, dragSeekOut);
			addEventListener(Event.ENTER_FRAME, dragSeekBar);
		};

		public function volumeScrubberClicked(evt:Event):void {
			mVolume.mVolSlider.startDrag(false, new Rectangle(8, 0, 66, 0));
			mVolume.mVolSlider.addEventListener(Event.ENTER_FRAME, volumeScrubberSlide);
		};

		public function volumeScrubberRolledOver(evt:Event):void	{
			evt.currentTarget.buttonMode = true;
		};

		public function volumeScrubberUnClicked(evt:Event):void	{
			mVolume.mVolSliderbuttonMode = false;
			mVolume.mVolSlider.stopDrag();
			mVolume.mVolSlider.removeEventListener(Event.ENTER_FRAME, volumeScrubberSlide);
		};

		public function volumeScrubberSlide(evt:Event):void{
			volEquation = (100*(evt.currentTarget.x - 8))/66;
			volPercentage = volEquation / 100;
			mySound.volume = volPercentage;
			nsVideo.soundTransform = mySound;
		};

		public function formatTime(t:int):String {
			// returns the minutes and seconds with leading zeros
			// for example: 70 returns 01:10
			var s:int = Math.round(t);
			var m:int = 0;
			if (s > 0) {
				while (s > 59) {
					m++;
					s -= 60;
				}
				return String((m < 10 ? "0" : "") + m + ":" + (s < 10 ? "0" : "") + s);
			}else {
				return "00:00";
			}
		};

	};// end player class
};// end package

You can download the entire source code here:

HDVideo_source

The library contains all the visual elements and in the Main.as file you can change which video sample to play.
There are three high-def videos to play with.
I uploaded them separately because they are quite big.
So, download it from here and place it in the video folder from the HDVideo_source.zip file.

Video files

Check this example out:
Arduino + Flash + Wii Nunchuck + Servos + Webcam

CaT 2009: Open source everything

I’d like to say this is not a biased statement, but I have to point out the pros and cons of each technology accordingly to my perspective and past experience.

First, I have coded, learned, failed and succeeded with both.
Back in the day I was so amused by the fact that we could code for visual purposes, at least for the web.

So, html came into play and it was fun understanding how all that could be wrapped with data and server-side processing.
From iframes to tables and later divs the language was evolving, slowly but forward.
And that is my point, it takes decades to something new get implemented in html, it took a long time to have a video tag!
Not to mention that html is an interpreted language, not compiled. It needs support form other technologies such as Javascript or back-end ones.
Now, the good part, it can be accessed from any browser, despite some incompatibilities, any app or device.
I am pretty sure that will evolve more in the short-term, new libraries and frameworks of all kinds will be more popular, useful and reliable.

On the other hand, Flash which is mistakenly know only as an animation program, or a way to “make annoying banners” for some (I am serious, I heard that so many time!s) is largely used for delivering digital content on the web, such as video (Youtube owes Flash a lot!), interactivity, 3d, etc.
From a basic prototyped language to a OOP version its language became a powerful resource for web development and adds that dynamic touch as if the webpage is another canvas itself.

There is a lot more to tell and discuss for both technologies, but to make my point clear, I am trying to say that both technologies are useful and there should be no need for such war. It reminds me of the Cold War, Coca-cola vs. Pepsi or Nike vs. Adidas, which means both sides, I mean both side supporters, are more concerned in attacking each other rather than providing better solutions for each technology.
When planes first came out, we didn’t loose cars, bikes or any other type of vehicles. Unfortunately, most people depend on cars more than anything else, but people support alternatives to that.
What about the user?Have we forgot it?To me this should all be about having a better experience on the web, whether it is done in Flash or HTML5. You also need a plug-in (runtime) for Java if you visit a webpage that contains Java apps or applets and still no one mentions that as a turn down for Java. Why do they do it for Flash?

Certainly, HTML5 will benefit the web and Flash use will decrease in the following years, but wouldn’t it be great if they both continue as the main technologies for front-end development? Who is the evil and the good guy here?

Behind this debate there are some many things we don’t know about it, corporations interested in increasing their profits and extinguishing competitors.
My advice for users is use both, don’t complain if it’s Flash the webpage you visit, you probably don’t know how much effort there is in order to bring you that information.
Also, don’t complain if that HTML5 site is killing your processor due to a canvas animation in the background. Eventually, you will have to choose one for certain apps, but don’t feel guilty in your decision, find a way to support both.
For developers, be aware of what’s going on, try them both, the more you understand both, the broader will be your options when it comes to use one technology for a specific project. You may like one more than the other, but coldly analyze what fits better your skills and needs for each app you work on.

Below is some good articles I read in the past few days. It’s more info for you to be wisely involved in this buzz.

Dan Mall post about the Cold War of the Web

Adobe Engineer explaining the nuances of Core Animation in Cocoa (MacOS)

Flash Player CPU performance analysis

The Future of Web Content

Check it out:
Adobe Technote