Tara and Bear are both members of the Flash Catalyst development team at Adobe, and, along with Matthew Cannizzoro, author the FlashCats blog (flashcats.net)

First things first: we think it’s easiest to learn by example. So to introduce you to using Adobe® Flash® Catalyst™CS5, the newest member of the Adobe Creative Suite® family, we’ll quickly, (and we mean very quickly), show you how to create an interactive video gallery without writing any code.

What is Flash Catalyst? It’s the new interaction design tool from Adobe that lets you take your static Illustrator, Photoshop, and Fireworks artwork to expressive projects with interaction, audio, video, and animation.

Let’s start our project in Illustrator CS5. Although Flash Catalyst provides a panel of drawing tools, it’s not meant to trump its co-suite products with their fine-tuned array of advanced drawing tools. As a warning, we’re not super-skilled illustrator users, so no judging our quick illustrator video gallery mockup! In fact, I encourage you to quickly think about how you would like a video gallery to look before reading the rest of this article. And be creative.

Preparing your mockup for use in Flash Catalyst

Here’s a quick screenshot of the mockup we’re going to convert into a video gallery:

We created a simple symbol (the video reel), tweaked the title, and used the built-in Vector Pack Grunge Brushes in Illustrator CS5 to create the painted look for the video frame and the play button.

Tip: Be sure to rasterize any complex brushes before bringing your artwork into Flash Catalyst. Since the artwork will be used on the web ,the artwork can be rasterized at screen resolution (72 dpi). Flash Catalyst interprets artwork into a format called FXG (Flash XML Graphic format), so each one of those paths in a brush stroke is represented as an object in Flash Catalyst, and some of the complex brushes in Illustrator will end up creating an large number of paths. Optimizing your artwork before bringing it into Flash Catalyst will enhance your experience with the product.

Tip: Be a good citizen and name your layers in a logical manner Layer names are preserved on import into Flash Catalyst. The better job you do naming and breaking content into layers, the easier, and quicker, you’ll be able to work.

To bring your artwork into Flash Catalyst, from the Welcome Screen, under Create New Project from Design File, select the appropriate link depending upon where your artwork originated.

For this example, we’ll select From Adobe Illustrator AI File… This lets us load our artwork into Flash Catalyst, then dig right into converting each piece to an appropriate video gallery component. Our video gallery will consist of a main player, a thumbnail gallery of optional videos to play, and our custom play button.

Lets go ahead and start by converting our row of gray rectangle  — which are really just thumbnail placeholders  — into a gallery thumbnail list.

Creating your thumbnail list

To create the thumbnail list:

Using the Select tool, select the group of rectangles in the bottom section of the Illustrator comp.

We’ll then convert this group into a list component that repeats an item as a template, rather than a group of individual rectangles.

From the Flash Catalyst HUD (Heads-Up Display), select Convert Artwork to Component > Choose Component > Data List.

Next, double click on the newly created Data List to enter Edit-In Place mode.

Edit-In-Place lets you edit the data list in isolation, without affecting any of your other artwork or components. When we created the mockup in Illustrator we grouped all the rectangles to keep track of them. We will now ungroup them. Select the group, then from the Flash Catalyst Main Menu, choose Modify > Ungroup.

We now have nine individual rectangles where before we had a single group.

Next we’ll mark one of the rectangles as the “template” to repeat for each item in the list.

From the Main Menu select Edit > Deselect All. Next, select the leftmost rectangle, and from the HUD, choose Convert to Data List Part > Choose Part > Repeated Item (required).

Flash Catalyst converts the selected item into the repeated item part.

However, there are a couple of items to adjust here. The first is that we need a horizontal list of items, rather than the default vertical. list The second is that all the old rectangle placeholders are still in the project. But one thing at a time.

In the Properties panel in the lower right corner of Flash Catalyst workspace, choose Layout. This is where we can control how the Data List lays out its repeating items.

Select Horizontal, and adjust the spacing until your repeating items have the same spacing as the rectangle placeholders. The spacing that worked best for us was 11-12 pixels. Note that the default number of items for a Data List is five, so be aware that you want to line up the Data List to just the first five of the nine rectangles. You’ll also want to adjust the blue bounding box to snugly fit it to the area where your thumbnails will display.

To make this Repeated Item the same in all states of the Data List, from the HUD, select Make Same in All Other States.

Next we’ll clean up those pesky rectangle placeholders. From the Layers panel, highlight them (there should only be eight, since we converted one of them to our template item), and select the Delete icon at the lower right corner of the Layers panel to delete them.

Adding Image Thumbnails

What we’ve created so far is a placeholder for each video thumbnail, and we’d like to show a custom image in each thumbnail to identify each video clip.

First, you’ll need thumbnails for each of the clips. Create eight images to represent your movie clips, and make sure each image is roughly the size of the rectangle. Too much larger and you’ll be consuming valuable bytes, too much smaller and the images will look bad when they scale up to fill the rectangle. For this project, the thumbnail rectangles are 47 pixels high by 36 pixels wide. You can see this by selecting a rectangle and viewing the size in the Properties panel.

Import the images by choosing File > Import > Image. The imported images will show up in the Library panel, on the right side of the Flash Catalyst workspace.

While in Edit-In-Place mode, double click on the rectangles to edit the List Item template, which Flash Catalyst calls the Repeated Item.

Drag out one of your thumbnail images from the Library panel, and adjust it to cover and fill the rectangle. The easiest way to do this is to manually set the image’s x, y position and the width and height to match the rectangle’s. This information is available in the Properties panel when the rectangle is selected.

Next, select the image, then right click to choose Share to State > All States. This will make the image visible in the Over and Selected states, which display when mouse hovers over or selects an item in the list. You can see this by looking at the Pages/States panel at the top of the workspace.

With the image selected, from the HUD, select Add Image to Design-Time Data. This will allow you to manually set the image source for each item in the list using the Design Time Data Panel.

Double click outside the image to go back to editing the list.

In the Design-Time Data Panel, you should now see a preview of your image for each item in the list. You may need to select the Design-Time Data tab in the bottom of Flash Catalyst to get the panel to pop up.

We’re starting out with only five items in our list, but we want nine. Select + Add Row at the bottom of the Design-Time Data panel until you have nine thumbnails. Note that the numbering starts from “0,” so although the highest number shown in the image below is 4, we actually have five items.

Now, to select the thumbnail image for an item in the list, click its thumbnail in the Design-Time Data panel. The Select Asset dialog will display all the image assets in your library. Select the one you want, and click OK.

If you repeat this for each item, you should see nine different image thumbnails in your Data List.

We’ve been editing the list or its template item in Edit-In-Place mode this entire time. You can exit Edit-In-Place mode by pressing Escape or clicking the name of the application in the Breadcrumb bar above the artboard. You can also click in the dimmed area on the artboard or choose Modify > Edit Editing to exit Edit-In-Place mode.

Creating your main video player

Let’s now create our main video player. We’d like the user to be able to select a thumbnail, and then play the selected video clip in a larger video player. Also, we’d like our video player to sit behind the brush-stroke border and the Play button, but in front of the black chrome of our gallery.

To place a video player in Flash Catalyst, you first need to import an actual video file. To import a video file, from the Main Menu choose File > Import > Video/Sound File.

Our main video player now appears on the Flash Catalyst artboard. You’ll notice all imported video files appear with what we call the “chrome,” which is the design of scroll bars, window borders and other user interface elements on screen. This video-player chrome includes a border, a play/pause button, volume control, and  a full-screen button.

