Site complet en flash : part 2

[explainMe]

Topic relatif au cours Site complet en flash : part 2.

N'hésitez pas à poser vos questions ou débattre d'un sujet relatif au cours.

[Osbern]

Bonjour Boris,

J'avais déjà envoyé un message à propos de la partie 3 et tu l'avais résolu . Il me restait toutefois un problème que je pensais résoudre moi-même. Or, en recommençant le tutoriel, la solution n'est toujours pas apparue.

Quand je lis mon animation (ctrl+Entrée), elle apparaît dans une fenêtre de taille moyenne. Pas de soucis. Par contre, quand j'agrandis cette fenêtre en plein écran, une grosse bordure blanche apparaît à gauche et en bas de mon interface . Comme si mon interface n'était pas calé sur le coin inférieur gauche. Pourtant, mes clips MC_INTERFACE et MC_FOND ont bien pour origine ce coin et j'ai bien procédé à l'agrandissement du fond en le copiant/collant 3 fois.

Devines-tu le problème ? Sinon, je t'envoie le .fla (faut-il le compresser ?).

Osbern

[explainMe]

Salut,

Ton fichier n'a aucun problème et pour être honnête la fonction de test [Ctrl + Entrée] ne permet qu'une prévisualisation de l'animation à sa taille de base (la taille par défaut réglée pour le fichier FLA).

De plus placer l'animation en bas à gauche dans ton fla ne garantie pas que tes clips soient toujours placés en bas à gauche (pour ça il faut créer un petit script qui se chargera de replacer (j'ai bien dit RE-placer ton/tes clip(s) au bon endroit à chaque redimensionnement de ton animation).

Cependant pour le moment nous n'avons pas encore spécifié que nous souhaitions lire l'animation en fullscreen (et oui il faut le spécifier à flash, il ne le fait pas par lui-même).

Du coup tu est confronté ici à problème :

- nous n'avons pas encore mis les réglages dans notre fla qui précisent à flash de lire l'animation en fullscreen et de re-placer les clips au bon endroit le cas échéant.

Donc pour l'instant flash se contente de t'afficher ton swf à l'échelle 1, ce qui est totalement normal. Désolé.

De plus, pas de chance pour toi mais je n'aborderai ce point qu'en dernier (juste avant les réglages d'exportation), totu simplement parce que tout le monde ne voudra pas afficher son site en fullscreen (ou fullbrowsner peut importe).

[Osbern]

Merci pour la rapidité de la réponse. Je suis rassuré. Je vais pouvoir faire la partie 4 !!!!

[Ellipse]

Merci pour cet extraordinaire travail où tu nous apprends à faire un site aussi bien en AS2 qu'en AS3 et où tu nous donnes des "tuyaux", des habitudes de développement intelligentes, des précisions sur certaines techniques de FlashCS3 ou 4. Superbe!
Jamais vu ça sur le net en aussi sérieux et ... gratuit !
Je me suis mis au travail tout aujourd'hui et suis actuellement arrêtée au niveau 2 vidéo 2.
Pourquoi? Parce que d'abord les couleurs choisies pour le site (noir, vert sombre, dommage!) ne m'aident pas à voir les choses clairement et ensuite parce que je ne saisis pas pourquoi tu recopies si souvent l'"image" (y a pas d'image!) noire sur le fond rouge (le seul éclatant avec le masque). Je vais donc aller relire la partie 1 car il me semble que j'ai lu que ça à voir avec le "fullscreen", non?
Bon, c'est pas grave: je suis juste un peu frustrée après un aussi clair et fulgurant départ! Mais la partie la plus importante est celle qui est écrite en bleu.

Merci encore.

[explainMe]

Salut Ellipse.

Merci pour ton message c'est très gentil !

Concernant le souci de vidéo, j'en suis désolé. En effet la compression des vidéos plus le choix d'un design assez sombre rend cette partie assez difficile à comprendre.

En gros pour essayer de clarifier un peu les choses, j'ai réalisé une image qui boucle dans Photoshop (qui représente des formes géométriques marrons à trois branches) comme tu peux le voir sur l'image qui présente ce à quoi ressemblera le design.

