Hi, this is _______________________ with Macromedia. This year we're coming out with something new called Macromedia MX product family, and I'd like to give you some ideas about how these vastly improved applications can revolutionize your company's online presence. To show you what you can do now, we've created a web site here for a fictional car company called Trio Motors.
Okay, here's the MX product family in action. In this Trio Motors Extranet, you can see this is an HTML page. At the top you see some Flash navigation. We also have some dynamic content coming from a ColdFusion server. And these technical notes here are generated live from a database.
On the upper right of this page, notice this rich user interface that shows us which cars are currently in for service. These are license plate numbers for those cars. Remember that, through ColdFusion, this data's actually coming live from a database. Here we use the scroll bar to scroll through these license plate numbers. We can actually sort and filter them. So, for example, if we only want to see which jobs are finished, it shows them. Or we can see just the in-progress repairs. We have the whole record set locally, and we can manipulate it without making any trips to the server. This means a much faster experience for the end-user, and by using much less bandwidth than previous designs.
So far we've looked at using this Flash element in combination with HTML. You can also build applications with a full Flash interface. The application I'm about to show you is less than 100K, but it provides an incredibly rich application interface for the service managers who are currently repairing cars. As we click around on different license plate numbers, it's pulling in data using ColdFusion, and filling out the different work orders. Even these live charts here are drawn with Flash.
Here's something else you should know. The Flash player supports video. So when we built this site for Trio Motors, we imagined the experience of a customer dropping off their car. We thought it might be convenient if they could record a video describing their problem when they dropped their keys off. Let's watch how the customer might use this feature.
[Video of customer describing problem]
We're able to view this video embedded with the rest of the Flash user interface. We didn't have to launch a separate video player. It's right here in the context of this application, and you can control that video with any user interface you like. In this case, you can see we made our own "Play" button, but you can build whatever control is appropriate for your application.
Meanwhile back at Trio Motors, we've learned what the problem is with the customer's car. Suppose now that we want to learn more about the engine components. We have some built-in reference material in our application, and this Flash user interface will visually navigate different parts of the reference manual. For example, we click on the engine compartment, and it zooms up to let us navigate the part where we think the problem is. But say we want some more information on the engine system, so we click here for an overview, or repair guides, or even tech notes on the engine.
Let's click on the tech notes. What we're actually doing is asking the ColdFusion server to pull up that same tech note information that we saw in the HTML page, but to display it here in a Flash user interface. So here are the tech notes. We could click on each one and read it, if we wanted to. Notice how this application was designed to show tech notes in a separate window using HTML, drawing dynamically from that data source.
That's an example of how you can combine Flash with HTML either on the same page, or by mixing and matching pages like this as appropriate for your application.
Okay, we've learned what we need for repairing this car. Now we'll go to the parts tab and buy some parts to do the repair. This same application lets us navigate over here to parts, and here's a list of all the different components and individual parts that we can buy to repair this car.
Creating this interface with Flash MX is very easy. Flash has a tree control component. You can just drag and drop it onto your design and it's ready to use. Previously it might have taken you days or even a week to create a component this elaborate, but Flash MX reduces the development time significantly. Now you can create rich application user interfaces just like that.
Watch what happens when we click on these different auto parts. Here's the part information displayed right here on the detail panel. Along with the descriptions, it's showing us the in-stock date for each part. This is happening through a Web Service, a new technology that allows web sites to work together. More specifically, it allows applications to work in conjunction across the Internet.
Say we want an inverter to complete this repair. We click on it, and then we get a part availability date. Here's what happened. Our application calls our part supplier's web server to ask when that part would be available. Our supplier answers with this date that you see here in the Flash UI. And that's how easy it is to combine Flash functionality with Web Services.
Keep in mind that our team built this site with ColdFusion, Dreamweaver and Flash, which are at the heart of the Macromedia MX product family. And it was easy to do. We think this will make revolutionary changes in how people build applications.
So let's go back to our repair job at Trio Motors. You can see we've added a bunch of parts to our list. We can even select one of these parts and change the quantity that we're ordering. See, we ask for three inverters instead of one, and we get a price update. And when that happens, the total cost of our order updates locally, on my machine. It doesn't need to talk to the server at all. For the user that means a much faster response time, because it's not waiting for the server to come back. And that means much lower bandwidth costs, because we don't need connectivity to the server for this. Right there you have two major returns on your investment: a much less expensive way to build your application, and a much faster reaction time for your end-user.
Now that we've ordered the parts, let's schedule the repair. On this site we have a scheduling application, a rich interface for booking the repairs in our shop. Here's a calendar user interface element that lets you choose a day. Our design team was able to use this right away because it's a standard element that you can just drag and drop into your design. So we could spend more of our time designing a UI element that was specific to Trio Motors. In this case, the shop has four different repair bays, so we customized our scheduling application to show all four of them.
If you were a service manager at this shop, this advanced user interface design would make it very simple to see the available times and to book the repairs quickly. I'll show you what I mean.
Let's click on a calendar date. Now you can see when each of these bays is available. The black times are already scheduled for another repair, and the white times are free. Let's say our repair is about three and a half hours long. We don't see too many big slots on this day, because the only available times are highlighted in yellow. If we decrease the labor time to three hours or even two and a half hours, more days become available on the calendar to book this repair. If we really shorten the time we need, you can see that on just this one day, the 16th, we suddenly have many available slots.
Now we press "Notify" to tell the customer that we're able to do the repair on the 16th. And, using ColdFusion and CF Mail, we send an email to this customer.
Let's see how this looks to a service manager who's using a handheld device on the job to access the same application. Since so many of these handheld devices are wirelessly connected to the Internet and to the server, and we can get this information live. And here it is. We now know that for this particular car, we're supposed to repair the engine control.
Once we've made that repair, we might want to let all the other repair technicians know that we're finished. So we'll do a live update in that database, and now we can go back and work on some other cars. As you can see, this interface is very easy to use and very rich. Even when you're running it on a handheld device, it gives you an extension of that same application.
We designed a very intelligent user interface for the Trio Motors application. Our designers were able to do that because they could invest their time on these custom elements specific to the application. It was extremely easy to reuse typical elements such as calendars, scroll bars, tree controls.
You're now able to use Dreamweaver, Flash and Cold Fusion to deliver a Rich Internet Application that runs across multiple devices. Your end-users can expect a wonderful user experience, while you decrease both your development and operational costs for your web sites.