But for this project, we we don’t want these default video controls to appear. So we’ll need to create our own custom controls, and will use only the video display “part” of the default video player.

To change the appearance of the video player, select the player on the artboard.

From the Properties panel > Video controls:, select None.

The ‘none’ option removes all the default controls, giving us just the video player.

Tip: In case you’re interested in showing the chrome around the video player, here’s the difference between the wireframe and standard options:

“Wireframe” exposes a blue-themed set of controls, resembling a blueprint for mocking up and prototyping applications. If you were doing a quick mockup for a customer in Flash Catalyst, Wireframe is the way to go. “Standard” is the default look and feel used by the video player. It’s a nice, grayscale theme with black icons. You could imagine placing the standard chrome in a final design.

To achieve the layering effect, so the video player sits under (or behind) the brush stroke and play button artwork but above (or on top of) the black gallery frame, we will use the Flash Catalyst Layers panel.

The Layers panel is located in a grouping of panels in the top-right most section of the Flash Catalyst workspace. At first glance, you’ll find it looks similar to and contains much of the same functionality you’re used to in the Layers panel found in Photoshop or Illustrator.

Lets take a look at the Layers panel.

As you can see, our Video Player is the top most item in the list. This means it sits on top of all the other artwork. To get it to sit nicely under the grunge brush border and the Play button, drag the Video Player from the top of the list, so that it sits underneath layer that has the Playbutton image.

In the screenshot below, you can see we’ve successfully added our video player, removed the default controls, and arranged it at the correct layer position in our project.

Now that our main video player and thumbnails are set up, lets add some interaction.

Adding Thumbnail Interactions

We created thumbnails so the user could choose different video clips to play. In order to make this work, we need to add interactions so that clicking on a thumbnail changes the video clip. Interactions encompass all kinds of different behaviors, from mouse events, like clicking and mouse hovering, to behaviors that happen when video clips complete playback.

Select your thumbnail list. We’re going to add an interaction so that whenever a thumbnail is selected, the source property on the Video Player is set to the video clip corresponding to that thumbnail.

From the Interactions panel, choose + Add Interaction. Set up the interaction as follows:

First, choose the event that triggers the interaction. In this case, choose On Select.

Next, choose the response to that event: select Play Action Sequence.

Then select “When a specific item is selected,” which opens the Item dialog.

The Item number is the position of the thumbnail in your list. The leftmost thumbnail is 0, the next leftmost thumbnail is 1, etc.

Entering “0” in the Item dialog will play an action sequence whenever the first item in your Data List is selected. Now we just have to make the action sequence do what we want, which is change the video clip.

First, make sure that the Video Player is selected on the artboard. Next, from the Timelines panel in the lower left of Flash Catalyst workspace, under Action Sequences, select Data List On Select. Then select + Add Action > Set Property.

Now, in the Properties panel, under Common select Source, and select  “Choose source…”

The Select Asset dialog opens, where you can select the source of the video clip to play. For the first thumbnail (item number 0), set the source property to your first video. For the second (item number 1), select the second, and so on. You will need to repeat this set of steps for each thumbnail in the list.

Adding Video Player Interactions

Now we need to add some interactivity to the Video Player. When “Play” is clicked, we want the “Play” component to fade away, the movie clip to play, and then the “Play” component to reappear when the movie clip has finished playing.

To make this happen, we must convert the “Play” image to a Button. Select the Play image on the artboard, and from the HUD, select Convert Artwork to Component > Button.

Later, we’ll define mouse interactions to our new button to play the movie clip.

We also need to create another “Playing” state where the Play button isn’t visible. To do this, click Duplicate State in the States Panel. We’ve renamed the states to “Ready” and “Playing” by double clicking each state and giving it a custom name.

We don’t want the Play button to be visible in the “Playing” state, so select the “Playing” state and delete the Play button. This will only remove it from the currently selected state.

Now to add the interactivity that will make your movie clip play, select the Ready state and select the Play button. In the Interactions panel, click “Add interaction” to create a new Button interaction, and set it up as follows.

When the Play button is clicked, this interaction will cause the application to transition to the “Playing” state, but only if the application is currently in the Ready state.

Transitioning to the “Playing” state should also be the cue for the application to play the Movie clip. To make this happen, select the “Ready > Playing” state transition in the timeline.

We want to add an action to the Video Player, so select the Video Player as well. Choose Add Action > Video Control > Play.

Finally, we need to transition back to the Ready state once the movie clip finishes playing. With the Video Player still selected, in the Interactions panel click Add Interaction, and set it up as follows.

This will bring the application back to the Ready state once the movie clip finishes playing.

Running Your Project

To take your project for a test drive, choose File > Run Project (or Cmd/Ctl + Enter). You can do this often when creating your project to see how it behaves when it’s run. You can also publish a final version of your project by choosing File > Publish to SWF / AIR.

Conclusion

We hope this has given you a good introduction into one of the many things you can do with Flash Catalyst. You can imagine other enhancements that could be added to this video gallery, such as interactive tooltips when a user hovers over the video thumbnails, additional video controls, a full-screen mode, and so on. Try making your own video gallery artwork in Illustrator, Photoshop, or Fireworks, and follow these steps.  Feel free to post comments/questions/suggestions below… we’ll be replying to them!

To take a quick peek at what you’ll be creating, go to www.jwright.info | Download Source Files

Getting Started: Setting up our Project

Open up Adobe Flash CS3 and create a new Flash Project. File–>New–>Flash Project.
Click Ok. Name your project jwright.info.flp.

Tip: I like to create a folder as one central location for all of my files (e.g.
a folder named jwright.info) to keep everything together.

Next, select File–>New–>Flash File (ActionScript 3.0). Click Ok.
It’s a good idea to go ahead and save your project. Let’s do so. File–>Save (or Ctrl+S). Name the new Flash file jwright.info.fla.

Now we can add our Flash file to our project. Right click on the project file and
click Add File… as shown below. If you do not see you Project Panel, open
it up by selecting Window–>Project (or Shift+F8) from the main toolbar.

function goHome():void
{
    gotoAndPlay(20);
}

function leaveHome():void
{
    gotoAndPlay(1);
}

/////////////////////////////////////////////////////////////////////
// Startup.
/////////////////////////////////////////////////////////////////////
stop();
mainMenu_mc.stop();

/////////////////////////////////////////////////////////////////////
// Event Setup.
/////////////////////////////////////////////////////////////////////
mainMenu_mc.profile_btn.addEventListener(MouseEvent.CLICK, navigationClicked);
mainMenu_mc.resume_btn.addEventListener(MouseEvent.CLICK, navigationClicked);
mainMenu_mc.contact_btn.addEventListener(MouseEvent.CLICK, navigationClicked);
mainMenu_mc.portfolio_btn.addEventListener(MouseEvent.CLICK, navigationClicked);
mainMenu_mc.respect_btn.addEventListener(MouseEvent.CLICK, navigationClicked);

/////////////////////////////////////////////////////////////////////
// Event Handlers.
/////////////////////////////////////////////////////////////////////
function navigationClicked(Event:MouseEvent):void
{
}

