Adobe Flash and HTML5 – are we happy?

Days have passed, and I have deliberately not commented that much on the debate that has raged the net since Adobe Systems announced, that they wouldn’t continue the mobile Flash Player. What I have done, was observing the different phases of emotion that users where sharing with the rest of us. I saw mainly 3 categories: 1. Those who wan’t Flash dead yesterday, and didn’t think that this was one day too early. 2. Those who thought that this was the end of the World as we know it, and everything now turns to darker times (scenes with polluted cities and numb faceless people dragging them self around next to grey walls pops into my mind). 3. People with everything has it’s time – let’s see if it isn’t best for both part – sort of people. Let me first comment a bit on all three:

1. The “HA-HA. Dead by HTML5″-people

A lot of these people do not like Flash – no matter what it does … it is just pure evil. Some may have the program to crash their machine – other may just have heard of people who has a crash on their machine while Flash was installed. This group have made a choice not to support the platform on their device – or at all. If they have an iOS system, the choice is taken for them – they cannot decide for themselves. They see blank spots on websites, and think that the Internet should adapt to their needs and limitations (like iOS ever would the other way around) :-) The other part of the group are praising the open standards, and think that proprietary plug-ins are a bad thing – the Internet should be free, and no one should take ownership of any part of the experiences presented.

2. The “End of the world”-people

Well, Adobe did an awful job, communicating this announcement, and people just shimmed and was something like “OK, let’s see: Adobe announces … etc. etc. … Flash Pl… … Mobile … Discontinue … etc. etc. … Open  Web … Webkit … HTML5 ”

… AARRRRGH. Flash is dead. HTML5 killed it. Uuuh, Steve Jobs, you son of a #¤%#%& – are you happy now!! The next Apple fanboy that comes around, better be sorry or I’ll …

Well, maybe not that crazy, but a few words, where enough to make them go crazy, instead of rational thought of what their own mobile habits where. When we read what is gone, we also need to sum up, what is left. This has to be taken to a higher point of view, to understand the purposes (as I see them)

When Flash isn’t on mobile browsers, then whats next – desktop? … Linux? (oh, already) … AIR? … Illustrator and Photoshop?! Fact was, that the most recent Flash player on mobile browsers actually performed quite well on newer smartphones, so why? We wan’t the whole web. Everybody want the whole web – or do we?

3. The “Let’s see if it’s not for the best”-people

This group, have a habit of taking announcements up for consideration, and think of consequences and reasons for a given action. They may have various reasons for being in this group, but it could be something like: “I am not browsing that much on my phone – mostly searching information”, “I’m more into Apps”, “Drop all the fancy stuff, and give me some battery time back” or “HTML5 can do a lot of Flashy looking stuff – why not use that instead”.

A change in plans

When the iPhone came around, there was no Flash Player, that could stand up for The Jobs … so he turned it down. Having great interest in the Canvas-tag (read, previously patent, AFAIK), he thought that this was a better solution. Flash would lead to a poorer experience – how true that was. What he forgot to tell was, that it probably wasn’t solely a problem for the plug-in, but more a problem of bringing all the advanced stuff into a tiny phone with a tiny battery. You didn’t hear him say: “But that tends to be a general problem. We cannot do that with HTML5, either!” The fact was, that the advanced features of the Flash Player just didn’t fit well in these first generations of devices (both Android and iOS). Adobe thought that the “code once and deliver everywhere” should be adhered. They ported it to Android, that is more open than iOS and allows people to develop to the browser.

iOS on the other hand, had great success with the walled garden, and the term I call “iWay, or the highway”. In this closed ecosystem, things are taken care of for you, and you should have trouble doing all the things a computer should do … just what people wanted. Installation and removing Apps is easy … we actually think, that it cleans up, after itself, when we delete the App :-) Icons and folders for tools and games. Why go to the web to search for a recipe or play a game, when you can install and access it right on the phone – why use a browser for that, and remember URL’s etc.

Adobe was wrong, and realized it

Adobe kept trying to fulfill the promise of the full web, and code once and deliver everywhere. Apple said, they had the full web experience on iOS, ignoring the fact that it wasn’t true. And while the battle raged, and the fanboys where mooning each other, the normal users started to adapt and use the technology on it’s own premises.

Even though the possibility was there, no one created mobile specific solutions in Flash. You just couldn’t scale a website down to a little screen and bring the same experience from desktop to phone – Flash Player is a media container like video and images. It has a hard time, reflowing text or layout, when the browser size changes. When a demanding webpage finally came around, it was so FWA-like that it would pop out the battery from the back-cover on my device.

On the other hand, the user was downloading and shopping Apps in an extends hard to imagine. It was so easy to link to AppStore or Android Market from a website, and install directly on the phone. I have the feeling that a lot of users found it as an improvement to download an App from the site, to get some dedicated time with the content even after they have left the webpage.

The device isn’t ready

Flash has always been a plug-in for HTML and browsers. Images and video are easy to relate to HTML, but Flash is a bit harder. The main purpose of Flash is to take the user to experiences, the HTML can’t go. When HTML stops, Flash player is supposed to take over and deliver a media container, showing what’s really possible … but it is just a square on a web page. The demand for more and more sophisticated pages has previously driven HTML into the shadow, and made complete Flash-driven pages a viable solution, when trying to impress clients and end users.

Fact is: Devices sucks at that. Most devices can’t even handle HTML5 and canvas that well, and if we have a technology, that have more than enough to do with HTML in its newest revision, then there is no need for a “I’ll take over from here”-plugin like Flash.

Realizing that users didn’t used the browser on their mobile device for advanced content, but rather downloaded Apps, is for me a breaking point. Some tend to say that it was Steve Jobs, and his famous letter on Flash and his thoughts about it, that did the job. To some extend that may be right – not because he said it, but because his disciples kept preaching it as a gospel every time e person pushed the button. I think the main reason is that Apps came on strong, and users didn’t wan’t these complex operations in a floating window … not when it was performing like it did. Everything with App was fast and smooth, but the same experience on the net was not. I am convinced that we will not see any complex HTML5 solutions in browsers, before we have a completely new generation of devices in our hand.

fAIR solution

That leaves the net to HTML, and with HTML5 it has just brought more possibilities to the developers. Flash player is out of the browser (for some time at least) because it has nothing to do there. Flash Player 11.x is still there, so there will be plenty of possibilities for targeting mobile users in the future – don’t worry. But Adobe is taking Flash to places, where HTML5 cant go (at least not easily). The only place that can be done is on computers, that has more processing power, and a power cord, and to mobiles native applications. Only there, can Flash tap into the hardware that is needed to deliver great performance.

AIR is what’s taking care of that, and I think that it has a few advantages. If you target iOS native you are using Objective-C. If you are targeting Android, you are using Java. No developer on any of these platforms are able to deliver to the other side. AIR comes with the APPS-neutral AS3 language, that can be compiled to native Apps for both Android and iOS, and it is more and more important to support a wide range of platforms as the market shares levels out. Performance are better in native code, but I am pretty sure, that is a main focus for Adobe in the future.

Are we gonna play, or what?

games are another main aspect, that I see Adobe pays attention to. With the new 3D-capabilities and export functionality from Unity and other, I see browser based games on desktops as an interesting way to go. The way we play on a computer, is far from the way we entertain our self on a device – they cannot be matched. It is therefore Adobe is trying to make a plugin, that make games, independent on machine or browser, so you can develop a game, and make sure that all desktops can play it. How many games in HTML5 aren’t available, that only plays in Chrome or Safari etc. … I don’t think the browser war is ever gonna stop on that platform. When the player can utilize gamepads and joysticks, I think that we are going to see interesting games … and event sites, and company pages, that takes it to the max, and wouldn’t play on a desktop anyway.

Conclusion

