The Flex framework is constantly being updated with bug fixes and new features. Adobe Flash Builder has a mechanism for patching the IDE, but it does not really keep the framework itself updated. In this article, I’ll demonstrate how you can take advantage of the latest updates by installing Flex 4.5 in Adobe Flash Builder 4.
Download Flex
At the time of this writing, the latest Flex framework updates can be downloaded from opensource.adobe.com. Typically, you will want to download the latest stable release build of the full SDK.
Downloading Flex
Extract the archive
I saved the zip file to a centralized place named “ActionScript Libraries/Flex” in my Documents folder. The SDK zip file should extract into a folder named something similar to “flex_sdk_4.5.0.20967″. It’s best not to rename it. The default folder names come in handy when you end up with multiple downloaded versions of the SDK.
Adjust Flash Builder preferences
Now we need to let Flash Builder know that the downloaded files are available. In the Preferences dialog of Flash Builder, select “Flash Builder | Installed Flex SDKs.” You should see something similar to the image below.
The Flash Builder Preferences dialog
In the “Installed Flex SDKs” section, click the “Add…” button. You should be prompted to locate the new files.
The Installed SDKs section of Flash Builder Preferences
After selecting the folder where you have placed the framework, you will notice that it automatically inserts “Flex 4.5″ into the “Flex SDK name” field (assuming that you are installing 4.5). You should consider using the full version number for the SDK name–especially if you are working in a team environment. This helps ensure that everyone is using the same framework version when working on a shared project. In my case, I am using “Flex 4.5.0.20967″ for the name.
Adding the SDK
Set the default framework version
You should now see the new framework version in the list of installed SDKs. If you want the new version to be the default for new projects, then click the checkbox next to it. Click “OK” when you are finished making changes.
Create a new project
Now to take the framework for a test drive. Select “File | New | Flex Project”. If you set the new framework as the default, it should automatically be selected as shown below. If it is not the default, then you will need to click “Use a specific SDK” and select the SDK from the pull-down menu.
Creating a new Flex project
Additional note
As Flex is updated, the Flash plug-in requirements might change along with it. Flash Builder is smart enough to figure out which version is needed. Note below that in the project properties, the required plug-in version defaults to 10.2.0.
Note the default plug-in version in the project properties
You’re done
Enjoy your updated SDK!
Posted in: Flash, Uncategorized
Tags: Adobe, Flash Builder, Flex
For Flash projects that target the web, I usually create hand-coded HTML pages that use SWFObject to embed the published file. SWFObject is an open source JavaScript library for embedding Flash files that is very elegant, and tested on most browsers.
I recently authored several Flash files that expect variables to be passed in via the FlashVars parameter for the EMBED and OBJECT tags. In the process of creating HTML pages for these published files, I realized that since SWFObject dynamically embeds the file in the page (when using the “dynamic publishing” method), it could also be re-embedded in order to refresh itself with updated data from a form.
A setup like this can be helpful if you need an easy way to test your FlashVars values without having to repeatedly edit code.
Demonstration
The following example will reappear in a future post with additional tips regarding FlashVars.
This is the embedded Flash movie:
This is an HTML form. Edit the values below and click Refresh to update the embedded Flash movie.
Downloads
Posted in: Flash
Tags: ActionScript, Flash, FlashVars, Flex, JavaScript, SWFObject
I recently assisted a colleague who was experiencing unexpected behavior with the HSlider and VSlider controls in Flex 4. When launching his application, the slider’s thumb was not starting out at the correct position.
As it turns out, there is a known quirk with the slider controls when used with floating-point values. The workaround is to specify a snapInterval value for the slider control. In fact, it is probably good practice to always set both snapInterval and stepSize for any slider that could potentially have a fractional value. The stepSize property affects the increments when using the keyboard, whereas the snapInterval property affects the increments when using the mouse.
Demonstration
Posted in: Flash
Tags: ActionScript, Flex
Post revisions
- May 3, 2010: Original post
- July 7, 2010: Added embedded Flash demonstration and downloadable source.
Any Flash developer who has done extensive work with video has had to build a custom player at some point. I’ve lost count of how many I’ve built. That’s why I eagerly awaited Adobe Flash Builder 4 with Flex 4.
No more reinventing the wheel with OSMF?
Flex 4 includes the Open Source Media Framework (OSMF). The intent of OSMF is to eliminate the need to make custom players. Flex also provides a couple of display components that take advantage of OSMF (VideoDisplay and VideoPlayer).
For some developers, OSMF will deliver exactly what is needed. Unfortunately for others, there are some glitches that need workarounds – especially when it comes to using the components with streaming video.
Scrubbing problems
One of the sites I maintain is a portal for a lot of streaming educational videos. The videos tend to be from 45 minutes to well over an hour. When my new copy of Flash Builder 4 arrived, I immediately set out to test one of those long videos with the new Spark VideoPlayer component. I was discouraged with the results.
Dragging the scrub bar from the beginning of the video to a later point could take anywhere from a few seconds to a full minute! My videos are hosted on the Akamai CDN, so I knew that it was unlikely that performance issues were with the network.
After digging through the Flex framework code, I discovered that when dragging the scrub bar, the VideoPlayer component continuously issues seek() commands. For progressive playback, this results in the ability to perform “live scrubbing.” It is unwise to attempt live scrubbing with long streaming videos. By the time a user finishes dragging the thumb from one end of the scrubber to the other, the player has bombarded the streaming server with dozens of seek() requests.
Luckily, I figured out a way to prevent this behavior without having to resort to “monkey patching” the framework. The solution consists of intercepting the scrubber events before the player gets a chance to act on them.
Code
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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
| package com.retrorocket.components
{
import flash.events.Event;
import mx.events.FlexEvent;
import org.osmf.net.StreamingURLResource;
import spark.components.VideoPlayer;
import spark.components.mediaClasses.DynamicStreamingVideoSource;
/**
* The BetterScrubVideoPlayer control extends the Spark <code>VideoPlayer<code>
* control to provide a more responsive experience when "scrubbing"
* streaming videos of extended durations.
*
* From the blog Coker Knows! (www.cokerknows.com).
*
* @version 20100430
*
* @author Eric Coker
* @copyright Copyright (c) 2010, Retro Rocket Multimedia, Inc. (www.retrorocket.com)
* @license http://creativecommons.org/licenses/by/3.0/
* Creative Commons Attribution 3.0 Unported License
* In plain english: Feel free to use or modify this code for any
* commercial or non-commercial purpose, but please retain the
* credits and license information in the code, as well as the
* link to the original download location.
*
* @langversion 3.0
* @playerversion Flash 10
* @playerversion AIR 1.5
* @productversion Flex 4
*/
public class BetterScrubVideoPlayer extends VideoPlayer
{
//----------------------------------------------------------------------
//
// Constructor
//
//----------------------------------------------------------------------
/**
* Constructor.
*/
public function BetterScrubVideoPlayer()
{
super();
}
//----------------------------------------------------------------------
//
// Overridden methods
//
//----------------------------------------------------------------------
/**
* @private
*/
override protected function partAdded(partName:String,
instance:Object):void
{
super.partAdded(partName, instance);
if (instance == this.scrubBar) {
this.scrubBar.addEventListener(
Event.CHANGE,
scrubBar_changeHandler,
false,
100, // Higher priority than the parent class
true
);
this.scrubBar.addEventListener(
FlexEvent.CHANGE_END,
scrubBar_changeEndHandler,
false,
100, // Higher priority than the parent class
true
);
}
}
/**
* @private
*/
override protected function partRemoved(partName:String,
instance:Object):void
{
super.partRemoved(partName, instance);
if (instance == this.scrubBar) {
this.removeEventListener(Event.CHANGE, scrubBar_changeHandler);
this.removeEventListener(FlexEvent.CHANGE_END, scrubBar_changeEndHandler);
}
}
//----------------------------------------------------------------------
//
// Event handlers
//
//----------------------------------------------------------------------
/**
* Stops the parent class from continuously calling seek()
* while scrubbing streaming media.
*
* @private
*/
private function scrubBar_changeHandler(event:Event):void
{
if (this.source is DynamicStreamingVideoSource ||
this.source is StreamingURLResource) {
event.stopImmediatePropagation();
return;
}
if (this.source is String &&
this.source.indexOf('rtmp://') == 0) {
event.stopImmediatePropagation();
return;
}
}
/**
* Updates the video position when the user stops scrubbing.
*
* @private
*/
private function scrubBar_changeEndHandler(event:FlexEvent):void
{
this.seek(scrubBar.value);
}
}
} |
Downloads
Posted in: Flash
Tags: ActionScript, Flash, Flex, OSMF, Video
Greetings, and welcome to my nerdy blog.
I suppose introductions are in order. My name is Eric Coker. There are many titles used to describe what I do for a living, but one of the earliest and most generic I have used is “Multimedia Developer.”
I’ve been creating interactive multimedia professionally for 15 years. Like a lot of people that started in the industry at that same time as me, I come from a creative background, and taught myself most of what I know about development (with the assistance of some great mailing lists and books).
In those 15 years, I went from HyperCard to Director to Flash to Flex. I went from hand-coding HTML pages to hand-coding PHP pages to using frameworks and design patterns. I went from compressing QuickTime movies to compressing FLV movies. If there is one thing that “Coker Knows” for sure, it is that it is impossible to know everything about everything related to this industry.
This blog is my attempt to give back to the community for all of the great information, advice, and inspiration. I will be posting various articles on techniques I use in my daily work, as well as arcane solutions for unexpected problems that I spend hours or days figuring out (so that you don’t have to!).
Enjoy!
Posted in: General
