February 27, 2008 at 7:05 pm · 645 views · Filed under personal, work
From the community…
people I saw quickly but didn’t get to attend their session: Renaun showed off his voip app Pacifica, Zach from Yahoo showing some things available with Yahoo Maps AS3 API, Adam talking about Merapi where you can access Java from AIR apps and Joe showed us some awesome music app he’s working on, keep your ears open for noteflight(?)!
Brad Umbaugh- Practical 3-D: Immersive interfaces for regular people
BradUmbaugh , Senior Developer @ effectiveui. In the discussion of 3D we pointed out that 3D is associated with the future. There have been many 3d success stories such as: games, CAD, sketchup, maya… But we decided that making good 3D interfaces is a lot different than making 3D interfaces- just because it’s 3D doesn’t mean it’s good.
Brad explained the steps in the 3d graphics rendering pipeline: place object in world coordinate system, illuminate models, transform world coords to viewing coords, perform clipping, project to screen and rasterize. Luckily there are 3d engines that will do all of this so we don’t have to think about it. It takes a lot of Linear Algebra Math. 3d apps are constantly performing lots of calculations, and thus can perform rather poorly.
Brad discussed the process of his Discover Earth Live project. They started project with papervision3d, but had problems with pinpoints and how they were wrapping around the globe as it spun. So, they tried Away3d and it fixed these problems “out of the box”. Another plus to Away3d they found is that it lets us do correct Z ordering.
We then talked about setting up the scene in away3d and making objects and he showed some 3D Globe examples: nike, mars.com, wii forecast, discovery earth live.
Ben Stucki - Reinventing Flex:
Ben an independent flex developer (nice soundtrack by the way), let’s talk about Flex, baby.
He started out giving everyone a pair of red/blue anaglyphic 3D glasses and showing us mr doob’s anaglyphicrendering tests. The 3d glasses work by filtering different colors to give your eyes two different views of the same image. Red filters out the red lines, cyan filters out the green/blue lines.
Ben has his own staging area for code that’s not yet released… lots of it is probably broken… but it is open source (benstucki.googlecode.com).
Ben then walked us through lots of openflux, his project that is rebuilding some built in componentes of flex with different proerties and capabilities in mind. Great job Ben!
Dave Hassoun - Flash Video tips (and tricks)
Dave from realeyes taught us about video codecs! Flash video gives us the compression options of sorenson, on2 VP6 and the famed H.264.
Sorenson is easy on cpu performance, but struggles with good color and quality. For the quality the file size is a bit high, but sorenson is a good standard.
on2 vp6 has high quality image, but lots of processing demand, plus it has transparency capabilities!
h.264 (& AAC/AAC+ audio is the newest with the most bells and whistles. As it’s new it’s only supported by flash player 9 (which is beginning to be less and less of an issue). It does support true HD video (1080p), multi-core support, many devices, and lots lots of metadata.
A general rule (equation) to help with encoding: frame height x frame width x frame rate) / compression = total bits/sec
Tools he mentioned to help with encoding: rools, riva, fmpeg, on2fix, sorenson squeeze, cs & adobe media encoder.
Dave pointed out that flex video integration was simple, but too simple, making it weak. There is only video display, which is very simple. AS3 is way better equipped to handle video.
h264 streaming requires a streaming media server, can stream or seek to any point (non-linear or random access), has quicker playback and is much more secure. H264 contains a lot of metadata: length, dimensions, codec, seek points, cover art, subtitles, audio book chapters, image tracks, and more!
Dave’s tips for video compression: quality in, quality out | use the right codec for the job | be creative | code reusability! write stuff to be reused | metadata is your friend, use it
He gave so many resources! I won’t copy them here, so go check his Presentation Notes and source. Here is one resource though, Tinic Uro’s blog about the flash player and video.
Juan Sanchez - Degrafa
Juan (better known as scalenine) taught about his open source project Degrafa - Declarative Graphics Framework for Flex. Degrafa uses mxml to make graphics so you don’t have to use the AS3 drawing API! It makes drawing objects more intuitive and allows you to do it using less code! Plus, rather than creating graphics in photoshop and importing the static image (which takes more memory and then can’t be modified), we can bind properties to the graphic and make it dynamic in flex. So far Degrafa allows us to make surfaces, shapes, objects, fills, strokes, groups, geometry compositions, segments, graphic image, graphic text, and even use svg path data, with much much more in the works! Degrafa is a great way to add custom graphics to your app and it supports advanced css as well, so it is very simple to skin your app! Juan showed us many examples of what degrafa can do and promised there is much more soon to come. Thanks for this great library Juan and everyone else at degrafa, and thanks for the T-shirt as well!
Personally, I got the most out of Day 3 at the conferenc! It was awesome! I got to attend sessions about 3D, drawing graphics, and video! Thanks to all the speakers and Big Thanks to Tom and John, who are Flex360!
February 26, 2008 at 6:52 pm · 1,059 views · Filed under personal, work
Johnny Boursiquot - AIR Infrastructure to manage licensing maintenance and monetization of AIR apps
This is important information as more and more apps ar looking at using AIR to make apps. Discussion on how he’s deployed for large corporations including Avaya, Honeywell, Seagate and others. We need to be thinking about how to license the apps we make!
He’s promised a version of his slide show here: Developers Pierinc
Renaun Erickson - QTIndexSwapper H.264
The flash player now supports H.264 format video files! This is great but one problem is the meta data is placed at the end of the file and therefore the video can’t be accessed until it is fully loaded to the end. The metadata (moov) needs to be loaded before the play knows how it’s indexed. Renaun showed a technique he’s been playing with. He has an AIR app that will move the meta data to the beginning of the file for viewing during progressive download! He also talked about other meta data, like album art, and stuff, he’s promised more links to be posted on his blog
So far, here’s the source at Renaun’s site
More info posted about H264 and Flash by Dave Hassoun at Adobe’s Developer Center
Andy Edmonds - Scrutinizer
Discussing the psychology of vision (fovea and peripheral). We discussed how better design relates to a sites efficiency. Andy showed a couple videos from stomperNet (which can be found at the Going Natural 2 page or stomperNet’s youTube channel) and showed a demo of the Scrutinizer AIR app which is available for free beta download at About.StomperNet.com . Scrutinizer is a browser which forces you to see the internet how your eyes see it, rather than how you brain puts together what your eyes see. It has a layer which blurs the rendered html page, and also a layer which desaturates the colors, which modifies the page as you are looking at it. The browser attempts to show you what you are looking at, but importantly it disconnects your vision from your eye, using instead the mouse so you can actually look at your peripheral vision. Like the “squint test”, where you squint your eyes to see the general overview of a page, this page is blurred to only show the most dominant designs. An interesting tool hat can be used to improve site designs and efficiency.
Doug McCune - Open source Flex community projects
A great discussion about projects and opensource communities. Doug loved to point out that you can take two open source libraries and mash them together to make your own thing.
A few places to find open source code: google, flexbox, ria forge, and a growing number of personal blogs
An example was FlexSpy (basically a debugger that runs live in your flex app) in which Doug added his own part to the existing open source code to monitor all event listeners in addition to all the debugging features already existing in flexSpy.
A highly recommended plugin for flex (eclipse) is subclipse, which adds svn repository, checkout source as flex library project, build swc, add to your build path…
List of open source libraries discussed: (I’ll try to add all the links later)
Big open source libraries for as3 and flex: flexLib (now including flexMDI), minimalComps, AsWing, openFlux
Graphics Libraries: Degrafa (declarative graphics framework - lets you write graphics in mxml tags), Singularity (Jim Armstrong’s math library), AlivePDF (create pdf in actionscript).
Physics engines: Actionscript Physics Engine (APE), Box2D and Motor 2 (both more of an as3 feel) (almost the same), FOAM (note that with physics engines there are differences between the particle based and rigid body based engines.)
3D: PaperVision 3D (most popular3d engine), Away3D (was a branch of papervision, but is now seperate), Sandy, wow (3D physics engine)
Flex specific uses: Alex Uhlmann’s Sandy distortion effects library, Tink’s PV3D transitions..
Tweening (moving an object property from a to b, set something with a transitional effect): Tweener, KitchenSink (MosesSuposes.com)
The Summarizing moral: Don’t reinvent anything, but don’t trust other peoples code blindly. Give credit where credit is due, and contribute back to the community.
James Echmalian - Enhancing Flex Presentations with Bitmap Technques
Bitmap data is just a 2D array of pixels with 4 channels (red, green, blue, and alpha).
Bitmaps are a view of a bitmapdata class, inheriting displayObject properties (height width, scaleX, scaleY, rotation, visible…) but bitmapData and bitmap are not the same thing.
Image - loader - loads an image out of an external file using loader, converts formatted data into display objects automatically.
Image - display - wraps a bitmap, is a flex component, has properties, styles controls…
Demo source to show bitmap editing will be on site ech.net/360flex2008 and ech.net/blog contains all source and annotated slides.
Special thanks goes out to all the Flex|360 Day Two Speakers!
February 25, 2008 at 6:38 pm · 459 views · Filed under personal, work
Matt Chotin - Keynote
Review: The big announcement! Air 1 and Flex 3 are here! And what more Flex has gone open source, well done!
And I can’t continue without mentioning Matt’s Flex Flex Behind the Scenes Video
John Mason - FlexUnit and Unit Testing
John talked about his FusionLink and TDD (test driven development).
Unit testing - is making test files that automatically tests your code for logical errors. We know the compiler will catch any syntax errors or things like that, but what about logic? ASUnit - unit testing framework for actionscript
I will definately be looking into Unit Testing, I’ll probably go the ASUnit route, as I mostly code in actionscript.
We talked a bit about ANT, an automating Build processes which sounds very exciting for a few projects I’m working on.
Some key points I took away: some unit testing is better than none.
It is more work at first, but in the long run can and usually will save lots of time.
The computer can automate a lot of the heavy lifting. Another good ides is to include unitTesting classes in your svn repository.
Here’s the lecture notes:
source and slides @ labs.fusionlnk.com
video of presentation @ http://www.carehart.org/ugtv
Ben Forta - Flex and latest Cold Fusion
A lot of this went over my head, but I am not a cold fusion expert, like the majority of those who attended this section. But hey, now at least I’ve seen some cold fusion! I just had to go and hear Ben Forta!
Jeff Houser - Code reuse with Flex and AIR
Great presentation discussing reusing code in AIR and Flex. I should have taken better notes, a great side note is I am now a subscriber of The Flex Show!
(Jesse Warden) - Big And Famous
How to succeed as an independent developer (to which append ‘or designer’)
Great session, I realy like the open discussion we had. I’m guessing because Jesse wasn’t there (he’s actually in the hospital, get well soon Jesse). Doug Mccune and Juan Sanchez headed up the discussion. Doug had a slide show about branding yourself which I totally agree with.
1. Blog - I hands down agree with this. The blog is the new resume, and plus the new portfolio. I use it as a place to collect code I want to remember (I figure if I’m keeping it I mght as well share it and showcase it. Might as well document the work I do cause I am already doing the work)
2. Use your name (or alias) - Yes it is definately nice to have a presence, and without a name I don’t think it’s really possible. Doug felt strongly to use your name and face and be very personal, I think as a developer that is important, although there are imporant advantages to having an alias and logo rather than a name/face, as Juan is proof of with ScaleNine (who is more of a designer).
3. Use your face
4. Make a Logo
5. Make Business cards
6. Be social and active in the blogosphere. - This one is important. You gotta do it all the way. If you’re a blogger wanting to et better known, be involved in the blogosphere! Communicate with others and comment on what you’re reading from others as well.
Well that sums up the official first day of Flex 360 Atlanta!
February 20, 2008 at 7:01 pm · 472 views · Filed under portfolio
Here’s a graphic of a circle of men. You may recognize the outline from any public restroom. They’re standing in a corny circle holding hands, like an all over the world theme., let’s just hope they all washed their hands…
I made the graphic a while ago, and have been wanting to interactive-ize it. I’ve really been wanting to play with elasticity, throwing things and snapping to a point… Although I’m still thinking about a version where I’d spin the objects rather than just throw them, I figured I’d put it up for any feedback that comes.
The different pieces all rotate differently and it changes if you are dragging or ‘holding’ them. Then you can press the anchor (gray) button to toggle the snap. The objects will all center around the anchor and spring into place (elasticity applied to position and rotation). And then the interactivity changes and rather than dragging and dropping them, you push and bump or throw them. It almost turns into a game…
February 19, 2008 at 8:29 pm · 595 views · Filed under personal
REASON ~ Live at the Caledonia Lounge ~ 5 February 2004
If you know me you probably know that I love music, and that I love to play music…
I have been in a few bands before, not for the money (cause there wasn’t any), nor the fame (not much of that either), but for the fun. Looking through my old stuff, I found a recording of what I consider the most fun concert I played. I’ve talked with people about the “rocking” days and had no point of reference, so here it is, the point of reference. I just wanted a place to put this for anyone that’s interested. Because at home, these tracks aren’t doing much- other than collecting dust. So noticing that it is now over four years old, I want to give it away for the music-ly minded out there. Enjoy!
This is Reason, the band, which is now dis-banded, but we had fun while it lasted.
February 15, 2008 at 7:47 pm · 3,334 views · Filed under tutorial
Overview
To find the distance of any two points on an axis is easy, just subtract them. But what about when you have to find the distance of something not on the axis (a diagonal)? Find the distance between any two points with the Pythagorean theorem. This is an old problem we can look to history and find the Pythagorean theorem and Pythagoras, the Greek we’ve named this after. His theorem states that ‘In any right triangle, the area of the square whose side is the hypotenuse (the side opposite the right angle) is equal to the sum of the areas of the squares whose sides are the two legs (the two sides that meet at a right angle).’
You may remember it as the formula you memorized in geometry or algebra class ‘a squared plus b squared equals c squared’ a^2 + b^2 = c^2
Okay, but how does that help in flash? You want to find the distance between point a and point b. Well c would be the distance between the two points. We know the formula, solving for c. c = square root of (a^2 + b^2). c = Math.sqrt(Math.pow(a, 2)+Math.pow(b, 2)); Math.sqrt()
is the square root function, so Math.sqrt(4)=2. Math.sqrt(x) computes and returns the square root of x. Math.pow() is the power function, so Math.pow(4, 2)=16 (4 squared). Math.pow(x, y) computes and returns x to the power of y.
You say I remember using this for triangles and stuff, I just want to know the distance between two points, there’s no triangles.
Well, there actually is a triangle we can draw. Go from your first, along an axis (this makes one side), and the other point, along the other axis (this is another side), and you’ll see that the distance you’re looking for is the third side of the triangle (the hypotenuse).
Example
Here’s a quick interactive flash file to show the idea.
Actionscript
xmid = Stage.width/2;
ymid = Stage.height/2;
a = _root._ymouse-ymid;
b = _root._xmouse-xmid;
c = Math.sqrt(Math.pow(a, 2)+Math.pow(b, 2));
feedbacka.text = Math.round(a);
feedbackb.text = Math.round(b);
feedbackc.text = Math.round(c);
Download
As usual, here’s the source flash file (flash 8 compatible) to take a look: distance.fla
February 11, 2008 at 7:03 pm · 1,550 views · Filed under portfolio
Overview:
Using what I learned with the Actionscript Javascript Communication Tutorial, and pushing it a little further I’ve set up this example of how flash renders html and css. This is basically a wysiwyg (What you see is what you get) html editor! Natively flash only handles some html and css. Many people have enhanced it’s capabilities with projects and Classes, but I made this to show what is accepted by default as far as html and css is concerned. I know there are specs and many lists about what will work, but to me the best way to know if my code will work is to try and see…
I’ve made this app so if I have a question, I just paste in my html/css and send it to the swf to see it rendered live. This saved me a few headaches, so I thought other might enjoy it as well… So here it is.
Example:
Render your own html and or css in flash. htmlToFlash.html
Here is the flash rendering of some dummy text as html with css applied
Here’s the html interface where I paste in the html and css.
Each supported css property has a corresponding actionscript property, but the naming convention is a little different for css in actionscript. Each actionscript property name is derived from the corresponding CSS property name; the hyphen is omitted and the subsequent character is capitalized. So for example: ‘font-weight’ becomes ‘fontWeight’.
Download:
Here’s the open source files if you want to get your hands dirty. Let me know if you improve this or even have any questions about it!
Loading ...