Put your message here! Contact me for more information
 
 







 

Archive for the ‘Tutorials’ Category


 


I’ve just made a comments on php.net’s manual page under imagecopyresized() about resizing transparent PNGs with GD. Here is the post again, hopefully it can help someone. Comments are welcome.

Belows is the code snipet that allows you to resize a transparent PNG and composite it into another image. The code is tested to work with PHP5.1.2, GD2, but I think it can also work with other versions of PHP and GD.

The code has been commented to help you read through it. The idea of resizing the transparent PNG image is to create a new destination image which is completely transparent then turn off the imageAlphaBlending of this new image so that when the PNG source file is copied, its alpha channel is still retained.

===Code:===


/**
* Compose a PNG file over a src file.
* If new width/ height are defined, then resize the PNG (and keep all the transparency info)
* Author: Alex Le - http://www.alexle.net
*/
function imageComposeAlpha( &$src, &$ovr, $ovr_x, $ovr_y, $ovr_w = false, $ovr_h = false)
{
if( $ovr_w && $ovr_h )
$ovr = imageResizeAlpha( $ovr, $ovr_w, $ovr_h );

/* Noew compose the 2 images */
imagecopy($src, $ovr, $ovr_x, $ovr_y, 0, 0, imagesx($ovr), imagesy($ovr) );
}

/**
* Resize a PNG file with transparency to given dimensions
* and still retain the alpha channel information
* Author: Alex Le - http://www.alexle.net
*/
function imageResizeAlpha(&$src, $w, $h)
{
/* create a new image with the new width and height */
$temp = imagecreatetruecolor($w, $h);

/* making the new image transparent */
$background = imagecolorallocate($temp, 0, 0, 0);
ImageColorTransparent($temp, $background); // make the new temp image all transparent
imagealphablending($temp, false); // turn off the alpha blending to keep the alpha channel

/* Resize the PNG file */
/* use imagecopyresized to gain some performance but loose some quality */
imagecopyresized($temp, $src, 0, 0, 0, 0, $w, $h, imagesx($src), imagesy($src));
/* use imagecopyresampled if you concern more about the quality */
//imagecopyresampled($temp, $src, 0, 0, 0, 0, $w, $h, imagesx($src), imagesy($src));
return $temp;
}
?>

===Example usage:===


header('Content-type: image/png');

/* Open the photo and the overlay image */
$photoImage = ImageCreateFromJPEG('images/MiuMiu.jpg');
$overlay = ImageCreateFromPNG('images/hair-trans.png');

$percent = 0.8;
$newW = ceil(imagesx($overlay) * $percent);
$newH = ceil(imagesy($overlay) * $percent);

/* Compose the overlay photo over the target image */
imageComposeAlpha( $photoImage, $overlay, 86, 15, $newW, $newH );

/* Open another PNG file, then resize and compose it */
$watermark = imagecreatefrompng('images/watermark.png');
imageComposeAlpha( $photoImage, $watermark, 10, 20, imagesx($watermark)/2, imagesy($watermark)/2 );

/**
* Open the same PNG file then compose without resizing
* As the original $watermark is passed by reference, it was resized already.
* So we have to reopen it.
*/
$watermark = imagecreatefrompng('images/watermark.png');
imageComposeAlpha( $photoImage, $watermark, 80, 350);
Imagepng($photoImage); // output to browser

ImageDestroy($photoImage);
ImageDestroy($overlay);
ImageDestroy($watermark);
?>

view comments
 

if($p) {adsense_deluxe_ads(”);}Opening files with different custom extensions in DreamWeaver is pretty annoying: it’ll ask you for the external edit after shouting out the complain. And yes, after you configure Dreamweaver to open the file (through **Edit > Preference > File Type/ Editors**), you only get a plain Code view of the file. **Where the @#$@#$ is the Design View?** And you are working on the next killer template for a site but the template just happens to be of extension ***.thml**. In this case, I’m talking about **CakePHP**. Its default template extension is ***.THTML**. But don’t worry, be happy. Here is the solution to enable DreamWeaver Design View for any custom filetypes, and ***.THML** in particular.

**Now take a deep breath, I know you’ve been waiting for this answer. I know I have.**