I think that Adobes step is probably a way to “code once and deliver everywhere”. When Creative Suite next revision arrives (the six-pack) I think we will see Flash Professional, that takes the timeline and possibilities around that, and enables it to be converted to HTML5 – if that succeed, then what’s the harm. I mean, is it the player or the possibilities, that are most important. Then we will go way high on 3D and native App performance, and Flash as a platform is able to live on. Using HTML5 for mobile may be the only solution to “publish everywhere” in a non-plugin-browser-world.

I think that Adobe made a wise choice in taking the Flash Player out of market for a while. That can take all the browser Ads to HTML and get the devices to mature to a point, where there is more in the devices, that HTML5 can deliver. In the meantime Adobe can try to incorporate elements to HTML, that makes it easier to publish from Flash to HTML – CSS Shaders is a sign in that direction.

It all comes down to looking at behaviors, and identify objective, non-favored points of direction in them. I think that Adobe shifting focus here, is not a sign of weakness, but actually a sign of adapting to the users need – some companies could probably learn from that. Their skills in communicating, what I just tried here, is a completely different story. I am not saying, I do a great job here, but I know that Adobe didn’t.


Flash Platform is dead. Long live the Flash Platform

Adobe MAX has this year been an interesting and epic experience, in many ways. We have seen Adobe doing a lot of progress on the HTML5 platform, and no critiques can come and say, that they are trying to limit it’s possibilities in an attempt to favor Flash. Seing programs like Adobe Edge and Adobe Muse, shows a bright future for users, that are not tech-savy – bringing them new tools to make dynamic and interesting sites using web standards.

Some will say, that Flash is thereby obsolete. They may even use the “Flash-killer” word, but in my opinion that tells me more about there insight and knowledge about the platforms responsibilities, than HTML5 is superior when it comes to the sites of the future. HTML has always had the responsibility of bringing webpages to the user via the browser. The Flash Player has always been a plug-in, that made it possible to satisfy users demands in terms of interactivity, video etc. and complemented HTML, where it wasn’t sufficient. Now with HTML5, nothing has changed there.

The Flash Platform is dead

I will bring some love to new new HTML5 features in another post, but let me dvelve a bit on the head line. When I say, Flash is dead, I actually mean, the previous well known (and hated) use of the Flash Player is dead. Using Flash to make complete sites with the need of seekable information, and “efferent reading” has to stop. The small banners that pops up, with no reason at all, has to stop. If that is what you have used Flash  to produce, you should seriously consider broaden your mind – we have HTML for that, now. When it comes to aesthetic reading, engaging and entertaining the user. When it comes to breaking the boundaries, and search for new possibilities in what the web and devices can deliver, please continue. Flash has never intended to kill HTML, it depends on it. But the misuse  of technology from developers (myself included, from time to time) has given the technology a bad name.

Long live the Flash Platform

Fortunately, the platform is strong and very much alive, and the latest version of Adobe AIR and Flash Player brings signs of a bright future. When I discuss the topic with developers, they actually do not have a clear answer, when it comes to compatibility across multiple devices. Native Android developers, can’t enter en iOS sphere, and Xcode developers are forever doomed to live in the walled garden. Both of them, can only argue, that the other should join them … why not give the user a choice. I think that the Flash Platform is one of the best attempt to actually be agnostic in terms of platforms. I think it’s time to look at some of the features I find interesting

64-bit support

I don’t know what took them so long, actually. I am not aware of the complications that are involved in making 64-bit versions of software. I guess there must have been internal complications regarding codecs or other 32-bit stuff not yet upgraded or just the fact that making a 64-bit version of the AVM or the like isn’t a walk in the park. Anyway, now it’s available and works like a charm in my 64-bit version of Internet Explorer as well as my other browsers on both Windows and Mac OS. I haven’t tried the Linux version, but I haven’t heard anyone with complaints. Please post your experiences with performance, if you are a Linux user.

Captive runtime

Captive Runtime is captivating :-) Now developers have the choice to embed the AIR 3 runtime in the App, so people no longer need them as an external download. That, of course, brings a larger file to the devices, and it is therefore not just something you would do in all cases. In larger projects, and definitely on desktops, that seems like an obvious choice.

You can read about Captive runtime at http://www.adobe.com/devnet/air/articles/air3-install-and-deployment-options.html

Accelerated 2D

Flash is all about experiences. There is no need to use Flash, if you don’t wan’t to engage the users. If you just have some plain information to present, there is no need to roll out the big canons. The Flash Player is a plug-in that takes over, when the other give up, and can’t deliver – at least not with an economically reasonable solution. It is the easiest way to make impressive visual results, that works on all major platforms. Because of that, it is also a very demanding job, that takes a lot of processing power. With Flash Player 11 and AIR 3, Adobe has made it possible to port most of the calculations to the graphic card, so the processor is free to other tasks. That increases the performance immensely, all the previous examples (like those on http://www.bytearray.org/?p=3371) would have made the fan fly out of my MacBook Pro after 4 seconds … now there is silence.

One of the most prominent examples are the Starling Framework. Starling is very intuitive, and use well known word like Sprite and addChild() and genrally build upon the concept of the Display List.

To get this performance boost, Flash takes advantage of Stage 3D, and that is only available for desktops at the moment. Adobe is working hard to implement it in the mobile version, but Android have to wait until a later update. That also means, that we are in a time, where some content actually can’t be played on mobile, even though they are at the same player level … that’s not good, but hopefully sorted out in a near future.

JSON

Everybody is talking about JSON these days, and for a reason. The format makes it possible to exchange data in a readable way using a JavaScript like syntax. Both JavaScript and ActionScript 3.0 derives from the same standard, making it easier to work with and understand for some, in contrast to the XML language. You have always been able to read JSON into a Flash document, but the internal support makes is consistant and faster to get the data ready for use. Actually, we are are talking one line here to get it all parsed.

Adobe MAX gave a sneak at the next version of Flash (codename Reuben) that exported a sprite sheet of a characters walking cycle. That shows something about JSON as a serious and integrated way of making 2D games and motion in the years to come.

Stage 3D

When Flash introduced the ability to work with z-coordinates and move 2D objects in a 3D space (in CS4 i guess) the crowd went wild – everybody was happy. Then they realized, that i actually wasn’t as good as real 3D, and the need for manipulating real 3D objects was on the rise again. When Adobe released the first previews of Flash Player 11, it was jaw dropping. Thibault showed a red car driving around in a virtual street, and no one in the room could believe their eyes. But it was real, and with the release, they showed Unreal Tournament 3 from Epic Games, running in a browser.

That tells me, that the Flash Player has taken it’s responsability as a plug-in serious, and goes for the balls, that HTML5 has a hard time to catch. I am sure we are going to see web experiences in the years to come, that we had a hard time to imagine only a year ago. On top of Stage 3D’s low level API a range of external companies has build frameworks for us to use. Some of the well known are Alternativa, Flare3D and Away 3D. Of course you could dive into the low API, but the other way around is much easier for normal developers and designers.

Aside from that, there is a project called Proscenium on Adobe Labs, that is a code library used to acces the low-level API, to easely create 3D content in Flash Player 11.

Read more about the wonderful world of Stage 3D at http://www.adobe.com/devnet/flashplayer/stage3d.html

Native Extensions

On the mobile platform, there is a constant demand for speed and integration with the system. Native tools like Xcode and Android SDK has an advantage over runtimes like AIR, in that they have full control over the system. AIR isn’t able to access the inner workings of the mobile platform, so you could not access the local API. AIR it self is making progress, like native keyboard on devices and frontface camera access, but the big leap forward here is Native Extensions. Now you can program an extension to AIR in the native language of the device, and AIR is then able to attach to it and communicate with it. There has already been examples of Map View on iOS and connection to Kinect controller without a proxy. I haven’t tried native extensions in myself, but it seems like it’s going to be a big deal if it runs smoothly.

Content Protection

I love the way that HTML5 has taken websites seriously again. I like the easy way, that video is treated. If all browsers could agree on the codec, it could end up as a good solution. The problem is that there is no protection embedded with the video. You could just copy the link and download the movie. Many content providers aren’t that happy about that. There are solutions to solve that, but I sense that they are moving away from the clean HTML5 solution. Flash and AIR has build in Flash Access that secures the content. Initially it only works with desktop and Android, and I guess that the way into Apples heart is a bit longer :-)

