Screenshot of DrawTweet

What is DrawTweet?

DrawTweet is a desktop application which lets you take advantage of Wacom tablet pressure sensitivity in a social way - by letting you send your creation off to Twitter - which is hosted on the Twitpic image hosting service behind the scenes - infact everything happens without you having do do anything but click the send button - which helps you focus on your drawings.

Official DrawTweet website : drawtweet.com

Also please join the facebook group and show your support!

You can also read Wacom’s official press release for further information.

Here are some drawings drawn during the last 24 hours that caught my eye :D

by @dansfloyd

by @JasonCecrle

by @Hysuwokun

There are many ways to watch what other people are creating - if you have DrawTweet open you can view the sidebar gallery whilst you’re drawing! The gallery is a visual representation of twitter search results so you could also go to http://search.twitter.com and search the term ‘#drawtweet’ or ‘drawtweet’. Others have reported that using TweetDeck’s search column or Collecta (collecta.com) is also very nifty.

What is Bamboo Dock?

Screenshot of Bamboo Dock

Bamboo Dock is a desktop launcher built in Adobe AIR. It ships with Bamboo Tablets but can be downloaded and used by anybody. What makes Bamboo Dock special is that it gives developers the ability to create applications that take advantage of tablet pressure sensitivity. Not all of the “minis” (thats what you call a Bamboo Dock app) are about pressure sensitivity, some are just for entertainment and playful exploration. If you are an application developer you can download the Bamboo Mini SDK and start using it straight away. Go to http://bamboodeveloper.wikispaces.com/ and take a look at the tutorials and documentation. Wacom are always looking for more developers to create applications for the Bamboo Dock.

About Wacom

Wacom has always been a company I respected and admired - I’ve always enjoyed their products even as a young boy - it has only been until recently that I’ve had the oppurtunity to actually do work for them by being at the right place at the right time.

