FLASH, VIDEO & AUDIO How to add Flash movies into your site How to add video and audio to your site HTML5 and elements.

Slides:



Advertisements
Similar presentations
Tutorial 7 Planning and Creating a Flash Web Site.
Advertisements

2.02F Publishing Animated Videos 2.02 Develop Computer Animations.
Chapter 11 Media and Interactivity Basics Key Concepts Copyright © 2013 Terry Ann Morris, Ed.D 1.
Chapter 11 Media and Interactivity Basics Key Concepts
HTML Structure & Web Design Basics
Authoring Languages and Web Authoring Software 4.01 Examine web page development and design.
SHAREPOINT PAKISTAN USER GROUP #1 SHAREPOINT COMMUNITY IN PAKISTAN AND ASIA HTML5 and SharePoint 2013.
HTML 5 and CSS 3, Illustrated Complete Unit K: Incorporating Video and Audio.
1 Introduction to Computer Science بسم الله الرحمن الرحيم MULTIMEDIA LEVEL -9 King Khalid University Kingdom of Saudi Arabia Ministry of Higher Education.
3.02 Publishing Animations
INF Web Design Using Multimedia on the Web Video - Part 1.
Multimedia on the Web. Audio Video Animation Interactivity Plug-ins in the users’ computer –Real Player (.ram,.rpm,.avi) –Quicktime (.mov) –Shockwave.
Multimedia for the Web: Creating Digital Excitement HTML, XHTML and Web Authoring.
Macromedia Dreamweaver 4 Advanced Level Course. Add Rollovers Rollovers or mouseovers are possibly the most popular effects used in designing Web pages.
Define objects and their relationships to multimedia Explain the fundamentals of C, C++, Java, JavaScript, JScript, C#, ActiveX and VBScript Discuss security.
Tutorial 7 Working with Multimedia. XP Objectives Explore various multimedia applications on the Web Learn about sound file formats and properties Embed.
What is Web Design The term “web design” has come to encompass a number of disciplines, including: Visual (graphic) design User interface and experience.
Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development I” Course materials.
Section 9.1 Section 9.2 YOU WILL LEARN TO…
Audio and Video on the Web Sec 5-12 Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development I” Course materials.
Session: 11. © Aptech Ltd. 2HTML5 Audio and Video / Session 11  Describe the need for multimedia in HTML5  List the supported media types in HTML5 
Chapter 11 Adding Media and Interactivity. Flash is a software program that allows you to create low-bandwidth, high-quality animations and interactive.
© 2011 Delmar, Cengage Learning Chapter 11 Adding Media and Interactivity with Flash and Spry.
Video on the Web. The Evolution of web video formats… WebM (Supported by Google) Ogg (Supported by Theora) Mp4 (h264 video encoding) WebM (Supported by.
CHAPTER 18 INTEGRATING AUDIO AND VIDEO. LEARNING OBJECTIVES How the HTML 5 and tag pair can be used to include a video file within a webpage How video.
Using HTML 5.  HTML 5 uses a standard method to embed audio into Web pages.  Prior to HTML 5, browser plug-ins or separate applications such as Windows.
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Lesson 5: Multimedia on the Web.
Tutorial 7 Working with Multimedia. XP Introducing Multimedia Bandwidth is a measure of the amount of data that can be sent through a communication pipeline.
CSCI N241: Fundamentals of Web Design Copyright ©2004  Department of Computer & Information Science Adding Sound.
2.02G Publishing Animated Videos 2.02 Develop Computer Animations.
Lights, Camera, Action! The Role of Multimedia in Web Applications Leading Multimedia Formats in Use Today What You Need to Know to Include Them in Your.
Tutorial 7 Working with Multimedia. XP Objectives Explore various multimedia applications on the Web Learn about sound file formats and properties Embed.
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 7 TH EDITION Chapter 11 Key Concepts 1 Copyright © Terry Felke-Morris.
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 11 Key Concepts 1 Copyright © Terry Felke-Morris.
MIS 425 Lecture 3 – HTML 5 and CSS Instructor: Martin Neuhard
Processing.js.
Audio and Video on the Web Presentation by Cheryl Deas and Pasha Souvorin Multimedia for Web Designers.
HTML Use of Multimedia on web page. HTML Media Q. How to call Image file in our web page ? A. That is the easy syntax for defining an image. 2.
Tutorial 7 Working with Multimedia
Tutorial 7 Designing a Multimedia Web Site
GIF - Graphics Interchange Format JPEG - Joint Photographic Experts Group PNG - Portable Network Graphics GIF images are limited to the 8 bit palette which.
Supplementary Materials on Web Authoring. Insert Anchors & Add Hyperlinks Insert other multimedia elements: Flash animations Video clips & Audio clips.
Tutorial 7 Working with Multimedia. New Perspectives on HTML, XHTML, and XML, Comprehensive, 3rd Edition 2 Objectives Explore various multimedia applications.
Tutorial 7 Working with Multimedia. New Perspectives on HTML, XHTML, and XML, Comprehensive, 3rd Edition 2 Objectives Explore various multimedia applications.
Tutorial 7 Planning and Creating a Flash Web Site.
Lesson 31: Plug-Ins and Java Applets. Objectives Apply plug-in/viewer technology to Web pages to support various file types Create rich media streaming.
Homepage-Parent page Who: has logos, copyright notification and clearly identifies who owns the site. What: Summary text and images that show visitors.
How the Web Works Building a Website – Lesson 1. How People Access the Web Browsers People access websites using software called a web browser. To view.
Inserting Flash Videos SharePoint 2007 By Joseph Risi.
XP Tutorial 7 Creating a Flash Web Site. XP New Perspectives on Macromedia Flash 82 Objectives Plan and create a Flash Web site Create a Flash template.
Today’s Lineup: Link o’ the week Prof. Nick Mills: Washington Program Flash More on Audio Editing Team Meetings.
Chapter 11 Adding Media and Interactivity. Chapter 11 Lessons Introduction 1.Add and modify Flash objects 2.Add rollover images 3.Add behaviors 4.Add.
CS 200 Multimedia Objects in Web Pages. MultiMedia Objects Three primary types of multimedia objects  Audio  Video Includes Flash Objects  Images.
Advanced Website Design Professor: Jared Kozel Class Description: Are you already familiar with how to construct a basic Website? This class will teach.
Chapter 8 Adding Multimedia Content to Web Pages HTML5 & CSS 7 th Edition.
CHAPTER 8 Multimedia 1. Using Multimedia ❖ Multimedia: the combination of text, sound, and video to express an idea or convey a message. ❖ Podcasts: a.
Web Design, 5 th Edition 6 Multimedia and Interactivity Elements.
Creating a Flash Web Site
HOW FLASH WORKS The Flash authoring environment is used to create Flash movies The .fla file is exported to a format called .swf The .swf file is.
Background Information
Using Templates A template is a special type of document that you use to design a “fixed” page layout; you can then create documents based on the template.
Chapter 4: HTML5 Media - <video> & <audio>
Learn HTML Basics Lesson No : 10
Using Templates A template is a special type of document that you use to design a “fixed” page layout; you can then use the web page to create a template.
Playing Audio (Part 1).
Playing Video (Part 2).
Playing Video (Part 1).
HTML5 Media.
Lesson 5: Multimedia on the Web
Using Templates A template is a special type of document that you use to design a “fixed” page layout; you can then create documents based on the template.
Presentation transcript:

FLASH, VIDEO & AUDIO How to add Flash movies into your site How to add video and audio to your site HTML5 and elements

MULTIMEDIA  We then focus on how to add video and audio to your site, using either the new HTML5 and elements or a hosted service (such as YouTube or SoundCloud).

HOW FLASH WORKS  Flash movies  When you create a Flash file in the Flash authoring environment, it is saved with the.fla  to use this file on a web page it has to be saved in a different format known as SWF. (It has the.swf extension)

USE OF FLASH  selective about when they use it (and now rarely consider building an entire website in Flash).  In , a set of JavaScript libraries were launched (including Prototype, script.aculo.us, and JQuery)  When Apple launched the iPhone in 2007 and later the the iPad in 2010, they took the decision not to support Flash

ADDING A FLASH MOVIE TO YOUR WEB PAGE

UNDERSTANDING VIDEO FORMATS AND PLAYERS  Formats  Players / pluginS  Approach

USING HOSTED VIDEO SERVICES  Advantages  Disadvantages  The Alternative

PREPARING A FLASH VIDEO FOR YOUR SITE  Convert Your Video into FLV Format  FinD an FLV Player to Play the Video  Include the Player & Video in Your Page

ADDING A FLASH VIDEO TO YOUR PAGES

FLASH VIDEO

HTML 5: PREPARING VIDEO FOR YOUR PAGES  Support  Formats  Controls

HTML 5: ADDING VIDEO TO YOUR PAGES

HTML 5: MULTIPLE VIDEO SOURCES

HTML 5: COMBINING FLASH & HTML 5 VIDEO  By offering your videos in both HTML5 and Flash Video formats, you will ensure that it can be viewed by the majority of users on your site

ADDING AUDIO TO WEB PAGES  Use a Hosted Service  Use Flash  Use HTML 5

ADDING A FLASH MP3 PLAYER

RESULT

HTML 5: ADDING HTML 5 AUDIO TO YOUR PAGES

HTML 5: MULTIPLE AUDIO SOURCES

SUMMARY  Flash allows you to add animations, video and audio to the web  Flash is not supported on iPhone or iPad  HTML5 introduces new and elements for adding video and audio to web pages, but these are only supported in the latest browsers  Browsers that support the HTML5 elements do not all support the same video and audio formats, so you need to supply your files in different formats to ensure that everyone can see/hear them.

RESULT