Topic: Flash
Designing a Custom Flash Player for Brightcove
ABOUT BRIGHTCOVE
Brightcove offers a wide range of players that will plug right into your site. Its players range from a video window with basic controls to players with tabbed navigation, playlists, related videos, and keyword search. These players are easy to build into your site and connect with videos you've uploaded to Brightcove.
Unlike most drop-in players, Brightcove offers a great deal of customization. You can style existing players using a video player editor where you primarily have control over colors. This goes a long way when you're trying to match the look of your player with the look of your site, but you can take this a step further with a proprietary markup language called BEML (Brightcove Experience Markup Language). Think of BEML as HTML for a media player. You add custom images to replace the Brightcove custom elements (like your play or mute button for example). You also have complete control over which Brightcove components you want for your players and even which buttons you want for your player controls (play button, mute button, etc.).
However, even with base color styling and more advanced BEML modifications, you may still run into styling and component limitations. If you want to really customize your player, Brightcove allows you to take things even further with their API. So, with said API, Adobe Flex, and custom UI and visual design up front, that's what Viget did ...
Continue reading "Designing a Custom Flash Player for Brightcove"
6 Things To Know About Video For The Web - Part 2
Have you already read Part 1 of this two-part series? If not, check it out, then read the last 4 tips below.
3. Always deinterlace
If you've bought a TV recently, you may have heard the terms 1080i or 480p. These numbers aren't there to make the cable girl look like she knows what she's doing -- these numbers actually mean something. The numbers (1080, 480, etc.) are the dimensions of the picture you are watching. If you are looking at a 1080i picture, then the screen size or aspect ratio is 1920 pixels wide by 1080 high (1920x1080).
The letter "i" stands for interlaced, which is the format all video on TV is broadcast. Interlacing is simply the interlacing of two frames together. You begin with frame 1. Your TV only fills in the rows for every other row (1, 3, 5, etc.) with frame 1's video. In the even lines (2, 4, 6, etc), the TV uses the lines of video from frame 2. The reason for interlacing goes back to the early days of TV. Before the LED monitors, all video was displayed on CRT (Cathode Ray Tube) monitors. The way these CRT's work is they shoot a beam across the top of the screen. The opposite side reflects it back and the beam zig-zags all the way down the screen until you have your picture. Once its done with one frame, it starts at the top and does it all over again for the next frame. If you are looking at 1080 screen, you would have 1080 lines stacked on top of each other. Well, in the old days, this caused a problem. By the time the beam was at the bottom of the screen, the lines at the very top were starting to fade, so when the beam started again at the top, the line was refreshed with a new bright beam. When this is done at a high rate, the picture would flicker. The reason this works is that it now takes half the time complete one cycle through a frame, which is quick enough so the first line does not fade, thereby removing the annoying flickering. So why is this a problem now?
HD televisions and LED monitors are what are called progressive scan display. The technology of these has advanced to the point where there is a danger of that fading that happens on CRT monitors. Progressive scan displays do not interlace the frames of video but simply display the entire frame concurrently. This becomes a problem when interlaced video is displayed on a progressive display. You can see from the image below that when an interlaced video is viewed in a progressive display that the 2 frames are actually visible. This is especially true with high motion frames like the one below.
That long explanation leads into the most important thing to look out for when encoding video for the web: since the vast majority of video is interlaced, you ALWAYS need to deinterlace your video when encoding or you will get what you see above. All major video encoders have this ability but they won't do it by default.
Continue reading "6 Things To Know About Video For The Web - Part 2"
6 Things To Know About Video For The Web - Part 1
Video on the web is showing up in more and more places all the time. It's also easier to capture and with mobile decices, web cams and hand held cams. What we can see from this is that it's something that is here to stay. For those of us responsible for putting it up on the web (and even those who aren't!), there is a lot we need to know about what goes into creating and distributing video.
This post is meant to be a broad look at how far video has come and where it is today. it provides some helpful tips about distributing video on the web.
Since blog posts that have numbers in their titles get more attention, I broke up video into six sections.
Continue reading "6 Things To Know About Video For The Web - Part 1"
The Making of VigeTurf - Flash
The making of VigeTurf brought together folks from all our labs. In this series, we're pulling back the curtain to give a detailed explanation of how it was created. Here, it's all about the Flash.
Uploading/Saving Photos
The actionscript side of uploading photos is very simple, but more involved for Matt who had the mighty task of putting the entire site together and did an awesome job. I just referenced the FileReference class, which will tell your OS to open a file browser window when you call FileReference.browse(). Because of security restrictions in Flash player 9, you need to send the file to a remote server before you can access it. This changes in Flash player 10, where you can directly access files at runtime (woohoo!).
Once the image was fully clipped, I simply took a snapshot of the stage and saved it out as a byte array. Using Adobe's Jpeg encoder class, I saved the image back to the server, where Matt returned the unique (and fun!) url's.
Grass
The blades of grass were probably the most fun part of this project. I was so excited about the task of making interactive grass that I started messing around with it that night. (You can see the grass in an earlier version here.) All of the blades are individually drawn using the AS3 drawing API and are given a random height and angle to look like nice, organic grass. All the blades are placed into a movie clip because, later, I will need to convert that movieclip into a bitmap to enable erasing.
The interaction with the mouse pointer was a bit tricky, and the result was not perfect, but the effect works (right?!). When the mouse pointer passes over the blade, it sticks to the pointer until you bend the blade to 45 degrees in either direction. At that point, the blade stops following the pointer and a tween takes over to get that "snap back" effect. That effect is handled using a simple tween that sends it back to its original rotation. The ease on the tween is set to "Elastic EaseOut" to get that great pendulum-like bounce (I used the TweenLite tweening library from GreenSock, which has become my tweening class of choice). When first envisioning the grass, I pictured very life-like blades that bow organically instead of the stiff bend they have now, but I quickly abandoned that idea after Steph said I couldn't take several weeks to perfect it because it had to be done by the holidays. Picky picky.
Creating Alpha Gradient Masks in Flash
The major use for a transparent mask in Flash is the alpha gradient. In the following examples, I'm going to show you how to create a gradient mask with either the Flash authoring tool or ActionScript.
Flash Authoring Tool
Start by placing two objects on the stage, one an alpha gradient you want to use as a mask and the object you want to be masked. It is necessary to convert both the mask and object being masked to movieclips so you can apply caching properties to them. Something we are not doing is creating a mask layer and a layer to be masked. A masked layer does not allow for bitmap caching, so we're going to have to do that using ActionScript. On the timeline, enter the following code:
object.mask = mask_mc;
Now, set both the mask and the object to be cached as a bitmap at runtime. If you need to, open up your properties panel by clicking Windows => Properties => Properties. Now, click the "use runtime bitmap caching" box for both your mask and the item being masked.
That's it! Publish your movie and you will see your alpha gradient movieclip masked.
ActionScript
If you just want to use only ActionScript (this way is easier if you are dynamically placing objects onto the stage), you need to set both the alpha gradient mask and the mc being masked cacheAsBitmap property to "true." Using ActionScipt to set the caching is the same as checking "use runtime bitmap caching."
mask_mc.cacheAsBitmap = true; object.cacheAsBitmap = true;
And, just like above, apply your mask to your object.
object.mask = mask_mc;
Why do we need to bother with the "cacheAsBitmap" property anyway?
When you set the "cacheAsBitap" property on a display object to "true," what you are doing is telling the Flash player to cache an internal representation of the vector object as a bitmap. Using bitmaps is much more efficient than using vector. When vector is rendered on the stage, the Flash player will render everything. So, if you have a movieclip with 10,000 vector objects stacked on top of each other, it will render each of those 10,000 objects even if objects are hidden behind other objects. When using bitmaps, you are only rendering what is visible on the stage. So you can see that when working with alpha and gradients, which are already heavy on your CPU, you want to render them as bitmaps.
Overall, bitmaps can increase performance significantly, especially if you are using complex objects, lots of animation, and/or high frame rates. Objects with these aspects require more from your processor because they are redrawn each frame. Higher frame rates mean quicker redrawing. Quicker redrawing of highly complex objects ... wel,l you get the idea. (Then, add that to slower machines, and your animation will slow down and become jerky).
Source files for the above example can be found here.
Bi-Directional Actionscript/Javascript Communication in AS3
Bi-directional Actionscript/Javascript communication is something that has been out for a while, but some Flash designers/developers still are saying, "I didn’t know you could do that."
Well you can! And with just a little bit of code.
Continue reading "Bi-Directional Actionscript/Javascript Communication in AS3"
Flash Goes Open Screen
Adobe made a surprisingly big but long speculated announcement about a new project called the Open Screen Project for Flash. This announcement is fairly significant and hopes to ensure the future of Flash and its new AIR apps.
What is this project all about?
Flash, right now, does not maintain a consistent runtime environment deployed across all devices. This means the Flash experience can vary across different devices or ‘screens’. In other words, it may not look and act the same on your mobile device, TV, or PC (PC being the most consistently high-quality experience). Through the project, however, Adobe hopes to achieve a more consistent experience across all screens.
To do this, Adobe has taken a few major steps:
2009