Back in early 2008 the company where I work at (Gugga) as a UX and Visual Designer was confronted by Wacom to develop Bamboo Space ( http://www.bamboospace.eu/ ) - a site which lets you share your thoughts and ideas in a desktop like playground.

After this project they asked us to create an SDK for their Bamboo Dock platform. The Bamboo Dock was created by a company called FI ( http://www.f-i.com/work/wacom/bamboo-dock ) After the release of the Bamboo Dock Gugga has taken responsibility for further development and design of the platform and building and maintaining the SDK which lets you create sensitivity enabled applications and compile it so that it runs on their dock. You can find out more about Gugga by following this link ( http://gugga.com ) - There you can also view a video presentation of Bamboo Space

Being such a huge fan of Wacom (pen-tablet owner for 7 years now) I asked them if they would be interested in me making an app for them and now finally it is online - DrawTweet is supposed to be an example of how they’d like mini’s to be done in the future - so I hope that it has perhaps inspired you to give it a try.

This is a post from: fabianvercuiel.com

DrawTweet - Share your drawings on twitter

Related posts:

1. DrawTweet A desktop application that lets you submit your drawings to...

Me going to this conference happened completely by accident and that is probably why It turned out being such an experience for me. I had 3 weeks to get plane tickets, visa and other arrangements sorted. It was quite an undertaking but so totally worth it! I was a little nervous about having to travel over 10 hours but it all turned out ok at the end.

Flash on Tap was the first conference I ever attended and it was such a joy for me to finally meet up with people I got to know online and people who I simply admire for their mad skills - namely people like Keith Peters, Papervision3D team, Koen De Weggheleire, Grant Skinner and Mario Klingemann

Day 0

I arrived the evening before in Boston and the weather was pretty shitty but Boston at night time is quite beautiful. My boss’s cousin who’s a local picked me up at the airport and drove me to the Park Plaza hotel. On the way there he told me about the history of boston, some funny stories about the engineering of the Boston tunnel and showed me around some really nice streets.

When I got to the hotel I met up with Sean McCracken who I was sharing a room with, later when I went downstairs I ran into Mark Anders, Ralph Hauwert, Jua from Hobnox etc. The rest of the evening was spent in the hotel bar having some great conversations with Sean, Stacey, Grant and his minions, Paul and a few others :)

Day 1

The first day of the conference started out in the hotel registration and then workshops, breakfast and lunch was included and I’m pretty glad I decided to go to the Papervision3D workshop - from what I could tell from talking to other people it was one of the best workshops. It was roughly 50% John Grden and 50% Andy Zupko.

John explained the Papervision3D framework in such a clear and understandable way that any beginner could catch on. I enjoyed his approach and I could say I walked out of there with a far better uderstanding of Papervision3D. They provided us with a USB stick full of source files so we could all walk away with code that we can learn from.

Andy Zupko, or as John likes to call him “the math nerd” gave a far more in-depth overview of Papervision3D and explained to us how we can optimize pv3d with layers and how we can fix z-sorting isuess.

Andy also boggled our brains with complex algorithms (well.. okay not so complex but Math is not my forte) and effects. Overall I can say that it was invaluable learning about Papervision3D from these guys. After the workshops we all headed to the castle next to the hotel.

The castle is a pretty cool venue to begin with, but the acoustics would make it hard to hear what people were saying, especially when people in the audience started talking. It was pretty cool how half the hall was taken up by beer stands and other standas such as an FDT, Influxis, Toonboom etc

People instantly started socializing and seemed to be more interested in the beer than the opening night party.. but can you blame them?

Philip Kerman did a really great show called “The Flash is right” where he called up people from the audience and asked them random trivia, I couldn’t stop laughing! I do however want to shoot myself for not recording it on camera..I’m hoping someone else did because I’d love to relive that show :D

Here’s a clip he uses in the show, unfortunately I dont have the whole thing recorded

Afterwards I met up with a friend from Animationmentor and her friend and we went out to search for a good place to eat. We eventually found a pretty cool looking restaurant and I tried clam chowder for the first time with calamari. Have I mentioned that Americans love adding chilli to all their food?

Day 2

The next morning I woke up a little underslept and scouting for breakfast. I ended up being too early for the start of the day so I grabbed my free coffee, got a pastry and walked a few blocks. Once I got back I randomly got into a conversation with Hoss Gifford (who is super talented) about drawing applications and other random things.

I love how everyone in the Flash community is so approachable and friendly, you can just start a random conversation with somebody you might know from online or not at all and almost always something meaningful would come from it.

Mark Anders - Adobe Flash Platform

Afterwards I headed off to attend the small talks, the first session was with Aldo Bucchi, he talked about “The Semantic Web” which opened up my eyes and challenged the way I thought about the internet. I recorded his session but wont be putting it out in public yet.

The session afterwards was in the castle and led by John Grden. You’d think John would talk Papervision3D but he was sharing with us his experiences with Unity3D - I found this session to be very informative and shows you what is possible when you use a more powerful player in terms of high end gaming. John also helped explain some workflows in Unity3D and explained how you can optimize a project for the IPhone!

John Grden - Papervision, Unity 3D to IPhone (Part 1)

John Grden - Papervision, Unity 3D to IPhone (Part 2)

Afterwards I headed back to the hotel to listen to Koen De Weggheleire speak about “Playing with pixels.” I’d like to point out that Koen’s book “Flex for Developers” helped me get started with Flex and as most of you know is a very talented and experienced developer. His session covered what you can do with bitmapdata and how to use AS3 for realtime image data processing. If you watch the session you will laugh a lot at his antics at the end!

Koen De Weggheilere - Playing with pixels

Lunch followed afterwards and marked the end of the small talks for the day and I have to hand it to Flash on tap organisers, the food at the conference was great :D Perfect for combining with beer!

Photo from http://flashontap.ning.com

There was a big break which gave me a chance to catch up on people I hadn’t yet gotten a chance to talk to and browsed the large selection of independent (and sometimes strange!) beer. My vote for the best beer was Moonshot

Things got very interesting when Andre Michelle started presenting “Audiotool” and discussing audio in Flash. Unfortunately many of the people were having such a good time at the back that it might be hard for you to make out his voice in the video - for that I apologise but it was the best I could do with what I had.

Andre Michelle - Adobe made some noise! + Flash 10 audio tweaks

Other highlights was GMUNK’s inspirational presentation on how he uses 3D and VFX in his work and how he deals with clients - I have recorded parts of it so if there is anyone that would like to see this video let me know and I’ll upload it as well. They also showed us “Waltz with Bashir” and talked about the process of the movie and how they used the Flash IDE to create it.. highly inspirational!

Philip Kerman

Philip Kerman finished off with his talk on creating videos and how he gets into the right state of mind for his incredibly funny videos that you can check out on youtube - He ended off singing this great song as a tribute to the Adobe updater

A few hours later Sean McCracken, Grant Skinner and co. and I went to Flash’s Cocktail bar and met up with Tink, Philip Kerman, Javier and Mims. Pretty cool place! I love the irony of the name :D

Day 3

The third day started with uber sleep deprivation but we managed to get the will to crawl out of the hotel and head to Starbucks - going to Starbucks in America really made me realize how absolutely obsessed Americans are with service - everybody wants a specific type of coffee or tea, even if its not on the menu and they expect them to remember their exact needs the next day. I was totally surprised how much they can remember considering how many clients they deal with every single day. Gotta say that was a pretty interesting experience.

We then headed to the castle where Paul Burnett had to fill in for Mark Anders because he got really sick, get better soon Mark! Paul presented Flash Catalyst.. a piece of software which I have very conflicting feelings over (but that deserves its own blog post) Unfortunately I dont have a recording for this as I was charging my batteries for the small talks :)

Conveniently enough the 1st 2 small talks I wanted to attend was inside of the castle so I just found myself a place and enjoyed the show. First up was DR.WOOHOO which did some sick things with connecting air to the creative suite software. He would also pull data from Maya into air and then output it into Illustrator and then take that information and take it to bridge. It just shows you what kind of possibilities there are with AIR. Unfortunately I can’t show the recording yet still for a few weeks since he’d like to present his session at other conferences first.

