Stage3d plus flash player 10 backwards compatibility
So while there are hundreds of cutting edge tech demos, sites and games being produced with flash player 11′s stage3d, it’s not always practical to develop for a player version before it’s reached a mature penetration rate. Given that flash player 11 was only released a few months ago it’ll probably be another few months before we see the 90% mark being hit. http://riastats.com/ puts it at about 63% at the time of writing this post.
That aside, it’s still quite tempting to disregard the above and set the minimum player version to 11, but we all know the client just isn’t going to let this fly. The obvious option is to create an swf for each target player containing the 3d engine code, then have your main application swf load the appropriate 3d engine swf. It’s a bit of a drag, as it’ll increase your work load, but it’ll get the job done.
a basic example of this can be viewed at:
http://labs.peteshand.net/stage3d_fp10fallback/
source can be downloaded from:
http://labs.peteshand.net/stage3d_fp10fallback/stage3d_fp10fallback.zip
Flash 11 Platform Game Prototype
you can view an early prototype for a platform game I’m building with flash 11, away3d and box2d below.
You can view the game in action here (Warming: there is no pre-loader).
I’ve been surprised at the speed in which I’ve been able to put this together and because everything is xml driven once the initial level, characters and game objects have been implemented content generation is going to be a breeze. You can view the xml here.
As stated above this is an early prototype, so there are plenty of things missing, for example the hero will probably stop walking when he isn’t moving 
and I’m sure most of what you see will change anyway, but just thought I’d share my progress.
integrate browser scrollbar with flash – part 2
After my last post on integrating the browser scrollbar with flash a friend of mine (Tim Keir) instantly pointed out that there is a small library called swffit which he said achieves a similar result. Don’t you just hate it when that happens!
However while swffit is a great library (and I encourage you to check it out), it achieves a somewhat different result than what I was trying to demonstrate. swffit basically sets the height of the swf to 100% as long as the browser height is greater than x, if the browser height is reduced below x then the flash movie’s height is set to x and a browser scrollbar appears. This is great for full-page flash movies when viewed on a small screen because the user will always be able to scroll down if there screen isn’t big enough.
So obviously my explanation and example require a little reworking to clarify why you might want to implement something like this. So that’s what I’ve done. This time round I’ve abandoned the idea of creating an experience similar to an html page and focused on more of a ‘flashy’ example. Its still very basic, but it should give you a better impression of the possibilities. The second example can be viewed here.
This time there is also a scrollbar along the bottom of the window, as well as a 3d cube which replaces the checker panel. The side scrollbar controls the cube’s rotation around its x axis and the bottom scrollbar moves around the cube on its y axis. also in addition to this clicking and dragging anywhere on the flash content (or pressing the arrow keys) will also update the scrollbar locations and in turn feed back into the flash movie. The thing i love about this concept is that the user will see the scrollbar, drag it down and expect the page to scroll, however in this case the cube rotates… wow, amazing they think to themselves for half a second.
The source files can be downloaded here.
Read More
Integrate browser scrollbar with flash – part 1
Just a quick post to demonstrate how to integrate the browsers native scrollbar with a full-page flash movie. Why? Why not… People always go on about how flash and html/javascript work well together, so thought I’d try to create something new that’s flash/javacript related.
Click here to view the example in action. Right clicking anywhere on the page will bring up the flash player context menu, so obviously this is a full-page flash movie. However where this differs from your traditional full-page flash movie is that it will add a native browser scrollbar if the checker box exceeds the height of the browser window. Once the scrollbar appears the user is able to drag the scrollbar up and down and it will adjust the flash content just as you would expect html content to scroll.
So why is this a nice feature to have? Well the browser scrollbar is something everyone is familiar with. Everyone knows that when you see the scrollbar on the right hand side of the browser you can scroll the page. That’s not to say you can’t add additional interaction to the flash movie and update the scrollbar appropriately, I think its always nice to have a few different ways of navigating through a site, whether it be via the keyboard, or various mouse interactions.
Obviously this is just a basic example, but you could really go to town with this. If I had the time I would love to create a Stage3D scene and use the scrollbar to move through it.
You can grab the source here.
Continue reading part 2
Read MoreFacebook Fanpage PSD Template 2011
Lets face it, designers sometimes need to make a mock-up that doesn’t actually exist which sometimes can be time consuming and extremely irritating. Facebook fanpages have been a very hot topic for clients recently. They are wanting to break into the social media scene.
Today I’m releasing a mockup of the new 2011 Facebook Fanpage with editable text and image positioning, hopefully this will save you some time and help you create and effective facebook mock-up for a potential or current client.
Click here to download the PSD.
MovieClip Loop Control
1 2 3 4 5 6 | import net.peteshand.utils.LoopCtrl; LoopCtrl.setLoops(this,3,40); // Parameters: // Target MovieClip, // Number of Loops, // Frames of end of timeline to stop at (default = 0) |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | package net.peteshand.utils { import flash.display.MovieClip; import flash.events.Event; import flash.events.EventDispatcher; public class LoopCtrl extends EventDispatcher { /** @private **/ private static var ref:MovieClip; private static var loops:int; public function LoopCtrl () { } public static function setLoops(_ref:MovieClip, _loops:int=1, preEndFrame:int=0):void { ref = _ref; loops = _loops; var count:int = 0; ref.addFrameScript(ref.totalFrames-1-preEndFrame, LastFrame); function LastFrame():void { count++; if (count == loops){ ref.stop(); ref.dispatchEvent(new Event("LoopEnd")); } } } } } |
.MPO to Anaglphic or Stereo Pair JPG
I recently bought the new Fujifilm FinePix W3, it a nutshell its a camera with stereoscopic lenses (see below) which means you can shoot 3d photography and hd footage. It doesn’t stop there though, on the back of the camera you have a 3.5-inch glasses free 3d display. Without a doubt the coolest gadget I’ve ever bought.
Fujifilm FinePix W3
One thing that surprised me was the format in which the W3 saves stereoscopic images, the file extension is called .mpo and I can’t say I’ve ever heard of it. I was expecting it would save as a stereo pair .jpg or .jps which would be easier to view and edit on a regular computer display.
It turns out there are a few programs out there that will convert .mpo to .jpg, but not that many. So i decided to look into the possibility of converting in actionscript. Because the .mpo format is basically multiple jpgs saved within the one file it turned out to be pretty straight forward. Building on Thibault Imbert’s work on jpg decoding I simply wrote a few classes to parse the .mpo into separate jpg byteArrays and then output the result as a stereo pair or a anaglyphic image.
Read MorePerformance vs filesize vs fidelity
Performance, file-size and visual/audio fidelity is something every designer and developer should consider when creating content for the web. I can remember when I first started using flash it was all about doing as many cool and complicated on-screen concoctions as possible, regardless if the frame rate slowed to a crawl. However as I and the platform as a whole has matured I’ve found myself considering and weighing up the above to get the most out of every experience I fashion.
This post looks at a recent project of mine, which at face value appears quite simple, however behind the scenes there were a number of hurdles that needed to be overcome before the finish line.
you can view the final advertisement here (turn the sound on!)
So the basic idea was to have hundreds of coffee beans sitting in the leader-board banner at the top of the screen and an Espresso cup sitting in an MPU banner bottom right. When the user interacts with either banner the beans would begin to fall down, get ground up and coffee would pour into the espresso cup. Once this animation finished the user would be prompted to pick their favorite type of coffee, which would then transition the MPU banner to the users selection. Sounds easy enough right… Well yes… and no. The main problem with this campaign is that it was for McDonalds, they expects the finest visual aesthetics however we have very limited file-size and processing power to play with.
I first concentrated on creating a realistic looking bean. Seeing as the geometry involved is quite simple I decided to go ahead and make a 3d model of half a coffee bean. Then simply used Away3D to load it into flash.
Now rendering one 3D bean is all fine and dandy, however when you get up into the hundreds things start to slow down… like really slow down! can’t wait for the new upcoming low-level 3D API Mole Hill. Anyways for the time being the solution to this is pretty straight forward, all I did was load the model once and then take a Bitmapdata snapshot every 5 degrees when required, then each bean display object simply pulls and displays the relevant Bitmapdata snapshot.
The next challenge was to decide how these beans were going to animate. I wanted to make it as realistic as possible. The obvious choice would be to utilize one of the many as3 physic engines out there. I decided to go with box2d, however ran into problems almost immediately. The first issue was of course performance, as soon as I added more than say 40 to 50 objects everything really started to slow down (and I’m on a pretty fast computer). The second issue was that it was adding about 300kb to the file-size.
So how can I get rid of these performance and file-size issues while still keeping the resulting animation… Simple, get rid of the engine in the final swf. I created a new fla that setup a physic scene and recorded the position and rotation of each bean every frame (see above). This swf ran slow as hell (about 1-2 frames per second) however this didn’t matter as long as all the information was being captured. I then filtered the data, compressed it into a ByteArray and saved it as a data file ready to be embedded in the final swf.
This allowed me to simply embed this data file in the final swf, uncompress the data and animate all the beans without actually publishing with a physics engine. This approach resulted in a saving of 266kbs and a swf that played back easily at the target frame-rate.
Final Leaderboard by itself (should be 728×90 pixels, but i had to scale it down to fit in this post)
I will post a second part to this post covering the MPU.
Stay tuned.
Trace Event
It would be great to add a way to track trace events.
when testing flash within the browser its nice to be able to see the trace output. currently there are ways to do this with plugins for firefox or air apps from De MonsterDebugger, but sometime your testing on someone elses computer who don’t have these programs installed. if we had the above event we could simply read a class that shows a debug panel when you input some key combo.
1 2 3 4 5 | stage.addEventListener(TraceEvent.UPDATE, OnTrace); function OnTrace(event:TraceEvent):void { textField.text = event.trace } |
if you’d like to see this event added to actionscript please visit the below URLs and add your support:
http://bit.ly/aEKFK9
Read More
Recent Comments