Flash Actionscript Banner using Fuse Kit 2.1
I recently made a flash header for a client using the Fuse Animation Kit, and wanted to post this as a real world code example. The Fuse Kit is an incredible Event & Animation Sequencer developed by Moses Gunesch. It’s currently only written as Actionscript 2.0 classes, but hopefully that’s going to change soon. This swf consists of nine images with smoothing enabled, all placed on the stage in the first frame. They’re also all on separate layers, and each given an instance name.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 | /* * Copyright 2007 (c) Marco Di Giuseppe, http://designmarco.com * * Permission is hereby granted, free of charge, to any person * obtaining a copy of this software and associated documentation * files (the "Software"), to deal in the Software without * restriction, including without limitation the rights to use, * copy, modify, merge, publish, distribute, sub license, and/or sell * copies of the Software, and to permit persons to whom the * Software is furnished to do so, subject to the following * conditions: * * The above copyright notice and this permission notice shall be * included in all copies or substantial portions of the Software. * * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND * NON INFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR * OTHER DEALINGS IN THE SOFTWARE. */ Stage.align = "TL"; Stage.scaleMode = "noScale"; import com.mosesSupposes.fuse.*; ZigoEngine.register(Fuse,PennerEasing); ZigoEngine.ROUND_RESULTS = true; _quality = "HIGH"; function init() { wand_mc._visible = false; wand_mc._x = 0; wand_mc._y = 0; logo_mc._x = 980; logo_mc._y = 0; a._visible = false; b._visible = false; c._visible = false; d._visible = false; a._x = -44; a._y = 0; b._x = 0; b._y = -92; c._x = 0; c._y = -241; d._x = 0; d._y = 0; atxt_mc._x = 420; atxt_mc._y = 50; vdude_mc._visible = false; vdude_mc._x = Stage.width/2-250; vdude_mc._y = 25; vdude2_mc._visible = false; vdude2_mc._x = Stage.width/2-50; vdude2_mc._y = 5; van_mc._x = 980; van_mc._y = 25; bigfuse(); } function bigfuse() { var f = new Fuse(); f.push([{target:logo_mc, y:Math.round(20), x:Math.round(100), start_scale:0, extra1:1.2, ease:'easeOutBack', time:.8}, {target:atxt_mc, start_fade:0, x:'30', y:'-30', ease:'easeOutQuart', time:1, delay:.8}]); f.push({delay:.7}); f.push([{target:logo_mc, fade:0, time:1.5, ease:'easeInOutExpo'}, {target:atxt_mc, fade:0, ease:'easeOutQuart', time:1}, {target:a, start_fade:0, x:0, y:'-225', time:3, ease:'easeInOutQuart', trigger:1}]); f.push({target:b, start_fade:0, y:0, time:3, ease:'easeInOutQuart', trigger:2}); f.push([{target:a, fade:0}, {target:d, start_fade:0, y:'-400', x:'-100', ease:'easeOutQuart', scale:200, time:3, trigger:1}]); f.push([{target:b, fade:0}, {target:c, start_fade:0, y:'200', scale:120, ease:'easeOutQuart', time:2, trigger:1}]); f.push([{target:d, fade:0}, {target:c, brightOffset:100, time:2, ease:'easeOutExpo', trigger:1.5}]); f.push([{target:c, fade:0}, {target:van_mc, x:Math.round(50), ease:'easeOutExpo', time:3, trigger:1}]); f.push({target:vdude_mc, fade:100, start_scale:0, scale:75, x:Stage.width/2-50, y:8, ease:'easeOutQuart', time:1}); f.push([{target:vdude_mc, start_fade:100, time:2, ease:'easeOutQuad'}, {target:vdude2_mc, x:Stage.width/2-50, start_fade:0, time:2, ease:'easeOutExpo'}, {target:btxt_mc, start_fade:0, delay:1, time:1, start_x:580, x:Math.ceil(610), start_y:60, y:Math.ceil(30), ease:'easeOutQuart'}]); f.push([{target:wand_mc, start_fade:0, delay:1, time:3, ease:'easeOutQuart'}, {target:van_mc, ease:'easeOutSine', start_fade:100, time:1}, {target:vdude2_mc, start_fade:100, ease:'easeOutSine', time:1}, {target:logo_mc, fade:0}]); f.start(); } init(); stop(); |
Encoding NTSC Video to FLV for the internet
designmarco video encoding
Computer monitors display square pixels with a 1:1 ratio, projected one after another as “progressive” images.
NTSC video consists of horizontal lines displayed as two separate “interlaced” fields.
Most people have a screen resolution of 1024 x 768, which is your typical notebook computer with a 15-inch screen. Unfortunately, the actual view-port is considerably smaller depending on the browser settings.
I have found that 480×360 is a comfortable size, and leaves enough space around the video to breathe.
File size however is completely subjective, and handled much differently over different connection speeds. If the data rate of the video is encoded at a rate faster than it can be transferred, you will experience stuttering, and extremely choppy playback.
When encoding flash video I typically keep it around 700bps, and always use the On2 v6 encoding option. The final size of the .flv should ideally be under 5mb, and can even be as large as 10mb. Anything larger than 10mb will take longer than anyone is willing to wait. On the bright side, once a video is loaded, it remains in the browser cache. This means it will play instantly upon second viewing. Another option is to provide a download link, so they can view the video on their computer. In this case the video should remain as a QuickTime .mov, and not be encoded to flash video.
Convert DV to 4×3 (square pixel)
- Capture at 720 x 480 pixels.
- De-interlace using Gaussian Blur Blend Fields.
- Crop eight pixels from the left and right sides (so it’s 704 x 480).
- Resize the video to 640 x 480 and set pixel aspect ratio set to 1:1 square.
- Export video using the Animation codec that does not use any compression. (Some programs allow you to skip this step, and export the file with the correct pixel aspect ratio the first time)
- Open the new file, re-size to 480 x 360, and export with Sorenson 3 compression.
- Import into flash and encode using the On2V6 codec with a 700bps data rate. (higher data rates will create files too large to play over the internet)