Flash : effet coverflow
Description
Pour rendre cette animation utilisable par le plus grand nombre, je vient de mettre à jour la première version pour obtenir une nouvelle animation bien plus personnalisable avec de nouvelles fonctionnalitées.
Voici donc la deuxième version de ce projet beaucoup plus flexible que la première. Voici les quelques informations à connaitre pour se servir de cette version :
Il n'y a plus de contrainte sur la taille des images.
- L'animation se charge des les redimensionner mais pour réduire les temps de chargement des miniatures je vous conseille de redimensionner à l'avance les images.
- Plusieurs informations sont transmisent à l'application via des variables :
=> ListCover : Cette varaible est obligatoire et doit faire référence au fichier XML contenant la liste des images à afficher.
=> Theme : Permet de préciser le thème à utiliser. Si cette variable n'est pas saisie, l'animation recherchera le répertoire : "themes/default/".
=> JSFunction : Permet de définir la fonction Javascript à appeler lorsque l'on sélectionne une image. Si cette variable n'est pas saisie, l'animation fera appel à la fonction "ATBRetrieveInfo" en lui passant comme paramètre l'ID de l'image présent dans le fichier XML.
=> FirstSlide : Permet de définir le slide qui sera affiché lors de l'initialisation de l'effet. Le chiffre passé en paramètre correspond à la position du slide de la liste et non son identifiant. Par défaut, le premier slide sera affiché.
Pour avoir un maximun d'informations : http://www.arno-box.net/flash/14/flash-effet-coverflow-ditunes-v02/
Pour avoir une demo complète: http://www.arno-box.net/demo/
Voici une petite FAQ des différent problèmes qui ont pu être soulevé. Vous trouverez une version HTML un peu plus lisible sur mon site à l'adresse : http://www.arno-box.net/flash/14/flash-effet-coverflow-ditunes-v02/#faq
J?ai téléchargé l'archive mais le swf est tout blanc ?
Si on lance le swf directement depuis l'explorateur windows, il est normal que rien ne s?affiche. En effet, le nom du fichier XML contenant la liste des images doit être défini via la variable : ?ListCover? et si le SWF ne la trouve pas, il ne peut rien afficher. Vous pourrez trouver un exemple d'intégration dans la démo fourni avec l'archive (Intégration HTML avec SWFObject, utilisation de la fonction Javascript : ATBRetrieveInfo, affichage de l?image en fullscreen)
Lorsque je double click sur le fichier index.htm dans la démo, tout est blanc ?
Tout ceci est normal, si vous avez une version de Flash avec le débuggeur, vous devez avoir un message d'erreur du genre disant : "Le fichier SWF ne peut pas accéder à la ressource locale ListCovers.xml. Seuls les fichiers SWF local-système de fichiers et les fichiers locaux de confiance peuvent accéder aux ressources locales."
Le fichier est exécuté en local et a donc des droits restreint. Il ne peut pas accéder au fichier XML et aux images. Deux solutions s'offrent à vous :
- Vous hébergé la démo sur un serveur web et tout fonctionnera du premier coup.
- Vous donnez les droit au player flash d'accéder au répertoire local via l'outil de config en ligne : http://www.macromedia.com/support/documentation/en/flashplayer/help/settings_manager04.html
Pourquoi n'y a t'il pas de FLA ?
Il n'y a pas de FLA car je n'ai pas utilisé Flash mais un environnement de développement gratuit en Flex2/AS3. Si vous êtes interessé par un tel environnement, allez faire un tour sur mon site à l'adresse : http://www.arno-box.net/developpement/9/environnement-de-developpement-flex2-as3/
Comment l'utiliser dans FLASH ?
A l'heure actuelle, il n'est pas possible d'utiliser directement les classes AS3 dans Flash car il n'existe pas d'équivalent des balises embed. Il faudrait modifier le code faisant appel à embed en important les images dans la bibliothèque et faire appel à la bibliothèque. La prochaine version intégrera une gestion de skin et il n'y aura plus d'appel aux balise embed.
Voici donc la deuxième version de ce projet beaucoup plus flexible que la première. Voici les quelques informations à connaitre pour se servir de cette version :
Il n'y a plus de contrainte sur la taille des images.
- L'animation se charge des les redimensionner mais pour réduire les temps de chargement des miniatures je vous conseille de redimensionner à l'avance les images.
- Plusieurs informations sont transmisent à l'application via des variables :
=> ListCover : Cette varaible est obligatoire et doit faire référence au fichier XML contenant la liste des images à afficher.
=> Theme : Permet de préciser le thème à utiliser. Si cette variable n'est pas saisie, l'animation recherchera le répertoire : "themes/default/".
=> JSFunction : Permet de définir la fonction Javascript à appeler lorsque l'on sélectionne une image. Si cette variable n'est pas saisie, l'animation fera appel à la fonction "ATBRetrieveInfo" en lui passant comme paramètre l'ID de l'image présent dans le fichier XML.
=> FirstSlide : Permet de définir le slide qui sera affiché lors de l'initialisation de l'effet. Le chiffre passé en paramètre correspond à la position du slide de la liste et non son identifiant. Par défaut, le premier slide sera affiché.
Pour avoir un maximun d'informations : http://www.arno-box.net/flash/14/flash-effet-coverflow-ditunes-v02/
Pour avoir une demo complète: http://www.arno-box.net/demo/
Conclusion :
Voici une petite FAQ des différent problèmes qui ont pu être soulevé. Vous trouverez une version HTML un peu plus lisible sur mon site à l'adresse : http://www.arno-box.net/flash/14/flash-effet-coverflow-ditunes-v02/#faq
J?ai téléchargé l'archive mais le swf est tout blanc ?
Si on lance le swf directement depuis l'explorateur windows, il est normal que rien ne s?affiche. En effet, le nom du fichier XML contenant la liste des images doit être défini via la variable : ?ListCover? et si le SWF ne la trouve pas, il ne peut rien afficher. Vous pourrez trouver un exemple d'intégration dans la démo fourni avec l'archive (Intégration HTML avec SWFObject, utilisation de la fonction Javascript : ATBRetrieveInfo, affichage de l?image en fullscreen)
Lorsque je double click sur le fichier index.htm dans la démo, tout est blanc ?
Tout ceci est normal, si vous avez une version de Flash avec le débuggeur, vous devez avoir un message d'erreur du genre disant : "Le fichier SWF ne peut pas accéder à la ressource locale ListCovers.xml. Seuls les fichiers SWF local-système de fichiers et les fichiers locaux de confiance peuvent accéder aux ressources locales."
Le fichier est exécuté en local et a donc des droits restreint. Il ne peut pas accéder au fichier XML et aux images. Deux solutions s'offrent à vous :
- Vous hébergé la démo sur un serveur web et tout fonctionnera du premier coup.
- Vous donnez les droit au player flash d'accéder au répertoire local via l'outil de config en ligne : http://www.macromedia.com/support/documentation/en/flashplayer/help/settings_manager04.html
Pourquoi n'y a t'il pas de FLA ?
Il n'y a pas de FLA car je n'ai pas utilisé Flash mais un environnement de développement gratuit en Flex2/AS3. Si vous êtes interessé par un tel environnement, allez faire un tour sur mon site à l'adresse : http://www.arno-box.net/developpement/9/environnement-de-developpement-flex2-as3/
Comment l'utiliser dans FLASH ?
A l'heure actuelle, il n'est pas possible d'utiliser directement les classes AS3 dans Flash car il n'existe pas d'équivalent des balises embed. Il faudrait modifier le code faisant appel à embed en important les images dans la bibliothèque et faire appel à la bibliothèque. La prochaine version intégrera une gestion de skin et il n'y aura plus d'appel aux balise embed.
Codes Sources
A voir également
- Flash : effet coverflow
- Flàsh scores - Forum Flash
- Riasec flash - Forum Flash
- Symbole flash clavier - Forum Flash
- Flash 8 touche de clavier ✓ - Forum Flash
- Touche du clavier - Forum Flash
Vous n'êtes pas encore membre ?
inscrivez-vous, c'est gratuit et ça prend moins d'une minute !
Les membres obtiennent plus de réponses que les utilisateurs anonymes.
Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.
Le fait d'être membre vous permet d'avoir des options supplémentaires.