# Scaleable hi quality images without pixelation?

**URL:** <https://forum.kirupa.com/t/scaleable-hi-quality-images-without-pixelation/182369>\
**Category:** flash\
**Created:** [March 17, 2006, 2:59pm UTC](https://forum.kirupa.com/t/scaleable-hi-quality-images-without-pixelation/182369 "2006-03-17T14:59:44Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![jimmy\_jazz](https://avatars.discourse-cdn.com/v4/letter/j/dfb087/32.png) [@jimmy\_jazz](https://forum.kirupa.com/u/jimmy_jazz)\
**Post date:** [March 17, 2006, 2:59pm UTC](https://forum.kirupa.com/t/scaleable-hi-quality-images-without-pixelation/182369/1 "2006-03-17T14:59:44Z")

</div>

Just stumbled across this site:

[http://www.refune.com/index\_main.html](http://www.refune.com/index_main.html)

Does anyone know how they got that really crisp backround image to scale in Flash without pixelation? Been tring to get that down for ages…  
Looks awesome.

---

<div class="post-metadata">

**Author:** ![jimmy\_jazz](https://avatars.discourse-cdn.com/v4/letter/j/dfb087/32.png) [@jimmy\_jazz](https://forum.kirupa.com/u/jimmy_jazz)\
**Post date:** [March 20, 2006, 12:35pm UTC](https://forum.kirupa.com/t/scaleable-hi-quality-images-without-pixelation/182369/2 "2006-03-20T12:35:58Z")

</div>

gvozden - Thanks for your tip - Im pretty new to actionscript and couldnt figure out how it was done.  
Did some searching and found what I needed.

```
ActionScript Code:
[FONT=Courier New][LEFT][COLOR=#0000FF]Stage[/COLOR].[COLOR=#0000FF]scaleMode[/COLOR] = [COLOR=#FF0000]"noBorder"[/COLOR];

```

[COLOR=#000000] **var** [/COLOR] stageListener = [COLOR=#000000] **new** [/COLOR] [COLOR=#0000FF]Object[/COLOR]COLOR=#000000[/COLOR];  
[COLOR=#0000FF]Stage[/COLOR].[COLOR=#0000FF]addListener[/COLOR]COLOR=#000000[/COLOR];  
stageListener.[COLOR=#0000FF]onResize[/COLOR] = [COLOR=#000000] **function** [/COLOR] COLOR=#000000[/COLOR][COLOR=#000000]{[/COLOR]  
[COLOR=#0000FF]background[/COLOR].[COLOR=#0000FF]\_height[/COLOR] = [COLOR=#0000FF]Stage[/COLOR].[COLOR=#0000FF]height[/COLOR];  
[COLOR=#0000FF]background[/COLOR].[COLOR=#0000FF]\_width[/COLOR] = [COLOR=#0000FF]Stage[/COLOR].[COLOR=#0000FF]width[/COLOR];  
[COLOR=#000000]}[/COLOR];  
[/LEFT]  
[/FONT]

this produces something like the link I posted. Used a 1600x1200 image and same w/h for the stage.

Cheers

---

<div class="post-metadata">

**Author:** ![jimmy\_jazz](https://avatars.discourse-cdn.com/v4/letter/j/dfb087/32.png) [@jimmy\_jazz](https://forum.kirupa.com/u/jimmy_jazz)\
**Post date:** [March 20, 2006, 3:33pm UTC](https://forum.kirupa.com/t/scaleable-hi-quality-images-without-pixelation/182369/3 "2006-03-20T15:33:06Z")

</div>

Ok so Ive manage to stumble in to another problem now I have the scaling background sorted.

When I attach another movie clip (lets say ‘navigation’) to the stage it gets scaled with the background clip on browser resize.

How do you make this new clip independant of the background so its size stays constant on resize? Like on the [http://www.refune.com/index\_main.html](http://www.refune.com/index_main.html) site

Thanks

---

<div class="post-metadata">

**Author:** ![B\_L\_U\_E](https://avatars.discourse-cdn.com/v4/letter/b/ba8739/32.png) [@B\_L\_U\_E](https://forum.kirupa.com/u/B_L_U_E)\
**Post date:** [March 20, 2006, 5:25pm UTC](https://forum.kirupa.com/t/scaleable-hi-quality-images-without-pixelation/182369/4 "2006-03-20T17:25:20Z")

</div>

> [@jimmy\_jazz](#):
>
> Ok so Ive manage to stumble in to another problem now I have the scaling background sorted.
> 
> When I attach another movie clip (lets say ‘navigation’) to the stage it gets scaled with the background clip on browser resize.
> 
> How do you make this new clip independant of the background so its size stays constant on resize? Like on the [http://www.refune.com/index\_main.html](http://www.refune.com/index_main.html) site
> 
> Thanks

Are you sure ‘navigation’ isn’t being loaded into ‘background’? That seems like the problem.

---

<div class="post-metadata">

**Author:** ![B\_L\_U\_E](https://avatars.discourse-cdn.com/v4/letter/b/ba8739/32.png) [@B\_L\_U\_E](https://forum.kirupa.com/u/B_L_U_E)\
**Post date:** [March 21, 2006, 4:04am UTC](https://forum.kirupa.com/t/scaleable-hi-quality-images-without-pixelation/182369/5 "2006-03-21T04:04:34Z")

</div>

sorry, double post

---

<div class="post-metadata">

**Author:** ![matthewjumps](https://avatars.discourse-cdn.com/v4/letter/m/49beb7/32.png) [@matthewjumps](https://forum.kirupa.com/u/matthewjumps)\
**Post date:** [March 21, 2006, 4:37am UTC](https://forum.kirupa.com/t/scaleable-hi-quality-images-without-pixelation/182369/6 "2006-03-21T04:37:04Z")

</div>

btw dont forget to set the \_quality = “BEST”; for a movie clip with an image in it…makes it scale and animate much smoother w/out aliasing :thumb2:

---

<div class="post-metadata">

**Author:** ![TheCanadian](https://avatars.discourse-cdn.com/v4/letter/t/67e7ee/32.png) [@TheCanadian](https://forum.kirupa.com/u/TheCanadian)\
**Post date:** [March 21, 2006, 4:47am UTC](https://forum.kirupa.com/t/scaleable-hi-quality-images-without-pixelation/182369/7 "2006-03-21T04:47:05Z")

</div>

> [@matthewjumps](#):
>
> btw dont forget to set the \_quality = “BEST”; for a movie clip with an image in it…makes it scale and animate much smoother w/out aliasing :thumb2:

Also don’t forget (or learn for the first time) that _\_quality_ is a global property and changing it for one movie clip will change it for the whole movie 🙂

---

<div class="post-metadata">

**Author:** ![matthewjumps](https://avatars.discourse-cdn.com/v4/letter/m/49beb7/32.png) [@matthewjumps](https://forum.kirupa.com/u/matthewjumps)\
**Post date:** [March 21, 2006, 5:18am UTC](https://forum.kirupa.com/t/scaleable-hi-quality-images-without-pixelation/182369/8 "2006-03-21T05:18:33Z")

</div>

really? ok then…well thats not a bad thing is it?

---

<div class="post-metadata">

**Author:** ![TheCanadian](https://avatars.discourse-cdn.com/v4/letter/t/67e7ee/32.png) [@TheCanadian](https://forum.kirupa.com/u/TheCanadian)\
**Post date:** [March 21, 2006, 5:21am UTC](https://forum.kirupa.com/t/scaleable-hi-quality-images-without-pixelation/182369/9 "2006-03-21T05:21:00Z")

</div>

> [@matthewjumps](#):
>
> really? ok then…well thats not a bad thing is it?

Depends I guess - If you want everything on the same quality setting then it’s good but if you want some on low and some on high then it isn’t :).

---

<div class="post-metadata">

**Author:** ![jimmy\_jazz](https://avatars.discourse-cdn.com/v4/letter/j/dfb087/32.png) [@jimmy\_jazz](https://forum.kirupa.com/u/jimmy_jazz)\
**Post date:** [March 21, 2006, 5:16pm UTC](https://forum.kirupa.com/t/scaleable-hi-quality-images-without-pixelation/182369/10 "2006-03-21T17:16:02Z")

</div>

Hey thanks for the tips guys.

In response to BlueNar:  
Navigation clip isnt being loaded in ‘background’ - both the Nav and Background clips are on root timeline.

here is what I have -see how the nav scales with the background? I dont want it to scale but keep its position in relation to the browser.  
[click here for my flashtest](http://loopdream.com/flashtest/)

Ive attached my files for you to see - If anyone has time to look and tell me where im going wrong I’d be grateful.

[testfla.zip](http://loopdream.com/flashtest/testfla.zip)

Thanks again.

---

<div class="post-metadata">

**Author:** ![B\_L\_U\_E](https://avatars.discourse-cdn.com/v4/letter/b/ba8739/32.png) [@B\_L\_U\_E](https://forum.kirupa.com/u/B_L_U_E)\
**Post date:** [March 21, 2006, 5:17pm UTC](https://forum.kirupa.com/t/scaleable-hi-quality-images-without-pixelation/182369/11 "2006-03-21T17:17:19Z")

</div>

I’m still not sure exactly how they are doing the resizing. As you shrink your browser window, look carefully. The background image keeps the same width to height proportion which keeps the image nonpixelated. The only thing I can think of is they check to see if the Stage width to height ratio is the same as the image’s (I assume 1.25:1) and if its not, center the image but dont resize it. Hmm

---

<div class="post-metadata">

**Author:** ![gvozden](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/gvozden/32/1084_2.png) [@gvozden](https://forum.kirupa.com/u/gvozden)\
**Post date:** [March 21, 2006, 6:04pm UTC](https://forum.kirupa.com/t/scaleable-hi-quality-images-without-pixelation/182369/12 "2006-03-21T18:04:08Z")

</div>

you can learn a lot with swf decompilers :thumb: :cop:

---

<div class="post-metadata">

**Author:** ![Ordinathorreur](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/ordinathorreur/32/536_2.png) [@Ordinathorreur](https://forum.kirupa.com/u/Ordinathorreur)\
**Post date:** [March 21, 2006, 8:14pm UTC](https://forum.kirupa.com/t/scaleable-hi-quality-images-without-pixelation/182369/13 "2006-03-21T20:14:41Z")

</div>

> [@Rasper](#):
>
> Is it really nothing special? Because I’m working on an image viewer right now and when I scale my images down I get jagged edges in some pictures, like it needs anti-aliasing. Or is this normal for sharp edges in a picture?
> 
> (btw I’m using Flash 8)

Check out this thread Rasper:

> **[kirupaForum](https://forum.kirupa.com)**
>
> Got a web design/development question or just want to hang out with the most awesome people on the planet? Drop on in!
