Here are a few methods that you can use to do this – note that each one relies on a different strategy and has its own pros and cons depending on what you’re trying to secure.

Strategy 1 – JavaScript

• Difficulty:  Very easy!
• Security:  Hardly any!

With this method you simply need to copy and paste some code into the head of an HTML document to handle password protection. The user will be presented with a dialog box that will ask them for a password.  If they type it correctly they will be redirected to another HTML page that contains the “secure” content.

Note that the user could easily break this method by viewing the source of your page.  They could also get around it completely if they know the absolute URL to your protected page.

With that said, this is a good “quick and dirty” solution if you need to prevent casual users from accessing content on a page.

Here’a  tutorial on how to get started:  http://www.javascriptkit.com/script/cut10.shtml

Strategy #2 – PHP

• Difficulty:  Intermediate
• Security:  Pretty good

For this method you need to create a new PHP page on your site that contains some dynamic code that asks the user for a password.  The password is hidden on the server side and is never displayed the user, making it impossible to view if you use the “view source” technique above. With that said, an advanced web user who is “sniffing” your web traffic could see your password attempts when you click the submit button.

Setup is fairly straightforward – you create a new PHP script on the server that defines your password.  If the user supplies it correctly then the PHP page will display some HTML content of your choosing.  You would need to paste all of your content into this one page to make everything work.

Here’s a tutorial on how to get started:  http://www.stevedawson.com/article0014.php

Hope you are having a nice weekend. I will be holding office hours during the following times this week:

1. Monday 5/7 – 2pm to 3pm
2. Wednesday 5/9 – 10am – 11:45am

In addition, we will also spend our class time on Monday 5/7 reviewing for the final exam and going over any issues you may have had while building out your interactive Flash project.

And, as always, feel free to drop me a line if you have any question.  Thanks!

Flash

- What is it?
- What can you create with Flash?
- Support for different types of media (bitmapped images, vector art, audio, etc)
- Working with Flash assets (building shapes, organizing layers, etc)
- Types of tweens (motion, shape, armature / poses)
- The Flash library
- Types of symbols (MovieClips, Buttons, Graphics)
- Working with the timeline (keyframes, frames, empty keyframes, etc.)
- naming symbol instances

Animated GIFs
- What are they?
- How do they work?
- Limitations of animated GIFs
- GIFs vs. SWFs
- RGB color basics

DreamWeaver
- What is it?
- Code view vs. WYSIWYG view – when to use each
- Setting up a site in Dreamweaver
- The CSS box model
- Internal vs. Eternal styles
- Hyperlinks (text based, image based, image map, absolute vs. relative, etc.)
- Table basics
- Frames basics
- HTML basics (tag pairings, basic structure, etc.)

Audacity
- What is it?
- Working with sound files
- Producing sounds

Podcasting / XML
- What is a podcast?
- What kinds of devices can play a podcast?
- General structure (XML document that links to audio files)

CSS Basics
- What is CSS?
- Syntax of a CSS “rule”
- Placement of CSS rules in a document
- Using CSS rules on multiple pages throughout a site

HTML
- What is HTML?
- HTML Syntax (tag structure, head tag, body tag, etc.)
- Debugging a HTML document

This post is password protected. To view it please enter your password below:

Password:

1. Begin by downloading the Generic Menu template FLA file (Flash CS4 version)
2. Open up this file and test it (Control -> Test Movie). You should see a screen that looks like the following:
3. All of the necessary ActionScript and behaviors have been set up for you in this template. Each item has a unique name, and all code is on Frame #1 on the “Actions” layer. Here’s an overview of each symbol:
   1. button_1 – bottom left, controls the visibility of movie_1
   2. button_2 – middle, controls the visibility of movie_2
   3. button_3 – bottom right, controls the visibility of movie_3
   4. movie_1 – shape tween
   5. movie_2 – motion tween
   6. movie_3 – bone tool / IK Joint Pose