Heal the Web, make it a better place

This is just some of the news. You can read more at the Flash Player 11 feature page and the AIR 3 feature page. This is an epic release, that will mark the start of a new era – the 3D era. We will se browsers taking HTML5 to the max, and transitions like fade and slide, will be everyday for the common designer. But when the smoke disappears, the need to do the extraordinary will emerge – this is where Flash kicks in. Flash Player will fulfill it’s role as the plug-in, that helps HTML getting things done. AIR is taking a different path down the mobile path. It is an interesting path, but it is not quite there yet. It is there in terms of being able to deliver a more than decent result on various devices, but the “works on Android, soon on iPhone” makes it not quite stable yet. It will be, hopefully soon.

I think that this release, shows that there is a world, where both technologies can live in harmony – and truly believe they will. We haven’t talked about topics like all the Smart TVs that supports the platform. We have only briefly talked about Epic Games, but Unity has also shown support to deliver on Stage3D. Aside from that, there is the Open Screen Project, that count a broad range of manufacturers , interested in making a common platform for Rich Internet Applications end experiences.

I know that the Flash Player aren’t allowed on iOS – well no plug-ins are, no harm there … but AIR are. AIR, may end up being a long term solution, if they fix the minor incompatibility. Flash Player is now a solid 64-bit plug-in, and yes – everybody is trying to find exploits and security breaches on it, but then again. It is on a lot of machines, end therefore a perfect target, across platforms. Adobe should be on it’s toes to close these security issues and gain trust in the platform, and then – when iOS settles at a reasonable level, the market will decide if users with the plug-in is more interesting than those without.

… only time will tell.


HTML5 canvas with JavaScript and Flash Player performance

This post is an examination of the performance provided by JavaScript and the canvas HTML element, and its role on mobile platforms in the future. The inspiration for this post came when I stumpled on Water Ripple Canvas by Almer Thies. It was running without problems (with Canvas: 20fps and Water: 30 fps) on my computer but was frighteningly slow with a max of 0.5 fps on my iPhone 4 (yep. A half frame per second!). I therefore found it relevant to produce a comparable piece of code that could run on the canvas element and easily port to Flash, so I could get an idea of how well each technology performed.
It is not a secret that I’m fond of the Adobe Flash Player, and have always believed that Apples excommunication of the player due performance issues had no standing ground, in light of the present alternatives. But HTML5 is a promising technology, that takes the job as website maker seriously again, and that may result in Flash being able to focus on it plug-in nature again, and help lift sites up above the tomorrows standard sites. The most important topic to discuss is: what should happen when our mobile visits a website in the month/years to come. Not distinguishing  between mobile and desktop would lead to sluggish performance on mobiles when canvas gets integrated in eager designers creative solutions – a future that I predict as the “big dip”, in the worst cases.

Study 1

The test case is the famous snowflake that are loved or hated by everyone. The effect is exclusively produced by code and can be scaled easily to increase the load on the processor. I found an example at http://blog.webreakstuff.com/2010/11/building-a-canvas-snowglobe/ by Pedro Freitas. The code can be found on GitHub via https://gist.github.com/716215. I would also use an FPS counter, which could easily be ported to ActionScript and chose snippet from http://stackoverflow.com/questions/4787431/check-fps-in-js
I need it to produce a working example of the FPS counter that can be found at http://eksempler.hjaelpmignu.dk/flash/actionscript/snowflake/snowcanvas.html. I have come to the following data (max is set to 100 FPS):
  • Desktop PC: 99.9 FPS (Firefox)
  • MacBook Pro: 97 - 98 FPS (Safari)
  • iPad (iOS 4.3): 19 - 20 FPS (updated 17/3 – 2011)
  • HTC Desire HD (2.2): 15.5 - 16.5 FPS
  • Inspire 4G (2.3): ~ 14 FPS (updated 17/3 – 2011)
  • HTC Desire (2.2): 14.4 - 14.7 FPS
  • iPad 1 (iOS 4.3): 13 – 13.5 FPS (updated 17/3 – 2011)
  • iPad 1 (iOS 4.2): 12.4 - 13.3 FPS
  • iPhone 4 (iOS 4.3): 9.9 - 10.5 FPS (updated 17/3 – 2011)
  • iPhone 4 (iOS 4.2): 9.9 - 10.3 FPS
  • iPhone 3GS (iOS 4.2): 9.9 - 10.3 FPS
  • HTC Legend: 7.5 - 8.9 FPS
Thanks to @seb_ly and @leebrimelow for additional test results
When I dropped the restriction the PC actually easily spun on over 200 FPS, but the intention here is not to benchmark in the high end, but find a relationship in the “low end” and a relative measurement to a standard machine. PC as well as Mac differ so much on hardware as well as range of browsers, it will not contribute anything positive to uncover all facets.

Conclusion 1

It is evident that both computers frame rates hits the ceiling. The portable Mac has thrown a frame or two in the test, but will probably do 100 FPS in a another run, or with another browser. Of course it cannot run from a Quadro graphics card, but it’s clearly capable of running the test. iOS machines (iPad 1, iPhone 3GS and iPhone 4) has a hard time, to produce frames for the canvas element. On average, they just over 10 FPS.
Desire HD is a bit higher. Not much, but still enough that it should be designated as a better settlement. Lowest is the HTC Legend, with around 8 fps.

Study 2

The second test was made to compare performance between javascripts work on the canvas, and Flash Player’s work with the BitmapData class. The technique used for both are very similar and it will give the best basis for comparison, and minimal editing of the code. You can see an example at http://eksempler.hjaelpmignu.dk/flash/actionscript/snowflake/snowFLA.html
The following changes have been made from the original code:
  • Snow flakes was made as a separate class (Flake.as)
  • Updated variables, etc so they are strictly typed
  • Minor changes in variable names
  • Used Flash Player’s flash.sensors.Accelerometer to handle motion

Flake.as

 

package 
{ 
import flash.display.Sprite; 
import flash.display.BitmapData; 

public class Flake extends Sprite 
{ 
private var canvasWidth; 
private var canvasHeight; 
private var speed: Number; 
private var alpha: Number; 
private var size: Number; 
private var amp: Number; 
private var shift: Number; 
private var range: Number; 

public function Flake (w, h, a, s) 
{ 
this.canvasWidth = w; 
this.canvasHeight = h; 
this.x = 200; 
this.y = Math.random () * -1 * h; 
this.alfa = Math.random () * 0.5 + a; 
this.speed = Math.random (); 
this.size = s - this.speed - this.alfa; 
this.amp = Math.random () * 2; 
this.shift = Math.random () * 25 + 25; 
if (Math.random ()> 0.5) 
{ 
this.shift *= -1; 
} 
this.drift = Math.random () - 0.5; 
draw (); 
} 
public function draw (canvas: BitmapData = null): void 
{ 
this.graphics.beginFill (0xFFFFFF, this.alfa); 
this.graphics.drawCircle (0.0, this.size); 
this.graphics.endFill (); 
} 
public function move (f, wind): void 
{ 
this.y + = this.speed; 
this.x + = Math.cos (f / this.shift) * this.amp + + this.drift wind; 
if (this.y> this.canvasHeight) 
{ 
this.restart (); 
} 
} 
public function restart (): void 
{ 
this.y = -20; 
this.shift = Math.random () * 25 + 25; 
this.x = 200; 
} 
} 
}

 

 

MainApp.as

