Flash - Est-ce possible facilement ?

Flash - Est-ce possible facilement ? - Web design - Graphisme

Marsh Posté le 01-12-2005 à 15:27:38    

Salut,
 
Je découvre tout juste flash, avec Flash MX 2004.
 
Je viens de lire quelques tutos sur http://flash-france.com/sections.p [...] es&secid=6 dont les "Le guide du débutant en flash". Dommage, il manque la partie 4 qui m'interressait.
 
Je désire afficher quelques images JPG l'une après l'autre, avec fondu d'ouverture et de fermeture sur chacune (vers fond noir). J'ai compressé au max mes JPG.
 
Avant ça, j'aimerai insérer une barre de progression (de chargement), qui serait simplement l'encadrement des photos (660 pixels par 660, photo : 650 pixels de côté, donc épaisseur du cadre : 5 pixels). Cet encadrement serait un carré au centre de 5 pixels de côtés qui s'allongerai (à l'horizontal) en une ligne de 660 pixels de long, puis elle se couperait en 2 pour que chacune remonte/descende. A la fin, l'encadrement serait en place, puis mes quelques photos pourraient commencer à s'enchainer rapidement.
 
Voilà, donc, pour un débutant total, est-ce facilement réalisable ? [:groody]  
 
 :jap:


---------------
Vidéo Concorde Air France | www.kiva.org
Reply

Marsh Posté le 01-12-2005 à 15:27:38   

Reply

Marsh Posté le 01-12-2005 à 15:49:26    

oui c'est tout à fait faisable.
 
Les images ne devront être dans ce cas que des objets à charger dans l'anim en fait. Une fois l'image chargée, un movie clip qui chevauche les images passera d'un alpha 100 à un alpha 0.  Imaginer qu'il fasse également l'alpha de 0 à 100 n'est pas très fun esthétiquement parlant.
La barre de progressin sera en priorité dans l'ordre des layers de la timeline. Il s'agit aussi d'un movie clip qui contient une fonction de contrôle de chargement et la restranscris graphiquement sous forme de ligne croissante ou sous forme de pourcentage. Ou les deux bien sûr..
 
 
Ce n'est pas forcement facile pour un débutant mais c'est parfaitement faisable.

Reply

Marsh Posté le 01-12-2005 à 15:56:08    

ok, merci.
 
Je pense comprendre ce que tu expliques, mais alors, je ne sais plus du tout comment faire.
Allez, y'a plus qu'à chercher :o
 
:jap:


---------------
Vidéo Concorde Air France | www.kiva.org
Reply

Marsh Posté le 01-12-2005 à 15:59:14    

salut.
 
Tu trouveras facilement des tutos de preload qui font par exemple avancer une barre de chargement.
En général, le pourcentage de chargement va pointer vers l'image de l'anim de preload (à 1% -> frame1 de l'anim, à 2% -> frame 2, ...)
 
Ce qu'il te reste à faire c'est donc l'anim du preload.
Il faut que tu découpe ton anim selon les étapes voulues. Par ex :
- image 1 à 75 : élargissement du carré
- image 76 à 100 : déplacement des barres.
 
C'est des anim de base (interpolation) ça ne devrait pas te poser pb longtemps :)
 
(tips : 5px divisé par 2 ça va être chiant)

Reply

Marsh Posté le 01-12-2005 à 16:03:20    

Merci. Donc je commence par ma barre de progression/encadrement avant de bosser sur les photos/fondus ?
 
 
Tips : pas divisé en 2, mais dédoublé :D


---------------
Vidéo Concorde Air France | www.kiva.org
Reply

Marsh Posté le 01-12-2005 à 16:24:40    

Groody a écrit :

Merci. Donc je commence par ma barre de progression/encadrement avant de bosser sur les photos/fondus ?


oui vu que c'est avant vaut mieux commencer par là.
 

Groody a écrit :


Tips : pas divisé en 2, mais dédoublé :D


faut pas dire "séparer" alors :o
 

Reply

Marsh Posté le 01-12-2005 à 16:27:02    

:jap:
 
Je viens de passer 5 minutes pour trouver comment faire un carré sans avoir les coins ronds .. [:petrus75]


---------------
Vidéo Concorde Air France | www.kiva.org
Reply

Marsh Posté le 01-12-2005 à 16:27:46    

Groody a écrit :

:jap:
 
Je viens de passer 5 minutes pour trouver comment faire un carré sans avoir les coins ronds .. [:petrus75]


c'est normal :D
 
bon courage  :hello:

Reply

Marsh Posté le 01-12-2005 à 17:01:41    

Skopos a écrit :

salut.
 
Tu trouveras facilement des tutos de preload qui font par exemple avancer une barre de chargement.
En général, le pourcentage de chargement va pointer vers l'image de l'anim de preload (à 1% -> frame1 de l'anim, à 2% -> frame 2, ...)
 
Ce qu'il te reste à faire c'est donc l'anim du preload.
Il faut que tu découpe ton anim selon les étapes voulues. Par ex :
- image 1 à 75 : élargissement du carré
- image 76 à 100 : déplacement des barres.
 
C'est des anim de base (interpolation) ça ne devrait pas te poser pb longtemps :)
 
(tips : 5px divisé par 2 ça va être chiant)


 
 :ouch:  :ouch:  :ouch:  :ouch:  
holalalalala
c'est compliqué ce truc !.... ca se faisait peut etre dans flash 4 mais la ya plus simple quand meme
 
 
 
 
 
 
 
 

Reply

Marsh Posté le 01-12-2005 à 17:05:03    

ben dis alors, je prétend pas être un pro du flash :)

Reply

Marsh Posté le 01-12-2005 à 17:05:03   

Reply

Marsh Posté le 01-12-2005 à 18:09:24    

Reply

Marsh Posté le 01-12-2005 à 18:18:16    


bien :)
 
