I find it distasteful that Apple should introduce section 3.3.1 merely days before the release of CS5 and Adobe’s new ‘compile Flash to iPhone app’ feature. It’s really quite underhand and will effect a lot of people’s livelihoods and damage business. Let’s not forget it’s not just Adobe that will be affected by this change. Unity3D and other 3rd party tools will not be able to release apps on the store. Some great apps like the ‘Star Wars Trench Run’ may need to be removed and as I understand it with my limited knowledge of these things some of the larger publishers like EA may also be affected as their games use 3rd party interpreters and tools that will be outlawed by Apple’s new rules.

On the other side though, Adobe should never have introduced this feature without the approval of Apple. They rushed this thing out and in the process have gambled with the livelihoods of hundreds of developers who have put their stake in iPhone app development with Flash.

Basically I think both parties have been very arrogant and have damaged a lot of reputations in the industry … mainly developers. We’ve got decent, honest people at each others throats when all they want to do is work together to make amazing, engaging content.

But the biggest victim in all this is the user. People buy iPhones and wonder why they can’t see the rich content they’ve come to expect. They struggle trying to view Flash content in the browser that hasn’t been built properly or they haven’t got the correct plug-in installed. What does the user want? Why is it all going wrong?

Fifteen years ago I was building CD-Rom titles in Director 3 which at the time was owned by Macromedia. We started using Flash 2 when it was released so we could include animated SWF content in our Director titles. We then started building Flash content for the web. At the time there was no such thing as ‘web standards’ … HTML was pretty basic and browsers were packed full of plug-in’s developed so you get the most out of your browsing experience. You had the ‘Real’ or ‘Quicktime’ plugin to watch video, ‘Shockwave’ allowed you to play amazing games online and ‘Flash’ exploded all over the web because it brought the browser to life and allowed us to build truly engaging rich content without loading new pages to update content.

In the present day we have a completely different type of internet. Web standards have evolved to the point that we now have a perfectly reasonable alternative to Flash integrated into the browser. HTML5 and WebGL allows us to build rich engaging content without a plug-in. In fact Flash is probably one of the few plugins people are still required to install into their browser to view a vast majority of content. And this is where Adobe have failed the user. Director died a death because people didn’t need to publish CD-Roms anymore and Flash should have evolved so the user didn’t need to use a plug-in in their browser.

Adobe should have adapted Flash so it output HTML5 and WebGL 3D content. The AIR runtime is fine on the desktop (although I will always choose a native Mac OS app) and will be just fine on the Android platform, hell they might even integrate it into their OS. But it’s in the browser they’ve failed and if they want to see Flash content on the iPhone they need to improve their tools (like Flash or Dreamweaver) so they produce standards compliant, rich, interactive content in the browser natively. This, after all, is what the user wants.

And Steve, stop being so evil. You’re forgetting what Apple was supposed to stand for. You should watch your 1984 Keynote speech every morning to remind yourself.

Some links on the subject …

http://www.smashingmagazine.com/2010/04/12/the-gradual-disappearance-of-flash-websites/

http://www.devwhy.com/blog/2010/4/12/its-all-about-the-framework.html?lastPage=true#comment8034519

http://mashable.com/2010/04/10/steve-jobs-adobe/

http://theflashblog.com/?p=1888

http://blog.codecomputerlove.com/2010/04/09/have-apple-crushed-cs5-flash-to-iphone-opportunity/

UPDATE: Apparently Flash to HTML5 was showcased during a ‘sneak peek’ session at MAX 2009 but has not made it into the new CS5 release. This is a real shame … Adobe could have made some real progress there.

UPDATE UPDATE: Apple have already started pulling apps. Scratch is an education tool built by MIT … it’s now not educating children in computer science.

Apple also banned this app for being too satirical!

The Hype framework was officially released on Halloween and I took the opportunity to plug it straight into the Papervision cube thingy that I’ve been prodding and hacking for over a year now. I started by taking out all the existing functionality and used the SoundAnalyzer class from Hype to initiate the cube ‘pops’. The results were amazing so I added a FixedVibration to give it some character. It performs really well although you’ll need a decent pipe for the audio stream.

http://rezzynet.com/cube/Main.html