You can easily replace each of the movies and buttons with your own content. Here’s how to get started:

1. Build all of your content in a new Flash movie. Make sure you have a symbol in your library for each item you want to replace. For example, if you want to replace movie_1, movie_2 and movie_3 you will want to create three new Movie Clips. Make sure to name them something different (i.e. mymovie_1, mymovie_2, mymovie_3)
2. Make sure you have both the Generic Menu Template and your Source Movie open a the same time
3. View your source movie and open up the Library panel
4. Highlight the clips you want to use in your menu project. Right click and select “copy”
5. View the generic menu movie and open up the Library panel
6. Right click in the Library and select “paste”
7. On the stage, click on movie_1. Open the Properties panel and click the “Swap” button. Find the movie you want to “swap” in — this will replace the generic movie_1 clip with your own clip.
8. Repeat the process for the other two clips
9. You won’t need to change any ActionScript – Flash will automatically use your new artwork in the menu system
10. Here’s a video that shows this process in action:

• 01-simple_menu.fla – A simple 2 button menu that toggles the visibility of two different movie clips
• 02-simple_menu_audio.fla – An extension of the simple menu that incorporates an audio “soundtrack” into one of the movie clips
• 03-simple_menu_audiobuttons.fla – An extension of the simple menu that plays audio when the user “rolls over” the navigation buttons
• 04-drag_drop.fla – A simple demo on how to let users drag and drop items around on the screen

Shape Tweens

• A shape tween is used to move simple shapes around the stage
• Shape tweens can “morph” a shape from one form to another
• Shape tweens must begin and end with a keyframe
• Here’s how to construct a new shape tween:
  • Create a new Flash ActionScript 3.0 file (FLA)
  • Add a new layer to your timeline (Insert -> Timeline -> Layer)
  • Click on this layer inside the first frame
  • Draw a simple shape (rectangle, oval, etc)
  • Click somewhere further on in the timeline (i.e. frame 50)
  • Insert a keyframe (Insert -> Timeline -> Keyframe)
  • Modify the shape in some way in this frame (move it somewhere else, replace it with a new shape, recolor it, etc)
  • Click somewhere in-between these two keyframes on your timeline and click on Insert -> Shape Tween
  • Play your moving using Control -> Play
  • You can adjust either of the keyframes to change how the animation unfolds — you can also add new keyframes anywhere within the shape tween to “break up” the animation into another segment

Motion Tweens

• A motion tween is used to move “complex” objects around the screen
• In order to be moved using a motion tween the object in question MUST be in the Library of your FLA
• Motion tweens must begin with a keyframe — you will be able to add in additional keyframes to your animation after you have set things up
• Here’s how to get started with creating a motion tween:
  • Create a new Flash ActionScript 3.0 file (FLA)
  • Add a new layer to your timeline (Insert -> Timeline -> Layer)
  • Click on this layer inside the first frame
  • Next we need to import an image into the library of your movie. You can do this by clicking on File -> Import -> Import to Library
  • Open up your library panel – you will see that two symbols will show up. One will be called the name of your file (i.e. myimage.jpg) and the other will be called ‘Symbol 1′ or something simliar. Right-click on the Symbol 1 item and rename it something more meaningful.
  • Drag a copy of this new symbol onto the stage
  • Next, you need to define how long your animation should last. Click somewhere on the timeline (i.e. frame 50) and insert a frame (Insert -> Timeline -> Frame)
  • Click somewhere in the newly extended frame bar for this layer and click on Insert -> Motion Tween — the frame bar should turn blue
  • You can now move your object anywhere you’d like at any frame within this blue bar — Flash will automatically “tween” your item to that position. You can also change other properties on your item, such as its rotation, size and opacity / transparency.

Library Symbols

In the previous example (Motion Tweens) we imported graphics directly into your Library. You can also create new library symbols that incorporate both imported and hand-drawn objects. Here’s how to get started:

• Click Insert -> New Symbol
• Type in a name for your symbol, select ‘MovieClip’ as the symbol type and then click OK
• You will notice that you are in “edit” mode for this symbol because the name of the symbol appears next to the ‘Scene 1′ hyperlink at the top left side of the screen.
• You can now draw your own objects and add in shape tweens on the timeline for this symbol. This timeline is separate from the “main” timeline and allows you to create “movies inside of movies” in Flash.
• You can also import graphics from outside Flash by clicking on File -> Import -> Import to Stage
• When you are finished you can click on the ‘Scene 1′ hyperlink to return to your main movie. You can then drag copies of your newly created symbol onto the stage and animate it using a Motion Tween.

The Bone Tool

• The Bone tool lets you set up “bones” and “joints” within your shapes and movie clips. Once established, these structures let you “bend” your objects in ways that can’t easily be done using a simple shape or motion tween
• Here’s a great video tutorial to get you started!

The most common type of basic animation is the animated GIF file. Some examples can be seen below:

The advantage to using animated graphics like the ones above is easily seen – they are mildly engaging and easily inserted into existing web sites in the form of an image file. However, animated graphics by nature are much larger than their “static” cousins. This occurs because you are effectively adding an additional graphic (or frame) for each bit of motion you wish to simulate. Animated graphics do not allow for any interactivity, nor do they allow you to incorporate any additional media capabilities, including an audio track.

What is Flash?

The current state of the web imposes a stringent set of limitations on potential applications, none the least of which is bandwidth. It takes time to transmit information across the Internet, so the larger the amount of information, the longer it will take to transmit.

Flash came into being to attempt to fill the long vacant niche of web based animation. Traditional computer generated animation came along with the price tag of huge file sizes, mainly due to the fact that they stored graphical information as a series of bitmaps. For every individual pixel, one or more bits had to be allocated to store a color value. Flash stores information as a set of vectors, or mathematical equations. This allows a significant reduction in the amount of space needed to store a graphical object. Consider the following example:

The graphic above is a bitmapped circle. The computer must store a set color values for each discrete point on, around, and inside the circle. When the circle expands in size, so do the points, and thus quality is lost.

The computer must allocate a 15×15 grid of pixels to store the circle. That’s 225 individual pixels. If we were using 8 bit color (256 colors), we need exactly 1,800 bytes to store the image above.

A vector based rendition of this circle would contain the following:

4 = x2 + y2 , 0000FF

All we need to do is to store the mathematical equation for a circle and the color value of the object. This equates to a significant reduction in the amount of space needed to store the circle. And, as an added bonus, vector based images are fully scalable. As you increase their size, their edges do not get “pixilated” due to the enlarging on individual pixels. The mathematical equation simply gets recalculated using higher values to generate the same smooth curve.

The other feature that makes Flash so suitable for web delivery is that it also has a built in ability to create “streaming” animations. A Flash movie will begin playing before the entire file has downloaded. The remaining portion of the movie will download in the background automatically, thus freeing the end user from a lengthy download.

Anatomy of Flash

Go ahead and open up Flash. The Flash application interface is similar to that of Photo Shop. Along the left side of the screen you’ll see a series of drawing tools, and to the right you will see an a white box which is called the ’stage.’ At the bottom of the screen you will see the ‘Properties’ panel for editing specific aspects of a selected object and at the right you will see a space for docking specialized editing panels. So far, so good. The main difference between the Flash interface and that of a 2D image editing program is the ‘Timeline’ that runs along the top of the screen. The timeline allows you to define changes in your images over time and thus gives you the ability to create scenes that animate.

The Timeline