function navigationClicked(Event:MouseEvent):void
{
    //We'll use this to store the Frame Label's name.
    var frmLabel:String = '';

    //Determine what Frame Label to use based on which
    //button was clicked.
    switch (Event.target)
    {
        case mainMenu_mc.profile_btn :
            frmLabel = "profile_frm";
            break;
        case mainMenu_mc.resume_btn :
            frmLabel = "resume_frm";
            break;
        case mainMenu_mc.contact_btn :
            frmLabel = "contact_frm";
            break;
        case mainMenu_mc.portfolio_btn :
            frmLabel = "portfolio_frm";
            break;
        case mainMenu_mc.respect_btn :
            frmLabel = "respect_frm";
            break;
        case logo_btn :
            frmLabel = frmLabel = "home_frm";
            break;
        case home_btn :
            frmLabel = "home_frm";
            break;
    }
}

/////////////////////////////////////////////////////////////////////
// Helper Functions.
/////////////////////////////////////////////////////////////////////
function getFrame(frameName:String):Number
{
    var frame:Number = 1;

    //Loop through all Frame Labels to find our requested frame.
    for (var i = 0; i < currentLabels.length; i++)
    {
        if (currentLabels[i].name == frameName)
        {
            frame = currentLabels[i].frame;
            break;
        }
    }

    return frame;
}

var frmGoto:Number = this.getFrame(frmLabel);
gotoAndPlay(frmGoto);

function navigationClicked(Event:MouseEvent):void
{
    //We'll use this to store the Frame Label's name.
    var frmLabel:String = '';

    //Determine what Frame Label to use based on which
    //button was clicked.
    switch (Event.target)
    {
        case mainMenu_mc.profile_btn :
            frmLabel = "profile_frm";
            break;
        case mainMenu_mc.resume_btn :
            frmLabel = "resume_frm";
            break;
        case mainMenu_mc.contact_btn :
            frmLabel = "contact_frm";
            break;
        case mainMenu_mc.portfolio_btn :
            frmLabel = "portfolio_frm";
            break;
        case mainMenu_mc.respect_btn :
            frmLabel = "respect_frm";
            break;
        case logo_btn :
            frmLabel = frmLabel = "home_frm";
            break;
        case home_btn :
            frmLabel = "home_frm";
            break;
    }

    //Find the frame number based on our Frame Label.
    var frmGoto:Number = this.getFrame(frmLabel);

    //Go to the requested page.
    gotoAndPlay(frmGoto);
}

stop();

gotoAndPlay(2);

function navigationClicked(Event:MouseEvent):void
{
    //We'll use this to store the Frame Label's name.
    var frmLabel:String = '';

    //Determine what Frame Label to use based on which
    //button was clicked.
    switch (Event.target)
    {
        case mainMenu_mc.profile_btn :
            frmLabel = "profile_frm";
            break;
        case mainMenu_mc.resume_btn :
            frmLabel = "resume_frm";
            break;
        case mainMenu_mc.contact_btn :
            frmLabel = "contact_frm";
            break;
        case mainMenu_mc.portfolio_btn :
            frmLabel = "portfolio_frm";
            break;
        case mainMenu_mc.respect_btn :
            frmLabel = "respect_frm";
            break;
        case logo_btn :
            frmLabel = frmLabel = "home_frm";
            break;
        case home_btn :
            frmLabel = "home_frm";
            break;
    }

    //Find the frame number based on our Frame Label.
    var frmGoto:Number = this.getFrame(frmLabel);

    //Don't do anything if we are already on the requested page.
    if (currentFrame != frmGoto)
    {
        //Go to the requested page.
        gotoAndPlay(frmGoto);
    }
}

logo_btn.addEventListener(MouseEvent.CLICK, navigationClicked);
home_btn.addEventListener(MouseEvent.CLICK, navigationClicked);

case logo_btn :
    frmLabel = "home_frm";
    break;
case home_btn :
    frmLabel = "home_frm";
    break;

//Don't do anything if we are already on the requested page.
if (currentFrame != frmGoto)
{
    //Get and remember the Home page's frame number.
    var frmHome:Number = this.getFrame("home_frm");

    //If our requested page is the Home page, the flying menu
    //needs to go home.
    if(frmGoto == frmHome)
    {
        mainMenu_mc.goHome();
    }
    //Else, if we are on the Home page and are leaving, then
    //leave home.
    else if(currentFrame == frmHome)
    {
        mainMenu_mc.leaveHome();
    }

    //Go to the requested page.
    gotoAndPlay(frmGoto);
}

function getFrameLabel(frame:Number):String
{
    var frmLabel:String = '';

    //Loop through all Frame Labels to find the requested Frame Label.
    for (var i = 0; i < currentLabels.length; i++)
    {
        if (currentLabels[i].frame == frame)
        {
            frmLabel = currentLabels[i].name;
            break;
        }
    }

    return frmLabel;
}

function getSequencedFrame(forward:Boolean):String
{
    //Used to remember the Frame Label of our page.
    var frmSequence:String = '';

    //If we're looking for the next page in sequence...
    if(forward)
    {
        //If our current page is that last page...
        if(currentFrame == this.getFrame("respect_frm"))
        {
            //...then, we need to go Home.
            frmSequence = "home_frm";
        }
        else
        {
            //...else, we just need to go to the next frame.
            frmSequence = this.getFrameLabel((currentFrame + 1));
        }
    }
    //...else, we're looking for the previous page in sequence.
    else
    {
        //If we're on the first page (remember, we skipped our Start page)...
        if(currentFrame == this.getFrame("home_frm") ||
           currentFrame == this.getFrame("start_frm"))
        {
            //...then, we need to go to the last page.
            frmSequence = "respect_frm";
        }
        else
        {
            //...else, we just need to go to the the previous frame.
            frmSequence = this.getFrameLabel((currentFrame - 1));
        }
    }

    return frmSequence;
}

case backward_btn :
    frmLabel = this.getSequencedFrame(false);
    reak;
case forward_btn :
    frmLabel = this.getSequencedFrame(true);
    break;

package utils
{
    //Import the needed packages.
    import fl.transitions.Transition;
    import fl.transitions.TransitionManager;
    import fl.transitions.Fade;
    import fl.transitions.easing.*;
    import flash.display.MovieClip;

    //Fader class definition.
    public class Fader
    {
        //This function will apply a "fade in" effect for any given Movie Clip.
        public static function fadeIn(mc:MovieClip):void
        {
            //Use the TransitionManager to fade in the movie clip.
            TransitionManager.start(mc, {type:Fade, direction:Transition.IN, duration:1, easing:Strong.easeIn});
        }

        //This function will apply a "fade out" effect for any given Movie Clip.
        public static function fadeOut(mc:MovieClip):void
        {
            //Use the TransitionManager to fade in the movie clip.
            TransitionManager.start(mc, {type:Fade, direction:Transition.OUT, duration:1, easing:Strong.easeOut});
        }
    }
}

/////////////////////////////////////////////////////////////////////
// Includes and Imports.
/////////////////////////////////////////////////////////////////////
import utils.Fader;

utils.Fader.fadeIn(logo_mc);
utils.Fader.fadeIn(name_mc);
utils.Fader.fadeIn(ddd_mc);

/////////////////////////////////////////////////////////////////////
// Event Setup.
/////////////////////////////////////////////////////////////////////
whoCap_btn.addEventListener(MouseEvent.CLICK, showPopup);
whatCap_btn.addEventListener(MouseEvent.CLICK, showPopup);
whenCap_btn.addEventListener(MouseEvent.CLICK, showPopup);
whereCap_btn.addEventListener(MouseEvent.CLICK, showPopup);
whyCap_btn.addEventListener(MouseEvent.CLICK, showPopup);
whoPup_mc.close_btn.addEventListener(MouseEvent.CLICK, closePopup);
whatPup_mc.close_btn.addEventListener(MouseEvent.CLICK, closePopup);
whenPup_mc.close_btn.addEventListener(MouseEvent.CLICK, closePopup);
wherePup_mc.close_btn.addEventListener(MouseEvent.CLICK, closePopup);
whyPup_mc.close_btn.addEventListener(MouseEvent.CLICK, closePopup);

