I'm looking to place an image (object) on top of the other object (default video player in Flex 4), any suggestions are most welcome. Do we've to use canvas? can I do it without using canvas? An example would be greatly appreciated, thanks.
Regards
You can have a look at this tutorial for more info:
http://www.republicofcode.com/tutorials/flash/as3displaylist/
but adding an object on top of another one , is as simple as this
addChild(child1);
addChild(child2);
basically the first object added is at the bottom of your stack. now if the object you want placed under was added after the first one. you still can do this:
addChild(child2);
addChildAt(child1, 0 );
there are, of course ,more options to manipulate the children positions but you should find what you need in the tutorial above.
Oops , sorry the word Canvas , got me confused. I thought you were trying to do this within Flex. Do you mean to say you want to do that in HTML. If you do, please retag your question, because it wouldn't really be a flash issue .
Hope it helps ;)
Related
I'm having a issue in AS3 with using MovieClip(root.this).
So I have a MovieClip called Slime and I have code inside of slime.idle in the 1rst frame. The code is: MovieClip(root.this).gotoAndStop(2);
For some reason that will not work and does not make the slime go to frame 2. I don't want to do MovieClip(root).gotoAndStop(2); because I have more than 1 slime in the stage that I do not want all of them going to frame 2. That is why I need to use MovieClip(root.this). Does anyone know my problem and how to fix it? Thank you.
MovieClip(root.this) is not valid syntax for multiple reasons. I don't think this behaves how you think; this refers to the object that the script belongs to and cannot be used the way you are trying to use it.
Are you trying to target a specific "slime" to go to frame 2 within its own timeline? In that case you just need to call gotoAndStop() on a reference to that specific slime. For example: MovieClip(root).slime123.gotoAndStop(2). How you get the reference depends on your current code and display structure.
If your code is within the "slime" symbol timeline, you can make it go to frame 2 without referring to root at all, because this is already the target you want. For example: this.gotoAndStop(2) (or gotoAndStop(2); this is usually optional).
If you post more code and explain what you thought this should refer to, I can help more.
Okay, so I've been busting my hump the last week or so on this project for my OOP/AS3 course and this past Sunday I realized that my approach wasn't going to work so I scrapped the better part of it and started over.
Our assignment is to create an XML based flash menu that demonstrates an understanding of the OOP patterns we've just learned. It was kind of a 'test the waters' project where he gave us a ton of tutorials and information and told us to make our best attempt at making sense of it so I'm certain there are more efficient ways to do what I'm doing, but that's a moot point.
We need to employ at least two patterns in our menu, though at the moment I'm just focusing on MVC so that I can get the mainUI working before I finalize the second part of the UI. It essentially flows like so:
MainUI has 4 menus that slide out.
Each slider has 3 thumbnails on it.
Clicking on any of the thumbnails will move to the next part of the UI. This functionality is currently disabled.
The program runs with 0 compiler errors, but the images are not being placed on the stage correctly and I can't figure out why. All the image paths are being pulled and stored from the XML properly. The main background image is pulled once and is supposed to be only placed once (if statement that uses a count to determine whether to run the placement function or not), but it is being placed 4 times with the sliding menu image. The sliders are being placed in the correct positions (switch statement that iterates through the mainUI function in the View class and creates a separate loader for each one), but the thumbnails are not all showing up. So here is what I'm seeking help with:
The mainPanel image should only be placed once, rather than 4 times with each slider.
The sliders, while being placed correctly, must be tweened in different directions through the as (using TweenMax), but each instance is unidentifiable from the other so right now they all have an eventListener that calls the same tween method. How can I distinguish them in a way that lets me apply a different tween to each (This will likely be a concern with the thumbnail functionality later as I will need to load different XML data based on which thumb is clicked).
I have added what I hope are very informative comments to each script so hopefully people can help. Also included are images of what I want the mainUI to eventually look like and how it's coming out currently.
pastebin with all 3 classes and XML (2 hyperlink limit) - http://pastebin.com/u/crookedparadigm
top image is how the stage is outputting, bottom image is what I'd like to to be - http://imgur.com/a/bOmsS
Last quick note, stage is currently set to 600x480 with a black background. Ideally, to reinforce OOP principles, our professor wants us to avoid using the timeline or library if possible.
Any advice at all will be greatly appreciated! Thanks!
Install FlexPMD This is a very good add on( sometimes hard to install ) It basically is used to show areas of your code that you are not following standards. For example your classes lack the use of "this". And you should avoid passing parameters in constructors. It would be good practice to develop standardized writing skills while you are still new.
Looking at your code I see you are calling buildUI from within a loop.
buildUI is assigning a MainView object to mainUI.
So each time you go through a loop iteration you are reassigning mainUI.
In the end mainUI will only be the last iteration of that loop.
Not sure this is your issue but is an issue.
[EDIT]
Excellent Singleton guide for Flex SDK
Part 1
Part 2
Some Good writing on pure AS3 Singletons.
I would prolly start from scratch as your XML data is miss formatted.
your XML should resemble something like this.
<MainProject>
<MainUI>
<Thumbnail Name="Spring">
<Destination Name="Spring" Price="99" ratingPath="images/SP1/SP1rating.png" />
</Thumbnail>
<Thumbnail Name="Winter">
<Destination Name="Winter" Price="152" ratingPath="images/SP1/SP2rating.png" />
</Thumbnail>
</MainUI>
</MainProject>
Then you should have the following structure on your stage. These movieclips should be empty and already placed inside on your stage with instance name.
Stage
MenuUI MovieClip
ThumbNail1 MovieClip <- feed it thumbnail from the XML
ThumbNail2 MovieClip <- feed it thumbnail from the XML
ThumbNail3 MovieClip <- feed it thumbnail from the XML
ThumbNail4 MovieClip <- feed it thumbnail from the XML
This might be a bit too vague, just tell me if you need more details.
Hope this helps !
I have this small project HERE. Right now it barely does anything but make the character move.
I move the character by using <s:Move>. Now as you can see on the link to my project page, it moves to where you point the mouse and click. I want to be able to stop the character from moving if it hits another object or in this case, the "tree". Is there a script in AS3 that will let me detect collisions or controls that are overlapping each other?
If my question is a bit lacking information, please comment back here and I'll update it with more details as you need.
Please and thank you!
All DisplayObjects have a a method called hitTestObject(obj:DisplayObject) that tests when one object overlaps another. You can read about it in the Tree class, DisplayObject class, or any class that extends DisplayObject.
I've been playing around with HTML5 and canvas and sprites and I've managed to get myself a bit stumped. I was wonderring if there was anyone out there with just a bit more experience than me who could help me 'tune' this (and also make it work).
I've got all the code up on GitHub https://github.com/AlexChesser/jsSprite and have put a live demo up over here http://chesser.ca/jsSprite
What you can see from Test 01 and 02 is that I'm able to send the Minotaur directly to the on-page canvas, I'm able to animate the Minotaur on the canvas... but when I try to create the Minotaur and add it to another canvas - I'm getting a blank screen.
(attempting to implement https://github.com/AlexChesser/jsSprite/blob/master/03-animated_minotaur_on_canvas.php)
I know it must be something small and sill that I'm doing wrong here, but I've been staring at it for hours and I can't track down the problem.
I thought I'd try posting up here to see if there's anyone who can see it 'in one go' AND to maybe let me know if there's anything I can do better.
If you're interested in getting a little further under the hood on this stuff, the lion's share of the code for this is coming from a Blog post http://www.johnegraham2.com/web-technology/html-5-canvas-tag-sprite-animation-demo/
Anyways, maybe it's one of those things that "comes to you" once you've walked away from the problem for a little bit. Fingers crossed I can either figure it out or someone out ther ecan give me that little push in the right direction.
Thanks!
:)
I just stepped through your code.
MainContext.drawImage(m.canvas, 0, 0, m.width, m.height);
is occuring before drawFrame gets called because the image isn't ready yet.
So the mainContext.drawImage is drawing a canvas that has nothing painted on it yet.
Then the Sprite's canvas is loaded and ready to go, but its too late!
For confirmation, you can call MainContext.drawImage(m.canvas, 0, 0, m.width, m.height); in the browser console and you will see the minotaur appear.
As Simon Sarris said, you are drawing the canvas too soon. What you'll need to do is either loop until the sprite is ready, or add a callback to your sprite that is called after it draws.
You already have a function attached to the image's onload event, you should be okay to do something similar for the whole sprite.
I could really need some help here. I'm trying to create a simple image-fliping-app that looks something like this: http://www.skistar.com/sv/Are/Skidskola/Skistar-Experience/om/
My app, just like this one, loads it's images dynamically (using XML). My app will only contain 4 fliping objects (i.e. 8 images).
Has anybody some guidance or code for that matter that I can study to get this working?
That would be really sweet! :-)
// Nicke
img.scaleX = -1;
img.scaleY = -1;
you can fake the flipping with a simple scaleX scaling. Basically you've got the two images on top of each other and when the mouse is over them you scale down the visible one and when it's scaleX value equals 0, you start scaling up the other image. The reference point of the images should be centered.
I will try to give you an example but a bit busy at the moment.
Hope it helps,
Rob