- Go to **[Your_Drive_Here]:\Program Files\Macromedia\Dreamweaver MX 2004\Configuration\**
- Open the file **Extensions.txt** and add your custom extensions to the list. Remeber, in **Extensions.txt**, it’s got to be all CAPS. For **CakePhp**, add **THML** to the first line (the one ends with :All Documents) and the **16th** line of the PHP group. Here is the code for the Extensions.txt fileHTM,HTML,SHTM,SHTML,HTA,HTC,XHTML,STM,SSI,JS,AS,ASC,ASR,XML,XSL,XSD,DTD,XSLT,RSS,RDF,LBI,DWT,ASP,ASA,ASPX,ASCX,ASMX,CONFIG,CS,CSS,CFM,CFML,CFC,TLD,TXT,PHP,PHP3,PHP4,PHP5,TPL,LASSO,JSP,JSF,VB,VBS,VTM,VTML,INC,JAVA,EDML,WML,THTML,INC:All Documents
HTM,HTML,HTA,HTC,XHTML:HTML Documents
SHTM,SHTML,STM,SSI,INC:Server-Side Includes
JS:JavaScript Documents
XML,DTD,XSD,XSL,XSLT,RSS,RDF:XML Files
LBI:Library Files
DWT:Template Files
CSS:Style Sheets
ASP,ASA:Active Server Pages
ASPX,ASCX,ASMX,CS,VB,CONFIG:Active Server Plus Pages
CFM,CFML,CFC:ColdFusion Templates
AS:ActionScript Files
ASC:ActionScript Communication Files
ASR:ActionScript Remote Files
TXT:Text Files
PHP,PHP3,PHP4,PHP5,TPL,INC,THTML:PHP Files
LASSO:Lasso Files
JSP,JST:Java Server Pages
JSF:Fireworks Script
TLD:Tag Library Descriptor Files
JAVA:Java Files
WML:WML Files
EDML:EDML Files
VBS:VBScript Files
VTM,VTML:VTML Files
As this first step is just for Dreamweaver to recognize the new file extensions, we have to further edit another config file.
- Go to the **DocumentTypes** folder (still in the same path), edit the file **MMDocumentTypes.xml**\\ (fullpath: [Your_Drive_Here]:\Program Files\Macromedia\Dreamweaver MX 2004\Configuration\**DocumentTypes\MMDocumentTypes.xml**) with a Text Editor (i.e. Notepad or Notepad++). It’s not advisible to edit this particular xml file with Dreamweaver as the software may go crazy as it’s being used to edit itself.
- Go to l**ine 67**, add the THTML extesion to the **winfileextension** and **macfileextensionlist** attributes. Here is the code exerpt

<br /> <MMString:loadString id="mmdocumenttypes_14" /><br />





- Restart DreamWeaver, then open the .thml of CakePHP. Voila! It’s working! Yay! No more blind-coding.

=== Final Remarks ===

I hope you enjoy the tip. To consult the original documentations, please visit [[http://www.adobe.com/cfusion/knowledgebase/index.cfm?id=tn_16410|Dreamweaver Technote: Changing and adding file extensions recognized by Dreamweaver MX]]. if($p)adsense_deluxe_ads(’MediumRectangleLeft’);My final take on this: Dreamweaver is an excellent tool, but the engineers did short of this very important features. Why is it not easier to assign a file extension to be opened with the Design View? Frontpage’s been doing it for years! I don’t know what is the problem with the Dreamweaver team but this is just plain dumb. Sorry, it’s pretty dumb - and it actually managed to be looked over during the user testing. Amazing. But how hard is it to include the new assignment in the GUI? Not that hard at all. -1 for you Dreamweaver!

Anyway, now with the THTML file is through, good luck with CakePHP. Please design the next killer websites to take back the glory for PHP from the RoR crowd.

view comments
 

I’d like to republish my answer to a question on Sitepoint.com’s forum at http://www.sitepoint.com/forums/showthread.php?t=404876 about taking GIF animated screencast instead of outputting as the commonly used Flash. The GIF files have been scaled to fit to normal resolution (its original size is a whopping +900px!) so the image is quite grainy and doesn’t look as good. Click on them for a better view.

I’ve been using Camtasia for a while to produce flash videos and always know that Camtasia can do more than just outputting to Flash. After reading your question, I played with Techsmith Camtasia (I’m using 3.1.1) and found the Export to GIF option in the “Produce Video As” dialog. The rest is just playing with the settings to get to the right color option and file size. The output size is pretty good: I orignially recorded a 50sec long clip of 900 x 464, using the default settings, the file size output is 340Kb! Just a little bit bigger than the 256Kb upload limit of SitePoint. The produced color is slightly off because there is a wide spectrum of color in the screencast.
Stripe Designer Screenshot
I chopped the clip down to about 16 secs and the fiesize is 124KB. And here is an attachment of the screencast in GIF. I used [url]http://www.stripedesigner.com[/url] as the test sample because there are small details (the stripes and small patterns) and some animations to see how good the output compression is.

Here is another sample of the clip with Dither On, 256 Color with Fixed palete. The size is a whopping 470Kb but notice how there are more colors. The stripes are quite grainy but it’s understandable because of the dithering and limited color palete. The clip is also a bit longer, close to the orignial 50 sec screen recording.

Stripe Designer Screenshot

The result is quite satisfactory, however, I wouldn’t advice to use GIF output for movie or screencast of high color bitrates as we all know that GIF only support 256 colors. I wonder what would happen if we have PNG24-animation (with alpha-channel fullyloaded) ??

So what is my take on this? Probably producing Flash video is a good choice for long, graphics-heavy screencasts as the output SWF will have much better interaction (thanks to the navigational control bar) and higher quality (no pallete-color restriction). But for short clips of screencast, I’d say animated GIF if perfect for the job. Why? GIF is a lot more portable than Flash. Secondly, GIF can be used on mobile phones if you need it to while FlashLite player hasn’t done too well in the mobile phone sector. Thirdly, some people hate Flash and they get FlashBlock to block Flash clips. I do this all the time when go reading news. Newssite now have tons of annoying flash ads that I’m more than to be happy to get rid of them by switching FlashBlock to ON. This leaves animated GIF to be a universal solution to solve the screencast question.

By the way, go for Techsmite Camtasion if you want to do serious screencasts — it’s a much superior application than any other similar products out there!

view comments
 

Tutorial with video is coming soon.

This post serves as a temporary place-holder for the tutorial on how to use Stripe Desinger with Photoshop.

- Alex

view comments