Week Five: July 26-30

tuesday   thursday   TO DO

 

Tuesday, July 27

 

DUE August 1: Assignment 3

Weekly Checklist

 

 

GAMEPLAN

  • Basic web site layout + buttons (not in book)

 

Web site goal

  • We'll look at a basic web site layout build in layers and frames
  • This will illustrate placing info on "pages" and moving from one "page" to another
  • This is a simple Flash layout, not a mega animated showpiece
  • Consider this a possible model for mini movies where your visitor needs to interact to gain information in stages

 

Web site buttons - to frames

  • You can use Actionscript on buttons themselves
  • You can use buttons, with a layer of text on them, and hotspot invisible buttons over those

 

Website layout

  • Like any website, planning is key
  • Know the answers to your 5 core questions - purpose, visitor, tasks, site content needed, project limitations
  • Consider how much information you really need to present
  • Keeping in mind that Flash is for animation, consider your visitor's needs in terms of animation activity on the web site
  • Make sure that you know if the website will need to be expanded for later business growth so you can plan your process carefully.

 

Benefits of Flash web layout

  • Place website header info and linked logo on one layer
  • Place footer info on another layer
  • Place "page" info in frames (and separate layers if you wish)
  • Create 1 button to be reused as needed
  • Total control of design and layout without HTML and CSS rules
  • Can be totally interactive with presentation, slide-show, gallery, and rollover/clickability to the Nth degree
  • Can animate as much of site as needed
  • Video does not require Quicktime or a media player
  • Not dependent on the version of browser for interpretation of code
  • Can build in some meta information for search engine indexing
  • Flash movies are compiled so coding/development is unreadable and protected

 

Drawbacks of Flash web layout

  • Preloading time, since whole Flash site often needs to download before use (it is a program application, after all)
  • Bandwidth issues, even with optimizing
  • Flash Player version on visitor machines
  • Back button usage by visitor doesn't go backwards on Flash site
  • Poor accessibility support for Text Readers (since Flash sites don't have a lot of alt text)
  • Difficult to rank high in web searches due to limits to SEO
  • Often annoying to visitors - all show but little changing content
  • Difficulty grabbing content for later reading
  • Often need to maintain a separate HTML site
  • More labor intensive, skills training, and higher cost to clients
  • Flash "pages" cannot be bookmarked by a web visitor, or reached without visiting the whole compiled site

 

When to use Flash for Web Work

  • Designer/boutique websites - where creativity/art/animation is key
  • Interactive pieces, such as an added game, Flash presentation, Flash gallery, animated banners (use with care)

 

When to not use Flash for Web Work

  • Navigation. Tempting though it is, navigation is a high priority on web sites and cannot be inaccessible to visitors
  • Information-heavy sites, where viewers need to access and copy information
  • For general public visitors, many of whom may not have current Flash Players, or ability to see Flash
  • When you and the client don't have the time or inclination to maintain a separate HTML site
  • Example - I was required to visit a site to get information during a contract at WSF. However, WSF IT had shut off access to Flash sites for security protocol, and I could not view the site, which had no HTML counterpart offered.

 

DEMO

 

MORE INFO

  • For another website layout method, try this Flash Tutorial - it has a FLA file to download.

 

 

BACK TO TOP

 

@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@

 

Thursday, July 29

 

GAMEPLAN

  • Preloader

 

DISCUSSION

 

Preloading

  • Used to provide a 'timer' while a large movie is loading
  • Can preload later frames
  • Can preload other scenes
  • Can use text, animation (like a bar), and Dynamic Text
  • Preloaders are really not useful on short animations or tiny websites. They are used to keep visitor interest while something large is loading.

 

Dynamic Text

  • Use Dynamic Text to display information generated by Actionscript
  • Preloaders use Dynamic Text
  • Used in Flash apps like calculator
  • Used in Games for showing scores, etc.
  • Try Pages 240-243

 

Set up Dynamic Text

  • Start with the Text Tool
  • Create a text box, and fill it with the maximum length of text you'll need
  • Style the text as you wish
  • In Properties, give the text an Instance Name
  • In Properties, change from Static Text to Dynamic Text
  • Then, delete the text inside the Dynamic Text box

 

Preloading a Scene

  • Need a Preloader scene, then the main Movie scene
  • Name each Scene
  • In Preloader scene, set up 2 layers: loader and actions
  • In loader layer, create your preloader animation
  • If you decide to add Dynamic Text for a percentage counter, add a percentage layer.
  • In Actions later, make a Keyframe in frame 1 and add this action to the frame:
    • percent = Math.floor(getBytesLoaded()/getBytesTotal()*100); dynamictextinstanceName.text = percent + " %";
  • In Actions later, make another Keyframe in frame 2 and add this action to the frame:
    • if (percent ==100){gotoAndPlay("moviescenename",1);}else{gotoAndPlay(1);}
  • Action 1 calculates the percent, based on the amount of bytes that are loaded, divided by the amount of total bytes of the file, multiplied by 100 - and tells it to show up in your Dynamic Text (referred to by dynamictextinstanceName).
  • Action 2 simply tells the preloader to continue running until the total Flash movie has fully loaded.

 

Tips

  • Preloaders can be hard to test on small movies, especially locally
  • One thing you can do is extend the background of your short movie or animation by a few hundred frames
  • You can also change the Frames per Second to something longer, like 50 or 60, just for testing purposes.

 

Example: Preloading web site

 

DEMO

 

 

MORE INFO

 

 

BACK TO TOP

 

 

@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@

 

TO DO

 

 
BACK TO TOP