The timeline is arguably one of the most important areas of the Flash interface. All visible graphics, animations, sound and video objects must appear on the timeline in order for the end user to see and / or interact with them (with the exception of graphics generated via ActionScript, but we’ll get to that in a bit!) The small rectangular boxes that extend out from the left side of the interface are called “frame” markers. Frame markers are numbered along the top of the screen for reference purposes – you will be referring to them quite often when designing animation sequences. These numbers represent time – the larger the number, the farther away the frame marker is from the beginning of the movie.

In general Flash movies run at 24 frames per second (FPS.) You can change this value by clicking on the stage and setting a new number in the ‘Frame rate’ box in the Properties panel. Under this system you can divide the total number of frames you are using by 12 to determine how long in seconds your animation will last. For example, a 36 frame animation will last 3 seconds.

We need to create some content on the timeline before we can start animating in Flash. Content can be drawn from within Flash or can be brought in from another source, such as an image, video or sound file. Content must be put into a “keyframe” on the timeline. Keyframes denote that something “new” is happening on the timeline. For example, If you wanted a ball to appear in your animation at frame 5 you could place a keyframe on frame 5 and draw a ball. If you wanted to have the ball exist for 5 frames and then disappear you would create a blank keyframe on frame 10. That way Flash would know that there was a “change” on frame 10 and that the ball was no longer to be displayed. Keyframes become very important in animation as they allow you define the “start” and “end” point of an animation sequence. Keyframes appear as little circles within a frame. If the circle is white it means that the keyframe is blank. If it is shaded it means that there is something in that frame.

You will need to create multiple layers on the timeline if you’d like to have more than one thing happen at the same time. Flash can only support one animation per layer. You can add new layers by using the ‘Insert layer’ icon in the timeline panel. Layers can be renamed and can be organized into folders for easier access.

Animation Techniques

There are two basic animation techniques in Flash – Shape Tweening and Motion Tweening. The easier of the two – Shape Tweening – should be used in the following circumstances:

1. To move simple shapes across the screen
2. To “morph” simple shapes into other simple shapes

Keep in mind that all animation in Flash requires that the animation take place on its own Layer, which is similar to a PhotoShop layer. If you have Flash open you should already have a layer to work with in the Timeline area named ‘Layer 1′. If you need to make more you can always click on INSERT->TIMELINE->LAYER.

Click on the small white box on layer 1 that has a small circle in it. This is Flash’s symbol for a keyframe and it tells Flash that something new exists in this frame of animation. After you’ve clicked here go ahead and use the drawing tools to draw a blue ball on the stage. You can do this by looking for the Rectangle Tool (the 8th icon down in the drawing toolbar), positioning your mouse over tool and holding down the left mouse button. After a second or two a sub-menu will appear – select the oval tool and draw a ball similar to the one below. Selecting a color using the swatches at the bottom of the drawing toolbar will cause the ball to be drawn with the fill color of your choice.

Now we want to move the ball across the stage. To do that we need to first tell Flash how long this animation should take. We measure how long animations last in Flash in terms of how many frames they take to execute. As stated above, the default speed of a Flash movie is 12 frames per second, so let’s have this ball take 2 seconds to move across the stage. Click your mouse inside Frame 24 on Layer 1 and choose INSERT->TIMELINE->KEYFRAME. Your screen will look as follows:

Now we’ve told Flash that there’s something going on in Frame 1 (a ball at the top of the screen) – we’ve also told it that nothing is happening from frame 1 to Frame 24 (as can be seen by the standard gray frames that exist on the timeline). Frame 24 has a keyframe in it, which means that something can change in the animation here. Let’s move the ball now. Make sure that you’ve got Frame 24 selected and move your ball to the bottom right of the screen. Try playing your movie now and see how it works (CONTROL->PLAY MOVIE)

See how choppy this is? In order to make it smoother we have to tell Flash to animation the frames in between the two keyframes. To do that click anywhere in-between those frames on the timeline and choose SHAPE from the TWEEN menu at the bottom of the screen. Playing your movie now will result in the following:

Note that you can change any aspect of the animation by modifying what’s going on in the keyframes. If you wanted to move the ball to the top right instead of the bottom right just move the ball in Frame 24. Playing your movie again will show the change in your animation. If you’d like the animation to take longer you can click and then click-drag the keyframe in frame 24 to a higher frame, thus adding more time in between the two keyfames. Likewise if you’d like to make it shorter you can drag the keyframes closer together.

Shape tweens also allow you to take advantage of Flash’s ability to work with vector based objects and perform what is called a ’shape morphing’ – to see this in action let’s modify your movie a bit. Click into your first frame and select your ball using the black arrow tool. Then delete the ball and replace it with a red square. Running your animation again will result in the following:

Symbols & Motion Tweening

Flash also allows you to move more complex objects across the stage, though if you were to try and move a complex object (one with many shapes, colors, etc) using the Shape Tweening technique you would be presented with a weird image morph effect going on all the time. To allow objects to ’stick together’ we have to group them in some way.

To start, open up a new Flash movie. Then click on INSERT->NEW SYMBOL. We’re going to create a ‘Movie Clip’ symbol of a Snowman, so type ‘Snowman’ into the Name blank. Then click the OK button. You’ll notice that your screen changes slightly to indicate that you are editing a symbol (see below):

The “breadcrumbs” above the timeline indicate that you are currently inside Scene 1 of your movie, editing the ‘Snowman’ symbol. You can get back to Scene 1 by clicking on its name (it acts similarly to a hyperlink.) You can also use the ‘Library’ on the right side of the screen to edit symbols – just double click on symbol to go into “editing” mode.

Okay, so we’re in editing mode for our little Snowman. Go ahead and draw a snowman similar to the one below on the stage:

Click on the ‘Scene 1′ hyperlink to get back to scene 1 of your movie. Click on the keyframe on layer 1 and drag a copy of your Snowman out of the library and onto the stage. Go to frame 24 and create a frame — then right click in the range and select CREATE MOTION Tween. Move the Snowman across the screen on the last frame — this will automatically add in a keyframe to the layer. Your movie should look something like this:

You have some additional options at your disposal for motion tweens that can be defined using the properties panel. For example, if you want the snowman to rotate while moving you can use the ‘Rotate’ drop down to define which direction and number of rotations to apply to the tween. You can also modify the symbol at either keyframe to change how the animation takes place – for example, a popular effect is to “scale” the snowman down to a smaller (or larger) size to simulate the object getting bigger (or smaller) over time. You can also click on the symbol and use the ‘Color’ dropdown to change color aspects – the most popular effect here is to change the Alpha (opacity) of the image to simulate it fading in or out as can be seen below:

Using Sound and Music

Flash makes it easy to include sound and music in your projects. The first step to using audio is to obtain a music file. Flash works best with MP3 files, but you can use other files in a pinch. Keep in mind that adding lots of music to your movies will cause the final file size to increase dramatically. A good place to find audio files is at the Flash Kit Loops Library. This library of audio files are designed to be “looped” over and over to provide a seamless background track for your movie.

Once you have a file downloaded to your machine you can bring it into Flash by clicking on FILE -> IMPORT -> IMPORT TO LIBRARY. The audio file will appear in your library listing and you can use the ‘Play’ button over in the library interface to preview the sound.

Sounds need to go onto the timeline just like everything else in Flash. I like to create an entirely separate layer for sounds. Once you have a layer you can drag the file out onto the stage – it won’t show up as a visual object there, but you’ll know you did it right if the timeline indicates that there is a “waveform” present on the layer. Click on this waveform and look at the properties panel. The ‘Sync’ property allows you to define how the sound will play within your movie. Setting this to ‘Event’ will play the sound as a high quality sound but will not guarantee that the sound will always synchronize with the animation that is happening on other layers. Changing this to ‘Stream’ will force the sound to synchronize with the timeline, though the quality may be slightly less than if you set it to ‘Event.’ For purposes of the Music Video assignment you should use the ‘Stream’ property.