T'es un flasheur maintenant fils :D

Reply

Marsh Posté le 01-12-2005 à 18:25:10    

Merci papa  [:fing fang fung]  
 
 
Par contre j'avais mis une résolution, 660*660. Et si j'ouvre direct le SWF dans IE/FF, il prend toute la page. J'imagine qu'il faut délimiter la taille via la page HTMl qui va l'accueillir ?


---------------
Vidéo Concorde Air France | www.kiva.org
Reply

Marsh Posté le 01-12-2005 à 18:45:15    

http://groody.free.fr/galerie/Flas [...] o-0.02.swf
 
+ fluide, sur 205 images au lieu 98, et 30 ips au lieu de 12.
 
Je ne sais pas si ça changera quelque chose pour la barre de progression (fluidité, car la 1ere version :/) ?


---------------
Vidéo Concorde Air France | www.kiva.org
Reply

Marsh Posté le 01-12-2005 à 19:46:30    

http://groody.free.fr/galerie/Flas [...] o-0.02.swf
Ca saccade un peu chez moi, pourtant c'est quand même ultra simple.
Chez vous aussi ? (non, je n'ai pas laissé la fenêtre en grand :o)


---------------
Vidéo Concorde Air France | www.kiva.org
Reply

Marsh Posté le 01-12-2005 à 20:09:27    

très légèrement mais bon spa grave.
 
Vu que c'est une anim de preload, elle sera dépendante du flux de la connection.
Si la le flux saccade l'anim saccade :spamafote:

Reply

Marsh Posté le 01-12-2005 à 20:12:29    

Oui, ça je m'en doute (pour la liaison au chargement).
 
Mais ça me semble bizarre qu'une anim aussi légère et simple "rame" un peu comme ça.
 
 
Bon, étape suivante [:groody]


---------------
Vidéo Concorde Air France | www.kiva.org
Reply

Marsh Posté le 01-12-2005 à 20:18:52    


C'est à dire ? Je ne vois pas ce qui semble te gêner.
 
 

Citation :

La barre de progressin sera en priorité dans l'ordre des layers de la timeline. Il s'agit aussi d'un movie clip qui contient une fonction de contrôle de chargement et la restranscris graphiquement sous forme de ligne croissante ou sous forme de pourcentage. Ou les deux bien sûr..


F8 pour changer le type d'un élément (en Clip (ce qu'est un MovieClip ??)).
Mais comment faire pour faire un seul MC de toute mon anim (si j'ai bien compris ce qu'il faudrait faire) ?


---------------
Vidéo Concorde Air France | www.kiva.org
Reply

Marsh Posté le 01-12-2005 à 20:47:12    

Tu peux insérer un clip ds un autre c'est souvent plus simple.
Sinon ben il suffit de continuer la première anim.
 
30fps ne sont pas necéssaire, 25 suffisent.

Reply

Marsh Posté le 01-12-2005 à 20:52:24    

continuer la 1ere anim, ok, mais j'avais compris que pour utiliser celle que je viens de créer comme barre de progression du chargement, il fallait que ce soit un MC à part.
 
:pt1cable:
 
 
Je change les FPS :jap:

Message cité 1 fois
Message édité par Groody le 01-12-2005 à 20:52:53

---------------
Vidéo Concorde Air France | www.kiva.org
Reply

Marsh Posté le 01-12-2005 à 20:53:21    