So, this got me psyched and itching to see what else I could do. I wanted to mix up the SoundAnalyser and the Oscillator so I created a row of 256 cubes in 3D space, set them to oscillate on the Y axis and then adjust the zScale for the SoundAnalyser range. This took less than an hour to setup and the results, yet again were impressive.

http://rezzynet.com/oscillation/Main.html

The next thing to do was to position the row of cubes in a circular path. I kept the camera in the default position … I just moved it back slightly. I liked the surprise when you first click and drag within the viewport to rotate the view.

http://rezzynet.com/oscillation/Main2.html

Finally … well, for tonight anyway … I adjusted the Math that created the circular path and created a spiral.

http://rezzynet.com/oscillation/Main3.html

Wow! I’m impressed with Hype. What I’ve produced here using Papervision and Hype is by no means complicated and full credit goes to all the amazing talent behind the scenes of the Papervision project and to Branden Hall and Joshua Davis for an amazingly accessible framework that even idiots like myself can have fun with and I will be sure to share my experiences by releasing source and doing some screencasts in the coming weeks. In the meantime though I would urge anyone interested to go and play for themselves.

http://rezzynet.com
http://papervision.org
http://hype.joshuadavis.com

Far from a proper official launch but an alpha release of my new site for all things experimental. The intention is to build a portal using the Adobe Open Source Media Framework so I can load SWF and FLV to showcase interactive work as well as movies and casts. At the moment I’m working on my old Papervision 3D cube that was on my official site last year but was removed when I changed to the WordPress version that is currently live. I intend to move on from this pretty quickly as I think I achieved what I wanted to do. I may add some decent lighting and change the bitmap material.

I’ll be updating it as and when and will be sure to include the source for some of the experiments as well. The PV3D Cube thingy source will be posted soon.

http://rezzynet.com
http://rezzy.net

What’s coming in Adobe AIR 2.0

Here’s a great article outlining all of the new events, classes and information on how to manage the input.

I’ve scraped the code off this article for my own reference below. Please do read the article though.


flash.ui.Multitouch
[static] inputMode:String
[static] maxTouchPoints:int
[static] supportedGestures:Vector
[static] supportsGestureEvents:Boolean
[static] supportsTouchEvents:Boolean


Touch Input mode

flash.events.MultitouchInputMode
Multitouch.inputMode
MultitouchInputMode.TOUCH_POINT
MultitouchInputMode.NONE
MultitouchInputMode.GESTURE


Mouse

MouseEvent.CLICK
MouseEvent.DOUBLE_CLICK
MouseEvent.MOUSE_DOWN
MouseEvent.MOUSE_UP
MouseEvent.MOUSE_MOVE
MouseEvent.MOUSE_OUT
MouseEvent.MOUSE_OVER
MouseEvent.ROLL_OUT
MouseEvent.ROLL_OVER


Touch

TouchEvent.TOUCH_BEGIN
TouchEvent.TOUCH_MOVE
TouchEvent.TOUCH_END
TouchEvent.TOUCH_TAP
TouchEvent.TOUCH_OUT
TouchEvent.TOUCH_OVER
TouchEvent.TOUCH_ROLL_OUT
TouchEvent.TOUCH_ROLL_OVER
TouchEvent.TOUCH_TAP


Touch management

Many multi-touch developers like to use an Object or Array of points to keep track of touch inputs (aka blobs) as well as an ID, and X/Y coordinatees for each point. It looks like Flash Player 10.1 will help you conform to these conventions, ActionScript-style.


flash.utils.Dictionary /* Used to track Arrays of Points */
flash.geom.Point /* One contact point */
TouchEvent.touchPointID /* Unique ID for each touch contact point */
TouchEvent.stageX
TouchEvent.stageY
TouchEvent.isPrimaryTouchPoint


Gestures

flash.events.GestureEvent;
flash.events.GesturePhase;
flash.events.GesturePhaseEvent;
flash.events.TransformGestureEvent;

/* GesturePhaseEvent */
GesturePhaseEvent.GESTURE_PAN
GesturePhaseEvent.GESTURE_PRESS_AND_TAP
GesturePhaseEvent.GESTURE_ROTATE
GesturePhaseEvent.GESTURE_ZOOM //Is the same thing as 'pinch'
GesturePhaseEvent.offsetX:Number
GesturePhaseEvent.offsetY:Number
GesturePhaseEvent.rotation:Number
GesturePhaseEvent.scaleX:Number
GesturePhaseEvent.scaleY:Number


