AccueilCodesTutorielsForumsEmploiLivresConnexion

  • Flash CodeS-SourceS
  • RSS CodeS-SourceS
  • CodyxBot, le Bot GTalk & MSN qu'il vous faut !
  • Générez des revenus avec vos codes, scripts et tutoriaux
  • Aide à la navigation du site
begin process at 2008 10 12 18:25:15
Vous ne trouvez pas de réponse à votre problème ? Alors posez la question dans le forum. Souvenez-vous qu'il n'y a jamais de question bête, mais rester dans l'ignorance parce que l'on n'ose pas poser une question, ça c'est une erreur !

FLASH : EFFET COVERFLOW


Information sur la source

Catégorie :Effets d'images Classé sous : as3, coverflow, itunes, images Niveau : Initié Date de création : 07/06/2007 Date de mise à jour : 09/09/2007 19:25:38 Vu / téléchargé: 84 748 / 9 718
Auteur : Arnooooo Site perso
Ecrire un message privé
Note :
9,65 / 10 - par 17 personnes
9,65 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Commentaire sur cette source (65)
Ajouter un commentaire et/ou une note

Description

Cliquez pour voir la capture en taille normale
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/
 

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.
 

Fichier Zip

Pour les "Membres Club", vous pouvez télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip

Historique

11 juin 2007 22:17:50 :
Mise à jour de l'archive avec une demo d'utilisation complète et ajout de la FAQ
24 juin 2007 17:33:25 :
- Corrections de quelques bugs, notament au niveau de la barre de scroll. - Implémentation du support des skins. - Possibilité de mettre plusieurs animations sur la même page avec une fonction javascript dédiée. - Gestion des messages d'erreurs.
09 septembre 2007 19:25:38 :
- Ajout du nouveau paramètre "FirstSlide" permettant de définir le slide à afficher par défaut. - Ajout de la fonction "SelectSlide" permettant de sélectionner un slide via Javascript. - Mise à jour de l'exemple inclus dans l'archive. - Appel à la fonction onMoveSlide lorsque l'on clique sur les fléches de la barre de scroll.

Commentaires et avis

signaler à un administrateur
Commentaire de scubefr le 08/06/2007 00:01:03

Franchement géniale !! je vais l'ajouter dans mon prochain site c'est sur...

signaler à un administrateur
Commentaire de pegase31 le 08/06/2007 10:51:55

question : ou est le .FLA ?

Peg'

signaler à un administrateur
Commentaire de Arnooooo le 08/06/2007 18:21:29

Il n'y a pas de FLA car tout est en ActionScript. Je me suis servi de FlashDevelop pour réaliser le SWF. Mais je pense qu'en instantiant un FLA en faisant référence aux classes AS, cella devrait se faire sans poser trop de pb.

signaler à un administrateur
Commentaire de shokadelika le 08/06/2007 23:21:17

Salut, très bon rendu. Mais étant un dummies, je comprend pas très bien l'intégration dans flash...
Please Help.

signaler à un administrateur
Commentaire de Arnooooo le 10/06/2007 12:16:20

Je n'ai pas Flash, je fait tout sous FlashDevelop donc je ne peut pas faire un FLA. Si une bonne ame veut faire un FLA, je l'intégrerai dans l'archive.

signaler à un administrateur
Commentaire de jigece le 11/06/2007 09:54:04

Bonjour,
euh, juste une question bête : comment ça marche ? j'ai ouvert le fichier swf, et c'est tout blanc... comment on fait pour voir le résultat de ton travail ?

signaler à un administrateur
Commentaire de detour le 11/06/2007 10:20:52

bravo...

signaler à un administrateur
Commentaire de marcusig le 11/06/2007 11:15:56

Excellent !
C'est vrai qu'un fla pourrait être sympa.
J'ai flash 8 et je veux bien faire une source, mais je suis pas sur d'en être capable... A moins qu'il n'y ai qu'a faire des import myClass; ?
Donc si tu me dis comment faire, je le ferai avec plaisir !

signaler à un administrateur
Commentaire de zoukozouko le 11/06/2007 12:35:00

comment t'as édité le swf sans .fla???
Chez moi rien ne s'affiche quand je lance CoverFlow.swf

Comment on fait?

signaler à un administrateur
Commentaire de Arnooooo le 11/06/2007 13:48:44

