Using Swish

1
(No Transcript)
2
(No Transcript)
3
Using Swish SwishMax
Developing the PoorInstructors Animated
Graphics

• Michael J. Fimian 2006Providence College

4
Contact Info

• Dr. Michael J. Fimian
• MFimian_at_Providence.edu
• Instructional Technology
• Development Program Feinstein 305865-1832

Or ITDS
He coordinates the ITDP
Hes the Instructional Technology Design
Specialist
5
101s Goals

• There are three parts to this workshop
• 101 Swish (Active Graphics) 101
• Intro to Flash-like animations using Swish 2.0
• 201 Swish Web Animations 201
• Flash-like animations using Swish 2.0.
• Banners, rostrum work, moving text.
• Fading Faces Project
• Lab Last Session

6
Swish Introduction

• Swish Introduction
• Welcome to the Workshop

7
Swish Introduction

• Intro to Swish Active Graphics
• Example http//itdp.providence.edu/
• Current standard Flash files
• 98 of machines already have the Flash Player
  installed
• Macromedia Flash MX is difficult to master
• Swish is an easy-to-use alternative
• What well explore in this workshop
• Layering, rotating graphics
• Creating a Page Banner
• Making active buttons
• Adding other graphic elements

8
Swish Introduction

• Crippled versions available on the Internet
• http//www.swishzone.com/
• Actually two products
• Swish 00.00 (no longer distributable)
• SwishMax Since late 2005 (only copy to
  purchase)
• There are even more products that can be
  purchased from this site, including
• Site templates
• Advanced Swish development tools

SwishZone can email you a weekly newsletter, if
you sign up for it!
9
Swish Introduction

• Swish (Full) available on the Internet
• http//www.swishzone.com/
• Works fine, just places small banner as part of
  your background
• Should be sufficient to play with, learn
• Let you decide whether to purchase 49.00
• The banner stays till you order and register the
  full copy.

10
Swish Introduction

• Other Swish products on the Internet
• http//www.swishzone.com/
• website templates
• graphic templates

11
Swish Introduction

• Swish Assistance on the Internet
• http//www.swishzone.com/
• Samples, tutorials, sites, movies

12
Swish Introduction

• Swish Sites on the Internet
• http//www.swishzone.com/

13
Swish Help

• Swish Help, Documentation,and Tutorials

14
Swish Help

• Good documentation comes with Swish is
  supplemented
• online docs
• user groups

15
Swish Tutorials

• Good tutorials also come with Swish, under
  Help.

16
Swish Tutorials

• Weve purchased and included extensive tutorials.
• To review these, follow steps 1, 2, and 3
• Step 1. Install the special reader
• (you might have to press ALT-TAB to see the setup
  screen it may be hiding behind this slide...)
• Need some help? Heres even more assistance, if
  you need it.
• Step 2 Review the Basic Book
• Step 3 Review the Advanced Book

17
Swish Tutorials

• Tutorials are available online as well
• Swish Database Community
• http//www.swish-db.com/
• Lots of samples you can take apart
• SwishZone Tutorials
• The creators of Swish
• http//www.swishzone.com/index.php?areaproductst
  abtutorialsproductv2

18
Examples

• Swish Examples

19
Examples

• Good example of a Flash-rich site
• Ford Motors Centennial Site
• http//www.ford.com/NR/fordcom/centennial/flash/fl
  ashpage.htm
• Flash menus, actively displayed content
• Many of these effects can be mimicked in Swish

20
Examples

• Another example of a Flash-rich site, this one
  much more instructionally oriented
• Two Thumbs Up on this one!
• The Institute of Human Origins, Arizona State
• http//www.BecomingHuman.org
• Flash menus, actively displayed content, good use
  of subtle rostrum work
• Many of these effects can be mimicked in Swish

21
Examples

• Another example of a Flash-rich site
• Ultimate Eye Candy for furniture shoppers
• Great use of a Flash menu across the bottom
• http//www.build-tech.co.uk/

22
Examples

• Nice 3D Brain Site
• Spin your lobes
• Great use of a Flash menu across the bottom
• http//www.pbs.org/wnet/brain/3d/index.html

23
Examples

• Ben Jerrys Oreo Cookie Budget
• Its not just ice cream anymore!
• Whod a thought it from Ice Cream to Activism
• http//ww11.e-tractions.com/truemajority/run/oreo

24
Examples

• SwishPix Example Photography SiteUses a
  stock SwishPix template with some editing!
• Possible replacement for PowerPoint?
• File size is a lot smaller than PowerPoints
• Graphics can be zoomed in on, showing great
  detail.
• http//www.skscott.com/
• Heres an example of a large (50 MB) PowerPoint
  file that was re-done in SwishPix the resulting
  Flash file was about 1.8 MB in size Supports
  audio as well, but no PowerPoint transitions.

25
Examples

• Other Examples of Active Graphics
• Tutorial InfoNugget Earths Timeline
• ITDP Site http//itdp.providence.edu/
• ITDP Site(4/1) http//itdp.providence.edu/index_j
  aws.htm
