Publication Flash sur Internetet Transfert avec

Dreamweaver

COM3562 Communication Multimédia MARS 2011

Aujourd’hui• Publication d’un document Flash pour Internet

Composantes• Internet 101 - Structure d’un site Internet

– Pages, liens, Html et autre– Spécifier comment s’ouvre un lien vers une page web

• Dreamweaver• Créer un site web sur un serveur

• Exercice créer votre site et transférer vos fichiers.

• Site sur Dreamweaver et la production web

Internet 101• http://lrcm.com.umontreal.ca/dufresne/bta/ProdDream

/frame1.html

Avec Flash ajouter des animations. Exemples.

Internet 101• Attention

– Pas d’accent et pas d’espace dans les noms sur Internetpour les images, les pages, les dossiers, les fichiers

etc.

– Pas de caractères spéciaux comme parenthèses. virgule, apostrophe ou autre.

– Les points sont réservés aux extensions de fichier.

Types de liensfunction fl_ClickToGoToWebPage_5(event:MouseEvent):void{ navigateToURL(new URLRequest("http://www.adobe.com"), "_blank");}Blank= Nouvelle fenêtre videSelf = fenêtre de la page où est le lien cliqué.Top = fenêtre de niveau supérieur

D’autres choix définissent un cadre avec un nom. dans une page et où la nouvelle page s’affichera.

Par exemple dans le site Afrique, les animaux apparaissent dans le cadre ou emplacement appelé " image "On met alors "http://www.adobe.com"), "image" pour désigner l'Emplacement par son nomOn peut nommer un emplacement "bas", "contenu",etc.

Publier une application Flash• Différents Formats – Internet (HTML), Iphone, AIR, etc.• Publication par défaut

– HTML, SWF.– Préférences à spécifier.

• Votre site doit être dans un dossier où seront – Les pages Html– Le document SWF qui est la version exportée de votre Flash *– Les images (qui restent séparées sur Internet, pas comme

Word)– Les autres documents qui seront liés aux pages.

* Par défaut le document original de flash (.fla) sera laissé là. Vous n’avez pas à transférer ce document sur le serveur, mais il est plus facile de le garder là pour les modifications futures.

Vérifier votre compte sur le serveur ESIBAC

• Dans Firefox sur MACFirefox ou Explorer sur PC

• Important assurez-vous que les pop-up sont autorisés– Firefox / Préférences .. Bloquer les pop-up n’est pas coché

• Connectez vous sur http://www.dgtic.umontreal.ca/Profil/

Redéfinissez votre mot de passe pour le serveur ESIBACÇa sera activé 5 ou 10 minutes plus tard. (il faut attendre)

Vérifiez ensuite si le site est accessible dans Dreamweaver.

Vérifier votre compte sur le serveur ESIBAC

• Dans Firefox sur MACFirefox ou Explorer sur PC

• Connectez vous sur http://www.dgtic.umontreal.ca/Profil/

Redéfinissez votre mot de passe pour le serveur ESIBACÇa sera activé 5 ou 10 minutes plus tard. (il faut attendre)

Vérifiez ensuite si le site est accessible dans Dreamweaver.

Définir un site• Préparer le dossier où sera votre site avec le html et le swf• Ouvrir Dreamweaver• Menu Site /Gérer les sites• Cliquer le Bouton Nouveau pour créer un site• Donnez un nom et choisissez le dossier local ou est votre

site.

Définir un site

• Définir le serveur où sera téléchargé le site.• Notez bien les différentes valeurs dans les champs

esilbac1.esi.umontreal.ca

Dufresne est mon nom d’utilisateur, le votre est P012345XXX

TESTEZ

Définir un site

• Définir le serveur où sera consulté le site.• Notez bien les différentes valeurs dans les champs.

Testez le site

Afficher les fichiers dans Dreamweaver

• Lorsque vous avez terminé de définir le site.• Faites afficher les fichiers (Menu Fenêtre / Fichiers)• Vous pouvez connecter• Afficher le site local et distant

Transférer sur le serveur• Pour transférer votre site sélectionner les éléments et

demandez Menu Sites/ Placer ou utilisez la flèche bleue.

• Modifiez les autorisations pour permettre aux visiteurs d’Accéder aux pages et aux images.

• Sélectionnez le fichier sur le serveur – CTRL Définir les autorisations

Consultez votre site sur Internet

• Ouvrez le navigateur Safari Firefox ou Chrome

• Et tapez l’adresse suivante:

• http://www-bac.esi.umontreal.ca/~dufresne/index.html• Vous remplacez Dufresne par votre nom usager

P00XXXXX,puis vous mettez le nom de votre première page

• Si la première page s’appelle index.html vous n’avez pas besoin de l’écrire. Par défaut elle s’ouvrira. Par exemple:

http://www-bac.esi.umontreal.ca/~dufresne/Afrique/Ouvre un site dans un dossier nommé Afrique et la page index.html s’ouvre.

Exercice• Trouvez un document Flash (Test interactif ou

animation).• Placez le dans un dossier• Ouvrez le et publiez le.• Vérifiez que c'est correct en local.

• Avec Dreamweaver Définissez votre site sur le serveur et transférez la page HTML et le document SWF sur le serveur.

• Modifiez les autorisations.• Testez l’Accès dans le navigateur web.