Another IE (now 7) Hack

April 21st, 2009

Hi, i always, or 90%, talk about the Flash or Actionscript tips, classas and more, but today i have to work again with XHTML and CSS and one more time i hate the Internet Explorer – Microsoft Windows too. But well, the problem is: my css code work with Google Chrome and Mozilla Firefox but don’t in IE.

I thought to make other CSS file and import it with conditional only for IE like show my post about the CSS Conditional Comments, but searching and reading one more i saw one article that resolve my problem, use an IE7 Hack, YES! The Hack work easelly and fine  like i will show.

In IE 6 to make a Hack into the CSS file you put the ‘underline’ symbol before the CSS and work fine only into the IE 6. The Internet Explorer Seven this Hack die but the IE Team forgot the *. Simple, right? You need only put the * symbol before your CSS code and work your CSS code only into the IE7.

32
33
34
35
36
37
38
39
40
41
.scroll
{
  	height: 100px;
  	overflow: auto;
  	position: absolute; /* fix for IE to respect overflow */
	left:50px;
	*left:15px; /* Hack for IE 7 */
	width:630px;
	float:left;
}

For Firefox, Safari and Chrome you will see the left equal 50 pixels but only for Internet Explorer the left will be 15 pixels, with this you cannot create other files for your Hacks. Try it!

Proportional Scale

April 20th, 2009

Well how do i scale my objects proportionally? Hmm this is a problem, but now a problem resolved. Now you can use the scaleObject class, a simple class that make only one thing: scale objects proportionally.

This is great to maximize images into the fullscreen stage or other things when you need create nicelly thumbnails, i used this class into the drag large images with zoom post, when the picture is loaded i put the code to contract the image size into the mask moviclip. Now i will explane some thing about it, look the simple code:

1
2
import com.dLibs.utils.scaleObject;
var so:scaleObject = new scaleObject(movieClip, { width : stage.stageWidth, height : stage.stageHeight });

Really simple? Yeah. You will need only create a scaleObject and into the constructor arguments put the movieclip or bitmap object that you want scale and into the second argument, the object, you put the min width and min height of your object or the stage, width and height receive numbers.

2
var soTwo:scaleObject = new scaleObject(bitmap, { width : 500, height : 400 });

If the bitmap or movieclip have more width than height will show full height and hide the extra width.
You can download the scaleObject class  using Google Code or with the link bellow.

Download: scaleObject class (203)

Hi again, now i will show an update of the post Drag large images inside de box. Now the class dragIt have the option to use zoom in and out the content of the box.

Well, the primary function of  the class that is drag the content inside the mask box continue the same, and you can see how work into the post: Drag large images inside de box. For the new feature you need re-download the class using the SVN address or download the sample on final of the this post.

(Either JavaScript is not active or you are using an old version of Adobe Flash Player. Please install the newest Flash Player.)

So, i added a simple public function for this class to add the zoom in and zoom out movieclip into the dragIt object, named addZoom, and work so simple like show bellow:

1
2
3
4
var drag:dragIt = new dragIt();
drag.drag(content,maskImage,true);
drag.addZoom(more,less);
addChild(drag);

Its really simple, the line 3 you will set the instance name of the zoom in and zoom out moviclip and when you click in one of these clips the content movieclip will resize more or less depending the button that you clicked.

Other thing added into the dragIt class is the possibility to resize the image on start the class. If you see the line 2 of the code sample and compare with the same line in Drag large images inside de box post will see that the ultimate argument is true, by default this is set false but if you want load the new content and resize it for the width and height proportion only put the true as you latest argument.

Any questions comment the post and download the sample to test it.

Download: Drag image with zoom (383)

Post Edited: April – 16, 2009.

Hi, im Joisiney Leandro, new author of the DES84 Blog, and now i will talk something about the navigation structure that i created. This can manage all the navigation of your project, for small sites, more easily and speedily of you create your structure from zero.

What this structure do?

• Send click events for the Google Analytics.
• Create a protection block for the user cannot click in the same button more one time or click and two buttons when load the first. The final user may wait the transition to interact again with the menu links.
• Enable the forward and backward browser buttons.
• Change the page title and the URL address depending the link called.
• Return the progress event, percent loaded, when you load external data.
• Return the complete event and make the simple transition, fade in and fade out, and you can do your own transition when load external animations.
• You can create custom forward and backward buttons to use inside the Flash, this feature work only inside the browser, its good to full screen sites.

All the documentation of the classe is included in a implement document, the class used in this example is the NavegateAdressAnalitics, you can read the documentation into the ImplementsNavegateAdressAnalitics on the same folder of the class (only in portuguese ).

