Adding Pre-loaders and Intro Scenes
to Flash websites
   

Your final, revised Design Portfolio will be due
during the final exam period Monday, May 8th,
at 10:30. a.m. Be thinking about revising the five
websites in your Design Portfolio:

1) Portfolio page, 2) Web genre website, 3) Image website, 4) Flash Banner ad, and 5) Flash website

a). Basic elements of a webpage
b). Elements of a basic Flash Banner Ad
c). Elements of a Basic Flash website
d). Web Design Criteria for Final Design Portfolios 

1.   Web Design Portfolio Site ( due Jan. 30)

2.      Web genre Site (due March 3 )

3.      Image Site (due March 24)

4.      Flash Banner ad (due April 21 )

5. Flash Site (Due May 8th)

1 .Students' Favorite Flash websites

1. Macromedia Flash Gallery
   
   
2. California Soul
   
   
3. Business Power: Flash Showcase
   
   
4. TheNorthFace.com
   
   
5. Drive the Mars Rover
   
   
6. Bacardi.com
   
   
7. PeelPub.com
   
   
8. ByMarkdowntown.com
   
   
9. HomeStarRunner.com
   
   
10. CatieCurtis.com
    
    
11. Macrocosmetics.com
    
    
12. Courvoiser.com
    
    
13. Hennessy Cognac.com
    
    
14. Moet.com
    

2. Waikiki Flash movie Project

1. Visit Waikiki webpage
   
   
2. Creating Waikiki Flash Movie Intro.
   for Waikiki webpage
   
   
3. Hawaiaan Hilton Flash website
   
   
4. See USA Today for simple Flash movie
   
   
5. Use CD of images, movies, and sounds
   
   
6. Flashkit.com
   

2. Interesting Commercial use of Flash

1. 2003 GM Annual Report
   
2. Ralph Lauren
   
3. Colorado.com
   

"Flash is presently, without question, the easiest way for developers to create powerful, emotional, compelling content for the internet. Sound, animation, and interactivity do not have to be limited to beeps, flashes, and buttons. When used effectively Flash sites can inform, educate, and entertain. However, when it is used inappropriately, it can lead to deep frustration and even resentment."

Josh Ulm io Research

3. Requirements for Final Flash website

1. Basic Elements of a Flash Banner Ad
   
   
2. Elements of a Basic Flash Website
   
   
3. Design Criteria for Final Design Portfolios
   

2. Getting a Flash Movie to loop just three times

1. Instructions for getting a movie to loop three
   times
   
2. Flashkit.com tutorial
   
3. loop3times.fla
   
   
4. See simple version of Pre-loader code
   
5. This trick is accomplished with Actionscript
   coding. Copy the actions at frame 1 and at
   the last frame of the movie.
   
6. This is set to loop three times. But you can
   change the number of loops by changing
   some of the code.
   
7. Example of Sewall movie that loops 3 times
   

2. Creating a sliding picture show using Flash

1. See slideshow1.html
   
   
2. See slidewhow2.html
   
   
3. See oar2.html
   
   
4. See slideshow1.fla
   
   
5. You can add or subtract frames
   in this slideshow to slow it down or
   speed it up.
   
   
6. When you make slideshows like this, try
   to make all the pictures the same size
   and make sure they all line up with other.
   
   
7. If the images don't line up with each other,
   your images will jump a litttle as the movie runs.
   

5. Quick Time Movies on the Web

1. Putting QuickTime Movies on the Web
   
   
2. Creating High Quality Content with Windows
   Media Encoder
   
   
3. If you can't run these movies, you need
   to  Download and install QuickTime Player
   
   
4. QuickTime Movie Trailers
   
   
5. Movie Trailers on the Web
   
6. Yahoo.com: Movie Trailers
   

6. Using Dreamweaver to Insert Movies and Sound
files onto a webpage (See class handouts for
information about settings).

1. In Dreamweaver, select "Insert" and select
   "Media" and then select "plug-in."
   
   
2. Remember to set the parameters for your
   movie by clicking the "parameters" and
   then selecting how you want your movie to
   run.
   
   
3. In some cases, you will need to select the
   name of the plug-in that the computer will
   need to run the movie.  For example,
   the plug-in for Quick Time movies is
   "Quick Time".
   
   
4. See the handout for a list of parameters to
   set for running video on a webpage
   
   Autostart=false
   controller=true
   width=180
   height=140
   Loop=false
   pluginspage= "http://www.cnn.com/SHOWBIZ/Movies/
   bat_forever/Batman.mov"
   
   
5. Mission Impossible III Trailer
   
   
   
6. Link to A Scanner Darkly movie trailer
   
   
   
7. Star Wars III Trailer : finding the ".mov" URL in order to link the trailer to your webapge.
   
   -- Actual Star Wars Trailer
   
   
