VGtrivia.com Video Game Quiz
Happy New Year to all the people reading this blog! ( Yes mom and dad, i'm talking to you)
During the lasts weeks, I've worked on a new website that is now over!
I'm glad to introduce you: VGtrivia.com
It's a game for videogame nerds . That's an online Quiz contest with tons of audio, video and picture questions, retro minigames, achievements, rankings and many other fancy things.
People can add their own questions to the game so the content will permanently evolve.
So come and beat the highscores and show the world that your videogame knowledge is limitless!
How to run Molehill and Away 3D Broomstick with Flash Develop
Here's my method to make and run cool Molehill projects with current FlashDevelop release (3.3.4 ) :
First of all, the information you may need can all be found here
The first thing you need to do is to install the runtime on a web browser.
What I did is installing it on a browser I don't use mush ( Internet Explorer ... yeah... ) so my usual player is not fucked up.
To check that the player is really installed, go here :
http://www.flashplayerversion.com/
You should have something starting with 11.0
At this point, you can run insane Molehill demos on the Web :
Alternativa 8 racing game
Away 3D Broomstick demos
Zombie Tycoon game
It's time to configure Flash Develop :
- Download the right Flex SDK : build 19786
- Unzip the flex SDK on your drive, don't override your usual SDK, you'll regret that !
- Download molehill playerglobal.swc here : playerglobal.swc
- Go into your new Flex SDK directory and more precisely into : YOUR_DIRECTORY\frameworks\libs\player\
- Create a new folder named 10.1
- Paste the playerglobal.swc file into this folder.
- Rename it to playerglobal.swc
Now you can start Flash Develop :
To create a new Molehill ready project :
- Make a new Projet : Project->New Project-> AS3 Project
- Edit the generetad bin/index.html file
- Add the following flashvar to enable GPU acceleration : wmode: "direct"
- Open Project->Properties :
- Set target property to : Flash player 10.1
- Set test movie property to : Run custom command... and leave the command blank
- Switch to Compiler options tab :
- Add this value to Additional Compiler Options : -swf-version=13
- Set Custom Path to Flex SDK value to your fresh downloaded SDK path
- Close the pannel and your project is now ready !
- Press F5 to build the project and everything should be fine !
To test your movie :
- Run the index.html page with the browser where flashplayer 11 is installed.
- You see nothing ? It works !
Now lets add a bit more 3D in this project :
- Get latest Away3D release from SVN repository ( I'm sure you know how to do this... ) :
http://away3d.googlecode.com/svn/trunk
- Open your project properties
- Switch to Classpath tab
- add AWAY_PATH\broomstick\Away3D\src to include the library.
- Close the properties pannel
Here's a basic Main file to test your project :
{
import away3d.containers.View3D;
import away3d.lights.PointLight;
import away3d.materials.ColorMaterial;
import away3d.primitives.Cube;
import flash.display.Sprite;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
import flash.events.Event;
[SWF(width="800", height="600", frameRate="60")]
public class Main extends Sprite
{
private var _view : View3D;
private var _light : PointLight ;
private var _cube : Cube;
public function Main()
{
_view = new View3D();
_view.antiAlias = 4 ;
addChild(_view);
_light = new PointLight();
_light.position = _view.camera.position ;
_light.color = 0xffffff;
_view.scene.addChild(_light) ;
buildObjects() ;
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;
stage.addEventListener(Event.RESIZE, stageResized);
addEventListener(Event.ENTER_FRAME, step);
}
private function buildObjects():void
{
_cube = new Cube() ;
var material : ColorMaterial = new ColorMaterial(0xFF0000) ;
material.lights = [ _light ];
_cube.material = material ;
_view.scene.addChild(_cube) ;
}
private function step(e : Event) : void
{
_cube.rotationY += .3;
_cube.rotationX += .3;
_view.render();
}
private function stageResized(e : Event) : void
{
_view.width = stage.stageWidth;
_view.height = stage.stageHeight;
}
}
}
In your molehill ready browser, you should see a nice red shaded cube.
NOW GO FOR DEMOS WITH BILLIONS OF POLYGONS §§§
Download the whole project
Watch the demo ( need fp11... )
AS3 Form – Basic use
With this tutorial, you will be able to understand the basic philosophy of AS3 Form and first practical use case :
- Form creation
- Error definition
- Graphic linkage
- Sensors system
- Optional fields
- Specific fields : Email / Password
- Form condition : MatchCondition
- notSent fields
- Form validation
- Error display
- Values collection
Here's the result we want to have :
( hey it's a flash ! You can interact ! )
First of all, here's our general class template :
{
[Embed(source='assets/formdemo.swf', symbol='formSample1')]
private static const FORM_VIEW : Class ;
private var view : Sprite ;
private var form : Form ;
public function BasicSample()
{
buildView() ;
buildForm() ;
}
/**
* Add the form view to the scene.
* The view is designed in Flash IDE and not generated by the API
*/
private function buildView():void
{
view = new FORM_VIEW() ;
view.x = view.y = 10 ;
addChild(view) ;
}
/**
* Form construction
*/
private function buildForm():void
{
// let's link the OK button :
SimpleButton(view.getChildByName("btnOk")).addEventListener(MouseEvent.CLICK, validateForm ) ;
}
/**
* Form validation
*/
private function validateForm(e:MouseEvent):void
{
}
}
We simply Embed the view and link the OK button to validation function. Nothing special there...
Let's write the buildForm method content :
First, we create the form :
Then we set error messages that will be dispatched by the form :
form.messager.add("email_invalid", "Your email is invalid") ;
form.messager.add("password_too_small", "Your password is too small") ;
form.messager.add("password_empty", "Your password is empty") ;
form.messager.add("password_confirm_empty", "You must confirm your password") ;
form.messager.add("password_confirm_too_small", "Your password confirm is too small") ;
form.messager.add("password_confirm_invalid", "Password and confirmation does not match") ;
Errors can also be defined by passing an single XML Object :
Now we can define our first field : Name.
The name is an optional standard input field so the declaration is this one :
form.getField("name").optional = true ;
view["tfName"] is our reference to TextField we want.
The label field is written directly inside the input. We can do it this way :
Email field is a little bit more complex. We will use EmailField type ( EmailField extends InputField ).
It's not optional, so error messages must be defined.
Each field has 3 default error message : empty, too small or too large.
They can be defined this way :
field.setMinSizeError("min_error") ;
field.setMaxSizeError("max_error") ;
//or just
field.setErrors("min_error", "max_error", "empty_error") ;
Specific fields can have specific errors for example, our email field declaration is :
InputField(form.getField("email")).setDefaultLabel("Type your email*...") ;
// errors
form.getField("email").setEmptyError("email_empty") ;
EmailField(form.getField("email")).setInvalidMailError("email_invalid") ;
We want to turn red TextField's color on error, so we define a sensor for the email field :
Included default sensors are BitmapFilter sensor, MovieClip sensor and TextField color sensor, but you can easily write your own extending AbstractSensor
PasswordField is another specific type :
form.addField( new PasswordField( view["tfPassword"], 6), "password") ;
form.getField("password").setEmptyError("password_empty") ;
form.getField("password").setMinSizeError("password_too_small") ;
InputField(form.getField("password")).setDefaultLabel("Type your password*...") ;
form.getField("password").addSensor( new TextFieldColorSensor( view["tfPassword"] , 0xFF0000 ) ) ;
// password confirmation is just another password field
form.addField( new PasswordField( view["tfPasswordConfirm"], 6), "confirm") ;
form.getField("confirm").setEmptyError("password_confirm_empty") ;
form.getField("confirm").setMinSizeError("password_confirm_too_small") ;
InputField(form.getField("confirm")).setDefaultLabel("Confirm your password*...") ;
form.getField("confirm").addSensor( new TextFieldColorSensor( view["tfPasswordConfirm"] , 0xFF0000 ) ) ;
We don't need to export the password confirm value, so we write :
AS3 Form can handle extra form validation conditions
In this case we want matching passwords :
Conditions can also have sensors :
form.getCondition("match").addSensor( new TextFieldColorSensor( view["tfPasswordConfirm"] , 0xFF0000 ) ) ;
At least, we empty and reset form labels :
Form declaration is now ready . It was a bit long, but it will save a lot of time on validation process.
Forms are boring, and will always be... so as an intermission here's a funny lolcat.
Stop laughing, take a breath, and now we're ready for the validation process !
Let's fill the validateForm function :
To validate the whole form and get the error, here's what you must write :
On this call, every field and condition will be checked. Sensors will react on errors and an Array containing all of the errors will be returned.
You can specify how many errors you wan't to handle on each validation this way :
From then, error and values collection is piece of cake :
(the cake is a lie, the cake is a lie, the cake is a lie...)
To get a returned error, just extract it from the array and write the content where you want :
view["tfError"].text = error.message ;
To collect the values if no errors, simply write :
or
Here's the whole block :
{
// validate the form values. The param tells how many errors you want on a validate ( 0 for all errors )
var errors : Array = form.validate(1) ;
// no errors, form is ok
if ( errors.length == 0 )
{
// get form values :
// if includeEmpty param is set to true, optional fields left blank will also be writen to the object
var values: Object = form.values() ;
// write result into error field
view["tfError"].text = "Values OK :" ;
for ( var i : String in values )
{
view["tfError"].appendText( "\n" + i + " : " + values[i] ) ;
}
}
else
{
// get the first returned error
var error : FieldError = errors[0] ;
// show the message in the error field :
view["tfError"].text = error.message ;
}
}
That was quite easy.
You can find the whole source code here :
http://code.google.com/p/as3form/source/browse/#svn%2Ftrunk%2Fsrc%2Fnet%2Fbabeuf%2Fform%2Fsamples
In the next tutorial, I will talk about other form fields types such as combos, checkboxes and radio buttons.
Thanks for reading !
AS3 Form
Aujourd'hui est un jour important.
C'est dans un esprit de conquête de l'Internet mondial et d'obtention de licences FDT gratuites que je met en ligne mon framework de contrôle de formulaires audacieusement baptisé AS3 Form.
Afin de toucher une plus large cible et notamment d'améliorer mon audience sur la ménagère de moins de 50 ans qui fait du flash, les articles et tutoriaux qui suivront seront rédigés dans un anglais approximatif.
Let's go for the english :
The purpose of AS3 Form is to create, restrict, check and get the content of web forms in a generic way.
No need to rewrite or copy/paste the same email Regexp anymore !
As rendering and constraints may differ from one project to another, the framework is designed to be as extensive as possible. You can create your own conditions and field types, starting from existing ones.
This api won't draw the form for you. It's not designed to create forms from scratch, but to validate the data in a single function call.
Here's what you can do :
- create a Form
- add specific field for each input you have
- link each field to its graphic representation
- add sensors to your field that will react on errors ( filters, movieclips... )
- group fields together ( radio button for example )
- create group and extra conditions ( such as password/password confirm check )
- load or add error messages for each field
- globaly validate your form to handle errors (you can specify how many errors you want to handle )
- auto rewrite Boolean values to custom format for server send
- export all form values serialized to Object or URLVariable
You can find the project here :
http://code.google.com/p/as3form/
For those who want to have look in the framework, here's the first tutorial to learn the basics :
Le trace, ca lasse…
Après une longue et pénible étude de cas portant sur plus de 10 000 applications scrupuleusement sélectionnées, mes conclusions sont formelles :
La fonction trace() de flash n'est décidément pas très pratique et reste surtout globalement inutilisable en ligne.
Depuis longtemps les hommes de toutes nationalités se sont unis dans un effort commun pour offrir aux créateurs de web que nous sommes des alternatives toutes plus séduisantes les unes que les autres pour remplacer cette fonction trace une bonne fois pour toutes.
On peut citer par exemple le Flash Inspector, aujourd'hui devenu pratiquement introuvable, même sur eBay :
http://www.luminicbox.com/blog/
le désormais célèbre Air Logger de Abe, gérant le debug multi flash et plein d'autres trucs cools :
http://code.google.com/p/airlogger/
Ou encore le fabuleux Monster Debugguer, qui n'en peut plus de repousser les limites du debug de feignasse.
http://www.demonsterdebugger.com/
Chaque outil dispose de son mode de dialogue propre et implique l'inclusion de dépendances spécifiques à nos projets.
Certaines méta librairies proposent depuis longtemps des solutions de dialogue avec ces applications pour faciliter la tâche des collègues :
C'est le cas par exemple de Lowra ou de la grandissante librairie de Skitoo.
Les solutions proposées sont complètes, proposant par exemple un système avancé de filtrage des messages, une configuration via du XML et plein d'autres trucs déments.
Toujours dans mon souci de faire comme les autres mais en moins bien, voici une présentation du package net.babeuf.logger dont le but assumé est de proposer l'approche la plus minimaliste possible du trace en ligne en terme de code à insérer dans son projet. J'ai donc délibérément supprimé toute instanciation, initialisation ou autre paramétrages pour ne garder que quelques méthodes statiques :
-log
-debug
-info
-warn
-error
-fatal ( bouh )
et un booléen enabled pour activer désactiver le tout.
toutes ces méthodes ont le même prototype
A savoir : le message, sous n'importe quelle forme ( string, number, XML, Object, Array, etc ) et en optionnel une référence vers l'object appelent le trace ( le plus souvent this ou rien du tout) pour s'y retrouver à l'affichage.
A chaque sortie possible correspond une classe présentant ces méthodes statiques à l'application.
net.babeuf.logger.AirLogger -> sortie dans le Air Logger
net.babeuf.logger.Firebug -> sortie dans la console de Firebug
net.babeuf.logger.FlashInspector -> sortie dans le Flash Inspector
net.babeuf.logger.JSAlert -> sortie dans des alertes Javascript
net.babeuf.logger.PopLogger -> sortie dans une popup html
net.babeuf.logger.EveryWhereLogger -> sortie partout en meme temps ( avec un partout paramétrable ) + le trace originel
Gros plan sur le PopLogger seule exclusivité de ce package puisqu'il permet à un flash intégré dans une page HTML d'envoyer des messages vers une popup HTML qui s'ouvre automatiquement.
Aucune inclusion de javascript n'est nécessaire.
dans le flash, et c'est tout !
Bien sur, les popups ne doivent pas être bloquées sur votre navigateur sinon, c'est raté.
Le EveryWhereLogger permet quant à lui de cumuler tous les logger en même temps sans réfléchir, ce qui fait du bien une fois de temps en temps dans une dure journée de labeur.
par défaut, toutes les sources sont actives à l'exception du JSAlert, bien lourd à la longue et du PopLogger, qui ne fait pas bien dans une démo client.
Chaque sortie est activable/Désactivable séparément si besoin :
EveryWhereLogger.flashInspectorEnabled = true ;
EveryWhereLogger.airloggerEnabled = true ;
EveryWhereLogger.alertEnabled = true ;
EveryWhereLogger.popEnabled = true ;
Pour ceux qui n'ont pas encore totalement décroché, une petite démo récapitulant tout ça :
http://www.babeuf.net/samples/logger/
et puisque c'est devenu une habitude, les classes ( dispos sur mon svn ).
Merci de votre attention.
Assurer le developpement international de ses productions Flash
Dans la série Big Brother is watching you , j'ai découvert récemment le site http://www.hostip.info/, base de donnée de correspondances adresse IP / Localisation disposant d'une API publique.
Puisqu'il est évident que la plupart des lecteurs assidus de ce blog œuvrent quotidiennement à l'international,
je me permet de vous livrer une implémentation Actionscript de cette API dont vous ne manquerez pas, j'en suis sur, de noter l'utilité pour déterminer la provenance de vos visiteurs.
Qui dit service dit évènementiel (sauf au tennis, mais restons concentrés), voici donc comment manipuler cette classe :
host.addEventListener( HostIPEvent.HOSTIP_CALLBACK, back ) ;
host.addEventListener( HostIPEvent.HOSTIP_ERROR, err ) ;
host.addEventListener( HostIPEvent.HOSTIP_FLAG_CALLBACK, flag ) ;
Et donc ? Que peut on faire avec cette instance de HostIP ?
Pour avoir le code pays ( une classe CountryCodes bien pénible à taper est dispo dans le package ):
Pour avoir le drapeau du pays :
Pour avoir simplement l'adresse de l'image du drapeau
Pour avoir une représentation texte peu exploitable mais très décorative de l'emplacement du visiteur :
Pour avoir une représentation XML très exploitable mais peu décorative de l'emplacement du visiteur :
Toutes ces méthodes ne prennent par défaut aucun paramètre et font donc la recherche sur l'ip du visiteur, mais une IP au format String peut également être transmise.
Comme une petite démo vaut souvent mieux qu'un long discours ( trop tard ) : démonstration
Snoop Scratchy Scratch
Je profite de ce blog à la visibilité exceptionnelle pour déterrer mes vieilles expérimentations invendues.
Voila donc une petite appli destinée aux DJ(s ? ) en herbe trop pauvres pour s'offrir de vraies platines mais désireux de retrouver les sensations brutes d'un concert live de David Guetta à la BBox.
Le principe ? manipuler un flux audio grâce aux fonctionnalités proposées par le flash player 10 afin d'en modifier la vitesse dynamiquement. Il suffit ensuite de brancher cela sur une platine virtuelle et d'inclure des fonctionnalités annexes pour avoir une petite appli de scratch fort distrayante.
Vous pouvez donc :
- scratcher les vinyles à la souris
- mettre en pause une platine
- modifier le volume de chaque platine
- modifier le pitch de chaque platine
- utiliser le crossfader ( flèches gauche/droite du clavier)
et avec un peu d'entrainement, à vous les Pass Pass, Tap tap, insert Scratch et autres Body's Tricks !
Tu l'as voulu ? hein ... ouais ... Tu l'as eu...
Je sais, les boucles sont d'une qualité médiocre et le résultat audio plus que douteux, mais tout le monde ne dispose pas d'un excellent sounegnagnagnère à portée de main.
Edit : Here's the full source code
Pixeliser une image ? Mais quelle riche idee !
C'est en consultant le passionnant blog Hidiho! de Nicolas Barradeau riche en expérimentations graphiques assez démentes que je me suis dit :
"Tiens ? Pourquoi ne pas faire la même chose en moins bien histoire d'alimenter mon blog où de toute façon personne ne viendra jamais ?"
Fort de cette riche idée, me voici en mesure de vous présenter une magnifique classe Actionscript proposant une fonctionnalité aussi utile qu'esthétique : pixeliser une image.
Le principe est simple : l'image source est transformée en BitmapData et coupée en rectangles de la taille spécifiée.
Chaque rectangle est ensuite rempli avec la couleur moyenne de la zone.
Voila comment on s'en sert :
incroyable non ?
Voici une petite démo avec une jolie asiatique dedans pour bien comprendre le non intérêt de cette classe et en même temps assouvir vos instincts de nerds fans de Hentaï.
Benchmark : booste ton code
Je vais commencer par vous présenter une petite classe dispo sur mon SVN qui peut s'avérer utile pour certains :
la classe Benchmark.
Son but est simple, pouvoir comparer facilement la rapidité d'exécution de plusieurs fonctions pour au final ne conserver que la plus rapide (ou la plus lente, c'est vous qui voyez).
Comme un petit bout de code vaut mieux qui long discours confus, exemple :
Création des fonctions à comparer :
Initialisation du benchmark avec deux paramètres :
-le nombre d'itérations : correspond au nombre de fois ou chaque fonction sera exécutée à chaque boucle
-le nombre de boucles : correspond au nombre de boucles à faire pour calculer la moyenne
on ajoute le bench à la scène pour afficher le résultat.
addChild(bench);
on peut désormais ajouter ses fonctions au bench :
la méthode addFunction accepte les paramètres suivants :
- la fonction à tester
- le scope de la fonction
- la label a afficher pour cette fonction
- le reste des paramètres à transmettre.
Une fois ceci fait, il ne reste plus qu'à lancer le test pour obtenir le résultat :
Résultat :
Et oui je suis également un UI Designer émérite.
Un premier article sans interet
Bonjour et bienvenue sur ce blog passionnant auquel vous ne manquerez pas de vous syndiquer, c'est certain.
Même s'il est très fortement improbable qu'un internaute égaré consulte cet article durant les semaines à venir, voici les objectifs de ce blog :
- Subjuguer la communauté actionscript francophone puis mondiale par la fulgurance de mon code (première phase) puis par ma plastique de rêve (deuxième phase)
- Devenir un codeur reconnu rapidement afin d'être invité en tant que speaker au prochain Flash on the beach (je n'ai rien de prévu pour fin septembre)
-Ajouter "investissement au sein de la communauté actionscript et contributions au monde de l'open source" sur mon CV (j'ai du travail mais on ne sait jamais).
-Avoir plus de 2 visites par mois sur mon SVN.
-Tenter de maintenir un blog en vie pendant plus de 3 semaines.
Merci de votre attention.