Ripeworks

Using Flickr with AS3

Mike — Tue, 18 Aug 2009 17:34:38 +0000

Lately I’ve been doing a lot of development in Flash that also involves pulling in and manipulating Flickr photos. The as3flickrlib (http://code.google.com/p/as3flickrlib/) is pretty handy at first glance, but just a fore-warning, there are many things wrong with this library. First off, there is some functionality the Flickr API offers that this library just does NOT offer, for instance, methods to parse information about Collections, or the “farm” attribute of a photo so we know exactly where to grab a thumbnail so Flickr doesn’t have to do any extra work. Also, I’m not too fond of how the structure and usage work, but that’s just personal preference I suppose.

So, getting over the hurdle of inconsistencies in the library, and some hard work, I finally have the finished product. Everything works great! But, when I go to test it online….. BROKEN! This stumped me for a few hours, because looking at the headers coming in and out of the browser was showing that Flash was getting successful API calls, grabbing photos, just not displaying them.

Solution? Even though Flickr will serve up it’s crossdomain.xml, your flash file still doesn’t have access to the Flickr farm servers to pull photos. Whoops! Adding this small snippet below will fix all your problems.

Hey as3flickrlib, maybe you could update your project and throw in these loadPolicyFile calls in there too?

1
2
3
4
5

Security.loadPolicyFile("http://api.flickr.com/crossdomain.xml");
Security.loadPolicyFile("http://farm1.static.flickr.com/crossdomain.xml");
Security.loadPolicyFile("http://farm2.static.flickr.com/crossdomain.xml");
Security.loadPolicyFile("http://farm3.static.flickr.com/crossdomain.xml");
Security.loadPolicyFile("http://farm4.static.flickr.com/crossdomain.xml");

FIVe3D custom Text Input component

Mike — Fri, 14 Aug 2009 17:19:21 +0000

Lately I have been doing nothing but creating 3D applications with Flash. I started with Papervision3D, and my current library of choice is FIVe3D (). Although it doesn’t have a camera object to pan and rotate your scene, it is a very light-weight and very fast library.

For one of my projects, it called for a textInput component. My first attempt was to add a textInput component to a Sprite3D object. Even thought the component displays properly, all of the animations that I had tied to that Sprite3D object were completely broken. After some quick Googling, I realized that I was on my own for this one, and needed to write my own component to handle this.

Enter DynamicText3DInput. I built a rather basic class which now makes it possible to input text in FIVe3D! Source and usage below:

Usage:

1
2
3
4
5
6
7
8

import five3D.component.DynamicText3DInput;
import five3D.typography.HelveticaBold;
...
var inputBox:DynamicText3DInput = new DynamicText3DInput(HelveticaBold);
inputBox.boxColor = 0xffffff;
inputBox.textColor = 0x000000;
inputBox.width = 200;
addChild(inputBox);

Source:

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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172

package five3D.component {

import flash.events.MouseEvent;
import flash.events.KeyboardEvent;
import flash.events.TimerEvent;
import flash.geom.Rectangle;
import flash.utils.Timer;

import five3D.display.DynamicText3D;
import five3D.display.Sprite3D;
import five3D.display.Shape3D;

public class DynamicText3DInput extends Sprite3D {

private var inputText:DynamicText3D;

private var _width:int;
private var _boxColor:uint;
private var _boxPadding:int = 5;
private var _bounds:Rectangle;
private var _inputMask:Shape3D;
private var _cursor:Shape3D;
private var _cursorTimer:Timer;

public function DynamicText3DInput(typography:Object):void {
super();

inputText = new DynamicText3D(typography);

init();
}

override public function get width():Number {
return _width;
}

override public function set width(value:Number):void {
_width = value;

adjustBox();
}

public function get boxColor():uint {
return _boxColor;
}

public function set boxColor(value:uint):void {
_boxColor = value;
adjustBox();
}

public function get textColor():uint {
return inputText.color;
}

public function set textColor(value:uint):void {
inputText.color = value;
drawCursor();
}

public function get size():int {
return inputText.size;
}

public function set size(value:int):void {
inputText.size = value;
adjustBox();
}

public function get text():String {
return inputText.text;
}

private function init():void {
this.addChild(inputText);
registerListeners();
this.focusRect = false;

_inputMask = new Shape3D();
addChild(_inputMask);
inputText.mask = _inputMask;

_cursor = new Shape3D();
addChild(_cursor);

setupDefaults();
}

private function setupDefaults():void {
_boxColor = 0xffffff;
_width = 100;
inputText.size = 10;
inputText.color = 0x000000;
inputText.x = _boxPadding;
inputText.y = _boxPadding;
_cursor.y = _boxPadding;
_cursor.alpha = 0;
drawCursor();
_cursorTimer = new Timer(250);
_cursorTimer.addEventListener(TimerEvent.TIMER, _adjustCursor, false, 0, true);
}

private function adjustBox():void {
_bounds = new Rectangle(0, 0, _width + (_boxPadding * 2), inputText.size + (_boxPadding * 2));
this.graphics3D.clear();
this.graphics3D.beginFill(_boxColor, 1);
this.graphics3D.drawRect(0, 0, _bounds.width, _bounds.height);
this.graphics3D.endFill();

_inputMask.graphics3D.clear();
_inputMask.graphics3D.beginFill(_boxColor, 1);
_inputMask.graphics3D.drawRect(0, 0, _bounds.width, _bounds.height);
_inputMask.graphics3D.endFill();

drawCursor();
}

private function drawCursor():void {
_cursor.graphics3D.clear();
_cursor.graphics3D.beginFill(inputText.color, 1);
_cursor.graphics3D.drawRect(0, 0, 1, inputText.size);
_cursor.graphics3D.endFill();
}

private function registerListeners():void {
this.addEventListener(MouseEvent.CLICK, _boxClickHandler, false, 0, true);
this.addEventListener(KeyboardEvent.KEY_DOWN, _keyPressHandler, false, 0, true);
}

private function _adjustCursor(e:TimerEvent):void {
if( _cursor.alpha == 1)
_cursor.alpha = 0;
else
_cursor.alpha = 1;

if( this.stage.focus != this){
_cursorTimer.stop();
_cursor.alpha = 0;
}

}

private function _boxClickHandler(e:MouseEvent):void {
this.stage.focus = this;

_cursorTimer.start();
}

private function _keyPressHandler(e:KeyboardEvent):void {
if( this.stage.focus != this)
return;

switch(e.keyCode){
case 8:
//delete the char beofre the cursor
inputText.text = inputText.text.substr(0, inputText.text.length - 1);
break;
default:
inputText.text += String.fromCharCode(e.charCode);
break;
}

if( inputText.textWidth > _width ){
inputText.x = (-inputText.textWidth) + _width + _boxPadding;
}else{
inputText.x = _boxPadding;
}

_cursor.x = inputText.x + inputText.textWidth + 1;
}
}
}

While this works, it would also be nice to adjust the cursor position, have selectable text, with copy+paste, etc.. But this works for now. Enjoy!

Mikekruk.com Re-design!

Mike — Sat, 18 Jul 2009 22:01:03 +0000

Since I bought my first Wacom tablet a few months ago, I drew up some very simple, but cute, designs for a re-design I had planned on doing for mikekruk.com. What I thought would be a few day site build, ended up being drug on for months and months.

With work busy, and other side-projects taking my interest, this project had been on the back burner at all times, until one weekend I decided I needed to finish it, and I finally got it done!

It’s a basic site, but I think it’s definitely a unique one. The thing I love the most about it is the navigation. I don’t recall ever seeing navigation like it before.

So, be sure to check it out, and if you can guess what influenced this design, you get a cookie!

Introducing Clips

Mike — Fri, 20 Feb 2009 17:58:08 +0000

In the need of a simple application that could let me easily transfer text snippets or links from my laptop to my work machine, I felt I should write my own application to do it. Even after looking at all the other great services that would more than do what I need, I still felt the urge to write my own implementation.

Normally, I would fire up TextMate and get to crackin’ at some PHP files, but for such a simple application, I had a different approach… Why don’t I use this as a chance to learn Ruby on Rails! It has been something i’ve been meaning to do for a few years now, but have never found the perfect application to learn from.

After getting Rails setup on both my local machine and my Slice, as well as setting up Passenger on my Slice so I’d be ready to deploy my application, I got to work. I read through some basic Rails tutorials about basic application setup, scaffolding, etc. I also read about doing thing the “Rails way”. I am quite comfortable doing anything in an object-oriented mindset, in fact, that’s what I prefer. Unfortunately I have never more than stepped foot into the world of MVC. Luckily it didn’t take too long for me to catch on.

After this experience, I must say that I have drank the kool aid, and I am lovin’ me some Rails. Having a great ORM at my disposal, the amount of baked in methods and helpers that Rails has, and not to mention the extremely read-friendly Ruby code, this is great! Don’t forget all the community plugins that make things like user-authentication a breeze!

Of course this is still a work-in-progress, and I’m not sure if I will ever put it up on its own domain, but I definitely use it frequently, and now eagerly await the next project to tackle with Rails.

Oh! Of course! The URL is: clip.rails.ripeworks.com if you didn’t click the above image in the post.

“Blogging” with Twitter

Mike — Fri, 30 Jan 2009 02:33:13 +0000

I’m not much of a “blogger”. When I want to write, nay, compose a new blog about something that went on in my life, or some great accomplishment, it takes a while to draft something out, find a picture to go with it, make sure it sounds right, etc. A long process that I just don’t have time to do. When I see blogs, I almost assume that they are well thought out articles, almost that of which you would see in a newspaper or magazine.

But, I want to be able to blog without having to worry about grammer, punctuation, a point. That’s where Twitter comes in. I never thought that going to a website and typing in what I am doing right now so that if my friends / co-workers happened to be on Twitter as well, they could say, “Oh! Mike is going to the bathroom!”. Why would they want to know that? Even thought I don’t see the point, I think it is still a great web service.

So, I combined the two to create the 3rd iteration of mikekruk.com. It uses the Twitter API to bring up my tweets that are hashed as “#blog”. This way, whenever I want to blog about anything, I can just make a quick tweet and call it a day. I think it’s something that I might actually use because I can talk about what happened when, and not have to worry about some big long article, and I sure as hell don’t have to type it while I’m doing it.

For now, I will see how Twitter works out. I may have to switch over to Tumblr at some point if I want to post pictures, or I could possibly just get away with using Twitpic or some other service. Ahh, bending the web has never felt so good.

Using AIR 1.1 alongside AIR 1.5

Mike — Fri, 12 Dec 2008 19:21:06 +0000

If you are one of the lucky ones to have a copy of Flash CS4 Professional, and then decide, “AIR 1.5? Sweet! I’m going to upgrade!”, you just might kick yourself for doing that!

AIR 1.5 utilizes Flash Player 10, which is great for new features such as 3D capabilities and performance updates, but there are also many security drawback that Flash Player 10 brings to the table.

The particular drawback that almost made me pull my hair out, is that with AIR 1.5, you are no longer able to utilize drag-and-drop of files into your AIR application. I was almost ready to re-install Flash CS4, but I figured out an easy workaround so that you can use AIR 1.1 or AIR 1.5 for your projects.

(Please note that this is for Mac, if you are running Windows, this process may be different)

In Finder, navigate to: /Applications/Adobe Flash CS4/Common/Configuration/Players/
There, you will see a file named: AdobeAIR.xml
Make a duplicate of that file, and rename it to: AdobeAIR1_1.xml

Open up that file, and replace the text with this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

version="1.0" encoding="UTF-8"?>
>
id="AdobeAIR1_1" version="9" asversion="3">
>Adobe AIR 1.1>
id="FLAir1_1" version="1.1" intversion="1.1">>
platform="WIN">FLAir1_1.dll>
platform="MAC">FLAir1_1.bundle>
as2="$(UserConfig)/Classes/FP9;$(UserConfig)/Classes/FP8;$(UserConfig)/Classes/FP7" as3="$(AppConfig)/ActionScript 3.0/AIR1.1/airglobal.swc" />

name="mobileDebug" supported="true" />
name="apolloPublish" supported="true" />
name="apolloTestMovie" supported="force"/>
name="apolloDebugMovie" supported="true"/>
name="apolloPackaging" supported="true"/>
name="publish_localPlaybackSecurity" supported="false" />
name="publish_hardwareAcceleration" supported="true" />
>
>

Save that file.
Restart Flash if it is currently running.
That’s it!

NOTE: If you have already built your AIR application using 1.5, you will need to edit your application.xml and change the xml namespace from “http://ns.adobe.com/air/application/1.5″ to “http://ns.adobe.com/air/application/1.1″

Hopefully this will help anyone that also experiences limited functionality while using or upgrading to AIR 1.5

Happy drag-and-dropping!

Where there’s a will, there’s a plugin.

Mike — Wed, 05 Nov 2008 00:07:12 +0000

Over the past few years, I have been using Wordpress for small projects and blogs. As projects go by, I see myself giving more and more projects the Wordpress stamp, then adding various plugins or extensions to suit the project’s needs. Even if a site doesn’t have a blog, it’s still a great lightweight tool for making URL-friendly sites that can be easily managed through a crisp admin interface.

When I decide what to build a project on, I run through the usual list of platforms I use, and Wordpress always seem to be the one. It’s so easy to setup, and if there is something that it can’t do out of the box, there is almost most definitely a plugin. And in that rare occasion that no plugin is available, or a plugin isn’t quite as extensible as you need it to be, there’s always room to write your own!

Here are some plugins that I find myself using time and time again:

Cforms – A super customizable form builder generally for making contact forms, but can be used for virtually any form you can think of.

NextGEN Gallery – The ultimate when it comes to photo galleries. I’ve never seen an easier way to upload photos, and with a directory scanner, slideshows, and thickbox all pre-packaged with the plugin, there is almost no configuration needed.

Register Plus – Want your site to be members only? Not a problem Register Plus can take care of this with ease. It includes custom registration page creation that includes CAPTCHA, invitation codes, and user-generated passwords. There is also a user moderation page, so you can moderate who can and cannot become a member.

Of course the list could go on, but these are the top ones that I use on a lot of projects. There always some instances where Wordpress is just completely out of the question, but those cases are becoming more scarce as more plugins are released. So if you haven’t taken a whack at using Wordpress, learn PHP (the right way) and you’ll find that it is a lot more than just your run-of-the-mill blogging engine.

We are alive!

Mike — Fri, 08 Aug 2008 21:00:13 +0000

After a couple weeks of brainstorming, planning, drawing, and coding, we are finally up. We give you, Ripeworks, a small freelance team in southeast Michigan. The team is led by Mike Kruk, followed by a few online teammates to help out with our process. We offer loads of different web services, so be sure to shoot us an email, or give us a call if you are planning your next project on the web.

We have been around since 2004, but up until now have we come up with a good process, and this slick website. On that note, we are still making changes, and fixing some tweaks on our new site, so please be patient with that, and have a poke around. Let us know what you think!

Hello world!

Mike — Wed, 23 Jul 2008 16:26:19 +0000

Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!