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

AS 3.0 Condition & Loops

Condition Statements

The if statement in ActionScript is the same as it is in many programming languages:

if (myValue == 1) {
doSomething();
}

The == comparison checks for general equality. You can also use >, <, >=, and <= respectively.

You can add else and else if to extend the if structure:

if (myValue == 1) {
doSomething();
} else if (myValue == 2) {
doSomethingElse();
} else {
doNothing();
}

You can also have more complex conditions with && and || . These represent the and and or comparison operators.

NOTE
You can no longer use keywords "and" and "or" as alternates to && and ||.

Loops

Loops is done with the for statement or the while statement. For statement has three parts:
initial statement, a condition, and a change statement.

for(var i:int=0;i<10;i++)>
doSomething();
}

Translation: The following code sets the variable i to zero, loops as long as it is less than ten, and increases the value of i each time through the loop.

ActionScript 3.0 Variable Syntax

Storing values in ActionScript 3.0 can be done with a simple assignment statement. However, you need to declare a variable first to use it.

VARIABLE

var myValue = 3;

declare variable first and use it later

var myValue;

NOTE
In ActionScript 2.0, the var statement is not required. In ActionScript 3.0, it is.

An int variable type can be any integer, positive or negative. A uint integer is only for positive integers. If you want to use fractional values, also known as floating-point numbers, you must use the Number type:

var myValue:Number = 7.8;

There are also String and Boolean types.
Strings hold text
Boolean values must be either true or false.

These are basic primitive types. However, you can also have arrays, movie clip and sprite references, and new types that match the code classes you create.

Operations on numeric variables:

var myNumber:Number = 7.8+2 (floating-point)
var myOtherNumber:int = 5-6; (subtraction)
var myOtherNumber:Number = myNumber*3; (multiplication)
var myNextNumber:Number = myNumber/myOtherNumber; (division)


Special Operators

The ++ will increment a variable by one
The -- will decrease it by one

Peform Operation on the original value
+=, -=, *-, and /=

myNumber += 7;

Use parenthesis to set the order of the operations

var myNumber:Number = (3+7)*2;

Strings can also be manipulated with the + operator and the += operator:

var myString:String = "Hello";
var myOtherString = myString+"World";
myString += "World";

Private variables cannot be accessed by code outside of the class. We must define them further as either private or public.