Ralph Hauwert was after DR.WOOHOO and spoke about pushing pixels with Flash 10. Ralph talked about Alchemy, Pixelbender, normal mapping in Papervision3D, his life story and other really interesting things!

Ralph Hauwert - Pushing pixels in Flash 10

After Ralph’s inspiring session I headed to the last small talk of the day inside the hotel. It was a Papervision3D panel discussion, totally unprepared and raw. Seb was supposed to have a presentation but he couldn’t make it so they did this instead. I found this to be the highlight of the conference as I got 2 ask the Papervision3D team questions about Z-sorting, camera properties and such things and Ralph and Andy gave some meaningful answers.

Things got a little nasty when someone asked about comparisons between director and Away3D but everything turned out okay at the end. Paul Burnett was there representing Adobe and spoke up when some critcisms were made about the Flash player not performing well under heavy 3D calculations, Paul also had a few things to say about director’s positive points (he used to be a component developer) and presented the question of what everyone would think about giving Flash player plug-in ability for better 3D support - the response was a resounding NO which I also agree with.

There was also some disagreement between Ralph and John about open sourcing completely vs opensourcing on every milestone. They also talked about Papervision3D as a brand and how they need to protect and promote that brand - there was also some points by John that almost 70% of the Papervision3D team is doing professional projects on Unity3D simply because there is such a big demand for 3D on the Iphone. I look forward to PapervisionX and what it has to offer to the flash community.

Afterwards I headed to the castle and enjoyed another great lunch followed with more beer tasting! Keith Paters spoke afterwards and In my opinion gathered the largest crowd for the entire conference, not surprising though considering his reputation and what he’s done for the flash community.

Keith talked about the chaos theory and fractals, the largest portion of his session was unrelated to Flash (which was something common at FOT) and focused more on exploration and playing. Keith talked about the different kinds of fractals you get and then went into how you can do these calculations in Flash using a Flex interface. Unfortunately I only have the first portion of his session recorded up to the point where he talks about the Fern fractals then my camera battery died. :( The recorded bit should still be interesting to you though.

Keith Peters - Playing with chaos

Chuck Freedman’s speech followed afterwards which was an interesting life story about how he went through his first 10 years of his Flash carreer. He talked about his troubles as a Flash developer, working on Yahoo Maps when it used Flash and then afterwards talked about the company Ribbit.

He had a fun thing in his slides where each slide represented a still from a movie, if you guessed the movie right and shouted out the name you got a shirt. I guessed Austin powers and now get to walk around with my “Ribbit” shirt ;)

Then there was a break and some prizes afterwards and finally another big highlight of the conference. Mario Klingemann (some of you may know him for the work he has done on Aviary or know him from twitter as @Quasimondo) talked about various graphic experiments with Flash, the most interesting part however was that he challenged Ralph Hauwert in a twitter contest to see if he can generate an image of the Mona lisa in 140 characters using BASE64 code.

He totally geeked out on this one but he had the audience captivated! The quality of the sound is pretty bad though again because of the noisy crowd at the back enjoying their beers ;)

Mario Klingemann

The conference closed off with Toussaint and the China band, some kind of reggae music - not sure of the genre. Was pretty good, they showed images taken at the conference as a slideshow behind them.

Toussaint and the China band

If you’ve been following other people’s photostreams or blog reviews you probably heard about the “Influxis Greenman” he closed off the conference by causing quite a commotion running around humping innocent bystanders, climbing into taxis, jumping onto rails, dancing in hotel lobbies and just being totally crazy! I believe he is one of Grant Skinners minions but I’m not 100% sure ;) Here is a photo of Greenman :)

Greenman a.k.a “Pimp”

Photo from http://flashontap.ning.com

Photo from http://flashontap.ning.com

Day 4

All good things must come to an end, unfortunately. I had to wake up early so that I could say my goodbyes to the people I met, Sean and I went to Starbucks and ran into Koen, Andre and his co-worker Allen. Allen and I had an interesting discussion about UI design, the work he’s done on Audiotool and some workflow issues in Flex. Very cool guy! :)

We went back to the hotel and the rest headed to the speakers brunch, at that point I took my bags and left to meet up with my Boss’s cousin that lives in Boston and he gave me a tour of Boston! Keep in mind this is my first time in America and I didn’t get a chance to see anything during the conference.

I got to check out the John Hancock building, Apple Store and Borders! Funnily enough I bought a book by Keith peters and then took a stroll through the city. The day went by pretty quickly and before I knew it I was on the plane back home!

So long and thanks for all the fish! I mean.. uh.. oysters!

This is a post from: fabianvercuiel.com

Flash on Tap 2009 - a retrospective (with videos!)

Related posts:

1. Installing Papervision3D on Flash and Flex There are quite a few articles out there discussing Papervision3D...

Demo

You can get the source code by right clicking on the swf file and clicking “View source”

Creating a simple slideshow in Flex 3

