This article is geared towards beginning Flash users and developers who are interested in working with a simple video navigation template. While programming experience is not necessary to understand the tutorial, you may find it beneficial to review the Flash Video Learning Guide.

User level

Intermediate

Required products

Flash Professional CS3 (Download trial)

Sample files

vidtemplate_video_preso_cs3.zip (8391 KB)

This Flash template is great for basic video presentations—situations when you want the user to see the main topics of a video and be able to navigate quickly to them. It does not contain some of the more sophisticated features, such as synchronizing content on the screen with the video playback, as described in my other tutorial, Spokesperson presentation with synchronized graphics. However, you should have little trouble modifying this template to work well for your own purposes.

The Flash video template provided with this article provides you with the basis of a navigational system for user-initiated playback of video clips (see Figure 1). Before beginning this tutorial, preview the online example of the Flash video template to explore how it works.

View the sample

Figure 1. User interface of the Flash video presentation template

This is the third version of the Flash video template. Although the video dates from the Macromedia days, this article has been updated to work with the new Adobe Flash CS3 Professional FLVPlayback component and ActionScript 3.0. The updated template is built on a standard Timeline in Flash and has been simplified for easier editing and customization. The template features a video with playback controls, as well as navigation buttons, which allow the user to jump to specific topics within the video.

Consider applying the following special touches to bring this presentation to life in your company:

Add your own video, resize it, and then position it anywhere on the page
Add your company graphics and colors to any part of the presentation, including the background
Update the text, graphics, or colors of the buttons
Move the navigation bar to the top, or to either side—anywhere you like

You can easily change this template to fit your needs.

This article describes how to modify all the basic characteristics so your project looks as desired. For example, you will certainly want to add your own video to this presentation. After swapping the video source, you can update the button text that provides navigation to the presentation. Finally, you can change the color schemes and logos to match your own designs and collateral materials.

Note: If you are still using Flash Professional 8, please see the previous version of this article.

Understanding the project layout

In this version of the template, the content is distributed on layers on the main Timeline. This simplifies the customization process and provides easy access to all the editable features in a single location. Take a quick look at the main Timeline of the Flash video template (see Figure 2).

Figure 2. Layers on the main Timeline of the Flash video template file

Notice that there is only one frame in the Timeline. The content structure is organized into five layers:

Actions: Contains a small amount of code (you can make some minor edits here)
Text: Contains the title and copyright text (you can change the text and add whatever written content you'd like here)
FLVPlayback: Contains the FLVPlayback instance, the custom UI controls, the video background, and the blue border around the video
Buttons: Contains five instances of the CueNameButton symbol with static text typed over them
Background: Contains the graphics that make up the background

Exploring the symbols in the library

While you're browsing through the file, open the Library panel (Window > Library) and take a look at its contents (see Figure 3).

Figure 3. Assets in the Library of the Flash video template

Notice the CueNameButton movie clip in the Skins folder. This symbol is used for the navigation buttons, which sit to the left of the video display. The second is the VideoFrame movie clip, which creates the background for the video display. Most of the other symbols are gathered from the Components inspector in Flash CS3 Professional.

Note: The FLV Playback Skins folder contains customizable skin graphics for each of the video controls.

Exploring the ActionScript supplied in the template

There are two places where ActionScript appears in the template: Frame 1 of the main Timeline and Frame 1 of the CueNameButton timeline. You will make some minor edits to the actions on the main Timeline, but you will not need to edit the button's code. The updates to ActionScript 3.0 are minor, but are different enough that they merit some explanation.

The following code appears on the Actions layer on the main Timeline:

        import flash.events.*;
import fl.video.*;
 
//-----------------
// Video control assignment
//-----------------
// Use the skin assignment properties of the FLVPlayback
// instance to associate the controls with the player.
 
display.playPauseButton = play_btn;
display.stopButton = stop_btn;
display.seekBar = seek_bar;
display.volumeBar = volume_bar;
display.muteButton = mute_btn;
display.fullScreenButton = full_btn;
 
//-----------------
// Video event handling
//-----------------
// Create an event handler function to find  
// the nearest cuePoint to the end seek time
function scrubHandler( event:VideoEvent ):void
{
   var cue = display.findNearestCuePoint(event.playheadTime);
   navigate(cue.name, false);
}
display.addEventListener(VideoEvent.SCRUB_FINISH, scrubHandler);
 
// Create an event handler function to catch the
// cue event from the FLVPlayback instance.
 
function cuePointHandler( event:MetadataEvent ):void
{
   // On cuePoint, look for a button named with the cue name
   // plus "_btn". If it exists, then call its select method...
   navigate(event.info.name, false);
}
display.addEventListener(MetadataEvent.CUE_POINT, cuePointHandler);
 
//-----------------
// Navigation / screen state
//-----------------
 
// Store the current button name
var currentBtn:*;
var currentBtnName:String = "";
 
function navigate( cueName:String, seekTo:Boolean ):void
{
   // Handle previous button
   var prev = getChildByName(currentBtnName);
   if( prev != null ){
      currentBtn.reset();
   }
   // Handle new button
   var next = getChildByName(cueName+"_btn");
   if( next != null ){
      currentBtn = next;
      currentBtn.select();
      currentBtnName = cueName+"_btn";
   }
   // Seek to Cue Name
   if( seekTo == true ){
      var c = display.findCuePoint(cueName);
      if( c != null ){
         display.seekSeconds(c.time);
      }
   }
}
 
//-----------------
// Button event handling
//-----------------
 
// introduction_btn
function introductionHandler( event:MouseEvent ):void
{
   navigate("introduction", true);
}
introduction_btn.addEventListener(MouseEvent.CLICK, introductionHandler);
 
// overview_btn
function overviewHandler( event:MouseEvent ):void
{
   navigate("overview", true);
}
overview_btn.addEventListener(MouseEvent.CLICK, overviewHandler);
 
// aim_btn
function aimHandler( event:MouseEvent ):void
{
   navigate("aim", true);
}
aim_btn.addEventListener(MouseEvent.CLICK, aimHandler);
 
// formats_btn
function formatsHandler( event:MouseEvent ):void
{
   navigate("formats", true);
}
formats_btn.addEventListener(MouseEvent.CLICK, formatsHandler);
 
// summary_btn
function summaryHandler( event:MouseEvent ):void
{
   navigate("summary", true);
}
summary_btn.addEventListener(MouseEvent.CLICK, summaryHandler);
    

Note: The only part of this code that you will edit will be the mouse event handlers at the bottom. You will add and remove mouse event handlers to match the buttons and cue points in your movie.

The following code appears on the Actions layer on the CueNameButton timeline:

        import flash.events.MouseEvent;
 
//-----------------
// Variables
//-----------------
 
var current:Boolean = false;
 
//-----------------
// Selection from an outside source
//-----------------
 
function select():void
{
   current = true;
   gotoAndStop("down");
}
 
function reset():void
{
   current = false;
   gotoAndStop("up");
}
 
//-----------------
// Mouse events
//-----------------
 
// rollOver
function rollOverHandler(event:MouseEvent):void{
   if(!current){
      gotoAndStop("over");
   }
}
// rollOut
function rollOutHandler(event:MouseEvent):void{
   if(!current){
      gotoAndStop("up");
   }
}
addEventListener(MouseEvent.ROLL_OVER, rollOverHandler);
addEventListener(MouseEvent.ROLL_OUT, rollOutHandler);
    

Note: The code above shows how to make a movie clip into a button in ActionScript 3.0. The button listens for its own mouse events and navigates to labeled frames in the Timeline to show button state graphics.

Customizing the video

The FLVPlayback component displays the video in the template (see Figure 4). You will select the FLVPlayback instance on the Stage to change the layout and parameters of the video. You can change the following items to customize the display:

Video file and video parameters
Size of the video (either automatically or manually)
Location of the video

Figure 4. FLVPlayback component instance and its parameters in the Component inspector

The video component in Figure 4 appears as a black rectangle with the Flash video icon in the center. When you select the instance, a blue bounding box surrounds it. The parameters for the video component can be set in the Property inspector or in the Component inspector. Also notice that the custom video controls (play, stop, seek bar, volume bar, mute button, and full-screen button) are separate controls and are not attached to the FLVPlayback instance. (You will explore changes to these controls in the section "Modifying the buttons and video controls".)

Changing the video and video parameters

To change the video and FLVPlayback parameters:

Open the VideoNavPresentation.fla file in Flash CS3 Professional. Note that the supplied file is an ActionScript 3.0 file and can be opened only in Flash CS3.
Click the Flash video icon in the center of the black rectangle to select the FLVPlayback instance. Notice that the FLVPlayback layer is highlighted on the Timeline.
With the video component still selected, open the Component inspector (Window > Component Inspector).
To change the video, click the source field to select it and then click it again to launch the Content Path dialog box (see Figure 5).

Figure 5. Enter the path to your FLV file in the Content Path dialog box

Type in the path to the FLV file that you want to view or click the folder icon in the top right of the dialog box to browse for the file. Usually you will store the FLV file in a relative path near the SWF file that displays it. However, if you are streaming the video using Flash Media Server, you will enter an absolute path to the file on the server.
Notice that you have an option to match the FLV dimensions. This is a great feature that lets the video component size itself to the target video. If you enter an absolute path into the field, the Download FLV for Cue Points and Dimensions check box becomes active.
Enter a path in the text box and choose the Match Source FLV Dimensions check box if desired. Click OK when you're finished.
Export the SWF file (Control > Test Movie) to play your video.
Return to the FLA file and change the other video parameters as desired.

For more information on FLVPlayback component parameters, refer to the Flash CS3 LiveDocs (Using ActionScript 3.0 Components > Using the FLVPlayback component > FLVPlayback component parameters).

Note that the FLVPlayback component uses embedded metadata in the FLV file to determine the size and duration of the video for automated features such as "Match source FLV dimensions." If you are trying to use an older FLV file that does not contain this metadata, you may notice that some of these features do not work. If this is the case, your best bet is to encode the original video to the FLV format again using the Flash CS3 Video Encoder or use a utility to embed the metadata in the older FLV file.

Changing the size of the video

To change the layout of the video component, you can either let the component automatically size itself to the target FLV file or you can manually change the size the component on the Stage.

If you want the component to size itself automatically, follow the steps in the previous section for assigning the source parameter and make sure you select the Match Source FLV Dimensions check box. Selecting this option will cause the video component to automatically match your FLV file on the Stage, making it easy for you to position the video as desired.

To size the video instance manually, follow these steps:

Select the video component on the Stage by clicking the Flash video icon. Open the Component inspector (Window > Component Inspector) if it's not already open.
Set the scaleMode field to maintainAspectRatio in the parameter list. These parameters affect the component when the SWF file is playing. Turning off the parameters enables the video to be displayed at any size you choose.
With the video component still selected, choose the Free Transform tool (Q) and scale the dimensions of the video instance as desired.
Export the SWF file (Control > Test Movie) to see the results. If you want, you can experiment with the scaleMode parameter to adjust how the video appears in the custom size view.

Moving the video to a new location

To move the video to a new location, follow these steps:

Select the video component on the Stage by clicking the Flash video icon.
With the Selection tool (V) you can click on the video instance and drag it to any location on the Stage. Of course, feel free to change the surrounding graphics to accommodate the change in video location.

Modifying the buttons and video controls

The navigation buttons appearing along the left side of the video display are a key feature of the template. These buttons enable users to jump to predefined sections (topics) within the video. The navigation buttons label each section of the video and enable users to understand the content of the movie and how to seek to any topic desired. In this next section of the article, you'll learn how to do the following:

Understand the relationship between cue points and the navigation buttons
Add, remove, and change navigation buttons
Change FLV custom playback controls

Cue points and navigation buttons

Before you jump into editing the navigation buttons, it's important to understand what is happening with the video component that makes this all work. The big picture is that you can assign sections in each FLV file that can be used for navigation and synchronization. These sections are called cue points. You can add them to the video when it is initially encoded to the FLV format (the preferred method) by using the cuePoints field in the FLVPlayback parameters or by using ActionScript while the SWF file plays. For this demonstration, I will explore adding and removing cue points using the Flash Video Cue Points dialog box (see Figure 6).

Figure 6. Flash Video Cue Points dialog box launched from the cuePoints field in the FLVPlayback component parameters

As you can see, named cue points can be added to each video to create sections within the video. Cue points have an associated time within the video and may also contain other data that can be referenced as cue points are encountered along the video timeline.

To change, add, or remove cue points, follow these steps:

Select the video component on the Stage by clicking the Flash video icon. Open the Component inspector (Window > Component Inspector) if it's not already open.
Click the cuePoints parameter once to select it and then click it again to launch the Flash Video Cue Points dialog box.
To change one of the existing fields, simply type your own cue point name and time into one of the five supplied fields. Note that there is a pattern you will use with the cue point name and the name of the navigation button that corresponds to it. If you change the names, which you most likely will, be sure to write down the new names so you can update the button instance names later.
To remove a cue point, select the desired field and click the minus (–) button in the dialog box. The cue point will disappear from the list.
To add a cue point, click the plus (+) button. Notice that a new field appears at the top of the list. Enter a name and a time. The new cue point is added to the list in chronological order.

That's it. After you add your own video to the FLVPlayback component, you will adjust the cue points to match the sections of your video. You can use as many or as few cue points as you want. From there, you will update the navigation buttons to match the cue point entries.

Tip: Embedding navigation cue points during encoding is more accurate than using the Flash Video Cue Points dialog box. If you are having problems with the accuracy of seeking to exact cue point times, consider encoding the video and cue points together using the Flash CS3 Video Encoder instead.

Understanding the cue point name and button instance name pattern

As you view the template in action, you'll notice that the down state for each button appears when the video plays past the related cue point. This template uses a naming convention to find the navigation button when a cuePoint event fires from the video component. The Actions layer contains an event handler function which processes cuePoint events.

When a cue point event occurs, the function looks for a button whose instance name matches the cue point name plus the letters "_btn". If a button exists, it triggers the button to show its down state. For example, if a cue point event named introduction passes through the event handler function, then the button whose instance name is introduction_btn is highlighted with its down state. There's no need to adjust any of the code; simply create cue points and name the corresponding buttons with the cue point name plus "_btn".

Changing the navigation button text

The Buttons layer contains five instances of the CueNameButton with static text typed over the instances to create the button labels.

To change the text on a navigation button:

Select the Text tool (T) and click in the text block that you want to edit. You should see the text block become highlighted and show the typing cursor.
Edit the text as needed.
To change the text style, select the text block with the Selection tool and edit the text properties in the Property inspector (see Figure 7). You may also edit only a portion of text by selecting it with the Text tool and then changing the settings in the Property inspector.
You can continue by editing, adding, or removing text fields as needed on the Buttons layer. There is nothing functional about the labels. They simply provide clear labels to enable the user to navigate to different sections of the video.

Figure 7. While a button label is selected, you can change the text and the properties of the text

Changing the navigation button graphics

The CueNameButton symbol uses a scaling feature called 9-slice scaling. This enables the button to be scaled from instance to instance without seeing the effects of distortion common to most scaled movie clips. The template provides a simple button skin with an up, over, and down state that you can customize to fit your needs. You will edit your graphics in the Library and use the scale guides to control how Flash renders your graphics at different sizes (see Figure 8).

Figure 8. Navigation button timeline (notice the guides marking off the scaling areas of the button)

You can move and resize the navigation buttons in any way you desire. To edit the up, over, and down button skins, follow these steps:

Open the Library panel, if it's not already open. Double-click the CueNameButton symbol to enter its editing mode. The Timeline view should look similar to Figure 8.
Notice that the Timeline has four sections. Each section is marked by a frame label. The init frame loads the up graphic and some ActionScript code located on the Actions layer. The over frame contains the over graphic and the down frame contains the down graphic. During runtime, the playhead jumps back and forth to the up, over, and down frames to display the correct button graphics. The up frame is staggered from the init frame so the button code on Frame 1 does not reinitialize.
Select the up graphic on the Graphics layer at Frame 1. Notice the scale guides that mark the scalable areas of the graphic. Edit the graphic as desired. You can move the guides as needed.
Select the over graphic on the Graphics layer at Frame 10. Edit the graphic as needed. Make sure the general size of the graphics is consistent so the scale guides will work for each skin state.
Edit the down graphic at Frame 15 in the same way.
When you're finished, click Scene 1 in the edit bar to return to the main Timeline.

Removing a navigation button

To remove a navigation button, simply select the button instance and the text on top of it and delete the two items from the Stage.

Adding a navigation button

You have two options when adding a navigation button to your file. You can either drag a new instance of the CueNameButton symbol from the Library to the Stage or copy an existing button.

To add a new navigation button and associated cue point, follow these steps:

Click the Buttons layer on the main Timeline of the template to select it. You will add your new button instance to this layer.
Open the Library panel, if it's not open already. Drag an instance of the CueNameButton symbol to the Stage. The symbol is located in the Skins folder.
Select the new instance on the Stage and drag it into position. Use the Free Transform tool (Q) to resize the button so it's large enough to accommodate the amount of text you want to use. Take a guess at this point. You can touch up the sizing later.
With the Text tool (T), type the button label above the button graphic you just added. Position and format the text until it looks right to you.
Add a new cue point to the FLVPlayback component instance. This will be the cue point that the navigation button calls when you click it. For example, add a cue point with the name conclusion (see the earlier section, "Cue points and navigation buttons," for more information on adding cue points).
Click the new button instance on the Stage to select it. In the Property inspector, assign an instance name to the button using the naming convention described previously on this page (cue point name plus "_btn"). In this particular example, the instance name should be conclusion_btn (see Figure 9).
Follow the next set of steps to complete the button setup.

Figure 9. New button instance name in the Property inspector (note that conclusion_btn corresponds to the video cue point named conclusion)

To trigger a cue point change from a new button:

Click on the Actions layer on the main Timeline and open the Actions panel (Window > Actions).
Scroll down to the bottom of the code where you see the "Button event handlers" comment. Notice the five sets of button event handlers. Each set contains an event handler function (named with the cue point name and the word "Handler"), and an addEventListener command to register the function with the button. Pay close attention to where the related cue point name repeats throughout the code pattern.
Copy one of the sets of button code and paste it into the very bottom of the script. Change the naming to incorporate the intended cue point name relating to the button. The following code sample shows what it would look like for the "conclusion" cue point:

        // conclusion_btn
function conclusionHandler( event:MouseEvent ):void
{
   navigate("conclusion", true);
}
conclusion _btn.addEventListener(MouseEvent.CLICK, conclusionHandler);
    

Clean up any button event handler code that no longer relates to a button in the movie. Select it and delete it from the script.
Export the SWF (Control > Test Movie) to see if the changes made to the ActionScript produce the desired results. Re-edit as needed.

That's it. Your new navigation button should trigger the video to jump to the corresponding cue point.

Note: You cannot place code directly on a button instance in ActionScript 3.0. The process used in this sample is the approach to use to respond to button clicks in ActionScript 3.0 files.

Adding and removing custom user interface controls

The template contains a basic set of video controls, including a play/pause button, stop button, seek bar, volume bar, mute button, and a full-screen button. These controls are placed on the FLVPlayback layer alongside the FLVPlayback instance. The controls are associated with the FLVPlayback instance using a small amount of ActionScript code on the Actions layer.

You can remove any or all of the controls without making other adjustments to the template. If you want to insert additional custom user interface components, you will need to name their instances and update the code on the Actions layer to associate them with the video component.

To remove all the user interface controls, follow these steps:

Select all the controls on the FLV Controls layer except for the FLVPlayback component.
Press the Delete button to remove the controls.
Select the keyframe on the first frame of the Actions layer and open the Actions panel (Window > Actions).
In the Actions panel, select and delete the following code:

        //-----------------
// Video control assignment
//-----------------
// Use the skin assignment properties of the FLVPlayback
// instance to associate the controls with the player.
display.playPauseButton = play_btn;
display.stopButton = stop_btn;
display.seekBar = seek_bar;
display.volumeBar = volume_bar;
display.muteButton = mute_btn;
display.fullScreenButton = full_btn;
    

You may add any combination of FLVPlayback custom user interface controls by dragging instances from the Components panel to the Stage. You must name the instance and assign the instance name to the FLVPlayback instance using assignment properties as seen in the code above.

To add a buffering bar, follow these steps:

Drag a BufferingBar component from the Components inspector to the Stage.
Select the new instance and move it into position.
With the instance still selected, type in a name for the instance in the Property inspector (for example, bufferingBar_mc).
The last step is to assign the instance name to the FLVPlayback instance named display using a bit of ActionScript. Select the first frame of the Actions layer and return to the Actions panel. At the top of the script, add the following line of code:

        // Assign the buffering bar to the video component
display.bufferingBar = bufferingBar_mc; 
    

The FLVPlayback component has a handful of control assignment properties that you can use in a similar way as described above to assign the other types of controls to the video component. The property list includes the following:

playButton
pauseButton
playPauseButton
stopButton
muteButton
backButton
forwardButton
volumeBar
seekBar
bufferingBar
fullScreenButton

You can customize the FLVPlayback controls easily to match whatever look and feel you need. For this template I changed the green highlight color to red to match the video theme better. See my article, Skinning the ActionScript 3.0 FLVPlayback component, for more information on skinning options.

Note: The full-screen mode and its related button are new features in Flash CS3 Professional. To use the feature, make sure you publish your Flash movie using the Enable Full Screen HTML template.

Customizing the background graphics

One of the easiest changes to make to the template involves making modifications to the look and feel of the background graphics. Changing the color of the chrome (gradient) graphics in the background can really go a long way towards creating a unique-looking template that fits your company's branding and tone. Simple changes to the template may include:

Changing the graphic which frames the video and video controls
Changing the background graphics and logo

Changing the video background graphic

As you've seen in previous sections of this article, the playback component is separate from the video controls. This makes customizations easy by enabling you to move the controls to any location, swap different types of video controls in and out of the template, and use any background graphic you like. For the purposes of this template, I created a simple custom background inside the VideoFrame symbol in the Library (see Figure 10).

The VideoFrame symbol editing area in the Library (after making changes to the background, click Scene 1 in the edit bar to return to the main Timeline)

Figure 10. The VideoFrame symbol editing area in the Library (after making changes to the background, click Scene 1 in the edit bar to return to the main Timeline)

To edit the video background graphic, follow these steps:

Double-click the video background graphic to enter its editing mode in the Library. You should see a view similar to the image in Figure 10. The edit bar indicates that you are now editing the VideoFrame symbol. You can return to the main Timeline by clicking the Scene 1 button in the edit bar.
Take a quick look at the layers provided. The black (solid color) layer is currently turned off from exporting using a guide. This layer holds the basic shape I used for the background. The Gray Gradient layer shows the same shape with a chrome gradient applied to it for effect. You can edit the gradient using the Color Mixer panel if you like. The Black background layer displays a black rectangle that's the same size as the video. It creates the illusion that the video is in place before it actually loads to the screen. Finally, the Border layer applies a thin stroke around the gradient shape.
Feel free to add and remove layers as needed. Use the existing graphics or add your own. When you are finished, click the Scene 1 button on the edit bar at the top of the timeline to return to the main Timeline.

Changing the background and logo

This is the easy part. Edit the graphics contained in the Background layer (see Figure 11) to change the background. You can add and remove graphics as desired.

Figure 11. Background graphics of the Flash video template with the video controls hidden for clarity

To change the background graphic and logo, follow these steps:

To make the graphics easier to see, hide the video controls by hiding both the FLVPlayback and Buttons layers.
Click the Text layer and delete the existing text logo. Add your own logo graphics as desired. You can import new graphics by selecting File > Import > Import to Stage.
Update the copyright information located at the bottom of the Stage to suit your needs.
Lock the Text layer and edit the graphics on the Background layer.

Where to go from here

Now that you have customized the template and made the presentation your own, there are many ways to update it to target your audience and make your presentation more immersive. Possible customizations include the following:

Animate the text and graphics on the screen in unique ways to complement the video footage
Add multiple videos and allow users to select the video they wish to watch
Add and remove custom video controls using the FLVPlayback custom user interface components
Add extended functionality using the FLVPlayback ActionScript API (see my article, Controlling Flash video with FLVPlayback programming)
Change the look and feel of the video controls using the FLVPlayback skinning features (see my article, Skinning the ActionScript 3.0 FLVPlayback component)

Make sure to also explore the other Flash video templates provided in the Flash Developer Center.

Flash User Forum

04/23/2012	Auto-Save and Auto-Recovery
04/23/2012	Open hyperlinks in new window/tab/pop-up ?
04/21/2012	PNG transparencies glitched
04/01/2010	Workaround for JSFL shape selection bug?

Flash Cookbooks

02/13/2012	Randomize an array
02/11/2012	How to create a Facebook fan page with Flash
02/08/2012	Digital Clock
01/18/2012	Recording webcam video & audio in a flv file on local drive

Flash video template: Video presentation with navigation

by Dan Carr

Content

Created

Page tools

Requirements

Prerequisite knowledge