Des Preloader à couper le souffle avec prettyloaded.com

TitaX — Sun, 29 Nov 2009 13:37:00 +0100

Les sites utilisant à 100% la technologie flash sont souvent lent à charger, surtout lorsqu'on a une connexion bas ou moyen débit.
C'est pour cela qu'on à inventé les splashs de chargements, aussi appelés des preloader.

Le site prettyloaded.com propose un diaporama des meilleurs preloader, d'une superbe qualité et souvent alliant l'humour et le design.
Si vous êtes en manque d'inspiration pour vos preloader, n'hésitez plus à cliquez sur prettyloaded.com

Attention toutefois on peut y passer des heures devant

Télécharger gratuitement des animations flash avec Beautifl

TitaX — Tue, 08 Sep 2009 18:00:00 +0200

Qui n'a jamais rêvé de réaliser des animations Flash de toute beauté ?
Qui n'est jamais resté en extase devant un site Full flash (tout en animation flash) ?

Tout le monde qui a déjà un peu touché à la création d'animation Flash sait que c'est difficile et assez long et que la prise en main demande beaucoup de temps.
Et si nous avions un site à notre disposition pour nous aider et nous mettre à disposition des ressources gratuitement ?
Ce site existe c'est : Beautifl

En effet, Beautifl est une galerie d'animations Flash à disposition de tous et cela gratuitement.
Il permet bien sûr de voir les animations mais surtout il permet aussi de consulter le code source et de le télécharger, et on le sait tous c'est avec l'inspiration des autres que l'on peut plus facilement et plus rapidement progresser dans l'apprentissage de la maitrise d'un logiciel comme flash.

Donc si vous souhaitez vous améliorer sur flash, n'hésitez plus, connectez-vous sur Beautifl.
En prime voici une exemple d'animation choisit dans la galerie.

PV3Dその10 3Dでアトラクタっぽいの - wonderfl build flash online

Personas : Big Brother is watching you !

Méthylbro — Tue, 08 Sep 2009 08:00:00 +0200

C'est un fait que nous connaissons tous ; l'émergence du web et sa faculté à pouvoir stocker et diffuser de l'information va sérieusement modifier nos comportement sociaux.

Cela à déjà commencé d'ailleurs, mais ce n'est qu'un début.

Personas est une application qui va sans doutes ouvrir la porte à une nouvelle étape de cette évolution. En effet, sous ses apparences sympathiques et ergonomique soutenue par une ravissante interface graphique en Flash, cette petite web app' permet de rassembler des données sur des personnes.

En faisant une recherche sur le nom de quelqu'un, Personas va analyser le contenu qu'elle va trouver concernant cette même personne. Une fois toute ces informations réunie, l'application permet en théorie de retrouver avec un relative exactitude vos centre d'intérêts.

Je vous laisse découvrir le résultat par vous même. Je suis cependant ravi de voir que pour le moment ce programme n'a rien pu réunir me concernant.

personas.media.mit.edu

[Documentation] Créer un effet de lueur sous Photoshop et animé avec Flash

TitaX — Sun, 04 May 2008 11:00:00 +0200

Les sites web animés sont maintenant monnaie courante sur la toile, avec la démocratisation de l'ADSL et le haut débit qui va avec, nous avons la possibilité de donner à nos visiteurs des sites avec des animations très perfectionnées et un superbe rendu.

Nous allons apprendre à réaliser un effet de lueur en utilisant à la suite le logiciel Photoshop et le logiciel Flash MX pour créer l'animation.
La réalisation de cet effet est assez simple et ne demande qu'un masque et un dégradé de couleur linéaire (radial de préférence), cette documentation est donc accessible au débutant.

Partie Photoshop

1 - Créez un document de 800x600 et tracez un dégradé linéaire vertical, partant du clair au foncé sur votre premier calque.

2 - Ensuite créez un nouveau calque, et retracez un dégradé linéaire vertical, mais cette fois le gris clair doit être un peu plus clair, et le foncé un peu plus foncé ...

3 - En étant sur ce nouveau calque, sélectionnez le rectangle de sélection et commencez à découper ce dégradé en petit morceaux, comme sur l'image ci-dessous.

Si j'ai mis des flèches, c'est pour vous montrer que les bords sont + découpés que le centre, en avançant dans le tutoriel vous allez comprendre pourquoi.

4 - Maintenant que c'est fait, tout ce que vous devez faire, c'est sélectionner ce calque, puis aller dans BarreMenu > Edition > Tranformation > Inclinaison , sélectionnez les coins supérieurs gauches et droits, et descendez les pour que cela crée une profondeur, et puis rentrez les coins dans le milieu, comme sur l'image ci-dessous :

5 - Maintenant, rappelez vous que je vous avais dis de + découper les bords que le centre, en fait on va effacer quelques petits rectangles ... le moyen le + rapide de le faire est de sélectionner la baguette magique (sur tolérance : 32) et effacer les petits carreaux pour former une espèce de pyramide, ensuite rajoutez une simple ombre portée, de distance 0 et taille 20.

6 - Maintenant l'opération que vous devez faire peut être un peu difficile ,mais il suffit juste de suivre les étapes :