• Creating a static data model
• Binding to that data model
• Switching Image and Text data
• Using Effects in a sequece and triggering events from them

Please keep in mind that the text below is a direct transcript of the Video and is not intended for reading, unless you have hearing disabilities. The transcript is intended as a record for search engines so they understand the content within the video.

######Transcript Start######

Hi my name is Fabian Vercuiel and I am a designer/developer at a company called Gugga. A few days ago a friend contacted me and asked me to look at his code. He tried to create a basic slideshow and ended up using a lot of Actionscript and tweening libraries and all sorts of complicated things for something really simple. And he wanted to find a simpler way of doing it using declarative code thats easier to use and easier to modify.

So I took it upon myself to make a basic example and in this tutorial you’ll be learning how to create a basic slide show in Flex with the least amount of code. You don’t need much experience to follow along. I’ve listed a couple of things that we’ll be covering in this tutorial. I’ll just quickly go through them

The first one is creating a static data model, in our case it will be an XML and then we’ll bind to that XML data model and then we’ll have an Image and a Text title for our slideshow. Then we’ll add some fade effects.

The first thing we need to do before diving into our Flex application is to look at some of the requirements. Some of the visual requirements is that we need a slideshow image (ofcourse) and then some navigation and text describing the image.

The interaction requirements is that we should be able to navigate between the images and the previous image should fade out and a new image should swap in and fade back in. Our button should be disabled during the transition so that we cant click on it and if there is nothing before or after.

I’ll take this oppurtunity to thank lolcats because we’re going to be using some of their images in our application, the domain name is icanhascheezburger.com and you’ll find yourself spending hours looking at cats doing funny things.

So before we look at some code - here is our final application, as you can see our slideshow image is displaying, we have some navigation and text describing the image that we’re looking at. You also see that the previous button is disabled because we’re viewing the first item in the list. Before I click next - if you’re a Harry Potter fan and you haven’t read the books don’t blame me for what you’re about to see ;)

So as you can see the image is fading out and back in again and our buttons are disabled when we click next and everything is working nice and smooth. At the end of our slideshow the next button is disabled. Ok let’s look at some code

So here we are in Flex and we’ve saved out all of our assets that we’ll be using and we’ve created a project called slideshow and the application name is “Slideshow.mxml” - Let me open that up

Here we have our slideshow code, instead of starting from scratch I’m going to go through the completed code and try to better explain what I did. I’ll just start from the top, I’ve added comments so that when you download the source from my blog you can follow along and everythign should make sense to you.

The first thing I create is an XML object inside of my application. It is a static data model, you can always replace this with your own dynamic XML but for this example I wanted to keep it as simple as possible. I’ve got my gallery and inside of the gallery I’ve got seperate items. Inside of those items I’ve simply got a title and a source for my slideshow images. Very straight forward. Also I’ve specified an id for my XML so that later on I can bind to my XML data object.

Next I create 2 number objects, these handle some values inside of our app, the first one is “totalItems”. Depending on how many images you have in your XML you’d change this. For example in our XML we have 5 items so we write 4. Remember that arrays in Actionscript start at 0 so 0 is actually 1. So when we write 4 we’re actually saying “We have 5 images in our XML”

Next we have “currentItem”, this defines the starting point of our slideshow and will hold the number that specifies which image we’re viewing currently. Then below that we have our 2 sequences which will handle the fades when we navigate through our slideshow. I’ve written here that we define 2 sequences which simply do the following.

It fades out the images and then when the fade out effect is complete it either goes to the next or previous item and then fades back in the image. I’ll come back to this in a second.

Here we define our view - the view is what we see. We’ve defined some basic layout rules then we create our first item which is the text. As you can see the text is bound to “myGallery”. Remember that we gave the XML the id of “myGallery” and we’ve used curly braces to be able to access “myGallery.” Then we drill down and access “item” and then “title” and here you see “currentItem” which equals to the number of the value that we specified here. As “currentItem” changes the index changes inside of the XML. That is how we access the different items inside of our data.

This is going to change when we go to the next part which is our navigation - we have 2 buttons, our first button is “prevBtn” and our second is “nextBtn.” What happens is that when you click on a button it fires the click event which runs the following code. The first one is “previousImage” which is the name of our first sequence. In the “nextBtn” we have our sequence for “nextImage.” Then we write “.play()” which plays the sequence and then we say as soon as we click that button the “prevBtn” and “nextBtn” becomes disabled and once our sequence is finished the buttons become enabled again.

Let’s look at what happens inside of “previousImage”. We have 2 fade effects. The first fade goes from completely opaque to invisible. It takes 1 second for a single fade to complete and then on our first fade once the fade is complete “effectEnd” gets fired. Inside of “effectEnd” the magic happens inside of our slideshow.

The currentItem equals the currentItem minus 1 which takes us 1 image back into the slideshow and this is how our navigation works. The cool thing about placing this logic here is that it will wait for this fade to complete and then run our code. It seems to work really well for this circumstance. Once that effectEnd is complete the fade occurs again but this time it goes from 0 to 1.

