Fixed a bunch of bugs for the ZoomableImage class I posted some time ago.
You can find the old post here
Enjoy!
Adobe CS4 Presentation
Rome Session
Martedì 21 Ott 2008 : 9:30 - 18:00
Aran Mantegna Hotel
Via Mantegna, 130 Roma, EUR
The presentations has highlighted some of the new features, aspects and targets of the new CS4 suite.
In the morning, there has been a meeting reguarding how CS4 could better work flow, and some of the new features, like the XFL interchange format, seem to greatly improve speed and productivity.
In the afternoon, i attended the web track with demonstration of Photoshop, Illustrator and InDesign, and they look great. Photoshop is very faster, even with big sized images, the speaker was working with an image of 1.12 Gb and it was smoother than wind. All the software from the new suite works moving the weight from CPU to GPU, if you have a 3d acceleration video card.
After that, i went to the Flash and Dreamweaver course. I had already seen many of the new flash features, but seeing them in action was like a thunderstrike.
I am looking forward to buy the new CS4. I really am.
Oct
03
03
Hi everyone!
Today I release a new class, as previewed a few days ago.
The ZoomableImage class let you load an image and display it in a frame box of predefined dimensions. You can view this image only for a certain part, at the start. But you can click and drag it to view it all.
The class has several features, so you can view the docs to know them all. It is very customizable. And it is very easy to use.
Just by adding these few lines of code,
var zImage:ZoomableImage = new ZoomableImage("http://www.fuoridalcerchio.net/source/zoomableimage/image.jpg", {framewidth: 300, frameheight: 300, framealpha: 0.2, framecolor: 0x000000, overlay:true, zooms: [100, 50, 25]});
zImage.x = 200;
zImage.y = 200;
addChild(zImage);
you can use the class in every project.
Enjoy! Critics and advices are welcome, as usual!
I have seen that many of you get stuck while changing the as3 scrollbar class to handle the movement of horizontal content, so I decided to post an article to explain how to change the scrollbar code to do it.
It is very easy indeed. You simply have to change all y occurrencies to x, and all height to width.
This is the code.
package
{
import flash.display.MovieClip;
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.filters.BlurFilter;
import flash.geom.Rectangle;
import flash.display.Shape;
public class HScrollbar extends MovieClip
{
private var _dragged:MovieClip;
private var _mask:MovieClip;
private var _ruler:MovieClip;
private var _background:MovieClip;
private var _hitarea:MovieClip;
private var _blurred:Boolean;
private var _XFactor:Number;
private var _initX:Number;
private var minX:Number;
private var maxX:Number;
private var percentuale:uint;
private var contentstartx:Number;
private var bf:BlurFilter;
private var initialized:Boolean = false;
public function HScrollbar(dragged:MovieClip, maskclip:MovieClip, ruler:MovieClip, background:MovieClip, hitarea:MovieClip, blurred:Boolean = false, xfactor:Number = 4 )
{
super();
_dragged = dragged;
_mask = maskclip;
_ruler = ruler;
_background = background;
_hitarea = hitarea as MovieClip;
_blurred = blurred;
_XFactor = xfactor;
}
public function set dragged (v:MovieClip) {
_dragged = v;
}
public function set maskclip (v:MovieClip) {
_mask = v;
}
public function set ruler (v:MovieClip) {
_ruler = v;
}
public function set background (v:MovieClip) {
_background = v;
}
public function set hitarea (v:MovieClip) {
_hitarea = v;
}
private function checkPieces():Boolean {
var ok:Boolean = true;
if (_dragged == null) {
trace("SCROLLBAR: DRAGGED not set");
ok = false;
}
if (_mask == null) {
trace("SCROLLBAR: MASK not set");
ok = false;
}
if (_ruler == null) {
trace("SCROLLBAR: RULER not set");
ok = false;
}
if (_background == null) {
trace("SCROLLBAR: BACKGROUND not set");
ok = false;
}
if (_hitarea == null) {
trace("SCROLLBAR: HITAREA not set");
ok = false;
}
return ok;
}
public function init(e:Event = null):void {
if (checkPieces() == false) {
trace("SCROLLBAR: CANNOT INITIALIZE");
} else {
if (initialized == true) {
reset();
}
bf = new BlurFilter(0, 0, 1);
this._dragged.filters = new Array(bf);
this._dragged.mask = this._mask;
this._dragged.cacheAsBitmap = true;
this.minX = _background.x;
this._ruler.buttonMode = true;
this.contentstartx = _dragged.x;
_ruler.addEventListener(MouseEvent.MOUSE_DOWN, clickHandle);
stage.addEventListener(MouseEvent.MOUSE_UP, releaseHandle);
stage.addEventListener(MouseEvent.MOUSE_WHEEL, wheelHandle, true);
this.addEventListener(Event.ENTER_FRAME, enterFrameHandle);
initialized = true;
}
}
private function clickHandle(e:MouseEvent)
{
var rect:Rectangle = new Rectangle(minX, 0, maxX, 0); //_background.y - (_ruler.height / 2), minX, 0, maxX);
_ruler.startDrag(false, rect);
}
private function releaseHandle(e:MouseEvent)
{
_ruler.stopDrag();
}
private function wheelHandle(e:MouseEvent)
{
if (this._hitarea.hitTestPoint(stage.mouseX, stage.mouseY, false))
{
scrollData(e.delta);
}
}
private function enterFrameHandle(e:Event)
{
positionContent();
}
private function scrollData(q:int)
{
var d:Number;
var rulerX:Number;
var quantity:Number = this._ruler.height / 5;
d = -q * Math.abs(quantity);
if (d > 0) {
rulerX = Math.min(maxX, _ruler.x + d);
}
if (d < 0) {
rulerX = Math.max(minX, _ruler.x + d);
}
_ruler.x = rulerX;
positionContent();
}
public function positionContent():void {
var upX:Number;
var downX:Number;
var curX:Number;
/* thanks to Kalicious (http://www.kalicious.com/) */
this._ruler.width = (this._mask.width / this._dragged.width) * this._background.width;
this.maxX = this._background.width - this._ruler.width;
/* */
var limit:Number = this._background.width - this._ruler.width;
if (this._ruler.x > limit) {
this._ruler.x = limit;
}
checkContentLength();
percentuale = (100 / maxX) * _ruler.x;
upX = 0;
downX = _dragged.width * 1.01 - (_mask.width / 2);
var fx:Number = contentstartx - (((downX - (_mask.width/2)) / 100) * percentuale);
var currx:Number = _dragged.x;
var finalx:Number = fx;
if (currx != finalx) {
var diff:Number = finalx-currx;
currx += diff / _XFactor;
var bfactor:Number = Math.abs(diff)/8;
bf.blurX = bfactor/2;
if (_blurred == true) {
_dragged.filters = new Array(bf);
}
}
_dragged.x = currx;
}
public function checkContentLength():void
{
if (_dragged.width < _mask.width) {
_ruler.visible = false;
reset();
} else {
_ruler.visible = true;
}
}
public function reset():void {
_dragged.x = contentstartx;
_ruler.x = 0;
}
}
}
This is an example of what can be accomplished.
Soon i will release a scrollbar content that handles horizontal and vertical scroll. It will have some new features that you will like at most.
Until then, see you soon! :)
