Séquences images et vidéos

Question

Bonsoir à tous,


Un ami (proprio d'écrans géants LED) voudrait que je lui code un petit script qui affiche différents séquences d'images ou de vidéos, en fonction du temps restant dans un compte à rebours, pour révéler au fur et à mesure un nouveau produit.
L'écran géant affiche simplement l'image renvoyée par l'ordinateur qui est lié. Il "suffit" donc d'afficher un compte à rebours et une séquence d'images/vidéos qui varie (disons que chaque heure à sa propre séquence composées d'images et/ou de vidéos).

L'application doit tourner 5jours d'affilé sans aucune interaction humaine sur un eee pc sous windows xp.


Je me disais que le plus simple serait de faire une application flash qui tournerait en local, pour pouvoir facilement intégrer les vidéos et faire des boucles sur les séquences.
Cependant je suis totalement novice en Flash/Flex et j'ai donc quelques questions :

- Connaissez-vous une librairie ou un framework permettant de rapidement charger des photos/vidéos ? Avez-vous un bout de code que je pourrais récupérer ? Ou, encore mieux, un logiciel ou une application flash qui fait déjà ce que je voudrais faire ? Bref tout ce qui existe est bon à prendre, histoire de ne pas réinventer la roue (surtout que c'est pour dans 4 jours et que je dois remettre mon mémoire de fin d'étude en même temps...)

- Pensez vous que l'application flash peut tourner 5 jours sans crasher et sans devoir être relancée ?




Merci d'avance!


Bien à vous,
KOServal

BBFUNK01 · Answer

Hello,

4 jours pour faire ce que tu veux faire ça risque d'être un peu court... Malgré tout qui ne tente rien n'a rien, donc tu peux effectivement te lancer dans cette animation en utilisant diverses propriétés :
personnellement je code en as2, donc je vais t'orienter vers des propriétés as2 :
- pour la gestion des vidéos, regarde du côté de NetStream() :
NetStream
- pour le chargement d'images dans Flash (images externes j'entends), tu as LoadMovie() et MovieClipLoader(). Si tu ne dois pas afficher trop d'images, tu peux aussi les stocker dans la bibliothèque du fichier flash et les afficher sur ta scène via attachMovie().
- pour le compte à rebours, enfin si tu veux afficher sur l'écran un compte à rebours, et bien en cherchant dans google "compte à rebours as2" tu trouveras ton bonheur.
- Pour la gestion du temps et lire tes vidéos ou tes images en fonction, il faudra te servir de getTimer() pour récupérer/pister le temps écoulé depuis le début de la lecture de ton animation Flash, setInterval() et clearInterval() pour paramétrer des événements dans le temps.
Bref, voilà en gros de quoi t'orienter vers quelques fonctions utiles.

A plus,

BBFUNK01
//C'est en forgeant qu'on devient forgeron... ;-) ;

KOServal · Answer

Merci beaucoup je vais regarder tout ça. Ton orientation va probablement bien m'aider, ca m'éviter de me perdre dans la masse de documentation.

J'en profite pour signaler que les requirements de l'utilisateur ont changé. Maintenant il aura juste 4 vidéos qu'il faut afficher en boucle avec entre chacune, un décompte pendant 10 secondes.


Sinon niveau robustesse, ca tiendra facilement pendant 5 jours sans crasher ? Il faut installer un lecteur Flash spécial ou normalement ca se fait automatiquement quand tu l'installe pour ton navigateur ?


Merci encore :)

BBFUNK01 · Answer

Hello,

il faut avoir le Flash player 10, téléchargeable gratuitement sur le net si tu ne l'as pas déjà. A priori ça pourra tenir 5 jours, du moment que l'ordinateur ne plante pas ou ne tombe pas en panne.

A plus,

BBFUNK01
//C'est en forgeant qu'on devient forgeron... ;-) ;

KOServal · Answer

Super merci beaucoup :)

Je reviendrai avec plein de questions dès que j'aurai commencé :D

KOServal · Answer

Bon j'ai passé 4heures dessus et j'ai déjà quelques des résultats.

Flash est vraiment pas un IDE facile à prendre en main je trouve, je m'y perds beaucoup (j'utilise Adobe Flash CS4).

Pour l'instant j'ai un compte à rebours qui s'affiche sur l'image qu'il me faut.

