Using Flash to Enhance Instruction - PowerPoint PPT Presentation

Loading...

PPT – Using Flash to Enhance Instruction PowerPoint presentation | free to download - id: e459-ZjFjO



Loading


The Adobe Flash plugin is needed to view this content

Get the plugin now

View by Category
About This Presentation
Title:

Using Flash to Enhance Instruction

Description:

... Flash Player, and to the Adobe Flash Professional multimedia authoring program. ... The Flash Player, developed and distributed by Adobe Systems (which acquired ... – PowerPoint PPT presentation

Number of Views:184
Avg rating:3.0/5.0
Slides: 42
Provided by: melissa2
Learn more at: http://jan.ucc.nau.edu
Category:

less

Write a Comment
User Comments (0)
Transcript and Presenter's Notes

Title: Using Flash to Enhance Instruction


1
Using Flash to Enhance Instruction
  • What is Flash?
  • How Can Flash be used for Education?
  • Flash Tutorial
  • Credits
  • Group Five (Paul Alley, Melissa Couitt, William
    Jones)
  • ETC 667, Northern Arizona University
  • Spring, 2007

2
What is Flash?
3
Wikipedia Definition
  • Adobe Flash, or simply Flash, refers to both
    the Adobe Flash Player, and to the Adobe Flash
    Professional multimedia authoring program. Adobe
    Flash Professional is used to create content for
    the Adobe Engagement Platform (such as web
    applications, games and movies, and content for
    mobile phones and other embedded devices). The
    Flash Player, developed and distributed by Adobe
    Systems (which acquired Macromedia in 2005 in a
    merger that was finalized in December 2006), is a
    client application available in most common web
    browsers. It features support for vector and
    raster graphics, a scripting language called
    ActionScript and bi-directional streaming of
    audio and video. There are also versions of the
    Flash Player for mobile phones and other non-PC
    devices.
  • (http//en.wikipedia.org/wiki/Adobe_Flash)

4
  • Since its introduction in 1996, Flash
    technology has become a popular method for adding
    animation and interactivity to web pages several
    software products, systems, and devices are able
    to create or display Flash. Flash is commonly
    used to create animation, advertisements, various
    web-page components, to integrate video into web
    pages, and more recently, to develop rich
    Internet applications.
  • (http//en.wikipedia.org/wiki/Adobe_Flash)

5
Generic Definitions
  • Flash is a vector animation (read about vector
    animation software) software, originally designed
    to create animations for display on web pages.
    Vector graphics are ideal for the web because
    they are so lightweight.
  • (http//www.killersites.com/articles/articles_Fla
    shUse.htm)

6
  • Flash player is a plug-in that allows your
    browser to play Flash movies.
  • Web designers love Flash movies because they can
    have moving pictures, games, and interactivity on
    pages that download in a reasonable amount of
    time.
  • A web page built using Flash might have cool
    buttons, or menu bars that change as you make
    choices. It could let you play a game, or do a
    drawing.
  • (http//www.bbc.co.uk/webwise/askbruce/articles/vi
    deo/flash_1.shtml)

7
History of Flash (http//en.wikipedia.org/wiki/Ad
obe_Flash)
  • FutureSplash Animator (Spring 10 April 1996) -
    initial version of Flash with basic editing tools
    and a timeline
  • Flash 1 (November 1996) - a Macromedia re-branded
    version of the FutureSplash Animator
  • Flash 2 (June 1997) - Released with Flash Player
    2, new features included the object library
  • Flash 3 (31 May 1998) - Released with Flash
    Player 3, new features included the movieclip
    element, JavaScript plug-in integration,
    transparency and an external stand alone player
  • Flash 4 (15 June 1999) - Released with Flash
    Player 4, new features included internal
    variables, an input field, advanced Actionscript,
    and streaming MP3
  • Flash 5 (24 August 2000) - Released with Flash
    Player 5, new features included ActionScript 1.0
    (based on ECMAScript, making it very similar to
    JavaScript in syntax), XML support, Smartclips
    (the precursor to components in Flash), HTML text
    formatting added for dynamic text
  • Flash MX (ver 6) (15 March 2002) - Released with
    Flash Player 6, new features included a video
    codec (Sorenson Spark), Unicode, v1 UI
    Components, compression, ActionScript vector
    drawing API
  • Flash MX 2004 (ver 7) (9 September 2003) -
    Released with Flash Player 7, new features
    included Actionscript 2.0 (which enabled an
    object-oriented programming model for Flash),
    behaviors, extensibility layer (JSAPI), alias
    text support, timeline effects
  • Flash MX Professional 2004 (ver 7) (9 September
    2003) - Released with Flash Player 7, new
    features included all Flash MX 2004 features
    plus Screens (forms for non-linear state-based
    development and slides for organizing content in
    a linear slide format like PowerPoint), web
    services integration, video import wizard, Media
    Playback components (which encapsulate a complete
    MP3 and/or FLV player in a component that may be
    placed in a SWF), Data components (DataSet,
    XMLConnector, WebServicesConnector,
    XUpdateResolver, etc) and data binding APIs, the
    Project Panel, v2 UI components, and Transition
    class libraries.
  • Flash Basic 8 (released on 13 September 2005) - A
    less feature-rich version of the Flash authoring
    tool targeted at new users who only want to do
    basic drawing, animation and interactivity.
    Released with Flash Player 8, this version of the
    product has limited support for video and
    advanced graphical and animation effects.
  • Flash Professional 8 (released on 13 September
    2005) - Released with the Flash Player 8, Flash
    Professional 8 added features focused on
    expressiveness, quality, video, and mobile
    authoring. New features included Filters and
    blend modes, easing control for animation,
    enhanced stroke properties (caps and joins),
    object-based drawing mode, run-time bitmap
    caching, FlashType advanced anti-aliasing for
    text, On2 VP6 advanced video codec, support for
    alpha transparency in video, a stand-alone
    encoder and advanced video importer, cue point
    support in FLV files, an advanced video playback
    component, and an interactive mobile device
    emulator.
  • Flash CS3 Professional (Now Released)

8
How can Flash be used for education?
9
How is Flash important as multimedia learning
technology?
Real life images
  • Allows for multimedia rich presentations.
  • These Flash movies can incorporate music, video,
    animation all at the same time.

Incorporating Audio and video is easy.
10
Why use Flash?
Here is a good example. This flash is talking
about how X rays interact with matter. You can
not see this interaction occurring because it is
too small.
As you can see, it is showing a demonstration of
complex ideas.
  • Allows for demonstrations of difficult/tedious
    concepts
  • Interactivity
  • Open ended problem centered assignments

11
Extra benefits of using Flash
  • Strong visual cues/ visual representations of
    abstract concepts
  • Allows for modifying the channel of information
    delivered. (ie. some all audio, some all visual)
  • Student programming in flash shows problem
    solving, logical thinking, creativity
  • It can be used in Professional development to
    help train teachers and run simulations

12
Some good examples of Flash
  • This is a good elementary education Flash website
    on tangrams. It provides some good examples of
    what you can have your students do in Flash.
  • http//www.tygh.co.uk/tan/tan.htm
  • http//www.tygh.co.uk/students/index.html

13
Examples
  • Explore an ancient dynasty house in china.
  • http//www.pem.org/yinyutang

14
Example
  • Examine Frank Lloyd Wrights falling water
  • http//www.mcah.columbia.edu/fallingwater/flash/in
    dex2.htm

15
Example
  • How can we forget one of the best examples.
    Virtual dissection of animals for biology
  • http//www.froguts.com/flash_content/index.html

16
Last example
  • Often times flash animation is used to
    demonstrate concepts that are either too big to
    grasp, or too small to see. This is a perfect
    example
  • It is called Universcale
  • http//www.nikon.co.jp/main/eng/feelnikon/discover
    y/universcale/index_f.htm

This is obviously too large to handle, and
difficult to see
Or this is so small you cannot see it without an
electron microscope
17
How does Flash enhance learning?
  • Great visual strength
  • Students to see the concepts not have to imagine
    them.
  • A Flash animation allows for dissection of
    animals, mixing of chemicals, seeing nuclear
    reactions, or a field trip to Mars, or back in
    time.

18
Interactivity
  • It offers the ability and power of choice to the
    students. The students who are using flash
    animations have the power and ability to choose
    what happens.
  • It can be a safe way to experiment with new and
    interesting subjects. Ie. mixing phosphorous and
    water in chemistry lab is not a good idea, but do
    it in flash and see what happens.
  • For students creating projects in flash, it
    allows them the opportunity to have self directed
    learning on assignments, to show their
    creativity, and demonstrate their knowledge of
    the topic.

19
Flash for individuals with disabilities
  • Flash can do this for accessibility
  • Hearing disabilities
  • Provide synchronized captions for any audio that
    conveys content
  • Photo epilepsy
  • Remove strobing content that flashes between 2
    and 55 times per second
  • Motor disabilities
  • Ensure the Flash content is keyboard accessible
  • Do not require fine motor skills
  • Cognitive disabilities
  • Give users control over time sensitive content
  • Provide easy to use controls and navigation
    schemes
  • Be consistent
  • Use the clearest, simplest language appropriate
    to the content
  • Low vision
  • Provide plenty of contrast
  • Allow the Flash content to scale to a larger size
  • Blindness
  • Ensure screen reader accessibility or provide an
    accessible alternative
  • Ensure keyboard accessibility

20
Flash Tutorial
  • Introduction
  • Topics
  • Flash Environment / Screen Layout
  • Setting up Flash Projects
  • Exporting Flash Movies
  • Additional Resources
  • Conclusion

21
Flash Tutorial Introduction
  • Welcome to Group Fives Flash Tutorial!
  • This tutorial is intended to be a getting
    started guide for people interested in learning
    how to use Flash, or people who are learning for
    the first time that Flash is not a bright burst
    of light used by photographers.
  • Because using Flash is a complex skill (some
    would say art) learned over time, with much
    practice, you will probably not be a Flash expert
    after going through this tutorial. But,
    hopefully youll be a little more familiar with
    how Flash works, and understand how you can get
    started on your journey to becoming a Flash guru!

22
Flash Tutorial Screen Layout
Click on a an area of the Flash screen for
details
Main Menu Bar
Timeline Area
Side Panels
Main Tool Bar
Scene Workspace
Properties Panel
23
Flash Tutorial Screen Layout Main Menu Bar
Next Topic
File Basic application commands (open, save,
print, import, export, etc.) Edit Basic editing
commands (select, copy, paste, etc.) View Zoom
controls and other visual workspace options such
as snapping and guides Insert Options for
placing items in the workspace from the project
library, or other sources Modify Controls for
changing the document, image objects, timelines,
etc. Text Formatting and property options for
text created in the Flash workspace Commands
Controls for running automated commands and
scripts (similar to macros) Control Movie
playback controls and preview options Window
Components in the Flash screen layout which can
be turned on or off Help Tutorials, guides, and
sample Flash sites to help get started or
troubleshoot Flash projects
24
Flash Tutorial Screen Layout Main Toolbar
Next Topic
Previous Topic
The Tools section of Flashs main toolbar
contains several powerful tools for use in
Flashs workspace. The tools which appear to be
arrows are for selecting, scaling, and moving
items within the Flash workspace. There are also
vector pen tools, text tools, shape tools, paint
tools, gradient selectors, an eraser, and a color
eyedropper.
The View section of Flashs main toolbar
provides a way of modifying the users
perspective on the workspace without actually
altering the movie. The View section contains
a hand tool which is an alternate method of
scrolling in the workspace, and zoom tool which
allows the users to zoom in or out on the
workspace.
The Colors section of Flashs main toolbar
provides access to the fill and stroke color
palettes, and also allows the user to switch
between foreground and background colors.
The Options section of Flashs main toolbar has
shortcuts for workspace snapping and vector pen
point/curve options.
25
Flash Tutorial Screen Layout Timeline/Scene
Selector
Next Topic
Previous Topic
Click on any area highlighted in red to see
details below
26
Flash Tutorial Screen Layout Timeline/Scene
Selector
Next Topic
Previous Topic
Click on any area highlighted in red to see
details below
  • Project and Scene Selector
  • Flash can have multiple projects open at one
    time, just like MS Word can have multiple Word
    documents open concurrently. The tabs labeled
    untitled are the two projects currently open.
  • Flash projects typically consist of multiple
    scenes which can be selected here. It is not
    uncommon for a single Flash project to have
    dozens of scenes.

27
Flash Tutorial Screen Layout Timeline/Scene
Selector
Next Topic
Previous Topic
Click on any area highlighted in red to see
details below
  • Edit Scene Shortcut
  • Provides a shortcut to the Edit mode for the
    selected scene.

28
Flash Tutorial Screen Layout Timeline/Scene
Selector
Next Topic
Previous Topic
Click on any area highlighted in red to see
details below
  • Edit Symbols Shortcut
  • Provides a shortcut to the Edit mode for the
    selected symbol.

29
Flash Tutorial Screen Layout Timeline/Scene
Selector
Next Topic
Previous Topic
Click on any area highlighted in red to see
details below
  • Zoom View Control
  • Provides dropdown menu access to the workspace
    zoom controls.

30
Flash Tutorial Screen Layout Timeline/Scene
Selector
Next Topic
Previous Topic
Click on any area highlighted in red to see
details below
  • Layer Palette
  • Provides a list of layers in the current scene.
    Scenes are typically separated into individual
    layers, each with their own attributes and
    timeline controls.

31
Flash Tutorial Screen Layout Timeline/Scene
Selector
Next Topic
Previous Topic
Click on any area highlighted in red to see
details below
  • Timeline Palette
  • Displays timelines for each layer in the current
    scene. This scene only has one layer, so there
    is only one timeline visible. The interactivity
    and animation in Flash is embedded in logic
    (Flash Action Script to be precise) which
    corresponds to these timelines.

32
Flash Tutorial Screen Layout Timeline/Scene
Selector
Next Topic
Previous Topic
Click on any area highlighted in red to see
details below
  • Onion Skin Controls
  • The term onion skin refers to the process of
    scrolling and searching through the Flash project
    (or any other timeline-based project), to preview
    and locate specific points in the Flash movie.

33
Flash Tutorial Screen Layout Timeline/Scene
Selector
Next Topic
Previous Topic
Click on any area highlighted in red to see
details below
  • Frame Rate Information
  • Frame-rate refers to the number of frames
    displayed per unit of time (usually frames per
    second, or fps). Different media have different
    frame-rate requirements. While 12fps may be just
    fine for most Flash animations (.swf), it may not
    be adequate for Flash video (.flv). Television
    typically requires 30fps, and film requires
    24fps. However, the greater the frame-rate, the
    larger the file-size will be.

34
Flash Tutorial Screen Layout Timeline/Scene
Selector
Next Topic
Previous Topic
Click on any area highlighted in red to see
details below
  • Timeline Scrollbar
  • The timeline can become quite long, requiring
    the developer to zoom out on the timeline so more
    frames can be viewed at once. A Flash movie
    which lasts several minutes can become quite
    cumbersome to scroll through unless the user is
    skilled in the use of onion-skinning and timeline
    viewing.

35
Flash Tutorial Screen Layout Scene Workspace
Next Topic
Previous Topic
The scene workspace is the area of the flash
screen in which the developer views and edits the
actual movie or scene. As you can see here, with
all of Flashs tools and palettes, screen space
is a premium. Many Flash developers have two or
monitors so they can dedicate one monitor to the
scene workspace.
36
Flash Tutorial Screen Layout Properties
Panel
Next Topic
Previous Topic
The Properties Panel provides information on
various attributes of the selected object in
Flash. In this case, nothing in the Scene
Workspace is selected so the properties of the
entire Flash movie are displayed. The Properties
panel is common to many Macromedia (now Adobe)
applications such as Dreamweaver, Fireworks, and
Freehand.
37
Flash Tutorial Screen Layout Side Panels
Next Topic
Previous Topic
  • The Side Panels area of Flash contains several
    individual panels which provide additional
    features and functionality beyond what is
    available in the main menu or main toolbar.
    Commonly used side panels include
  • Color Mixer Fine-tuned color selection and
    control
  • Components Commonly used Flash components
  • Behaviors Scripting and other logic
  • Library Multimedia items available for use in
    the current project

38
Flash Tutorial Setting up Flash Projects
Next Topic
Previous Topic
A Flash project, or document, is saved as an .fla
file, and contains all of the media and structure
for the Flash movie. To create a Flash document,
select New from the File menu of Flash. The
New Document dialogue will open where you can
either create a blank project from scratch, or
select from a template. Before development
starts for a movie or application, the frame rate
and movie size must be configured through the
document properties panel. Failing to do this
up-front will have dire and time consuming
consequences for your development
39
Flash Tutorial Exporting Flash Movies
Next Topic
Previous Topic
  • Flash, like many other graphics applications,
    deals with two fundamental types of files
  • Source design files which can only be recognized
    with the full version of Flash (.fla)The source
    files which save entire Flash projects, and all
    individual components, are called .fla files. In
    order to modify the original movie, the developer
    must open the source .fla file in Flash. The
    source .fla file in Flash is analogous to the
    .psd file in Photoshop, which contains multiple
    editable layers, but is not ideal for mass
    consumption.
  • Exported files which can be played through a
    browser (.swf and .flv)The exported files which
    are made available for viewing on the web are
    called .swf files (pronounced swif). Recently,
    Flash also gained the ability to export video in
    the form of .flv files. In order to view the
    exported .swf or .flv file, the end user needs to
    have the free Flash-player plugin installed in
    their browser. These files are flattened,
    meaning they are no longer separated into their
    component parts (scenes, layers, objects, etc.).
    These exported .flv and .swf files are also much
    smaller than the original source .fla file, which
    makes them ideal for downloading over the World
    Wide Web.

40
Flash Tutorial Additional Resources
Conclusion
Previous Topic
Adobe Macromedia Flash Support Center
http//www.adobe.com/support/flash/tutorial_index.
html Kirupa Flash Tutorialshttp//www.kirupa.c
om/developer/flash/index.htm W3C Flash
Tutorialhttp//www.w3schools.com/flash/default.a
sp Flash Kit Tutorialshttp//www.flashkit.com/
tutorials/ Tutorialized.com Flast
Tutorialshttp//www.tutorialized.com/tutorials/Fl
ash/1
41
Flash Tutorial Conclusion
Previous Topic
This concludes the Tutorial portion of Group
Fives Flash Animation presentation. We hope
youve come away from this tutorial with a basic
understanding of Flash software, and how Flash
can be used to develop interactive, animated
applications. While youre probably not a Flash
expert after having gone through this tutorial,
you should now have a good idea of whether or not
Flash is an appropriate application for your
learning goals, and if Flash is something that
you would like to learn more about.
About PowerShow.com