package
{ 
import flash.display.Sprite; 
import flash.display.Bitmap; 
import flash.display.BitmapData; 
import flash.utils.Timer; 
import flash.events.TimerEvent; 
import flash.geom.Rectangle; 
import flash.geom.Matrix; 
import flashx.textLayout.elements.InlineGraphicElement; 
import flash.sensors.Accelerometer; 
import flash.events.AccelerometerEvent; 
import flash.text.TextField; 

public class MainApp extends Sprite 
{ 
private var bgflakes: Array = new Array (); 
private var fgflakes: Array = new Array (); 
private var bgFlakeCount: int = 200; 
private var fgFlakeCount: int = 50; 
private var frame count: int = 0; 
private var wind: int = 0; 
private var dWidth: int; 
private var dHeight: int; 
private var orientX: int = 1; 

private var bgBitmapData: BitmapData; 
private var bgCanvas: Bitmap; 
private var fgBitmapData: BitmapData; 
private var fgCanvas: Bitmap; 
private var timer: Timer; 
private var orientation: Boolean = false; 
private var myAcc: Accelerometer; 

private var filter Strength: int = 20; 
private var frame hours: int = 0; 
private var loading loop: Date = new Date (); 
private var this loop: Date = new Date (); 

private var fps: TextField; 

public function MainApp () 
{ 
init (); 
} 

private function init () 
{ 
dWidth = this.stage.stageWidth; 
dHeight = this.stage.stageHeight; 
bgBitmapData = new BitmapData (dWidth, dHeight, false, 0x000000); 
bgCanvas = new Bitmap (bgBitmapData); 
fgBitmapData = new BitmapData (dWidth, dHeight, true, 0xFF0000); 
fgCanvas = new Bitmap (fgBitmapData); 
addChild (bgCanvas); 
addChild (fgCanvas); 

fps = new TextField (); 
addChild (fps); 
fps.textColor = 0xFFFFFF; 

was i = 0; 
for (i = 0; i { 
bgflakes.push (New Flake (bgCanvas.width, bgCanvas.height, 0,3)); 
} 
for (i = 0; i { 
fgflakes.push (New Flake (fgCanvas.width, fgCanvas.height, 0.2,4)); 
} 
hours = new Timer (10); 
timer.addEventListener (TimerEvent.TIMER, draw); 
timer.start (); 

if (Accelerometer.isSupported) 
{ 
orientation = true; 
myAcc = new Accelerometer (); 
myAcc.addEventListener (AccelerometerEvent.UPDATE, onAccUpdate); 
} 
} 

private function onAccUpdate (e: AccelerometerEvent): void 
{ 
orientX = e.accelerationX; 
} 

private function setWind () 
{ 
if (! orientation) 
{ 
was mx: Number = mouseX - dWidth / 2; 
wind = (mx / dWidth) * 3; 
} 
lodging 
{ 
Wind = Number (orientX) * 3; 
} 
if (! wind) 
{ 
wind = 0; 
} 
} 

private function draw (e: Event hours) 
{ 
frame count + = 1; 

bgBitmapData.fillRect (new Rectangle (0.0, dWidth, dHeight), 0x000000); 
fgBitmapData = new BitmapData (dWidth, dHeight, true, 0xFF0000); 
setWind (); 
was: int = 0; 
for (i = 0; i { 
bgflakes [i]. move (frame count, wind); 

bgBitmapData.draw (bgflakes [i], new Matrix (1,0,0,1, bgflakes [i]. x, bgflakes [i]. y)); 
} 
for (i = 0; i { 
fgflakes [i]. move (frame count, wind); 

fgBitmapData.draw (bgflakes [i]); 
} 

was this frame hours: int = (Number (this loop = new Date ())) - Number (last loop); 
Frame hour + = (this frame - time frame hours) / filter strength; 
load loop = this loop; 
fps.text = (1000/frameTime). toFixed (1) + "fps"; 
} 
} 
}

 

Comments on Code
I have kept the draw () inside the Flake class and draw the flakes with graphics.drawCircle () to keep the code across the examples as similar as possible. The transfer of values on canvas size, etc. are also retained in the Flash version is also preserved. Finally, I used Bitmap () and BitmapData () to simulate the properties used on the canvas element.

Results 2

With mobile units, that is capable of running Flash Player 10.1 and canvas, I try to measure them against each other. Not as a battle, favoring one technology, for the future (I think) belongs to them both. It’s more an attempt to find out how bad Flash performs and supporters of the canvas as a “Flash Killer” has some back support. I’ll update as I stumple on different phones/tablets on my way:
  • Dersire HD (2.2): Canvas ~ 16.5 FPS and Flash 10.1 ~ 24.2 FPS
  • Inspire 4G (2.3): Canvas ~ 14 FPS and Flash 10.1 ~ 22 FPS (updated 17/3 – 2011)
  • HTC Desire (2.2): Canvas ~ 14.5 FPS and Flash 10.1 21.7 to 23.5 FPS
You are welcome to submit own measurements

Conclusion

I get a relatively higher frame rate when running the test in Flash Player on Android than if I the canvas version. I wasn’t able to turn the relationship between the numbers on my phone, not even leveling the difference in frame rate. I therefore think that the user will have a better experience of this experiment in a flash player, than with a canvas version. It is important to remember that the canvas element’s ability to deliver, do not need to inflict on the general view on HTML5 and CSS3. My feeling is that CSS3 has a fairly good performance on the mobile devices, perhaps because of their predictable nature, but I haven’t investigated that topic yet.
Finally, I have not taken installed software on the devices into account. It may be relevant in a recount to look at parameters such as:
  • How long the phone has been switched on.
  • Is it connected to the charger.
  • Programs running in the background.
  • Video documentation of test
My point here is to get some numbers up in the air, and a comparison of material playd on mobile devices. Please reply with the results of your own measurements for computer, tablet and mobile.
Links to tests:
Links to documents

HTML5 canvas med JavaScript og Flash Player performance

Dette indlæg er en undersøgelse af den performance som præsteres af henholdsvis JavaScript og Canvas elementet og dets rolle på mobile platforme i fremtiden. Inspirationen fik jeg da jeg kom forbi Almer Thies Water Ripple Canvas der kørte uden problemer (med Canvas: 20fps og Water:30 fps) på min computer men skræmte mig fra vid og sans med et maks på 0.5 fps på min iPhone (yep. En halv frame i sekundet!!). Jeg fik derfor en idé om at finde et sammenligneligt stykke kode, der kunne afvikles fra canvas og nemt porteres til Flash, så jeg kunne danne mig et overblik over hvor godt de hver i sær præsterede.
Selv er jeg tilhænger af Adobe Flash Player og har altid ment at iOS bandlysning af den på grund af performance ikke havde nogen gang på jord, set i lyset af alternativerne. At vi så grundlæggende skal tage os en grundig snak om, hvad der skal ske, når vores mobile enheder besøger en hjemmeside i årene der kommer, er en helt anden snak – en fremtid, som jeg spår som “det store dyk”, i værste tilfælde.

Forsøg 1

Valget faldt på de berømte snefnug, som er elsket/hadet af alle. Effekten bliver udelukkende produceret med kode, og kan skaleres nemt for at øge belastningen. Jeg fandt et eksempel på http://blog.webreakstuff.com/2010/11/building-a-canvas-snowglobe/ af Pedro Freitas. Koden kan findes på Github via https://gist.github.com/716215. Jeg skulle også bruge en FPS-counter, der nemt kunne porteres til ActionScript og valget faldt på kodestumpen fra http://stackoverflow.com/questions/4787431/check-fps-in-js
Jeg har brug det til at producere et virkende eksempel med FPS-counter, der kan findes på http://eksempler.hjaelpmignu.dk/flash/actionscript/snowflake/snowcanvas.html. Jeg er kommet frem til følgende data (max er sat til 100 FPS):
  • Desktop PC: 99.9 FPS (Firefox)
  • MacBook Pro: 97 - 98 FPS (Safari)
  • iPad (iOS 4.3): 19 - 20 FPS (opdateret 17/3 – 2011)
  • HTC Desire HD (2.2): 15.5 - 16.5 FPS
  • Inspire 4G (2.3): ~ 14 FPS (opdateret 17/3 – 2011)
  • HTC Desire (2.2): 14.4 - 14.7 FPS
  • iPad 1 (iOS 4.3): 13 – 13.5 FPS (opdateret 17/3 – 2011)
  • iPad 1 (iOS 4.2): 12.4 - 13.3 FPS
  • iPhone 4 (iOS 4.3): 9.9 - 10.5 FPS (opdateret 17/3 – 2011)
  • iPhone 4 (iOS 4.2): 9.9 - 10.3 FPS
  • iPhone 3GS (iOS 4.2): 9.9 - 10.3 FPS
  • HTC Legend: 7.5 - 8.9 FPS
Tak til @seb_ly og @leebrimelow for yderligere testresultater
Jeg droppede begrænsningen og så at PC’eren faktisk nemt snurrede den over 200 FPS, men meningen her er ikke at benchmarke i den høje ende, men finde et forhold i “den lave ende” og en relativ måling til en standard maskine. PC såvel som Mac varierer så meget på hardware samt udvalg af browsere, at det ikke vil bidrage til noget positivt at afdække alle facetter.

Konklusion

  • Det er klart at fornemme at begge computere rammer toppen. Den bærbare Mac har smidt en frame eller to i testen, men vil sikkert ramme 100 FPS i en anden. Selvfølgelig kan den ikke løbe fra et Quadro grafikkort, men klart er det at der er rigelig overskud til at løse opgaven.
  • iOS maskinerne (iPad 1 og iPhone 4) har en hård tid, med at producere frames til canvas elementet. I gennemsnit ligger de på lidt over 10 FPS.
  • Desire HD ligger en smule højere. Ikke meget, men alligevel nok til at det må betegnes som en bedre afvikling.

Forsøg 2

Forsøg nummer to var lavet for at sammenligne performance mellem JavaScripts arbejde på canvas, samt Flash Playerens arbejde med BitmapData klassen. Teknikken der bruges til begge er meget ens, og det vil give det bedste sammenligningsgrundlag, og mindst mulig redigering i koden. Du kan se et eksempel på http://eksempler.hjaelpmignu.dk/flash/actionscript/snowflake/snowFLA.html
Følgende ændringer er blevet foretaget fra originalkoden:
  • Snefnug lavet som en selvstændig klasse (Flake.as)
  • Har opdateret variabler osv så de er strict typed
  • Mindre ændringer i variabel navne
  • Brugt Flash Playerens flash.sensors.Accelerometer til at håndtere bevægelse
Flake.as

package
{
import flash.display.Sprite;
import flash.display.BitmapData;

public class Flake extends Sprite
{
private var canvasWidth;
private var canvasHeight;
private var speed:Number;
private var alfa:Number;
private var size:Number;
private var amp:Number;
private var shift:Number;
private var drift:Number;

public function Flake(w,h,a,s)
{
this.canvasWidth = w;
this.canvasHeight = h;
this.x = 200;
this.y = Math.random() * -1 * h;
this.alfa = Math.random() * 0.5 + a;
this.speed = Math.random();
this.size = s - this.speed - this.alfa;
this.amp = Math.random() * 2;
this.shift = Math.random() * 25 + 25;
if (Math.random() > 0.5)
{
this.shift *=  -1;
}
this.drift = Math.random() - 0.5;
draw();
}
public function draw(canvas:BitmapData = null):void
{
this.graphics.beginFill(0xFFFFFF,this.alfa);
this.graphics.drawCircle(0,0,this.size);
this.graphics.endFill();
}
public function move(f,wind):void
{
this.y +=  this.speed;
this.x +=  Math.cos(f / this.shift) * this.amp + this.drift + wind;
if (this.y > this.canvasHeight)
{
this.restart();
}
}
public function restart():void
{
this.y = -20;
this.shift = Math.random() * 25 + 25;
this.x = 200;
}
}
}

 

MainApp.as
 

package
{
import flash.display.Sprite;
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.utils.Timer;
import flash.events.TimerEvent;
import flash.geom.Rectangle;
import flash.geom.Matrix;
import flashx.textLayout.elements.InlineGraphicElement;
import flash.sensors.Accelerometer;
import flash.events.AccelerometerEvent;
import flash.text.TextField;

public class MainApp extends Sprite
{
private var bgflakes:Array = new Array();
private var fgflakes:Array = new Array();
private var bgFlakeCount:int = 200;
private var fgFlakeCount:int = 50;
private var frameCount:int = 0;
private var wind:int = 0;
private var dWidth:int;
private var dHeight:int;
private var orientX:int = 1;

private var bgBitmapData:BitmapData;
private var bgCanvas:Bitmap;
private var fgBitmapData:BitmapData;
private var fgCanvas:Bitmap;
private var timer:Timer;
private var orientation:Boolean = false;
private var myAcc:Accelerometer;

private var filterStrength:int = 20;
private var frameTime:int = 0;
private var lastLoop:Date = new Date();
private var thisLoop:Date = new Date();

private var fps:TextField;

public function MainApp()
{
init();
}

private function init()
{
dWidth = this.stage.stageWidth;
dHeight = this.stage.stageHeight;
bgBitmapData = new BitmapData(dWidth,dHeight,false,0x000000);
bgCanvas = new Bitmap(bgBitmapData);
fgBitmapData = new BitmapData(dWidth,dHeight,true,0xFF0000);
fgCanvas = new Bitmap(fgBitmapData);
addChild(bgCanvas);
addChild(fgCanvas);

fps = new TextField();
addChild(fps);
fps.textColor = 0xFFFFFF;

var i = 0;
for (i=0; i 			{
bgflakes.push(new Flake(bgCanvas.width, bgCanvas.height,0,3));
}
for (i=0; i 			{
fgflakes.push(new Flake(fgCanvas.width, fgCanvas.height,0.2,4));
}
timer = new Timer(10);
timer.addEventListener(TimerEvent.TIMER, draw);
timer.start();

if (Accelerometer.isSupported)
{
orientation = true;
myAcc = new Accelerometer();
myAcc.addEventListener(AccelerometerEvent.UPDATE, onAccUpdate);
}
}

private function onAccUpdate(e:AccelerometerEvent):void
{
orientX = e.accelerationX;
}

private function setWind()
{
if (! orientation)
{
var mx:Number = mouseX - dWidth / 2;
wind = (mx/dWidth)*3;
}
else
{
wind = Number(orientX) * 3;
}
if (! wind)
{
wind = 0;
}
}

private function draw(e:TimerEvent)
{
frameCount +=  1;

bgBitmapData.fillRect(new Rectangle(0,0,dWidth, dHeight),0x000000);
fgBitmapData = new BitmapData(dWidth,dHeight,true,0xFF0000);
setWind();
var i:int = 0;
for (i=0; i 			{
bgflakes[i].move(frameCount, wind);

bgBitmapData.draw(bgflakes[i], new Matrix(1,0,0,1,bgflakes[i].x, bgflakes[i].y));
}
for (i=0; i 			{
fgflakes[i].move(frameCount, wind);

fgBitmapData.draw(bgflakes[i]);
}

var thisFrameTime:int = (Number(thisLoop=new Date())) - Number(lastLoop);
frameTime+= (thisFrameTime - frameTime) / filterStrength;
lastLoop = thisLoop;
fps.text = (1000/frameTime).toFixed(1) + " fps";
}
}
}

 

Kommentarer til koden
Jeg har beholdt draw() inde i Flake klassen og tegner den fysisk op med graphics.drawCircle() for at beholde koden på tværs af eksemplerne. Overførsel af værdier om canvas-størrelse osv. er også bevaret i Flash eksemplet er også bevaret. Endelig er der brugt Bitmap() og BitmapData() til at simulere de egenskaber som bruges på canvas elementet.

Resultat 2

På modeller, hvor der både kan køres Flash Player 10.1 og canvas vil jeg prøve at teste dem op mod hinanden. Ikke så meget en kamp mellem det ene og det andet, for fremtiden (tror jeg) tilhører dem begge, men mere et forsøg på at finde ud af, hvor dårlig Flash præsterer og om tilhængere af canvas, som “Flash Killer” har noget at have det i. Jeg vil opdatere efterhånden som jeg rammer flere forskellige telefoner på min vej:
  • Dersire HD (2.2): Canvas ~ 16.5 FPS og Flash 10.1 ~ 24.2 FPS
  • Inspire 4G (2.3): Canvas ~ 14 FPS og Flash 10.1 ~ 14 FPS (opdateret 17/3 – 2011)
  • HTC Desire (2.2): Canvas ~ 14.5 FPS og Flash 10.1 21.7 to 23.5 FPS
I er velkommen til at indsende oprigtige målinger

Konklusion

Jeg ser en relativ højere frame rate når jeg afvikler i Flash Player på Android, end hvis jeg udfører tilsvarende med canvas elementet. Det er ikke lykkedes mig at vende forholdet mellem tallene på min telefon, end ikke få dem til at nærme sig hinanden, mærkbart. Jeg vil derfor mene at brugeren vil have en bedre oplevelse af dette eksperiment i en Flash Player, end ved en canvas-løsning. Det er vigtigt at huske på, at canvas elementets evne til at præstere, ikke behøver at gå ud over den generelle opfattelse af HTML5 og CSS3. Min fornemmelse er, at CSS3 har en ok afvikling på de mobile enheder, måske på grund af deres forudsigelige natur, men det har jeg stadig tilbage at undersøge.
Endelig har jeg ikke forholdt mig til, hvad der er installeret på enhederne. Det kan være relevant i en fintælling at se på parametre som:
  • Hvor lang tid telefonen har været tændt.
  • Er den tilsluttet oplader.
  • Kører der programmer i baggrunden.
  • Videodokumentation af test
Mit ønske her er at få nogle tal i luften, og et forhold til den relativt ringe afvikling af materiale på mobile enheder.
Meld gerne tilbage med resultater af jeres egne målinger på computer, tablet og mobil.
Links til tests:
Links til dokumenter

Er der en fremtid for Adobe Flash Player når HTML5 sætter sig i sadlen

Der er mange diskussioner om hvordan der skal kommunikeres på Internettet i fremtiden, og mange klumper af mudder flyver fra henholdsvis Flash og HTML lejren, med forsøg på at berettige deres egen eksistens. Når designere og udviklere er så passioneret, som de heldigvis ofte er, kommer klapperne desværre op og de glemmer at zoome lidt ud og se det hele i et større perspektiv. Jeg selv, er jo en Adobe mand af guds nåde og elsker alt, hvad der har med design af interaktive løsninger at gøre, så jeg bliver rendt meget på dørene med spørgsmål som “Er Flash en død sild?”, “Kan man overhovedet noget med HTML?”, “Hvordan er performance?”, “Kan man lave Flash sites uden flash?” osv.

Jeg er selvfølgelig meget optaget af mulighederne på Flash Platformen, fordi det er en platform der byder på et utal af muligheder for at udtrykke sig og det gør det til et spændende udgangspunkt til projekter. Jeg er lige så optaget af HTML platformen og dermed også hele HTML5 “brandet” (inkl. CSS og JavaScript) da det bringer nye muligheder for at layoute oplevelser og kommunikere effektivt direkte i en browser.

Hvad skal Flash til for?

Flash har altid haft til opgave at løse interaktive og dynamiske opgaver, som HTML ikke kunne løfte selv – sådan er livet som plugin. Det gælder ikke bare Flash, men alt fra Quicktime player til video og over til Unitys web player til 3D indhold. HTML har altid været (og vil forhåbentlig altid være) et opmærkningssprog, som kan bruges til at definere indholdet på et website. Det bliver efterfølgende knyttet til et stylesheet, der definerer hvordan det skal se ud i en browser. JavaScript har endelig kunne forholde sig intelligent til brugerens måde at agere og derved variere over eller reagere på dele af indholdet. Der er mange flere facetter, men som grov skitse, går det nok an.

Problemerne er opstået, da Flash har kunnet løfte mange af de layoutmæssige og interaktive muligheder og samtidig været overlegen, uden sammenligning, når det gjaldt at integrere dynamik, animation, lyd, interaktion osv. Det har gjort det nemt for mange at bruge flash som fundament for hele sitet og ikke bare en plugin, der skal løse en opgave på et website. Ulempen ved dette er de navigationsmæssige udfordringer, søgemaskineoptimering og det faktum, at der skal meget til for at erstatte den grundrendering som er givet fra browseren

Der skal være en god bund

Den vigtigste opgave for HTML er at markere indholdet på et site. Du bruger et h-tag til overskriver, img-tag til billede osv. De nye tags i html5 giver øget mulighed for at definere om der er tale om navigation, artiker, video, lyd osv. Dette er et stort fremskridt, da det derved er muligt at forholde sig til den rene information og trække informationer på tværs af sites. Skal jeg bruge indholdet fra en artikel, kan jeg nemt fangle et <article> tag og vide at al relevant infromation bliver flyttet med. Dette vil lette presset på <div> tags (dividers) og gøre at de får arbejdsro til at opdele i forhold til layout og ikke indhold.

Gøgeungen skal væk

En af de største irritationsmomenter ved Flash er, at designere og udviklere har været fristet af de frie layoutmuligheder med Adobe Flash Professional. Følelsen af at kunne styre layoutet 100% uden at tænke på bokse og CSS har gjort at mange sites udelukkende er lavet med Flash. Lige så snart at <body> tag’et er kommet på banen, har dets eneste opgave været at vise én kæmpe swf-fil og absolut intet søgebart html … hvis jeg var html, ville jeg også blive stik tosset.

 Designere skal, endnu mere i fremtiden, lære at bruge det bedste værktøj tilat løse opgaven. Der skal ikke laves Flash-sites fordi det er nemt – der skal laves Flash-sites fordi det er det rigtige at gøre. Hvis en designløsning umiddelbart kan lade sig gøre med html5 og css3 bør og skal den laves med disse teknologier – alt andet vil være et skridt ned at stigen.

Du vil i fremtiden se flere veldesignede html5 løsninger, der løser opgaver og udtrykker sig på samme måde som du er vant til at se produceret med Flash idag.

Hvad med Javascript og canvas

Når snakken er faldet på html5 som en Flash-killer, har de fleste egentlig ment at Javascript, med muligheden for at tilgå <canvas> tag’et har givet browseren et værktøj, der stort set kan løse alle opgaver som Flash har stået for. Jeg vil ikke gå i detaljer med teknikken, men der er en del der skal løses før den metode kommer i nærheden af Flash Playeren. Eksempler som jeg lige kan komme på er:

  • Performance. Der er stor forskel på hvor godt JS afvikles på de forskellige platforme
  • Stabilitet. Der er forskel på hvordan JS afvikles på de enkelte platforme
  • Tilgang til Virtuel Motor. En oversigt på http://en.wikipedia.org/wiki/JavaScript_engine viser, hvor mange forskellige motorer, der findes til browserne
  • Opdateringsgrad. Flash Player’en har mulighed for at opdatere sig jævnligt og implementere nye tiltag. Standarder er ofte årevis om at blive enige
  • Er ikke en plug-in. Fordi Javascript ikke er en plug-in kan du ikke skræddersy din oplevelse på tværs af browsere, men må tilpasse den til målgruppen.

Det er ikke fordi oventstående kun er af det onde, men det er nogle af de faktorer, der gør at der stadig er behov for properitære plug-ins der løfter de umiddelbare behov der stilles, indtil en standard kan defineres – en standard, der ofte er fremkommet efter at enkelte udviklere har præsenteret deres løsning på et problem. F.eks. er WebGL ved at samle sig efter år, men udbrydergrupper og konsollideringer. Det er nu, efter omkring 5 år, ved at nå til et punkt, hvor den kan bruges i nyere browsere (mangler dog stadig Internet Explorer). Der er ikke noget der tyder på at det vil gå hurtigere, når det “næste nye” bliver opfundet, hvilket giver nogle ret lange svartider på spørgsmål om innovation.

Jeg ser dog en stor fremtid i at JavaScript kommer til at servicere HTML5 og sørge for at logikken, der skal præsentere HTML elementerne bliver varetaget. Formvalidering, jQuery bliver fast inventar i fremtiden. Jeg har sværere ved at se Javascript skulle løse opgaver der ikke er bundet til html – ikke fordi det ikke er teknisk muligt, men simpelhen fordi jeg tror det bliver for bøvlet at udvikle og bliver afviklet for dårligt i browseren.

Endelig ser jeg stort set alle reklamer i fremtiden udviklet i HTML/CSS og JavaScript, da det vil give et bredere marked og en bedre integration i forhold til kontekst. Det bliver sværere for ad-blockers i fremtiden at adskille indholdet, og man kunne i sit stille sind have håbet på et <advertisement> tag i specifikationerne (selv om den nok ikke ville blive brugt) :-)

Hvornår kan man bruge det

Selvom de mere skeptiske siger i 2022, er det min klare opfattelse at du skal bruge det, når en overvejende del at brugerne understøtter det. Du skal selvfølgelig være opmærksom på mulighederne for at præsentere indholdet i browsere der ikke understøtter det, men der er ikke nogen grund til at udelade alt det nye, fordi 15% af de besøgende ikke er opdateret (der er typer at sites, der ikke kan være så frimodige) :-)

Hvis du vil have en god oversigt kan du kigge på http://findmebyip.com/litmus der under emner viser en fin gennemgang af alle de nye tags og script-muligheder. Det er også interessant læsning, når du kigger på video og lyd understøttelse i de forskellige browser og mulighederne på Mac og Win … der er stadig lidt, der skal masseres på plads.

Der findes også en oversigt på https://netaverages.adobe.com/en-us/index.html (login med dit Adobe ID) der viser en procentvis dækning af udbredelsen (både desktop og mobile) og give en pegepind for, hvordan mulighederne for implementation er. Det vigtigste at huske på (de næste mange år) er at tilbyde sekundære løsninger til browsere der ikke understøtter de nye selectors.

Kan jeg lære det

Det er ikke et spørgsmål om du kan … du skal. Fremtidens interaktive designer skal være god til både Flash og HTML – en af delene er ikke nok. Der vil i de næste år komme værktøjer der hjælper. Opdateringer af eksisterende programmer som Adobe Dreamweaver 11.0.3 og Adobe Illustrator HTML5 pack er allerede igang med at løfte noget af byrden, og programmer som Edge vil tilbyde helt nye muligheder for at arbejde med HTML5 og de omkringliggende teknologier. Der er allerede en masse sites der giver sig i kast med mulighederne, men et par at starte med kunne være:

Kan jeg få hjælp

Selvfølgelig kan du det. Der er mange sites, hvor artiklerne tillader kommentarer under. De virker flinke til at svare på spørgsmål. Ellers er der altid vores eget Dreamweaver forum. God fornøjelse med HTML5


Næste Flash Player har fokus på 3D

En kort opdatering – eller rettere en teaser for, hvad den næste version af Flash Player’en kommer til at indeholde. Hvis rygterne rundt omkring på nettet taler sandt, og det du kan søge dig frem til står for troende, så vil MAX 2010 give noget særligt, til dem der er interesseret i at udvikle spil eller andre applikationer, der udnytter alle tre dimensioner.

Det hele startede (tror jeg) med at Thibault Imbert, der er Product Manager på Flash Playeren skrev følgende tweet

Hvis du kigger på MAX online kalender under http://max.adobe.com/schedule/by-session/flash-player-3d-future/ae6f2190-c17a-4411-9e20-44a135e340b0 vil du se et indlæg om næste generation af en 3D API. Ordlyden er:

Join Sebastian Marketsmueller, Adobe Flash Player engineer, for a deep dive into the next-generation 3D API coming in a future version of Flash Player. Marketsmueller will unveil exciting new APIs and demos never shown before, including some exclusive content you cannot miss as a Flash Platform developer.

Efterfølgende uddyber Thibault på sin side. Uddyber og uddyber – det er måske så meget sagt. Men han skærper helt sikkert interessen. Andre sites som http://templatereactor.com/blog/3d-api-for-the-flash-player.html fulgte kort efter. Rygterne strækker sig langt, og kommentarfeltet fanger mange af dem – helt til Unity og Flash integration af en slags.

Set i lyset af de nye muligheder for at udvikle applikationer til iPhone med Flash udviklingsværktøjer, bliver det helt sikkert interessant, hvad der diskes op med. En ting er sikkert – der skal også diskes op med nogle hastighedsforbedringer, hvis det rigtig skal rykke :-)

Der er vel ikke andet at sige end: “Glæder mig til slutningen af oktober!” :-)


Adobe Creative Suite 5 (CS5) launch er officiel

Det er denne ulidelige ventetid der er hver gang ind til man må offentliggøre at en ny beby er på vej. Mange beta-testere har siddet på deres hænder for ikke at skrive om nye features, muligheder og forbedringer som denne version giver designere og udviklere.

Nu er fortæppet røget og du kan på adressen http://cs5launch.adobe.com/ registrere dig til at overvære lanceringen, den 12. april 2010 – klokken 17:00. Du skal bruge dit Adobe ID til at registrere dig. Hvis du ikke har et kan du oprette dig gratis på siden.

Når du nu alligevel er ude og lufte dit Adobe ID fordi du vil overvære præsentationen af CS5 kan du lige så godt melde dig ind i Adobe User Group Of Denmark på http://www.hjaelpmignu.dk/go/augod/ og tilmelde dig det arrangement, der er den 20. april – påfaldende tæt på lanceringen. Her kan du se Flash Builder 4, Flash Catalyst og mon ikke vi må vise lidt af programmerne i Adobe Creative Suite 5.

Der er desværre stadig mundkurv på, ind til lanceringen, men tag et kig på http://cs5launch.adobe.com/ og se om nogle af deres videoer kan inspirere. Ellers er der selvfølgelig http://csbuzz.adobe.com/ med Greg og Levine

Det bliver en varm sommer :-)


Pixel Bender har fået sin egen plads

Pixel Bender har længe været en del af Creative Suite og er blevet installeret sammen med suiten som standard. Det har dog stået lidt småt til med at udvikle plug-ins i programmet. For det første skal der læres et nyt sprog, og for det andet skal man finde ud af, hvilken type plug-in man har tænkt sig at udvikle. Derfor har det kun været et værktøj for de eksperimenterende personer, men det vil Adobe lave om på.

Pixel Bender kan bruges til at få computerens hardware til at regne på pixelinformationer. Det kan resultere i regulære filtre til billeder og video, men kan reelt være alle typer af data. Pixel Bender kernels kan umiddelbart bruges i Photoshop, After Effects og Flash.

Indtil nu har Pixel Bender og al information om den været på labs.adobe.com, men nu har den fået et værelse på Adobes Developer Connection.

Kig ind på http://www.adobe.com/devnet/pixelbender/ hvor du kan se en masse tutorials og videoklip, der kan forklare om mulighederne i programmet.

God fornøjelse


Beta 2 af Flash Builder og Flash Catalyst

Så er der kommet nye versioner til offentligheden af to stykker software som jeg forventer mig rigtig meget af. Det ene er Flash Builder 4 (tidligere Flex Builder) som gør det nemt at udvikle online interaktive applikationer. Den måde denne nye version fokuserer på data og bygger design op omkring det gør at der vil ske et skub i den rigtige retning når det kommer til udvikling af applikationer i fremtiden.

Den der skal hjælpe til med at få det hele til at rende pænt af stablen er Adobe Flash Catalyst som også er kommet i en ny beta. Her vil det være muligt at tage eksisterende design fra Illustrator og Photoshop mv. og overføre dem direkte til Catalyst. Du vil herfra kunne markere og omdanne de enkelte elementer til interaktive komponenter og definere dummy-indhold samt overgange imellem en applikations tilstande. Dette vil resultere i en et færdigt projekt der kan overføres til Flash Builder hvor dine dummy-data vil blive erstattet med LIVE data.

Hent demoerne, prøv dem af. Læs nogle tutorials til Flash Builder og Flash Catalyst så du kommer hurtigere igang.

… det er en investering i fremtiden der er værd at gøre sig for alle der har med interaktivt design at gøre.


Flash CS5 (Viper)

Når en version aaf Creative Suite og dets komponenter har været fremme tilstrækkelig længe dukker rygterne op om nye udgaver, beta udgaver (og deres navne). For at lade være med at bære ved til rygtesmedjen, vil jeg undlade at gisne om features, men i stedet henvise til flash magazine der har en artikel omkring Adobe Flash CS5 Professional der blev vist på Flash On The Beach 2009.

Det mere interessante features er nok code completion, behaviour lignende panel til nye brugere og samspillet med Adobe Flash Builder 4 ift. større projekter.

Se en gennemgang på:

http://www.flashmagazine.com/news/detail/adobe_flash_cs5_sneaks_from_fotb09/

Og kodenavnet … det er Viper, hvis du skal søge videre :-)


Adobe Flash Catalyst og Adobe Flash Builder 4

Så er ventetiden ovre! Et tidspunkt jeg har set frem til, kom her i weekenden. Du har nu mulighed for at prøve kræfter med Adobe Flash Catalyst, som ligger i offentlig beta på labs.adobe.com. Det gør den sammen med Adobe Flash Builder 4 der er det sidste skud på stammen i den produktserie der tidligere var kendt som Flex Builder. Først og fremmest lige nogle link til softwaren:

Adobe Flash Catalyst: http://labs.adobe.com/technologies/flashcatalyst/
Adobe Flash Builder 4: http://labs.adobe.com/technologies/flashbuilder4/

Hvad kan programmerne?

Adobe Flash Catalyst

Dette program er ment til at binde designere af RIA tættere til den interaktive platform. Hvor de fleste designere bruger Illustrator, Photoshop og Fireworks til at udvikle skærme og elementer til brugergrænseflader, har udvikleren ofte alt for megen kode i vejen når der skal dannes et overblik over den visuelle stil.

Det resulterer i at der bliver indgået en masse kompromier, når der skal pustes liv i layoutet. Med Flash Catalyst er følelsen og muligheden for at levere et “kodeklart” resultat rykket tættere på. Du kan nu med Flash Catalyst, tage dit layout fra Illustrator, Photoshop eller Fireworks og definere de interaktive elementer. Du kan vise overgange imellem states (tilstande) og præcist bestemme hvordan grafiske objekter i dit design skal optræde i den endelige applikation.

Resultatet bliver et køreklart projekt til Adobe Flash Builder 4, som udvikleren så bruger til at gøre applikationen færdig.

Adobe Flash Builder 4

Fra at være et program for super nørder, har Adobe Flash Builder vendt sig mere og mere til den “mindre øvede udvilker”. Har du erfaring med Adobe Flash CS4 og ActionScript 3.0 vil du helt sikkert få meget ud af Adobe Flash Builder 4. Programmet er baseret på Flex framework’et og levere Rich Internet Applications til Flash Platformen. Den er født med en bunke indbyggede effekter og klasser, der gør det hurtigt at lave applikationer der kan afvikles på Flash Platformen.

Hvor Adobe Flash CS4 bruger sin timeline og library til at levere unikke animationer og oplevelser, kan Flash Builder bygge robuste og appelerende applikationer til interenettet eller din desktop (via AIR)

Med direkte understøttelse af projekter eksporteret fra Flash Catalyst er det blivet endnu nemmere at overskue designet af Flash Builder projekter – en ting som folk, vant til Flash Professionel, har sukket efter.

Kom i gang, nu!

For at komme igang med programmerne er her en lille liste af relevante links:

Adobe Flash Catalyst

Adobe Flash Builder 4

Derudover er der en række demonstrationer af Flash Platformen på http://labs.adobe.com/technologies/flash/videos/

Held og lykke. Jeg glæder mig til at se, hvor langt i kan trække programmerne :-)

/ockley


Mit håndikon er væk!! – husk det nu

OK. Her kommer et indlæg til jer, som ligeså meget er for min egen skyld. Jeg sad i aftes og brændte rigtig mange unødvendige arbejdstimer af på noget jeg havde løst før. Nu skriver jeg det her på blog’en, så jeg selv og I aldrig falder ned i det frustrationshul igen :-)

