Flash Player 10 on its way

The way we are all looking right on the platform is heading, full fledge 3d environment. Some of us might have been blasted with some magnificent overwhelmingly great 3d flash sites, but most of them still share one problem in common, limitation of the browser and software rendered 3d. This upcoming version shows a lot of promise that probably 'developer' are always wanting to explore. Designers might find their way through this as well, a whole world of new possibilities. No more prerendered 3d videos.

We are finding the path are either blurred so much that it emerged in between flash, website and 3d gaming on pc. Or even mobile. I wouldn't be surprised in the future (it is happening now) that there will be an entirely new market for creating 3d casual games through Flash and people buying accounts online, entirely, look at how Playstation Network, WiiWare from Nintendo and even Microsoft Xbox Live Arcade is expanding.

Flash Player 10 Demo | Flash Player 9 Demo
Some short write up on the Alternativa platform on this on chewing pixels. They even had a news release on the site launch.


Newsground Sugar Glider
Look on the above example, some of us might or not, heard of the other underdog of 3d in the Flash industry, known as Away3D.

Fifa Street 3

Green Planet
Though of course some of the big player like North Kingdom and Lessrain has been implementing it on their commercial projects. I did take a quick look into it, and certainly the learning curve it less steeper compared to the ever popular Papervision3D. Of course certainly the game might not be as exciting as what we can expect, but there is a lot whole some of thing to except with this new possibilities!


Ecodazoo
Though I had no freaking idea which engine they might use for this, it is certainly fabulous, on both the idea and execution for this agency site. Amazing I would say. You can rotate the book around to see from all angles of its transition. Thanks Kai for sharing.

Bowling Buddies
But fear not, one of the most polished 3D flash game to date would be this I will say. But sadly this can only be accessed through Facebook App, if you only have facebook account. But this also means that a lot of working opportunities will be open in the future for game developers.

Panorama For The Office
Upon browsing through the sea of informations, I found through this article from Blitz Agency that is kind enough to share with us their techniques in building a VR Tour using Flash and Papervision3D.


André Michelle
If you browse deep enough nito André Michelle's library, you will notice some of the newer work compromised of very hardcore 3D driving games in Flash. For example the FunCup.


Spectra
One of the most innovatively used, visually exciting and usable newsreader. I'm impressed. This would be great if the news source are not just restricted to one.

Download Flash Player 10
The link above will lead you towards the download page for the beta player. I'd suggest you get the ActiveX version of the Flash Player to view the SWF in your desktop, so it wouldn't interfere with your browser plugin that you are currently using. It is certainly very exciting future ahead for Flash.

Some more resources for your consumption :

• Andy Zupko - Hefty Papervision3D Resources
• Bartek Drozdz
• FIVe 3D - Flash Interactive Vector based 3D
• Creating Panorama Image to use with Papervision3D
• QTVR (Virtual Reality in PV3D)
• Paperworld 3D
• Arduino and Papervision
• UnitZeroOne

Disclaimer : Do this the correct way and no harm will occur, and I take no responsibility in any manner if you just being unlucky screwing up your computer.

[Freebies] jumbleText Class - make your text dance

jumbleText Class (v1.0 11 June 2008)
Hi there everyone, I’m hereby would like to share with you my first humble experience in creating a class for AS2.0, namely jumbleText.as which you can download at :
http://www.manmeng.net/fun/jumbleText.zip

What it does?
Takes up your text and jumble it up in a bunch of gibberish and then slowly forming it back to the original text. Look at...matrix? or http://www.yugop.com

How does it look?
Here I have setup a sample page : http://www.manmeng.net/fun/jumbleText.swf

What is this?!
It’s an experimentation that I did back then to incorporate to my long overdued portfolio site, but I felt it’s best I share it to see how I can improve from here.

How do I use it?
I’m trying my best to make it as dumbproof and easy for user, but at this point, here are what it is needed (refer to screenshot on top as well).

• Create a new font and link to “myfont”
• import com.manmeng.misc.io or import.com.manmeng.misc.*
• use an empty movie clip, probably name it, such as “mc”
• use this... io.jumbleText(movieClipName, yourText, width, height, textColor, textSize)
  