Orientation recognition

flash.display.StageOrientation;
/* e.g. StageOrientation.DEFAULT */

flash.display.StageDisplayState;
/* e.g. stage.displayState = FULL_SCREEN_INTERACTIVE; */


Cool … the project is go and here’s a design from their Art Director …

NNNNNNNNNNNNNNOOOOOOOOOOOOOO!!!!!!!!!!!!!!!!!!!!!

Now you know I’ve only got love for Flash but I hope you understand the point of this post. Scenario’s like this are gonna bite people in the arse unless they are careful about what they promise their clients. You need that Cocoa UIKit. You need Interface Builder. There’s so much in the iPhone SDK that you will need to build proper iPhone apps.

Let’s be realistic about this … we’re not talking about building apps for the browser or even for AIR. If you build an application for an OS then it is best-practice to adhere to the rules of that OS and use the common UI tools made available. If you own a mac then I think you would agree that when you download and install an app you want to feel comfortable using it. You want the reassurance that the application you are using integrates with the rest of the OS so you can quickly get your head around how it works. This is why the HIG exists and this is why Apple will deny any attempt to reproduce their UIKit components.

Unless your building a game with no OS UI requirements or your app is a bit of eye-candy then you’d be better off building it with XCode. Hopefully Adobe will expand on what they’ve started by creating tools that will let us export assets or views from Flash Builder to Cocoa Obj-C code. It would be great if we could export our project to a View and then integrate it into an iPhone app. There’s already a great tool built in AIR for exporting shapes from SWF to Obj-C that you can view here.

I know that the Flash community are an ingenious bunch and the majority of them aren’t stupid either so I hope that this is just the incentive they need to build some really useful tools that will enable us to build proper iPhone apps in the near future. Until then you’d be best not to promise your clients you’ll be porting over their web apps to the iPhone just yet … not until you’ve discussed the requirements IN DEPTH.

This post by Jeff LaMarche is a much more eloquent argument about why we should all step back and have a re-think about this. Especially how this may effect the relationship between Adobe and Apple. Hopefully Jeff will have some further comments to make on the subject and I invite him to do so here too.

From Jeff …

If I were a Flash developer, I wouldn’t cheer just yet. This looks like a risky proposition to me at present. Adobe and Apple are still acting in an antagonistic fashion toward each other. Adobe could very well have crossed the line here. There are both legal and technical options open to Apple to prevent Adobe from doing this if they choose to. Will they? I honestly don’t know. Apple still makes money from apps that are created with Flash tools, so they might just ignore it and take their 30% cut quietly.

Bigger news came in the form of a spoof ‘MythBusters’ video exploring the ‘myth’ that you can’t produce Flash content for the iPhone. Yes, Adobe will be compiling native iPhone content directly from Flash CS5. There’s no Flash plugin in the browser on the iPhone but the new FP10.1 touch events will work apparently. The compiler technology is way over my head but here’s the press release and some information on labs. It seems that Adobe have snuck a few iPhone apps onto the store in advance and the example I’ve played with, Chroma Circuit, performed very well (and is really addictive).

This got me thinking about the future for apps on the iPhone if Flash peeps all rush off trying to submit their content to the store. For a start Apple are going to be struggling to keep on top of their approval process. Apple is very strict when it comes to the Human Interface Guidelines (HIG) and the iPhone Dev kit that most devs use to generate UI elements on the iPhone ensure that developers ‘toe the line’ and by and large result in a design consistency that has been part of their success with the device. Now, I know there are already a lot of god awful apps on the iPhone that seem to deviate from the HIG exceedingly but it isn’t just the appearance of an app that is the issue here. Developing apps for the iPhone is a tricky, slippery business. Memory management and proper garbage collection is vital to the performance of the app and without thorough testing and a decent authoring/debugging environment like XCode it’s going to be very difficult indeed to create a decent iPhone app in Flash. So how will we develop decent apps for the iPhone or any of the other devices for that matter?

Well, while everyone was tweeting about the iPhone news I found myself reading through the Mobile dev FAQ’s and noticed this …

Can I use the Flex Framework to create content for the iPhone?

While it is possible to create iPhone content using the desktop Flex Framework, we do not recommend it. The Flex framework is currently optimized for execution in a desktop environment. The performance, UI, and interaction models have not been optimized for mobile devices.