/////////////////////////////////////////////////////////////////////
// Variables.
/////////////////////////////////////////////////////////////////////
var currentPup:MovieClip = null;

/////////////////////////////////////////////////////////////////////
// Helper Functions.
/////////////////////////////////////////////////////////////////////
function setCurrentPopup(e:Event):void
{
    //Set the current popup based on which caption was clicked.
    switch(e.target)
    {
        case whoCap_btn:
            currentPopup = whoPopup_mc;
            break;
        case whatCap_btn:
            currentPopup = whatPopup_mc;
            break;
        case whenCap_btn:
            currentPopup = whenPopup_mc;
            break;
        case whereCap_btn:
            currentPopup = wherePopup_mc;
            break;
        case whyCap_btn:
            currentPopup = whyPopup_mc;
            break;
    }
}

/////////////////////////////////////////////////////////////////////
// Includes and Imports.
/////////////////////////////////////////////////////////////////////
import utils.Fader;

/////////////////////////////////////////////////////////////////////
// Event Handlers.
/////////////////////////////////////////////////////////////////////
function closePopup(Event:MouseEvent):void
{
	//If the current popup has been set, fade it out.
    if(this.currentPopup != null)    utils.Fader.fadeOut(currentPopup);
}

function showPopup(Event:MouseEvent):void
{
    //Set the current popup.
    this.setCurrentPopup(Event);

	//If the current popup has been set, fade it in.
    if(this.currentPopup != null)   utils.Fader.fadeIn(currentPopup);
}

/////////////////////////////////////////////////////////////////////
// Startup.
/////////////////////////////////////////////////////////////////////
whoPopup_mc.visible = false;
whatPopup_mc.visible = false;
whenPopup_mc.visible = false;
wherePopup_mc.visible = false;
whyPopup_mc.visible = false;

tabCover_mc.visible = false;

/////////////////////////////////////////////////////////////////////
// Event Handlers.
/////////////////////////////////////////////////////////////////////
function closePopup(Event:MouseEvent):void
{
    //Fade out the tab cover.
    utils.Fader.fadeOut(tabCover_mc);

    //If the current popup has been set, fade it out.
    if(this.currentPopup != null)	utils.Fader.fadeOut(currentPopup);
}

function showPopup(Event:MouseEvent):void
{
    //Set the current popup.
    this.setCurrentPopup(Event);

    //Fade in the tab cover.
    utils.Fader.fadeIn(tabCover_mc);	

    //If the current popup has been set, fade it in.
    if(this.currentPopup != null)	utils.Fader.fadeIn(currentPopup);
}

css_btn.addEventListener(MouseEvent.CLICK, cssClicked);
mlt_btn.addEventListener(MouseEvent.CLICK, mltClicked);

function cssClicked(event:MouseEvent):void
{
    //Create a new URL request.
    var url:URLRequest = new URLRequest("http://www.clixsoftwaresolutions.com/");

    //Open up the URL in a new window.
    navigateToURL(url, "_blank");
}

function mltClicked(event:MouseEvent):void
{
    //Create a new URL request.
    var url:URLRequest = new URLRequest("http://www.mylooptracker.com/");

    //Open up the URL in a new window.
    navigateToURL(url, "_blank");
}

/////////////////////////////////////////////////////////////////////
// Includes and Imports.
/////////////////////////////////////////////////////////////////////
import flash.net.navigateToURL;
import flash.net.URLRequest;

/////////////////////////////////////////////////////////////////////
// Event Setup.
/////////////////////////////////////////////////////////////////////
advanced_btn.addEventListener(MouseEvent.CLICK, gotoSite);
henz_btn.addEventListener(MouseEvent.CLICK, gotoSite);
kalou_btn.addEventListener(MouseEvent.CLICK, gotoSite);
studio_btn.addEventListener(MouseEvent.CLICK, gotoSite);
crystal_btn.addEventListener(MouseEvent.CLICK, gotoSite);
deepBlue_btn.addEventListener(MouseEvent.CLICK, gotoSite);
wolf_btn.addEventListener(MouseEvent.CLICK, gotoSite);
freedom_btn.addEventListener(MouseEvent.CLICK, gotoSite);

/////////////////////////////////////////////////////////////////////
// Event Handlers.
/////////////////////////////////////////////////////////////////////
function gotoSite(Event:MouseEvent):void
{
    var url:URLRequest = null;
    switch (Event.target)
    {
        case advanced_btn :
            url = new URLRequest("http://www.2advanced.com/");
            break;
        case henz_btn :
            url = new URLRequest("http://www.henzstudio.com/");
            break;
        case kalou_btn :
            url = new URLRequest("http://www.kalou.ch/fr/");
            break;
        case studio_btn :
            url = new URLRequest("http://www.studiopiro.com/index2.htm");
            break;
        case crystal_btn :
            url = new URLRequest("http://www.crystalmedia.co.yu/");
            break;
        case deepBlue_btn :
            url = new URLRequest("http://www.deepblue.com/");
            break;
        case wolf_btn :
            url = new URLRequest("http://www.wolfpeak.net/");
            break;
        case freedom_btn :
            url = new URLRequest("http://www.freedomoftheseas.com/");
            break;
    }

    if (url != null)
    {
        navigateToURL(url, "_blank");
    }
}

/////////////////////////////////////////////////////////////////////
// Includes and Imports.
/////////////////////////////////////////////////////////////////////
import fl.transitions.Tween;
import fl.transitions.easing.Regular;

/////////////////////////////////////////////////////////////////////
// Event Setup.
/////////////////////////////////////////////////////////////////////
left_btn.addEventListener(MouseEvent.CLICK, scrollLeft)
right_btn.addEventListener(MouseEvent.CLICK, scrollRight)

/////////////////////////////////////////////////////////////////////
// Event Handlers.
/////////////////////////////////////////////////////////////////////
function scrollLeft(Event:MouseEvent):void
{
    //Shift the MC left 150 units.
    var myTween:Tween = new Tween(thumbs_mc, "x", Regular.easeOut, thumbs_mc.x, (thumbs_mc.x - 150), 1, true);
}

function scrollRight(Event:MouseEvent):void
{
    //Shift the MC right 150 units.
    var myTween:Tween = new Tween(thumbs_mc, "x", Regular.easeOut, thumbs_mc.x, (thumbs_mc.x + 150), 1, true);
}

Download PSD

Download FLA

Result of the flash website tutorial, click to view in flash:

Step1 – Making a Flash Preloader

Open a new flash file.

And give it these settings.

First we are going to make the preloader.
Make a new movie clip. Insert —>> New Symbol (Ctrl+F8)

Now you are in the preloader movie clip.

And make 3 layers with 100 frames. Name the maskT, text and textW.

Make another symbol and call it loading_mc.

In that movie clip type in loading.

Once you have made that movie clip then duplicate it. And call it loading1_mc.

And in that movie clip make the text green.

Now open your preloader_mc and drag the movie clip loading_mc on to the stage.
Make sure that you are in the layer textW.

Don’t forget to center it on the stage.