Well, go code. Here is the API’s that you need to use the navigation structure work fine. [SWFAdress, TweenLite, GAForFlash]

See the working sample clicking here: http://blog.des84.com/projects/navigation/

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
package
{
	import JrsAs.events.Events;
	import JrsAs.events.ProgressEvents;
	import JrsAs.pub.core.NavegateAdressAnalitics;
	import JrsAs.pub.shap.Rectangle;
	import JrsAs.str.core.SWFAddress;
 
	import flash.display.MovieClip;
	import flash.events.MouseEvent;
	import flash.text.TextField;
 
	public class Acesso extends MovieClip
	{
		public var mcDoc_group:MovieClip;
		public var mcDoc_Um:MovieClip;
		public var mcDoc_Dois:MovieClip;
		public var mcDoc_Tres:MovieClip;
		public var mcDoc_Quatro:MovieClip;
		public var mcDoc_Avancar:MovieClip;
		public var mcDoc_Voltar:MovieClip;
		//------------------------------
		private var cot_transition:NavegateAdressAnalitics;
		private var mc_block:Rectangle;
 
		public function Acesso():void
		{
			mc_block = new Rectangle();
			mc_block.jrs_Height = 300;
			mc_block.jrs_Width = 700;
			mc_block.jrs_ColorBG = 0xff0000;
			this.stage.addChild(mc_block);
 
			cot_transition = new NavegateAdressAnalitics();
			cot_transition.jrs_SetDomain = "http://www.domeujeito.com.br";
			cot_transition.jrs_SetUA = "UA-5351680-2";
			cot_transition.jrs_SetMCBlockTransition = mc_block;
			cot_transition.jrs_SetArgsPag = {id:0, onLoad:Empresa, setTitle:"Empresa"};
			cot_transition.jrs_SetArgsPag = {id:1, onLoad:Historia, setTitle:"História"};
			cot_transition.jrs_SetArgsPag = {id:2, onLoad:"produtos.swf", setTitle:"Produtos", onLoadFunction:"jrs_TextParams", onLoadParams:["joice","rocha"]};
			cot_transition.jrs_SetArgsPag = {id:3, onLoad:Contato, setTitle:"Contato", onLoadParams:["joice","rocha"]};
 
			cot_transition.jrs_SetEditArgsPag = {id:3, setTitle:"Fale Conosco", onLoadParams:["joice 3","rocha 3"]};
 
			cot_transition.addEventListener(Events.COMPLETE, jrs_complete);
			cot_transition.addEventListener(ProgressEvents.PROGRESSO, jrs_progress);
 
			mcDoc_group.addChild(cot_transition);
 
			SWFAddress.setInit("/0/Empresa");
 
			mcDoc_Um.id = "/0/Empresa";
			mcDoc_Dois.id = "/1/História";
			mcDoc_Tres.id = "/2/Produtos"
			mcDoc_Quatro.id = "/3/Fale Conosco";
 
			mcDoc_Um.addEventListener(MouseEvent.CLICK, click);
			mcDoc_Dois.addEventListener(MouseEvent.CLICK, click);
			mcDoc_Tres.addEventListener(MouseEvent.CLICK, click);
			mcDoc_Quatro.addEventListener(MouseEvent.CLICK, click);
 
			mcDoc_Avancar.addEventListener(MouseEvent.CLICK, avancar);
			mcDoc_Voltar.addEventListener(MouseEvent.CLICK, voltar);
		}
		private function click(event:MouseEvent):void
		{
			if(cot_transition.jrs_GetProximaPagina)SWFAddress.setValue(String(event.currentTarget.id));
		}
		private function voltar(event:MouseEvent):void
		{
			if(cot_transition.jrs_GetProximaPagina)SWFAddress.back();
		}
		private function avancar(event:MouseEvent):void
		{
			if(cot_transition.jrs_GetProximaPagina)SWFAddress.forward();
		}
		private function jrs_complete(event:Events):void
		{
			//trace("event.info");
		}
		private function jrs_progress(event:ProgressEvents):void
		{
			//trace(event.info.bytesLoaded);
		}
	}
}

Description of the Acesso.as

28
29
30
31
32
mc_block = new Rectangle();
mc_block.jrs_Height = 300;
mc_block.jrs_Width = 700;
mc_block.jrs_ColorBG = 0xff0000;
this.stage.addChild(mc_block);

Creating the Movieclip that will block the access for the multiple clicks, for this the movieclip may added to stage.

34
35
36
cot_transition = new NavegateAdressAnalitics();
cot_transition.jrs_SetDomain = "http://www.domeujeito.com.br";
cot_transition.jrs_SetUA = "UA-5351680-2";

