For a recent project I had to load in HTML text from a CMS (ExpressionEngine) and display it in a Flash website. For me this is nothing new as I’ve been loading external content in to my Flash websites since I started many years ago. However this was the first time I’ve needed to do this in the Flash CS4 IDE using a very specific typeface.
I suddenly found that no matter how I tried to hack the HTML to get the bold face to work it simply would not show. After a few emails with another developer chum I found that even the example file that he sent over which used embedded Arial in a dynamic TextField would display with bold and italic straight from Flash CS3 but would only show the regular font from Flash CS4.
In previous situations I’ve set the TextField’s HTML property to true in the IDE and embedded some text using the regular font and another line of text using the bold font. However Flash CS4 only seems to be happy with that providing that the typeface you are using will allow faux bold and faux italic. Faux bold is when you are using the regular font and you click on the b or i buttons in the properties inspector to change the typeface. Flash is still using the regular font but it fakes bold by expanding the paths for the characters and fakes italic by rotating the paths for the characters. This is definitely not the prefered way to produce these fonts, especially for designers that have a keen typographic eye like the guys that I am often fortunate enough to work with.
After some frustrating trial and error, I came across a solution that seems to work well and that I will probably continue to use on future projects. To embed each font in to the library of the Flash file and export them for ActionScript. Then use CSS to set the font-family property for specific tags within a chunk of HTML text. This means I can use the actual italic cut of a particular typeface instead of faux italic in my projects and gives me much more control over the way the text is rendered. It also means that if you found your typeface was particularly thin and the difference between regular and bold was barely noticeable on screen, you might be able to swap out the bold for medium or ultra-bold depending on the typeface and get the visual hierarchy back in your text.
// Create a stylesheet to set the 'strong' tag to use the bold typeface// you cannot use 'b' because it's a tag that is recognised by Flash// already, so use a findReplace function to turn all 'bold' tag pairs// in to 'strong' tags. Or do this when the text is created.var myStyleSheet:StyleSheet = new StyleSheet();
// Use inline display to avoid an extra line return
myStyleSheet.setStyle("strong", {fontFamily:"Bryant-Bold", display:"inline"});
// Assign the stylesheet
myTextField.styleSheet = myStyleSheet;
myTextField.autoSize = "left";
myTextField.htmlText = myHTMLText;
As part of the Decode exhibition held at the V&A museum in London I joined a group of experienced and novice openFrameworks users and collaborated on a collection of very simple but very engaging interactive experiences that are part of the ReacTickles project.
We developed a series of very simple interactions that explored the five main forms of energy that make up the guiding design principles for the project; elasticity, velocity, gravity, inertia and momentum. These applications are then taken to various schools and centres around the globe and are used to help develop communication and social interaction within young children with Autistic Spectrum Conditions through playful interactions and exploration.
It’s a very interesting, thoughtful and beneficial use of technology and Interactive design and I am very keen to commit more time to help develop the project further.
As we all know video is the new photo as far as the web is concerned and for the past year I’ve slowly been recording all of my projects as video screen-casts so that I can use them to demonstrate my work more effectively. As an interactive designer my work is more than design and more than programming, it is the combination of design, animation and programming; creating a unique and engaging interactive experience for people to share. My previous portfolio has always used a series of stills taken from my projects, but you can’t really get an idea of the level of interactivity, the animation and the feel that the project has from these, video does this beautifully.
So that I can remember – and to help anyone else interested in doing the same – I’m recording the settings and processes that I’m going through to record these videos. If I ever find a better way of doing this, I will update this post with the relevant details.
Recording the video
The first thing I need to do is record my project on to my computer. For this I am using iShowU HD from Shinywhitebox. I’m capturing and outputting the video at 1280 x 720 px – standard HD size and a perfect for capturing any websites – using the Apple Animation video codec at 25 fps with quality set to Lossless and the audio is using the AAC codec at a rate of 44100 Khz in stereo. The only negative is that while the quality is extremely high, the file size is also huge with approximately 40 Mb per second of video recording which can mean at least a couple of gigabytes per video recording. To make things more manageable I’ve started filming some of my projects in sections of around 20 seconds, you need to make sure you keep your mouse in the same position between clips though.
To help me show the project I’ve created a desktop background that is white except for a grey 1280 x 720 pixels rectangle at the bottom left. I then position my browser window so that the window chrome sits outside of the 1280 x 720 area and the website takes up the fill width and height of the capture area. I’m going to start using Firefox to record any websites, as Safari and Chrome both place the annoying resize icon at the bottom right on top of my projects. Firefox has a full bar at the bottom which – with a bit of trial and error – you can position off the bottom of the screen.
Editing the recording
Once I’ve captured a successful video or group of videos, I take them in to Adobe Premiere to cut and edit them in to a suitable length. I also use this opportunity to cut out any long pauses while waiting for content to load such as buffering video or large images. This makes the examples feel more responsive and doesn’t waste valuable seconds of video time. I also use After Effects to clean up any parts that I’m not happy with and amend any text or images that have been added to the project has been launched.
Export the final video
Once I’ve edited the video and I’m happy with the final results I can now export the video to an number of final formats to be used on my online portfolio, offline portfolio, Vimeo account or any other place I might need to show it. Because they are all filmed in HD I can scale them down to any size and know that the quality will never decrease from the original.
For Vimeo I followed their compression guidelines which – in a nutshell – were the H.264/mp4 Codec at 25 fps with a video data rate of 5000 Kbps and an audio data rate of 320 Kbps and sample rate at 44100 Khz.
I’ve justed uploaded the processing source file for this experiment, you can download it here TouchOSC experiment. You will also need to download the TouchOSC iPhone app and follow the instructions on their website.
I was in my second year of my Graphic Design degree when I discovered the MA Interaction Design course at the Royal College of Arts. I was blown away by the work that the students were doing and that you could study this amazing subject, Interaction Design. Ever since then I’ve always wanted to become more and more involved in interactive projects. I spent the final couple of years of my degree focusing almost exclusively on interactive and screen-based solutions for my projects. Since then I’ve been extremely fortunate in the companies I have worked for, the great people I have met and the experience I have gained over the past years, it’s been fantastic. Given the chance to start over I would do everything again and work with the very same people that have helped me develop.
Working as a freelance Interactive Designer/Flash Developer has put me in a really fortunate position where I have a constant – if not sometimes exhausting – demand for work which keeps me extremely busy, very challenged and motivated to keep pushing myself forwards. It also gives me the opportunity to take time off when I feel I can and spend some time developing new skills and exploring new challenges to constantly push myself forwards. I’ve never been one to settle, I need to try new things and to constantly put myself in new and sometimes difficult situations and freelancing is the only way for me to continually do this. So my new challenge and also my (why didn’t I do this earlier) is to start taking time out to research and experiment various topics including physical computing, interaction design, data visualisation and mathematics, and to read, read, read.
As Massimo Banzi quotes in Getting started with Arduino ‘Interaction design is the design of any interactive experience.’ I am already familiar with and have been creating interactive online experiences since I started as an interactive designer 3 years ago, but what I intend to do is start exploring tangible experiences. I want to be able to create a physical environment that someone can use to interact with a digital environment. I want to create objects that you can touch and feel and play with instead of using the more traditional keyboard, mouse and monitor.
I have been researching and following the development of several MA Interaction Design courses at institutes around the world. However there are always pros and cons for making the decision to enroll on an MA course and so far I haven’t found a course that combines all the areas I want to work in and wont cost me £30,000+ for the fees (not to mention living costs for a 2 year course). The cons simply outweight the pros. So I’ve been speaking with a handful of interaction designers and asking them about their background and experience and how they came to work in this field. These discussions have opened up a whole range of alternative ways to gain experience in Interaction Design.
This blog will become my primary place to document my research and experiments in Interaction Design. I’ve already booked tickets at several design events across the globe such as the Ars Electronica festival, which I’ve unfortunately had to miss this year. I will storing any relevant research on this blog as well as the working and failed experiments I create.
Some of the projects I have been working on recently – or have in the pipeline – involve using the webcam in Flash. I’m getting quite excited about the fun possibilities that the webcam can open up.
This was a tiny 20 minute experiment where I am using the mouse to paint the video from my webcam directly on to the stage. The pixel colour is taken from the webcam.
There has been a bug in flash that has always niggled me, and I’ve always wanted to try and find a solution but for one reason or another never had a time to. This bug occurs when you dynamically insert text in to a TextField in Flash which is allowed to autoSize and then select all the text by dragging with the cursor. In most cases, as you drag down the text will scroll up 1 line and you will loose the top line. This is a really ugly bug.
After reading Tomek’s blog post on the same bug and his fix , I’ve managed to discover what the problem is and the slightly modified (improved… cough, cough) on Tomek’s solution.
Tomek’s solution worked perfectly, which was to insert the text, store the height, set the autoSize property to NONE and then manually increase the height of the TextField. This means that the text fits within the resizes TextField fully and does not need to scroll.
The thing I didn’t like is that I was just adding 10 pixels to the height. What if I was using a large font size and that solution didn’t work? After some experimenting I found that the value you need to increase the height of the TextField by is it’s leading. So if your leading is 0 the bug will not appear, if you leading is much greater like 24, then you will need to add 24 pixels to the height of your dynamic TextField. It seems that when Flash resizes the TextField as you flow the copy in, it doesn’t take in to account the affect the leading will have on the overall height.
My solution is:
Set the autoSize property to TextFieldAutoSize.LEFT.
Insert the new text.
Store the new height.
Set the autoSize property to TextFieldAutoSize.NONE.
Set the height to the stored height value and the leading value from the TextFields TextFormat object.
myTextField.autoSize = TextFieldAutoSize.LEFT;
myTextField.text = "lorem ipsum";
var h:Number = myTextField.height;
myTextField.autoSize = TextFieldAutoSize.NONE;
myTextField.height = h + myTextField.getTextFormat().leading;
I quickly prototyped a Flash video player that could be embedded on any HTML page. I was going to use this for my Cargo Collective portfolio but I have still yet to complete this. Although embedding video from my vimeo account feel like a much more robust solution and provides me with all the customisation options that a vimeo plus account has along with using vimeo’s CDN to stream the video which will be much faster than progressively downloading the video from my own server.
I still need to find the previous example source files that I created and once I do I will upload them to this page for archiving.
I finally managed to spend a little time exploring Flocking and Emergent Behaviour using Flash to visualise the system. This effect has been done by other people numerous times so it’s nothing new, but it’s the first time I’ve been able to try my hand at it. As you can imagine a lot more work needs to be done so that the behavior looks better and the groups appear within the system (at the moment the Agents seem to overshoot the groups a lot of the time until they are out of range to affect the group and they all disperse).
I’ve just spent the past couple of hours revisiting some tutorials and thoughts on bouncing ball physics and I wanted to try and incorporate collision detection. As far as I can tell it seems to work quite well. I even set the rotation of each of the balls based on their current x velocity so that it looks like they are actually spinning around – although this causes a bug with the bottom left and bottom right balls constantly spinning.