Adobe is working on a mobile Flex Framework, which should be better suited for iPhone development.

What? That last line got me very excited. And then I saw the link.

And here’s a sneak preview!

Flex for mobile devices

Here’s the app they built running on an iPhone :

Interesting bit of trivia is that the codename ‘Slider’ is a joke based on a conversation in which the original Flex framework was compared with a nice juicy burger for developers and so the mobile framework would be a smaller burger … a ‘slider’. As a brit … I don’t get it.

So, there’ll be a new lightweight Flex framework that will allow us to produce UI elements and advanced layouts for mobile devices and this framework is currently codenamed ‘Slider’. Now, personally the iPhone thing could be painful but lets not forget about all of the other devices that we can now develop for. A project will need to change state dynamically to fit within a range of screen sizes, layout will be extremely important as people expect their content to adjust to different orientations and the implementation of themes is also going to be huge. The Flex framework is perfect for this type of development and the Spark/FXG partnership is lightweight and flexible.

Reading the FAQ I noticed this …

On what platforms will Slider run?
The initial Slider framework will be optimized to run on high-end smartphones (phones with a processor speed of 400Mhz or more, 128MB of RAM), and will initially target standalone application environments such as Adobe AIR. This matches the category of devices targeted by Flash Player 10.

Reading between the lines here but does this suggest that the AIR runtime will also be available on devices?

UPDATE: This video on Adobe TV talks about how the process of developing the iPhone app is very similar to building an AIR app. So I guess there wont be an AIR runtime for mobile devices.

Building Mobile Applications with Adobe AIR

Some interesting information in that video. Hardware acceleration will be supported via the use of the cacheAsSurface property.

Ted Patrick has a great post on developing iPhone apps with CS5 including source. Check it out.

Here’s a real good cast of the Secret Session from yesterday with Richard Galvan which explores a bit more about the new features of Flash Pro CS5 including the Text framework and support for ligatures and flow.

They’ve added integration between the Flash IDE and Flash Builder so you can launch FB4 from the Flash IDE and setup workflows between the two environments including launching Flash pro to test from FB. This is going to be great for managing assets in Flash while coding in Flash Builder. Code snippets in Flash Pro let non-coders add interactivity too. This will allow large agencies with teams to have their tech dude add all the common code the designers need to build banners for example. Code completion in Flash mimics FB too … finally!

I’m expecting more news today in the second keynote and will update this post. If you are at MAX and see any demos of the Slider framework then please leave me a comment and let me know what you saw and heard.

It seems the problem sticks inside SystemManager which GlobalDispatcher uses

… it seems that the use of Application.application in the framework was preventing the global events being dispatched from the SystemManager. In Flex 4 you use FlexGlobals.topLevelApplication to return the main Application class.
A member of the team soon posted a patch which (at the time of writing this post) is available here. Now, this is the reason for posting this information: anyone who may find themselves in the same situation that I was yesterday should NOT download the latest SWC for the Mate framework you’ll find this ‘fix’ is NOT in place. You’ll need the patch to publish using the Flex 4 sdk.
While I’m at it. Here’s my Cafe Townsend Mate example ported to Flex 4 with some of the code for you to check out. The only change is the use of the Spark Application tag and the Declarations tag. I did remove the Styles with the intention to put them back at some point but I don’t think I can be arsed now. You’ll just need to grab the code from the Flex 3 example and put it back. The views are the same. Grab the source here.

[note: RSS readers will not display the iFrame below]

Here’s the Application class. Note the Declarations tag and the EventMap classes. Don’t get caught out by this. You need to use the Declarations tag for non-visual components in your Application class.

What I like about Mate is the how minimal you can keep your views. Notice how I’m not listening for any of the FlexEvent events within the App class. Now look at the MainEventMap class …

… all your events are handled in here which makes your code really neat and the views end up being nicely decoupled from the logic and functionality.

Anyhoo, I hope this has saved someone a few hours of frustration.

There’s a useful class in the adobe.strobe.players package which wraps up the Actionscript media player in a Flex UIcomponent. It’s called ‘MediaPlayerWrapper’ and it seems to be the only Flex based player supplied in the framework so far. This player isn’t a part of the official framework which is all contained within the org.openvideoplayer package. Instead it is offered as part of the examples that Adobe give to you in the download. It’s obviously meant as a base to work on because I have noticed a few bugs and omissions which brings me to this little example I’m posting.

