I’ve been busy busy busy playing working on some experimental Papervision/Hype mashups which are now live on the RezzyNet site.
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.
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.
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.
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.
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.
This video from a MAX session has an informative demonstration of the new touch/gesture events in 10.1. Also loads of really cool new features in the AIR 2.0 runtime.
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.
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
Ok, so you are now an iPhlash developer, creating cutting edge iPhone apps with the Flex Mobile Framework, AIR and Flash CS5. Things are looking pretty rosy and you can be sure the offers of work are going to start rolling in along with the cash. Who needs Objective C ay? You’re an Actionscript 3 developer … you can build amazing applications and now you can build them for the iPhone … you rock! Hey, what’s that … an email from your client asking if you could build a small marketing app for the iPhone … and they want to pay you a stupid amount of money! Result! Of course you can … you’re now an iPhlash developer!
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.
So the big news from the Adobe MAX conference yesterday was the announcement that Flash Player 10.1 will allow Flash Platform developers to create content for a range of other devices including Mobile, NetBooks and Set-top boxes. The new player will include some new multi-touch events to take advantage of this capability on Mobile, MacBook’s and Windows 7 touch-enabled devices. I’ll be looking at these events myself when they release the updated SDK and player and will be sure to post some examples and experiments.
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.
I spent a good few hours trying to get the Mate framework working yesterday using the famous Cafe Townsend example. It was time well spent as I plunged quite deep into the architecture; putting my failures down to syntax and short-sightedness. I soon realised that something much deeper was wrong however and a quick look at the Mate forums revealed this post with this gem …
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.
I’ve been looking at the Adobe Open Source Media Framework or OSMF today and I thought I’d post a little Flex quick-start project which should help people get up and running with it.
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 …
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.
I’ve been using Degrafa lately to build programmatic skins for a Flex theme. Degrafa is a ‘Declarative Graphics Format’ that allows you to draw graphics using MXML. This isn’t all it does though. You can use binding to dynamically adapt the graphics and it also extends your ability to change the styles of skins with CSS. I’ll be looking closely at that next as it does look rather interesting.
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.
If you’re using Flash then you can use the FLVPlayer component to stream your video very easily just by passing in the full RTMP url. This may look something like this rtmp://streamingserviceprovider.com/application/instance/folder/videofile.flv.
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:
var nc:NetConnection = new NetConnection(“rtmp://streamingserviceprovider.com/application/instance/folder/”);
var ns:NetStream = newNetStream();
ns.play("videofile");
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!
There are lots of tutorials on customising the Flex preloader … it involves sub-classing the DownloadProgressBar class or Sprite and implementing IPreloaderDisplay and then overriding a bunch of methods so you can draw your own progress bar or add a logo.
The easiest method I’ve found if your client wants something unusual is to use a MovieClip built in Flash and just target a dynamic TextField within the clip to display your percentage progress. You can also create a nice little 100 frame animation to wow your audience. Here’s how …
Firstly create a 100 frame MovieClip in Flash. You can put a stop(); on each frame if you want or control this within Flex if necessary. Add a dynamic TextField and give it an instance name. Choose Device fonts to keep the size down or if you really must embed the font at least make sure you limit the characters to numerals and add the percent sign if required. finally export your MovieClip symbol from the Library with a Class name that you can reference in Flex later.
Now in Flex create your custom preloader class. Here’s mine …
The FlexEvent.INIT_COMPLETE event is triggered after your SWF has completely loaded AND your Application has initialised. This is important because by default the COMPLETE event is called after the SWF has loaded and the initialisation is handled while displaying your Application’s guts. I tend to use runtime Flex styles so I need these loaded before displaying my Application. A great article on this is available here.
As you can see I’ve embedded the symbol into the SWF and the symbol is called ‘mainLoader’. I can then assign that symbol to the mc MovieClip variable and then target this to control the playhead and display the percentage of load. Simple. All you need to do now is tell your Flex application to use this custom class as your preloader by setting the preloader property of your Application to the name of your custom class including any package paths within the String.
I can’t seem to generate an MXML snippet anymore since I upgraded to Wordpress 2.7.1 … if anyone has a better code display plugin that handles MXML then I’d like to hear about it.
I know I’ve not made this tutorial very clear and this is purely down to laziness and work … I did intend to do screengrabs and target the newbie but I’m afraid I just aint got time. If you have any questions or want me to send you the FLA for the animation I used on a recent project then please ask.
I’ve missed loads out of this example so forgive me … you’ll need to align your clip to the Stage for example.
Recent Comments