Cue Point Navigation

Attaching Actions to the buttons

To respond to the cue points in the video, we'll set up an ActionScript "listeners" that will listen for the cue points and then execute actions we specify.

Screen 1: keyframe Home in the layer actions

stop();

// make the videoScreen symbol invisible
setProperty("_root.videoScreen", _visible, false);

// create a variable for an event listener
var cueListener:Object = new Object();

//declare a function called by the event listener
//the listener passes a reference to the cue point
cue.Listener.cuePoint = function(cues) {

//create a variable for the name of the cue point
var cueName = cues.info.name;

//replace the text placeholder in the Dyanmic
//text container with the name of the cue point
_root.videoScreen.textClip.text = cueName;

//move the video banner movieclip to the named
//keyframe that matches the cue name
_root.videoScreen.videoBanner.gotoAndStop(cueName);
}

//start the event listener
_root.videoScreen.theVideo.addEventListener("cuePoint", cueListener);


For the presentation of our video I attached actions to the buttons in the video screen that will allow viewers to navigate to the different points in the video.

The Bride and Groom Button
on (release) {
import mx.video.FLVPlayback;
_root.videoScreen.theVideo.seekToNavCuePoint("The Bride and Groom");
}

The Toss
on (release) {
import mx.video.FLVPlayback;
_root.videoScreen.theVideo.seekToNavCuePoint("The Toss");
}

The Kiss
on (release) {
import mx.video.FLVPlayback;
_root.videoScreen.theVideo.seekToNavCuePoint("The Kiss");
}

The Rings
on (release) {
import mx.video.FLVPlayback;
_root.videoScreen.theVideo.seekToNavCuePoint("The Rings");
}

The site development is now complete!

Importing Flash Video

Image 1 - Importing .mov video & converting to FLV format

For converting a single video file to the Flash File (FLV) format, I use the Flash Video Import wizard.

In this project I used "Navigation" cue points for navigation and seeking, but can function secondarily like an "Event" cue. I used navigation because I need the functionality of both types.

The ActionScript shown at Image 1 (above) is for the x button in the top-right corner. It is to close the video screen and stop video playback. Note that if the video had audio and we didn't stop the playback, the video would continue to play and viewers still hear the audio.


//attach action that executes when
//the button is pressed and released.
on (release) {
//make the videoScreen symbol invisible
setProperty("_root.videoScreen", _visible, false);
//stop playing the video
_root.videoScreen.theVideo.stop();
}

UI Skins & Appearance

Customized UI Components to match site visual style

Flash uses a construct called "skins" to describe the general appearance of UI components. Developers can create and use their own or can choose to use one of the variations of the default skin known as "Halo".

In this project, I style the text that appears in all the UI components and change the Halo theme in the actions panel.

//set the halo theme to orange
_global.style.setStyle("themeColor", "haloOrange");
//set the font family to verdana
_global.style.setStyle("fontFamily", "Verdana");
//set the font size to 10
_global.style.setStyle("fontSize", "10");
//set the font color to dark gray
_global.style.setStyle("color", 0x666666);

Form Components

Adding Form Components

Forms provide a common function in Web pages, providing a way for users to intearact with the business and people behind a site. I created a basic framework of a form using components.

To function properly and transfer data as intended, a form requires advanced ActionScript programming and connection to a database.

For this project my role is to establish the basics by adding form components on the stage:

"TextInput" for Name and Email input field.
"Radio Buttons" are used for choosing the event (wedding, prom, quincenera, anniversary).
"DateField" component to get info about date.
A "ComboBox" component to list product display type as a drop-down menu.
For the mailing list "CheckBox" for client to click if they want to be added.
The "Button" component to function as a Submit button.

Load XML to UI Components

1.1 Placing XML Connector & UI Components in the stage

The XML connector (small icon on the left side with "<>" symbol serve as a go-between, bringing data in from XML file and broadcasting out to UI Components that use the data to determine their displays.

I set the value of xml connector in the parameters tab to instance name: xcGallery,
URL: data.Gallery.xml, Direction: Receive

In the Component Inspector Schema tab, select results: XML. Then import the schema.

UI used in this study are:
"listDisplays" component for the green area.
"Text Area" component for the light purple background.
"Loader" component for the gray area where the images will display.

1.2 Output from binding xml content to UI components

Connecting each piece of data from an XML file to user interface element is called "binding" the data. I bind the data to XML Connector and specify to which UI component the connector will broadcast the data. Then bind the incoming data to the component and specify how it will be handled.

1.3 Loading the external movie to the site

From the Components panel, I drag an instance of "Loader Component" onto the stage and set the parameters and name the symbol instance.

Under scaleContent, select "false" this instructs the Flash to display the movie at its actual size. In the content path, I enter the location of the gallery content. Click image 1.3 to see the stage and test movie.

Scrolling Text

Using UI Scrollbar to fit the text within the content area of the layout

For the info section of this website, the content is contained in an HTML file that loads dynamically when the site movie is played.

I created a text box with dynamic, multiline properties and attached a scroll bar component or UIScrollbar. Placed the function (set of instructions) for loading a text file in the first frame of the main Timeline.

TextInfo.text and stylesSite.css are external files that this ActionScript is calling to load in the text box.

var cssStyles:TextField.StyleSheet = new TextField.StyleSheet();

cssStyles.load("stylesSite.css");

cssStyles.onLoad = function (success) {
if (success) {
textInfo.styleSheet = cssStyles;
_root.myLoadVars.load("textInfo.txt");
} else {
textInfo.text = "An error occured loading the requested content.";
}
}

Input Text & Dynamic Text

In this example, the input text field is where the visitor enter their name :
I use the text tool to create the box and set the properties in Property Inspector
Text Type: Input Text, Line Type: Single Line, Selectable: On, Show border Around Text: On
Maximum Characters: 20



ActionScript:

on (release, keyPress "") {
gotoAndStop("1");
}



After typing the name, press the enter key or click the Go button, a personalized message on the site greet each visitor:



msgWelcome is the Variable name I assigned to the text box

msgWelcome = "Hello " + name + ", welcome to Timeless Blooms.";

Screen Shot showing the editing mode of msg Welcome movie clip, layers, and Property Inspector

Flash Interface Design

Designing Interface on the stage

This is the case study I am working on using Flash CS3. I deligently work on the exercises in the seven chapters for the fundamental structure of the site:

1. how to prepare your site
2. design layout of stage
3. add and style text
4. work with imported objects
5. use timeline to organize site
6. add animation
7. build navigation system.
   

Book used in this study: Creating a Web Site with Flash CS3 Professional by David Morris