06 mai 2008
YUI Rich Editor Upload Extension (updated)
May 13, 2008 - Update: I added a fully functional example. In that way you can use the example files instead of copying text from the previous links (Like Peter Briers said in a comment, copy and paste results in not readable scripts). I hope it could be useful.
When I started this blog I said that I wasn't sure about what I'm going to write, and one of the things that I have in mind is well...Web Development my current job, but I wasn't sure that my job or some of my code were really helpful beyond what you can find in some programming language manual like the excellent PHP manual, but maybe this time I can help or improve in some way the work started for other guys.
Well before I begin I would like to say that this JavaScript file is in 99.9% not mine, I just add some things that hopefully would make it better. Some things that I added are:
- Added a custom div container to store all the upload functionality (label, input button, upload button)
- Keep the style separated in a external CSS file
- Added a YUI button to make the upload
- Added YUI JSON utility to parse the server response
- Added custom status messages (errors)
- Change the name of some variables to suit the examples in the YUI documentation
And so the script is: yui_image_uploader (remember to copy the code and paste in a new file, name the file yui-image-uploader.js)
I also modified the PHP script that handles the upload in the server side, this one is very different to the original one and I think that probably you will need PHP 5.2.0 and up to run it well.
Here it is: yui_image_uploader (remember to copy the code and paste in a new file, name the file yui_image_uploader.php)
Finally the CSS that you need to make the upload extension look nice is: yui_image_uploader
And here is some example that you can use: yui_image_uploader_example (remember that you need to include the JavaScript YUI libraries like yahoo-dom-event, element, container-core, menu, button, connection, json, editor and our upload extension: yui-image-uploader.js)
Finally remember that I said that this work is 0.01% mine, well the 99.9% is by Dennis Muhlestein, Thanks a lot Dennis.
Here is a picture of the Yui editor (with upload extension) in action:
* tested in IE 7 and Mozilla Firefox 2
Fully functional example: yui_image_uploader
04 mai 2008
Cellphones sharing stuff
Hello! like I promise in the previous post I'll continue with the first of two post related to music in which I'll use the music symbols that I created before.
Like some people know, I work in a company that sells things related to cellphones, things like images, ringtones and other stuff, so I came with the idea of two cellphones sharing stuff. I hope you enjoy this Inkscape tutorial and let's get started.
First we need to draw the "cellphone boy", so using the Rectangle tool draw a rectangle with rounded corners. Choose black for the fill color and the stroke none (FIGURE 1).
FIGURE 1 Cellphone boy basic shape.
Now comes a tip that I brought from the Flash world (thanks to Chris Georgenes), this tip consist in selecting the just created cellphone shape and duplicate it (Edit > Duplicate), then pick a kind of gray color for the fill of the new just created rectangle (remember to keep the stroke to none), after that (always selected the gray rectangle) go to Path > Dynamic Offset to make the gray rectangle smaller. In this way the first black rectangle becomes the "outline" of the gray rectangle (FIGURE 2).
But you'll probably may be guessing why just don't add the stroke to one single rectangle, well it depends but with this technique you can achieve an outline with a varied weight, that sometimes is a nice thing to pursue. Other thing that you gain is at the time of scaling, because the scaled shape will be scaled uniformly, both the outline and the fill (because they are different objects). I make some experiments with scaling shapes with stroke and fill (both in the same object), and sometimes only the fill scales but the stroke doesn't.
FIGURE 2 Use Dynamic Offset to scale the duplicated rectangle.
After that we need some special shapes to use it for giving our cellphone boy some volume. To do that duplicate the gray rectangle and drag it to some free space in your page or canvas, then create a "helper" rectangle and arrange the two shapes in a way we can cut and get the shape that we want. Then select both rectangles and do Path > Difference. (FIGURE 3)
FIGURE 3 Using a helper rectangle to get the special shape that we want.
Duplicate the just created shape and then flip it horizontally. After that change the fill color of the two shapes to a darker shade of gray than the base rectangle. Using the align panel, position the the two shapes at both sides (left and right) of the gray base rectangle, then apply some blur (maybe 4 is ok). Repeat the process for the top and bottom highlights shapes (FIGURE 4).
FIGURE 4 The special shapes add volume (highlights and some shadows) to our cellphone.
Now we are going to add the screen and number buttons to our cellphone, to do that just use some rounded rectangles, notice that in the screen I used two rectangles, the one that is in the background haves a linear gradient with a diagonal orientation (FIGURE 5).
FIGURE 5 Adding the screen and buttons to our cellphone.
Finally add the face to our rectangle, using the circle tool for the eyes and the pen tool (Bezier Path Tool) or the pencil tool to do the eyebrows (FIGURE 6).
FIGURE 6 The final cellphone.
We are done with this tutorial but don't stay here and go further. Be creative and put this cellphone boy character to work or do something. Mine is below sharing some stuff with his cellphone girlfriend. (FIGURE 7)
FIGURE 7 Two cellphones sharing some stuff.
Inkscape Source File: cellphones_sharing
27 avril 2008
Music symbols
The other day I was doing some works that tried to express music in some way, one was for a speaker animation and the other for two cellphones that were sharing some music. The funny thing is that neither of both works was approved, so that means that I can share the works with you, my few (but growing) blog readers.
So I'll begin with the music symbols that I'll use in my future posts (stay tuned!!), this music symbols are somewhat simple but you can improve it easily (change color, arrange differently, add glow or shadow, etc.), once you have the original shapes.
Inkscape Source File: music_symbols
07 avril 2008
Notebooks
I was doing some Inkscape drawings lately, I would like to say that I enjoyed a lot when I was doing them and more since the Inkscape 0.46 release!
In this time I did some notebooks that I would like to use for some icons in a project that I'm working (FIGURE 1).
FIGURE 1 The Notebooks
One of the main problems that arise when I was drawing this notebook was the rings in the notebook's side, because they suggest that are above the notebook cover but also are below (confusing, huh) and more when you have to deal with the layers used in Inkscape. Well the only solution that I found was to accurately select and move the nodes that make the ring in a way that I can make the effect believable (FIGURE 2).
FIGURE 2 Moving the nodes that make the ring to suggest the ring goes behind the back cover
Some other problems that I found were the aligning of the rings and the ring holes, also the space or separation between the ring holes. I think this could be easier when you work with a vertical notebook since the beginning but I worked in a kind of perspective way since the start. To solve this I used some temp rectangles to help me align the stuff, a big one for the rings and some little ones for the ring holes.
Finally maybe this notebook could be useful to you and some of your projects. If you find it useful, I don't have a problem if you don't mention or credit me, maybe just leave a comment just to know that you used it and that it was helpful to you.
Bye
Inkscape source file: notebook
31 mars 2008
Linux Babies
I created this animation almost one and a half years ago for a friend of mine (Juliux) when his first little baby was born. Juliux likes a lot Open Source technologies (in fact he inspired me to go and learn open source technologies and software when I was in the university, well maybe I'm not that good student... I still use Windows), so I thought at that time that maybe if I make some of the famous Open source characters babies, that will be right for the occasion, so I started the project.
First I started with Tux, with Tux I don't have too much problems because the Tux character it's already established. I just make some of the face features smaller, like the eyes and the head, I also added the "Bobo" (that thing that babies likes a lot).
Then I followed with the baby MySQL dolphin, just like Tux, the dolphin character was already established in some way, so I keep it simple and draw small features like the eyes, the mouth and the fins.
Now the problems started, the Apache baby. With the Apache baby I just had the Apache feather to take inspiration from, and that was enough, I just have to draw a Apache baby of the people that lived in the US. Again I keep the character simple with small features and details.
With the Red Hat character, just like Apache I only had the Hat. Then I draw a baby using that big hat :)
Finally the Firefox baby fox. With this one I watched some photos of real fox babies and then I came with the final character design.
So I had the characters, but now I have to put them in some situation or to do something. Then I remembered the toy that spins above the babies little bed, just like the one that appears in the Toy Story movie!
I think I wrote too much about the creative and design process of this animation that I forgot to talk about how it was achieved in Flash. Well I started with and spend the most of the time in designing the characters in Flash, after that I added the animation of the characters moving around, some people that first watched this animation thought that it was achieved using some complex ActionScript code, but is not, actually is very simple.
I just applied some motion tween to the character moving from one side to the other, then I scaled the character to simulate some depth in a kind of orbit effect. Then I applied another motion tween similar to the first one but in opposite direction. To make the effect believable I used two layers for each character one for the character moving in the front and the other for the character moving behind.
Finally I added some button to control the animation and that's it!
The animation:
17 mars 2008
Elephpant arrives to El Salvador
It just arrived a few days ago and although I'm not sure but I think that my Elephpant could be the first Elephpant in El Salvador :D
Here is Elephpant joining forces with Cochesaurus (me) and Guayo (the baby Ram)
Now I think that I'm a better PHP Web Developer :)
16 mars 2008
Senna river watercolor
I think I did this watercolor three years ago (when I still used to paint watercolor paintings) for a friend. I take inspiration from a picture of the Senna and at the end I was really happy because the result was better than I expected; if you've painted with watercolors before, you know that is really a hard technique to master, just like is very quick to get nice results, also you really need to have a plan before put the brush on the paper, because once you've made the stroke you have sometimes to react very quickly.
Let me share some tips of this painting with you:
- For the clouds I dampen the paper slightly (only where the clouds are supposed to be) with some clean water and then with a nice hue of blue (phthalo blue) I painted the sky leaving some blank spaces for the clouds. Take some towel paper or napkin paper if you notice that the blue is spreading too much.
- For the trees and plants I used a "sea sponge" (one of my favorite painting tools) and starting from the lightest color (yellow), I made some sponge prints on the paper.
- For the water I used some layers of painting. The first layers are very transparent and then the successive ones are more opaque, so that means that you have to use less water at the time of mixing the watercolors. At this time take advantage and while the paint in the river border (just next to the wall) is still damp take some earth hues and paint slightly on the border, use this same technique for the boat border.
- For the boat waves use some sandpaper. Use it carefully and slightly.
Here is the painting:
Finally I wish I could have some free time, lately I have a lot of things to do regarding the University, the work, etc. So is since a while that I don't paint but in the near future if God gives me life, I'm going to paint again. I remember that times when I used to paint, I felt very spontaneous and happy!
See ya later and as always thanks for reading :)
23 février 2008
Curl Tree (Spiral Tree) Tutorial
Following with my integration examples, this time we'll try to integrate Inkscape and Adobe Flash (Flash 8 or Flash CS3 is Ok for this tutorial) in a Curl or Spiral Tree. This tutorial doesn't aim to be or cover advanced techniques so a new comer to Inkscape or Flash could find this easy to follow, but maybe some intermediate users (like me) or other users could learn something.
So let's get started...
First open Inkscape and select the Spirals tool, then draw a some big spiral in the page (mine is like 430x430px FIGURE 1)
FIGURE 1 A Spiral. Notice the two rhombus, you can use it to roll/unroll the spiral.
After that we need to add a new bezier point or node but before that we need to convert the spiral to a path. So select the spiral and then beginning from the menu do Path > Object to Path. Following to that, select the edit path nodes tool (the tool that is just below the Select tool) and click the spiral, you'll notice a series of points along the spiral. Then in the menu over the Edit Path tool select Insert a new node... (FIGURE 2)
FIGURE 2 The Edit Path Tool options (you can also double click to add a new node).
To add the node, click near the last outside node. After that drag the last outside node down keeping it centered.
We need to give the curl (maybe is not a curl but a spiral, but you know I like girls with curls so I'll refer that way :) ) a more stylized shape, so to add the curve click the bottom node and notice a little circle, that circle we'll allow us give a nice curve. Drag the circle and also keep pressed the Control Key to restrict the angle, so we can obtain a vertical or 90 degrees angle. Keep tweaking the nodes and the figure until you obtain a satisfactory result. Tip: Remove nodes if necessary, I also used the Make Selected Nodes Symmetric Tool to smooth the curves (FIGURE 3).
FIGURE 3 The Curl and his nodes
We are done with the curl!! but we need to export it now, so select File > Export Bitmap in the dialog select Drawing and then click in Export. After the export process, we have a nice curl png file that we can import in Flash, so let's do that.
Open Flash and create a new document, the default dimensions 550x400px are Ok, also set the framerate to 30 frames per second. Select the default Layer (Layer 1) then go to File > Import > Import to Stage. In the import dialog select our just recent created curl png file. The curl appears in the stage.
Now if necessary resize the curl with the Free Transform Tool, remember to keep pressed the Shift key to proportionally constrain the shape. Keep selected the curl and now go to Modify > Bitmap > Trace Bitmap... and select the following values: (FIGURE 4)
FIGURE 4 Trace the imported curl.
Note: When applying the Trace Bitmap to the curl I noticed that a slight stroke is leaved after the trace, we need to remove it because in the next step the result will not be the desired because of that. To remove it, just select the curl and move it to the right or left and you'll notice the stroke, select it and then delete it.
Now if you click the curl with the sub selection tool (white arrow) you notice that is a lot of points or nodes and since later we are going to apply a thing called shape tween that works best if the shape haves few nodes, we need to reduce the quantity of nodes. To do that select the figure with the selection tool (black arrow) and then go to Modify > Shape > Optimize... and select the following values: (FIGURE 5)
FIGURE 5 Optimize the curl shape. If everything is Ok we'll obtain a 98% nodes reduction.
Now create a new layer and move a copy of the curl to that layer. Create a new layer and move it to the bottom, name it stem. In the stem layer draw a stroke or curved line with the pen or brush tool, that will be our stem. After that we need to join the curls with the stem, to do it you'll optionally need to alter the original curl, but because we have a copy or duplicate of the original one in another layer, there is not problem. So by example in the bottom left curl, I wanted to remove a few nodes with the sub-selection tool, to do that just select the nodes you want to delete and then press the delete key (FIGURE 6).
FIGURE 6 Adding the bottom left curl to the tree.
Removing some nodes often is not enough, so to add a nice and smooth join between the stem and the curl you need to drag some nodes, alter the bezier handles of some nodes or alter the curves in the curl. To do the mentioned things the selection and sub-selection tool will be some of your preferred tools (FIGURE 7).
FIGURE 7 Joining the curl with the stem.
After adding all the curls and a bit of animation your timeline and the curl tree could look like this: (FIGURE 8)
FIGURE 8 The final timeline and stage.
Hey coche but not too fast, this tutorial is not done yet. Ok so let's see how we can add a little bit of animation. We are going to apply a Flash animation technique called Shape Tweening, this technique also called morphing is useful to alter the shape and color of things. Is important to remember that this technique only can be applied to shapes and not symbols, also like I said before if the change between the two final shapes is too dramatic, the results will not be the desired ones. So we need to maintain the shapes not so complicated and this is achieved using fewer nodes in the shape.
So let's animate the curl, to do that first we need to alter the anchor point. The anchor point is a white circle that appears when you select the shape with the Free Transform Tool, this anchor point is like when you needed to do a circle and don't have a compass, so you cut the side of a box and then do two holes, and in each hole you put a pencil. You kept one pencil stay while moving the other to draw the circle, is easy and effective, I'm sure you tried that nice trick before!
We need to move the anchor point to the left so we can scale the curl and then apply the effect. But before that make a new keyframe around frame 81.
Tip: To make a keyframe just press the F6 key in frame 81 or right click and then insert a new keyframe.
So now in the keyframe 1 move the anchor point and then scale a little bit to the left the curl (FIGURE 9).
FIGURE 9 Moving the anchor point to the left (top) and scaling horizontally the curl (bottom) in frame 1.
We are ready to apply the shape tween so right click in the layer that we are currently working and from the dialog select Create Shape Tween. If everything is Ok a green arrow will appears.
Tip: in Flash 8 to add the shape tween just click in some frame between the keyframes 1 and 81 and then in the properties panel from the Tween combo box list select Shape.
Now to make the animation more smooth we are going to add a keyframe in frame 40, the shape tween now is divided in two. In the first one select a frame and then from the properties panel apply a ease in with value -100, for the second one apply a ease out with value 100. Now we are done! at last!! (FIGURE 10)
FIGURE 10 Adding a smooth animation using shape tweens.
Note: Do You know that Flash has taken many ideas from traditional animation like the acceleration of an object, in Flash is referred to easing. But in traditional animation is called slow in and slow out, but contrary to what people would think slow out is not the same to easing out but easing in and vice versa.
Our final animation:
Conclusion:
I don't know if a Curl tree makes a lot of sense but I think it shows some basic techniques in Flash and some approaches to use nice external programs like Inkscape. Also I think that a Curl tree could be used to create a nice menu or something in Flash in where each curl could be a menu item. I hope you liked and thanks for reading!
* This tutorial was inspired in one of the Rore's brushes. Thanks Rore
13 février 2008
Mudjungle banner
Hello, I've been working in a Inkscape - Flash integration example tutorial, but it have taken more time that I expected, so in the meanwhile I just did a Gimp banner using some of the nicest gimp brushes available out there. I used for the leaves in the top the leaves brushes made by Rore and for the board and chalk text some Pastel brushes made by Rene Jensen (aka Centipede).
See ya soon,
27 janvier 2008
Elephpant
Following the enthusiasm for spread PHP to the entire world :) I just happy because Vincent Pontier (aka the Roubio) , the creator of the PHP elephpant authorized me to post the elephpant, this time made in Inkscape. By the way check Vincent's Web site (http://www.elroubio.net/), is full of nice illustrations and artworks related to PHP, great work Vincent!!
Inkscape source file: elephpant2
