Friday, December 30, 2005

Flash Game Development


Was browsing around to look for more information on Flash 8's BitmapData in exporting JPEG format using FLASH/PHP. Hidden Resource is a portal where it posts news and findings on game development in Flash, very interesting articles they have there.

This is then i've stumbled across this link, A REALTIME RTS in FLASH! OMGLOLWTFBBQ
It's called Dawn2

And I'm deeply sorry if I haven't introduce you guys to Samorost 2, which released quite some time ago, which is developed by Amanita Design. A very addictive RPG-click-based-adventure game.

Their idea is always wicked, wacky and mysterious, you never know what you'll expect. The game's rich in animation, fluid and sound effect, well, go and explore, you'll know what i mean.

Off topic? I've bump across very weird site courtesy of Paul Neave
I'd realize that if you enjoying those click-based journeys in Flash site, i bet you'll like this even.


VectorPark

AFLAX : Ajax like application? Flash + Javascript?


AFLAX (Wikipedia Entry) is a method through which developers may use JavaScript and Flash together to create AJAX-type applications, but with a much richer set of vector drawing controls than are available in either Internet Explorer or FireFox. Developers using this library have access to the full range of Flash features, but without ever touching the Flash IDE.

Flickeur


Flickeur
An interesting application created by Mario Klingemann @ Quasimondo
It's an app where it retrives and fetch a random picture from Flickr API and then displays it on the screen infinitely as if it's playing a video. You get the idea. And you'll never know what's coming next for you to see, because everything's random inside.

And if you're interested in developing an applicaiton like that, you can look for a solution to guide you one step easier in acheiving it using Kelvin Luck's Flashr. Of course you'll have to take in account that you understands advanced AS. One of the few very interesting app you seen developed are Flash version of Flickr, known as Flappr

Thursday, December 29, 2005

Web Usability : Video ?

Very useful piece of study and information about why and how to implement a more efficient and user centered video content.

http://www.useit.com/alertbox/video.html

And if you would like to know more about how to build a site that at least follows the web usability guidelines, look no where from Dr. Jakob Nielsen's useit.com

Wednesday, December 28, 2005

The power of Flash 8, how far can it go?

I bet you've been wondering how far that Flash 8 would take our browsing experience to?
Visit the site to experience it.

Underworld Evolution


At first I would give myself a second though what makes this site so unique and award winning besides from the ultra sharp and detailed images, which is very vivid and breathtaking, especially the sound effect plays a big role in bringing the mood strong for the site's ambience. If you look and dig through inside, you'll realize that you'll stumble across lots and lots of contents/information about the movie, isnt it? Which keeps you running around the site for a while.

Tuesday, December 27, 2005

[Tutorial] Basic : Adding sound to your button

If you remember the old time where you had to manually adds the sound effect for your Flash button one by one, and it's a big hassle when you need to make adjustment for it, remember? Worry not. The help is here, and function() is your friend. :D

Difficulty : Basic / Advance
Topic : Sound Effect for Button
Download : [ Rollover Button Sound Effect FLA ]
*Updated FLA File with more sound effect

If you remember previously on the tutorial that you had follow on the 'Smooth Button'. You'll find this one is extremely, or even it looks so fake because it's so freakin' easy. Believe me, when i realized that i can add sound for my button this way, i almost cried. :D

For starter, you only need one file, the sound file that you want to add for your button.

See? You can download the FLA file and refer to it if you're unsure. Let's move on.

Next, probably you find it's not familiar for you to use "Linkage" in Flash. It's really a useful tool/option that you can grabs things from the library and slap it on the stage through Actionscripting. Very useful. But for now, if you're new, don't worry, it's very easy to understand the concept. You'll only need :

1. Right click on the sound effect you want your button to produce, and select on "Linkage".

2. If you realize when you clicked on the option, you'll presented with a window. Don't get freaked out yet, click on the "Export for Actionscript" as on the screenshot, and insert a name for this sound file, for this case, i use 'click', you can put any name that you can easily remembers it.

Okay, we're done for the first part, let's move on.