• Fun Pictures Panoramic Views
• Flash Resume Sample
• Tabbed Template 1 Sample
• Tabbed Template 2 Sample
• Volcano Tutorial Sample

26
Examples

• Other Samples of Active Graphics -- online
• Purchasable Swish buttons
• http//www.freeacademy.com/swishBUTTONS.php
• Purchasable Swish Image Templates
• http//www.freeacademy.com/swishimagedisplaytempla
  tes.php
• Purchasable Web Site templates
• http//www.freeacademy.com/swishtemplates.php

27
Examples

• Other Samples of Active Graphics on this CD
• Web Site 1 Silver Blue
• Web Site 2 Gold with buttons
• Web Site 3 Hang out your sign, Doc
• Web Site 4 Moving banner graphic
• Web Site 5 Description
• Important Point Any of these can be edited for
  instructional purposes DNA 1 2

28
Examples

• Samples of Active Graphics (using Swish) on this
  CD
• Christmas Card (Swish file)
• Background Color Picker (Swish file)
• Menu Counter Title (Swish file)
• Active Menu (Swish file)
• Menu with Scrolling Image (Swish file)

29
Examples

• Samples of Active Graphics (using Flash) on this
  CD
• 3D Models
• Import Models (Automobiles)
• Movement Buttons (Ladybug)
• Movement Pointer
• Advertisements
• Acid Reflux Teed Off
  Termite Swarms!
• Car Rentals Diet Drugs
  Resort Ad
• RealOne Media Online Fitness Weed
  Feed
• Surfin Phonin Tablet PC
  Follicular

30
Examples

• Samples of Active Graphics (using Flash) on this
  CD
• Online Training
• Selecting objects when editing graphics (449)
• Playing Audio Clips
• Small applet with simple controls, timerBird
  songs
• Ambient sound track
• Music Dept page (prototype)
• Video Documentary
• Becoming Human web site www.BecomingHuman.org

31
Examples

• Samples of Active Graphics (using Flash) on this
  CD
• Charts produced from Providence College survey
  data
• Classroom Technology Use (October 2002)
• Classroom Use 1 Classroom Use 2
• Classroom Use 3 Classroom Use --
  Combined
• Classroom Use Planned
• ITDP Hit Rates (on ITDP web site)
• Faculty Needs Assessment (March 2003)
• Faculty comfort with specific programs
• Faculty Rank Order of Use of Programs

32
Examples

• Samples of Active Graphics (using Flash) on this
  CD
• Color Use
• Color PickerColoring Book
• Games
• Find the Pirate
• Handouts
• Collaborative Team Proposal
• Degrees of Webedness

33
Examples

• Samples of Active Graphics (using Flash) on this
  CD
• Kid Stuff
• Japanese Hamsters (Hamtaro)Bear in the Big Blue
  House MenuAnother Hamster -- Howdy
• Stanley Online intro to web site
• Treasure Map with links to the Internet
• One final Hamster PashminaOK, I lied Heres
  the last rodent -- Snoozer

Can you tell Im a parent of small children?
34
Examples

• Samples of Active Graphics (using Flash) on this
  CD
• Logos and Banners
• ITech Header www.InstructionalTech.net
• Myrtle Beach Web Site
• Menu Banner
• Turkeys Take a Stand of Thanksgiving Dinner
• Take a Stand
• Paycheck Calculator
• good interactivity! Functional!

35
Examples

• Samples of Active Graphics (using Flash) on this
  CD
• Presentations
• Joan Bs Temples Presentation
• Original Size 50 MB
• Final Size 5 MB
• International Space station (slideshow)
• Whales (Ms. Danni Hicks)
• What Not to Do with Faculty (mobile AV
  carts)Process of Development (faculty preparing
  materials)
• Prototype Instructional Nugget
• Can be cloned and reused

36
Examples

• Samples of Active Graphics (using Flash) on this
  CD
• Tutorials
• Capitol of Texas
• Excel Training Making a grade book
• Tweening in Flash
• DreamWeaver MX Whats New in the New Version?
• Flash MX Whats New in the New Version?

37
Examples

• Samples of Active Graphics (using Flash) on this
  CD
• Project Samples on this CD
• Welcome to the Workshop Swish file here
• Web Banner Swish file here.
• ITDP Info Pane Swish file here
• Panoramic Views Swish file here
• Providence College Overview
• Providence College Slide Show Swish file here
• Haiku Swish file here
• Fading Faces (slideshow) Swish file here

38
Swish 201

• Swish 201Fading Faces Project

39
201s Workshop Goals

• Continue with Swish Active Graphics
• Layering, rotating graphics
• Adding effects to graphic images
• Timing effects
• Transition effects
• Fading Faces Project
• Sample 1 Eyes not aligned
• Sample 2 Eyes aligned
• Things we can do to these files
• Trim so only eyes appear

40
Get It Online

• A crippled version is available on Internet
• http//www.swishzone.com/
• A copy is included on this CD for your
  convenience
