|
 |
Wednesday, July 10, 2002 |
Video with Flash MX : A Users Guide : Session 2 of 3
Short QA session.
They are showing comparisons of the same video in different players (austin powers trailer):
- Real Player 225k low badwidth. pretty good quality. (watch scene changes and transitions.) streaming.
- Windows Media Player : pretty good quality. streaming.
- Quicktime : good quality. alittle choppy, good encoding.
- Flash MX : Good quality. low badwidth. comparable to other formats.
In higher end encoding, the differences between the players become more obvious, with dedicate video players having better quality.
Encoding time:
- Flash : fast
- Quicktime : slow
FileSize
- Quicktime 4.56 megs
- Windows medi : 4.54 megs
- Flash 4.51 megs
When deciding which video codec to use, dont just think of penetration stats today, but think of where it will be in 6 months to a year.
they are shhowing a seinfeld video player, where you pick a character, and the can choose from a number of clips from the show (george has shrinkage). they keep track of how many videos you have watched. every four videos you watch, you have to watch a commerical (they showed a vw jetta commercial). You can play a new video until the entire commerical has run.
QA.
end of session.
2:47:55 PM  Google It!
|
|
Video with Flash MX : A Users Guide : Session 1 of 3.
Video in Flash MX.
Danny Mavromatis and Mike Davidson, ESPN.com
Danny and Mike work for ESPN.com which is a very popular site. they do have some power to force users to change browsers.
Video in Flash
Image Sequences
Most primitive version of video in flash is a sequence of images. They are showing some Seinfeld clips that use the technique. Basically, take a video clip, export it as a sequence of images, and then import them into flash (flash will recornize that it is a sequence of images).
problems, no sound, although you can manually add it. it is essentially an image of jpgs. no temporal compression.
QuickTime
Flash Player is embedded in player. Pretty much flash 4 compatible, but can be a little buggy. more for adding effects on top of quicktime movies.
Video on Top of Flash
Interface in Flash, and then layer video ontop of flash using DHTML and iframes. Works pretty well. problems with browser support (due to DHTML).
The Importance of Flash MX Video
- Reduces incompatibilities between systems (some difference between playback on pc and mac, pc smoother).
- Reduces complexities of mcahine interactions.
- Easier to set up on the client.
- More self-contained
- Not easiliy saveable on client-machines
- More onsistence playback across platforms.
on mac, import an 1/8 of a second blank audio on first frame. set it to stream. this will make the video drop frames if it can't keep up, which leads to better video flow.
Showing new ESPN video player. Flash Interface, with a layer of video (real or windows media) over flash. sometimes it will not come up, can take a while to load due to checking players, browser, etc...
Showing Xgames video full screen flash application / projector, with video. Pretty sweet - mc.
It is more difficult to steal video from Flash. That doesn't mean it is impossible, but for regular users, it is enough of a hassle, that most will give up or not try.
Because everything is contained within Flash, you can leverage the power of flash with video to completely customize your application (i.e. create a custom / advanced preloader for the video).
more advantages to video in flash
- no missing codec issues.
- fully transparent display mechanism
- temporal compression (only saves video data that changes from flash to flash. sorenson squeeze does this and leads to higher quality and lower file sizes).
- easily operable across flash applicaiotns.
- potential on playback on devices.
Limitations of Video in Flash
- currently not batch encodable (sorenson spark pro can do this).
- No built in buffering mechanisms (you can write your own buffering with ActionScript).
- No built in connection speed detection mchanisms.
- No sure streamtype capabilities.
- Current Flash 6 player pentration is low.
they are showing media metrix numbers for flash penetration. numbers are from march. they are very consistent in growth rates. every 14 months, pentration is up to 86% (based on his research. note, we project flash 6 rates will go up faster than in the past. -mc)
- Video does not automatically stop on last frame (you can write actionscript to stop it).
- upsacing video size is slightly inferior to other video formats.
- not a reference format (quicktime is, windows media, real are not).
- no rights managements capabilities.
- No native full screen mode.
end of session.
1:44:41 PM Google It!
|
|
Branden Hall's Session : 3 of 3 : OOP App Review
Branden is going to disset his bibliofile application.
The app helps him keep trakc of all of his books.
- Based on MVP
- View is on main timline (different frames represent different application states).
- Presenter is very simplistic.
Uses Tab component, TreeView Component, push button component.
Application gets information from a remote web service via Flash Remoting. (branden uses a cue cat to scan in the books isbn into flash. flash then sends the isbn via flash remoting to a remote web service which returns information about the book. the book information is then stored locally. cool stuff! - mc).
Data is stored in Shared Objects.
Branden is using Object.register class to cast the object from the shared object to a specific class. (SharedObjects all you to basically serialize any object, but it strips of functions).
If symbol name is not in library it assumes class name. Object.registerClass("castToClassName", objectToCast);
Note, that using this, the object's data is populated before the constructor is run, so you need to check in you constructor whether the data has been initialized yet.
Did you know? Branden's wireless network at home goes down whenever his phone rings.
note : i missed some of branden's discussion of the different models he uses within his app. - mc.
BooksModel
based on associative array. easy search, creation and removal. Cannot directly sort, can have key collisions.
Categories Model
based on a tree structure. Easy to add items, searching is easy, holds hierachical data well. Difficult to code, spanning tree can be slow, can use a lot of memory.
categories is split into two objects. one represents a single node / item. the other provides access to the tree, (you dont access the first directly, simplar to how the XML and XMLNode object are related).
branden is going over the elements of the applications UI, and show the code that responds to UI events.
end of session.
11:35:20 AM Google It!
|
|
Branden Hall Session 2 of 3 : Creating applications in Flash MX
Components
- Self encapsultated widgets
- at the core, they are just movie clips
- usually drag and drop (i.e scrollbar)
- Full API
UI Component Set 2 From Macromedia. Avaliable from Flash Exchange.
Most components support handlers, which is the name of the function that you want to be called when an event happens. By default the function is on the same timeline as the components. You can set them via the API to use functions on any object.
Components are similar to components in MS visual studio, or Swing.
Component API : Extensive, full featured API. Components can be treated like class instances.
Data Providers
- interface for a way to access sets of data.
- can set via setDataProvider methods (in supported components). accepts DataProviderClass, RecordSet, arrays of objects.
- DataProviderClass, included with some of the components (look in the components assets in the library).
- Using data provider means that data will always be in sync, so if data in dataprovider changes, any components using that dataprovider class will update themselves with the changes.
Data Glue
- Used to "auto-mungh" dataproviders to work with some components. it maps the properties to those required by listbox, and combo box components (and some others).
- Simple built in formatter.
- Included with Flash Remoting Components (avaliable from macromedia).
- Branden will put up an example at his website, waxpraxis.org.
Skinning Components
Can do with code using FStyleFormat class. Created a new syle format object, and then you can set all of its properties (look in reference panel for complete list). sf = new FStyleFormat(); sf.face = 0x00ff00; sf.addListener(componentName); sf.applyChanges();
you can also set individual properties through setStyleProperty on the component. componentName.setStyleProperty("face", 0x00ff00);
Can set globally using GlobalStyleFormat class.
Can also skin in the library, by actually editing graphics. Library > Flash UI Components > Component Skins.
Skins are broken into very small pieces. if you are making you own skins, you dont have to make them into so many small peices. it is done this way in the flash components to work with stye objects.
Customizing Components
Can extend and customize components. Extending Listbox.
- Create symbol that will be used for the item, and associate a class with it.
- The class has certain methods that will draw internals of listbox.
- Need to register the new symbol with the component.
- Couple of articles on Flash Application Developer Center on this. (one by branden, one by nigel pegg, one by greg burch).
Creating Components
- can be difficult.
- one off components, and robust, generic components. the latter can take a long time, but are usually more useful in more situations.
main pieces
- main code, displays item, drawing
- API code, runtime manipulation
- Parameter, customer UI (PI)
- Live Preview (can become complex).
branden is showing the TabBar component that he built, showing how the live preview automatically updates when properties in the property inspector is updated. Nigel Pegg is going to have a lot more info on this during his session.
Dont name a parameter "horizontal", if it gets set to true, it will rotate component.
Flash Remoting
Branden really likes it.
- "Best way to connect flash to servers. period. end of story."
- Can send and receive native Flash / Data types. don't have to do any data serialization / de-serialization.
- Can directly call remote services from flash (java, .net, cfmx, web services, etc...).
- Authoring Components are free from macromedia.com. Gateway is included with jrun4, and cfmx. will be avaliable for .net and java servers.
XML is a very verbose way to serialize data. Flash Player communicates with Flash Remoting Adaptor via AMF, a binary format created specifically to serialize ActionScript data types. very efficient and lightweight.
branden is showing his book app again. when specifying URL for remote web service, you point to the web services WSDL file (in this case, he is calling a remote web service creating in ASP.NET).
branden is passing the responder object as the first parameter to the remote method. onResult method is automatically called when data is returned from remote service.
NetDebug.as, include this and you can use the NetConnection Debuger Panel (Window > NetConnection Debugger), and it will show all of the communication bewtween flash and the server.
end of session.
10:20:59 AM Google It!
|
|
Branden Hall's Session 1 of 3.
The first day of Flash Forward involves a number of half day sessions / classes. I am sitting in Branden Hall's first session of three. The first session is on Object Oriented Programming in Flash (something that Branden and Sam Wan just wrote a book on).
Branden is discussing some of the basics of Object oriented programming in Flash, including objects vs instances, and how to create custom classes.
Importance of encapsulation
- Using getter / setter methods to access internal properties.
- Should not directly access internal object properties.
- Don't hard code references to timelines (if they are needed, pass them in through a method).
- many getter / setter methods can inidcate design problems.
Composition vs Inheritance
Branden says that Generally you should avoid inheritance (i don't agree with this, and Branden and i got into a pretty heated discussion about it on the train-mc). Inheritance in Flash can be messy.
You should consider using composition instead of inheritance. Composition is a "has a" relationship. Inhiritance is a "is a" relationship.
Design Patterns
- Take advantage of previous work that has already solved common problems.
- Object oriented and language independent (any design patter book can be applied to flash).
3 patterns
Value Object Pattern : don't use multiple getter / setter methods. multiple function calls can cause performance issues, especially for remote methods. Send a value / object which contains properties and values. Only requires one method call, and properties can be set at once: foo.setValues({name:"mike", address:"500 main st."});
Observer Pattern : Multiple events need to listen for events from a single object. The event source object allows other objects to add or remove themselves as listeners.
Easiest way is to use undocumented AsBroadcaster FooClass = function(){ AsBroadcaster.initialize(this);}FooClass.prototype.sendEvent = function(){this.broadcastMessage("onEvent");}myFoo = new Foo(); myFoo.addListener(this);
See flash coders wiki for more info.
Model / View Controller Patter : Some articles at Des / Dev Center.
- Seperate data from presentation.
- Model : Data
- View : Interface
- Controller " Logic
- All pieces are independent of one another, although code for pieces are often all combined in one place in flash (on main timlines). just make sure to comment the different sections-mc.
- Sections can be swapped out and changed without affecting other layers. (i.e. switch out view to create new interface for different devices / platforms).
- Model View Presenter (more advanced).
- This architeture works very well for creating applications in Flash.
- Layers should be completely independent of each other.
- Model should be abstracted away from viewer and controller (it should not know about them).
- The view listens for events.
Branden is showing a new app called bibliofile that he uses to keep track of all of his books. uses treemenu component, and new tabbed view component that branden built. Showing some of the listener code in the model section of the application. Uses value object pattern to pass properties / values into objects. the app has multiple frames, which each frame representing a different state of his application. The app uses Flash Remoting to get information on books from a remote web service.
TabBar component : Branden is very happy with this, he feels he hit the "sweet spot" with it (not over or under engineering it). Live preview, scalling. You add tabs through PI and set alignment, and then when the tabs are clicked, callback methods are called where you can have code that reacts to the event. In the case of brandens app, it either moves between frames, or hides movie clips (he is using it in two places).
ToolTip component : Drag and drop, add message in PI. Super easy to use.
KeyBoard Navigation Component. Isn't showing it because he didnt have time to get it in the session.
end of first hour, next hour is about components and working with flash remoting.
9:18:07 AM Google It!
|
|
© Copyright 2002 Mike Chambers.
|
|
|