The way we get the buttons to be enabled again is we set these rules on the enabled properties. The first one says that if the currentItem is greater than zero the item should be enabled and then on the next button if the currentItem is less than the total amount of items it should be enabled. So we don’t have to manually specify that as soon as the sequence is done it goes back to true it will know how to handle that automatically.

Below that we have our image and the image binding works the same way as with the text the only difference is that instead of binding to the title we are binding to the source.

And that is the meat of our application - don’t hesitate to leave a comment on my blog and I will be sure to get back to you

It is important to remember that there are many ways to do something in Flex and this is definitely not the only way

As you see I haven’t used things like states or transitions or any complicated logic. I don’t have a single script tag in my code. It’s important to scope the requirements of your application when you’re creating it. We know that we’re creating a very simple slideshow and that we probably will not be building upon this other than just having a slideshow.

If this was a larger scale application you’d probably want to do this differently by having the model in a seperate file and these numbers inside of the script block and also putting our event logic inside of event functions inside of the script block as well.

If you’d like to explore more ways to create slide shows in Flex I would definitely suggest reading about things like the viewstack container, states and transitions and also taking a look at the other data driven components inside of the Flex framework.

There are so many tools available to you and you’ll have a lot of fun going through them and discover new ways to do the same thing.

######Transcript End######

This is a post from: fabianvercuiel.com

Creating a simple Slideshow in Flex 3

Related posts:

1. Layout dev/design in Flex - for HTML developers IntroductionSo, you’ve probably heard quite a few people talk about...

Flex Graphical Skinning with Images

• Generating Image assets
• Skinning a Button component
• Using programmatic Scale9
• Enhancing your skin with filters
• Source files

Please keep in mind that the text below is a direct transcript of the Video and is not intended for reading, unless you have hearing disabilities. The transcript is intended as a record for search engines so they understand the content within the video.

######Transcript Start######

Hi my name is Fabian Vercuiel and I am a designer/developer at a company called Gugga. In part 1 of this series I introduced you to the concept of skinning in Flex. In this episode I am going to be diving a little bit deeper and start covering the different types of skinning. For this part I am going to start with Flex graphical skins with images and I’ll step you through the entire process of creating the skin; from generating the assets, skinning a button, using programmatic Scale9 and then finally spicing it up with a bit of filters. So I hope you enjoy.

So to create graphical skins with images you need to use your favorite graphical editing program. You can basically create it in anything whether its Photoshop, Fireworks, Gimp, Corel Draw - it doesn’t matter. For the sake of this demonstration I am going to use Photoshop and we’re going to create a button skin. So, let me open up Photoshop…as you can see I already created a button shape inside of a 100×100 pixel workspace. It’s just a simple vector shape thats drawn onto the work area.

We’re going to be taking this a bit further and style it a bit, add the different states for the button. Once we’re done with that we are going to save it out and load it up into Flex.

— Not transcribing the creation of the button as it describes itself visually —

I’m going to save out these files to my Flex project directory and take it from there. Moving on, we’re now in Flex Builder and as you can see I created a test project named “myTestProject” and saved out all of my layers in a folder called “Images” inside of the source directory. I’ve used the naming convention of the state name with the camel case “Skin.” I then saved out my asset file in the same directory, It’s always a good practice to save your files; I’ll have this available for download if you want to play around with that.

I also created an application file called graphicalSkin and a stylesheet called style.css but for this example we don’t need style.css we’ll do everything inline. Since we’re creating a button skin we need to create a button in our application with the label “Click me!”.

Then we create the style tags inline; the first thing we need to do is embed these assets inside of our Flex project. We’re just going to be skinning the actual

Button component class and not giving it a specific style name, if you don’t remember how you just write “styleName” and the name of the selector. So we write “Button” and then it’s just as simple as specifying upSkin, downSkin, overSkin and disabledSkin. Then we embed the image. Embedding basically means that the images are compiled with the swf. If you want the images to load and runtime just specify the source directly. It’s always good to embed the skinfiles and things like that which are always going to stay the same in our application. So then we write source=”images/upSkin.png” I saved it out as png files so that we can use the alpha channel. JPG files does not have an alpha channel so we dont have transparency. It’s always best to create your skinfiles using the png format.

Lemme just copy paste this. “up”, “over”, “down” and “disabled” lets save that, let’s see if we get any errors - nope, no errors. I think it’s a good time to test our application. And as you can see the image asset that we created in Photoshop is displaying correctly and the states are working - perfect. Next we need to style the text color to look correct because now it’s not very readable. In the up we want it to be light, on over we want it to be dark and then down light again. So let’s specify that quickly. “color” is for up, so we use “#CCCCCC” which is a light gray and then “text-roll-over-color” which is for over, “#222222″ and is close to black. Our text-selected-color we can make white, “#ffffff”. So let’s refresh our app - looking good.

