Here’s another fun one that I did last night. It looks like I did some crazy 3D Actionscript here but I’m simply moving the y property of a static 3D cube. Hey what can I say, it works. Click on it to check it out. If you want the source then click here.

Lee

Comments(23)

If you watched my last tutorial you know how much of pain it was to read audio data in Flash. The old “analyze in AE” method is now a thing of the past. The new SoundMixer.computeSpectrum() method reads audio data at runtime allowing you to create audio-driven animations. Click on the image below to see my first experiment. This only took 10 minutes! Get ready to see some crazy stuff from the Flash community. Source is below as well.

Flash Player 9 required!

[as]var s:Sound = new Sound();
var sc:SoundChannel;
var ba:ByteArray = new ByteArray();
var array:Array;

s.load(new URLRequest(“mix.mp3″));
sc = s.play(0,1000);

this.addEventListener(Event.ENTER_FRAME, spectrum);

var a:Number = 0;

function spectrum(event:Event)
{
a = 0;
graphics.clear();
SoundMixer.computeSpectrum(ba,true,0);
for(var i=0; i < 256; i=i+8)
{
a = ba.readFloat();
var num:Number = a*360;
graphics.lineStyle(num/15,0×0066FF|(num << 8));
graphics.drawCircle(stage.stageWidth/2,stage.stageHeight/2,i);
}

} [/as]

Lee

Comments(62)

Just when you thought it was safe to get some sleep, Adobe has released a preview version of Flash 9 with Actionscript 3 support. Go there right now and download it!

Lee

Comments(10)

I just uploaded a new tutorial at http://www.gotoandlearn.com called Sound-Driven Animation that shows how to export audio amplitude data from After Effects using a custom script. Then I show how to use that data inside of Flash to dynamically draw the music’s waveform with the Drawing API.

Hope you like it!
Lee

Comments(10)

I’ll be doing a live Breeze presentation tonight over at http://flashusersgroup.org. I will be talking about animation easing and will discuss the various tweening classes and kits that are available. I’ll also talk about Robert Penner’s legendary easing equations which are the core all of these APIs.

It’s open to the public so come on over! Starts at 5:00pm Pacific time.

Lee

Comments(3)

This is another audio visualizer that I did using keyframe data from After Effects. I have also added some features to the JSX script which you can download here. In this experiment I extracted 10 different frequency ranges and ported to AS arrays. From there I have 10 bubbles that spell out “LINKINPARK”, which is the band that the music is from. Yeah I know they kind of suck, but this track is really good. The bubbles move up and down and scale according the the sound data. I also added some BitmapData effects to give a soft look. I love this stuff!

Sound is good!
Lee

Comments(13)

So as you probably know from my earlier posts, I am learning WPF since we are using it on some projects. I’ve been playing with it for about 3 weeks now and have come to some thoughts about its potential and whether it has the potential to “kill” Flash. Bear in mind that I’m very new to WPF, so I’m sure that there are a lot of pieces that I am still missing or confused on. The easiest way to do it is to just go through some common features and talk about how they stack up with each other.

Video Capabilities
Well on this one, Adobe has nothing to worry about. With Flash 8 and the new On2 codec, Flash has obliterated the competition when it comes to web video. Not only is the quality superb, but it’s now easy for anyone to add video to webpages and online applications. That coupled with the excellent Netstream API, which allows for 100% customization over the video experience, makes Flash the clear winner. WPF has some great potential when it comes to things like mapping video onto 3D surfaces, but that is going to get really old, really soon. The MediaElement class is pretty bare in comparison to the Actionscript video classes. There are probably other classes in the massive .NET library that allow for more control over video, but Microsoft needs to make them more accessible.

Audio Capabilities
Here is another area that Flash dominates. This is domination is only going to strengthen once the

method hits the streets with Actionscript 3. Playing music is pretty much the same thing as playing video in WPF. The MediaElement class is very weak when it comes to audio control and doesn’t let you get access to any spectrum information to create audio-driven animations. I have found out that there are some DirectX APIs that allow you to do this kind of stuff, but it’s pretty heavy stuff that will keep it out of the hands of most interactive designers who only have intermediate programming skills. Again, props to Adobe on the new audio support. We’ve all been waiting for this! No more AE to Flash manual workflows.

3D Support
Here is another one-sided affair, but this one is owned by Microsoft. WPF has some truly amazing 3D capabilities, as seen in this North Face demo put together by Fluid. The 3D engine takes advantage of the graphics card through OpenGL. Whether these capabilities can be realized cross-platform is the real question here. But 3D support shouldn’t be shrugged off as eye candy because there are all kinds of applications for using 3D on the web. 3D data plotting and bar charts that update dynamically have a big impact compared to their 2D counterparts. The 3D support in WPF is excellent, and even better, it’s easy to use. Look for online 3D games in WPF to be a huge area. I’ve said it before and I’ll say it again, Flash needs some level of 3D support in the future to stay on top. Just look at how many developers fake 3D in Flash everyday.