Je mettrais à jour ce soir l'archive avec un exemple complet d'intégration du swf dans une page web.

signaler à un administrateur
Commentaire de bookphoto le 11/06/2007 15:46:53

salutation , j'ai ouvert le swf mais rien ne ce passe, suis je si nul ???

signaler à un administrateur
Commentaire de top30 le 11/06/2007 19:53:46

Laissez le vivre le pauvre....
Et visitez donc son site, surtout la page :
http://www.arno-box.net/developpement/9/environnement-de-developpement-flex2-as3/
Il vous expplique comment développer du Flash sans Flash.

Soyez pas lourd l'harcelez pas de "je vois rien", "c'est tout blanc", "il est ou le fla"... Lisez avant de poster un comment déjà présent 100 fois !

Puis pour être franc, cette source est pour EXPERT MINIMUN ! Alors les autres vous vexé pas et foutez lui la paix, ou il reviendra pas !

Pour ton infos "Arnooooo", ta source n'est pas transcriptable sous Flash. Car en effet aprés des dizaines de tests, je peux t'affirmer que sous l'IDE Flash, les balises "embed" ne fonctionne pas ! Ca ne fonctionne que dans un environnement type "Flex" ou celui que tu as....

PS: Pour ton reflet du devrait utiliser un degradé noir "layer" alpha du reflet. Mais c'est juste un détail...

Sinon a part ca bien venu chez les nains...
AH AH AH !!!!

signaler à un administrateur
Commentaire de top30 le 11/06/2007 19:54:22

Perso je met 10

signaler à un administrateur
Commentaire de Arnooooo le 11/06/2007 22:18:46

Merci Top30,

Je vient de mettre à jour l'archive avec un exemple complet et j'ai essayé de répondre aux principales questions. J'espère que cella pourra en aider quelques uns.

Pour revenir à ce que tu disais Top30 sur la balise Embed, je vais supprimer l'appel à celle-ci avec la gestion des skins que je compte faire dans la prochaine version. Le skin contiendra un fichier de config XML et toute les images nécessaire. L'animation chargera donc dynamiquement les images et il n'y aura plus rien d'inclu dans le SWF. Cella permettra à chaqu'un d'utiliser l'animation à sa guise et il n'y aura pas besoin de toucher au source sauf pour une personne souhaitant intégrer l'effet dans un autre fichier flash.

signaler à un administrateur
Commentaire de zoukozouko le 11/06/2007 22:56:31

tu dis un peu n'importe quoi top30,
"laissez le tranquille"... Tu te présentes comme l'avocat du diable avec pour seuls arguments "allez visites son site" ou "vous n'etes pas assez calés...".

Ce qu'il a fait est d'un niveau expert, certes. Moi je veux simplement tester la source, l'étudier, comprendre comment ça marche. Tu vas pas me dire que tu cotionne les articles sans sources, histoire qu'on mette une note au résultat. Bon, là ce n'est pas le cas, mais il manque quand même le point de départ.

J'ai un swf et je vois rien. Si une solution est apportée sur son site, t'aurais peut-être mieu fait de la rajouter, dans ton commentaire.

Enfin, arnoooo nous a proposé "gentilment" mais finalement c'est normal, de poster un tuto d'intégration de ce qu'il a fait. Et franchement, une fois là on peut noter, et le 10 est emplement mérité, vu le résultat.

signaler à un administrateur
Commentaire de BlackWizzard le 12/06/2007 00:55:54 administrateur CS

zoukozouko > ce n'est pas un post sans sources. Simplement un post sans fla.
La source est dans les fichiers as. Tu y trouvera tout le code que tu souhaite etudier.

Les fichiers fla sont juste des fichiers dedié à l'IDE Flash. Mais ne sont pas necessaire avec d'autres IDE dans le genre FlashDevelop.

Quand tu as posté ce commentaire, tu as coché une case. Extrait du texte attaché: "merci de rester calme et courtois tout au long de vos échanges". Merci de t'y tenir.

signaler à un administrateur
Commentaire de zoukozouko le 12/06/2007 06:48:19

Lol
sans problème, t'as qu'à lire plus tranquillement ce que j'ai écris et tu verras qu'il n'y a aucune déviance vis à vis de la charte de bonne conduite.
par exemple, tu n'as pas lu cette phrase "Bon, là ce n'est pas le cas..." (ligne 4 si tu ne comptes pas le saut de ligne) qui servait justement à précisé qu'il ne s'agissait pas d'un post sans source.