Everything is looking correct but you’ll notice that we’ll start running into problems when we start resizing our skin. Right now the button has adopted the size of the skin that we generated in Photoshop. As soon as this label exceeds the width of this button the skin will start stretching - I’m assuming that if you’re creating a button that you’d want this to be a bit thinner in height so that it looks a bit more pleasing and functional.

Just to demonstrate what I mean if I write “Click meeeeeeeeeee!” instead of “Click me!” and refresh - this horrible stretching happens. The way we fix this is by this wonderful thing that you’ll keep running into called Scale9 or Nine slice scaling - most people I know use the term Scale9. There’s many ways of doing Scale9.

With graphical skins with images you can use programmatic Scale9, you can also specify your Scale9 parameters inside of a Flash scene file ( inside of a SWF) but we’ll do that later in another episode. First let me explain what Scale9 does - it retains the corners of your skin so that the corners don’t stretch when you resize. It slices it 4 times, you’re left with corners that look nice and beautiful. We’ll go back to Photoshop and we’ll use guides to figure out where want to put these scale9 slices. We know that our corners are 15 pixels wide so that will be a good bet as to where we should slice it.

— Not transcribing this as it describes itself visually —

So our first slice (the left one) we’ll specify now inside of our upSkin embed directive. Here we write “scaleGridLeft” and write “15″ pixels, “scaleGridTop which is also “15″ pixels. “scaleGridBottom”, let’s measure that, “85″ and “scaleGridRight”, again “85″. Let’s see if we have any errors - looks fine. We do the same for each state; now Flash knows when that image gets embedded it needs to slice the image into these parts so that these corners stay nice and round.

I think we can now build and test if everything works fine. As you can see the corners look great. Next up, we’ll resize our button. Keep in mind that we have to take into account the size of our corners, we know its 15 pixels so we times that by 2 which is 30. Our button cant be any smaller in height than 30 pixels otherwise the Scale9 will stop working since that is where our slices our set.

Let’s change the height of our button to 30 pixels - everything is working great, awesome. I’m pretty happy with how the button looks but we can take it a bit further. I’ll show you how we can apply simple enhancements like filters to give it more of a finished look.

In Flex we have 2 ways of creating filters, either in MXML or in Actionscript. When I talk about programmatic skinning using the Actionscript3 drawing API I will cover how to do it in Actionscript but for now we’re just going to do it in MXML. The way we do it in MXML is quite simple. All you need to do is simply nest your filters tag inside of your component. You can access all the different types of filters like glow, blur and drop shadow. Once you’ve specified it here it works on your component. Let’s go with drop shadow and give it an alpha value of 50%, angle of 90, blur of 5, blurY, distance, color - now as you can see there’s quite a few values just by changing one of these you can change the look of the filter quite dramatically.

Something that will help you get the right look for your filters is something I do all the time, I open up Flash and then I go to the filters menu and play with the filters there. That way I get realtime feedback on how the filters should look like.

You can also a Flex application and create some binding with some form controls like sliders so that you can test the angle for example at runtime. There are a few other ways but these 2 should work really well. I think you can get feedback through design view but I’m not a 100% sure about that. Let’s save this and run it. You can see the dropshadow is applied to our button component and its looking pretty good. I hope the episode was useful for you - next up we’ll we talking about creating animated graphical skins using images, so we’ll take this button and start adding transitions between the up, down, over and disabled state.

We can also verify that our disabled skin is working by just copy pasting our button and writing enabled=”false” Then we save, build and rerun. There you go, the disabled skin is working great.

Ok guys, looking forward on getting feedback from you, see you around!

######Transcript End######

This is a post from: fabianvercuiel.com

Skinning Flex 3 Apps - Part 2

Related posts:

1. Skinning Flex 3 Apps - Part 1 It dawned on me a while ago that there are...
2. Layout dev/design in Flex - for HTML developers IntroductionSo, you’ve probably heard quite a few people talk about...
3. Installing Papervision3D on Flash and Flex There are quite a few articles out there discussing Papervision3D...

Introduction to Flex Skinning

• Flex “CSS” Skins
• Creating a stylesheet
• Some differences between Flex CSS vs HTML CSS
• How styles work in Flex
• Styling a component

I’m doing these videos in my free time so they’re not proof-checked, well-planned or professional, so if you find any mistakes don’t hesitate to point them out. It’d be great to hear your thoughts on whether this video was helpful to you.

Please keep in mind that the text below is a direct transcript of the Video and is not intended for reading, unless you have hearing disabilities. The transcript is intended as a record for search engines so they understand the content within the video.

######Transcript Start######

Introduction

Hi everybody, my name is Fabian Vercuiel and I am a designer / developer working for a company called Gugga. In this series I will be talking about skinning Flex 3 Apps. For part 1 I will do a short introduction of Flex skinning including talking about CSS Skins, creating stylesheets and things like that. It’s just a basic overview but from there we’ll start going into more complex topics. I hope you enjoy so here’es the rest of the video:

Flex “CSS” Skinning