The Programming Environment
Well the good news for Flash developers is that C#, which is the language of choice for coding WPF, is very similar to Actionscript 2, and is even more similar to Actionscript 3. C# requires you to adhere to a more strict style of programming, but this will actually help you to become a better AS programmer. One major difference between the two apps is that WPF is actually closer to Flex than to Flash. WPF applications are created using XAML, which is an XML-based markup language similar to the MXML that’s inside Flex. You then use C# as your code-behind language to handle events or to create custom interactions. You can build your whole app entirely in C# without touching XAML, which leads to some confusion about what should be done with what. Coming from Actionscript, I have felt much more comfortable coding in C# and not touching XAML unless I absolutely have to. I guess this comes from the fact that there is a lot of stuff in Flash that we have to code from scratch. Basically, if you are a competent AS programmer, then you’ll have no problems programming WPF.

Data Binding
This is one are where WPF and the Expression IDE are clearly on the right track. You can choose any property on any object and bind it to another property, all without any code. There’s no need for onEnterFrames or intervals to update the value of something. Integrating XML and other outside data sources is ridiculously easy in WPF. You can build an RSS reader in a couple of minutes. Again this is similar to the Flex environment in a lot of ways. But I would love to see Flash get this type of stuff in the future. No more having to publish the SWF to see my data! So to sum up this area, WPF clobbers Flash but is about even with Flex.

Team Workflows
One of things that Microsoft has been bragging about is how the UI, visual design, and developers on a project can all work on the same file and pass it back and forth. This sounds nice in theory, but I have to question if it’s such a good idea or not. If you have a team of wizards who are good at both design and coding, then I think it would be great. But it’s been my experience that it is hard to teach designers how to code, and equally as hard to teach geeks to design. So I think this one really depends on the situation. It could be an amazing experience or a logistical nightmare. Code is very fragile in the wrong hands and this has firedrill written all over it.

Developer Tools
So it’s not really fair to judge this are yet since WPF and the Expression IDE are still in beta. But I will say that Flash 8 made HUGE improvements to the IDE, fixing lots of little annoyances that we’ve been living with for years. The Expression IDE is pretty bad in my opinion. Microsoft makes a big deal that the IDE was actually built in WPF, the whole “we built the tool with the tool” thing. In my opinion, this is exactly what is wrong with it. Personally I’d never want the Flash IDE to be made in Flash. I want the crisp fonts and the consistent interface that I am used to when using Windows. Leave the anti-aliased text for Mac users. Microsoft needs to do some MAJOR work to this tool and I’m sure they are doing so as we speak. You know it’s bad when the Flash IDE is far superior to it! As for coding I would recommend doing it all in Visual Studio C#, which is available for free. This is an awesome code editor that has many advanced features.

Cross-Platform Support
This is the biggie! Can Microsoft make WPF a cross-platform reality? If they do then Adobe could be in for a war. If they don’t, then WPF will be left for application development and won’t ever take off on the web. Microsoft already has a Firefox plugin that they have shown at demos so this is definitely their goal. Also since XAML is XML-based, there should be a slew of tools that come out for Mac users. But this is all still speculation at this point. This is the single biggest factor that will determine the future of the interactive web. Expect some major wars in the future!

Communities and Support
I know of no other community that is as open and cool as the Flash community. It just has something that no other community has and I can’t even put my finger on what it is. We openly exchange code and help each other out without asking for anything in return. Above all that, I think that the Flash community is home to the brightest group of people I have ever seen. The originality and style that I see everyday when I look at MXNA or FWA is something that never ceases to amaze me. Microsoft has a long way to go if they want to foster this kind of community. But I have to say that I am really impressed with the WPF team and the way they are dealing with developers. Basically there are cool people at both companies whose only goal is to make really great software for us. I for one never subscribed to the “Microsoft is evil” way of thinking. When I worked at Stanford I was working on international health stuff and was amazed at how much the Gates Foundation is doing throughout the world. They are literally saving millions of lives and are changing the world through their efforts. And this is way beyond what they have to do for PR purposes. So I just look at the technologies with blinders on, as best I can that is. What can I say, I love Adobe

These are just my thoughts after 3 weeks on WPF. I love working with it and it has been great to learn a new programming language. It’s still way too early to know how, if, or when it will compete with Flash down the road. But if you are an interactive designer, you will very likely have to use it someday soon. Give it a try!

Lee

Comments(5)