The Secret to Effective HTML Page Title Tags
The CS5 CSS Starter Page Series - Part 9: Quality Assurance
Quickshot - Using Subqueries and Count to Display Membership Counts Per RegionThe CS5 CSS Starter Page Series - Part 8: Adding a Custom Font
Formatting Currency Values in JavaScript
Page 1 of 5 A couple of weeks ago I was speaking at Thunder Lizard's Digital Design World Conference in Seattle. The subject was Video in Flash and I showed a number of the video projects I had undertaken here and elsewhere. A couple of days ago I received an email from one of the attendees. The subject was "How did they do that"?
This individual had visited the presentation Vodafone had done to present its vision of wireless communication in the future.( Check out the presentation here. )
Specifically, this individual had visited the "Entertaining" section of the presentation and was seriously impressed with the "Video in the Visual Bracelet". The question was: "How did they get the video into the bracelet? Must have been a lot of Photoshop work?"
Image 1: The Vodafone Visual Bracelet.
First off, this is not how Vodafone did it. They aren't telling. Instead this is a "How to do it" using the tools in the Studio. Secondly, there might have been some Photoshop work done by Vodafone but it is so much easier when your workflow starts in Fireworks MX 2004, moves to Flash and then to Dreamweaver MX 2004 for upload. In fact, the whole process should take no more than 30 minutes.
Image 2: The video that plays in Vodafone's Visual Bracelet.
When you study the video a couple of things become abundantly clear:
Those three aspects actually determine your workflow.
The video is visible through the bracelet's screen because it is sitting under the screen. This tells me that I will need to create the screen in Fireworks, convert it to a Graphic Symbol in Flash and then apply "Opacity" to the symbol.
The reason the video plays so quickly is that it isn't embedded into the Flash .swf file. The video streams into the .swf from the server. This means I need to create a video object, in Flash, which essentially makes a call to load the video file and starts to play almost immediately.
Finally, the only active area is the video because it is actually sitting under the image of the arm with the bracelet. From this, I determine that I need to cut the screen out of the image in Fireworks. Not only that, the Fireworks canvas needs to be transparent and the image saved as .png file. In this manner, the video will "show through" the image and appear to be the only active area in the screen.
You simply can't "slap" the video object over the arm and then mask it using a Masking layer in Flash. Though I covered this technique in Masking Flash Video. In this case, the video will "leak" out of the sides of the mask. The reason is that I intend to use one of the Flash Professional Media Components and it, for some reason, doesn't want to "play nice" with a mask. The other reason is an inability to "bend" the component to fit the aspect area of the bracelet's screen. The best you can expect is to do a bit of sizing and "shearing" of the component to make it fit. Faced with this, I felt it better to simply cut a hole in the image and let it cover the video
If you want to follow this tutorial, download the files and place the video file named "crockard.flv" in the directory you will be uploading to your site. You don't have to use the video I have included. If you have an .FLV file you would prefer to use, move it to your directory.
Keywords
Fireworks,Flash,Dreamweaver, Video