A - En étant sur le calque des petits carreaux inclinés, maintenez la touche CTRL et cliquez sue votre calque dans la palette calques, remarquez qu'en survolant calque et en ayant la touche CTRL enfoncée, la petite main a un rectangle de sélection sur elle.

B - Maintenant, sans desélectionner, aller sur l'outil de rectangle de sélection, puis faites un deuxième click sur votre sélection et cliquez sur Intervenir, ceci va inverser votre sélection .

Pourquoi j'ai fait ça ? En inversant la sélection, les zones vides pourront être remplies,et elles nous serviront de masque dans flash.

7 - Maintenant, sans désélectionnez, créez un nouveau calque, puis remplissez ce calque de noir, étant donné que la sélection sera encore la, ça remplira l'intérieur et la partie haute de votre image.

8 - Donc, nous, tout ce qu'on a besoin c'est l'intérieur des petit carreaux, alors on va effacer tout ce qui ne sers à rien, vous pouvez le faire avez l'outil Lasso Polygonal.

Il suffit d'effacer les zones que j'ai tracées :

Voila en masquant les autres calques, vous voyez ce que ça donne:

Vous pouvez toujours rajouter un nouveau calque et retracer un dégradé allant du noir au blanc pour créer l'effet du haut, qui disons sert de "fond".

9 - La on va pouvoir enfin passer à Flash, mais avant de faire ça, on va réduire la taille de la zone de travail et exporter nos images.

-> Donc l'image est en 800 x 600 ...ce qui est trop, on va aller dans BarreMenu > Image > Taille de la zone de travail, et faire en sorte que ca ressemble a ça :

J'ai passé en 800x250 et cliqué sur la flèche de bas, comme ça mes calques s'alignent sur le bas

10 - Maintenant on va exporter nos calques !

A - D'abord vous masquez le calque qui se trouve tout en haut, c'est-a-dire le calque qui nous servira de masque dans Flash, et vous savez en JPG ...nommez le "fond".

B - Ensuite vous faites l'inverse, donc vous masquez les calques de fond, et vous affichez seulement le calque qui nous servira de masque dans Flash.

C - Sauvez celui-ci en PNG,et nommez le "masque".

Partie Flash

1 - Voila, maintenant dans Flash ça va aller assez vite, d'abord on va régler les dimensions de l'image sur 800x250 et mettre en 24 images/seconde (à moins que vous voudriez autre chose) Vous importez vos 2 images sur 2 calques différents, faites en sorte que le fond sois en dessous du calque qui servira de masque ....

Maintenant, ce qu'on a importé à partir de Photoshop doit être le masque, l'image est un PNG transparent, mais flash ne prends pas en compte cela, donc si vous créez un masque avec cette image, les zones transparentes il les comptera comme opaques car flash est un programme vectoriel, ce qu'on va devoir faire, c'est transformer cette image en forme vectorielle, pour faire cela, on va devoir tracer ce bitmap.

2 - En étant sur le calque qui nous servira de masque, allez dans BarreMenu > Modification > Tracer le bitmap ,et ajustez les options comme je l'ai fait :

Remarque : Si vous distinguez des zones grises apparaitre dans le centre, effacez les manuellement.

3 - Maintenant, sélectionnez ce calque et tapez F8 pour le transformer en symbole, une fenêtre apparaitra,choisissez le comportement CLIP.

4 - Double cliquez sur ce symbole, ça va entrer à l'intérieur de celui-ci, ensuite créez un nouveau calque et passez le en dessous du calque de la forme qu'on à vectorisé.

Remarque : Il est préférable de verrouiller ou masquer le calque de la forme vectorisée pour qu'elle ne nous gènes pas.

5 - Sélectionnez le calque vide qui se trouve en dessous,et créez une ovale (rond) assez grande en longueur pour qu'il dépasse la taille du masque (effacez le contour de l'ovale).

Sélectionnez votre ovale et allez dans BarreMenu > Fenetre > Melangeur de couleurs > Texte italique, mettez le type de remplissage sur radial, et rajoutez une couleur dans la barre de dégradés.

Faites en sorte que les réglages soient comme sur l'image Image:

Le but est de rendre le dégradé transparent sur les bords ce qui va créer un effet de lumière pendant son mouvement.

6 - Maintenant on va créer une simple interpolation de forme pour créer l'effet, sur la première image clé, soyez sur que votre ovale est en dehors de la zone de travail à gauche, avancez à 80 images sur la ligne de temps, et cliquez sur F6 pour insérer une image clé, déplacez votre ovale en dehors de la zone de travail, mais à droite.

Cliquez sur la première image de votre ligne de temps, et dans les propriétés, réglez l'interpolation sur forme.

7 - Maintenant, la dernière étape qui est assez simple, déverrouillez ou démasquez votre calque du "masque",faites un deuxième click sur le calque à partir de la ligne du temps,et choisissez masque, ceci va transformer votre forme en masque et l'ovale radial en masqué.

Résultat

Voila, fin du tutoriel .... voilà ce que j'ai obtenu et c'est horrible...

texte pour ta video

Enfin c'est pas assez travaillé, alors prenez votre temps, bonne chance.

(Merci à DxS pour la rédaction de cette documentation)