Problemet er følgende:
Når jeg opretter et movie clip og vil have det skal opføre sig som en knap, kommer hånden ikke frem, når musen bevæger sig hen over det.

Umiddelbar løsning er:
Husk at sætte buttonMode til true. Når du gør det, kan du bruge useHandCursor til at bestemme om hånden skal vises eller ej. Prøv følgende:

//Opret en sprite. Placer den på din stage i position (50,50)
var knap:Sprite = new Sprite();
addChild(knap);
knap.x = knap.y = 50;

//Tegn en grøn kasse inde i knappen
var kg:Graphics = knap.graphics;
kg.beginFill(0x55CC55);
kg.drawRect(0,0,90,25);
kg.endFill();

//Aktiver knaptilstand for spriten
knap.buttonMode = true;

Den sidste linje får spriten (eller movie clippet) til at opføre sig som en mus. Nu kommer problemet. Hvis du skriver følgende efter:


//Opret et tekstfelt, hvor teksten ikke kan markeres
//og placer den inde i knappen
var tekst:TextField = new TextField();
tekst.autoSize = TextFieldAutoSize.LEFT;
tekst.selectable = false;
tekst.text = "Nu er der tekst i";
tekst.x = tekst.y = 5;
knap.addChild(tekst);

Når du tester filmen, vil du se at tekstfeltet fjerner musehånden fra knappen. Hvis du flytter markøren helt ud til et af hjørnerne vil du se, at den stadig er aktiv – det er tekstfeltet, der er skyld i misæren.

Der er to måder at løse det på. Begge bunder i at det ikke skal være muligt for objekter inde i symbolet at reagere på musens gestus. Hvis du vil forhindre tekstfeltet i at forholde sig til musen kan det gøre således:

tekst.mouseEnabled = false;

Dette vil påvirke den enkelte knap og skrives tit samtidig med oprettelsen af tekstfeltet (når man husker det) :-)

Den anden metode fjerner muligheden for alle objekter inde i knappen. Det er yderst praktisk, hvis knappen er bygget op af mange delobjekter, som du med sikkerhed kan sige, ikke skal bruge musen til noget. Med andre ord: Hvis det kun er knappen som helhed, der skal reagere. Det ser således ud:


knap.mouseChildren = false;

Den sidste er værd at huske på. Men grundlæggende virker det forkert at musehånden ikke virker, når bare teksten ikke er markerbar. Må dette indlæg spare dig for noget bøvl, hvis projektet skulle dreje sig i den retning :-)

/ockley