So the first style of skinning that I’ll be talking about in Flex Builder 3 is called “Flex CSS Skinning”, if you’ve ever used HTML you’ve probably heard of the concept, it’s not exactly the same actually it’s quite different. Some people argue that the CSS skinning in Flex 3 has absolutely no similarities to HTML and I can understand that argument from many perspectives. The concept is great, (especially if you’re new to Flex) it’s a good starting point to customizing your application especially if you’re only looking for making minor customizations to the default chrome that is packaged with Flex 3 called “Halo.” To demonstrate an example of how a skin looks like in Flex we can go to a website called “Flex Style Explorer” just google it and you should find it as a first result.

So this is basically an application built by, hmmm, by Adobe systems I believe- to demonstrate how skinnable a component is by just changing the parameters in the style panel. So if we go to the Button component, you’ll see this is how a normal Button component looks like and you’ll have all these parameters to play with. So for example if we change the color to red the font color turns to red and is displayed here in the panel. This is a good place to start learning what kind of parameters are available to you but lets get started with Flex Builder here.

The first thing you need to do is create a style tag. You have two options you can either open and close the tag inside the application and write your styles inside the document but ofcourse the best workflow would be to embed your stylesheet just like you would in HTML you’d link to the stylesheet so here you’d write style.css. Then you go to your source directory and go to new -> css file -> style.css . Now you could create this anywhere you want but for this demonstration you’ll create it in the root location. Okay, so, let’s go back to our application - let’s create something to skin. We can create a basic container with width 500 and height 500 - now you’re probably asking yourself why am I specifying the width and the height inside of the application when you could probably be creating this inside of the stylesheet? Well, in Flex most of the layout rules you dont specify inside of the stylesheet.

The Adobe Flex team strongly believes that styles are only for skinning and minor layout modifications so any layout rules or things like that would generally be done with the MXML. The way you distinguish a property like width and height (because thats what they are they’re properties not styles) and other elements is by pressing ctrl-space and you get a dialog window displaying every single element inside the Flex Framework. The properties have green circles, events have lightning bolts and these tetris squares you see here are styles so it’s a good way of learning all the styles that are available just by skimming through the list.

But yeah anyways lets continue - then we center the canvas by typing verticalCenter 0 and horizontalCenter 0. Now these are styles so we can put these inside of the stylesheet - this is a good oppurtunity to explain how you write the styles in MXML compared to writing them in the stylesheet. You’ll notice that everything writtten inside the MXML starts with a lowercase and then when the next word starts it goes to uppercase without any space and then equals - and then the property value. Inside of the styles, if I had to go in and just cut and paste this - it wouldn’t work.

We have to change it so that the CSS parser can understand whats going on. The general rule is to make the second word lower case and seperate it with a dash and then placing equals - etc. Right now its not sitting inside any style so we need to quickly create a style for the canvas called styleName=”myCanvas” - when you’re styling anything, any component inside the Flex framework you need to remember that just like in HTML when you’re styling a class you have a dot before the classname. If you’re styling a component without specifying a stylename you could go in and just write the component name so for example - Button. In most cases this is not recommended but if you’re creating some kind of custom component and you don’t specify a stylename declaration anywhere this is one option.

So anyways, our canvas is centered. Right now if we had to run the application we would probably see nothing because we only told the canvas to be 500 by 500 pixels wide and centered so to make it visual we can add a background property to the style, background-color: yellow. I think its time we run our application - as you can see we have our yellow container and everything is displaying as it should.

Now I can explain to you some more differences between styling in HTML and styling inside of Flex. Some things that you would try and do will obviously not work so if I had to type display: absolute - all these layout rules they dont work. Absolute and relative is handled by the containers themselves so for example for the application here you’d specify that the layout rules of this application is either absolutely positioned or horizontally or vertically. Generally its best to keep the layout rules of the parent application to absolute and then changing any other things inside of the application. Thats one difference, so I’ve mentioned you cant do width and height, display, you can’t float elements. Generally any kind of layout things just don’t work inside of styles.

It’s important to note that Flex CSS skinning acts as the base for all other types of skinning so if you’re going to do some skin in Flash you’d be creating it in Flash but you’d essentially be embedding that skin inside of the CSS. There are cases where you don’t like where you directly inside the actionscript but when you’re using the expressive mxml and css you would be specifying all your skins inside of the styles.

With that said I will be closing up the tutorial and I hope you enjoyed it and if you have any questions be sure to email me my contact details will be on my site - fabianvercuiel.com

######Transcript End######

This is a post from: fabianvercuiel.com

Skinning Flex 3 Apps - Part 1

Related posts:

1. Skinning Flex 3 Apps - Part 2 This is Part 2 of my video series, you can...
2. Layout dev/design in Flex - for HTML developers IntroductionSo, you’ve probably heard quite a few people talk about...
3. Installing Papervision3D on Flash and Flex There are quite a few articles out there discussing Papervision3D...

Why the concern?

Recently I decided I wanted to take a serious step towards helping others out there with the things I know, some of those things are about software being protected under trademark. Usually I couldn’t be bothered with legalities, especially when you put into perspective that Adobe is a very open and awesome company but I got a little bit of a scare a few months ago.

