I am trying to make a custom full screen mode for my media player. It basically assigns content to resized movie clip and displays. However when comes to particular contents it is unable to show in full screen mode. Actually there is no problem in default but only in FS. Here is the code that activates FS Mode.
function FSMode(e:MouseEvent):void
{
fullScreenToolbar = new ExitFSClass();//this exits full screen
_coordinate.x = contentLdr.content.x;
_coordinate.y = contentLdr.content.y;
_width = contentLdr.content.width;
_height = contentLdr.content.height;
contentLdr.content.x = -250;
contentLdr.content.y = -135;
this.setChildIndex(contentLdr, this.numChildren - 1);
if(contentTypArr[currentCategory] === "animation")
{
addChild(fullScreenToolbar);
this.setChildIndex(fullScreenToolbar, this.numChildren - 1);
if(Capabilities.screenResolutionX >= 1920)
{
contentLdr.content.width = 1800;
contentLdr.content.height = 1012.5;
}
else
{
contentLdr.content.width = Capabilities.screenResolutionX;
contentLdr.content.height = Capabilities.screenResolutionY;
}
fullScreenToolbar.x = 0;
fullScreenToolbar.y = 965;
fullScreenToolbar.width = contentLdr.content.width;
fullScreenToolbar.addEventListener(MouseEvent.CLICK, openToolbar);
fullScreenToolbar.buttonMode = true;
}
}
Why some contents cannot be displayed? I am unable to see related problem or conflict with code.
Basically the Loader content resolution is different (greater in this situation) than the displaying area. There are overflowing parts that makes fs not working properly. Fixing the content resolution makes no problem and the function operates well.
Related
A lot of the information about Retina devices comes from ~2013 but not much recently.
It seems like, for example in retina.js, it includes anything with a device pixel ratio of > 1.5 to be "retina", but don't all smartphones have well over 1.5 these days? My desktop computer does as well.
My question then, why not just always serve the highest possible resolution images you have access to instead of creating the half-sized versions for "non-retina" devices, which as far as I know don't really exist much and won't suffer much from being served a higher resolution image.
Thanks!!!
Using 2x images is a huge pain.
Who can know what is "best," but I'm currently working with images in a combo like this:
I use a parent element so that the image will fill it - and that parent/or it's ancestors will determine any limits. You can use the picture element. (usually, the src are supplied by a CMS or something {{image.small.url}} etc.
The official answer to your questions would be, that people don't serve the higher res file to everything - because the file is bigger and they want the site to load as fast as possible. / but if you double the images size (twice as big as it will ever be presented, and compress to ~40 or so) then use the parent element to size it - it's actually a smaller file size. There are very specific studies on this. I don't know how that works for painting and browser rendering, though.
MARKUP
<figure class='poster'>
<img src='' alt=''
data-small='http://placehold.it/600'
data-medium='http://placehold.it/1000'
data-large='http://placehold.it/2000'
/>
</figure>
STYLES (stylus)
figure // just imagine the brackets if you want
margin: 0
img
display: block
width: 100%
height: auto
.poster
max-width: 400px
SCRIPT
$(document).on('ready', function() {
// $global
var $window = $(window);
var windowWidth;
var windowHeight;
function getWindowDimentions() {
windowWidth = $window.width();
windowHeight = $window.height();
}
function setResponsibleImageSrc(imageAncestorElement, container) {
var large = false; // innocent until proven guilty
var medium = false; // "
var context;
if ( !container ) {
context = windowWidth;
} else {
context = $(container).outerWidth();
}
var large = context > 900;
var medium = context > 550;
$(imageAncestorElement).each( function() {
var $this = $(this).find('img');
var src = {};
src.small = $this.data('small');
src.medium = $this.data('medium');
src.large = $this.data('large');
if ( large ) {
$this.attr('src', src.large);
} else if ( medium ) {
$this.attr('src', src.medium);
} else {
$this.attr('src', src.small);
}
});
};
$window.on('resize', function() { // this should jog a bit
getWindowDimentions();
setResponsibleImageSrc('.poster', 'body');
}).trigger('resize');
});
It all depends on what you are doing - and there is no silver bullet yet. The context for each image is so unique. My goal is to get in the ballpark for each size - keep the images compressed to 40 in Photoshop on export... double the size they should be, and then the parent squishes them for retina. The size is actually smaller in most cases.
CodePen example: http://codepen.io/sheriffderek/pen/bqpPra
I have a responsive app for desktop and mobile.
In the app i have a div which randomly shows texts of all kinds of lengths.
I want to do the following:
If the line breaks because the length of the text is too wide for the width of that div, i want the font-size to reduce itself (I am using em's in my app).
Is it something i need to build directive for it? is it something that was built and used wildly?
Writing a robust solution for this problem is going to be non-trivial. As far as I know, there's no way to tell whether a line of text breaks. However, we do know the criteria for line breaking is the width of the text being wider than the element, accounting for padding.
The Canvas API has a method called measureText which can be used to measure a string, using a given context with a font and size set. If you spoof the settings of the element with a canvas, then you can measure the text with the canvas and adjust the size until it fits without overflowing.
I've written up a rough implementation of the way I would tackle this.
function TextScaler(element) {
var canvas = document.createElement('canvas'),
context = canvas.getContext('2d');
var scaler = {};
scaler.copyProps = function() {
var style = element.style.fontStyle,
family = element.style.fontFamily,
size = element.style.fontSize,
weight = element.style.fontWeight,
variant = element.style.fontVariant;
context.font = [style, variant, weight, size, family].join(' ');
};
scaler.measure = function(text) {
text = text || element.innerText;
return context.measureText(text);
};
scaler.overflows = function() {
var style = window.getComputedStyle(element),
paddingLeft = style['padding-left'],
paddingRight = style['padding-right'],
width = style.width - paddingLeft - paddingRight;
return scaler.measure() > width;
};
scaler.decrease = function() {
// decrease font size by however much
};
scaler.auto = function(retries) {
retries = retries || 10;
if(retries <= 0) {
scaler.apply();
console.log('used all retries');
}
if(scaler.overflows()) {
scaler.decrease();
scaler.auto(retries - 1);
} else {
console.log('text fits');
scaler.apply();
}
};
scaler.apply = function() {
// copy the properties from the context
// back to the element
};
return scaler;
}
After you've sorted out some of the blank details there, you'd be able to use the function something like this:
var element = document.getElementById('');
var scaler = TextScaler(element);
scaler.auto();
If it doesn't manage to decrease it within 10 retries, it will stop there. You could also do this manually.
while(scaler.overflows()) {
scaler.decrease();
}
scaler.apply();
You'd probably want some fairly fine tuned logic for handling the decrease function. It might be easiest to convert the ems to pixels, then work purely with integers.
This API could quite trivially be wrapped up as a directive, if you want to use this with Angular. I'd probably tackle this with two attribute directives.
<div text-scale retries="10">Hello world</div>
Of course, if it's not important that all the text is there onscreen, then you can just use the text-overflow: ellipsis CSS property.
I'm working on a script that applies custom headings to a plain text document imported in Google Docs. The scripts works pretty much as it should. However the resulting document has a weird layout, as if random page breaks were inserted here and there. But there are no page breaks and I can't understand the reason of this layout. Checking the paragraph attributes give me no hints on what is wrong.
Here is the text BEFORE the script is applied:
https://docs.google.com/document/d/1MzFvlkG13i3rrUcz5jmmSppG4sBH6zTXr7RViwdqaIo/edit?usp=sharing
You can make a copy of the document and execute the script (from the Scripts menu, choose Apply Headings). The script applies the appropriate heading to the scene heading, name of the character, dialogue, etc.
As you can see, at the bottom of page 2 and 3 of the resulting document there is a big gap and I can't figure out why. The paragraph attributes seem ok to me...
Here is a copy of the script:
// Apply headings to sceneheadings, actions, characters, dialogues, parentheticals
// to an imported plain text film script;
function ApplyHeadings() {
var pars = DocumentApp.getActiveDocument().getBody().getParagraphs();
for(var i=0; i<pars.length; i++) {
var par = pars[i];
var partext = par.getText();
var indt = par.getIndentStart();
Logger.log(indt);
if (indt > 100 && indt < 120) {
var INT = par.findText("INT.");
var EXT = par.findText("EXT.");
if (INT != null || EXT != null) {
par.setHeading(DocumentApp.ParagraphHeading.HEADING1);
par.setAttributes(ResetAttributes());
}
else {
par.setHeading(DocumentApp.ParagraphHeading.NORMAL);
par.setAttributes(ResetAttributes());
}
}
else if (indt > 245 && indt < 260) {
par.setHeading(DocumentApp.ParagraphHeading.HEADING2);
par.setAttributes(ResetAttributes());
}
else if (indt > 170 && indt < 190) {
par.setHeading(DocumentApp.ParagraphHeading.HEADING3);
par.setAttributes(ResetAttributes());
}
else if (indt > 200 && indt < 240) {
par.setHeading(DocumentApp.ParagraphHeading.HEADING4);
par.setAttributes(ResetAttributes());
}
}
}
// Reset all the attributes to "null" apart from HEADING;
function ResetAttributes() {
var style = {};
style[DocumentApp.Attribute.STRIKETHROUGH] = null;
style[DocumentApp.Attribute.HORIZONTAL_ALIGNMENT] = null;
style[DocumentApp.Attribute.INDENT_START] = null;
style[DocumentApp.Attribute.INDENT_END] = null;
style[DocumentApp.Attribute.INDENT_FIRST_LINE] = null;
style[DocumentApp.Attribute.LINE_SPACING] = null;
style[DocumentApp.Attribute.ITALIC] = null;
style[DocumentApp.Attribute.FONT_SIZE] = null;
style[DocumentApp.Attribute.FONT_FAMILY] = null;
style[DocumentApp.Attribute.BOLD] = null;
style[DocumentApp.Attribute.SPACING_BEFORE] = null;
style[DocumentApp.Attribute.SPACING_AFTER] = null;
return style;
}
A couple of screenshots to make the problem more clear.
This is page 2 of the document BEFORE the script is applied.
This is page two AFTER the script is applied. Headings are applied correctly but... Why the white space at the bottom?
Note: if you manually re-apply HEADING2 to the first paragraph of page 3 (AUDIO TV), the paragraph will jump back to fill the space at the bottom of page 2. This action, however, doesn't change any attribute in the paragraph. So why the magic happens?
Thanks a lot for your patience.
That was an interesting problem ;-)
I copied your doc, ran the script and had a surprise : nothing happened !
It took me a few minutes to realize that the copy I just made had no style defined for headings, everything was for some reason in courrier new 12pt, including the headings.
I examined the log and saw the indent values, played with that a lot to finally see that the headings were there but not changing the style.
So I went in the doc menu and set 'Use my default style and... everything looks fine, see screen capture below.
So now your question : it appears that there must be something wrong in your style definition, by "wrong" I mean something that changes more than just the font Style and size but honestly I can't see any way to guess what since I'm unable to reproduce it... Please try resetting your heading styles and re-define your default.... and tell us what happens then.
PS : here are my default heading styles : (and the url of my copy in view only :https://docs.google.com/document/d/1yP0RRCrRSsQc9zCk-sdfu5olNGDkoIrabXanII4qUG0/edit?usp=sharing )
Does anyone know if there is a way to find the height of the text within the TextLayout class?
I am making my TextLayout objects like so:
this._textFlow = new TextFlow();
this._paragraphElement = new ParagraphElement();
this._textFlow.addChild(this._paragraphElement);
this._span = new SpanElement();
this._span.text = this._text;
this._paragraphElement.addChild(this._span);
if(this._textAlign != ''){
this._paragraphElement.textAlign = this._textAlign;
}
var tempTextWidth:Number;
var tempTextHeight:Number;
if(this._textWidth > 0){
tempTextWidth = this._textWidth;
} else {
tempTextWidth = NaN;
}
if(this._textHeight > 0){
tempTextHeight = this._textHeight;
} else {
tempTextHeight = NaN;
}
this._containerController = new ContainerController(this, tempTextWidth, tempTextHeight);
this._textFlow.flowComposer.addController(this._containerController);
this._textFlow.flowComposer.updateAllControllers();
All the public properties I'd expect to find the height are undefined such as this._textFlow.lineHeight.
Thanks,
Chris
According to the documentation, lineHeight is undefined by default, and a value of undefined means the line height is 120% of the text height. Text height is determined by the fontSize property, which is also undefined by default, meaning the text height is 12.
Assuming both are undefined in your application, the height of each line should be 1.2 * 12 = 14.4. Disclaimer: I have never actually worked with the Text Layout Framework and don't know how reliable this information is.
I've got a flash vertical menu which has auto-scroll but it scrolls too fast and the only way to slow it down is to increase the height of the button.
I would like to replace the code with a scrollpane so I can control the menu:
Code chunk I need to remove then add the additional scrollpane code
menu_mc_Europe.onEnterFrame = function() {
if (_ymouse>10 && _ymouse<boundry_mc._height && _xmouse>0 && _xmouse<boundry_mc._width) {
ratio = (menu_mc_Europe._height-boundry_mc._height)/(boundry_mc._height);
if (_ymouse>boundry_mc._height/2) {
destScroll = -(_ymouse)*ratio-menu_mc_Europe.bttn_mc._height*ratio;
} else {
destScroll = -(_ymouse)*ratio
}
menu_mc_Europe._y += Math.round((destScroll-menu_mc_Europe._y)/5);
if (menu_mc_Europe._y<-(totalBttns*menu_mc_Europe.bttn_mc._height-boundry_mc._height)) {
menu_mc_Europe._y = -(totalBttns*menu_mc_Europe.bttn_mc._height-boundry_mc._height);
}
} else {
destScroll = 1;
menu_mc_Europe._y += Math.round((destScroll-menu_mc_Europe._y)/5);
}
};
hard to read that code w/out line breaks - what does 'ratio' represent above? is it a variable you can set? if not, just a wild guess, but try changing the divisor (the 5) in the '_y)/5' sections above?