Export FLA to HTML5
Publish to iPhone from Captivate 5
To deploy a Captivate course on an iPhone you need Adobe eLearning
Suite 2, or both Adobe Captivate 5 and Adobe Flash Professional. You
also need to install the ‘Packager for iPhone’ from Adobe Labs.
1. Get an iPhone developer certificate from Apple
2. Get Development Provisioning profile from Apple (A file that lets
you test or distribute an iPhone application. You obtain
provisioning profile files from Apple. A provisioning profile is
assigned to a specific development certificate, an application ID,
and one or more device IDs). More details here.
3. Create a Captivate project for the iPhone form factor – 320 *480
4. While publishing the SWF, turn ON this option in the publish
dialog – “Enable SWF for conversion to iPhone application”.
Low Bandwidth Player
• Automatically adds HTML feature when/if you add PNGs of slides
• Automatically adds embedded audio if you include files
• Automatically switches to HTML if no flash is detected (and pngs are
• Notifies LMS when course is complete
• Slide Index toggles with Articulate outline panel setting
• Uses HTML5 and degrades nicely for IE
• HTML5 – the markup language
• CSS3 (the latest version of Cascading Style
Sheets) – how it looks or is rendered
Areas of Focus
• The "markup" part of HTML5: focused on
developing web sites and pages
• The API (application programming interface)
part: focused on building web applications
(think of Gmail as an example of a web
Tablet Reading Experience
Content is displayed in a horizontal, widescreen format devoid of distracting banner ads and
links to other content.
Users can pull up a left‐hand navigation bar to navigate between story sections, and click on
arrows to tab between individual pages.
The size and amount of text on display adjusts according to the size of the browser.
Document Object Model (DOM)
• Check if a certain property exists on a global object (such as window
– Example: testing for geolocation support
• Create an element, then check if a certain property exists on that
– Example: testing for canvas support
• Create an element, check if a certain method exists on that
element, then call the method and check the value it returns
– Example: testing which video formats are supported
• Create an element, set a property to a certain value, then check if
the property has retained its value (think about forms)
– Example: testing which <input> types are supported
HTML5 – Up and Running: Mark Pilgrim
• New structural and semantic markup
– Such as header, footer and nav elements
• The new canvas element
– Creating web based bitmap graphics using
• New native audio and video elements, and
related elements and attributes
– Embedding multimedia content that browsers can
play without plugins
<li><a href="/about">About</a></li> </ul>
The nav element represents a section of a page that links to other pages or
to parts within the page: a section with navigation links.
Not all groups of links on a page need to be in a nav element only sections
that consist of major navigation blocks are appropriate for the nav element.
• <audio> tag defines sound content
• <canvas> tag defines graphics
• <footer> tag defines a footer for a section or
• <header> tag defines a header for a section or
• <nav> tag defines navigation links
• <time> tag defines a date/time
• <video> tag defines a video
Works best in Mozilla
Offline Web Application
• Enabling resources like HTML, CSS and
offline, the browser will have kept these
resources, and the application can still be
used, or even installed locally on a device
• Sending events to a web application when the
user goes on and offline
This is a good, simple demonstration of
editable text and local Storage; edit text in
the box, close the window, and then click
the link again.
• Allows a web site or application to ask the
browser where a user is located (including
longitude, latitude and altitude, but also
potentially the direction they are facing, and
• Of course, whether the user wishes to share
this information is at their discretion)
Elements inside <head> can include
scripts, instruct the browser where
to find style sheets, provide meta
information, and more.
The following tags can be added to
the head section: <title>, <base>,
<link>, <meta>, <script>, and
The body element defines the
The body element contains all the
contents of an HTML document,
such as text, hyperlinks, images,
tables, lists, etc.
The HTML5 canvas element uses
A canvas is a rectangular area, and
you control every pixel of it.
The canvas element has several
methods for drawing paths, boxes,
circles, characters, and adding
Specify the id, width, and height of the element
The canvas element has no drawing abilities of its own.
Create a context object –
The getContext("2d") object is a built‐in HTML5 object, with
many methods to draw paths, boxes, circles, characters,
images and more.
Draw a red rectangle.
The fillStyle method makes it red.
The fillRect method specifies the shape, position, and size.
The fillRect method above had the parameters (0,0,150,75).
This means: Draw a 150x75 rectangle on the canvas, starting at the top left corner (0,0).
The canvas' X and Y coordinates are used to position drawings on the canvas.
SVG stands for Scalable Vector Graphics
Canvas vs. SVG
• Think of the difference between canvas and svg as the
difference betwee Photoshop and Illustrator (One deals
with bitmaps and the other vector art.
• With canvas, since you are drawing in bitmap, you can
smudge, blur, burn, dodge your images easily. But since it's
bitmap you can't easily draw a line and then decide to
reposition the line. You need to delete the old line and then
draw a new line.
• With svg, since you are drawing vectors, you can easily
move, scale, rotate, reposition, flip your drawings. But since
it's vectors you can't easily blur the edges according to line
thickness or seamlessly meld a red circle into a blue square.
You need to simulate blurring by drawing intermediate
polygons between objects.
• SVG stands for Scalable Vector Graphics
• SVG is used to define vector‐based graphics
for the Web
• SVG defines the graphics in XML format
• SVG graphics do NOT lose any quality if they
are zoomed or resized
• Every element and every attribute in SVG files
can be animated
• SVG files can be read and modified by a large range of tools
• SVG files are smaller and more compressible than JPEG and
• SVG images are scalable
• SVG images can be printed with high quality at any resolution
• SVG images are zoomable (and the image can be zoomed
• Text in SVG is selectable and searchable (excellent for making
• SVG works with Java technology
• SVG is an open standard
• SVG files are pure XML
File vs. Video Formats
• One of the biggest sources of confusion about
video is not realizing that the file format is
completely different from the video format. So
you're always dealing with two formats, not one.
• Examples of file formats are .mp4, .flv, f4v, .ogv,
or .avi. File formats are often called container
formats because they're containers for the actual
• The video format is the flavor of compression
that's used on the video. This is often called
The movie.MP4 file is
a container that can
hold video encoded
as either MPEG‐4 or
A movie.FLV (Flash) file
could also hold H.264
video, or it could hold
video encoded with vp6
or Sorenson Spark. But it
can't hold MPEG‐4 video.
A movie.OGV file is
primarily for Theora and
other even more obscure
It can't hold MPEG‐4 or
H.264, at least not easily.
To convert videos to the .ogg/.ogv format, install the Firefogg extension into your
A codec encodes a data stream or signal for
transmission, storage or encryption, or decodes
it for playback or editing.
The process of decoding what’s inside the video
container file varies. To know how to decode a
movie, the player (which is your web browser in
the case of HTML5 video) has to know which
codec the movie was encoded with.
Video File Formats
Each format holds at minimum one video track
and, most likely, one audio track.
When you watch a movie online, your video
player decodes both the audio and video and
sends the information to your screen and
Three Parts to Video
• The file format that holds the video, like .mp4,
.flv, .f4v, .ogv, or .avi
• The video format (aka codec), like H.264,
MPEG‐4, or Theora
• The player that makes it available to your site
visitors, such as the Adobe Flash Plugin, or the
new <video></video> tag.