I remember a site called freshairapps.com owned by James Whittaker that got asked to change the domain to something which does not contain the word “air” in it. The owner of the site eventually had to change the name to refreshingapps.com Now I know for a fact that there are many people driving the flash and flex community with these words in their domain names and I wonder how they would feel if they were forced to change their names once the legal team gets to them. I did a little research, it seems that according to trademark laws if you dont actively defend it you stand a risk at losing your trademark. So if this is the case what can bloggers do to make sure they don’t fall into these problems?

Kush points out in the video and in an email he sent me:

• Read Adobe’s agreement or the company you’re blogging about
• Dont misuse logos
• If you have sponsors, you’re in a bigger risk when using their trademarks compared to a personal blog
• Don’t use the trademark in the domain name eg. kushflexblog.com
• Don’t use the name of the product in the name of the blog, except referentially eg.
  • “My Adobe Flex Blog” (Bad)
  • “My Blog about Adobe Flex” (Ok)
• It’s okay to use the trademark names inside the text of the blog

This is a post from: fabianvercuiel.com

Blogging and Trademarks, I ask Adobe

No related posts.

Getting Started

Download the source through SVN(Subversion Control)

• http://papervision3d.googlecode.com/svn/trunk/branches/ GreatWhite/

Windows

Mac

An open-source GUI for Subversion, the compelling replacement for CVS. It allows you to browse your working copies, spot changes, and operate on them, but also to browse logs and revisions of your repositories!

Installing on Flash

Using the .mxp Component

(NB: At the time of writing this the .mxp is Version 1.5 and not 2.0) If you’re still not 100% whether you want to use the component, I might be able to put your mind to rest. There are some benefits to using the component and John Grden from Rock On Flash explains it very well here

# Design-time render and editing in Flash IDE # 3 Material types supported - BitmapFileMaterial, BitmaAssetMaterial and MovieAssetMaterial # Creates MovieScene3D and Free or Target camera # Manages resizing / centering of Papervision3D scene [optional] # Dynamic masking to constrain the viewable render area to the bounds of the component [optional] # Full API and access to Scene, Camera, Collada objects to code around # Automatically loads materials via Collada file [when materials list is not given] # New Custom Panel for modifying rotation, camera zoom, camera focus, camera Z at design-time

Using the non-compiled source code

Installing on Flex

Using the compiled .swc library

(NB - The compiled .swc has been removed from the SVN until it goes out of Alpha, it is recommended you use the non-compiled source-code in the meantime since its easier to update. If you still want the .swc you can download it from here)

Using the non-compiled source code

Conclusion

This is a post from: fabianvercuiel.com

Installing Papervision3D on Flash and Flex

Related posts:

1. Skinning Flex 3 Apps - Part 2 This is Part 2 of my video series, you can...
2. Skinning Flex 3 Apps - Part 1 It dawned on me a while ago that there are...
3. Layout dev/design in Flex - for HTML developers IntroductionSo, you’ve probably heard quite a few people talk about...

Make sure you have the latest updates

Manage your ICC profiles

Disable Plug-ins

Don’t have your font list display preview

Manage your fonts

Check for damaged fonts

History States

Preset Management

Cache Levels

Pixel Doubling

Palette Thumbnail reduction

Turn off “Maximize PSD and PSB File Compatibility”

Don’t export the clipboard, drag and drop

Optimize the File Browser (CS3)

Filter Gallery

Remove Temporary Files

Close or hide the Info palette

Improving performance inside a Photoshop document

Flattening TIFF files

16-bit may be better than 32bit

Know your output

Merge some layers

Things you should already know

Improving Photoshop’s Performance on your System

Close unneeded applications and files

Get more RAM

Get a new video card

Clean up and defragment your hard drive

Move your scratch disk to a different drive

Conclusion

This is a post from: fabianvercuiel.com

Improving the performance of Photoshop

Related posts:

1. Getting you started on the road of Digital Painting It might seem quite daunting at first when you gaze...

Workspace:

Workspace Menu:

Title Bar:

Main Menu Bar:

Status Line:

Shelf:

Toolbar:

Channel Box:

Layer Editor:

Time Slider:

Range Slider:

Command Line:

Status Line:

Floating Menus:

Spacebar Menu:

Shift + Rightclick Menu:

Right Click Menu:

Conclusion:

This is a post from: fabianvercuiel.com

Introduction to Maya: The User Interface

Related posts:

1. Choosing the right colors for your interface Many times the main determining factor for the liking or...

Avoid harsh colors

Don’t let colors make text unreadable

Find a balance

Shape a mood

Use colors and value to draw attention to important areas

Conclusion

This is a post from: fabianvercuiel.com

Choosing the right colors for your interface

Related posts:

1. Introduction to Maya: The User Interface Don’t know what Maya is? It’s a spectacular 3D graphics...
2. Site-map Internet, Websites and Applications Blogging and Trademarks, I ask Adobe...