And then you are ready to rock! Hope you will enjoy it. Any bugs report or suggestion please mail it to siaukia [at gmail dot com. I will port this to AS3 as well. Keep in tuned!

HelloRussia

Instinct
I'm not quite sure if I ever will understand Russian, but this site needs no more than visual explanation to show you how weird it is, but in a good way, it's inspirational and the flash is top notch. Perhaps I would call this experimental, but for company portfolio site, well, it really depends. From the interactive agency known by RedKeds.

More goodness

Enabling Mousewheel on Flash (AS3)
Pixelbreaker is kind enough to show us the light towards enabling mousewheel on MacOSX! Finally after years of anticipation. But on the other hand I am also hoping there will be support for horizontal scrolling, and that would really revolutionize on how navigation will going to be created. Thanks!


Tag Galaxy
A very innovative (note the word innovative) way of presenting a metaphor of 'searching' through categories of pictures. I am impressed by the presentation and usage of PV3D here, but on the same time, what impressed me is the concept behind that makes good use of a metaphor , planets vs. related keywords. Instead of displaying only text, this site gives you a good idea on 'related' planet nearby. Awesome. Additionally, the navigation is very usable. Note the history/back option.


foedus
A list of hardcore but detailed work to be precise is in it's bucket here. I'm always impressed by how subtle the designs is but without the elements present in their work, it will be just another plain-jane site. Serves as a good design inspiration as well.

From all fancy looking sites and sounds, perhaps you might interested to do some reading on the dark side of Flash that is contributing towards the Web2.0 webosphere.


Get Out And Play
One of the cool looking and fun site I have stumbled across throughout this year. On the first look, I never realized it would be a marketing campaign site by Nokia, to rebrand the Ngage plat form which serves like an online marketplace for gamers to play and share. What is cool about this site is the clever use of conventional idea, but blends with some wicked twist, and a hell lot of effort. Note : the video.


Bar Da Boa
Some viral site takes us into creating fancy looking character and sends it to our friend, and back and forth. This one? Takes a look at tattoo and real time "tracking" of the text you input on the video that has the character.


Street Fighter
The classic fighting game is making a comeback this year. And that is with a big bang on our face. Probably you might start to ask me why I am talking about this site while it has nothing in spectacular about it's backend or glitters? But I would like to emphasize on the good use of media in this case, the video itself is a great selling point for the whole site, it's beautiful and...powerful. On the other hand, you might notice that there is a widespread usage on anchor link. the # symbol. It is especially crucial in these day where Flash is always questioned on it's realiability between switching forward and back inside a browser history. Look, a fine example.


Acrobat.com
No this not the usual annoying slow-loading pdf reader that we always used to hat...like? This time around, this site sure hits the bulls eye. Do not be fooled by it's plain looking introduction landing page. Wait until you go inside you can't stop your mouth from opening wide from the great thoughtful navigation for the users, and design. This site acts like a all-in-one manager for your documents just like how Google manages your emails, calenders, documents and so on, just that this one is in Flash, and it's 'exceptionally good'. Really.


White Void
A very inspiring studio that leads into some ground breaking interactive design work.

Nat Geo Offroad Challenge
And when I thought driving inside Flash has died down. Thanks to Kai for this. It feels

Goodness Inside

Foundation AS3
Going through the ups and downs in Actionscript 2.0 is not like an overnight experience, I know and I understand. But time has to go and the new one has to come. Actionscript 3.0, is all of our nightmare. It's been year more than a year, perhaps even 2 or more. But I'm glad I found few resources that deemed helpful to me, that helped me built my first button in AS3! Yay. On the site itself you may find very helpful resources on the example file that you can do in AS3. But of course with the book guidance, it would be even easier and faster to learn than guessing each syntax. Enjoy.

On the other hand, after getting firmed up in basics of AS3, you might want to look into some interesting basics in Papervision 3D, which this site from Dennis Ippel gives you a heads up on how to quickly set an environment in AS3 + Papervision.


Singularity, the global web conference: October 24-26, 2008
Singularity is the first large-scale online web conference in the world.


Setting up FMS3
If you are into multiplayer-flash programs, Flash Media Server 3 would be the best choice, but the price itself might already kill half of your intention of doing something big, but on the other side, there is this open source engine known by the name Red5, an alternative. How awesome is doing multiplayer is? Look at :

Dofus
An online massively multiplayer game built on the Flash platform. It's excitingly beautiful!

Adobe, Make Some Noise

Adobe, Make Some Noise
Interesting enough, this has start to slowly gain momentum in the Flash creative circle. What is this you ask ? Below is an extract on what it is all about...

“Adobe, MAKE SOME NOISE is a campaign, which addresses the lack of dynamic sound manipulation in Flash. ”

Nice I would say since this would kick some start at looking into some supersonic sounds application in the future. More robust one that enables us to input more microphone and control/detect level of treble/bass/frequencies.

Creating the right W3C validation Flash page

Sometimes it just kills you to figure out on how to make the both world of Flash and HTML in one lovely space. But no matter how good you are in Flash, you will always bound to HTML in holding your lovely website. I wouldn’t say it is a burden to learn and adapt to the web standards, since it will not only help us, but the future of web.

There are of course various methods published on the web previously on how to create a valid page that embeds the Flash object, which is entirely different from what your Flash’s F12 can do.
I now introduce SWFObject, a very versatile javascript utility that makes your day shine brighter. Not only it embeds your flash file that complies to web standard. It’s being constantly developed and updated. Now on version 2!

But what surprised me is that they even provides you a dumb-proofed HTML generator that saves you a lot of hassle on figuring how to alter the original HTML template to fit your needs.
What can I say more? It’s one of the MUST-HAVE tool inside your personal Flash toolbox.

[Experiment] Sticky Particles /w Source

Sticky Particle
Originally inspired by yugop on his creation @ amaztype. But that was years ago before BitmapData is even out. That really made me wonder what kind of algorithm he thought of to make this work. A pure genius.

Source file is in Adobe Flash CS3 Format, commented and available for download at :
[ Download FLA ]

Demo is viewable at :
[ View SWF ]

[Tips] Using Tweener

I hope you are still having a good weekend through this week. And if you remember a few post back then regarding the usage of Tweener, it has became an essential tool for me, if not, a neccessity for me in building a Flash project, faster and more efficient.

Like the good ol’ MC TWEEN, a spiritual succesor towards Tweener, you can download the free class files at http://code.google.com/p/tweener/

In this post I will go through a sweet short usage introduction that is enough to entice you to try more. Compared to MC TWEEN, in which you will have always declare :

#include mc_tween.as;

...at the start of every flash file, contrary to Tweener, you have to only do this, just like importing class for BitmapData or BlurFilter. Like :

import caurina.transitions.*;

But how do you use it? Unlike, MC TWEEN that only requires installation through a MXP package (double click and install through Macromedia extension), you need to place the classes in a correct folder. I will share with you on how to prepare your Flash to use Tweener.



Step 1 : Go to Tweener website at http://code.google.com/p/tweener/


Step 2 : Click on Downloads, or alternatively, you can download directly from the Featured Downloads link at the right of the page.

Step 3 : Select the Class file that best suite your preference, I will choose AS2 at the moment, it shouldn’t differ too much with AS3.

Step 4 : Once the link is clicked, the download will proceed immediately. Unzip the folder to your Desktop/Finder after download is completed.


Step 5 : This step here is purely optional, but I practice this because it really help to boost up my productivity and organize my Flash Files altogether. Adapted from Lee Brimelow’s tutorial, I will usually have a “Flash” folder on my Desktop that stores all my external Classes (Papervision, etc etc) and my experimentats. In this case, I will put the extracted caurina folder into Classes for all my AS2 files, this applies to any classes that is for AS3. Reason? It is best to have a separate Class folder for both AS version to avoid mixup and overwriting.

Step 6 : Now we will go into Flash and add our own Class Folder. Go to Preferences inside Flash (Ctrl + K for PC and CMD+K for Mac).

Step 6.2 : Select Actionscript from the left menu and Actionscript 2.0 Settings on the bottom right.


Step 6.3 : It will now pop a window for you to specify the location of the Class folder. Press on the plus (+) sign to add a new directory for this. And click on the Target button to find/browse the specified folder.

Step 6.4 : Select the correct folder which stores all of the external classes.

Step 7 : We will now proceed with our first experiment on using Tweener. It is really simple, which I will provide the example file on the end of this sharing. Create a new document with a movieclip that is named as “box” as its instance name. On the first frame and layer a/s, we will initilize the Flash file with importing the Tweener class.
By doing : import .caurina.transitions.*;
We will now try to move the box from the left side of the stage to the right end of the stage. Additionally, it will fade out after it reaches the right side. Awesome?

Step 8 : We will start with moving the box from left to right with the syntax as below :

Tweener.addTween(box,{_x:400,time:1,transition:"easeIn"})

Test the movie and it should slide gracefully from the left side of the screen to the right. Okay now, you might think on what about making more crazy stuff? Before going into that detail, the code is compromise of the name of the movieclip you need to control, and inside the {} curly bracket, you will then need to specify what you want the movie clip to do. It’s that easy!

There are a lot of syntax that you can explore and refer from the online documentation at :
http://hosted.zeh.com.br/tweener/docs/en-us/
But the most common used by me are : _x, _y, _xscale, _yscale, _frame, _color, _alpha, _autoAlpha
And you might think what are those? _autoAlpha?! basically it’s some really cool predefined animations that set to tween your movieclip to alpha 0, and make it disappear (_visible = false) automatically!

Step 9 : Now for the magic, we will add another line as :

Tweener.addTween(box,{_alpha:0,delay:0,time:1,transition:"easeIn"})

Notice the delay there? It is the same amount of time (in second) as the first tweening, that means the second code of tweening will wait in line until the first one finishes in 1 second. Experiment around. You will be amazed.

Extra note : For starter or intermediate learner, you might be stunned with all these examples that you can find at http://tweener.googlecode.com/svn/trunk/examples/. Head on to gotoAndLearn() as well for those recent tutorials that made use of a lot Tweener.

[ Download Tutorial File ]

[Toy] YouBrowser - YouTube Visual Finder

YouBrowser - Look For Video (literally)
I had some chance earlier last year to play around with YouTube’s API and I’m looking forward to improve this toy. Basically when we want to find something, etc “look” we really want to look around. So I hope you will find this useful and have fun “looking” for top videos.

Do keep the comments and suggestions coming in to make this one a better one for all of us. Cheers!
If you like it, digg it or bookmark the url, will be permanent at : http://labs.oneduasan.com/YouTube.html

Update : Tips to share.
In regards if you are looking to do some dynamic user input/search through php-->flash. There’s some trick I found on the internet. I will probably share it in detail next time when I finalize the detail on YouBrowser search engine. But basically if you want it to work, you need to send a string to youtube on the ‘tag’ you want to search and parse it back as a xml document to you through php. And I realized it can’t be done directly through Flash, at least in AS2.0.

$devid = $_GET['func'];

$theURL = "http://www.youtube.com/api2_rest?method=youtube.videos.list_featured&dev_id=".$devid;

$contents =implode ("",file($theURL));

echo($contents);

?>

Note that the function that is helping this to work is the implode() function that feeds the data from the api into xml data and then send it back to Flash. Hope you will find this useful.

[Inspiration] Jonathan Harris

Telling Stories Using Data : Jonathan Harris
An exclusive interview with data virtualisation pioneer, Jonathan Harris. One of my big source of inspiration from his work is his habit in reusing existing material but to make it more visually appealing and effective in conveying communication. Talk about good design being made better.

[Tools] Tweener

http://code.google.com/p/tweener/
"...In layman's terms, Tweener helps you move things around on the screen using only code, instead of the timeline..."
"...Tweener is also the spiritual successor to MC Tween..."

Basically if you are familiar with the succesful MC TWEEN for ActionScript 2. You will find yourself blessed with this. Since there are quite a lot of aspect improved in terms of efficiency in implementing tweening. On the other hand, it will help for you to learn faster if you are also regularly learning from gotoAndLearn()

Random Bits of Sharing

ColorFlip
A rather simple and direct site. But it definitely does a good job in simulating a full page spread paper that you can tear. Much like a layout pad that concept/2D artist draws on. A canvas.


Shuffle
Knock your opponent’s ball, er... away. Pretty addictive if you ask me. But nevertheless it does reminds me of both snooker, billiard and dodgeball.


Real Time Raytracing in AS3.0
While announced a while ago, it seems that the Flash technology has reached another milestone in implementing 3D technology onto the web. Does it mean, in the future, we will see, RTS or FPS games inside your browser using Flash?


World Golf Tour : PGA Charity Challenge
This would definitely be one of the stunning 3D Flash game at the moment that I had seen. I’m still thinking that the gameplay or instruction could be further enhanced. Took me several minutes to figure out how to hit the golf ball.

Transitioning & Effects

Starbucks Coffee At Home
Sometimes, what really is impressive about a website is not how it is technologically
driven, but it is so beautiful beyond words that you are seamlessly feeling like you are watching an interactive video showcase in a website. This website doesn’t shout out loud on the crowd but it does all bit of details that makes this one a premium site to be inspired at. The details of video transition, rollover, sound effects. This all small elements makes up to a big outcome that will define if the site is worth of visit. And the concept are just fantastic, from the usual shop that we see, that uses chalk on the blackboard to promote the latest drink, this straightforward idea is then brought to the web, and it’s fresh once again! bravo.

Using Papervision 2.0

Papervision 3D Tutorial
gotoAndLearn() is an amazing resource for video tutorial from the basics to the intermediate level in Flash Actionscript programming. In my recent browse to the site, they have one really interesting tutorial on implementing a 3D cube navigation with papervision 3d. Check em out!


Dear readers,
I has been a mild long time since this has any updates. This time around I will look back into sharing interesting thing I have found over the years.

Salutes,
Mervin