Look, we'll use a 'MovieClip' to act as a button, why you ask? I have no idea and how to explain, but i know it's so versatile and flexible that you can use a movieclip to do absolutely anything, you can combine the "Smooth Button" with this tutorial, and makes one kewl button for your website or interactive work. For this case, we'll name it "my_btn"

We're done with the setup! Now let's have a brief look at the script, and start realize how easy it is.

Now here, to make thing's clearer, i've splited both functions and actions on a different layer, and for this case, the function helps in 'grabbing' item from the library and 'plays' the sound whenever it's triggered. Look at the function's structure, it's pretty straightforward, no strings attached. Few line does the job pretty neatly.

Next we'll look at the actions layer, look how scary is it, isn't it? Only one line, and whenever user clicks on it, the "click" sound is triggered. S C A R Y ISNT IT?

We're done! Congratulations, now please agree with me functions is your friend.
Finally, let's say that we have a scenario that we have thousands of button using the same sound effect, using this option would be so flexible and helpful for you!

Notice that you can call your functions absolutely from everywhere, within the Flash movie, hidden deep inside, and it'll still work!

Here's the FLA file, have fun Flashin'
Download : [ Rollover Button Sound Effect FLA ]

Saturday, December 24, 2005

Plant A Tree, Grow the Forest

Stumbled across this site on netdiver this morning and felt it was rather refreshing to see this concept, you plant a tree on this christmas instead of bringing one back home or sending cards :)

http://www.lida.com/festive-forest/
credits : netdiver

This is one of the very shiny and outstanding character designer and flash site i've been to, very notable effort on every point of it's site, the transition and the details on the animation. Salute. Must Visit!

http://www.postgal.com

Thursday, December 22, 2005

ProtoKid.com - Online Scrolling Shooter Game

It's like an ordinary game? You bet, but it's rather very addictive and the concept is very interesting. You act as a 'kid' that collects and retrives back the data destroys by the virus inside the computer, the graphics are pretty cute and nice and neat. And too bad there's no pause button for me, the music's great as well. And it's just an overwhelmingly addictive lol. By DIESEL

PopPirates

http://www.protokid.com/

credits : French'N'Fresh
Developed by d00ds from http://www.blocmedia.com/

Wednesday, December 21, 2005

O'Neill.com

Designed by : http://www.shanemielke.com/

A very notable site on the interactivity and creativity in tie'ing the flash interactive experience with the product. Usually that a product shopping experience would be slow, smelly, boring and lame. But this changes the perception of it.

Scroll down to the bottom of the page and experience how you can play and 'customize' the product the way you want, NFS:Underground way. You have the power to "Mod" it the way you want.


https://www.oneill.com/

[Tutorial : Advance] Rollover Smooth Button


Look at http://www.newmediaaward.com and http://www.manmeng.net's navigation. Have you ever wonder to produce smooth rollover effect in Flash? That a button that will shrink and grow according to your mouse rollover?? That it's so trendy out there? Here's below a tutorial that will briefly guide you through on how to setup your site with that kind of interaction in no time.

Difficulty : Basic / Advance
Topic : Rollover Smooth Button in Flash
Download : [ Rollover Smooth Button FLA ]








By looking through this tutorial below, provided with basic understanding on how to work on animation, and motion tweening, you'll find this is rather easy and wouldn't be a tough task for you to use this navigation system.


First you'll need to have a MOVIECLIP to act as button, unlike conventional button to make the effect, you'll need to have to use a movie clip instead. Inside the movieclip, what you'll need to do is :

1. Put a stop() only for the actions layer.
2. Make an animation that you'll want your user to experience, either it's a masking animation or a 'grow/shrink' effect

*p.s.* Of course a more complex interaction can be done with only actionscripting completely without needed to do animation and tweening, but this method are very encouraging to people in making interesting and creative navigation.


Next you'll only need to make sure the movieclip is properly named.
For this instance, i named it btn_home.



And by looking at the screenshot above, there's very little Actionscripting you'll need to modify, which is when you have tons of button like that, you only need to make sure :
1. The correct name is pointed to the correct movieclip, btn_home, btn_about, btn_contact...etc etc..
2. for the onPress action, you can change the action according and suite your flash movie, because it might be the case that you want to the user to change the scene of this flash movie instead of popping up a new website url.