8. Examples of Movie Trailers added to a webpage
   
   1. If you are having trouble following the above
   instructions, go to one of the pages below and
   open up the source code and copy it. Look for where the ".mov" file is and replace it in the
   code with the address to the ".mov" file that
   you want to play. Make sure you enclose this
   address in quotations marks, like this:
   
   "homemovie.mov"
   
   
   2. Matrix Reloaded
   
   
   2. A Scanner Darkly
   
   
   2. Starsky and Hutch
   
   
   3. Alien vs. Predator
   
   
   4. Spider Man 2
   
   
   
9. Look at the source code of any of my trailer
   pages and look at the source code for a movie
   trailer on quicktime to understand what parts
   of the quicktime movie trailer source code I
   needed to copy to have the trailer load in
   my own website.
   
   
10. The secret to this trick is to make sure you copy the URL for the quicktime movie, which should always end with ".mov" and then paste this URL into the code of your own webpage.
    
    
    
11. See wmovies.htm for example of Running Movies
    
    

6. Splash pages

1. Example of basic Splash Page
   
   
2. Basic Splash Page
   
   
3. Splash Demo Page
   
   
4. Redirecting webpages
   
   
5. Splash Pages May Drown your Site
   

4. Adding buttons to Flash Intros to Play
the Flash movie

1. gagner.html
   
   
2. See gagner1.html
   
   
3. See demo1.html
   
   
4. See sewmov.fla (add link)
   

5. Adding Buttons to play scenes in Flash Movies

1. See scenecontrols.html for an example
   
   
2. See scenecontrols.fla for the code for this
   
   
3. on (release) {
   gotoAndPlay("Scene 2", 1);
   
   
4. At the end of each scene you play using a
   button, put an action that returns the Flash
   movie to Scene 1, where the button you
   pushed to plaly this scene is.
   
   gotoAndStop("Scene 1", 1);
   

6. Using Buttons to play movieclips

1. See movieclipconbig.html
   
   
2. See movieclipconbig.fla
   
   
3. Make sure you add a basic stop action
   at the end of each movie clip so that
   the clip will only run once.
   
   
4. Now add the command to play the
   movie clip to the button:
   
   on (release) {
   with ("lionc") {
   play();
   }

   }
   

5. Make sure there are frames available
   to play the movie clip in your larger
   flash movie.
   
   
6. Add action at the end of each movie clip--
   within the movie clip itself, not on the
   flash timeline--so that it only plays once:
   
   gotoAndStop(1);
   
   
7. You can also add a blank keyframe
   in between your movie clips and add
   a stop action, so after playing each
   movie clip once, it will go back
   to the main button menu.

7. Playing movie clips with Mouse-Over activation

1. The easiest way to do this is to make a button to
   activate the movie clip. With a button, you can
   play a movie clip with mouse-over and mouse out.
   
2. Use this code in the botton, using the name of movie-clip instance to target the specific
   movie-clip. In this example, the instance name is "lionc"
   
   on (mouseover) {
   with ("lionc") {
   play();
   }
   on (mouseout) {
   with ("lionc") {
   stop();
   }
   

   }

3. See example of using Mouse-Up and
   Mouse-Down to activate and control a movie clip:
   
   mousemovieclips.html
   
   
4. See mousemovieclips.fla for the code to do this
   
   
5. See buttmovieclip.html
   
   
6. See buttmovieclip.fla
   

8. Adding a Bar Pre-loader

1. Go to FlashKit.com to download tutorial "flas"
   to add to your Flash movies
   
   
2. Bar Pre-loader fla file to download
   
   
3. See example of the Bar Pre-loader fla I used
   in the above example: bpreload.fla
   
   
4. See example of movie with a Pre-loader
   
   
5. See example of Pre-loader fla file.
   
   
6. See simple version of Pre-loader. fla file
   

6. Making your Flash movie open an html file at
the end of the movie

1. At the end of your Flash movie, put
   an action command on its own separate
   layer.
   
   
2. This action command should say this:
   
   getURL("http://www.colorado.edu");
   
   
3. Make sure you use the "get URL" command
   and put the URL in quotation marks.
   
   
4. By the way the URL you have Flash open at
   the end of your Flash movie could be a
   Flash movie itself.
   
   
5. You can use Flash or Dreamweaver to
   create the webpages within this
   website. Just make sure your pages
   are easy to navigate and use.
   
   

• Shockwave.com

• QuickTime--Streaming Audio and Video

• Macromedia Flash Showcase

• FlashAnimation.net

• Thinkmango.com

• Paul Ingram Web Design

1. Edefiant.com
2. Flashkit.com
3. FlashPlanet.com
4. Macromedia Flash Support Center
5. Flash Bible.com