Aller au menu - Aller au contenu

Icône Fil rouge

Par Avatar SuprazZz
Mise à jour : 08/07/2010
4 613 visites depuis 7 jours, dont 142 sur ce chapitre classé 39/786
Et voilà le début de notre Fil Rouge, à savoir l'élaboration de petites animations incluant les fonctionnalités les plus usuelles utilisant la technologie Flash. :D

Si vous avez bien suivi les deux précédents tutoriels, nous avons en gros deux possibilités :
- soit un site uniquement en Flash
- soit un site constitué de pages Web Xhtml classiques avec intégration d'objets Flash.

Et bien certains seront peut-être déçus, mais pour des raisons bassement pédagogiques, on va prendre la deuxième solution. :) Mais ne me huez pas ! :p
Car si un site tout en Flash empêche l'intégration d'éléments Xhtml (ou du moins presque, nous verrons cela par la suite), un site en Xhtml classique n'empêche pas l'intégration d'applications Flash complètes. Il vous suffira alors d'extrapoler un peu le cours pour faire votre site Flashocentriste. :D
Retour en haut
Sommaire du chapitre :
Icône du chapitre
Chapitre précédent Sommaire Chapitre suivant
Retour en haut

Cahier des charges

Eh oui, comme dans tout projet qui se respecte, la première chose à faire est la laborieuse et lassante, mais néanmoins inévitable, rédaction du célèbre cahier des charges. ;)

Définition du cahier des charges (pour nos Zéros analphabètes comme leurs pieds :D ) :
Document qui décrit en terme de fonctions, d'aptitudes de qualité ce que l'on attend d'un produit.

C'est plus clair pour tout le monde ? Ça reste tout de même très théorique.

On va donc dans un premier temps rédiger tout ce que nous allons demander à nos petites animations :

  • Un logo (rigolo) - va nous permettre d'apprendre les bases
  • Un jeu de voiture basique - Application aisée des bases
  • Un lecteur mp3 - aussi appelé radio-flash ou radio-blog, c'est à la mode et c'est très instructif
  • Une galerie d'images - toujours sympathique pour afficher ses photos de vacances
  • Un mini-jeu - la consécration ! :p

L'ordre dans lequel on va le faire est l'ordre dans lequel je l'ai écrit, et vous allez voir que vous allez vite progresser. :)
Retour en haut

Architecture globale

On a le cahier des charges, alors maintenant il va falloir se demander comment on va agencer tout ça d'un point de vue liaisons entre interface (=côté utilisateur) et serveur.

Le Logo


Le logo ne nécessite aucune donnée externe, ce sera donc une bête animation flash sans liaison.
Il faudra penser à l'intégrer en haut de chaque page grâce à la fonction include() de PHP.

Un jeu de voiture basique


Ça sera un tout petit jeu vraiment basique, mais il permettra une première synthèse de vos connaissances en les utilisant toutes dans un projet comportant quelques lignes de codes. :D

Un lecteur Mp3


Dans le cas d'une playlist de dizaines de Mp3, Flash va devoir se débrouiller lui même pour aller chercher d'abord la liste des musiques, puis ensuite les charger bien entendu pour pouvoir les écouter. :D
Il faudra donc prévoir une page PHP qui sera appelée par l'application Flash et qui retournera une Playlist.

Une galerie d'images


Bon, à priori pas de grandes différences entre un lecteur mp3 et une galerie d'images... Sauf que les musiques du lecteur sont présentées sous la forme d'une liste textuelle, alors que dans une galerie il faudra afficher des miniatures.
Et pour la déconnade, on fera vite fait un script d'upload des images conjuguant PHP côté serveur et la toute nouvelle fonction d'upload de Flash côté client (aïe va falloir que je me documente, je connais pas encore :p ).

Le Mini-jeu


Vous l'attendiez : vous l'avez !
Le mini jeu permettra une synthèse de vos connaissances. Il nous faudra donc une bonne idée de jeu sympathique et un système de high-score (pour toute idée de jeu sympa et pas trop dure à réaliser, envoyez moi un MP ou laissez un commentaire).

Voilà, on a donc une idée des liaisons que chaque application Flash nécessitera. :)
Retour en haut
Schéma fonctionnel des liaisons :

Image utilisateur
Chapitre précédent Sommaire Chapitre suivant
Retour en haut

Partager

Retour en haut
13 commentaires pour "Fil rouge"
Note moyenne : 3.24 / 4 (137 votes)
Pseudo Commentaire
Hors ligne Damien490 # Posté le 14/11/2006 à 13:05:58
Avatar

Études : ENSAM Châlons-en-Champagne

 Excellent tuto ! J'ai enfin trouvé un fil à lequel m'accorcher pour débuter avec flash ! De plus il est très imagé ! ^^
A bientôt pour de nouvelles aventures !
 
Hors ligne Ziro # Posté le 09/02/2007 à 17:15:04
PanPan
Avatar

 c'est pas faute d'avoir essayé avant mais c'est ma premiere Anim ^^

Merci pour ce tuto
Hors ligne mimi78120 # Posté le 14/02/2008 à 18:52:44
Avatar
Groupe : Bannis

Super tuto 20 j'attent avec impasiance le mini jeu.

Édition par .skaz : Attention à l'orthographe la prochaine fois. :)
Hors ligne toto_toto69 # Posté le 13/03/2012 à 18:52:39

Avis : Très bon

A propos d'une utilisation ratée de Flash : Spiral Connect http://spiralconnect.univ-lyon1.fr/
Ce site est l'exemple typique de ce qu'il ne faut pas faire. Ca rame et c'est moche, l'Université Lyon1 a payé très cher pour un boulet inutilisable.
Hors ligne albert_albert69 # Posté le 26/03/2012 à 15:50:18

Avis : Très bon

Je ne sais pas si le lieu est approprié mais je confirme que c'est un site très moche

Voir tous les commentaires