The line 34 initialize the class and create the main objects, the line 35 and 36 create the Google Analytics object, you need put your site URL and your Google Analytics ID for this site, always use these two setter functions to GA for Flash work right.

37
cot_transition.jrs_SetMCBlockTransition = mc_block;

This setter function is not necessary but it will resolve some probably navigation problems, it set the object that will block the stage when have the transition.

39
40
41
42
cot_transition.jrs_SetArgsPag = {id:0, onLoad:Empresa, setTitle:"Empresa"};
cot_transition.jrs_SetArgsPag = {id:1, onLoad:Historia, setTitle:"História"};
cot_transition.jrs_SetArgsPag = {id:2, onLoad:"produtos.swf", setTitle:"Produtos", onLoadFunction:"jrs_TextParams", onLoadParams:["joice","rocha"]};
cot_transition.jrs_SetArgsPag = {id:3, onLoad:Contato, setTitle:"Contato", onLoadParams:["joice","rocha"]};

These lines, 39 to 42, create the pages of your project. The setter function send an object with all data using two ways:

Loading an external SWF and use this parameters:
id:uint = id of the page, case have two links with the same name.
onLoad:* = the address of the external SWF file.
setTitle:String = set the Title of the page called.
onLoadFunction:String = this set the function name into the loaded file that will called when the file load is complete.
onLoadParams:Array = you can send here the parameters to onLoadFunction.

Importing class from the library
id:uint = id of the page, case have two links with the same name.
onLoad:* = classe/MovieClip name.
setTitle:String = set the Title of the page called.
onLoadFunction:String = in this case, attaching a class, you can choose if you call a function or not, if not use it but you send the parameters, these parameters will be send direct to constructor of the class.
onLoadParams:Array = you can send here the parameters to onLoadFunction or to constructor.

44
cot_transition.jrs_SetEditArgsPag = {id:3, setTitle:"Fale Conosco", onLoadParams:["joice 3","rocha 3"]};

Using the jrs_SetEditArgsPag is possible change the data of the parameters of the pages created. If you create a product page and you want change the Title of the page when click in one or other product you can. Its easy like show the line 40.

51
SWFAddress.setInit("/0/Empresa");

Here th API SWFAdress come and set the initial page, the first page that will be opened.

The format of the URL is: http://….com.br/index.html#/id/Titulo/ when id is the responsible for the navigation, change the id and you will change the page.

72
if(cot_transition.jrs_GetProximaPagina)SWFAddress.back();

The Setter SWFAddress.back() only work right into the browser, and this make you go to the backward page.

76
if(cot_transition.jrs_GetProximaPagina)SWFAddress.forward();

The Getter jrs_GetProximaPagina verify if you can go to the next page, case you go to a page and click in backward button, if possible, return true, and the setter SWFAddress.forward will make you go to the next page too.

You can download the sample here: Navigation Structure (231)

PS: into the SWF file that you will download, contain all class that you need to make the structure work fine, including GA for Flash, Tweenlite and SWFAddress. Other thing is, the post dont talk about the possible that remove the backward and forward button if is no necessary but this is possible.

Hi, today i made a dragger to view large images inside the small mask and here i am to show for you how to use it if you need. Well, the dragger need only create a simple object and set the content movieclip and the mask movieclip instances, the classe do the rest. See the sample bellow.

(Either JavaScript is not active or you are using an old version of Adobe Flash Player. Please install the newest Flash Player.)

You can click and drag the image into this box, you can put the box or with the width and height as you want and the same for the loaded image, you can use the size as you want too. But how to do it work fine ? Let’s go to the document class:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
package
{
	import com.dLibs.events.Events;
	import com.dLibs.loadit;
	import com.dLibs.utils.dragIt;
 
	import flash.display.MovieClip;
 
	public class DocumentClass extends MovieClip
	{
		private var image:loadit;
		private var theImage:String = "http://farm4.static.flickr.com/3631/3375666390_505733a332_b.jpg";
 
		public function DocumentClass():void
		{
			image = new loadit(theImage,true);
			image.addEventListener(Events.COMPLETE, imgComplete);
			image.addEventListener(Events.PROGRESS, imgProgress);
			content.addChild(image);
		}
 
		private function imgProgress(e:Events):void
		{
			// trace(e.obj.percentLoaded);
		}
 
		private function imgComplete(e:Events):void
		{
			var drag:dragIt = new dragIt();
			drag.drag(content,maskImage);
			addChild(drag);
		}
	}
}

Here i load the Flickr image (Jesus Jones, Me and Joisiney Leandro) and only into the complete event i put the function that make the dragger. First step is create the dragIt object like show the line 29.