Cette image est donc réutilisée en la dupliquant plusieurs fois (d'où le fait qu'elle soie prévue pour boucler, comme ça j'ai un fichier plus léger que je peux réutiliser plusieurs fois dans flash). Ceci dans le but d'afficher un fond "imagé" aux personnes ayant un résolution supérieure à 1024x768.

Donc il ne s'agit là que d'un détail esthétique finalement car j'aurais très bien pu laisser un aplat de couleur en fond après tout.

Cela dit je suis conscient que cette partie de la vidéo n'est pas très "lisible" du fait des éléments sombres et de le compression. Je travaille d'ailleurs à l'amélioration des vidéos (pour les prochaines) et j'ai changé d'outil de capture vidéo dans ce but (certaines vidéos ont notamment des souci de son d'inégale volume ou qualité). Les vidéos du chapitre ont bénéficié de ce nouvel outil (je peux notamment faire des vidéos plus longues). Bref il reste encore des imperfection dans la qualité finale et dans ma maîtrise du discours, mais j'y travaille...

En résumé, si vraiment cette partie de la vidéo ne t'es pas compréhensible du fait de la qualité de l'image, ce n'est pas trop grave, tu peux la "zapper" car je n'en reparle pas par la suite, il s'agit surtout d'une "astuce technique" étant donnée que je ne vais pas vous montrer comment redimensionner le site dans ce cours (on verra par la suite, mais je ne veux pas mettre la charrue avant les bœufs ).

J'espère seulement que ça ne va pas te bloquer et t'empêcher de continuer le cours.

[Ellipse]

Bonjour Explain,
Merci pour ta réponse rapide. Surtout je ne veux pas te remettre en cause car vu le boulot que tu fais, ce serait très mal venu.
C'est vrai que le principe du cours en vidéo 2 suppose de préciser mille détails et le faire en "live", sans rien oublier, c'est très difficile. Donc chapeau bas!
La compression ne facilite pas les choses mais en y allant pas à pas, je m'en sors et vois surtout où se trouvent mes propres carences; ainsi je crois que je suis un peu perplexe sur les points suivants:
1.Pourquoi as-tu fait deux clips, deux graphiques n'auraient-ils pas suffi? (le fond rouge en graphique seul et l'image de l'interface en graphique seul aussi)? Quel intérêt?
2. Pourquoi les as-tu imbriqués, dans quels buts?
C'est un véritable plaisir de suivre tes indications et de comprendre ce qu'on fait.
NB: A un moment dans la vidéo 2 "le fond" au moment de l'alignement du rectangle rouge, tu conseilles de l'aligner en mettant le repère en bas à gauche et tu dis dans la vidéo oralement "en haut à gauche", erreur de ta part ou subtilité que je ne comprends pas?

[Ellipse]

Bon, en relisant ton message, il me semble que tu as donné la réponse à ma question 1 en disant:"comme ça j'ai un fichier plus léger que je peux réutiliser plusieurs fois dans flash", dis-moi si je me trompe?
Tu vois que je peux m'auto-répondre ou presque....
Il reste quand même la question 2 !

[explainMe]

Salut Ellipse,

Surtout je ne veux pas te remettre en cause car vu le boulot que tu fais, ce serait très mal venu.