All of the tutorial above is coded and controlled by the Flash Event Model, which i think i'll spend more time explaning it in a different article. And what makes this "navigation" system so versatile is because :

1. You only need to copy paste a lot and only change the name
2. We use "function" in it. Curious of what it can help you? Wait for the future article that i'll write
3. Remember of those awesome and stunning Flash website that you came across that DOESNT LAG or takes up your CPU power so much? I've optimized the code to run that way, but if you found any bug or problem running it, do not hesitate to contact me :)

Here's the FLA file, have fun Flashin'
Download : [ Rollover Smooth Button FLA ]

Tuesday, December 20, 2005

Monday, December 19, 2005

Friday, December 16, 2005

Wednesday, December 14, 2005

How far Flash animation can go?

Part I
http://tabmok99.mortalkombatonline.com/mk_vs_sf.html
Part II
http://www.welf.org/sven/temp/crap/MKvsSF2.swf

Let the animation do the talking, big salute for the improvement, damn. I like it.

Recursive Study :D



Inspired from my idol, Mr. Jared Tarbell, made a study on this, really amazing how it can turned out :D can't wait to release the code after i'm done cleaning and experimenting with it. More to come :D

Recursive = A repetition of a certain code, making it to duplicate things around, :D i'm not good at explaining things, guess i'll work it out somehow.

Tuesday, December 13, 2005

[Experiment] Pong, bouncy area.

It's really been so long since i've posted any tutorial, been busy lately, but still i've been experimenting with various scripts, and gladly that i finally understood little bits of it.

Below is one of the script i want to share, although it's not optimized and finished yet, it simulates a pong game,where you can set the boundaries and let it bang on the wall, but one thing, i've yet to discover, to make the ball has a velocity and slows down on every hit on the wall.


[Download FLA]

*Update 20th December 2005, improved the engine, with the ball that has speed, but it's still far buggy than complete. Because if you try to release the ball with a faster speed, it'll run away from the stage. Lol.

Tuesday, November 15, 2005

SecurityUpdate - Update your flash player

http://www.macromedia.com/devnet/security/security_zone/mpsb05-07.html?pss=rss_flashplayer_mpsb0507

Thanks for Netdiver for the information. For you guys there which has Flash Player 8. It wouldn't be any harm for you already. This is because the guys out there found that there's possibily unauthorized third party would able to execute malicious code into the target computer that has Flash Player 7 or earlier installed on their computer.

Poor thing.

Monday, November 07, 2005

Flash MMORPG a dream? Not anymore

http://www.dofus.com
An amazing with great graphics to date and utilizing Flash to enable you to connect to thousands of other gamer out there.

Seriously, i'm amazed, not because the game itself is great, it's good, but because it's using Flash God-Dam-It!

You'll seriously stunned by how those guys from Dofus developed the backend technology for it, try it, no regrets assured. :)

Monday, October 31, 2005

Experiment with random output












Source will be available soon, after some cleanup. lol.
Inspired by http://levitated.net/bones/walkingFaces/index.html
[ Download .SWF ]
Playable on Browser, requires Flash Player 7 or newer
[ Download .EXE ]
Playable on any PC, but bigger file size

Sunday, October 30, 2005

Inspirations

I stumbled across Neave's site, the inspiration section, http://www.neave.com/inspiration which in a way he got inspired by the Flickr's services on how you can experiment with different application using flash, such as
http://www.krazydad.com/colrpickr/

It reminds me back of Guess-The-Google by Mr.Robinson. Hail to them.


OpenSource : Magnetic Field V1 (unoptimized)

OpenSource : Magnetic Field V1 (unoptimized)


Author's Note
It's not optimized for this version because it's using the onEnterFrame code which runs all the time even when the user does not do anything, which it will eats up a lot of CPU resources, and in fact, it will also makes your work inefficient for a larger scale basis. V2 coming soon.
Tips : Setting it at a higher FPS will make the thing runs smoother, but with a tradeoff that the script will need to loop more times, if you have more Frames Per Seconds.

30th October 2005
[ Download FLA ]

Friday, October 21, 2005