The main thing I’ve noticed about the wrapper class is the absence of event metadata so I extended the class and added two. They are the ‘bufferingChange’ and ‘playheadChange’ events that are dispatched by the MediaPlayer class and re-dispatched by the wrapper. This allows you to listen for these events from within your flex tag like so …

In the code above the playheadChange event is available as a Flex event in my tag because of the metadata added to my class like so …

Here’s an example with the source.

Here’s the Application class. View-source to look at the wrapper class and the extension.

I’ve posted this quickly so anyone interested can get this working quickly but there’s a lot to be done with this wrapper. I need to add more metadata for a start and I need to take a good look at the binding.

More soon.

Degrafa is very powerful and I think I will continue to use it even when I’m deep into Flex 4 and FXG which uses very similar syntax.

The latest version of Degrafa allows you to add states to a skin so you can easily change the visual appearance based on the state of the skinned object. Here’s an example …

If you view the source (right-click in the iFrame) and take a look at the PopButtonSkin class you can see how this simple PopMenuButton component was skinned without any graphics files.

And here’s the Application file for you to look over. You can also grab the source from the example above by right-clicking and ‘viewing the source’.

The main thing to know about PopButton components in Flex is that they have extra button states that you need to know about. They are the pop-up-over and pop-up-down states. It is these states that are triggered when the user is interacting with the ‘arrow’ part of the popButton although this symbol is only part of the default halo skin. Also, the arrow can be changed for any icon. Remember that the skin for these states covers the entire button and isn’t an overlay over the hit area. In my example I’m drawing a backslash where my arrow should be until you roll over and it prompts the interaction.

Notice in the skin file that the fills and strokes are created separately from the Geometry. This is very useful as it means you could create a completely separate file to manage the palette of your app. I don’t just mean the colour scheme though. You can set out all your grads, stroke weights and fills and then reference them in different skins to ensure consistency.

The geometry is very straightforward and the skinWidth and skinHeight properties ensure the skin fits the component perfectly. Notice my borders are comprised of three rectangles overlaid and I’m offsetting them to create a border around my button. I could have used two rectangles with strokes to get the same result. The strokes use gradients too.

Before Degrafa introduced states you would have a whole bunch of objects declared in your geometry and would differentiate each object with the button state by using the objects state property. This could get quite messy. Now you will notice that the states are set separately and work in just the same way that you would expect. You can adjust the properties of objects, add and remove children and you can base one state on another to avoid any duplication of code. Overall this is a very neat way of creating skins.

Notice I add the IsocelesTriangle AutoShape to the geometry only on the over state. The down state is based on the over state so it will retain the arrow. This arrow could also be animated when you click by creating a tween and effecting the RotateTransform angle property.

The next step is to add filter support and transitions. I’ve seen some animation done with Degrafa that seemed very easy to implement … it’s time to play some more.

In Flex you have the VideoDisplay component which is not as good as the FLVPlayer component and has a few bugs which I wont go into here. Incidentally, if you want a good Flex video component with playback controls and skins then go see the charming Mike jones over here. The VideoDisplay component has a bug that means sometimes you can’t get the video to scale up to fit the complete with & height of the container. You can go and override some methods in the component to fix this but I’d decided to build a simple, lightweight Video display object based on the flash.media.Video class. My video is being used as a background and doesn’t need any user interaction; but it does need to scale up to fit the rect and also be smoothed … you know the score.

This is quite straightforward to do when playing out a progressive video file. You connect the NetConnection object, open a NetStream and pass in the URL as an argument and then you attach the NetStream to the Video object. You don’t need me to post code for this here; just look at the flash.media.Video class reference.

What isn’t so clear is how to link to a video stream from a streaming server. If you dig around the AS3 class reference files you’ll find the information you need within the NetConnection and NetStream classes. But here’s the lowdown very quickly.

When you connect your NetConnection object instead of null as your argument you need to pass in the Streaming server url with the application name, instance and folder structure. Then you pass in the filename  to the NetStream object BUT don’t include the file extension. Like so:

Just to be clear for all the people scanning the code … DON’T PUT THE FILE EXTENSION IN AND PUT THE PATH IN THE NETCONNECTION OBJECT!

That should clear up any confusion.