And in the layer called text you drag the loading1_mc into it. And center
it.

Now in the first frame of the maskT layer we will draw a rectangle. Like
this.

Still in the maskT layer go to frame 100 and right click to convert to key
frame.

Now drag the rectangle on top of the text.

Place your cursor in between frame 1 and 100 from the maskT layer, right click
and add a motion tween.

Now move with the cursor on the layer, right click and select mask.
This will add the layer text under the mask.

Now go back to your scene1 and change the name of the first layer to preloader.

Now drag your preloader_mc onto the stage.

While in the first layer press F9 to open up the actions window. Click on the movie
clip in the stage and the paste this in the window.

onClipEvent (load) {
total = _root.getBytesTotal();
}
onClipEvent (enterFrame) {
loaded = _root.getBytesLoaded();
perc1ent = int(loaded/total*100);
perc1 = “”+perc1ent+”%”;
gotoAndStop(perc1ent);
if (loaded == total) {
_root.gotoAndPlay(2);
}
}

Now click on the layer and go to the actions window and give it this code

stop();

Now make a second layer and convert it to a key frame.(F6) and paste this code.

This code tells flash to check the bytes that are loaded .if it’s loaded then go
to frame3 if not stay in frame 1.

You may think what happened to frame2 . Well you are in it.

if(_root.getBytesLoaded() ==
_root.getBytesTotal()){
gotoAndPlay(3);
}
else{
gotoAndPlay(1);
}

Step 2 – Making the Smooth Page Transitions

Start by importing your PSD to flash, if you do not know how to do this, read our Importing Images in to Adobe Flash Tutorial.

href=”http://www.webdesigndev.com/flash/importing-images-in-to-adobe-flash”>
Now make a new movie clip and name it content_mc. And drag the square
on it.

Now make a second layer in scene1 and call it content.
Click on the third frame and press F6 to make it a key frame.

Now drag your content_mc to the stage and center it horizontal.

Select frame 15 and convert it to a key frame. Now right click between frame
3 and 15 and make a motion tween.

In frame 3 and change its brightness to -100%

lets make the pages first. the content to fill these is up to you. I will show
you how to do those page transitions that so many people want to know.

I will show you a very easy way to do this.

Lets me the pages first . make a new movie clip and call it homePage_mc.

Make a layer for each thing that you add. Will be allotting better if you
want to change some things later on.

I have 2 layers. a layer with bigger text and the some text to fill this page.

Now change some text for the other pages . Since I don’t use this site I will
only change the main text .

So you will see that the pages change. Once you made all the pages we will implant
them into scene1.

So go to scene1 and add 2 new layers , call it pages
and the other 1 actionsMain.
.
First insert frames on frame 140 for the layers content
, pages and actions.
Add a stop(); in the actionsmain on frame
35.

In the pages layer you need to add key frames . So when we link the buttons
that know where to go to.

Add key frame in the following frames : 35 , 45 , 54 , 59 , 69 , 78 , 82 , 92,
101 , 105 , 115 , 124

Now do the same for the actions layer.

It should look like this.

In the pages layer select frame 35 . Now drag your homePage_mc on the stage and
place it like this.

Copy frame 35 and paste in frames 45 and 54.

Now change the alpha of the movie clip homePage_mc to 0%.

Now right click between 35 and 45 and 45 –54 and add a motion tween.
Like this.

Add the other movie clips to the other key frames. After that you have this.

Select your actionsmain layer and in the key frames 45 , 69 , 92 and 115 add a
stop in your action script.
This is to make sure that it doesn’t loop all the time.
stop();
And now label the frames.
35 = home
59 = about
82 = port
105 = contact

Now comes the tricky part. All the AS . you need to get this right or we will
get allot of errors.
All of this will go in the actionsmain layer. . So when the page opens the
buttons are already in pause state.
Code for frame 36
home_mc.gotoAndStop(“pause”);//if you hit this frame then the button
will go to the pause state
over1_btn.enabled= false ; //here you say that when you go over that button
it can’t do anything

frame 60
about_mc.gotoAndStop(“pause”);
over2_btn.enabled= false ;

frame 83
port_mc.gotoAndStop(“pause”);
over3_btn.enabled= false ;

frame 106
contact_mc.gotoAndStop(“pause”);
over4_btn.enabled= false ;

Now we will tell flash were to go when a button is released. And we will give
it a little timeout. If you put in 1000 then that’s 1 second.
So we will give in 500 , that’s a half second.
Code for frame 54
stop();

function moveOn()
{
gotoAndPlay(target);

}
setTimeout(this, “moveOn”, 500);// this will delay the transition
by 1/2 second
over1_btn.enabled= true ; //this will make sure that the button works again

home_mc.gotoAndPlay(“h2″); //and that the button play’s the rest
of the animation

Frame 78
stop();

function moveOn()
{
gotoAndPlay(target); //this is were the flash will go after you clicked a
button

}
setTimeout(this, “moveOn”, 500);
over2_btn.enabled= true ;
about_mc.gotoAndPlay(“h2″);

Frame 101
stop();

function moveOn()
{
gotoAndPlay(target);

}
setTimeout(this, “moveOn”, 500);
over3_btn.enabled= true ;
port_mc.gotoAndPlay(“h2″);

Frame 124
stop();

function moveOn()
{
gotoAndPlay(target);

}
setTimeout(this, “moveOn”, 500);
over4_btn.enabled= true ;
contact_mc.gotoAndPlay(“h2″);

This is
what you should have now.

Step 3 – Enable and Disable Buttons

Again make a new symbol , and name it home_mc. Now make 4 layers. Call them left , right , text and actions.

In the text layer type in home and the select that text and press

F8 to convert it to a movie clip. name this homeText_mc

Now in your movie clip home_mc Add this image. to layers left and right in
the first frame.

Convert it to a movie clip called indi_mc.

And place them on the side of the text.

Add a key frame in frame 7 of the layers left and right.

Go back to the second frame and move the indi_mc away from the text by 15
pox each. 1 to the left the other to the right.

And give them in the first frame 0% alpha. Now copy these 2 frames and paste
them in to frame14.

And give it a between the key frames a motiontween.

Now give frame 8 a key frame in the layers left , right and actions.

In the actions layer give in stop(); in
the first frame , frame 7 and give frame 1 label h1
, frame7 pause and frame 8
style=’color:#00CC00′>h2.

You should have this now.

Now you have to do the same with the other buttons.

When you have that then go to scene1 and add a folder. And call it buttons.

And add 8 layers and place them in that folder.

Now give them the names like below.

Make key frames in these 8 layers . In frame 23.

Now drag the buttons you just made in the right layer. homeB =
style=’color:#00CC00′>home_mc , aboutB = about_mc
, ….

And now drag the swirls into position. Select the each and give them these
names and put them in the right layer.

Give these movie clips instance names. So that flash knows that you mean them
in the action script.

Do this for the other movie clips too. Name them the same as the movie clips.

Now we are going to make a button. Like this.

Drag that button into the layer inviB in scene1.and place it right on top of
the home_mc. Now copy and paste the button 3 more times and place

Them on top of the other 3 movie clips. And name them like below.

Now with those 4 buttons selected put the alpha to 0%.

Make a new layer on top of the rest and call it buttonactions. And give it
this code.

I
n this code you will say what flash needs to do when you go over , or press ,
… a movie clip.