Et, qu'est ce qu'un MovieClip ?
Mon anim enregistré en FLA ?


---------------
Vidéo Concorde Air France | www.kiva.org
Reply

Marsh Posté le 01-12-2005 à 20:55:45    

Groody a écrit :

continuer la 1ere anim, ok, mais j'avais compris que pour utiliser celle que je viens de créer comme barre de progression du chargement, il fallait que ce soit un MC à part.
 
:pt1cable:


ben oui c mais tu demandes si c'est possible :D

Reply

Marsh Posté le 01-12-2005 à 20:59:38    

Ce n'est pas ce que je voulais dire.
Je ne comprends pas comment faire un MC.
 
Je pensais qu'il fallait cliquer sur une élément (1 de mes 4 barres par exemple), faire F8 puis choisir Clip. Donc je demandais comment tout intégrer (mes 4 barres + l'animation, etc.) en un seul MC, pour ensuite l'utiliser comme barre de progression.


---------------
Vidéo Concorde Air France | www.kiva.org
Reply

Marsh Posté le 01-12-2005 à 21:05:22    

t'as mis les clips directement sur la scène ?

Reply

Marsh Posté le 01-12-2005 à 21:08:49    

Koissa ? [:dawa]
 
 
J'ai ouvert un nouveau proket. J'ai pris l'outil "Outil rectangle". J'ai mis le bord du rectangle à 0.1 pixel et de même couleur que le contenu. J'ai créé 4 carrés de 5 pixels de côtés, dont 2 qui apparaissent qu'une fois les 2 premiers étirés (les horizontaux) pour former les traits verticaux, et j'ai bienspur modifé sur la timeline l'interpolsation en "Forme".
 
C'est tout, j'ai sauvegardé et exporté en SWF.
 
Ca répond à ta question ? [:groody]


---------------
Vidéo Concorde Air France | www.kiva.org
Reply

Marsh Posté le 01-12-2005 à 23:11:37    

oui t'as bien fait ça sur la scène principale (cf la séquence dans l'arborescence)
Perso je trouve plus souple de travailler ds des clip et de mettre les occurence de clip sur la scène.
 
Bon sinon tu t'es compliqué la vie qd même.
Tu n'as besoin que d'un clip carré de base.
 
Tu fais ton carré ds un clip qu'on va appelé... carre parcequ'on est malin.
 
Ensuite soit tu fais la suite ds un clip ou directement sur la scène comme tu veux.
- tu places une occurence de carre au centre.
- tu crée une image clé (frame 50 par ex) du carré étiré et tu fais l'interpolation.
-tu créé une image clé à la dernière frame (la 100), tu augmentes la hauteur du rectangle à 660 et tu interpole.
A ce niveau t'as un rectangle et pas un cadre.
 
Tu créé un nouveau calque et à l'image 50 tu créé une image clé,  
- tu centres une occurence du clip carre.
- ds les propriété tu peux modifier sa couleur (couleur/avancé/paramètres)
- tu devine la suite...

Reply

Marsh Posté le 01-12-2005 à 23:18:51    

Ouaip, plus simple :jap:
 
 
Par contre je n'ai pas encore pigé correctement la notion et l'utilisation des "clips".


---------------
Vidéo Concorde Air France | www.kiva.org
Reply

Marsh Posté le 01-12-2005 à 23:27:07    

j'ai oublié un truc.

Skopos a écrit :


Tu créé un nouveau calque et à l'image 50 tu créé une image clé,  
- tu centres une occurence du clip carre.
- tu réduis sa hauteur à 1px
- ds les propriété tu peux modifier sa couleur (couleur/avancé/paramètres)
- tu devine la suite...


 
le principe de flash pour avoir des anim légères c'est de créer des symboles ds la bibliothèqye et d'utiliser des occurences de ces symboles.
Ce qui pèse le plus c la bibliothèque.
Que tu ai 1 ou 200 occurences d'un symbole revient au même.
 
un clip a des propriétés et des fonctions (méthodes) que n'ont pas le symbole graphique.

Reply

Marsh Posté le 01-12-2005 à 23:35:39    

Ok, très clair. Je pensais qu'un "MovieClip" pouvait aussi être une scène complète (comprenant la timeline, la bibliothèque, etc.).


---------------
Vidéo Concorde Air France | www.kiva.org
Reply

Marsh Posté le 01-12-2005 à 23:43:57    

Un swf peut contenir d'autre swf c peut-être pour ça que tu as fait l'amalgame.

Reply

Marsh Posté le 01-12-2005 à 23:46:42    

Reply

Marsh Posté le 02-12-2005 à 12:28:20    