J'arrive aussi à importer une vidéo (Fichier -> importer -> importer de la vidéo) mais elle se lit en boucle et masque donc le reste.

Il faudrait que j'arrive à alterner 10 secondes de compte à rebours, puis une vidéo, puis 10 secondes de compte à rebours, puis une autre vidéo, puis ...

Je suis un peu perdu, j'ai bien compris qu'il y avait une ligne du temps (Scénario) en bas de flash mais je n'arrive pas à l'utiliser comme je le veux. Comment signifier une boucle par exemple ?

Si vous avez un moyen rapide de me faire comprendre ça, ou un bon tuto sous la main, je suis preneur.

Merci d'avance ;)

BBFUNK01 · Answer

Hello,

je te recommanderai de plutôt t'orienter vers la gestion de ton animation via le code, tu vas me dire : oui mais c'est compliqué et je n'aurai jamais terminé le fichier à temps. Ce sera peut-être le cas, mais pour le coup si tu y parviens, ton animation n'en sera que plus fonctionnelle.
En important tes vidéos dans le fichier flash, tu auras au final un fichier flash d'un poids monstrueux, ce qui ne sera pas des plus pratiques lors de son utilisation. Si tu stockes les vidéos dans un dossier situé dans le même répertoire que ton fichier flash, que tu charges ces vidéos dont les url seront stockées dans un fichier xml, tu auras alors beaucoup plus de souplesse par la suite ; tu pourras gérer ton comptes à rebours avec un script conditionnel, traduit en français ça donnerait ça :
"lorsque l'animation commence :
- affichage du compte à rebours.
- à la fin du compte à rebours :
- lecture de la 1ère vidéo stockée dans le fichier xml.
- si la vidéo en cours de lecture arrive à son terme ;
- lancement à nouveau du compte à rebours.
- à la fin du compte à rebours :
- lecture de la 2nde vidéo stockée dans le fichier xml.
... et ainsi de suite..."

De cette manière tu vas devoir rédiger le code adéquat pour rentrer les url de tes vidéos, et les lire dans le flash, et ce en interaction avec ton compte à rebours, ce sera plus lourd "techniquement" à mettre en place que si tu travailles sur la timeline et que tu insères les vidéos les unes après les autres avec à chaque fois entre celles-ci un compte à rebours, mais comme je te le dis l'animation n'en sera que plus réussie.

Après tu as une alternative entre les deux solutions :
la compilation de ces 2 solutions... je t'indique les grandes lignes :
- tu crées un fichier flash, dans ce fichier flash sur la 1ère frame tu mets un truc du genre :
stop();
onEnterFrame = function(){
...le code de ton compte à rebours...;
if(comptearebours == "fin"){
gotoAndStop(2);
}
}

ensuite sur la 2nde frame tu crées une fenêtre vidéo et tu mets un truc du genre :
// Créer un objet NetConnection : 
var LecVideo:NetConnection = new NetConnection(); 
// Créer une connexion locale en flux continu : 
LecVideo.connect(null); 

// Créer un objet NetStream et définir une fonction onStatus() : 
var netStream:NetStream = new NetStream(LecVideo); 

netStream.onStatus = function(infoObject) { 
  trace("Status (NetStream)"); 
  trace("Level: "+infoObject.level); 
  trace("Code: "+infoObject.code); 
}; 
// Définir la durée du tampon : 
netStream.setBufferTime(5); 
// Associer la vidéo NetStream à l'objet Video : 
ma_video.attachVideo(netStream);//ma_video = le nom d'occurrence que tu donneras
//à ta fenêre vidéo dans le flash

this.createEmptyMovieClip("Son", 0);
Son.attachAudio(newStream);
audio = new Sound(Son);
//pour régler le son :
audio.setVolume(100);

// Lire le fichier FLV : 
netStream.play("la_video_a_lire.flv");

... puis tu répètes l'opération en fonction du nombre de vidéos... je te laisse plancher là-dessus et développer l'idée.

A plus ,

BBFUNK01
//C'est en forgeant qu'on devient forgeron... ;-) ;

KOServal · Answer

Je t'avoue que pour une fois, je ne cherche vraiment pas à faire un truc modulaire et/ou réutilisable, donc ça ne me dérange pas de hardcoder (ou hard-timeliner). C'est vraiment juste pour utiliser 4 jours et j'ai déjà les vidéos donc voila ;).


Je vais donc au plus simple et au plus rapide. Et puis ca m'intéressait de comprendre comment fonctionne cette ligne du temps.

Merci beaucoup pour ton bout de code, je vais voir ce que je peux en faire.


Ton aide m'est précieuse :)

BBFUNK01 · Answer

Re,

le fonctionnment de la timeline c'est tout simple :
dans flash tu définis le nombre d'images/seconde pour une animation, ex.: 24 images/seconde, et bien les images de la timeline correspondent à ces images, donc après tu peux imaginer plein de trucs... Mais l'animation par le code c'est encore plus poussé car l'avantage après c'est que tu peux modifier plus facilement tes animations que si tu avais collé 5000 images différentes sur la timeline.
Après effectivement tout dépend de tes réels besoins, mais si tu souhaites continuer avec flash, je te conseille de te pencher sur le code .

A plus 

BBFUNK01
//C'est en forgeant qu'on devient forgeron... ;-) ;

KOServal · Answer

Hum bon j'ai essayé ta technique alternative et je n'arrive pas à afficher une vidéo.

Après mon image-clé du compteur (frame1) j'ai créé une nouvelle image-clé vide sur la frame 2. Dans ma bibliothèque j'ai fait clic droit -> nouvelle vidéo et j'ai juste dû mettre un nom. J'ai mis video1.

Ensuite j'ai mis ceci comme action pour la frame2 :


trace("TEST1");
// Créer un objet NetConnection : 
var LecVideo:NetConnection = new NetConnection(); 
// Créer une connexion locale en flux continu : 
LecVideo.connect(null); 

// Créer un objet NetStream et définir une fonction onStatus() : 
var netStream:NetStream = new NetStream(LecVideo); 

netStream.onStatus = function(infoObject) { 
  trace("Status (NetStream)"); 
  trace("Level: "+infoObject.level); 
  trace("Code: "+infoObject.code); 
}; 
// Définir la durée du tampon : 
netStream.setBufferTime(5); 
// Associer la vidéo NetStream à l'objet Video : 
video1.attachVideo(netStream);//ma_video = le nom d'occurrence que tu donneras
//à ta fenêre vidéo dans le flash

// Lire le fichier FLV : 
netStream.play("file://spot1.flv");
trace("TEST2");

TEST1 et TEST2 s'affichent correctement en sortie, mais l'image devient toute blanche et la vidéo ne se charge pas.
Je n'ai pas non plus le status, le level et le code sur la sortie.


Une idée d'où ça peut venir ?

KOServal · Answer

Oh et spot1.flv est dans le même dossier que le fla et le swf.
J'ai essayé sans le file:// et ça ne fonctionnait pas. J'ai lu qu'il fallait le mettre quand on travaillait en local.

Désolé du double post :/

KOServal · Answer

Bon ben j'ai réussi a faire tout ce que je voulais en mettant une frame avec un action pour le compteur, suivi d'une vidéo dans la time-line, suivi d'une frame compteur, suivi de ... et à la fin de la quatrième vidéo, une frame qui revoit à la première.


Mon problème est donc résolu :)

Par contre si tu sais pourquoi ca ne fonctionnait pas avec le code que j'ai essayé, ca m'intéresse de savoir.


Encore un tout tout tout grand merci pour ton aide, sans trop j'aurais perdu beaucoup plus de temps.

Bon week-end :)

BBFUNK01 · Answer

Re,

euh... bizarre ton histoire de vidéo qui ne se lance pas, moi quand je teste en local je ne mets pas "file://" et ça marche nickel. Essaie comme ça :
netStream.play("spot1.flv");
 sinon essaie aussi de mettre ta vidéo dans un dossier dans le même répertoire que ton swf, par exemple un dossier qui s'appellerai "videos" :
netStream.play("videos/spot1.flv");

autrement je ne vois pas vraiment d'où ça vient, en tout si le flash ne trouve pas la vidéo c'est normal que la fonction du status "vidéo" ne renvoie rien.

A plus,

BBFUNK01
//C'est en forgeant qu'on devient forgeron... ;-) ;

Séquences images et vidéos

12 réponses

Votre réponse

Discussions similaires