The second step is set the Movieclips, the content clip and the maks clip, using the Public Function drag. See the line 30, and add the object to stage aaand done. Test the movie and you can drag your own pictures into the mask, so easy. To make the sample you can download the sample bellow or only classes using the SVN repository: http://asdatalibs.googlecode.com/svn/trunk/

Download the sample project: Drag large images into the box (210)

Hi for all again and today i will write here something about the File Class, how to create, read and write data into a file and store it in local machine.

Well, yesterday i had the problem to create a file log on an AIR project, for two hours i read some articles and sample chapters about File class and only today (now, 9 April @12:15) i resolve this problem: create a class to create and write data into the File.

The code sample is:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import com.dLibs.air.recFile;
 
var nFile:recFile = new recFile();
nFile.setDiretory = "diretoryName";
 
// fileText is a textfield
fileText.text = "";
 
// saveButtom is a movieClip
saveButtom.addEventListener(MouseEvent.CLICK, saveTheFile);
 
function saveTheFile(m:MouseEvent):void
{
	var theDate:Date = new Date();
	var dateNow:String = String(theDate.getHours() + ":" + theDate.getMinutes() + ":" + theDate.getSeconds());
	var textBox:String = String(dateNow + " : " + fileText.text + "\n");
	nFile.writeData = textBox; // result sample: 13:08:32 : content of the textbox
	fileText.text = "";
}

The default format of the file is HTM, but you can change it too using the first argument of the constructor like show bellow:

3
var nFile:recFile = new recFile(“txt”);

Well, to save the data you need call the public set function writeData, see line 17. The string that you send to writeData function will be write at the last line, case document type is HTM or HTML, or after the last character for other document types.

Fine, but where my file? Hmmm, see it. Using the complete constructor arguments you can set the document type, the folder that you want save the file and too the name of the document. No one of these arguments is necessary to create the file, by default the document will be save using type HTM, saved in the Desktop, but you can change to Documents folder for Mac and My Documents for Windows, and the last, name of the file will be the date: dd_mm_yyyy.

Other set function that you can use is the setDiretory. If you chosse to create the file into the Documents folder with extension txt and there you want create other folder with the name of the your AIR project, what you can do to make it ? It’s so simple:

var nFile:recFile = new recFile(“txt”,"documents");
nFile.setDiretory = "projectName"

This today will create a file named 09_Apr_2009.txt into your My Documents / projectName folder automatically, if there have this file you will write the data at the last line of this.

You can download the full source code using the download bellow, or you can download only the classes using the SVN client: http://asdatalibs.googlecode.com/svn/trunk/

Download: Create, read and write file using AIR (231)

Yeah, really is this. After the Project 10 to the 100th. that receive 150.000 ideas to help save the world, now the Google want grow up your company.

Google Ventures seeks to discover and grow great companies – we believe in the power of entrepreneurs to do amazing things. We’re studying a broad range of industries, including consumer Internet, software, hardware, clean-tech, bio-tech and health care. We invest anywhere from seed to mezzanine stage and embrace the challenge of helping young companies grow from the garage to global relevance.

Your company no need have potential to be the next Google acquisition, of course, this is to help little companies with good ideas grow up together. You can read more about it in the link bellow.

Link: http://www.google.com/ventures/

Hi again, today i read an article about 50 thinks that every Mac Geek may know about Apple, its so much interesting.

Like a champion cyclist knows bike parts,a car buff knows model years, and a sports fan knows win-loss records, all Mac geeks worth the title must know these things.

There you will know about some thing lile:

  • How to reset your iPod or iPhone
  • Saving email draft in your iPhone
  • Better alternatives for iChat and Safari
  • Use encrypted disk images to hold supersecret files
  • Organize PDFS in iTunes
  • Control another Mac remotely
  • and so much more…

Link: http://www.maclife.com/article/feature/50_things_every_mac_geek_should_know?page=0,0

Serve well to serve when, for this im working hard with my freelance jobs and now making a new version of my blog. Well, i will do not change only the layout and done. No, will change the profile, the idea.

The Blog will talk with you not only about Flash or Actionscript but about plane, design, illustration, web tricks and so much more. Soon will be started the new writers recruting, content study and others. Wait and see.

FWA – Photo of the Day

March 23rd, 2009

A new great idea of TWA Team and Group94 is the FWAPhoto, an award of best pictures of the day. Made with Flash but support iPhone too.

FWA Photo – A daily photography showcase highlighting some of the world’s most uplifting, thought-provoking, innovative and inspirational photography.

Main Sponsor: The FWA
Realisation: group94
iPhone Development: boulevart
Hosting by: Tier3

Link: http://www.fwaphoto.com