//button home_mc//
over1_btn.onRelease = function(){
play();
target=”home”;
}
over1_btn.onRollOver = function(){
home_mc.gotoAndPlay(“h1″);
}
over1_btn.onRollOut = function(){
home_mc.gotoAndPlay(“h2″);
}
over1_btn.onReleaseOutside = function(){
home_mc.gotoAndStop (“pause”);
}
//button about_mc//
over2_btn.onRelease = function(){
play();
target=”about”;
}
over2_btn.onRollOver = function(){
about_mc.gotoAndPlay(“h1″);
}
over2_btn.onRollOut = function(){
about_mc.gotoAndPlay(“h2″);
}
over2_btn.onPress = function(){
about_mc.gotoAndStop (“pause”);
}

//button port_mc//
over3_btn.onRelease = function(){
play();
target=”port”;
}
over3_btn.onRollOver = function(){
port_mc.gotoAndPlay(“h1″);
}
over3_btn.onRollOut = function(){
port_mc.gotoAndPlay(“h2″);
}
over3_btn.onReleaseOutside = function(){
port_mc.gotoAndStop (“pause”);
}
//button contact_mc//
over4_btn.onRelease = function(){
play();
target=”contact”;
}
over4_btn.onRollOver = function(){
contact_mc.gotoAndPlay(“h1″);
}
over4_btn.onRollOut = function(){
contact_mc.gotoAndPlay(“h2″);
}
over4_btn.onReleaseOutside = function(){
contact_mc.gotoAndStop (“pause”);
}

Let’s make the animation when the buttons enter the screen.

Select the topL_mc and place it right above your screen.And place the
buttomL_mc right under it.

Now add a key frame in frame 33 for those 2 layers .In frame 33 move them on
how they were from the beginning.

Click between frame 23 and 33 and a motiowtween.

Now for the mask. add a key frame in 23 and draw a rectangle that will cover
your buttons.

Make a key frame in 33 and go back to 23 and place it like this.

And add a motiontween.

Now for the last piece . The header/logo. You can use any logo or banner you
want . This is to show you how you can tween with AS.

So take the logo and make it a movie clip.

And call it logo_mc

Make a new layer in scene1. make a key frame in frame 10 and drag Logo_mc
into the stage and place it on the left side.

Take a look on the Y axis.

Select the logo and press F9 to open Up the actions window. And give this code.

The first part will tell the movie clip where to start. and the second 1 will
say where to stop.

onClipEvent (load) {
//here you say where to start
this._y = -170;
}
onClipEvent (enterFrame) {
//this will tell the As on were to stop the animation. the 25 is what speed
you want it to move.
if (this._y<100) {
this._y += 25;
}

}

SO , press Ctrl+enter and you are done.

You should have learned some new but very simple things that you can use to
make your own site. If you feel like this is too much work, you can create a free professional flash website with Wix.

Visit later for more tutorials.

Preview the Splash Page.

Open flash and make a new document . And give in the setting like below.

Canvas width and height , FPS and BG .With the hex # 1B1C1C

If you look on top you will see the main timeline. With only 1 layer in it.

Double click were its says layer1 and give it the name square.

And now if you press Ctrl+F8 then it will open Up the window to create a new
symbol.

And give it the name square_mc and make it a movieclip.

Now you are working in your Movie clip – Select the rectangle tool and use these settings:

Use this hex code #343434 and no stroke color.

Go back to Scene1 and select the square layer, once that is selected go in the time line and press on frame 17.

Right click and select insert keyframe.

On your right side of the screen you see Library. And the movie clip square_mc.

Drag that on your scene, make sure that you are still in the square layer and
in frame 17.

And place your square on the positions x :313,5 and the y :263

Now right click on frame 17 and select Copy Frames. And paste that frame in
frame 22 , frame 23 and 24.

And now go to frame 55 , right click and Select Insert keyframe. you should
have something like below now.

With frame 55 selected press F9 on your keyboard .The actions panel should pop up.

And give in this code :

stop( );

Its a important code so don’t forget it.

Let go back to frame 17 and select the square. Go to properties and go to Alpha
. Give it 19%.

Now you do the same on the other frames. Only with diffrent setting:.

In frame
22 and 24 give in 100% Alpha.

In frame 23 give it a Brightness of 36%.

Now right click in between frame 17 and 22 in your square layer . And select
Motion Tween.

Thats it for the square part.

Press ctrl+F8 again and make a movie clip called dotline_mc. And make a line
with these settings.

Go back to your Scene and make 2 new layers.Name 1 BottumL and the otehr 1
TopL.

Make a keyframe on the third frame of these 2 layers.

Drag the dotline_mc from the library into the timeline of BottumL and topL.

Settings for bottumL are : x 936 y 329

Settings for TopL are : x -320 y 149

Make a keyframe in these both layer on frame 10. And only change these settings.
bottumL and TopL : x 309

now right click between frame 3 and 10 and select Motion Tween . And you should
have like below.

Press Ctrl+F8 again and name the movieclip text_mc.

Once in the clip give in any text you want . And color doesn’t really matter.
PressCtrl+F8 again and name this text1_mc.

This is for the sub text if you want it.

If you are done with those then go back to the scene . And make 3 new layers
. Name them text , mask and the third 1 name it subtext.

Now add a keyframe in your text time line on frome 28 . And do the same for
the mask. Select the text layer on frame 40 and drag your text_mc on to the
scene.

Now center it horizontally and put it right under the bottom dotted line:

Now add a keyframe in frame 33and move the text Up till its just above the
bottum dotline. Right click between frame 28 and 33 and add motion tween.

Next step is making another movieclip. So you know the drill PeePs. Ctrl+F8
and call it mask_mc. In this movie clip make a rectangle with the size 300×60.

Drag this movie clip onto the time line in your mask layer on frame 28. Now go with your cursor the the left and right click and the layer mask.

And place this right on top of your text_mc.

Again make a new movieclip(Ctrl+F8)And call this logo_move_mc. take any logo
you want . i used a white logo for this.

If you don’t know on how to import a picture then CLICK HERE FOR THAT TUTORIAL

Make another movie clip and call this logo_mc. Drag you logo_move_mc into this
MC and add a keyframe in frame 8.And now with you logo selected you can add
a blur filter.

The logo in the first keyframe scall it downtill the width is about 65px. Click
between frame 1 and 8 and add a motion tween.

Now copy frame 8 into the frames 10 until frame 17. Now in frames 10,11,13,15
and 17 we are gonna swap symbols.

And swap it with logo_move_mc.

Select frame 17 , press F9 and give in this code.

stop();

function moveOn()

{

gotoAndPlay(“9″);

}

setTimeout(this, “moveOn”, 4000);

Now in you movie clip logo_mc add a second layer and give it a keyfame on frame
9. With that still selected go to properties and give in the number “9″ in frame label .

Now the As knows where it should start again when it loops. Go back to the Scene1
and aad a new layer and call it logo_mc.make a keyframe frome frame 41 and drag
your logo_mc into the stage.

And place it in the middle of the square. Again new layer and call it invi_btn.
make a new movieclip and call it enter_btn.

Draw a rectangle of 150×165px. color doesn’t matter. in you invi_btn layer make
a keyframe frome frame 53 and drag the button on the stage and place it right
on top of the logo.

Select the button and go to properties and set its alpha to 0% .And press F9
and give this in for actionscript.