Bon, je travaille sur l'enchainement de mes images en fondu. Ca donne bien.
Mais ce n'est qu'un test. Avant d'aller plus loin, j'aimerai savoir comment utiliser des JPG déposés dans le même dossier que le SWF pour ne pas les intégrer au SWF (j'ai lu et on m'a dit que c'était maintenant possible).
 
Avantage : Je peux changer les JPG pour y mettre d'autres photos à la place (mais même nom) sans devoir toucher au FLA/SWF.
 
Mais comment faire ? Actuellement, mes photos sont intégrées dans le SWF.


---------------
Vidéo Concorde Air France | www.kiva.org
Reply

Marsh Posté le 02-12-2005 à 14:13:21    

this.loadMovie("image.jpeg" );

Reply

Marsh Posté le 02-12-2005 à 15:37:11    

Bon, vu avec Twan, j'abandonne cette idée, trop complexe pour moi pour ce que je veux faire. Je ne changerai pas les photos très souvent. J'éditerai donc le FLA ...
 
 
Voilà, j'ai un FLA pour ma "barre de progression" et un autre avec les photos qui défillent avec fondu.
 
Dois-je ouvrir un nouveau projet, ou dois-je partir d'un des 2 pour intégrer l'autre ?
 
Je lis quelques tuto, maisça rentre pas vraiment [:petrus75]


---------------
Vidéo Concorde Air France | www.kiva.org
Reply

Marsh Posté le 02-12-2005 à 16:15:48    

J'ai ajouté ça en fin d'anim :
 

Code :
  1. stop();
  2. //Goto Webpage Behavior
  3. getURL("http://monsite.fr/galerie/category.php","_self" );
  4. //End Behavior


 
 [:the_fury]  
 
 
Mais toujours pas de pré-chargement  [:khamal]


---------------
Vidéo Concorde Air France | www.kiva.org
Reply

Marsh Posté le 02-12-2005 à 16:34:07    

Groody a écrit :

J'ai ajouté ça en fin d'anim :
 

Code :
  1. stop();
  2. //Goto Webpage Behavior
  3. getURL("http://monsite.fr/galerie/category.php","_self" );
  4. //End Behavior


 
 [:the_fury]  
 
 
Mais toujours pas de pré-chargement  [:khamal]


 
 
ce que tu peux faire c'et faire 2 scenes dans ton flash... et mettre le code de load sur la premiere scene
sinon, tu le met sur la premiere image et le reste de l'annimation sur l'image 2 et plus
 
 
 

Code :
  1. _root.onEnterFrame = function() {
  2. //barre c'est un movieClip en rectangle qui s'appele barre --> 237 c'est sa longeure quand il est a 100%
  3. barre._width = (_root.getBytesLoaded()*237)/_root.getBytesTotal();
  4. pourc = Math.floor((_root.getBytesLoaded()*100)/_root.getBytesTotal())+" %";
  5. if (_root.getBytesLoaded() == _root.getBytesTotal() and _root.xcpt == _root.data.length) {
  6.  _root.gotoAndPlay(2);
  7.  delete _root.onEnterFrame;
  8. }
  9. };

Reply

Marsh Posté le 02-12-2005 à 16:46:18    

Merci.
 
"2 scènes", c'est ce qui est appelé "séquence" dans Flash MX 2004 ?
J'ai fais "Insertion > séquence" et j'ai un 2e projet, vide, dans mon FLA de départ.


---------------
Vidéo Concorde Air France | www.kiva.org
Reply

Marsh Posté le 02-12-2005 à 17:53:17    

Et beh. Je suis vraiment allergique à la prog même simpliste.
 
Là je nage. Je ne visualise pas ce qu'il faut faire.


---------------
Vidéo Concorde Air France | www.kiva.org
Reply

Marsh Posté le 02-12-2005 à 21:18:12    

Groody a écrit :

Merci.
 
"2 scènes", c'est ce qui est appelé "séquence" dans Flash MX 2004 ?
J'ai fais "Insertion > séquence" et j'ai un 2e projet, vide, dans mon FLA de départ.


oui c exactement ça.

Reply

Marsh Posté le 02-12-2005 à 21:47:06    

:jap:
 
Mais j'abandonne, malheureusement. Je ne pige pas, et vu mon besoin, je ne vais pas y passer des semaines..
Alors je vais tricher, en maintenant l'ouverture de mon encadrement pendant un certain temps, pendant lequel le reste se chargera. Pour les connexion rapides, ce sera inutile, pour les + lentes, pas suffisant.
[:groody]


---------------
Vidéo Concorde Air France | www.kiva.org
Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed