Le Streaming dans vos animations Shockwave

Avant l'arrivée de shockwave en 95, on n'imaginait pas qu'un multimédia de qualité puisse passer sur la bande si lente du Web.

De la même façon que les graphistes du web, venant du monde de l'impression, les développeurs de shockwave venant du monde du CDRom Multimedia, on eut à apprendre une variété de techniques pour réduire la taille de leurs medias.
Il a fallu faire de nombreux sacrifices dans la qualité de leurs présentations de façon à équilibrer la richesse de leurs projets avec la patience de leurs utilisateurs sur le temps de chargement.

Avec Director 6, Macromedia a créé de nombreuses nouveautés pour accélérer les besoins du web tout en libérant les développeurs.

Un oeil sur streaming shockwave

Une animation shockwave n'est pas vraiment streamée dans le sens même du mot c'est à dire donner l'information à flots continu - une phrase plus descriptive serait un chargement sélectif ou préféré. La façon dont une page web est chargée c'est d'abord le chargement du fichier HTML lu par le browser. Celui ci interprète le fichier et appelle le reste des médias, les affichant sur la page lorsqu'elles sont chargées complètement. C'est ainsi que shockwave streame. Le scénario de l'animation est chargé en premier, et est ensuite interprété par le plug-In ou le control ActiveX. Enfin les médias sont chargées et affichées dans l'ordre où elles apparaissent dans le scénario.

Comme pour le document HTML, les medias deviennent seulement disponibles que lorsqu'elles ont été totalement chargées.
Ce qui est différent des technologies utilisant un véritable streaming qui donnent accès à des blocs de media.

Une animation shockwave basée sur un fichier d'origine correctement ordonnée donnera un bon streaming. Si on comprend comment le streaming de shockwave fonctionne cela aidera à trouver la meilleure façon pour construire sa movie.

Donner les options de streaming dans Director

Director offre des options de base pour le playback en streaming des movies shockwave.
Menu Modifier - animation - playback qui ouvre la boite de dialogue playback properties

Il y a trois option sous l'article streaming : attendre tous les medias, utiliser les medias disponibles, montrer les fichiers de remplacement ou afficher les repères. Par défaut c'est attendre pour tous les medias, ce qui basiquement veut dire : pas de streaming puisque l'animation attendra que tous les medias soient chargées avant de démarrer. Avec l'option utiliser les medias dès qu'elles sont disponibles, l'animation démarre immédiatement. La scène vide apparait en premier et dès que chaque média est chargée elle apparait sur la scène. L'option suivante montrer les fichiers de remplacement montre les médias manquantes ou partiellement chargées avec des petites boites qui prennent la taille et la place des graphiques manquants. La dernière option de sreaming Pré-récupérer ou Pre-Fetch nous permet de spécifier le nombre d'images à charger avant que l'animation ne commence. Cela permet d'afficher les premières images de l'animation pendant que le reste de l'animation se charge. Cette option pourrait afficher un message à l'utilisateur dans le genre "Soyez patient, l'animation est en train d'être chargée" ou d'afficher une petite animation pour le distraire avant que le vrai show ne démarre. On pourra éventuellement créer une barre de status, (TimeBar) dans la première image de l'animation.

Utilisation de frameReady et de mediaReady

frameReady

Comme son nom l'indique, la première des ces commandes, frameReady, teste si oui ou non tous les medias necessaires pour une image en particulier sont prêtes. En utilisant cette commande, on peut savoir quelle partie de l'animation est prête et l'afficher à l'utilisateur.

Si un utilisateur cliq sur un bouton qui envoie la tête de lecture sur une image qui n'est pas encore chargée, il aura devant les yeux l'écran vide. En utilisant frameReady on peut vérifier si l'image est prête et si non avertir l'utilisateur d'attendre encore un peu.

voici un exemple d'utilisation de frameReady, dès que l'image est prête la tête de lecture est envoyée à l'image en gros plan représentative de la vignette.

script de scénario pour les vignettes ancienne syntaxe

on mouseWithin me
   cursor 280
   set the visible of sprite (the spriteNum of me + 5) to true -- titres
end
on mouseLeave me
   cursor -1
   set the visible of sprite (the spriteNum of me + 5) to false
end
on mouseDown me
    set the loc of sprite the clickon = the loc of sprite the clickOn + 3
    updateStage
end
on mouseUp me
    set the loc of sprite the clickOn = the loc of sprite the clickOn - 3
    updateStage
   if frameReady (the spriteNum of me + the frame) then
    set the visible of sprite (the spriteNum of me + 5) to FALSE
    go frame (the spriteNum of me + the frame)
   else
     alert "l'image n'est pas encore chargée"
   end if
end

script de scénario pour les vignettes nouvelle syntaxe

on mouseWithin me
    cursor 280
     sprite(me.spriteNum + 5).visible = TRUE -- titres
end

on mouseLeave me
     sprite(me.spriteNum + 5).visible = FALSE
end

on mouseDown me
     sprite(the clickOn).loc = sprite(the clickOn).loc + 3
     updateStage
end

on mouseUp me
     sprite(the clickOn).loc = sprite(the clickOn).loc - 3
     updateStage
     if frameReady(me.spriteNum + the frame) then
         sprite(me.spriteNum + 5).visible = FALSE
         go frame (me.spriteNum + the frame)
     else
         alert "l'image n'est pas encore chargÈe"
     end if

mediaReady

Similaire à frameReady mais là où frameReady ne vérifie que si une image en particulier est chargée, mediaReady permet d'être un peu plus sélectif de façon à tester si un media est prêt dans une distribution en se basant sur l'acteur.

Dans l'exemple suivant la tête de lecture reste sur une seule image, en utilisant the mediaReady of member (ou member(quelActeur).mediaReady) si l'acteur correspondant est chargé sa visibilité sera effective, sinon un message d'alerte s'affichera.

script de scénario pour les vignettes nouvelle syntaxe

on mouseUp me
   set the loc of sprite the clickOn = the loc of sprite the clickOn - 3
   updateStage
   if the mediaReady of member (the memberNum of sprite the spriteNum of me - 1) then
     set drapeau = 1
     set the visible of sprite (the spriteNum of me + 5) to FALSE
     set the visible of sprite (the spriteNum of me + 10) to TRUE
   else
     alert "l'image n'est pas encore chargée"
   end if
end

script de scénario pour les vignettes ancienne syntaxe

on mouseUp me
     sprite(the clickOn).loc = sprite(the clickOn).loc - 3
     updateStage

     if member(sprite(me.SpriteNum).memberNum - 1).mediaReady then
          drapeau = 1
          sprite(me.spriteNum + 5).visible = FALSE
          sprite(me.spriteNum + 10).visible = TRUE
     else
     alert "l'image n'est pas encore chargÈe"
     end if
end

En regardant la distribution de cet exemple vous voyez que l'image de l'avenir est la première, suivie des autres images. Les medias sont chargées dans l'ordre où les acteurs apparaissent dans le scénario -- partant de l'image 1, piste 1 et descendant à travers les pistes sur un plan vertical et sur le plan horizontal vers les images suivantes. Comme la grosse photo de l'avenir apparaît dans le scénario avant les autres, elle est la première à être chargée. Placez les éléments que vous désirez apparaître en premier dans les pistes supérieures du scénario et les éléments qui peuvent être affichés plus tard dans les pistes inférieures.

Créer une barre de status en utilisant streamStatus

L'un des moyens le plus sur pour garder son utilisateur en attente lors du process de chargement est de lui montrer combien de temps celui-ci prendra.

Pour cela on créera une barre de status de chargement en (pre-fetchant) pre-récupérant la première image de l'animation qui contient le graphique de la barre de status. Le lingo streamStatus est utilisé pour diriger le chargement de la movie et créer les informations nécessaires pour mettre à jour la barre de statut. Dans l'exemple, la largeur (width) de la barre est de 200 pixels.

Script d'animation ancienne syntaxe

on prepareMovie
     set the width of sprite 2 to 0
     tellStreamStatus(TRUE)
     put "" into field "pourcentage"
     repeat with i = 8 to 10
          set the visible of sprite i to false
     end repeat
end

on streamStatus url, etat, octetsTransmis, totalOctets, erreur
     if etat = "Complete" then
          go to frame 2
     else
          set pourcentageActuel = (float(octetsTransmis) / float(totalOctets))
          set pourcentageSprite = integer(pourcentageActuel * 200)
          set the width of sprite 2 = pourcentageSprite
          set the text of field "pourcentage" = integer(pourcentageActuel * 100) & "%"
          updateStage
     end if
end

Script d'animation nouvelle syntaxe

on prepareMovie
     sprite(2).width = 0
     tellStreamStatus(TRUE)
     member("pourcentage").text = ""
     repeat with i = 8 to 10
          sprite(i).visible = FALSE
     end repeat
end

on streamStatus url, etat, octetsTransmis, totalOctets, erreur
     if etat = "Complete" then
          go to frame 2
     else
          pourcentageActuel = (float(octetsTransmis) / float(totalOctets))
          pourcentageSprite = integer(pourcentageActuel * 200)
          sprite(2).width = pourcentageSprite
          member("pourcentage").text = integer(pourcentageActuel * 100) & "%"
          updateStage
     end if
end

< Sommaire