• Works fine, just places small banner as part of
  your background
• Should be sufficient to play with, learn
• Lets you decide whether to purchase 49.00

41
Step 1

• Step 1 Starting at Start on the desktop, open
  Swish 2.0.

42
Step 2

• Step 2 Review the Swish interface if not
  already familiar

43
Step 3

• Step 3 Choose a Project
• Sandwiched Graphics Fading Faces (example)
• Active Buttons
• Creating a Page Banner

44
Step 4

• Step 4 Obtain and resize graphics
• Check their W x H size in Photoshop Elements
• Trim or use canvas adjustments
• Resize height to 500 pixels on all
• Adjust canvas width to 400 pixels

45
Step 5

• Step 5 Review your graphics, criteria used
• Single face
• Looking outward
• Making eye contact

46
Step 6

• Step 6 In Swish 2.0, resize the canvas width
  and height to W 400, H 500

47
Step 7

• Step 7 Import the selected graphics File
  Import

48
Step 8

• Step 8 Review each graphic upon import

49
Step 9

• Step 9 Finish importing all graphics

50
Step 10

• Step 10 Since youre working with lots of
  layers, you may want to Hide all the pictures,
  then Show each to check sizing and placement

Right click on a graphic name, left click to
hide the graphic
Repeat the process to un-hide the graphic, but
choose Show from the menu
51
Step 11

• Step 11 Hide and Show each graphic, moving each
  to overlap the white work area in Swish Some
  resizing may be required

52
Step 12

• Step 12 Repeat this process for each of the
  graphics

53
Step 13

• Step 13 Reorder the images in the layers stack
  to represent the order in which you want to see
  the images appear

54
Step 14

• Step 14 Set all the graphics to Show

55
Step 15

• Step 15 Double-check the order of all graphics
  by left-clicking on the graphic name in the list
  at the lower left watch the graphic change in
  the properties box at the lower right.

56
Step 16

• Step 16 Starting with the top (or first)
  graphic, start adding effects. Right-click on
  the graphic name, click the menu option Effect,
  then Fade In.

57
Step 17

• Step 17 The Fade In Settings dialog box
  appears keep the default settings, click on the
  Close button

58
Step 18

• Step 18 Click the Play button at the top
  center of the screen this will play the
  resulting graphic. Youll notice that it changes
  very fast, fading in in 2/3 of a second (ten
  frames of a 15 fps movie).
• Press the Stop button to stop the animation.

Play
Stop
59
Step 19

• Step 19 To change the length of time, double
  click on the timeline for the selected graphic
  this opens the Fade In Settings dialog. Reset
  the frame number from 10 to 20 click the Close
  button.

60
Step 20

• Step 20 Replay the graphic to see if the fade
  in parameter is sufficient not too fast, not
  too slow. Reset the number of frames as you
  desire

61
Step 21

• Step 21 Dont forget to save that file! This
  version was saved as FACES.SWI in the
  Training_Graphics folder

62
Step 22

• Step 22 Dont forget that we want the first
  graphic to Fade Out before the second graphic
  fades in, so well need to repeat the process on
  the first graphic, but with the Fade Out option
  selected.

63
Step 23

• Step 23 When the Fade Out Settings dialog
  appears, reset your time to your desired fps
  make sure the Continue from previous effect
  check box is checked. Click the Close button.

64
Step 24

• Step 24 Play the Fade In / Fade Out for the
  first graphic reset fps speed if desired.

65
Step 25

• Step 25 Reset the Fade In/Out speeds for the
  next graphic right click on the graphic name,
  choose Effect, the click Fade In/Out from the
  final menu. Move the effects bar on the timeline
  to alter the effect.

66
Step 26

• Step 26 As we add more effects, you may make a
  mistake and want to delete an effect. If so,
  right click on the effect on the timeline, choose
  Delete Effect from among the menu options, and
  its gone!

67
Step 27

• Step 27 When you play your animation, it may be
  moving to slow or too fast. Double-click on the
  effects bar on the timeline and reset the number
  of fps upwards or downwards.

68
Step 28

• Step 28 The original backdrop was white you
  can reset this color to another color (such as
  black). Replay!

69
Step 29

• Step 29 The first picture can be set to fade
  out as the second picture fades in, setting an
  image overlap that can be attractive. Alter the
  effects bars placement on the timeline to alter
  the effect.

70
Step 30

• Step 30. Save your project file! The, choose
  File Export SWF or AVI.

Flash0.9 MB
71
Thanks for Your Time
72
Thanks for Your Time

• The capacity to learn is a gift
• The ability to learn is a skill
• The willingness to learn is a choice

Redec of Ginaz -Dune
73
Workshop Evaluation

• Thanks for taking part in our Active Graphics
  workshop!
• Please provide us with constructive feedback that
  would help us improve future offerings!!!
• Our online workshop evaluation form is at
  http//www.instructionaltech.net/Providence/work
  shop_evaluation.htm

Wow! Time flies when youre having fun!