on (release) {

getURL(“http://www.your-desing.be/main”, “_self”);

}

Make a new layer and name it subtext and make
a keyframe of frame 43 .Drag the subtext_mc on to the stage and place it right
below the bottom dotted line.

Another keyframe on 53 . Now the subtext on frame 43 give it 0% alpha . Right
click between 43 and 53 and add a motion tween.

And you are done.

Hope you learned something out of this and if you have questions just let us know and you can post your outcomes to.

By the way, if you feel like this is too much work, you can create a free professional flash website with Wix, which can include an awesome splash page!

You now may want to move onto to Learning How to Create a Flash Website

CLICK HERE FOR THE SOURCE FILE.

First open a new document.

If you use Flash CS3 like me then choose Actionscript 2. Like this

.

Click ok and take the settings like below.

Now you can press Ctrl+F8 to make a new symbol. And name it logo_mc.

So now that you are in the movie clip . Go File –>> Import–>> Import to library.

This is what you should have then .

Now drag it on to the stage and now you can start working with the logo because
its in a movie clip.

2. IMPORTING MOVIE CLIPS.

Maybe you can download the same clip that I’m gonna use.

Click here to use the same pic.

Right click on it and save it. In flash you need to make another movie clip and call it ani_mc.

Make sure that you are still in the ani_mc.

In the screen bellow you will see in what you are working.

Go to file and import to stage.

Once flash imported all the images the your time line in the movie clip should look like this.

Now if you want the animation to stop in frame 26 then click on frame 26 and hit F9.

Tour actions window should pop up . And give in the same as in the picture below.

And if you now drag your movie clip onto the stage in Scene1 and hit Ctrl+enter then the clip will play till frame 26.

3. IMPORTING PSD IN FLASH CS3.

This can be a big help if you want to make a site in flash . And its got alot of diffrent parts.

I will you a button for this tutorial just so you see what i mean .

NOTE THIS IS FOR FLASH CS3 ONLY.

Ok, make another file with the settings like below.

And you can use these settings.

Got to file import to Library . And select the PSD file you want
to import.

Then you should see this window.

If you click OK then it will make a folder with all the single images in it.
Like this.

Now if you like how it is then simple make a new movieclip .

And drag this file on the the stage in movieclip psd1_mc.

And then you can align it like this.

now a good tip is to make sure that you have some order in your library .

My library at the end looks like this. It will make verything alot better to
work with.

So thats the end of this tutorial, Hope you learned something out of it. If you want an easy way out, you can always create a free professional flash website with Wix, so that you don’t have to bother with importing images : )

You now may want to Learn How to Create a Flash Website.

1. Open flash click “new flash document”

2. Open the page properties if its not already opened which it should be Window/Properties/Properties

3. Change the background color to black.

4. now you will choose and image you want to add the effect to. To do this you go to File/Import/Import to stage and then you browse for the image you want

5. now with your image on the stage selct it and convert it to a symbol. Press (F8) and name it image

6. On the timeline add a few frames as many as desired. i added 20. the way you do this is you go to the time line and on the frame you want to add you right click and then you click insert frames.

7. Now on frame 10 which is my middle frame press (F6) this will create a keyframe and do the same on the last frame.

8. Now click on the middle keyframe and then go back to your image select it and then go to filters.

9. then click on the plus sign and click on blur.

10. Change the blur X: to 15 and the blur Y: to 15 as well and put the quality high.

11. Now go back to the time line and selct the whole thing then right click and select create motion tween.

To see the final result, click here…

By the way, if you feel like this is too much work, or just want an easy way out, you can always create a free professional flash website with Wix.

1. Open flash click “new flash document”

2. click on the text tool is the one with the letter “A” on it make sure is on static text and type the following “time”, “today”, and “date”

3. Now click on the text tool again but this time make sure is on dynamic text instead of static text and just drag it next to each of the static text. if you dont quite follow look at the picture.

4. After you have made the dynamic text now its time to give each one of the variable names the way you do this first you select the first dynamic box the one that is right next to the word “time” then you go to the properties window and where is says var type the following “nTime”

5. follow that step again for the next two boxes. On dynamic box that says “Today” name that one “displayDay” and on the one that says “Date” name that one “displayDate” remember you have to place the variable on the dynamic box not on the static text.

6.The next step click on the first static box and convert it to a symbol to do this select it and press (F8) make sure movie clip is clicked and name it whatever you want.

7. Now select the other two dynamic boxes and make them both into one symbol. not seperate symbol make sure to make both of them one symbol. and name it whatever you want.

8. Now select the top symbol the one that is by itself then press (F9) this will bring up the actionscrip windo type the following

onClipEvent (enterFrame) {
myTime = new Date();
nSeconds = myTime.getSeconds();
nMinutes = myTime.getMinutes();
nHours = myTime.getHours();
if (nHours>=12) {
ampm = “pm”;
} else {
ampm = “am”;
}
if (nHours>=13) {
nHours = nHours-12;
}
if (length(nMinutes) == 1) {
nMinutes = “0″+nMinutes;
}
if (length(nSeconds) == 1) {
nSeconds = “0″+nSeconds;
}
nTime = nHours+”:”+nMinutes+”:”+nSeconds+” “+ampm;
}

9. Now select the on the other symbol which has both the “today” and “date” and open the actionscript windo again if its not already open and type the following.

onClipEvent (load) {
mon = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sept", "Oct", "Nov", "Dec"];
weekdays = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
}
onClipEvent (enterFrame) {
now = new Date();
nDay = weekdays[now.getDay()];
nMonth = mon[now.getMonth()];
nDate = now.getDate();
nYear = now.getFullYear();
displayDate = nMonth+” “+nDate+”, “+nYear;
displayDay = nDay;
}

10. If you press (Ctrl + Enter) you will see your movie clip working it should be displaying the time, todays date, as well as the date of the month if it does not re read this tutorial carefully and see if you did somethign wrong. here is what mine looks like. dont mind the graphics is just a little something i added is not important. and also dont go away next i will explain the code.

TIME CODE:

onClipEvent (enterFrame) {

This part of the code loops the actions contained within it every time the movie is accessed.

myTime = new Date();

This creates the Date Object that will be used to retrieve the information from your system.

nSeconds = myTime.getSeconds();
nMinutes = myTime.getMinutes();
nHours = myTime.getHours();

This defines the variables for seconds, minutes, and hours, and retrieves the information from your system and incorporates it into the Flash file.

if (hours>=12) {
ampm = “pm”;
} else {
ampm = “am”;
}

This if statement allows for the switch of am for pm when the hour is greater than or equal to 12.

if (hours>=13) {
nHours = nHours-12;
}

Because Flash displays time in the 24 hour system instead of the 12 hour system, this if statement is used to subtract 12 from the hour if the hour is greater than or equal to 13 ( 13 – 12 = 1).

if (length(nMinutes) == 1) {
nHinutes = “0″+nMinutes;
}
if (length(nSeconds) == 1) {
nSeconds = “0″+nSeconds;
}

Both of these if statements are here to add a “0” in front of the seconds and minutes if their length is equal to one, meaning that the variable is less than 10.

nTime = nHours+”:”+nMinutes+”:”+nSeconds+” “+ampm;
}

This displays the time using the dynamic text box named “nTime” that you created.

DATE CODE:

onClipEvent (load){

This performs the actions contained within the brackets only once, when the movie clip is loaded. This is usually used to define variables.

mon = ["Jan","Feb","Mar","Apr","May","Jun","Jul",
"Aug","Oct","Nov","Dec"];

weekdays = ["Sunday","Monday","Tuesday",
"Wednesday","Thursday","Friday","Saturday"];

These are the arrays that are used for the rest of the code. Arrays are zero-based, so when the following code outputs a 0, January will display, 1 = February, etc… You can edit these as necessary.

now = new Date()
}