Sinon, je suis bien satisfait qu'il ai rajouté le tuto pour l'intégration flash, nécessaire à mon avis.

Enfin, je suis navré d'avoir effleuré ton extrème sensibilité, je dois reconnaître l'outrageante violence de mes propos. En plus, par cette réponse, je me rends coupable de "pollution de la source".

ouh lala!! vilain le zouko, vilain!!

signaler à un administrateur
Commentaire de pegase31 le 12/06/2007 06:56:37

hé ben ... et moi qui pensait être "chiant" .. qqpart, ça me rassure un peu ! :D

Peg'
Qui va bien dormir, du coup ...

signaler à un administrateur
Commentaire de scara 51 le 13/06/2007 08:55:47

Cette source est génialissime !! Simple d'emploi. Pour le code, ya les fan du code et les autres.
C'est de l'AS 3 donc pas compatible avec Flash 8. Pour le .fla, il faut attendre Flash 9 (pas encore à la vente, juste en pré-vente je crois). C'est le seul bémol.

Mais j'ai une question, pourquoi avoir transformé dans le fichier DistortImage.as, dans la méthode DistortImage (le constructeur), l'object mc en Sprite alors qu'à la base c'était un MovieClip (enfin c'est comme ca que le code est écrit pour le projet Sandy) et donc c'était compatible AS2 ?

Et donc je m'ionterroge sur l'intérêt des sprites (qui est une classe que je ne connais absolument pas comme toutes les nouvelles classes d'AS3). Ya la méthode graphics en + mais je n'en vois tout de même pas l'intérêt.

Merci d'avance.

signaler à un administrateur
Commentaire de Arnooooo le 13/06/2007 13:30:17

Pourquoi j'ai utilisé l'AS3, c'est que je préfèrait tout de suite me lancer dans la dernière version et que d'aprés ce que j'avais lu sur le net, le fps serait meilleur et donc l'anim plus fluide en AS3 plutot qu'en AS2.

Concernant le fichier DistortImage.as j'ai du l'adapter pour qu'il soit valide AS3 et j'ai converti le MovieClip en Sprite car ma classe Slide était un Sprite et non un movieClip tout simplement.

Concernant la méthode graphics c'est une nouveauté de l'AS3 (d'aprés ce que j'ai lu car je n'ai rien fait vraiment en AS1 et AS2 avant) et si on veut dessiner on a pas torp le choix.

signaler à un administrateur
Commentaire de BananaTree le 14/06/2007 19:05:20

ben moi je dis pareil:
ça marche pas et c tout blanc !

SecurityError: Error #2148: Le fichier SWF file://C:\Documents and Settings\Propriétaire\Bureau\CoverFlow\demo\CoverFlow.swf ne peut pas accéder à la ressource locale file://C:/Documents and Settings/Propriétaire/Bureau/CoverFlow/demo/ListCovers.xml. Seuls les fichiers SWF local-système de fichiers et les fichiers locaux de confiance peuvent accéder aux ressources locales.
at flash.net::URLStream/load()
at flash.net::URLLoader/load()
at Gallery$iinit()
at CoverFlow$iinit()


qq précisions en vrac (j'ai pas tout lu de vos posts):

"ta source n'est pas transcriptable sous Flash. Car en effet aprés des dizaines de tests, je peux t'affirmer que sous l'IDE Flash, les balises "embed" ne fonctionne pas !"

dans la transcription d'une classe de flex à flash, le plus embettant ce sont les références au core de l'api de flex2. supprimer l'héritage de uicomponent peut s'avérer réelemnt une prise de tête, mais c'est pas si insurmontable que ça, surtout si la source en vaut la peine (j'ai pu tester avec le composant fire de flexlib, réécrit pour flash). après ça, embed n'est vraiment qu'un détail: "innutile et incertain".

"environnement type "Flex" ou celui que tu as..."
il n'existe que 3 façons de compiler de l'as 3: flex builder, flash ide et haxe;

concernant les sprites, considère les comme des movies clips sans timeline. des containers graphiques sur lesquels tu peux appliquer tout les codes que tu veux avec un gain de performance du à l'absences de la timeline. garde à l'esprit qu'en as3, tu auras à gérer tes ressources mémoire.

bon, après ce roman, faut que j'aillles me reposser !

bon code ++

signaler à un administrateur
Commentaire de ludo_4460 le 18/06/2007 13:12:35

salut a tous,
quand j ai vu ce post, j ai dit genial et je le pense encore et toujours
par contre, j ai essayé de mettre des photos à moi mais quand je le fais, j ai un espace blanc entre les photos sur la droite.
j'ai mis 55 photos, en fait, c est pour faire un album sympa...
taille des images_full: 640x480
taille image(mini): 220x180 (quelque chose comme ça...)
est ce normal?
je commence avec flash (8) donc soyez indulgents

merci d avance
et encore une fois bravo pour ce post

signaler à un administrateur
Commentaire de Arnooooo le 18/06/2007 15:01:27

Pour BananaTree :
Pour ton premier problème, la réponse est inscrite dans les explications finales. Concernant la transcription du code, je ne connais pas quel sont les références au core de l’api flex2. Tout ce dont je suis sur c’est que la version que je suis entrain de modifier ne fais plus appel à embed. Merci pour l’info sur les Sprite.

Pour Ludo_4460 :
Concernant la version actuelle, la miniature doit faire 220 pixels de large et avoir une hauteur comprise entre 1 et 165 pixels (cf les explications principales). Concernant l’espace blanc, peut tu faire une capture d’écran pour se rendre compte ? Pour les full la taille est totalement libre.

J’espère poster la nouvelle version d’ici la fin de la semaine, la taille des thumb et leur paramétrages sera totalement libre.

signaler à un administrateur
Commentaire de ludo_4460 le 18/06/2007 18:35:00

comment fais ton pour mettre une capture decran?

merci

signaler à un administrateur
Commentaire de ludo_4460 le 18/06/2007 18:47:47

(bravo Ludo pour les grosses fautes) Molière pas content !

je repose ma question:

Comment fait-on pour mettre une capture d'écran avec son commentaire, comme je voudrais le faire pour répondre à Arnoooo?

signaler à un administrateur
Commentaire de ludo_4460 le 18/06/2007 21:36:37

mes photos sont aussi bien en horizontal qu en vertical; ca viendrait de la?

signaler à un administrateur
Commentaire de ludo_4460 le 18/06/2007 21:44:35

ca y est, j ai reussi a resoudre mon probleme comme un grand (j en suis fier, je debute en flash)

en fait, j ai retaillé mes photos en 220 de large (meme si ca coupe parfois l image de la vignette) mais bon, c est vraiment pas mal comme resultat.
Je les ai retaillé avec XnView.

merci pour ton travail Arnooooo, encore, encore

signaler à un administrateur
Commentaire de ludo_4460 le 18/06/2007 21:49:29

par contre, comment fait on pour changer le preloader (si arnoooo le permet bien sur) pour pouvoir l adapter a son propre site?

signaler à un administrateur
Commentaire de Arnooooo le 18/06/2007 23:31:23

Pour changer le preload soit tu attend la prochaine version qui permettra de gérer les skins (j'espère avoir cette version pour la fin de la semaine) soit tu recompile les sources en changeant le fichier loading.png et en ajustant la barre de progression.

signaler à un administrateur
Commentaire de marcusig le 19/06/2007 09:24:54

Petite question Arno, est-ce qu'il y a des classes que tu as utilisées qui sont compatibles AS2 (je pense notament à DistortImage), et quelles sont les classes que tu n'as pas écrites ?
Je sens qu'il y a tout un tas de trucs à apprendre de ces sources, mais j'ai un peu la flemme de me mettre à l'AS3... et surtout d'installer l'environnement de développement ! Et comme j'aimerai trouver un moyen de mettre des images en perspective dans flash, ça m'aiderai de savoir si je peux tenter une approche en AS2...

Et re-merci pour cette belle appli ;)

Ah, et j'oubliais... petite précision, quand on lance ton exemple dans firefox en local, c'est tout blanc (ne criez pas, je ne parle pas du swf, mais du html) (contrairement à IE) mais ça marche bien sur ton site. Je suppose donc que c'est juste un bug de firefox...

Voilà, j'attends avec impatience les évolutions !

signaler à un administrateur
Commentaire de ludo_4460 le 19/06/20