Web Multimedia

1
Web Multimedia

• Graphics/Animation
• Flash

2
Graphics and Animation

• Using MacroMedia Fireworks and Flash

3
Graphics - MacroMedia Fireworks

• Fireworks is in the same domain as PhotoShop
• Ideal for creating web-graphics
• Includes a diverse set of editing tools
• Has both bitmap and vector editing capabilities
• For export allows you to try out various
  optimisations
• - Can export in a variety of
• formats,
• e.g. JPEG and GIFs etc.
• Many third party extras are
• available to plug into the software
• Heavily compatible with aspects
• of PhotoShop

4
(No Transcript)
5
Graphics (mainly photographs)

• What do we want to do in relation to photographs?
  
• - The basics are straightforward, we want
  to import, either
• via scanner, digital camera or off
  CD-ROM library to get
• into an image resource program
• Then once in the resource program
• - In general improve pictures
• - Create background artwork
• - Remove imperfections and
• scratches (retouching)
• - Adapt an existing image
• (e.g. add emphasis,
• correct red eye etc.)
• - Or, totally fake aspects of a photograph

6
Graphics

• By default the software works on a metaphor of
  layers for artwork manipulation and protection
• - Layers easily go in the hundreds on
  advanced images

7
Layers

• The highest layer is displayed as the top layer
  on the screen
• New layers can be added to the application to
  hold artwork that may be required separately

8
Typical transformations

• Geometric transformation translation, rotation,
  mirroring etc. of the image
• Visual transformation manipulation of parts of
  the image (edits)
• Intensity transformation edit differences in
  colour and shading etc. (e.g. edges of shapes)
• Chromatic transformation manipulation of
  brightness, hue, saturation or complex
  manipulation of colour, like colour mapping etc.
• Optical transformation
• depth, sharpness,
• perspective etc.
• (readability of image)

9
Creating animation

• What types of animation are available to us?
• Frames, Tweens and Morphs
• Frames
• - Either original or photograph based
  animations
• - Draw out complete animation frames, or
  elements
• - Paste the images along a timeline to get
  the
• animation sequence
• - Then run
• against time

Frame 1 Frame 2
Frame 3
10
Creating animation

• Tweens - Animating simple solid objects - e.g. a
  bouncing ball or a flying saucer
• - Motion rather than movement
• Straight and curved paths - The object moves in a
  path across the screen (good example 1970s Mr
  Benn)
• Morphs - Takes two images and in-betweens the
  transformation from one to the next

11
Animation - MacroMedia Flash

• Flash is an animation creation tool
• - Currently the market leader, due to
  flexibility and
• quick learning of the software
• Designs low bandwidth animations (typically a few
  k)
• Can be for desktop presentation, or via the web
• Apart from pure automated animation, it can
  create small web applications with interaction
• Easily integrated into an application such as
  DreamWeaver
• Can be viewed via a Flash player
• - Market research has identified 98 of the
  computing
• population can view MacroMedia Flash
  presentations

12
Animation - MacroMedia Flash

• Capable of handling dynamic media (video,
  animation sound) and interactivity
• - Still need to watch sizes of media though
• Uses vectors
• - Resolution-independent
• (can resize etc. without
• changing the quality of
• appearance)

13

• Flash allows the user to create interactive
  movies by using a timeline
• Elements in the movie are called symbols in flash
• Symbols are added to a central repository
  (library) and can be added to the movies timeline
• Once the symbols are present at a specific time
  they appear on the stage.
• This represents what your movie looks like at a
  certain time it can also be manipulated and moved
  by using the tools in flash

14
Why is there an uptake of Flash?

• Flash has commercial integration with the
  following partners
• America Online, Netscape, Microsoft, Apple
• - All promoting it as their associated
  standard
• Research has shown
• - 50 of the most visited sites utilise Flash
• - Users spend 50 more time at these sites
• - Site traffic increases 150 on average
• - Development times tend to drop by 6 weeks
• - The market has been opened to the
  non-programmer
• - Costs can be dramatically reduced
• - There is a perceived benefit of having an
  original
• looking web-site compared to competitors

15
How is Flash used?

• The environment
• Stage, Toolbar, Timeline, and Library
• Stage - The area where the animation is created
  and viewed
• Toolbar - The area where tools are selected to
  create aspects of the animation
• - Floating palettes - Associated to
  individual tools
• Timeline - Adds the animation and sequence
  duration information
• Library - Where created Symbols are housed
  (these can be reused as Instances)

16
The environment
17
Flash 99 bad - Nielsen

• Its not all good news
• Main issues
• Makes bad design more likely
• Breaks the webs fundamental
• interaction style
• Consumes resources
• In general destroys usability
• Gratuitous animation - lets make everything move
• Decreases granularity of control, more television
  than interactive media
• Introduction of non-standard interaction controls
  (e.g. personalised scroll-bars)

18
Flash 99 bad - Nielsen

• Need a plug-in or player
• Does not support standard back button
• Link colours do not work
• Make text bigger/smaller does not work
• Find in page does not work
• Distracts from sites core values
• Updates do not tend to happen
• Flash content is usually superficial
• Normally created by external designers meaning
  actual task aspects are neglected

19
Good Flash

• Use it carefully
• Ideal for a concept animation
• Do not flood your site with usage
• Think if its inclusion actually adds something
  to your site

20
http//www.soc.staffs.ac.uk/flk1/flash/one.html
21
http//www.soc.staffs.ac.uk/flk1/flash/two.html
22

• http//www.lookandfeel.com/index.asp
• http//www.jacobscreek.com/about/advertising_promo
  tions.phtml
• http//www.oggimodfurn.com/
• www.gshock.com
• www.eye4u.com
• http//www.allthingsmustpass.com/
• www.shockwave.com