Pas du tout, s'il m'arrive de commettre des erreurs (et ça m'arrive ), il ne faut pas hésiter à me le dire, c'est aussi comme ça que l'on progresse...

1.Pourquoi as-tu fait deux clips, deux graphiques n'auraient-ils pas suffi? (le fond rouge en graphique seul et l'image de l'interface en graphique seul aussi)? Quel intérêt?

En fait si tu regarde bien la vidéo à l'arrivée il n'y a qu'un seul clip de fond qui contient l'image copiée 4 fois (2 fois dans le sens de la longueur et 2 fois dans le sens de la hauteur afin d'avoir un fond bien plus grand que la surface de l'animation : pour les gens qui ont des résolutions énormes).

Le problème viens, je pense, de ma façon de travailler qui n'est pas forcement évidente pour tout le monde au premier abord.

Je m'explique :

En fait je travaille "à l'envers" lorsque je créé des clips, c'est à dire que je dessine une forme, puis je la sélectionne et une fois qu'elle est sélectionnée, je créé un clip à partir de cette forme.

Il est tout à fait possible de faire autrement. Par exemple je pourrais créer un clip vide, PUIS rentrer dedans pour y dessiner une forme (ou quoi que ce soit d'autre).

Disons que pour expliquer ça de manière imagée, ma méthode de travail pourrait s'expliquer de la sorte :
- "D'abord je place une paire de chaussure sur une feuille de carton, et ensuite je construis la boîte à chaussure autour de la paire de chaussures."

Voilà pourquoi j'ai dessiné le rectangle rouge, pour l'utiliser pour construire le clip. Il me permet ainsi de créer un clip et de directement positionner son point d'origine (ce qui n'est pas le cas lorsque l'on créé un clip vide, qui étant vide, ne peux pas positionner son point d'origine autre part qu'en son centre puisqu'il est vide et n'a donc pas de forme).
Ensuite une fois le clip créé je peux y faire ce que je veux (par exemple ici j'y place une (plusieurs) image(s). Du coup ensuite je supprime le rectangle rouge que ne m'a servit que pour la création du clip.

Donc au final mon clip MC_FOND contient seulement 4 occurrences de l'image bkg.png présente dans ma bibliothèque.

Par contre tu as raison : j'aurais très bien pu créer non pas un clip, mais un graphique. Seulement j'ai pris la mauvaise habitude de ne travailler qu'avec des clips (car ils sont accessibles depuis l'ActionScript, ce qui n'est pas le cas des graphiques). Du coup par défaut je n'utilise que des clips (ni graphiques ni boutons comme tu le découvrira dans les prochains chapitres). Certes c'est une mauvaise habitude car dans le cas présent MC_FOND n'étant pas destiné à être manipulé depuis l'ActionScript, il aurait très bien pu être un graphique.

2. Pourquoi les as-tu imbriqués, dans quels buts?

Tu as du le comprendre, la forme rouge n'existe plus donc ils ne sont pas imbriqués ensemble puisque MC_FOND ne contient plus que les 4 occurrences de l'image bkg.png.

En revanche j'ai effectivement créé un clip MC_INTERFACE dans lequel est imbriqué le clip MC_FOND. J'ai fait ça car le clip MC_INTERFACE est destiné à regrouper toutes les composantes de l'interface (le fond, le menu, le contenu). Ainsi toute l'interface du site est "rangée" dans ce clip.

Cette manière de procéder m'est propre également, mais pas inintéressante je pense...

À vrai dire, j'en ai pris habituelle pour 2 raisons :

- 1 - Je préfère organiser mes éléments sur beaucoup de calques dans un clip plutôt que sur la timeline principale, sinon je trouve que la timeline principale deviens vite illisible.

- 2 - Certes dans le cas présent il s'agit d"un site internet donc l'interface sera difficilement intégrable dans un autre projet, mais imagine que nous soyons en train de développer un petit jeu vidéo ou un lecteur audio par exemple. Le fait de placer tout le "module" dans un clip plutôt qu'à même la timeline principale me permet de réutiliser ce module dans un autre projet. Si je développe un lecteur audio et que je souhaite le réutiliser dans un autre projet, je n'ai plus qu'à copier.coller le clip MC_LECTEUR (par exemple) dans mon nouveau projet et c'est tout, il fonctionne (les développeurs sont de gros feignants ).

Voilà pour les réponses (j'espère que j'ai été plus clair que dans les vidéos, sinon n'hésite pas).

Dernière chose enfin :

NB: A un moment dans la vidéo 2 "le fond" au moment de l'alignement du rectangle rouge, tu conseilles de l'aligner en mettant le repère en bas à gauche et tu dis dans la vidéo oralement "en haut à gauche", erreur de ta part ou subtilité que je ne comprends pas?

Oui en effet, mais ce n'est pas une subtilité de ma part mais seulement une erreur dans mon discours, il s'agit bien de coin en bas à gauche.
Pour être honnête les vidéos sont la partie la plus difficile à faire pour moi et il m'arrive de faire un grand nombre de prises pour juste 5 minutes de vidéos à l'arrivée. Parfois j'ai fait 15 minutes de vidéos nickel, et puis je bafouille à la dernière minute ou je m'aperçois que j'ai raconté une grosse idiotie au tout début de l'enregistrement...

Bref j'avais identifié cette erreur lors de la mise en ligne de la vidéo mais j'avoue, j'ai pas eu le courage de la refaire une nième fois.

P.S. : J'ai supprimé ton dernier message qui était une citation de ton message précédent donc j'ai supposé que c'était due à une mauvaise manipulation.

[Ellipse]

Super, tes réponses, merci, je vais me les relire et me les expliquer! C'est très réconfortant de travailler de cette façon.
J'ai hâte de pouvoir continuer. A très bientôt.