Again, this creates the Date Object that will be used to retrieve the time information.

onClipEvent (enterFrame){

Again, this loops the animation and performs the actions every time the movie is accessed.

nDay = weekdays[now.getDay()]
nMonth = mon[now.getMonth()]
nDate = now.getDate()
nYear = now.getFullYear()

These are used to retrieve the information. The arrays are contained within brackets “[ ]”.

displayDate = nMonth+” “+nDate+”, “+nYear
displayDay = nDay
}

The last bit of code is used to display the information within the dynamic text fields that were created earlier. Again, there are many ways to use this effect, and many ways to modify the code. This is just the way that I feel most comfortable with, and the way that I feel is easiest.

To view the digital flash clock, click here…

By the way, if you feel like this is too much work, or just want an easy way out, you can always create a free professional flash website with Wix.

1. Open flash click new flash document.

2. Open the page properties if its not already opened which it should be Window/Properties/Properties

3. Change the size of the canvas to 800, 600.

4. Click on the background button and change it to #333333

5. After you have done this click the square tool

6. The color of the square should be white so click on the paint bucket tool and choose the color white. the stroke should also be off.. this is what it looks like. the stroke tool is right intop of the paint bucket.

7.Drag and make a square any size we would change that manually in a moment.

8. now change the width, height, x, and y positioning( change the width to 650, the height to 469.2, the x positioning to 398.1, and the y positioning to 299.3.) to change this dimmensions is all in the page properties. you have to click on the square and with it selected you can start making this changes.

9. with the square still selected now make it into a symbol to do this press (F8) a screen will come up what will ask you to name it. Name it “Background Symbol”. make sure the movie clip button is clicked.

10. make a new layer to do tis click on the insert layer button.

11. Select the new layer and click on the square tool again and make another square with the stroke off and the color instead of white make it black. This time with this dimensions.( width: 632.4, height: 450.4, x positioning: 81.6, and y positioning:73.3)

12. Make the new square into a symbol by pressing (F8) and name it masked symbol.

13. after you have made it into a symbol double click into the square this will take you inside the symbol and a new time line. this is just like the time line you were in but now you are inside of a symbol. make a new layer just like you did it before by clickin on the insert layer button. all the art work is in the bottom layer as of right now you can tell because of the little black dot under and on the top layer there is a white dot. the white dot means there is no art work on this layer.

14. Now clck and hold down on “Layer 1″ and with it still clicked drag it intop of “Layer 2″ . remember that all this is happening inside that symbol we made called “masked symbol”.

15. the picture on top shows what it should look like.

16. Right click on “Layer 1″ and then select “Mask”

17. when you do this both layers are goint to be locked you can tell because now the have a little lock next to them. click on the bottom lock to take it off.

18. Select “Layer 2″ find an image you like and now we are going to place in there. the way you do this is you go File/Import/Import to stage. then a search window is goign to come up and you find where your picture is and double click and it will be placed on the stage.

19. Now lock that layer back up by clicking where the lock was. and you should have something that looks kind of like this.

20. Now go tot the main time line. if you remember we were working inside a symbol so now get out of the symbol and go to the main timeline. a simple way to do this i to click somewhere were there is no artwork outside of the canvas, in the grey area.

21. Now lets make some buttons.Start by making a new layer and drag it all the way down so it becomes the bottom layer.

22. Make a square with the square tool.(background color #666666, width 130, height 50, positioning 137.2, y positioning 553.4).

23. Make this square into a symbol and call it “buttons”

24. select the square and copy and paste in the same place. To do this while with the square selected press (Ctrl + C) this will copy it and the press (Ctrl + Shift + V) and this will copy it in the same place now with it still selct it change the x positioning ( x positioning 269.9 )

25. Follow step 24 three more times but each time with a diffrent x positioning. (x positioning 398.8), (x positioning 529.6), (x positioning 660.5) it should look something like this.

26. Add some text to the buttons click on the text tool. is the one witht the letter “A” right intop of the square tool.

27. change the text color just like if you were changing the background color on a square. After click intop of one of the buttons and type “Home” , then click intop of the second button and type “portfolio”, on the third button type ” About” on the fourth type “FAQ” and on the last button type “ontact”

29. Make a new layer intop of the buttons layer to do this select the buttons layer and then click insert layer and it will put a layer intop of it.

30. here we are going to to create a hit areao for the buttons so you can actually click on them. click on the square tool again and create a square with the color white make this square about the same size of the buttons

31. make this square into a symbol but this time instead of making it a movie clip click on the button selection.

32. double click inside this symbol and it will look a little diffrent than a movie clip symbol. i tsays “Up”, “Over”, “Down”, and “Hit”.

33. there is a littel black dot under the text “Up” right click it and dont leg go and just drag it to where is says hit and now the little black dot should be under the text that says “Hit”

34. Go back to the main timeline. and the box should look blue

35. copy and paste it 4 times and drag each one under on button until all of them have one.

36. Now create a layer at the very top click on the square tool and take the stroke off and the bacgound color black have this settings (width: 304.8, height: 429.1, x positioning: 551.5, and y positioning: 297.0)

36. Now select the square and do the following go to the top menu and click on Modify/Shape/Soften fill edges

37. a new screen is goingt come up which si going to ask you “distance” , and “number of steps in both of this put 20 and make sure expand is clicked.

38. The next step is important so pay close attention. if you look where all the layers are to the right there are a bunch of numbers what you need to do is on the number 30 at the top click and drag down to select all the layers and the right click and click insert frame.

39. Create two more layers at the very top.

40. on the very top on the teh time line whre the number 5 is press it dont drag this time and press (F6) do that a the number 10,15, and 20

41. now on the little sircle on the number one frame select it and press (F9) this will bring up the actionscript window. here type the following “stop();”

42.as you can tell now intop of that littel circle there is a letter “a” this means that there is actionscrip on that frame. now do the same on layer 5,10,15, and 20.

43. Ok now press (F6) again on the layers5,10,15, and 20 but this time on the layer right under.

44. we are going to do something a little diffrent this time we are going to name the little sircles instead of inserting actionscript. do this click on the first frame on the circle with nothing on it and then go to the bottom left corner and there is something that says frame there enter the following “home”.

45. Now name all the other little circles this shouuld be the names ( portfolio, about, faq, and contact).

46. ok now on the layer under what you need to do is to Press (F6) also on frames 5,10,15,and 20. after this you will have a litte black dot on each one of those.

47. on the frist frame where the black square was type whatever you want

48. Now type something diffrently on frames 5,10,15 and 20.

49. after you have typed everything you wanted on the diffrent squares now its time to make it all work. what you need to do is to click on the blue square ontop of the “home button” dont double click it just select it. afte you have it selected press (F9) this will bring up the the actionscript window type the following

on(press){

gotoAndStop(“home”);

}

this will make it that when you click on that button it will go to the frame that you named home. follow the same steps on every blue box but where the parentises are intead of having home type in the appropiate name. such as( portfolio, about, faq, and contact.

50. Now you have finished this simple but very nice looking flash site. save your work. and to see it at work press (Ctrl + Enter) to see the swf. hope you enjoyed this tutorial.

51. Alternatively, if you are extremely frustrated with flash and want to save yourself some time, you can create a free flash website with Wix. Create a super good looking, professional flash website without any knowledge of flash.