All I had to do was create the ExternalConsoleTarget class from his example and then grab the code for the Console Logging wrapper. Then in my project import the Console class and log like this …
Console.debug("Hello Chrome");
It worked for me straight out of the box. Wonderful.
This video from a MAX session has an informative demonstration of the new touch/gesture events in 10.1. Also loads of really cool new features in the AIR 2.0 runtime.
What’s coming in Adobe AIR 2.0
Here’s a great article outlining all of the new events, classes and information on how to manage the input.
I’ve scraped the code off this article for my own reference below. Please do read the article though.
Many multi-touch developers like to use an Object or Array of points to keep track of touch inputs (aka blobs) as well as an ID, and X/Y coordinatees for each point. It looks like Flash Player 10.1 will help you conform to these conventions, ActionScript-style.
flash.utils.Dictionary /* Used to track Arrays of Points */
flash.geom.Point /* One contact point */
TouchEvent.touchPointID /* Unique ID for each touch contact point */
TouchEvent.stageX
TouchEvent.stageY
TouchEvent.isPrimaryTouchPoint
A quick update on the bug we posted here about the TextArea Skin focus bug. Here’s the original post but the news from Adobe is that it’s fixed and here’s the fix …
Forgot to mention in the checkin notes that the CustomTextAreaSkin must utilize the focusSkinExclusions property. You can see it used in the default TextAreaSkin. It looks like this:
/**
* @inheritDoc
*/
override public function get focusSkinExclusions():Array { return [ textDisplay ] };
So the big news from the Adobe MAX conference yesterday was the announcement that Flash Player 10.1 will allow Flash Platform developers to create content for a range of other devices including Mobile, NetBooks and Set-top boxes. The new player will include some new multi-touch events to take advantage of this capability on Mobile, MacBook’s and Windows 7 touch-enabled devices. I’ll be looking at these events myself when they release the updated SDK and player and will be sure to post some examples and experiments.
Bigger news came in the form of a spoof ‘MythBusters’ video exploring the ‘myth’ that you can’t produce Flash content for the iPhone. Yes, Adobe will be compiling native iPhone content directly from Flash CS5. There’s no Flash plugin in the browser on the iPhone but the new FP10.1 touch events will work apparently. The compiler technology is way over my head but here’s the press release and some information on labs. It seems that Adobe have snuck a few iPhone apps onto the store in advance and the example I’ve played with, Chroma Circuit, performed very well (and is really addictive).
This got me thinking about the future for apps on the iPhone if Flash peeps all rush off trying to submit their content to the store. For a start Apple are going to be struggling to keep on top of their approval process. Apple is very strict when it comes to the Human Interface Guidelines (HIG) and the iPhone Dev kit that most devs use to generate UI elements on the iPhone ensure that developers ‘toe the line’ and by and large result in a design consistency that has been part of their success with the device. Now, I know there are already a lot of god awful apps on the iPhone that seem to deviate from the HIG exceedingly but it isn’t just the appearance of an app that is the issue here. Developing apps for the iPhone is a tricky, slippery business. Memory management and proper garbage collection is vital to the performance of the app and without thorough testing and a decent authoring/debugging environment like XCode it’s going to be very difficult indeed to create a decent iPhone app in Flash. So how will we develop decent apps for the iPhone or any of the other devices for that matter?
Well, while everyone was tweeting about the iPhone news I found myself reading through the Mobile dev FAQ’s and noticed this …
Can I use the Flex Framework to create content for the iPhone?
While it is possible to create iPhone content using the desktop Flex Framework, we do not recommend it. The Flex framework is currently optimized for execution in a desktop environment. The performance, UI, and interaction models have not been optimized for mobile devices.
Adobe is working on a mobile Flex Framework, which should be better suited for iPhone development.
What? That last line got me very excited. And then I saw the link.
And here’s a sneak preview!
Flex for mobile devices
Here’s the app they built running on an iPhone :
Interesting bit of trivia is that the codename ‘Slider’ is a joke based on a conversation in which the original Flex framework was compared with a nice juicy burger for developers and so the mobile framework would be a smaller burger … a ’slider’. As a brit … I don’t get it.
So, there’ll be a new lightweight Flex framework that will allow us to produce UI elements and advanced layouts for mobile devices and this framework is currently codenamed ‘Slider’. Now, personally the iPhone thing could be painful but lets not forget about all of the other devices that we can now develop for. A project will need to change state dynamically to fit within a range of screen sizes, layout will be extremely important as people expect their content to adjust to different orientations and the implementation of themes is also going to be huge. The Flex framework is perfect for this type of development and the Spark/FXG partnership is lightweight and flexible.
Reading the FAQ I noticed this …
On what platforms will Slider run?
The initial Slider framework will be optimized to run on high-end smartphones (phones with a processor speed of 400Mhz or more, 128MB of RAM), and will initially target standalone application environments such as Adobe AIR. This matches the category of devices targeted by Flash Player 10.
Reading between the lines here but does this suggest that the AIR runtime will also be available on devices?
UPDATE: This video on Adobe TV talks about how the process of developing the iPhone app is very similar to building an AIR app. So I guess there wont be an AIR runtime for mobile devices.
Building Mobile Applications with Adobe AIR
Some interesting information in that video. Hardware acceleration will be supported via the use of the cacheAsSurface property.
Ted Patrick has a great post on developing iPhone apps with CS5 including source. Check it out.
Here’s a real good cast of the Secret Session from yesterday with Richard Galvan which explores a bit more about the new features of Flash Pro CS5 including the Text framework and support for ligatures and flow.
They’ve added integration between the Flash IDE and Flash Builder so you can launch FB4 from the Flash IDE and setup workflows between the two environments including launching Flash pro to test from FB. This is going to be great for managing assets in Flash while coding in Flash Builder. Code snippets in Flash Pro let non-coders add interactivity too. This will allow large agencies with teams to have their tech dude add all the common code the designers need to build banners for example. Code completion in Flash mimics FB too … finally!
I’m expecting more news today in the second keynote and will update this post. If you are at MAX and see any demos of the Slider framework then please leave me a comment and let me know what you saw and heard.
I discovered a bug in the Spark ScrubBar class that I thought I’d better document. It’s a real git!
Firstly I noticed that despite setting the bufferEnd property of the class I wasn’t seeing any results. So I watched the numbers and sure enough the bufferEnd property was being set as my media loaded and was significantly larger than the playhead value which made sense.
So then I figured the skin part wasn’t being rendered so I forced a width on it in the skin class and sure enough it was rendered. I soon realised that the bufferedArea was being drawn and was being adjusted over time. Unfortunately its width was being set to exactly the same size as the playedArea element so it was hidden underneath.
So then I did some digging and I traced the calculation of the size of the skin part down to a private method in the ScrubBar class called ‘calculateAreaSize’. Both the playedArea and the bufferedArea get their sizes from this method as the ‘value’ and ‘bufferEnd’ properties change.
The problem is that the argument passed into this method is called ‘value’ which is the same name as the class property ‘value’ that is used to determine the width of playedArea. So when this method was being used to also calculate the width of bufferedArea it was yielding the same results.
The solution is to sub-class ScrubBar and then add the following methods …
override protected function updateSkinDisplayList():void
Not the most interesting of Screencasts but I thought I’d share anyway. I did this for a client while researching some inline processes. It is a really nice registration process and I intend to try and build a tutorial to show how you can use Flex layouts and transition effects to get that slick look and feel.
Also, I must apologise to Lee[AT]photoshop[DOT]com whoever you are … I made a huge mistake by using an email address that has a 99.99% chance of existing. Sorry about that Lee.
I’m currently building a video player and have built this simple player as a proof-of-concept to test the full-screen capability of the new Flex 4 sdk. I’m having trouble with my particular project as it doesn’t seem to want to trigger the FullScreenEvent.FULL_SCREEN event when the user uses the ESCAPE key to change the display state. This example was my way of testing for a bug. This example seems to work however.
What I have enjoyed about this exercise and the main reason for publishing it is the use of the new state model in Flex 4 to change the layout and properties of the components. First take a look at the example …
(Note: IFrames are not visible in RSS feeds)
Notice when you enter full-screen mode the layout changes from a vertical layout to a basic one with the controls floating on top of the video. Now take a look at the code …
That’s all of the code for this example. The two different layout objects are declared in the declarations tag.
<fx:Declarations>
<s:VerticalLayoutid="verticalLayout"gap="0"/>
<s:BasicLayoutid="basicLayout"/>
</fx:Declarations>
… and within the main content Group tag there’s a property called layout which is set for each of the two possible states. Changing the state will change the layout. The states are set in the states tag and the names are the same as the StageDisplayState.FULL_SCREEN and StageDisplayState.NORMAL string properties. Unfortunately you can’t bind to the stage.displayState property or I probably would not have needed the script tag.
So this is a much easier way of adjusting the layout dynamically and the same principle is used to change the position and size of the VideoElement and controls. The transparent rectangle below the controls is rendered only when in full-screen mode because the includeIn property is set to the fullScreen state and because this state uses the BasicLayout the children need to be positioned absolutely so the x & y coordinates are required also.
You may notice that when you exit fullscreen mode you need to click into the SWF to give it focus before you can re-click the button. I’m not entirely sure if this is a bug in the FlashPlayer or the browser (I’m in FF3.5).
Anyway, hope this helps people understand some of the great new features in Flex 4. Don’t forget to grab the source from the example above.
Yes. Things are getting slightly more confusing and I worry about just how much this is going to ‘encourage’ the young Noob’s into the wonderful world of Flex.
The Spark TextArea component will allow you to display straight text just by referencing its ‘text’ property like so …
<s:TextAreatext="hey, look at me Ma, I'm text!"/>
But if you want to start messing about with the new TextLayout framework with columns and funky wrapping then you need to import a TextFlow object into the component. You can do this very simply by using XML as long as the schema is ok. Here’s a quick example of an XML schema …
<flow:p><flow:span>There are many such lime-kilns in that tract of country, for the purpose of burning the white marble which composes a large part of the substance of the hills. Some of them, built years ago, and long deserted, with weeds growing in the vacant round of the interior, which is open to the sky, and grass and wild-flowers rooting themselves into the chinks of the stones, look already like relics of antiquity, and may yet be overspread with the lichens of centuries to come. Others, where the lime-burner still feeds his daily and nightlong fire, afford points of interest to the wanderer among the hills, who seats himself on a log of wood or a fragment of marble, to hold a chat with the solitary man. It is a lonesome, and, when the character is inclined to thought, may be an intensely thoughtful occupation; as it proved in the case of Ethan Brand, who had mused to such strange purpose, in days gone by, while the fire in this very kiln was burning.</flow:span></flow:p>
<flow:p><flow:span>The man who now watched the fire was of a different order, and troubled himself with no thoughts save the very few that were requisite to his business. At frequent intervals, he flung back the clashing weight of the iron door, and, turning his face from the insufferable glare, thrust in huge logs of oak, or stirred the immense brands with a long pole. Within the furnace were seen the curling and riotous flames, and the burning marble, almost molten with the intensity of heat; while without, the reflection of the fire quivered on the dark intricacy of the surrounding forest, and showed in the foreground a bright and ruddy little picture of the hut, the spring beside its door, the athletic and coal-begrimed figure of the lime-burner, and the half-frightened child, shrinking into the protection of his father's shadow. And when again the iron door was closed, then reappeared the tender light of the half-full moon, which vainly strove to trace out the indistinct shapes of the neighboring mountains; and, in the upper sky, there was a flitting congregation of clouds, still faintly tinged with the rosy sunset, though thus far down into the valley the sunshine had vanished long and long ago.</flow:span></flow:p>
</flow:TextFlow>
… and here’s how you import that XML (saved as a file called plainText.xml) into your TextArea component …
I’m publishing the very latest Flex sdk language reference files for my own sake as there are discrepancies between the latest builds and the ‘official’ releases.
First thing you’ll probably want to do with your Spark TextArea component is make it transparent. This used to be quite easy in Flex 3. You’d just set the borderStyle to ‘none’. Now you need to duplicate the default Spark TextAreaSkin class and remove the border and shadow rects. You can then set the background rect’s alpha property to zero. When you’ve done this and set your SkinClass property to your new skin you’ll probably be feeling pretty good about yourself and proclaiming yourself as a Flex genius. Then you’ll populate your TextArea with some text and try out the scrollbar. You might see something like this …
… now you’ll be freaking out.
The quick solution is to set the TextArea’s editable property to false but in some situations this may not be ok. Also, hacking the class to remove the glow filter on focus might also be ‘not ideal’.
If anyone can think of a clean solution to this that keeps the functionality in place but allows you to have a transparent background, I’d like to hear about it.
Recent Comments