Using Geoff Stearns’s FlashObject Presentation by Mindy McAdams > Get FlashObject code hereGet FlashObject code here.

Slides:



Advertisements
Similar presentations
17 HTML, Scripting, and Interactivity Section 17.1 Add an audio file using HTML Create a form using HTML Add text boxes using HTML Add radio buttons and.
Advertisements

Samsung Smart TV is a web-based application running on an application engine installed on digital TVs connected to the Internet.
Iframes & Images Using HTML.
Cascading Style Sheets
HTML Overview - Cascading Style Sheets (CSS). Before We Begin Make a copy of one of your HTML file you have previously created Make a copy of one of your.
Chapter 3 – Designing your web pages Dr. Stephanos Mavromoustakos.
SM5312 week 11: CSS Menus & Navigation Bars1 An Introduction to Cascading Style Sheets CSS Menus and Navigation Bars Nick Foxall.
Web Pages and Style Sheets Bert Wachsmuth. HTML versus XHTML XHTML is a stricter version of HTML: HTML + stricter rules = XHTML. XHTML Rule violations:
กระบวนวิชา CSS. What is CSS? CSS stands for Cascading Style Sheets Styles define how to display HTML elements Styles were added to HTML 4.0 to.
Web Design with Cascading Style Sheet Lan Vu. Overview Introduction to CSS Designing CSS Using Visual Studio to create CSS Using template for web design.
CIS101 Introduction to Computing
Art 128 Interface Programming 1 In-class Presentation Week 11B.
4.01 Cascading Style Sheets
Tutorial 7 Working with Multimedia. XP Objectives Explore various multimedia applications on the Web Learn about sound file formats and properties Embed.
Working with Cascading Style Sheets. 2 Objectives Introducing Cascading Style Sheets Using Inline Styles Using Embedded Styles Using an External Style.
Tutorial 3: Adding and Formatting Text. 2 Objectives Session 3.1 Type text into a page Copy text from a document and paste it into a page Check for spelling.
CSS (Cascading Style Sheets): How the web is styled Create Rules that specify how the content of an HTML Element should appear. CSS controls how your web.
Working with Cascading Style Sheets. Introducing Cascading Style Sheets Style sheets are files or forms that describe the layout and appearance of a document.
XP Tutorial 7New Perspectives on Creating Web Pages with HTML, XHTML, and XML 1 Working with Cascading Style Sheets Creating a Style for Online Scrapbooks.
CSS Style Rules Guang Tong, Zhan L;lo’p[ Css Style Rule Guang Tong Zhan Three ways to insert CSS 1 External style sheet 2 Internal style sheet 3 Inline.
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.
Eat Your Words! Creating webpage Layout. CONTENT The Layout of a Webpage HEADER FOOTER Each of these sections represents a ‘div’ (or divider). By linking.
Tutorial 4 Creating Special Effects with CSS
Cascading Style Sheets. Defines the presentation of one or more web pages Similar to a template Can control the appearance of an entire web site giving.
Images, Hyperlinks, and Sound Module 2: XHTML Basics LESSON 3.
Tutorial 7 Working with Multimedia. XP Objectives Explore various multimedia applications on the Web Learn about sound file formats and properties Embed.
 This presentation introduces the following: › 3 types of CSS › CSS syntax › CSS comments › CSS and color › The box model.
Working with Cascading Style Sheets (CSS) Module 2: HTML Basics LESSON 5.
Tutorial 7 Creating Forms. Objectives Session 7.1 – Create an HTML form – Insert fields for text – Add labels for form elements – Create radio buttons.
Domain 3 Understanding the Adobe Dreamweaver CS5 Interface.
Introduction to CSS. What is CSS?  Cascading Style Sheets  Used for styling HTML  Also important in javascript and jquery for selectors  External.
Tutorial 7 Working with Multimedia
Tutorial 7 Designing a Multimedia Web Site
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.
Css. Definition Cascading style sheet (CSS)  It is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents.
audio video object Options: controls autoplay Need to define height and width Options: controls autoplay.
CSD 340 (Blum)1 Starting JavaScript Homage to the Homage to the Square.
INTRODUCTION TO CSS. TOPICS TO BE DISCUSSED……….  Introduction Introduction  Features of CSS Features of CSS  Creating Style Sheet Creating Style Sheet.
Web Foundations WEDNESDAY, NOVEMBER 20, 2013 LECTURE 32: DREAMWEAVER SLIDE SHOW AND GOOGLE MAP.
Web Design Part I. Click Menu Site to create a new site root.
CNIT 132 – Week 4 Cascading Style Sheets. Introducing Cascading Style Sheets Style sheets are files or forms that describe the layout and appearance of.
Microsoft Expression Web 3 – Illustrated Unit D: Structuring and Styling Text.
Positioning Objects with CSS and Tables
1 Preparation for site Create a folder in MyDocuments: beavercheese. Create a subfolder, images Classes, career, DW beginner Download.
- WE’LL LOOK AT THE POSITION PROPERTY AND HOW CSS RESOLVES CONFLICTS BETWEEN STYLING INSTRUCTIONS The position property; CSS specificity hierarchy.
1 CSC160 Chapter 1: Introduction to JavaScript Chapter 2: Placing JavaScript in an HTML File.
Microsoft Expression Web - Illustrated Unit A: Getting Started With Microsoft Expression Web.
XP Tutorial 7New Perspectives on HTML and XHTML, Comprehensive 1 Working with Cascading Style Sheets Creating a Style for Online Scrapbooks Tutorial 7.
HTML 5 (Part 1) – Start from SCRATCH. HTML 5 – Start from SCRATCH.
The HTML5 logo was introduced by W3C in 2010
HTML Extra Markup CS 1150 Spring 2017.
Working with Cascading Style Sheets
Dreamweaver – Setting up a Site and Page Layouts
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.
The Box Model in CSS Web Design – Sec 4-8
4.01 Cascading Style Sheets
>> Introduction to CSS
Cascading Style Sheets (Layout)
The Box Model in CSS Web Design – Sec 4-8
>> CSS Layouts.
Tutorial 7 Working with Multimedia
Website Design 3
Playing Audio (Part 1).
Tutorial 6 Creating Dynamic Pages
Working with Multimedia
For this assignment, copy and past the XHTML to a notepad file with the .html extension. Then add the code I ask for to complete the problems.
CSS.
4.01 Cascading Style Sheets
Web Programming and Design
Presentation transcript:

Using Geoff Stearns’s FlashObject Presentation by Mindy McAdams > Get FlashObject code hereGet FlashObject code here

What is it? FlashObject is a combination of JavaScript and CSS that is ready for use without alteration You do not need to know any JavaScript to use FlashObject You do need to know how to use (X)HTML and CSS

“Download” section (same page)

How do you get it? From the Web page, download the zipped file Unzip the file Open the folder FlashObject 1.3

The key: The.js file Copy this JavaScript file and upload it to your Web server It’s good to have one folder named “scripts” on your server; put it there!

Making the JavaScript work If the JavaScript file is on your server, you can call it from any Web page on your site Simply place this script in the HEAD of your (X)HTML file:

Making the JavaScript work (2) Now your page can access the.js file The next step is to place a “call” to the script within the HTML on your page (shown above)

One piece calls the JavaScript We’ll explain this in a moment It has special rules of its own

The other piece is pure CSS You can write anything inside this DIV It will be seen only if the user does not have the Flash version you specify

In your CSS declarations … You will need to write properties for the CSS selector “flashcontent” You must use “flashcontent” in your CSS to make this work! #flashcontent { border: solid 1px #000; width: 300px; // change height: 300px; // change }

View Source, copy & paste

Now, for the JavaScript … Only the three lines in the middle of this may be changed to suit your own needs, for your SWF

Writing the values of your SWF This line is the key (6 required values): var fo = new FlashObject ("fo_tester.swf", "fotester", "300", "300", "8", "#FF6600"); You supply the filename of your SWF, ID,* the width, height, oldest player version, and background color (of the SWF) * The ID of your object or embed tag; this is a variable name of your choosing; must be unique for each SWF on the page

Player version is set here You must choose a player version for your own SWF, using Publish Settings in Flash

Writing the values (2) The second key within the JavaScript on your page is this line: fo.write("flashcontent"); This is where you tell the external.js file what the selector is in your CSS Note: If you place more than one SWF on the page using FlashObject, you will need to use different CSS selectors for each one

That’s all the JavaScript! The second line of the three lines in the middle of this can be left out altogether There’s more explanation of all of this on the FlashObject page at Geoff’s site

Adding parameters (optional) You may add various parameters with the JavaScript on your HTML page: fo.addParam("quality", "low"); fo.addParam("wmode", "transparent"); fo.addParam("salign", "t"); All possible parameters for Flash are listed herehere ( )

Why this is VERY important! Microsoft is making changes to IE  Both the existing version (6), via required security updates to the Windows OS  And in the forthcoming IE v.7 The changes will affect the way Flash content is viewed in the IE browser … UNLESS you use JavaScript to put the SWF on your Web pages

Why Microsoft is doing it Maybe because Microsoft does not own Flash? (grin) Because ActiveX controls (used by the IE browser) allow people to mess up your computer with spyware, etc. Now, users can’t run content loaded by the APPLET, EMBED, or OBJECT elements in a Web page until they “activate their user interfaces.” (Source: Microsoft.com)Source: Microsoft.com

So just use FlashObject! The solution presented by FlashObject overcomes all the trouble created by the new way of handling ActiveX controls in the IE browser It doesn’t hurt anyone using other browsers It provides clean, functional version detection, so people know whether they have the Flash player version required by your Flash movie!

Using Geoff Stearns’s FlashObject The End Presentation by Mindy McAdamsMindy McAdams > Get FlashObject code hereGet FlashObject code here