Easy/Medium : function() in Flash

Author : ManMeng
Difficulty : Easy / Medium
Topic : function() in Flash

It's powerful i mind you, and it's even mightier than Thor or Hercules, well, in my
opinion of course, at least it helped me to get through the website I've completed
recently, and saved my a** on a lot of troubles, (http://www.newmediaaward.com/).
Reading this article, I assume that you would have at least a minor knowledge of what
Flash MX / Flash MX 2004 can do for you, generally.

Introduction
It's so powerful that you can't live without it, and it's so dynamic that you are able to 'call' the function from everywhere within the movie, even if your movieclip are hiding
down deep inside the flash file. And what's even more you can put function inside another
function! And you are not even restricted to do all those super-hyper-special-dynamic-
interaction anymore!

But before i begin anything, i would like to seriously salute, bow and thank to Mr.Chee
Yen from HueVisuaLab that at least enlighten me towards this path to function() in flash.
:D. He's a great mentor to me at least.

The Concept
Okay, you'll even notice that the 'trend' are moving towards from what you hear:
-Script-everything-in-one-frame-flash-file
-ActionScript 2.0
-No-need-write-any-on-release-on-button-anymore
-use-alot-of-movieclip-only

Okay, that must scare you away, well, to be honest, REAL HONEST, it's not that freaking
hard to do it, and you'll be amaze and cry until you dry your tear how easy it is to
master all of those above! I did, and so can you!

The Trick
To show you how it works briefly on this article before i move on to another new post that i'll show how you can utilize this cool function() to create awesome navigation effect without even need you to go through the hassle copy pasting million of times.
So to understand the concept is EXTREMELY IMPORTANT.


First, we only need to have 2 layers for the Flash file (I'll provide the link for download at the end of this lesson). Obviously we'll need one layer that stores the Actionscript & function().
And the layer below is a MovieClip that will act as a button.
You ask why? It's my preference and you'll know why later.



To demonstrate how actually this function() will work, let's start by giving the button a name, i'll name it mc_btn. Then proceed to the actions layer, open up your Actions Panel by pressing on your F9 on your keyboard (PC). We'll use Export Mode if you're in Flash MX (Flash MX2004 by default, we'll have to type the script ourselves,but dont worry, it's not that hard as you think it is!), and it'll be easier for me to demonstrate how this thing work.

The ActionScript
No worries, here's the code you'll need to make it work, if you have trouble understanding it, it's the new Flash Event Model, I'll provide a link for you to read some articles about if you're curious, but even if you have no idea what it is about, you can master it easily, weird eh?
//--------------------------------------------------------------
// the function that you will call when user click on it //
function btnClicked() {
trace("hi")
}
// when user click on this button, instead of writing
// on (press) on a button, you can now do it on the frame
// while still getting the same effect

mc_btn.onPress = function() {
btnClicked()
}
//--------------------------------------------------------------


Save the movie and test it! Note that you can replace the trace("hi") with any other action you want flash to perform, using trace() is just for testing purpose and demonstrate how it works.



[Download FLA]

Have fun!
Salutes,
ManMeng

Friday, October 14, 2005

www.newmediaaward.com

So i've completed the first ever hyper-hardcore-coded interactive Flash website under my hand, but the real pain in my head is, it's ultiamtely CPU intensive that rendered me speechless when it ran on Mac, slow as a rock.

Well, i would still like to share the ups and down throughout the project itself and few discoveries I found and made within the project.

Some basics one, it's best you never user wmode=transparent for good god's sake, you'll end up scratching your head fighting for compability across platform and browser, that is when i realize it is not supported in Mac, and even worse, it increases the lag/cpu hogging. So when i switch back to an opaque background instead for the site, i'm still pondering on how i can stretch the background that is textured to look right on 'designer' point of view instead of splatting a flat colour background on it, it's a real pain, really.

So then i've started to study how it is made posssible that all these interactive sites nowadays, made full use of FSF (Full-Scale-Flash) which stretched the entire flash to 100% width and height, that covers their entire browser and doesnt scale the movie whenever i resize the browser's window instead it only moveis it position and maintain it at center.

That is when something like Stage.align really saved my ass from all the trouble. But as soon i got happy and uploaded the site, i'm bound to another tragedy that the size only loads half on Firefox, i keep on cursing and found out that there's a runaway for it, to add a bit of CSS code on top of your page.
height 100% for your body,html

So that really pissed me off, living thinking when there would be a day that browser war stops. But it's not the end yet, after spending restless month developing the site and figuring out this and that, I've chosed to use only 100% for the width of the class while maintaining the original height of the Flash without stretching it to 100%, because it doesn't fit correctly/entirely inside a 1024x768 screen resolution and would crop my project into half. God.

But alas, it's online and up at http://www.newmediaaward.com. The only pain left to me is to reduce the cpu processing cycles within the site, because even on idle, the movieclip's onClipEvent are everywhere and hogging up all the processing power.

Experiments in FlashMX 2004









Some testing on scrollbar, customly scripted by me. Supporting the mousewheel button, experimental design inspired by guys from http://www.oniondesign.com.tw











Flash Experiment // Magnetic // Runaway













Flash Clock :)

Sunday, August 07, 2005

Basic - The Basics in Flash Part II

Here is again another part of the basics in Flash, covering more topics in how to publish/export your Flash movie files.

Difficulty : Basic / Easy
Topic : Publish Settings in Flash MX 2004

Once you've save your file, you can start to fiddle around with publish setting by going to File --> Publish Settings or by clicking on the Properties panel's publish settings.


By default, there are both 2 options to choose from, both Flash and HTML format.

Look closely at the options, you'll see there are options for Projectors as well. It is actually a file that will make your SWF files to be able to run on their computer even if the user doesn't have Macromedia Flash Player or any browser installed. But Windows Projector will only work on Windows operation system while the Macintosh Projector only work on Mac OS's computer.
Projector files helps designer or developer to make their Flash contents into CD-ROMs or even helps compabitlity across different platform with different settings.


Note : Every options changed here will NOT affect the way your Flash movie will react/behave/interact but merely changes the codes within the HTML page that will render your Flash movie, example, transparent Flash Movie files, etc
As with the HTML settings, the options are pretty explainatory by itself,
Template : What platform your Flash movie will be used on? A computer or PalmOS?
Dimensions : Define the size of your Flash movie will look like
Playback :Define if you want user to control the movie by right clicking for Play/Rewind/Forward options
Quality :The default quality you want the Flash movie to run, From Low to Best, recommended High (default)
Window Mode :You should experiment around with this option, as for the transparent windowless, i've tried it only to work on Windows, while on Mac's IE, it doesn't seem to render properly, and the background of the FLash will still be in opaque colour.
HTML alignment :Which location you want the Flash movie to be located on the HTML page?
Scale :Define if you want the user able to enlarge(zoom) into your movie files, but default setting is recommended
Flash alignment :similar to HTML alignment, you will have to experiment to get the effect you want.
Show Warning Message : Alert messages when your Flash movie has broken script that might make user's computer freeze,it is recommended to turn it on to inform your user in case it asks if they want to stop the Flash movie file from playing.
Publish : Publish!(export)

That should be a brief introductory towards the settings that you will need for exporting your Flash files to SWF/EXE/HQX files. Coming up i'll feature a preloader instead which will be more useful and functional/practical.

Friday, August 05, 2005

Basic - The Basics in Flash

Although i'm supposed people that browses into this blog would have a minimum level of understanding on how Flash works, i assume. But i'll start with something light before i move on to something more advance, involving typing out custom scripts and so on.

The Basics
Just like any other software, your Notepad/SimpleText(Mac), you have to go to File -> New before you can start to do anything inside the software, the tools are standard where you can use some of the tool to draw, resize, delete, arrange your objects and so on.
Like mine, i have my Action-Frame panel opened, which is then used to write simple ActionScript. But you'll only have to understand how the Properties panel at the bottom of your screen work at the start. Because it will help you a lot in making things easy for you.




Upon opening new document, please observe the Properties panel at the bottom of your screen. There are some settings that you'll have to observe and understand what every each of it does and affect your Flash movie. It is not crucial to understand every single of it but it's useful if you do.



If you notice, there are few fields that you can adjust on the spot, such as Frame rate/Fps and with other miscellanous information about your Flash movie file. Click on the Size : 550 x 400 to check with what setting you can adjust for your new Flash movie file.


Dimensions : Setting a value for this will define the space that your movie will be, the default value would be 550px * 400px.
Background colour: Define what background colour that you want your movie to be
Frame rate : By default 12fps (Frame per second) would be sufficient for a normal animation / navigation menu bar, but if you're working towards a complex and smooth movie/animation, you might think to adjust it to a slightly bigger value, but do beware and keep in mind, even if you set your movie frame rate to 60fps, but not every single computer are able to process so many frames per second as smooth as other computer, especially with older generation of computers, Flash movie files tend to run slower than usual because the CPU couldn't process so many objects or frame at one time, making the entire movie/browser slowdown or sometimes crash. The optimum and most used around are 30 - 60fps. Unlike movies, which are either 25fps/29.97 (PAL/NTSC format) Flash movies behaves differently although there are similiarity.

If you notice below the Size setting, there are also another Publish : Settings. I'll cover more on that on the next post, as it has something to do with Exporting your Flash files into HTML and some settings to optimize your Flash movie to run faster/smoother.

There won't be any FLA file for this tutorial as it's just an introductory towards the Macromedia Flash MX 2004 interface.

Have fun.
ManMeng

Why Flash MX 2004?

I'll start this site with some basic introductory on why Flash MX 2004, and reasons of not to avoid it, or scared by it.

There are few good ones, besides from you have to type the ActionScript by yourself, which i know most of us hate to do that, with all those memorizing of alphabets in our mind.

But before this, i was like this as well, i bear the fear to approach or to use this software at all, until i started to work after i graduated, and I got in touch upclose with this software, which since last time, i worked with Flash 4, 5, MX, which i've got myself used to the predefined script inside, and rely a lot on it to make my movie work, take for an example, the simple stop(), which I'll even open up the ActionScript editor and double click on the predefined stop(). It's not to be ashamed of, indeed everyone learn from the basic, and i did. And i would say, the experience to be able to type out the ActionScript out by your hand, the satisfaction is something which is really rewarding, looking back yourself which don't know anything at all about Flash, except animating objects inside.

There are sure lots of people, especially designer turned back against Flash MX 2004 due to it's being focussed more into OOP already, but until now, although i'm a designer, but i realized Flash MX 2004 itself are more versatile then what i used to work with the older version of Flash. The .as files and so much more thing, i mean, it amazed me on how Flash can be expanded, from a single user interface application to multiplayer application, imagine, Massively Multiplayer Online Game (MMOG) on Flash!

I'm looking forward to share lots of my knowledge with you pals,

Salutes,
ManMeng

myFlashPortal!!!

Regards,

Here now you'll find absolutely no bs except when i post site news, and it will be an ongoing post of tutorials, from basics to advance and expert scripting in Flash MX 2004 (I will still feature few Flash MX files, but rarely), this is due because i'm intensively working on Flash MX 2004 recently in the past few month.

And that got me really going with it, for your information, I'll separate the tutorials into 3 category from
1. Basic (Menus/Basic animation/Tips)
2. Advance (Requires understanding of basic actionscript, such as gotoAndPlay)
3. Expert (This would require you to understand complex scripting which you might need to understand how variables in Flash works)
4. Experimental (Things that you find it has no value, but it has it's fun factor in it, basically some of my personal development or experimentation on certain combination of ActionScript)

There won't be a category separator since blogger doesn't include it, so you'll have to search within the posts if you want to look back at past tutorials, but it wouldn't be much problem, email me if you want to request for a help or tutorial, i'll be gladly to help you out, at the moment of course lol.

But no worries, i'll ensure that you'll love Flash like i would, and i really grateful and thankful to those who supported me and urged me to get my head into Flash, especially I've even shocked to know myself that i'm able to learn Flash MX 2004, with me typing out my codes. lol.

I'll do a lot of talking later. I'll start to write tutorial from today on. Why myFlashPortal you ask? I'll answer that later. For now have fun!

Salutes,
ManMeng