Testing Your Movie

The best way to test your movie is through the CONTROL -> TEST MOVIE command. This command lets you see how your movie will appear once it is “published” (see below). It also removes “housekeeping” items, such as motion guides, and crops the edge of your movie so that you only see objects that are actively on the stage. From this point forward when we will be using this technique in lieu of the CONTROL -> PLAY command.

Publishing Your Movie

When you’re all done you’ll probably want to do something with your movie other than watch it within Flash. Thankfully Flash exports itself into a number of very compatible formats. To export your movie you should first save it and then click on FILE -> PUBLISH SETTINGS. HTML and SWF should be checked – these are the default web compatible formats. You can also export Flash as a Quicktime movie if you’d like to import it into a more comprehensive video editing package, or use the Windows or Mac projector file to create a self executable file that can be played without any special software (SWF files need the free Flash plug in in order to play).

Once you’ve published your file you can link it to your web site fairly easily depending on your preferred web publishing package.  In Dreamweaver you can open up an HTML page and click on Insert -> Media -> SWF and then browse to find your SWF file.  The file will be copied to your site directory and will be embedded onto the current page.

If you’re not using Dreamweaver you can still easily import a Flash SWF onto your page.  For example, popular web-based content management systems (such as WordPress) contain a ‘Insert Embedded Media’ button in their authoring interface. If you selected HTML in the Publish Settings menu you will also be given a “wrapper” document that contains all the HTML code necessary to to put your Flash creation on a website. You can copy and paste this code onto your own site (don’t forget to upload the SWF file as well!) – you could also just upload the HTML file and SWF files to your site and create a link to the HTML file.

* with the widescale adoption of HTML5′s <video> tag it will soon be possible to render video in a browser without any external plugin

** mobile versions of the Flash player exist for the Android operaitong system, but not for Apple’s iOS. Mobile Flash content is best distributed as a stand-alone app, which can be produced by Flash Professional CS5.5

There is an entire course that focuses on PHP design and development, but here are some basic techniques that you can use to get you started:

1. PHP code can only run on pages that have the extension “.php”. You can’t place PHP code on standard HTML pages. To create a new PHP page in Dreamweaver simply click on File -> New -> Blank Page -> PHP
2. Once you create a new PHP page you will notice that it looks almost identical to a standard HTML page in “code” mode. PHP is considered an “add on” language — it lives inside of HTML code and allows you to set up portions of the page that should be generated dynamically.
3. You can set up your page to render PHP code by placing a special set of tags on the page. Here’s an example that picks a random number between 1 and 10 for the user. Every time they visit the page the PHP code inside the special <?php / ?> tags will run and generate a different answer for each user.<strong>I’m going to pick a lucky number for you!</strong>

   <?php

   print rand(1,10);

   ?>

4. PHP requires that your web hosting provider has the PHP language installed on the server. These days most hosting providers come with PHP pre-installed, but you generally should check before you start working on a site.
5. One simple way to use PHP on a website is to set up standard headers & footers. For example, say you had a standard navigation structure that you wanted to display at the bottom of 100 web pages. You could copy and paste the HTML for that onto each page, but making changes to that kind of structure would quickly become unmanageable. PHP allows you to “include” an external file – much like linking an external stylesheet. Here’s how you can get started:
   1. Build a mock-up page that contains the desired HTML element (i.e. build a page that has the standard header / footer on it)
   2. Go into Code view in Dreamweaver and copy the HTML you wish to duplicate across multiple pages
   3. Create a new Text document (File -> New -> Other Text)
   4. Paste in the HTML code
   5. Save it with a meaningful name (i.e. site_footer.txt)
   6. Create a new PHP page (File -> New -> Blank Page -> PHP)
   7. Place the following PHP code where you would like to include the standard footer:<?php

      include (“site_footer.txt”);

      ?>